Designprinzipien - univie.ac.atvda.univie.ac.at/Teaching/HCI/15s/LectureNotes/04_Design... ·...

Designprinzipien HCI & Psychologie SS2015

1

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)

2



• 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, …

3




• Industriedesign und Interface Design

• Müssen immer häufiger Hand in Hand arbeiten, da mehr und mehr Objekte software-fähig hergestellt werden

• —> Embedded Systems4




• Industriedesign und Interface Design

Sehr umfangreiches Gebiet!

5


Heute nur ein paar Beispiele…

• Generelle Prinzipien von

• visuellem Design

• Interaktionsdesign

• Hinweise auf spezifische Guidelines

6


Weniger ist mehr

• Visuelle Überladung vermeiden

• Keine überflüssigen Elemente, die den/die UserIn ablenken

7


Layering: Design in Schichten

• … zur Organisation von Elementen

8



• … um Elemente zu betonen (hier: tiefer liegender Hintergrund)

http://designinginterfaces.com/firstedition/index.php?page=Deep_Background

9

http://designinginterfaces.com/firstedition/index.php?page=Deep_Background



• … um den Aufmerksamkeitsfokus zu lenken

Colin Ware: Visual Thinking for Design

10


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

11

http://www.colourlovers.com/

http://colorbrewer2.org/

http://designinginterfaces.com/firstedition/index.php?page=Few_Hues_Many_Values


Popout-Effekte (—> Wahrnehmungspsychologie)


12


• Finden Sie die drei grünen Quadrate!

Popout-Effekte - Einschränkungen


13


Visueller „Flow“

14


Visueller „Flow“: gut und schlecht

15


Popout & Visueller Flow

•insbesondere wichtig für Web Design

•Menschen scannen, sie lesen nicht

16


Symmetrie und Balance

• gibt einem Interface ein solides, stabiles Aussehen

17


Konzeptionelles Design• Konzeptionelles Design

• Überträgt NutzerInnenanforderungen in ein konzeptionelles Modell

• 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…

18


Interaktionsdesign: Paradigmen• Implementierungszentriert:

• basiert auf Verständnis der Programmfunktionen (z.B. medizinische Interfaces)

• Metaphorisch:

• basiert auf Intuition

• Idiomatisch

• basiert auf Prinzipien —> LernprozesseQuelle: Cooper et. al, „About Face“, 4. Auflage, 2014, Wiley and Sons


Implementierungszentriertes Interface Design

Quelle: topcon-medical.eu

Medizinische Oberfläche zur Steuerung eines

Augenlasers

http://topcon-medical.eu


• Anlehnung an Objekte aus realer Welt

• Jedoch: nicht einfach blind die reale Welt kopieren!

Metaphern

http://barbarism.net/2010/03/marco-on-overdoing-the-interface-metaphor/

Kompromiss zwischen Metapher und Usability

21


Metaphern

• Beispiel: Sortierung von Dateien in Ordner

• Nachteile?


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


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


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


Affordances• „Angebotscharakter“ / „Aufforderungscharakter“

• Objekte teilen uns durch ihre Gestalt mit, wie wir sie benutzen können

26


Affordances• „Hallo, Computer?“

https://www.youtube.com/watch?v=Hh3C0vyyttk

https://www.youtube.com/watch?v=Hh3C0vyyttk


Direkte Manipulation (DM)• Ersetzen von komplexer

Kommandozeilensyntax mit direkter, visueller Manipulation von Objekten

• Sichtbarkeit von Objekten und Aktionen

• Schnelle, reversible, inkrementelle Aktionen

28


Direkte Manipulation• BumpTop 3D Multi-Touch Desktop

https://www.youtube.com/watch?v=6jhoWsHwU7w

https://www.youtube.com/watch?v=6jhoWsHwU7w


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

30


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

31


Spezifische Design Guidelines• z.B. Apple Human Interface Guidelines

https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html

32

https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html


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/

33

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG

https://developer.android.com/design/

http://www.webstyleguide.com/wsg3/index.html

http://design.ubuntu.com/


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

http://beta.pttrns.com/

http://www.mobile-patterns.com/

http://www.mobiledesignpatterngallery.com/

https://developer.android.com/design/wear/patterns.html


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!

35


Zum Weiterlesen…

Quelle: amazon.de

http://amazon.de

FRAGEN?

37

Quelle: Katerina Kamprani, Project „The Uncomfortable“http://www.kkstudio.gr/#the-uncomfortable

http://www.kkstudio.gr/#the-uncomfortable

Designprinzipien - univie.ac.atvda.univie.ac.at/Teaching/HCI/15s/LectureNotes/04_Design... ·...

Documents

Transcript of Designprinzipien - univie.ac.atvda.univie.ac.at/Teaching/HCI/15s/LectureNotes/04_Design... ·...