1. UI Design Patterns für Navigationssysteme auf mobilen Geräten Fabian Hermann, Rainer Gibbert Fraunhofer IAO, Stuttgart Fabian.Hermann@iao.fhg.de, Rainer.Gibbert@gmx.de

2. Agenda Das Projekt SAiMotion Design Patterns und Design Pattern-Sprachen Bestehende UI Design Pattern-Sprachen UI Design Patterns für Navigationssysteme auf mobilen Geräten Diskussion und Ausblick

3. Das Projekt SAiMotion Forschungsprojekt der Fraunhofer Gesellschaft, gefördert vom BMBF Projektziel Adaptives Informationssystem für Veranstaltungen wie Messen, Kongresse und andere mobile Nutzungssituationen Geplante Funktionalität Messeführer: Messekatalog: Aussteller, Produktgruppen, Veranstaltungen ... Mobiler Client mit WLAN-Access und Ortung über WLAN Tourplanung und adaptive Informationsdarstellung (LBS)

4. Interaktive Karten in SAiMotion Übersicht- und Wegführungskarten Hoher Stellenwert der Orientierung und Navigation bei Messebesuchen: Zeitdruck bei professionellen Besuchern unbekannte Umgebung räumliches/zeitliches Planen der Route Technische Umsetzung statische Vektor-Grafiken (SVG) Interaktivität von Karten-Objekten Karten-Browser Prototyp auf Cebit 2003 für den FhG-Gemeinschaftsstand

5. Design Patterns und Pattern-Sprachen Ursprung: vom Architekten Christopher Alexander ab 1977 entwickelt seit 1995 in der Softwaretechnik aufgegriffen („Gang of Four“) CHI’97 - erster Workshop „Interaction Design Patterns“ Ansatz (1):Design Patterns Beschreiben wiederkehrende Design-Probleme dazugehörige Lösungen Geben Beispiele für konkrete Umsetzungen Konsistenter Aufbau (Name, Illustration, Kontext, Problemstellung, Beispiele, Lösung mit Diagram, Referenzen)

6. Design Patterns und Pattern-Sprachen Ansatz (2):Design Pattern-Sprache strukturierte Sammlung von Design Patterns hierarchische Struktur von allgemeinen, abstrakten Problemen bis zu konkreten, spezifischen Designfragen Schnelles und einfaches Lösen von Design-Aufgaben durch rekursiven Verfeinerung mittels Durchlaufen der Hierarchie Zweck: Sammlung und Speicherung von Design-Problemen und dazugehörigen Lösungen (-> umfassender User Interface Wissens-Katalog) Interdisziplinäre Kommunikation innerhalb Design-Teams und mit den Anwendern des Produktes

7. Bestehende UI Design Pattern-Sprachen Jenifer Tidwell1: „Common Ground“ ca. 60 Interface Design Patterns Martijn van Welie2: „Patterns in Interaction Design “ Patterns zu Web-Design, GUI-Design und Mobile UI Jan Borchers3: „A Pattern Approach to Interaction Design“ HCI Pattern Language, Musical Pattern Language, Software Pattern Language van Duyne, Landay und Hong4: „The Design of Sites“ 90 Website Design Patterns, unterteilt in 12 Untergruppen wie Navigation, Seiten-Layout oder E-Commerce Tidwell, J. (1999): COMMON GROUND: A Pattern Language for Human-Computer Interface Design. http://www.mit.edu/~jtidwell/common_ground.html van Welie, M. (2003): Patterns in Interaction Design. http://www.welie.com Borchers, J. O. (2001): A Pattern Approach to Interaction Design. John Wiley & Sons. van Duyne, D. K., Landay, J. und Hong, J. I. (2002): The Design of Sites: Patterns, Principles, and Processes for Creating a Customer-Centered Web Experience. Addison-Wesley Longman Publishing Co., Inc.

8. Bestehende UI Design Pattern-Sprachen Charles Weir und James Noble1: „A Window in your Pocket“ 10 Interface Design Patterns für mobile Geräte basierend auf einer der Hauptbeschränkungen von mobilen Geräten – den kleinen Displays Weir, C. und Noble, J. (2001): A window in your pocket - Some small patterns for user interfaces. In Proceedings of the European Conference on Pattern Languages of Program Design, EuroPloP 2001. The Hillside Group, Inc.

