Roland Weigelt User Interface Patterns. Kochrezepte für die Gestaltung von GUIs

Transkript

1 Roland Weigelt User Interface Patterns Kochrezepte für die Gestaltung von GUIs UG Tour Juli 2012

2

3 Entwurfsmuster (engl. Design Patterns) Bewährte generische Lösungsansätze für immer wiederkehrende Entwurfsprobleme

4 Raumschiff Enterprise

5 ??? Pille Spock Kirk

6 Raumschiff Enterprise steckt voller Design Patterns!

7 Beispiel Problemstellung: Den Zuschauern soll durch den Tod eines Team-Mitglieds deutlich gemacht werden, dass der Alien-Planet gefährlich ist Rahmenbedingung: Wöchentliche laufende Serie

8 Pattern Red Shirt Disease Lösung: Das Opfer ist beliebig austauschbar ( Rothemd ) Statistik * 430 Besatzungsmitglieder davon 59 getötet davon 43 Rothemden 72,9% * Quelle:

9 UI Patterns

10 MVC MVP MVVM

11 Architektonischer Umgang mit UI-Elementen

12 Beispiele für UI Patterns

13 Master - Detail

14 Master - Detail

15 Master - Detail

16 Master - Detail Master Detail

17 Master - Detail

18 Master - Detail

19 Master - Detail

20 Master - Detail Master Detail

21 Ribbon

22 Ribbon was ist das eigentlich? Geschachtelte Gruppierung Erste Ebene - Gruppierung nach Benutzungskontexten

23 Ribbon was ist das eigentlich? Geschachtelte Gruppierung Zweite Ebene - Gruppierung von Funktionen

24 Ribbon was ist das eigentlich? Geschachtelte Gruppierung...aber keine tiefe Hierarchie!

25 Ribbon und was bietet es? Viele Funktionen gleichzeitig hohe Entdeckbarkeit Die richtigen Funktionen für den aktuellen Kontext Empfehlung: Windows UX Guidelines lesen!

26 Große Patterns

27 Kleine Patterns

28 CheckBox

29 CheckBox ein Pattern? Ausführlich protokollieren Ausführlich protokollieren Ausführlich protokollieren

30 CheckBox Auswahl zwischen zwei klar gegensätzlichen Alternativen So klar, dass die zweite nicht erwähnt werden braucht Richtig: Das will ich haben! Falsch: Querformat

31 GUIs sind voll mit Patterns (Keine große Überraschung)

32 Gut: Andere GUIs mit wachem Auge betrachten

33 Schlecht: Andere GUIs einfach blind kopieren

34 Verwendung von Abbildungen aus den Windows User Experience Guidelines mit freundlicher Genehmigung der Microsoft Corporation

35 Wichtig: Tieferes Verständnis Falsch: Verwendung weil cool Was ist der Kern des Patterns? Wofür ist es geeignet? Wofür nicht?

36 Quellen für Patterns

37 Pattern Libraries (Links siehe Anhang)

38 Ziele dieses Vortrags Grundlagen schaffen Analytische Denke auch für GUIs Blick schärfen Details entscheiden über den Erfolg

39 Abstrakte Betrachtung Erkenntnisse für die Praxis

40

41 UI Design Patterns

42 UI Design Patterns Darstellung Interaktion

43 I. Darstellung

44 Darstellung: Was?

45 Informationen (Nutz-)Daten Aus der Welt der Anwender z.b. Daten aus der Datenbank Sonstige Inhalte, u.a. Beschriftungen Hinweis-/Fehler-/Hilfstexte

46 Daten

47 1. Einzelnes Objekt 2. Mehrere Objekte

48

49

50 {D5520D83-FFD0-46D1-85E DCEADBE}

51 Foo.Bar.Thingy.Item

52 Anzeigename

53 Anzeigename Für Menschen verständlich Hinreichend unterscheidbar

54 (Bild)

55 Bilder in GUIs: Varianten a) Bilder sind die Daten b) Bilder repräsentieren Objekte Statisch: z.b. Autos in Online Shop Dynamisch: z.b. Thumbnails c) Bilder stehen für Kategorien z.b. Dateityp, Projektstatus

56 Nicht in diesem Vortrag: Visualisierung, Diagramme

57 Zusätzlicher Text

58 Anzeigename

59 Anzeigename und/oder Bild

60

61 Anzeigename und/oder Bild plus weitere Eigenschaften

