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

Transkript

1 Roland Weigelt User Interface Patterns Kochrezepte für die Gestaltung von GUIs NET User Group Bielefeld

2

3 Raumschiff Enterprise

4 Raumschiff Enterprise steckt voller Design Patterns!

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

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

7 UI Patterns

8 MVC MVP MVVM

9 Architektonischer Umgang mit UI-Elementen

10 Beispiele für UI Patterns

11 Master - Detail

12 Master - Detail

13 Master - Detail

14 Master - Detail Master Detail

15 Master - Detail

16 Master - Detail

17 Master - Detail

18 Master - Detail Master Detail

19 Ribbon

20 Große Patterns

21 Kleine Patterns

22 CheckBox

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

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

25 Gut: Andere GUIs mit wachem Auge betrachten

26 Schlecht: Andere GUIs einfach blind kopieren

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

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

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

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

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

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

33 CheckBox

34 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

35 Quellen für Patterns

36 Pattern Libraries (Links siehe Anhang)

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

38 Abstrakte Betrachtung Erkenntnisse für die Praxis

39

40 UI Design Patterns

41 UI Design Patterns Darstellung Interaktion

42 I. Darstellung

43 Darstellung: Was?

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

45 Daten

46 1. Einzelnes Objekt 2. Mehrere Objekte

47

48

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

50 Foo.Bar.Thingy.Item

51 Anzeigename

52 Anzeigename Für Menschen verständlich Hinreichend unterscheidbar

53 (Bild)

54 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

55 Nicht in diesem Vortrag: Visualisierung, Diagramme

56 Zusätzlicher Text

57 Anzeigename

58 Anzeigename und/oder Bild

59

60 Anzeigename und/oder Bild plus weitere Eigenschaften

61 Beispiel: Buch

62

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

64

65

66 Demo Einzelnes Objekt

67 Dominanz Hierarchie Whitespace Semantische Gruppierung Domänenspezifische Darstellung

68 Es lohnt sich, den Charakter von Objekteigenschaften zu kennen

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

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

71 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

72 Typische Muster

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

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

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

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

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

78 1. Einzelnes Objekt 2. Mehrere Objekte

79

80

81 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

82 Demo: Vertikales Layout

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

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

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

86 Demo: Horizontales Layout

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

88 Horizontales Layout

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

90 Demo: Wrap/Matrix-Layout

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

92 Wrap/Matrix-Layout: Suche

95 Wrap/Matrix-Layout: Stöbern

96 Demo: Verschiedene Layouts

97 Fragen zur Auswahl von Listen-Layouts

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

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

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

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

102

103 II. Interaktion

104 1. Befehl erteilen / Aktion starten

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

106 Klickbare Schaltfläche

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

108 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

109 Demo: Button & Hyperlinks

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

111 Demo: Schlanke GUI

112

113 2. Daten eingeben

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

115 Technik: Unser täglich Brot

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

117 Demo: Einstellungen

118

119 Wie geht man mit Komplexität um?

120 Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

121 Elemente... Entfernen Organisieren Verbergen Verschieben

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

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

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

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

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

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

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

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

130 Patterns

131 Progressive Disclosure Schrittweise Offenlegung

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

133 Demo: Progressive Disclosure

134 Responsive Disclosure Reagierende Offenlegung

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

136 Demo: Responsive Disclosure

137 Responsive Enabling Reagierende Freigabe

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

139 Demo Responsive Enabling

140 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

141

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

143 Chance: Spezialfälle erkennen

144 Demo: Komplexität

145

146 Sammlung wichtiger Fragen

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

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

149 Material