Designprinzipien HCI & Psychologie SS2016
1
Was ist „Design“?
Svenja Schröder, Michael Sedlmair
Design • Kunst vs. Design • Ziel von Kunst: ein betrachtbares Artefakt
erschaffen, welches eine ästhetische Reaktion hervorruft (Selbstdarstellung)
• Ziel von Design: die Repräsentation finden, welche bestmöglich eine spezifische Information kommuniziert / vermittelt (zielorientiert)
Svenja Schröder, Michael Sedlmair
3
Design • Kunst vs. Design • Graphikdesign und Visual Interface Design • Ästhetische Belange werden innerhalb eines funktionellen Rahmens umgesetzt
• Handwerkszeug von Interface-DesignerInnen: • Farbpalette(n), Typografie, Form, Komposition, … • und Interaktionen, Verhalten, Fähigkeiten, … Svenja Schröder, Michael Sedlmair
4
Design • Kunst vs. Design • Graphikdesign und Visual Interface Design • Industriedesign und Interface Design • Müssen immer häufiger Hand in Hand arbeiten, da mehr und mehr Objekte software-fähig hergestellt werden
• —> Embedded Systems Svenja Schröder, Michael Sedlmair
5
Design • Kunst vs. Design • Graphikdesign und Visual Interface Design • Industriedesign und Interface Design
Sehr umfangreiches Gebiet! Svenja Schröder, Michael Sedlmair
6
Heute nur ein paar Beispiele… • Generelle Prinzipien von • visuellem Design • Interaktionsdesign
• Hinweise auf spezifische Guidelines
Svenja Schröder, Michael Sedlmair
7
Weniger ist mehr • Visuelle Überladung vermeiden • Keine überflüssigen Elemente, die den/die UserIn ablenken
Svenja Schröder, Michael Sedlmair
8
Layering: Design in Schichten • … zur Organisation von Elementen
Svenja Schröder, Michael Sedlmair
9
Layering: Design in Schichten • … um Elemente zu betonen (hier: tiefer liegender Hintergrund)
http://designinginterfaces.com/firstedition/index.php?page=Deep_Background Svenja Schröder, Michael Sedlmair
10
Layering: Design in Schichten • … um den Aufmerksamkeitsfokus zu lenken
Colin Ware:Visual Thinking for Design Svenja Schröder, Michael Sedlmair
11
Wenige Farbtöne, viele Abstufungen • Ein bis maximal drei Hauptfarbtöne im Interface, dafür eine Farbpalette von ausgewählten Farbhelligkeiten oder auch Farbsättigungen dieser Farbtöne
• http://www.colourlovers.com/ • http://colorbrewer2.org/
http://designinginterfaces.com/firstedition/index.php? page=Few_Hues_Many_Values Svenja Schröder, Michael Sedlmair
12
Popout-Effekte
(—> Wahrnehmungspsychologie)
Colin Ware:Visual Thinking for Design Svenja Schröder, Michael Sedlmair
13
Popout-Effekte - Einschränkungen • Finden Sie die drei grünen Quadrate!
Colin Ware:Visual Thinking for Design Svenja Schröder, Michael Sedlmair
14
Visueller „Flow“
Svenja Schröder, Michael Sedlmair
15
Visueller „Flow“: gut und schlecht
Svenja Schröder, Michael Sedlmair
16
Popout & Visueller Flow • insbesondere wichtig für Web Design • Menschen scannen, sie lesen nicht
Svenja Schröder, Michael Sedlmair
17
Symmetrie und Balance • gibt einem Interface ein solides, stabiles Aussehen
Svenja Schröder, Michael Sedlmair
18
Konzeptionelles Design • Konzeptionelles Design • Überträgt NutzerInnenanforderungen in ein konzeptionelles Modell (—> beabsichtigtes
Mentales Modell der NutzerInnen) mit Metaphern/Analogien, Konzepten, Beziehungen, etc.
• Findet vor dem Visual Interface Design statt
• Zentrale Guidelines für konzeptionelles Design: • Echte Anforderungen von Lösungsideen trennen • Unvoreingenommen bleiben, aber niemals die NutzerInnen und deren Kontext vergessen • Ideen so oft wie möglich mit den KundInnen diskutieren • Low-Fidelity-Prototypen nutzen um schnell Feedback zu bekommen • Iterieren, iterieren, iterieren…
Svenja Schröder, Michael Sedlmair
19
Interaktionsdesign: Paradigmen • Implementierungszentriert:
• basiert auf Verständnis der Programmfunktionen (z.B. medizinische Interfaces)
• Metaphorisch:
• basiert auf Intuition
• Idiomatisch
• basiert auf Prinzipien —> Lernprozesse Quelle: Cooper et. al, „About Face“, 4. Auflage, 2014, Wiley and Sons
Svenja Schröder, Michael Sedlmair
Implementierungszentriertes Interface Design Medizinische Oberfläche zur Steuerung eines Augenlasers
Svenja Schröder, Michael Sedlmair
Quelle: topcon-medical.eu
Metaphern • •
Anlehnung an Objekte aus realer Welt Jedoch: nicht einfach blind die reale Welt kopieren!
Kompromiss zwischen Metapher und Usability http://barbarism.net/2010/03/marco-on-overdoing-the-interface-metaphor/ Svenja Schröder, Michael Sedlmair
22
Metaphern • Beispiel: Sortierung von Dateien in Ordner
• Nachteile?
Svenja Schröder, Michael Sedlmair
Nachteile von Metaphern • Fehlende Flexibilität • Es gibt nicht viele gute Metaphern • Schlechte Skalierung • Kulturelle Limitierungen • Bezug auf mechanische Artefakte überholt • „Never bend your interface to fit a metaphor“
• Trend seit iOS7, Android, Windows Phone:
Idiom-zentriertes Interface Design
Quelle: Cooper et. al, „About Face“, 4. Auflage, 2014, Wiley and Sons Svenja Schröder, Michael Sedlmair
Idiome • „Design of principles“ • Basiert auf Erlernen von einfachen, nicht-metaphorischen Verhaltens- und visuellen Idiomen
• Gute Idiome müssen nur 1x erlernt werden
• Schnelle Erinnerung • Können weder intuitiv erkannt noch durch Schlussfolgerungen verstanden werden
• weder metaphorisch noch implementierungszentriert • dafür sehr generisch und flexibler Quelle: Cooper et. al, „About Face“, 4. Auflage, 2014, Wiley and Sons Svenja Schröder, Michael Sedlmair
Idiome: Beispiele • Desktop: „Windows-StartButton“
• Windows 8 —> Umdenken, weil Paradigmenwechsel zu…
• Mobile: App-Struktur • Ansonsten vieles an GUIs
idiomatisch: Fenster, Titelleiste, Schließen-Button, Links, …
Svenja Schröder, Michael Sedlmair
Affordances • „Angebotscharakter“ / „Aufforderungscharakter“ • Objekte teilen uns durch ihre Gestalt mit, wie wir sie benutzen können
Svenja Schröder, Michael Sedlmair
27
Affordances •
„Hallo, Computer?“
https://www.youtube.com/watch?v=Hh3C0vyyttk
Svenja Schröder, Michael Sedlmair
Direkte Manipulation (DM) • Ersetzen von komplexer
Kommandozeilensyntax mit direkter, visueller Manipulation von Objekten
• Sichtbarkeit von Objekten und Aktionen
• Schnelle, reversible, inkrementelle Aktionen
Svenja Schröder, Michael Sedlmair
29
Direkte Manipulation •
BumpTop 3D Multi-Touch Desktop
https://www.youtube.com/watch?v=6jhoWsHwU7w
Svenja Schröder, Michael Sedlmair
Vorteile von DM • AnfängerInnen können die grundlegenden Funktionen schnell erlernen (Bsp.: Papierkorb statt „rm -rf“)
• Erfahrene NutzerInnen können extrem schnell eine große Anzahl von
Aufgaben erledigen, sogar neue Funktionalitäten definieren (Bsp.: XCode)
• Sporadische NutzerInnen können sich leicht Konzepte auch über längere Zeit merken
• Fehlermeldungen werden selten gebraucht • NutzerInnen haben unmittelbares Feedback, ob ihre Aktionen erfolgreich waren
• NutzerInnen sind weniger ängstlich („less anxiety“) • NutzerInnen gewinnen Selbstvertrauen und hat das Gefühl die Anwendung unter Kontrolle zu haben
Svenja Schröder, Michael Sedlmair
31
Nachteile von DM • Manche Menschen nehmen Metaphern zu wortwörtlich • Beispiel: Laufwerk unter MacOS auswerfen
• Nicht alle Aufgaben können durch Objekte beschrieben und nicht alle Aktionen können direkt erledigt werden
• Manche Aufgaben werden besser durch Delegation erledigt • e.g. spell checking
• Verschwendung von Bildschirmplatz • Zeigen per Maus meistens langsamer als Tastatur-Shortcuts Svenja Schröder, Michael Sedlmair
32
Spezifische Design Guidelines • z.B. Apple Human Interface Guidelines
https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html
Svenja Schröder, Michael Sedlmair
33
Spezifische Design Guidelines • In diesem Kurs wichtig: • iOS: https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG
• Android: https://developer.android.com/design/
• Andere Beispiele: • Web Design: http://www.webstyleguide.com/wsg3/index.html • Ubuntu: http://design.ubuntu.com/ Svenja Schröder, Michael Sedlmair
34
Design Patterns • Bieten Orientierung und gängige Konventionen • Design Patterns for mobile: • http://beta.pttrns.com/ • http://www.mobile-patterns.com/ • http://www.mobiledesignpatterngallery.com/ • Design patterns for Android Wear: • https://developer.android.com/design/wear/ patterns.html
Svenja Schröder, Michael Sedlmair
Zusammenfassung • Viele generelle Designprinzipien • Visuelles Design: weniger ist mehr, Layers, Farben, Popout, visueller Flow, Symmetrie
• Interaktionsdesign: Affordances, Idiome, Direkte Manipulation
• Viele spezifische Design Guidelines & Patterns
• So nah wie möglich an das konzeptionelle Modell herankommen!
Svenja Schröder, Michael Sedlmair
36
Zum Weiterlesen…
Quelle: amazon.de Svenja Schröder, Michael Sedlmair
FRAGEN?
Quelle: Katerina Kamprani, Project „The Uncomfortable“ http://www.kkstudio.gr/#the-uncomfortable
38