Designprinzipien HCI & Psychologie SS2016

Transkript

1 Designprinzipien HCI & Psychologie SS2016 1

2 Was ist Design?

3 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) 3

4 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, 4

5 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 5

6 Design Kunst vs. Design Graphikdesign und Visual Interface Design Industriedesign und Interface Design Sehr umfangreiches Gebiet! 6

7 Heute nur ein paar Beispiele Generelle Prinzipien von visuellem Design Interaktionsdesign Hinweise auf spezifische Guidelines 7

8 Weniger ist mehr Visuelle Überladung vermeiden Keine überflüssigen Elemente, die den/die UserIn ablenken 8

9 Layering: Design in Schichten zur Organisation von Elementen 9

10 Layering: Design in Schichten um Elemente zu betonen (hier: tiefer liegender Hintergrund) 10

11 Layering: Design in Schichten um den Aufmerksamkeitsfokus zu lenken Colin Ware: Visual Thinking for Design 11

12 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 page=few_hues_many_values 12

13 Popout-Effekte ( > Wahrnehmungspsychologie) Colin Ware: Visual Thinking for Design 13

14 Popout-Effekte - Einschränkungen Finden Sie die drei grünen Quadrate! Colin Ware: Visual Thinking for Design 14

15 Visueller Flow 15

16 Visueller Flow : gut und schlecht 16

17 Popout & Visueller Flow insbesondere wichtig für Web Design Menschen scannen, sie lesen nicht 17

18 Symmetrie und Balance gibt einem Interface ein solides, stabiles Aussehen 18

19 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 19

20 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

21 Implementierungszentriertes Interface Design Medizinische Oberfläche zur Steuerung eines Augenlasers Quelle: topcon-medical.eu

22 Metaphern Anlehnung an Objekte aus realer Welt Jedoch: nicht einfach blind die reale Welt kopieren! Kompromiss zwischen Metapher und Usability 22

23 Metaphern Beispiel: Sortierung von Dateien in Ordner Nachteile?

24 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

25 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

26 Idiome: Beispiele Desktop: Windows-Start- Button Windows 8 > Umdenken, weil Paradigmenwechsel zu Mobile: App-Struktur Ansonsten vieles an GUIs idiomatisch: Fenster, Titelleiste, Schließen-Button, Links,

27 Affordances Angebotscharakter / Aufforderungscharakter Objekte teilen uns durch ihre Gestalt mit, wie wir sie benutzen können 27

28 Affordances Hallo, Computer?

29 Direkte Manipulation (DM) Ersetzen von komplexer Kommandozeilensyntax mit direkter, visueller Manipulation von Objekten Sichtbarkeit von Objekten und Aktionen Schnelle, reversible, inkrementelle Aktionen 29

30 Direkte Manipulation BumpTop 3D Multi-Touch Desktop

31 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 31

32 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 32

33 Spezifische Design Guidelines z.b. Apple Human Interface Guidelines 33

34 Spezifische Design Guidelines In diesem Kurs wichtig: ios: UserExperience/Conceptual/MobileHIG Android: Andere Beispiele: Web Design: Ubuntu: 34

35 Design Patterns Bieten Orientierung und gängige Konventionen Design Patterns for mobile: Design patterns for Android Wear: patterns.html

36 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! 36

37 Zum Weiterlesen Quelle: amazon.de

38 FRAGEN? Quelle: Katerina Kamprani, Project The Uncomfortable 38