UI Pattern: Tagging in der
Anwendungsnavigation
@RolandWeigelt
mail@roland-weigelt.de
Roland Weigelt
•Comma Soft AG in Bonn
•1997 – Software-Entwickler (meist Frontend)
•2012 – User Experience Specialist
•201...
Hobby / Nebenjob
•Telekom Baskets Bonn
 Basketball Bundesliga (BBL)
 Kein Top-Budget  Viel Do-it-Yourself
•Aufgabe: Mul...
Foto: Roland Weigelt
Foto: Beatrice Treydel, www.gesichter-bonns.de
Foto: Roland Weigelt
Foto: Roland Weigelt
Software für Videowände
Software für Videowände
•Jede Menge Features...
• Freitext-Bauchbinde  Spielernamen-Bauchbinde
 Team-Statistik als Bauc...
Anwendungsteile mit
großem Platzbedarf
Anwendungsteil #1 Anwendungsteil #2 Anwendungsteil #3
Anwendungsteil #1
Anwendungsteil #2
Anwendungsteil #3
Anwendungsteil #4
Anwendungsteil #5
Anwendungsteil #6
Anwendungsteil...
Strategien
•Entfernen
 Funktionen tatsächlich einfach weglassen
•Organisieren
 Gruppieren, getrennt anordnen
•Verbergen
...
Entfernen
•Features „on-demand“ entstanden
 Max. ein oder zwei könnten evtl. weg
• Wenig Potential für Verbesserung
Ausgabe
 Bauchbinde
 Overlay
 Vollbild
