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