Ergonomisches UI Design. Das lass mal den Grafiker machen

Transkript

1 Ergonomisches UI Design Das lass mal den Grafiker machen

2 Werbung

3 Alexander Klein Senior Consultant bei BeOne Stuttgart GmbH Consulting für Prozesse, Engineering und IT Committer bei Griffon BeOne Group

4 Werbung Ende

5 Gliederung Ein klarer Weg durch agiles Design Vorbereitung Prototyping Beispiel 3 Sixpacks für gutes Design Ergonomie Gestaltung Goldene Regeln

6 Ein klarer Weg durch agiles Design Vorbereitung Prototyping Beispiel

7 Neue Blickwinkel durch Archetypen Ziele, Verhalten, Einstellungen

8 Personas beschreiben Archetypen Personas repräsentieren Abläufe Verhaltensmuster Ziele Umgebungseinflüsse Fähigkeiten / Wissen Einstellungen Personas!= Marktsegmenten

9 Aus Personas leiten sich Aufgaben ab

10 Ein klarer Weg durch agiles Design Vorbereitung Prototyping Beispiel

11 Mit Papier kann jeder umgehen

12 Papier ermöglicht schnelle Änderungen

13 Der Kundenwunsch wird schneller klar

14 Papier befreit von technischen Variablen

15 Szenarien sind in Storyboards notierbar

16 Ein einbezogener Benutzer hilft mit

17 Früher und öfter testen senkt Kosten Kosten einer Änderung/Korrektur x x Anforderungen Design Implementierung Testphase Zeit Betrieb

18 Design ist Evolution Neue Meinungen erfordern neue Lösungen Vorschläge werden immer besser Der erste Wurf ist nie optimal

19 Ein klarer Weg durch agiles Design Vorbereitung Prototyping Beispiel

20 Ein Beispiel: Reverseengineering github github.com Account-Verwaltung:

21 Anforderungen zerteilen das Problem 1. Account umbenennen 2. Account löschen 3. Profil bearbeiten 4. s verwalten

22 Sonstige Informationen ergänzen das Bild 5. Accounts können nur einmal umbenannt werden 6. Hilfe zur -Konfiguration wird evtl. hier gesucht 7. Profil ändern ist die wahrscheinlichste Funktion 8. Löschen kann nicht rückgängig gemacht werden

23 Gruppierung von Teilen bringt Ordnung Account umbenennen Accounts können nur einmal umbenannt werden Account löschen Löschen kann nicht rückgängig gemacht werden Account 3. Profil bearbeiten 7. Profil ändern ist die wahrscheinlichste Funktion 4. s verwalten 6. Hilfe zur -Konfiguration wird evtl. hier gesucht 8. Löschen kann nicht rückgängig gemacht werden Profil s

24 Gruppierung von Teilen bringt Ordnung Account umbenennen Accounts können nur einmal umbenannt werden Account löschen Löschen kann nicht rückgängig gemacht werden Account 3. Profil bearbeiten 7. Profil ändern ist die wahrscheinlichste Funktion 4. s verwalten 6. Hilfe zur -Konfiguration wird evtl. hier gesucht 8. Löschen kann nicht rückgängig gemacht werden Profil s

25 Prioritäten schaffen Struktur 3. Profil bearbeiten 7. Profil ändern ist die wahrscheinlichste Funktion Account löschen Löschen kann nicht rückgängig gemacht werden Account umbenennen Accounts können nur einmal umbenannt werden Profil Account 4. s verwalten 8. Löschen kann nicht rückgängig gemacht werden 6. Hilfe zur -Konfiguration wird evtl. hier gesucht s

26 Prioritäten schaffen Struktur 3. Profil bearbeiten 7. Profil ändern ist die wahrscheinlichste Funktion Account löschen Löschen kann nicht rückgängig gemacht werden Account umbenennen Accounts können nur einmal umbenannt werden Profil Account 4. s verwalten 8. Löschen kann nicht rückgängig gemacht werden 6. Hilfe zur -Konfiguration wird evtl. hier gesucht s

27 Am Anfang stehen die Einzelteile

28 Am Anfang stehen die Einzelteile

29 Am Anfang stehen die Einzelteile

30 Am Anfang stehen die Einzelteile

31 Am Anfang stehen die Einzelteile

32 Zusammengefügt ergibt es ein Bild

33 Zusammengefügt ergibt es ein Bild

34 3 Sixpacks für gutes Design Ergonomie Gestaltung Goldene Regeln

35 6 Prinzipien führen zu guter Ergonomie 80/20-Regel Einfachheit Erreichbarkeit Konsistenz Feedback Toleranz

36 6 Prinzipien führen zu guter Ergonomie 80/20-Regel schnelle Bedienung Einfachheit Erreichbarkeit In 80 % der Zeit werden nur 20 % der Funktionen genutzt Konsistenz leicht erreichbar Feedback gut durchdacht Toleranz