62 Bild/Icon + Text Anzeigename Anzeigename Bild/Icon + Text + Zusatzinfo Anzeigename Beschreibung des Objekts

63 Beispiel: Buch

64

65 Entwicklersicht Alle Informationen vorhanden Hey, sogar mit Bild! Anwendersicht Schwer zu lesen Und bei einfarbigem Cover?

66

67

68 Demo Einzelnes Objekt

69 Dominanz Hierarchie Whitespace Semantische Gruppierung Domänenspezifische Darstellung

70 Es lohnt sich, den Charakter von Objekteigenschaften zu kennen

71 Technische Sicht Titel String Autor String Verlag String Art String Seiten Integer Auflage Integer Veröff.datum DateTime Sprache String ISBN-13 String

72 Charakterisierung Identifizierend? Falls ja: Lokal / Global? Selbstbeschreibend? Falls ja: Wirklich? Für wen? Zusammenhang mit anderen? Gruppierung Layout

73 Zusammengesetzter Anzeigetext Anwenderhandbuch (PDF, 210Kb)

74 Zusammengesetzter Anzeigetext Anwenderhandbuch (PDF, 210Kb) Titel Format Dateigröße

75 Zusammengesetzter Anzeigetext Anwenderhandbuch (PDF, 210Kb) Produkt XY Anwenderhandbuch (DOCX, 240Kb) Anwenderhandbuch (PDF, 210Kb) Werbebroschüre (DOCX, 145Kb) Werbebroschüre (PDF, 126Kb)

76 Zusammengesetzter Anzeigetext Anwenderhandbuch (PDF, 210Kb) Urlaub vom bis Max Mustermann

77 Charakterisierung Endliche Anzahl von Werten? Transformation möglich: Text Bilder, Farben Status Gut Mittel Schlecht

78 Charakterisierung Endliche Anzahl von Werten? Transformation möglich: Text Bilder, Farben Status Gut Mittel Schlecht

79 Charakterisierung Endliche Anzahl von Werten? Transformation möglich: Text Bilder, Farben Status Gut Mittel Schlecht?!

80 Charakterisierung Texte: Länge bekannt? Minimal/Typisch/Maximal Auswirkungen auf Layout Entwurf vs. Realität Entwurf: Realdaten: Beispieltext Donaudampfschifffahrts

81 Charakterisierung Texte: Was ist wichtig? Anfang/Ende/Mitte/Alles? Evtl. gekürzte Anzeige sinnvoll? Das Geheimnis erfolgreicher GUI-Designer [...] mehr D:\Talks\... \ User Interface Patterns.pptx Bestellnummer: A

82 Charakterisierung Zahlen Groß/Klein Nur groß/klein oder gemischt? Negative Werte? u.v.m.

83 1. Einzelnes Objekt 2. Mehrere Objekte

84

85

86 Listen von Objekten a) Auflistung von Einzelobjekten Eine der Stärken von Silverlight b) Spezialfall: DataGrid Mehr als die Summe seiner Teile Gut bei wechselnden Prioritäten

87 Demo: Vertikales Layout

88 Vertikales Layout Klassisch Langweilig? Aber: Effektiv Geeignet für breite, aber nicht allzu hohe Objekte

89 Vertikales Layout A B C C Danach habe ich nicht gesucht Danach habe ich auch nicht gesucht Danach habe ich gesucht, endlich gefunden!

90 Demo: Horizontales Layout

91 Horizontales Layout Mal was anderes Problem: Mausrad Für wenige, schmale Objekte Interessant: Zeitachse

92 Horizontales Layout

93 Horizontales Layout Interessanter Spezialfall: Listen in Satzform Wenige, nicht zu lange Texte Eis: Vanille, Erdbeer, Schoko

94 Demo: Wrap/Matrix-Layout

95 Wrap/Matrix-Layout Attraktive Darstellung Will gut überlegt sein! Eher Ich suche X oder IKIWISI? I Know It When I See It

96 Wrap/Matrix-Layout: Suche

99 Wrap/Matrix-Layout: Stöbern

100 Demo: Verschiedene Layouts

101 Fragen zur Auswahl von Listen-Layouts

102 Was ist der Anwendungsfall? Überblick gewinnen? Daten analysieren? Nach etwas Konkretem suchen? Einfach mal stöbern?

