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

2 Roland Weigelt Beruflich: Comma Soft AG 15 Jahre Software-Entwickler seit Januar User Experience Specialist Bereich Enterprise-Anwendungen Privat u.a..net Community (BN2C, DNC12) *.psd, *.wmv, *.pptx

3 Raumschiff Enterprise

4 ??? Pille Spock Kirk

5 Johnson, Sie untersuchen die Höhle, wir schauen uns hier um!

6

7

8 Er ist tot, Jim!

9

10

11

12 Faszinierend!

13 Raumschiff Enterprise steckt voller Design Patterns!

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

15 Pattern Red Shirt Disease Problem: Der Tod eines Team- Mitglieds soll zeigen, dass der Alien-Planet gefährlich ist Problem: Wöchentliche Serie Lösung: Das Opfer ist beliebig austauschbar ( Rothemd )

16

17 MVC MVP MVVM

18 UI Patterns

19 Architektonischer Umgang mit UI-Elementen

20 Beispiele für UI Patterns

21 Master - Detail

22 Master - Detail

23 Master - Detail

24 Master - Detail Master Detail

25 Master - Detail

26 Master - Detail

27 Master - Detail

28 Master - Detail Master Detail

29 Ribbon

30 Große Patterns

31 Kleine Patterns

32 CheckBox

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

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

35 Gut: Andere GUIs mit wachem Auge betrachten

36 Schlecht: Andere GUIs einfach blind kopieren

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

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

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

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

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

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

43 CheckBox

44 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

45 Quellen für Patterns

46 Pattern Libraries (Links siehe Anhang)

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

48 Abstrakte Betrachtung Erkenntnisse für die Praxis

49

50 UI Design Patterns

51 UI Design Patterns Darstellung Interaktion

52 I. Darstellung

53 Wie schön muss die Darstellung sein? Ok, blöde Frage

54 Da muss ein Designer her!

55 Schönheit Ausrichtung, Abstände, Konsistenz Anderer Vortrag... Aufwand

56 Was muss man für eine brauchbare Darstellung tun?

57 Naive Sicht

58 Wenn alle wesentlichen Informationen dargestellt werden - spielt es dann noch eine Rolle, wie?

59 Desillusionierte Sicht

60 Anwender lesen keine Texte Ist so

61 Anwender sind einfach blind Stimmt auch

62 Visuelle Wahrnehmung

63

64

65 Foveal Peripher

66 Foveale Wahrnehmung Hohe räumliche Auflösung Sehr geringer Winkelbereich Periphere Wahrnehmung Hohe zeitliche Auflösung Unscharf, räumlich verzerrt

67

68

69

70

71

72 Augenbewegung Arbeitsspeicher Erinnerungen Mustererkennung

73 Design-Ziel: Mustererkennung möglichst einfach machen

74 Lies mich

75 Problem: Die reale Welt ist komplex

76 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Lies Bla mich Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

77 Wie so häufig: Es kann nicht alles gleich wichtig sein

78 Also: Priorisieren

79 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Lies Bla mich Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

80 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Lies Bla mich Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

81 Beispiel Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden

82 Visuelle Hierarchie Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden Auffälligkeit/Dominanz durch Intensität...

83 Visuelle Hierarchie DIESER TEXT IST ECHT SUPERWICHTIG Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden...durch Unterschiede in der Form...

84 Visuelle Hierarchie Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden...durch Unterschiede in der Größe...

85 Visuelle Hierarchie Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden...oder durch Kombination.

86 Whitespace Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden Whitespace verstärkt die Wirkung

87 Nähe Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden Nähe drückt Zugehörigkeit aus

88

89 Darstellung: Was?

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

91 Daten

92 1. Einzelnes Objekt 2. Mehrere Objekte

93

94

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

96 Foo.Bar.Thingy.Item

97 Anzeigename

98 Anzeigename Für Menschen verständlich Hinreichend unterscheidbar

99 (Bild)

100 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

101 Nicht in diesem Vortrag: Visualisierung, Diagramme

102 Zusätzlicher Text

103 Anzeigename

104 Anzeigename und/oder Bild

105

106 Anzeigename und/oder Bild plus weitere Eigenschaften

107 Beispiel: Buch

108

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

110

111

112 Demo Einzelnes Objekt