76 : 70
Evtl. doch „Entfernen“?
•Denkbar: Software aufteilen
 Bauchbinde nur zusammen mit Livekamera
 Overlay nur mit (offiziell...
Organisieren
•Bauchbinden
 Bauchbinde #1
 Bauchbinde #2
 Bauchbinde #3
 Bauchbinde #4
•Overlays
 Overlay #1
 Overlay...
Organisieren + Verbergen
•[-] Bauchbinden
 Bauchbinde #1
 Bauchbinde #2
 Bauchbinde #3
 Bauchbinde #4
•[+] Overlays
•[...
Organisieren + Verbergen
•[+] Bauchbinden
•[-] Overlays
 Overlay #1
 Overlay #2
 Overlay #3
 Overlay #4
•[+] Vollbild
Organisieren + Verbergen
•[+] Bauchbinden
•[+] Overlays
•[-] Vollbild
 Overlay #1
 Overlay #2
 Overlay #3
 Overlay #4
Bauchbinden Overlays Vollbild
Bauchbinde #1
Bauchbinde #1
Bauchbinde #2
Bauchbinde #3
Bauchbinde #4
Bauchbinde #5
Bauchbin...
„Art“ ist eine mögliche
Kategorisierung.
„Aufgabe“ ist eine
andere.
Aufgaben
•Allgemeine Informationen
•Wettbewerbe, Gewinnspiele
•Statistiken
Tagging
•Tag: Etikett
 Preis: Diese Jacke kostet 199,-
 Material: FooBarTex® plus
 Produktfamilie: Contoso Outdoor
<Demo>
In der Praxis
•Gewählte Einstellung typischerweise über
mehrere Minuten in Benutzung
•Bedienung meist in „Vorbereitungspha...
Geht noch mehr?
In der Praxis
•Noch geringer Nutzen
 „Art“ und „Aufgabe“ schränken hinreichend ein
•Langfristige vs. kurzfristige Auswahl...
Fazit
•Tags funktionieren – in diesem Fall
•Anzahl der Tags sollte wohl nicht zu groß sein
 Platzbedarf
 Auffinden eines...
UI Pattern: Tagging in derAnwendungsnavigation
UI Pattern: Tagging in derAnwendungsnavigation
UI Pattern: Tagging in derAnwendungsnavigation
UI Pattern: Tagging in derAnwendungsnavigation
UI Pattern: Tagging in derAnwendungsnavigation
Nächste SlideShare
Wird geladen in …5
×

UI Pattern: Tagging in derAnwendungsnavigation

443 Aufrufe

Veröffentlicht am

Das UI Design der Navigation in einer aus mehreren unabhängigen Screens bestehen Anwendung ist eigentlich recht einfach - ein paar horizontale oder vertikale Tabs, fertig.
Ich stand vor dem Problem, dass in meiner Anwendung die Zahl der Screens nach und nach immer größer wurde und stelle in diesem Kurzvortrag eine Lösung auf Basis von gruppierten Tags vor.

Veröffentlicht in: Software
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
443
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

UI Pattern: Tagging in derAnwendungsnavigation

  1. 1. UI Pattern: Tagging in der Anwendungsnavigation @RolandWeigelt mail@roland-weigelt.de
  2. 2. Roland Weigelt •Comma Soft AG in Bonn •1997 – Software-Entwickler (meist Frontend) •2012 – User Experience Specialist •2014 – Senior Product Designer @RolandWeigelt mail@roland-weigelt.de
  3. 3. 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
  4. 4. Foto: Roland Weigelt
  5. 5. Foto: Beatrice Treydel, www.gesichter-bonns.de
  6. 6. Foto: Roland Weigelt
  7. 7. Foto: Roland Weigelt
  8. 8. Software für Videowände
  9. 9. 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
  10. 10. Anwendungsteile mit großem Platzbedarf
  11. 11. Anwendungsteil #1 Anwendungsteil #2 Anwendungsteil #3
  12. 12. Anwendungsteil #1 Anwendungsteil #2 Anwendungsteil #3 Anwendungsteil #4 Anwendungsteil #5 Anwendungsteil #6 Anwendungsteil #7
  13. 13. Strategien •Entfernen  Funktionen tatsächlich einfach weglassen •Organisieren  Gruppieren, getrennt anordnen •Verbergen  Nur bei Bedarf anzeigen, auf/zuklappen etc. •Verlagern  Über anderes Bedienkonzept nachdenken
  14. 14. Entfernen •Features „on-demand“ entstanden  Max. ein oder zwei könnten evtl. weg • Wenig Potential für Verbesserung
  15. 15. Ausgabe  Bauchbinde  Overlay  Vollbild 76 : 70
  16. 16. 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!
  17. 17. Organisieren •Bauchbinden  Bauchbinde #1  Bauchbinde #2  Bauchbinde #3  Bauchbinde #4 •Overlays  Overlay #1  Overlay #2
  18. 18. Organisieren + Verbergen •[-] Bauchbinden  Bauchbinde #1  Bauchbinde #2  Bauchbinde #3  Bauchbinde #4 •[+] Overlays •[+] Vollbild
  19. 19. Organisieren + Verbergen •[+] Bauchbinden •[-] Overlays  Overlay #1  Overlay #2  Overlay #3  Overlay #4 •[+] Vollbild
  20. 20. Organisieren + Verbergen •[+] Bauchbinden •[+] Overlays •[-] Vollbild  Overlay #1  Overlay #2  Overlay #3  Overlay #4
  21. 21. Bauchbinden Overlays Vollbild Bauchbinde #1 Bauchbinde #1 Bauchbinde #2 Bauchbinde #3 Bauchbinde #4 Bauchbinde #5 Bauchbinde #6 Bauchbinde #7 Organisieren + Verbergen
  22. 22. „Art“ ist eine mögliche Kategorisierung. „Aufgabe“ ist eine andere.
  23. 23. Aufgaben •Allgemeine Informationen •Wettbewerbe, Gewinnspiele •Statistiken
  24. 24. Tagging •Tag: Etikett  Preis: Diese Jacke kostet 199,-  Material: FooBarTex® plus  Produktfamilie: Contoso Outdoor
  25. 25. <Demo>
  26. 26. In der Praxis •Gewählte Einstellung typischerweise über mehrere Minuten in Benutzung •Bedienung meist in „Vorbereitungsphasen“ •Aber auch unter Stress bedienbar
  27. 27. Geht noch mehr?
  28. 28. 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.ä.
  29. 29. Fazit •Tags funktionieren – in diesem Fall •Anzahl der Tags sollte wohl nicht zu groß sein  Platzbedarf  Auffinden eines bestimmten Tags •Wie üblich: Ausprobieren!

×