Post on 07-Jul-2020
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
Svenja Schröder, Michael Sedlmair
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, …
3
Svenja Schröder, Michael Sedlmair
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 Systems4
Svenja Schröder, Michael Sedlmair
Design• Kunst vs. Design
• Graphikdesign und Visual Interface Design
• Industriedesign und Interface Design
Sehr umfangreiches Gebiet!
5
Svenja Schröder, Michael Sedlmair
Heute nur ein paar Beispiele…
• Generelle Prinzipien von
• visuellem Design
• Interaktionsdesign
• Hinweise auf spezifische Guidelines
6
Svenja Schröder, Michael Sedlmair
Weniger ist mehr
• Visuelle Überladung vermeiden
• Keine überflüssigen Elemente, die den/die UserIn ablenken
7
Svenja Schröder, Michael Sedlmair
Layering: Design in Schichten
• … zur Organisation von Elementen
8
Svenja Schröder, Michael Sedlmair
Layering: Design in Schichten
• … um Elemente zu betonen (hier: tiefer liegender Hintergrund)
http://designinginterfaces.com/firstedition/index.php?page=Deep_Background
9
Svenja Schröder, Michael Sedlmair
Layering: Design in Schichten
• … um den Aufmerksamkeitsfokus zu lenken
Colin Ware: Visual Thinking for Design
10
Svenja Schröder, Michael Sedlmair
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
Svenja Schröder, Michael Sedlmair
Popout-Effekte (—> Wahrnehmungspsychologie)
Colin Ware: Visual Thinking for Design
12
Svenja Schröder, Michael Sedlmair
• Finden Sie die drei grünen Quadrate!
Popout-Effekte - Einschränkungen
Colin Ware: Visual Thinking for Design
13
Svenja Schröder, Michael Sedlmair
Visueller „Flow“
14
Svenja Schröder, Michael Sedlmair
Visueller „Flow“: gut und schlecht
15
Svenja Schröder, Michael Sedlmair
Popout & Visueller Flow
•insbesondere wichtig für Web Design
•Menschen scannen, sie lesen nicht
16
Svenja Schröder, Michael Sedlmair
Symmetrie und Balance
• gibt einem Interface ein solides, stabiles Aussehen
17
Svenja Schröder, Michael Sedlmair
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
Svenja Schröder, Michael Sedlmair
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
Svenja Schröder, Michael Sedlmair
Implementierungszentriertes Interface Design
Quelle: topcon-medical.eu
Medizinische Oberfläche zur Steuerung eines
Augenlasers
Svenja Schröder, Michael Sedlmair
• 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
Svenja Schröder, Michael Sedlmair
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-Start-
Button“
• 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
26
Svenja Schröder, Michael Sedlmair
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
28
Svenja Schröder, Michael Sedlmair
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
30
Svenja Schröder, Michael Sedlmair
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
Svenja Schröder, Michael Sedlmair
Spezifische Design Guidelines• z.B. Apple Human Interface Guidelines
https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html
32
Svenja Schröder, Michael Sedlmair
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
Svenja Schröder, Michael Sedlmair
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!
35
FRAGEN?
37
Quelle: Katerina Kamprani, Project „The Uncomfortable“http://www.kkstudio.gr/#the-uncomfortable