113 Dominanz Hierarchie Whitespace Semantische Gruppierung Domänenspezifische Darstellung

114 Es lohnt sich, den Charakter von Objekteigenschaften zu kennen

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

116 Charakterisierung Endliche Anzahl von Werten? Transformation möglich: Text Bilder, Farben (Vorsicht!) Texte: Länge bekannt? Minimal/Typisch/Maximal Auswirkungen auf Layout

117 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

118 Typische Muster

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

120 Zusammengesetzter Anzeigetext Benutzer-Handbuch (PDF, 210Kb)

121 Zusammengesetzter Anzeigetext Benutzer-Handbuch (PDF, 210Kb) Titel Format Dateigröße

122 Zusammengesetzter Anzeigetext Benutzer-Handbuch (PDF, 210Kb) Urlaub vom bis

123 Zusammengesetzter Anzeigetext Benutzer-Handbuch (PDF, 210Kb) Urlaub vom bis Max Mustermann

124 1. Einzelnes Objekt 2. Mehrere Objekte

125

126

127 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

128 Demo: Vertikales Layout (ListBox, ItemTemplate, DataGrid)

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

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

131 Layout in Silverlight Saubere Trennung Konzept Mehrere Objekte Konkrete Anordnung Darstellung einzelner Objekte Anderes Layout sehr einfach z.b. für Horizontale Liste

132 Demo: Horizontales Layout (ListBox, ItemsPanel)

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

134 Horizontales Layout

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

136 Demo: Wrap/Matrix-Layout (WrapPanel 1+2)

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

138 Wrap/Matrix-Layout: Suche

139 Wrap/Matrix-Layout: Suche

140 Wrap/Matrix-Layout: Suche

141 Wrap/Matrix-Layout: Stöbern

142 Demo: Verschiedene Layouts (Mehrere Objekte 2: Fotos + Dateien)

143 Fragen zur Auswahl von Listen-Layouts

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

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

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

147 Zusammenfassung: Varianten Eindimensional Tabellarisch Mehrdimensional Matrix (Wrap) Karussell Als Aufzählung in Satzform

148

149 II. Interaktion

150 Nicht in diesem Vortrag: FAST ALLES

151 1. Befehl erteilen / Aktion starten

152 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,...

153 Klickbare Schaltfläche

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

155 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

156 Demo: Button & Hyperlinks

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

158 Demo: Schlanke GUI

159

160 2. Daten eingeben

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

162 Technik: Unser täglich Brot

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

164 Demo: Einstellungen

165

166 Wie geht man mit Komplexität um?

167 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!

168 Elemente... Entfernen Organisieren Verbergen Verschieben

169 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!

170 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!

171 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!

172 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!

173 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!

174 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...

175 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!

176 Verschieben Klick mich! Klick mich! Klick mich! Die restlichen Funktionen sind nicht weg nur eben woanders

177 Patterns

178 Progressive Disclosure Schrittweise Offenlegung

179 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)

180 Demo: Progressive Disclosure

181 Responsive Disclosure Reagierende Offenlegung

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

183 Demo: Responsive Disclosure

184 Responsive Enabling Reagierende Freigabe

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

186 Demo Responsive Enabling

187 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

188

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

190 Chance: Spezialfälle erkennen

191 Demo: Komplexität

192

193 Sammlung wichtiger Fragen

194 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?

195 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?

196 Material

197 Pattern Libraries

198 Websites (Pattern Libraries) Quince UI Patterns Welie.com

199 Bücher Designing Interfaces 2nd Edition User Interface Patterns, gute Mischung aus Beispielen + Theorie

200 Bücher Don t Make Me Think Oft zitierte, gut lesbare Einführung in grundlegende Usability-Themen

201 Bücher Designing the Obvious Anwender, Use Cases, mentale Modelle, schrittweise Verfeinerung

202 Bücher Simple and Usable Vereinfachung am Beispiel einer DVD-Fernbedienung: So einfach wie möglich, aber nicht einfacher

203 UX Interaction Guidelines Online und als PDF-Download -us/library/aa aspx

204 Fragen?

205 Vielen Dank!

206 Verwendung der Abbildungen aus den User Experience Guidelines mit freundlicher Genehmigung der Microsoft Corporation.