![Page 1: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/1.jpg)
User Interface Patterns Kochrezepte für die Gestaltung von GUIs
Roland Weigelt
UG Tour Juli 2012
![Page 2: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/2.jpg)
![Page 3: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/3.jpg)
Entwurfsmuster (engl. Design Patterns)
Bewährte generische
Lösungsansätze für
immer wiederkehrende
Entwurfsprobleme
![Page 4: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/4.jpg)
Raumschiff
Enterprise
![Page 5: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/5.jpg)
Kirk Spock Pille ???
![Page 6: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/6.jpg)
Raumschiff Enterprise
steckt voller
Design Patterns!
![Page 7: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/7.jpg)
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
![Page 8: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/8.jpg)
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: http://www.lyris.com/web-analytics/182-Analytics-According-to-Captain-Kirk
*
![Page 9: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/9.jpg)
UI Patterns
![Page 10: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/10.jpg)
MVC
MVP
MVVM
![Page 11: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/11.jpg)
Architektonischer
Umgang mit
UI-Elementen
![Page 12: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/12.jpg)
Beispiele für
UI Patterns
![Page 13: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/13.jpg)
Master - Detail
![Page 14: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/14.jpg)
Master - Detail
![Page 15: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/15.jpg)
Master - Detail
![Page 16: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/16.jpg)
Master - Detail
Master Detail
![Page 17: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/17.jpg)
Master - Detail
![Page 18: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/18.jpg)
Master - Detail
![Page 19: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/19.jpg)
Master - Detail
![Page 20: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/20.jpg)
Master - Detail
Master
Detail
![Page 21: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/21.jpg)
Ribbon
![Page 22: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/22.jpg)
- Gruppierung nach Benutzungskontexten
Ribbon
Geschachtelte Gruppierung
Erste Ebene
– was ist das eigentlich?
![Page 23: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/23.jpg)
Ribbon – was ist das eigentlich?
Geschachtelte Gruppierung
Zweite Ebene - Gruppierung von Funktionen
![Page 24: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/24.jpg)
Ribbon – was ist das eigentlich?
Geschachtelte Gruppierung
...aber keine tiefe Hierarchie!
![Page 25: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/25.jpg)
Ribbon – und was bietet es?
Viele Funktionen gleichzeitig
hohe Entdeckbarkeit
Die richtigen Funktionen für
den aktuellen Kontext
Empfehlung: Windows UX Guidelines lesen!
![Page 26: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/26.jpg)
Große Patterns
![Page 27: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/27.jpg)
Kleine Patterns
![Page 28: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/28.jpg)
CheckBox
![Page 29: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/29.jpg)
CheckBox – ein Pattern?
Ausführlich protokollieren
Ausführlich protokollieren
Ausführlich protokollieren
![Page 30: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/30.jpg)
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
![Page 31: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/31.jpg)
GUIs sind voll
mit Patterns
(Keine große Überraschung)
![Page 32: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/32.jpg)
Gut: Andere GUIs
mit wachem Auge
betrachten
![Page 33: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/33.jpg)
Schlecht: Andere
GUIs einfach
blind kopieren
![Page 34: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/34.jpg)
Verwendung von Abbildungen aus den Windows User Experience Guidelines mit freundlicher Genehmigung der Microsoft Corporation
![Page 35: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/35.jpg)
Wichtig: Tieferes Verständnis
Falsch: Verwendung weil „cool“
Was ist der Kern des Patterns?
Wofür ist es geeignet?
Wofür nicht?
![Page 36: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/36.jpg)
Quellen für Patterns
![Page 37: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/37.jpg)
Pattern Libraries
(Links siehe Anhang)
![Page 38: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/38.jpg)
Ziele dieses Vortrags
Grundlagen schaffen
„Analytische Denke“ auch für GUIs
Blick schärfen
Details entscheiden über den Erfolg
![Page 39: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/39.jpg)
Abstrakte
Betrachtung
Erkenntnisse für
die Praxis
![Page 40: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/40.jpg)
![Page 41: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/41.jpg)
UI Design Patterns
![Page 42: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/42.jpg)
UI Design Patterns Darstellung
Interaktion
![Page 43: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/43.jpg)
I. Darstellung
![Page 44: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/44.jpg)
Darstellung: Was?
![Page 45: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/45.jpg)
Informationen
(Nutz-)Daten
Aus der „Welt der Anwender“
z.B. Daten aus der Datenbank
Sonstige Inhalte, u.a.
Beschriftungen
Hinweis-/Fehler-/Hilfstexte
![Page 46: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/46.jpg)
Daten
![Page 47: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/47.jpg)
1. Einzelnes Objekt
2. Mehrere Objekte
![Page 48: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/48.jpg)
![Page 49: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/49.jpg)
![Page 50: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/50.jpg)
{D5520D83-FFD0-46D1-85E2-88241DCEADBE}
![Page 51: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/51.jpg)
Foo.Bar.Thingy.Item
![Page 52: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/52.jpg)
Anzeigename
![Page 53: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/53.jpg)
Anzeigename
„Für Menschen verständlich“
Hinreichend unterscheidbar
![Page 54: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/54.jpg)
(Bild)
![Page 55: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/55.jpg)
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
![Page 56: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/56.jpg)
Nicht in diesem Vortrag:
Visualisierung, Diagramme
![Page 57: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/57.jpg)
Zusätzlicher Text
![Page 58: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/58.jpg)
Anzeigename
![Page 59: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/59.jpg)
Anzeigename
und/oder Bild
![Page 60: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/60.jpg)
![Page 61: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/61.jpg)
Anzeigename
und/oder Bild
plus weitere
Eigenschaften
![Page 62: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/62.jpg)
Anzeigename Anzeigename
Bild/Icon + Text
Anzeigename Beschreibung des Objekts
Bild/Icon + Text + Zusatzinfo
![Page 63: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/63.jpg)
Beispiel: Buch
![Page 64: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/64.jpg)
![Page 65: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/65.jpg)
Entwicklersicht
Alle Informationen vorhanden
„Hey, sogar mit Bild!“
Anwendersicht
Schwer zu lesen
„Und bei einfarbigem Cover?“
![Page 66: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/66.jpg)
![Page 67: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/67.jpg)
![Page 68: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/68.jpg)
Demo Einzelnes Objekt
![Page 69: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/69.jpg)
Dominanz
Domänen-
spezifische
Darstellung
Hierarchie
Whitespace Semantische
Gruppierung
![Page 70: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/70.jpg)
Es lohnt sich, den
„Charakter“ von
Objekteigenschaften
zu kennen
![Page 71: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/71.jpg)
Technische Sicht
Titel String
Autor String
Verlag String
Art String
Seiten Integer
Auflage Integer
Veröff.datum DateTime
Sprache String
ISBN-13 String
![Page 72: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/72.jpg)
Charakterisierung
Identifizierend?
Falls ja: Lokal / Global?
Selbstbeschreibend?
Falls ja: Wirklich? Für wen?
Zusammenhang mit anderen?
Gruppierung Layout
![Page 73: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/73.jpg)
Zusammengesetzter Anzeigetext
Anwenderhandbuch (PDF, 210Kb)
![Page 74: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/74.jpg)
Zusammengesetzter Anzeigetext
Anwenderhandbuch (PDF, 210Kb)
Titel Format Dateigröße
![Page 75: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/75.jpg)
Zusammengesetzter Anzeigetext
Anwenderhandbuch (PDF, 210Kb)
Produkt XY Anwenderhandbuch (DOCX, 240Kb)
Anwenderhandbuch (PDF, 210Kb)
Werbebroschüre (DOCX, 145Kb)
Werbebroschüre (PDF, 126Kb)
![Page 76: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/76.jpg)
Zusammengesetzter Anzeigetext
Anwenderhandbuch (PDF, 210Kb)
Urlaub vom 28.7.2011 bis 21.8.2011
Max Mustermann ([email protected])
![Page 77: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/77.jpg)
Charakterisierung
Endliche Anzahl von Werten?
Transformation möglich:
Text Bilder, Farben
Status
Gut
Mittel
Schlecht
![Page 78: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/78.jpg)
Charakterisierung
Endliche Anzahl von Werten?
Transformation möglich:
Text Bilder, Farben
Status
Gut
Mittel
Schlecht
![Page 79: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/79.jpg)
Charakterisierung
Endliche Anzahl von Werten?
Transformation möglich:
Text Bilder, Farben
Status
Gut
Mittel
Schlecht
? !
![Page 80: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/80.jpg)
Charakterisierung
Texte: Länge bekannt?
Minimal/Typisch/Maximal
Auswirkungen auf Layout
Entwurf vs. Realität
Entwurf: „Beispieltext“
Realdaten: „Donaudampfschifffahrts
![Page 81: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/81.jpg)
Charakterisierung
Texte: Was ist wichtig?
Anfang/Ende/Mitte/Alles?
Evtl. gekürzte Anzeige sinnvoll?
Das Geheimnis erfolgreicher GUI-Designer [...] mehr
D:\Talks\ ... \2012-02-28 - User Interface Patterns.pptx
Bestellnummer: 2011-...-A
![Page 82: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/82.jpg)
Charakterisierung
Zahlen
Groß/Klein
Nur groß/klein oder gemischt?
Negative Werte?
u.v.m.
![Page 83: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/83.jpg)
1. Einzelnes Objekt
2. Mehrere Objekte
![Page 84: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/84.jpg)
![Page 85: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/85.jpg)
![Page 86: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/86.jpg)
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
![Page 87: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/87.jpg)
Demo:
Vertikales Layout
![Page 88: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/88.jpg)
Vertikales Layout
Klassisch
Aber: Effektiv
Geeignet für breite, aber nicht
allzu hohe Objekte
„Langweilig“?
![Page 89: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/89.jpg)
Vertikales Layout
Danach habe ich nicht gesucht
Danach habe ich auch nicht gesucht
A
B
C
C
Danach habe ich gesucht, endlich gefunden!
![Page 90: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/90.jpg)
Demo:
Horizontales Layout
![Page 91: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/91.jpg)
Horizontales Layout
„Mal was anderes“
Problem: Mausrad
Für wenige, schmale Objekte
Interessant: Zeitachse
![Page 92: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/92.jpg)
Horizontales Layout
![Page 93: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/93.jpg)
Horizontales Layout
Interessanter Spezialfall:
Listen in Satzform
Wenige, nicht zu lange Texte
Eis: Vanille, Erdbeer, Schoko
![Page 94: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/94.jpg)
Demo:
Wrap/Matrix-Layout
![Page 95: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/95.jpg)
Wrap/Matrix-Layout
Attraktive Darstellung
Will gut überlegt sein!
Eher „Ich suche X“
oder „IKIWISI“ ?
I Know It When I See It
![Page 96: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/96.jpg)
Wrap/Matrix-Layout: Suche
![Page 97: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/97.jpg)
Wrap/Matrix-Layout: Suche
![Page 98: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/98.jpg)
Wrap/Matrix-Layout: Suche
![Page 99: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/99.jpg)
Wrap/Matrix-Layout: Stöbern
![Page 100: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/100.jpg)
Demo:
Verschiedene Layouts
![Page 101: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/101.jpg)
Fragen zur Auswahl
von Listen-Layouts
![Page 102: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/102.jpg)
Was ist der Anwendungsfall?
Überblick gewinnen?
Daten analysieren?
Nach etwas Konkretem suchen?
Einfach mal stöbern?
![Page 103: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/103.jpg)
Wahrscheinliche Betrachtung?
Schnelles Scannen nach etwas
Bestimmtem?
Ausschau nach (irgend)etwas
Interessantem?
![Page 104: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/104.jpg)
„Kochrezept“
Charakteristik
der Daten
herausarbeiten
Konkrete
Anwendungsfälle
identifizieren
Augenbewegungen
minimieren
Geeignetes Layout
![Page 105: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/105.jpg)
Zusammenfassung: Varianten
Eindimensional
Als Liste von Einzelobjekten
Tabellarisch
Als Aufzählung in Satzform
Mehrdimensional
Matrix (Wrap)
![Page 106: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/106.jpg)
![Page 107: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/107.jpg)
II. Interaktion
![Page 108: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/108.jpg)
1.
Befehl erteilen /
Aktion starten
![Page 109: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/109.jpg)
Command Buttons,
Hyperlinks, Icons,
Command Links
Menüs, Toolbars
Dropdowns,
Popups, Ribbons, ...
Command Buttons,
Hyperlinks, Icons,
Command Links
Menüs, Toolbars
Dropdowns,
Popups, Ribbons, ...
Command Buttons,
Hyperlinks, Icons,
Command Links
Menüs, Toolbars
Dropdowns,
Popups, Ribbons, ...
![Page 110: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/110.jpg)
Klickbare
Schaltfläche
![Page 111: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/111.jpg)
Button
Eines der „Ur“-Controls
Metapher aus der realen Welt
dadurch hohe „Affordance“
![Page 112: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/112.jpg)
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
![Page 113: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/113.jpg)
Demo:
Button & Hyperlinks
![Page 114: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/114.jpg)
Button
Primäre Aktionen
„In 80% der Fälle klickt man X“
Hyperlink
Sekundäre Aktionen
GUIs schlank halten
![Page 115: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/115.jpg)
Demo:
„Schlanke GUI“
![Page 116: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/116.jpg)
![Page 117: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/117.jpg)
2.
Daten eingeben
![Page 118: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/118.jpg)
Check Box, Combo
Box, Drop-down
List, List Builder,
Radio Button, Text
Box, Up/Down
Control, ...
Check Box,
Combo
Box,
Drop-down
List, List Builder, Radio
Button, Text Box,
Up/Down Control, ...
Check Box, Combo
Box, Drop-down List,
List Builder, Radio
Button, Text Box,
Up/Down Control, ...
![Page 119: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/119.jpg)
Technik ist klar -
„Unser täglich Brot“
![Page 120: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/120.jpg)
Was ist zu tun, damit
Anwender fundierte
Entscheidungen
treffen können?
![Page 121: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/121.jpg)
Demo:
„Einstellungen“
![Page 122: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/122.jpg)
![Page 123: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/123.jpg)
Wie geht man mit
Komplexität um?
![Page 124: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/124.jpg)
Klick mich! Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich!
Klick mich! Klick mich! Klick mich! Klick mich!
![Page 125: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/125.jpg)
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!
![Page 126: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/126.jpg)
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!
![Page 127: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/127.jpg)
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!
![Page 128: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/128.jpg)
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!
![Page 129: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/129.jpg)
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!
![Page 130: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/130.jpg)
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...
![Page 131: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/131.jpg)
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!
![Page 132: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/132.jpg)
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!
![Page 133: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/133.jpg)
Klick mich!
Klick mich!
Klick mich!
C
Klick mich!
Klick mich!
Klick mich!
B
Verschieben
Klick mich!
Klick mich!
Klick mich!
Die Funktionen sind nur in einem bestimmten Kontext zugänglich
A
![Page 134: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/134.jpg)
Elemente...
Entfernen
Organisieren
Verbergen
Verschieben
![Page 135: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/135.jpg)
Patterns
![Page 136: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/136.jpg)
Progressive
Disclosure
„Schrittweise Offenlegung“
![Page 137: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/137.jpg)
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)
![Page 138: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/138.jpg)
Demo:
„Progressive Disclosure“
![Page 139: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/139.jpg)
Responsive
Disclosure
„Reagierende Offenlegung“
![Page 140: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/140.jpg)
Responsive Disclosure
Einblenden von UI-Elementen
in Abhängigkeit von Eingaben
bzw. Aktionen des Benutzers
Spezialfall von Progressive D.
Eher fachlich als technisch
![Page 141: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/141.jpg)
Demo:
„Responsive Disclosure“
![Page 142: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/142.jpg)
Responsive
Enabling
„Reagierende Freigabe“
![Page 143: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/143.jpg)
Responsive Enabling
Freigeben von UI-Elementen
in Abhängigkeit von Eingaben
bzw. Aktionen des Benutzers
![Page 144: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/144.jpg)
Demo
„Responsive Enabling“
![Page 145: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/145.jpg)
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
![Page 146: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/146.jpg)
![Page 147: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/147.jpg)
Kaum eine Lösung
ist für alle Fälle
gleich gut...
![Page 148: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/148.jpg)
Chance: Spezialfälle
erkennen
![Page 149: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/149.jpg)
Demo:
Spezialfall
![Page 150: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/150.jpg)
![Page 151: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/151.jpg)
Sammlung
wichtiger
Fragen
![Page 152: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/152.jpg)
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?
![Page 153: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/153.jpg)
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?
![Page 154: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/154.jpg)
Material
![Page 155: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/155.jpg)
Pattern Libraries
![Page 156: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/156.jpg)
Websites (Pattern Libraries)
Quince
http://quince.infragistics.com/
UI Patterns
http://ui-patterns.com/
Welie.com
http://welie.com
![Page 157: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/157.jpg)
Bücher
Designing
Interfaces
2nd Edition
User Interface Patterns,
gute Mischung aus
Beispielen + Theorie
![Page 158: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/158.jpg)
Bücher
Don‘t Make
Me Think
Oft zitierte, gut lesbare
Einführung in grundle-
gende Usability-Themen
![Page 159: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/159.jpg)
Bücher
Designing the
Obvious
Anwender, Use Cases,
mentale Modelle,
schrittweise Verfeinerung
![Page 160: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/160.jpg)
Bücher
Simple and Usable
Vereinfachung am Beispiel
einer DVD-Fernbedienung:
So einfach wie möglich,
aber nicht einfacher
![Page 161: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/161.jpg)
UX Interaction Guidelines
Online und als PDF-Download
http://msdn.microsoft.com/en
-us/library/aa511258.aspx
![Page 162: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/162.jpg)
Fragen?
![Page 163: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/163.jpg)
Vielen Dank!
![Page 164: Roland Weigelt User Interface Patterns · Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque](https://reader030.vdokument.com/reader030/viewer/2022041214/5e033b8fd9e2ea2f2042604e/html5/thumbnails/164.jpg)
Verwendung der Abbildungen aus den User
Experience Guidelines mit freundlicher
Genehmigung der Microsoft Corporation.