34
UI Pattern: Tagging in der Anwendungsnavigation @RolandWeigelt [email protected]

UI Pattern: Tagging in derAnwendungsnavigation

Embed Size (px)

Citation preview

Page 1: UI Pattern: Tagging in derAnwendungsnavigation

UI Pattern: Tagging in derAnwendungsnavigation

@RolandWeigelt

[email protected]

Page 2: UI Pattern: Tagging in derAnwendungsnavigation

Roland Weigelt

•Comma Soft AG in Bonn

•1997 – Software-Entwickler (meist Frontend)

•2012 – User Experience Specialist

•2014 – Senior Product Designer

@RolandWeigelt

[email protected]

Page 3: UI Pattern: Tagging in derAnwendungsnavigation

Hobby / Nebenjob

•Telekom Baskets Bonn

Basketball Bundesliga (BBL)

Kein Top-Budget Viel Do-it-Yourself

•Aufgabe: Multimedia in der Halle

PowerPoint, Video, Software-Entwicklung

Photo credit: Jörn Wolter, www.wolterfoto.de

Page 4: UI Pattern: Tagging in derAnwendungsnavigation

Foto: Roland Weigelt

Page 5: UI Pattern: Tagging in derAnwendungsnavigation

Foto: Beatrice Treydel, www.gesichter-bonns.de

Page 6: UI Pattern: Tagging in derAnwendungsnavigation

Foto: Roland Weigelt

Page 7: UI Pattern: Tagging in derAnwendungsnavigation

Foto: Roland Weigelt

Page 8: UI Pattern: Tagging in derAnwendungsnavigation

Software für Videowände

Page 9: UI Pattern: Tagging in derAnwendungsnavigation

Software für Videowände

•Jede Menge Features...

• Freitext-Bauchbinde Spielernamen-Bauchbinde

Team-Statistik als Bauchbinde Team-Statistik als

Overlay Team-Statistik als Vollbild Timer-

Bauchbinde Einzelstatistik als Overlay

Einzelstatistik als Vollbild Liga-Info als Vollbild

Starting Five als Vollbild Folien als Vollbild

Sitzlotterie als Vollbild Bilder als Vollbild Bilder

als Bauchbinde Spielphasen als Vollbild/Overlay

Page 10: UI Pattern: Tagging in derAnwendungsnavigation

Anwendungsteile mit

großem Platzbedarf

Page 11: UI Pattern: Tagging in derAnwendungsnavigation

Anwendungsteil #1 Anwendungsteil #2 Anwendungsteil #3

Page 12: UI Pattern: Tagging in derAnwendungsnavigation

Anwendungsteil #1

Anwendungsteil #2

Anwendungsteil #3

Anwendungsteil #4

Anwendungsteil #5

Anwendungsteil #6

Anwendungsteil #7

Page 13: UI Pattern: Tagging in derAnwendungsnavigation
Page 14: UI Pattern: Tagging in derAnwendungsnavigation
Page 15: UI Pattern: Tagging in derAnwendungsnavigation
Page 16: UI Pattern: Tagging in derAnwendungsnavigation

Strategien

•Entfernen

Funktionen tatsächlich einfach weglassen

•Organisieren

Gruppieren, getrennt anordnen

•Verbergen

Nur bei Bedarf anzeigen, auf/zuklappen etc.

•Verlagern

Über anderes Bedienkonzept nachdenken

Page 17: UI Pattern: Tagging in derAnwendungsnavigation

Entfernen

•Features „on-demand“ entstanden

Max. ein oder zwei könnten evtl. weg

• Wenig Potential für Verbesserung

Page 18: UI Pattern: Tagging in derAnwendungsnavigation

Ausgabe

Bauchbinde

Overlay

Vollbild

76 : 70

Page 19: UI Pattern: Tagging in derAnwendungsnavigation

Evtl. doch „Entfernen“?

•Denkbar: Software aufteilen

Bauchbinde nur zusammen mit Livekamera

Overlay nur mit (offizieller) Anzeigentafel

Vollbild

•Ohnehin mehrere Rechner im Einsatz

•Aber: Redundanz hier durchaus gewollt!

Page 20: UI Pattern: Tagging in derAnwendungsnavigation

Organisieren

•Bauchbinden

Bauchbinde #1

Bauchbinde #2

Bauchbinde #3

Bauchbinde #4

•Overlays

Overlay #1

Overlay #2

Overlay #3

Page 21: UI Pattern: Tagging in derAnwendungsnavigation

Organisieren + Verbergen

•[-] Bauchbinden

Bauchbinde #1

Bauchbinde #2

Bauchbinde #3

Bauchbinde #4

•[+] Overlays

•[+] Vollbild

Page 22: UI Pattern: Tagging in derAnwendungsnavigation

Organisieren + Verbergen

•[+] Bauchbinden

•[-] Overlays

Overlay #1

Overlay #2

Overlay #3

Overlay #4

•[+] Vollbild

Page 23: UI Pattern: Tagging in derAnwendungsnavigation

Organisieren + Verbergen

•[+] Bauchbinden

•[+] Overlays

•[-] Vollbild

Overlay #1

Overlay #2

Overlay #3

Overlay #4

Page 24: UI Pattern: Tagging in derAnwendungsnavigation

Bauchbinden Overlays Vollbild

Bauchbinde #1

Bauchbinde #1

Bauchbinde #2

Bauchbinde #3

Bauchbinde #4

Bauchbinde #5

Bauchbinde #6

Bauchbinde #7

Organisieren + Verbergen

Page 25: UI Pattern: Tagging in derAnwendungsnavigation

„Art“ ist eine möglicheKategorisierung.

„Aufgabe“ ist eineandere.

Page 26: UI Pattern: Tagging in derAnwendungsnavigation

Aufgaben

•Allgemeine Informationen

•Wettbewerbe, Gewinnspiele

•Statistiken

Page 27: UI Pattern: Tagging in derAnwendungsnavigation

Tagging

•Tag: Etikett

Preis: Diese Jacke kostet 199,-

Material: FooBarTex® plus

Produktfamilie: Contoso Outdoor

Page 28: UI Pattern: Tagging in derAnwendungsnavigation
Page 29: UI Pattern: Tagging in derAnwendungsnavigation
Page 30: UI Pattern: Tagging in derAnwendungsnavigation

<Demo>

Page 31: UI Pattern: Tagging in derAnwendungsnavigation

In der Praxis

•Gewählte Einstellung typischerweise über

mehrere Minuten in Benutzung

•Bedienung meist in „Vorbereitungsphasen“

•Aber auch unter Stress bedienbar

Page 32: UI Pattern: Tagging in derAnwendungsnavigation

Geht noch mehr?

Page 33: UI Pattern: Tagging in derAnwendungsnavigation

In der Praxis

•Noch geringer Nutzen

„Art“ und „Aufgabe“ schränken hinreichend ein

•Langfristige vs. kurzfristige Auswahl

Müssen alle Tags der Kategorie sichtbar sein?

Denkbar: Dropdown-Liste o.ä.

Page 34: UI Pattern: Tagging in derAnwendungsnavigation

Fazit

•Tags funktionieren – in diesem Fall

•Anzahl der Tags sollte wohl nicht zu groß sein

Platzbedarf

Auffinden eines bestimmten Tags

•Wie üblich: Ausprobieren!