9. UI Design Patterns für Navigationssysteme auf mobilen Geräten - Sprachhierarchie

10. UI Design Patterns für Navigationssysteme auf mobilen Geräten - Sprachhierarchie

11. Beispiel-Pattern (abstrakt): NAVIGATION SYSTEM (1) Problem:Wie können Personen von einem Ort zu einem anderen geführt werden? Menschen sind immer unterwegs benutzen unterschiedliche Fortbewegungsmittel wissen aber selten, wohin genau sie müssen und wie sie dort hin gelangen Lösung:Mittels eines Navigationssystems können Personen geführt werden.Hiermit können diese einfach Routen planen Sich Karten anschauen Entlang Routen geführt werden

12. Beispiel-Pattern (abstrakt): NAVIGATION SYSTEM (2) Beispiele: Referenzen auf Unterpatterns: PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE IN-CAR-NAVIGATION SLOW-TRAVELLER-NAVIGATION

13. Beispiel-Pattern (abstrakt): NAVIGATION SYSTEM (3)

14. UI Design Patterns für Navigationssysteme auf mobilen Geräten - Sprachhierarchie

15. UI Design Patterns für Navigationssysteme auf mobilen Geräten - Sprachhierarchie

16. UI Design Patterns für Navigationssysteme auf mobilen Geräten - Sprachhierarchie

17. UI Design Patterns für Navigationssysteme auf mobilen Geräten - Sprachhierarchie

18. UI Design Patterns für Navigationssysteme auf mobilen Geräten - Sprachhierarchie

19. Beispiel-Pattern (konkret): HELICOPTER FUNCTION (1) Kontext: OVERVIEW Problem:Wie kann eine Funktion, die einendirekten und informativen Überblick über eine Karte bieten soll, gestalten werden? Lösung:Eine Helikopter-Funktion, welche auf Knopfdruck kurzzeitig aus der Karteherauszoomt und anschließend auto- matisch wieder hereinzoomt gibt einen schnellen und informativen Überblick

20. Beispiel-Pattern (konkret): HELICOPTER FUNCTION (2) Beispiele: Falk City Guide, Map24.de Referenzen auf Unterpatterns:keine

21. Beispiel-Pattern (konkret): HELICOPTER FUNCTION (3)

22. Diskussion Vergleich zu „herkömmlichen“ Methoden Guidelines (z.B. „Eight Golden Rules of Interface Design“ von Shneiderman): Sehr abstrakt Beschreiben meist eher allgemeine Design-Prinzipien z.B. „Be consistent!“ Style Guides (z.B. „Aqua Human Interface Guidelines“ von Apple, „Microsoft Windows User Experience“): zu sehr auf ein bestimmtes System zugeschnitten Schwerpunkt: Beschreibung konkreter Interface-Elemente und deren Anordnung Nicht allgemeingültig werden hinfällig, sobald für ein anderes System gestaltet werden soll Keine explizite Problemstellungen oder allgemeingültige Lösung eines Design-Problems

23. Diskussion Patterns hingegen: Sind „zeitlose“ Lösungen für allgemeine Design-Probleme Bieten aber auch sehr konkrete Lösungsvorschläge Bewältigung von Design-Aufgaben durch rekursive Verfeinerung mittels Durchlaufen der Hierarchie Bilden Vokabeln in einer hierarchischen Pattern-Sprache Erlauben somit interdisziplinäre Kommunikation innerhalb Projekt-Teams und mit Anwendern Voraussetzung: Umfassende Pattern-Sprache / -Katalog / -Bibliothek muss entwickelt werden muss gepflegt werden Patterns müssen durch Kontext u. Referenzen wirklich eine Sprache bilden -> Mehrwert gegenüber Sammlung

24. Ausblick Nutzen in Projekten Als „Meta Style Guide“ in ähnlichen Projekten Von Beginn an konsultiert Auswahl der für das Projekt wichtigen Patterns (z.B. Indoor- vs. Outdoor-Navigation) Nutzen zu Lehrzwecken Einführung neuer Teammitglieder In Kursen/Vorlesungen zur Einführung ins GUI-Design zur Demonstration des Ansatzes

25. Vielen Dank für Ihre Aufmerksamkeit!