103 Wahrscheinliche Betrachtung? Schnelles Scannen nach etwas Bestimmtem? Ausschau nach (irgend)etwas Interessantem?

104 Kochrezept Charakteristik der Daten herausarbeiten Konkrete Anwendungsfälle identifizieren Augenbewegungen minimieren Geeignetes Layout

105 Zusammenfassung: Varianten Eindimensional Als Liste von Einzelobjekten Tabellarisch Als Aufzählung in Satzform Mehrdimensional Matrix (Wrap)

106

107 II. Interaktion

108 1. Befehl erteilen / Aktion starten

109 and Buttons, Command Bu Command Buttons, links, Icons, Hyperlinks, Ic Hyperlinks, Icons, and Links Command L Command Links s, Toolbars Menüs, Tool Menüs, Toolbars pdowns, Dropdown Dropdowns,, Ribbons, Popups,... Ribbo Popups, Ribbons,...

110 Klickbare Schaltfläche

111 Button Eines der Ur -Controls Metapher aus der realen Welt dadurch hohe Affordance

112 Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque nec luctus rutrum, est tortor venenatis quam, et imperdiet lectus nisl nec massa. Suspendisse in leo in justo facilisis sodales ac ut urna. Vestibulum sed porta odio. Duis venenatis euismod eros, quis bibendum lorem fermentum eget. Bearbeiten Weiterleiten Kommentieren

113 Demo: Button & Hyperlinks

114 Button Primäre Aktionen In 80% der Fälle klickt man X Hyperlink Sekundäre Aktionen GUIs schlank halten

115 Demo: Schlanke GUI

116

117 2. Daten eingeben

118 heck Box, Combo Check Box, C Check Box, Combo Box, Box, Drop-d Box, Drop-down List, rop-down List, List Bu List Builder, Radio t Builder, Radio Radio Button Button, Text Box, on, Text Box, Box, Up/D Up/Down Control,... wn Control,... Control,

119 Technik ist klar - Unser täglich Brot

120 Was ist zu tun, damit Anwender fundierte Entscheidungen treffen können?

121 Demo: Einstellungen

122

123 Wie geht man mit Komplexität um?

124 Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

125 Entfernen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

126 Entfernen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

127 Organisieren Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

128 Organisieren Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

129 Verbergen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

130 Verbergen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Mehr...

131 Verbergen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

132 Verschieben Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

133 Verschieben A Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! B C Die Funktionen sind nur in einem bestimmten Kontext zugänglich

134 Elemente... Entfernen Organisieren Verbergen Verschieben

135 Patterns

136 Progressive Disclosure Schrittweise Offenlegung

137 Progressive Disclosure Verbergen von UI-Elementen, die nicht für alle Use Cases notwendig sind UI-Elemente erscheinen bei Bedarf (interaktiv/automatisch) (siehe auch Microsoft UX Guidelines)

138 Demo: Progressive Disclosure

139 Responsive Disclosure Reagierende Offenlegung

140 Responsive Disclosure Einblenden von UI-Elementen in Abhängigkeit von Eingaben bzw. Aktionen des Benutzers Spezialfall von Progressive D. Eher fachlich als technisch

141 Demo: Responsive Disclosure

142 Responsive Enabling Reagierende Freigabe

143 Responsive Enabling Freigeben von UI-Elementen in Abhängigkeit von Eingaben bzw. Aktionen des Benutzers

144 Demo Responsive Enabling

145 Responsive Disclosure Anwender wird beim ersten Blick nicht erschlagen Aufklappen u.u. überraschend Dynamik möglich Layout ändert sich Responsive Enabling Anwender sieht sofort, welche Möglichkeiten es gibt Evtl. nicht klar, was die Elemente aktiviert Viele deaktivierte Bereiche schnell verwirrend Layout bleibt gleich

146

147 Kaum eine Lösung ist für alle Fälle gleich gut...

148 Chance: Spezialfälle erkennen

149 Demo: Spezialfall

150

151 Sammlung wichtiger Fragen

152 Auswahl von Patterns Welche Informationen sollen Anwender warum sehen? Was sollen Anwender warum machen können? Wie hilft dies den Anwendern, ihre Aufgabe zu erfüllen?

153 Darstellung von Daten Was ist der Charakter einer darzustellenden Information?...welche Darstellungen sind dadurch denkbar? Gibt es Wege, die Komplexität der GUI (lokal) zu verringern?

154 Material