Matthias Edler-Golla
URL meiner Scripte: http://scripte.matthias-edler-golla.de/th-deggendorf/
Prof. für Web & Interaction Design an der Hochschule München
matthias.edler-golla@hm.edu
Und wer sind Sie?
… bitte nur ganz kurz vorstellen …
Gebrauchsanweisung meiner Scripte
… die Taste „Null“ (0) ruft den 1. Slide der Präsentation auf …
Responsive Design
Meine Scripte können auf fast allen modernen, Internet-fähigen Geräten angeschaut werden.
Probiert es doch mal auf Eurem Smartphone oder Tablet aus! Dort gibt es sogar waagrechte Wischgesten.
Themen heute
Vormittags
- Mentale Modelle
- User- bzw. Human Centered Design
- Stakeholder im UX-Design-Prozess
- Definition Software-Prototyp
- Participatory Design
- Paper Prototyping
- Personas, Szenarios, Storyboards
- Brainstorming im Team
Nachmittags
- Ten Usability Heuristics
- Gestaltgesetze
- Fitt's Law, Hick's Law, Murphy's Law
- Designing for Touch
- Pop, Marvel & Invision
- Ausarbeiten der Konzepte/Ideen im Team
Die Tür
Wie sieht für Sie eine typische Tür aus? Was sind die wichtigsten Elemente und wo befinden sich diese?
Skizzieren Sie diese bitte auf ein Post-it!
Eine kurze Geschichte …
… die erstaunlich viel mit „User Experience“ zu tun hat!
Deutsche Bahn, Behindertentoilette: Eingangssituation
Behindertentoilette: Türdetail, außen
Behindertentoilette: Blick hinein
Behindertentoilette: Blick hinaus
Behindertentoilette: Blick hinaus (2)
Behindertentoilette: Tür zu?
Was ging da schief?
Sogar die Süddeutsche Zeitung hat dazu eine Glosse geschrieben …
Bad doors are everywhere
Don Norman started complaining about doors over 25 years ago. Doors shouldn't need instructions – the shape of them can guide you through just fine. So why do so many doors need instruction manuals right on the side of them?
Don Norman hat ein sehr empfehlenswertes Buch geschrieben, das jede(r) Designer*in gelesen haben sollte: The Design of Everyday Things
Wichtigste UX-Regel
stupid von Laura Lewis
Don't make the user feel stupid!
Unser Mentales Modell „Tür“ ist anders!
Mental models come from prior experience with similar devices, assumptions they have, and also from their direct experience with the product or device.
Mentale Modelle
A mental model is the representation that a person has in his mind about the object he is interacting with.
Video mit weiteren Erklärungen dazu – bitte anschauen!
Konzeptionelles Modell [1]
iDrive von Benjamin Kraft
A conceptual model is the actual model that is given to the person through the design and interface of the actual product.
Als Designer realisieren wir Konzeptionelle Modelle und hoffen, dass diese den Mentalen Modellen der Benutzer entsprechen …
Konzeptionelles Modell [2]
Segway-the-City von Jon
Das Segway entspricht keinem Mentalen Modell, wie ein Verkehrsmittel auszusehen hat – und wird deswegen kaum angenommen …
Mismatch of Models
Flashing-Fog-Lights von calians.sevan, Red Beetle von Mishari Alreshaid
… if there is a mismatch between the person’s mental model and the product’s conceptual model, then the product or Web site will be hard to learn, hard to use, or not accepted.
User-centered design: Für wen entwerfen wir?
Crowd: Foto von davidChief
User-centered design zielt darauf ab, Produkte so zu gestalten, dass sie über eine hohe Gebrauchstauglichkeit (Usability) verfügen. Der (zukünftige) Nutzer eines Produktes wird dazu in den Mittelpunkt des Entwicklungsprozesses gestellt.
Ich benutze eigentlich noch lieber den Begriff Human Centered Design!
Was ist Human Centered Design?
Human-centered design is a creative approach to problem solving and the backbone of our work at IDEO.org. It’s a process that starts with the people you’re designing for and ends with new solutions that are tailor made to suit their needs.
Human Centered Design
Wir fangen bei den Wünschen und Bedürfnissen der Menschen an – erst dann kommen die Überlegungen zur Herstellbarkeit…
Design Thinking
Design Thinking basiert auf der Annahme, dass Probleme besser gelöst werden können, wenn Menschen unterschiedlicher Disziplinen in einem die Kreativität fördernden Umfeld zusammenarbeiten, gemeinsam eine Fragestellung entwickeln, die Bedürfnisse und Motivationen von Menschen berücksichtigen und dann Konzepte entwickeln, die mehrfach geprüft werden.
Eine gute Zusammenfassung, was Design Thinking alles umfasst, finden Sie bei Wikipedia!
UX (User Experience) Design
Illustration von WitFlow
Der Begriff User Experience (Abkürzung UX, deutsch „Nutzererlebnis“) umschreibt alle Aspekte der Erfahrungen eines Nutzers bei der Interaktion mit einem Produkt, Dienst, Umgebung oder Einrichtung.
Elements of User Experience (UX)
Eine Software-Applikation (oder Website) muss von unten nach oben entwickelt werden!
- Wozu benötigen die Benutzer das Programm?
- Was soll die Applikation können?
- Welche inhaltlichen und funktionalen Anforderungen müssen eingehalten werden?
- Wie spielen Information Architecture und Interaction Design zusammen?
- Wie ist das Information Design strukturiert?
- Und – ganz am Schluss – wie sieht das Visuelle Design aus?
Stakeholder bei UX
Für ein erfolgreiches, gut durchdachtes Projekt müssen alle Stakeholder von Anfang an an einen Tisch geholt werden!
Typische Stakeholder in der Produktentwicklung
Firmenchef, Marketing-Leiter, Auftraggeber
- will (natürlich) Erfolg am Markt
- möchte kurze Entwicklungszeiten
- fordert überschaubare Kosten (auch bei Weiterentwicklung und Pflege)
- kennt Konkurrenz-Produkte (Gefahr von „Me-too-Ideen“)
Entwickler/Programmierer
- will soliden, einfach pflegbaren Code schreiben
- nutzt gerne „Frameworks“, um auf Standardlösungen zugreifen zu können
- möchte so arbeiten, dass der Code möglichst „Maschinen-optimiert“ funktioniert
- mag keine Sonderfälle („DRY“ – Don't repeat yourself)
- hat gerne alle Features unmittelbar sichtbar
Designer/Usability Experte
- mag keine „08/15“-Lösungen – und entwirft häufig außerhalb der Möglichkeiten des Frameworks
- reduziert Inhalte auf das Wesentliche – und will deswegen u.U. Features weglassen
- ist mehr an einer guten Benutzerführung als am maschinenoptimierten Code interessiert
- will mehr als nur „Me-too-Produkte“ entwerfen
Wann ist es zu spät, dass Stakeholder miteinander reden?
So nicht – es geht viel zu viel Wissen verloren!
Es macht keinen Sinn, wenn nur eine Gruppe von Experten das Projekt bestimmt…
Wann sollen die Stakeholder miteinander reden & arbeiten?
Immer wieder, von Anfang an!
Im Sinne des Agilen Developement sollten die Zyklen eher kurz sein…
Wie versteht man, was der andere meint?
Durch das gemeinsame Entwickeln eines (einfachen) Prototypen können unmittelbar die Ideen aller beteiligten Parteien deutlich gemacht werden.
Definition: Prototyp
Vorab-Exemplar, erste Ausführung eines Produktes vor der Serienfertigung, das zur Erprobung von Eigenschaften dient.
Vier Dimensionen eines Software-Prototypen (1)
Breite
Wie viel der tatsächlichen Funktionalität wird im Prototypen dargestellt? Für einen sinnvollen Usability Test muss der Prototyp ausreichend „Breite“ haben, damit vernünftige Test-Ergebnisse herauskommen.
aus: Paper Prototyping, Position 2795ff
Vier Dimensionen eines Software-Prototypen (2)
Tiefe
Ist vielleicht der wichtigste Faktor beim Usability Test, weil eine ausreichende Tiefe dem User das Ausprobieren ermöglicht. Tiefe bedeutet hierbei, dass der Benutzer nicht nur eine Auswahlmöglichkeit hat und eben auch nicht nur ein Auswahlpfad zum gewünschten Ziel führt.
aus: Paper Prototyping, Position 2795ff
Vier Dimensionen eines Software-Prototypen (3)
Aussehen
Bezieht sich auf die Visuellen Aspekte des Prototypen (Farben, Schriften, Grafiken, Raster usw.)
aus: Paper Prototyping, Position 2795ff
Vier Dimensionen eines Software-Prototypen (4)
Interaction
Wie reagiert der Prototyp? Ist das Verhalten mit dem Verhalten mit dem fertigen Produkt vergleichbar? Werden die gleichen Interface-Elemente (Mouse, Tastatur, Touchscreen … ) verwendet, wie später beim „echten“ Produkt?
aus: Paper Prototyping, Position 2795ff
Prototyping-Sequenz
… es gibt noch viele weitere Arten von Software-Prototypen
Umso konkreter das Interface wird, desto aufwendiger werden die Prototypen – und desto schwieriger wird es, grundsätzliche Änderungen zu machen!
… aus diese Grund sollten schon möglichst viele Interface- und Bedienvarianten bei den Papier-Prototypen getestet werden! Da ist der Aufwand am geringsten…
Iterative Design-Entwicklung
Egal, welche Art von Prototypen Sie erstellen:
Testen Sie Ihre Ideen immer mit mindestens 4 – 5 potentiellen BenutzerInnen!
Designmodell vs. Prototyp
Diplomarbeit „Stehgerät“ von Daniel Gilgen & Matthias Edler-Golla
Ein Designmodell hat seinen Schwerpunkt auf dem Aussehen, die Dimensionen Breite, Tiefe und Interaction können daran nur sehr eingeschränkt überprüft werden!
Rough-looking Prototype
mintyboost von ladyada
A rough-looking prototype can encourage users and other stakeholders to respond in a more creative manner.
Paper Prototyping, Position 2815
Low Fidelity vs. High Fidelity
Especially in the early stages of a project, you might deliberately choose a prototyping method with a rough look to get the benefit of honest user feedback
Paper Prototyping, Position 2815
Participatory Design
EFEU Paper Prototyping 2011
Participatory design is an approach to design attempting to actively involve all stakeholders in the design process
Wie bringt man Stakeholder dazu, miteinander zu reden & zu entwerfen?
Tom Wujec: Verzwickte Probleme lösen – Wie toasten Sie eigentlich Ihr Brot?
Eine Scheibe Brot zu toasten scheint nicht besonders schwer zu sein – bis man gebeten wird, den Vorgang Schritt für Schritt aufzuzeichnen. Tom Wujec fragt die Menschen gerne, wie sie Toast machen, da dies unverhoffte Hinweise darauf gibt, wie man die kompliziertesten Probleme lösen kann.
Paper Prototyping in der Brainstorming Phase
It's probably most accurate to describe paper prototyping as a subset of participatory design
Paper Prototyping, Position 294
Paper Prototyping zur Reduktion von Komplexität
By sketching first you allow yourself time to really focus on the idea you need in a rough enough stage to not get hung up on things like imagery and color usage and kerning
Zwei Stufen von Papier-Prototypen (1)
1. Stufe: Papier-Prototyp zum gemeinsamen Brainstorming:
- Umfang/Funktionalität
- Wording
- Informations-Architektur
- Grob-Layout
- Experimente zu Leserichtung & Bedienabläufen
- …
Zwei Stufen von Papier-Prototypen (2)
2. Stufe:
Produktion von ausreichend Screen-Material als Vorbereitung für das User Testing
Benötigte Materialien zum Erstellen des Papier Prototypen
- Schneideunterlage und -Lineal (wenn man mit Skalpell/Cutter arbeiten möchte)
- Schere
- Reichlich Papier
- Post-It® Notes in verschiedenen Größen und Farben
- Tesa-Film
- Doppelseitige Klebepads
- Karteikarten
- Fixogum o.ä. (Klebeverbindung soll wieder getrennt werden können)
- Korrekturband
- diverse, nicht zu dünne Filzstifte
- evtl. vorgefertigte Templates (Browser, Hardware-Proportionen usw.)
Paper Prototyping: A How-To Video (1)
$ 68.- // Bezug über die Nielsen Norman Group
- Erstellen von Papier-Prototypen mit einfachen Mitteln: 2.10 bis 5.26
- Interface Widgets und Interaction: 5.40 bis 9:55
Rollenverteilung
Beim Testen mit Papier-Prototypen sind mindestens 3 Personen notwendig:
- Der Computer – gibt der Testperson jeweils den richtigen „Screen“
- Der Beobachter/Moderator – bringt die Testperson u.a. dazu, laut zu denken, beobachtet, dokumentiert und befragt
- Die Testperson – sollte die geforderte Zielgruppe präsentieren
Zusätzlich kann man jemanden dazu beauftragen, den Test zu filmen
Paper Prototyping: A How-To Video (2)
$ 68.- // Bezug über die Nielsen Norman Group
- Testing Low Fidelity Website: 9:55 bis 21.24
- Testing Hardware-Based Interactions: 29:30 bis Ende
Vorbereitung Paper Prototyping User-Test
Wenn man unsicher ist, welche Bedienvariante die sinnvollste ist, sollte man mehrere Varianten erstellen und diese dann bei den User-Tests überprüfen …
Task Design
Welche Aufgaben soll die Test-Person bekommen?
Test Material
Alle den Tasks entsprechende „Screens“und Interface-Widgets müssen vorbereitet werden.
Rollenverteilung
Wer spielt den Computer, die Moderatorin, die Testperson?
Testablauf
In welcher Reihenfolge soll getestet werden?
Paper Prototyping: Der Artikel
Paper prototypes invite people with little-to-no technical background into the design process
Paper Prototyping: Das Buch
http://www.paperprototyping.com/ von Carolyn Snyder
... a wonderful book with all the practical information you need to make paper prototypes ...
Jakob Nielsen, Principal, Nielsen Norman Group
Paper Prototyping: Druckvorlagen
Zielgruppen, Personas, Szenarios & Storyboards
Bevor man versucht, irgendeine Art von Prototypen zu erstellen, sollte man mittels Personas, Szenarios und Storyboards eine konkrete Vorstellung davon haben, für wen man etwas entwickelt!
Zielgruppe = graue Masse?
Empathy, Einfühlen und Entwerfen für eine „graue Masse“ ist schwer!
Personas
Iowa City von Alan Light
Die Persona stellt einen Prototyp für eine Gruppe von Nutzern dar, mit konkret ausgeprägten Eigenschaften und einem konkreten Nutzungsverhalten.
Personas sind fiktive Personen, die der Zielgruppe entsprechen und helfen, sich den Umgang mit Produkt/Website/Software besser vorstellen zu können
Für jede Zielgruppe sollte es folglich mindestens eine Persona geben!
Negative Personas
Auch das kann manchmal hilfreich sein, um eine klare Abgrenzung zu erreichen: Personas, für die das jeweilige Produkt nicht gedacht sind …
weitere gute Online-Quelle
Beispiel-Persona
Personas are archetypal users that represent the needs of larger groups of users, in terms of their goals and personal characteristics. They act as ‘stand-ins’ for real users and help guide decisions about functionality and design.
Man erzeugt eine Persona, damit man sich in den (zukünftigen) Nutzer hineinfühlen kann! → Empathie …
Demo
Design Persona
If your website were a person, who would it be? Is it serious, buttoned up, all business, yet trustworthy, and capable? Is it a wisecracking buddy that makes evan mundane tasks fun?
Following a similar structure as a user persona, you can flesh out the personality of your design by creating a design persona. Personality can manifest itself in an interface through visual design, copy, and interactions.
A design persona describes the methods of channeling personality in each of these areas, and will help a team of web professionals construct a unified and consistent result.
Szenarios
Ein Szenario ist die Beschreibung, wie ein Mensch mit einem System interagiert. Szenarios helfen, gestalterischen Überlegungen auf die Bedürfnisse des Anwenders zu focussieren. Diese Bedürfnisse unterscheiden sich deutlich von technischen und geschäftlichen Rahmenbedingungen.
Beim Schreiben von Szenarios ist es wichtig, in einfachen Worten die Interaction zu beschreiben, die stattfinden soll.
Beispiel eines guten Szenario-Textes
Es ist Dienstag Nachmittag und Klaus muss nach Frankfurt fliegen. Er ist spät dran, hat aber nicht genug Geld fürs Taxi. Er sucht schnell einen Geldautomaten und identifiziert sich an der Maschine.
Klaus teilt dem Geldautomaten mit, dass er € 100.- von seinem Girokonto abbuchen möchte und dass er den Betrag in € 20.- Scheinen ausgezahlt haben möchte. Damit kann er sicher sein, dass der Taxi-Fahrer keine Probleme beim Geldwechseln hat.
Er meldet sich vom Geldautomat ab, auf die Ausgabe einer Quittung verzichtet er.
Der Text ist gut, weil er auf technischen Jargon verzichtet und auch keine Lösungen (EC-Karte, PIN usw.) vorwegnimmt, die u.U. die Kreativität in der Entwurfsphase einschränken können!
Storyboards
Je komplexer der zu präsentierende Inhalt, desto entscheidender wird die Struktur der Argumentation. Der Storyboard-Ansatz ist eine Methode, um komplexe Themen in nachvollziehbare und überzeugende Präsentationen […] umzusetzen.
Inhalt von Storyboards
- Es geht darum, Ideen zu kommunizieren, nur sehr eingeschränkt um eine „schöne Zeichnung“
- ähnlich wie ein Comic
- Menschen und deren Aufgaben zeigen
- kaum oder gar kein Focus auf das eigentliche Interface – es muss noch nicht gezeigt werden, welche Knöpfe es gibt und wie diese positioniert sind!
- dafür aber den Ablauf (z.B. wie etwas zu bedienen ist) deutlich machen
- andeuten, wo und wann sich die „Story“ ereignet
- Nicht in Details verlieren!
See What I Mean
See What I Mean $ 22.-
Using images and text in unique ways, comics can engage readers in ways traditional methods can't. In See What I Mean, you'll learn how to create comics about your products and processes
Swimlane
Swimlanes are a great tool for helping clients understand users, business needs and technology all at once. They help bridge the differences between multiple stakeholders by showing all the moving parts of an experience in one document
Swimlanes zeigen gleichzeit, was der Benutzer und das System machen, zusätzlich ist noch Platz für weitere Informationen…
Action!
Brainstorming: 3 Teams | 1 Thema
SmartPhone/Tablet im Arzt/Krankenhaus-Einsatz (Visite, Patientendaten, Pflegepersonal, Orientierung …)
Vormittags
- Teams von 3 Leuten
- ca. 60 min Brainstorming-Session zum Entwickeln geeigneter Konzepte, Personas & Szenarios
- Präsentation der Arbeitsergebnisse; pro Team ca. 5 min
Nachmittags
- ca. 60 min zum Erstellen eines Papier-Prototypen (einfache Abläufe der wichtigsten Schritte sollen möglich sein)
- Präsentation der Arbeitsergebnisse; pro Team ca. 10 min
Auslosen der Team-Mitglieder
Seven von Niklas Morberg
Bitte merken Sie sich, in welche Gruppe Sie gelost wurden – diese Teams arbeiten auch am Nachmittag zusammen!
via Javascript
Vielen Dank für Ihre Aufmerksamkeit!
war-of-the-roses von jm3
Jetzt sind Sie dran …