37 6 Prinzipien führen zu guter Ergonomie 80/20-Regel entspannte Bedienung Einfachheit Erreichbarkeit KISS - Keep it simple, stupid Keep it clear Konsistenz Feedback Toleranz Ablenkung der Benutzer vermeiden Richtiges Verhältnis: Einfachheit/Features

38 6 Prinzipien führen zu guter Ergonomie 80/20-Regel effektive Bedienung Einfachheit Erreichbarkeit Tastenbedienbarkeit Visuellehinweise / Hints Konsistenz Feedback Toleranz Redundanz

39 6 Prinzipien führen zu guter Ergonomie 80/20-Regel klare Bedienung Einfachheit Erreichbarkeit Einheitliches Layout Konsistente Terminologie Konsistenz Feedback Toleranz Durchgängiges Interaktionskonzept

40 6 Prinzipien führen zu guter Ergonomie 80/20-Regel nachvollziehbare Bedienung Einfachheit Erreichbarkeit Feedback an Benutzer geben Konsistenz Benutzer über aktuelle Zustände informieren Feedback Vor allem bei Hintergrundaktivitäten Toleranz

41 6 Prinzipien führen zu guter Ergonomie 80/20-Regel helfende Bedienung Einfachheit Erreichbarkeit Fehler des Benutzers verhindern Aktionsflächen bei Bedarf aktiv schalten Konsistenz Feedback Toleranz Während der Aktion Aktionsflächen inaktiv schalten

42 3 Sixpacks für gutes Design Ergonomie Gestaltung Goldene Regeln

43 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie

44 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie Formen mit gemeinsamen Merkmalen werden als zusammengehörig empfunden

45 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie

46 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie Die kleinere zweier überlappender Formen wird als Vordergrund, die größere als Hintergrund empfunden.

47 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie

48 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie Dinge die näher beieinander stehen werden als zusammengehörig empfunden.

49 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie

50 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie Wir erkennen bevorzugt zusammenhängende Formen, nicht Einzelteile.

51 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie

52 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie

53 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie Es werden vollständige Formen gesehen, fehlende Informationen werden ergänzt.

54 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie

55 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie

56 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie Symmetrisch angeordnete Elemente werden werden als Ganzes wahrgenommen

57 6 Dinge die unser Gehirn erkennt Ähnlichkeit Umgebung Abstand Fortsetzung Vervollständigung Symmetrie

58 3 Sixpacks für gutes Design Ergonomie Gestaltung Goldene Regeln

59 6 goldene Regeln für ein angenehmes Bild Leserichtung Ausrichtung Abstände Farben Zeichensätze Visuelle Effekte

60 6 goldene Regeln für ein angenehmes Bild Leserichtung In aller Regel von Links nach rechts Ausrichtung Im hebräischen und arabischen Raum von rechts nach links Abstände Farben Zeichensätze Visuelle Effekte Ankerpunkt für Anordnung links oben beginnen (bzw. rechts oben) Bewegter Text immer von rechts nach links bewegen

61 6 goldene Regeln für ein angenehmes Bild Leserichtung Elemente immer an Linien ausrichten Ausrichtung Horizontal und vertikal beachten Abstände Farben Zeichensätze Visuelle Effekte Einzelne Pixel machen etwas aus! Text linksbündig Zahlen rechtsbündig Achtung hebräisch, arabisch

62 6 goldene Regeln für ein angenehmes Bild Leserichtung Ausrichtung Abstände Farben Zeichensätze Visuelle Effekte Abstände zwischen Elementen i.d.r. gleich groß Unterschiedliche Abstände haben eine Bedeutung Gruppieren durch Abstände

63 6 goldene Regeln für ein angenehmes Bild Leserichtung Deutliche Kontraste wichtig Ausrichtung Farbharmonie für entspanntes Arbeiten notwendig Abstände Farben Zeichensätze Visuelle Effekte Sehbehinderungen beachten Rot/Grün-Schwäche etc. Hilfreiches Tool

64 6 goldene Regeln für ein angenehmes Bild

65 6 goldene Regeln für ein angenehmes Bild Leserichtung Weniger ist mehr Ausrichtung maximal 3 Zeichensätze Abstände Farben Zeichensätze Visuelle Effekte Zeichensätze drücken etwas aus Zeichensätze mitliefern oder Alternativen ermöglichen

66 6 goldene Regeln für ein angenehmes Bild Leserichtung Sind schön anzusehen Ausrichtung Können wichtige Funktionen haben Abstände Aber nur einsetzen, wenn die Animation einen Nutzen bringt Farben So viel wie nötig, so wenig möglich Zeichensätze Visuelle Effekte

67 Vielen Dank Alexander