UI Design Patterns für Navigationssysteme auf mobilen Geräten

Der Verband der deutschen Usability Professionals www.gc-upa.de

German Chapter der Usability Professionals‘ Association e.V.

1. Workshop des GC-UPA 08.-10.09.2003 Stuttgart

UI Design Patterns für Navigationssysteme auf mobilen Geräten

Fabian Hermann, Rainer Gibbert

Fraunhofer IAO, Stuttgart

[email protected], [email protected]

1. GC-UPA Workshop Folie 2 / 25

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


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)


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


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)


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


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

(1) Tidwell, J. (1999): COMMON GROUND: A Pattern Language for Human-Computer Interface Design. http://www.mit.edu/~jtidwell/common_ground.html

(2) van Welie, M. (2003): Patterns in Interaction Design. http://www.welie.com

(3) Borchers, J. O. (2001): A Pattern Approach to Interaction Design. John Wiley & Sons.

(4) 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.


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

DIAL 'H'FOR HELP

ONE TRUE

WINDOW

HIDE AND SEEK SCROLLING

CHAIN OF

DIALOGS

CUP OF TEA

TEST

BIG

THUMB

USER

CUSTOMISATION

CATEGORIES

A PICTURE IS

SMALLER THAN

A THOUSAND

WORDS

(1) 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.


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

NAVIGATION SYSTEM

SLOW-TRAVELER-NAVIGATION

IN-CAR-NAVIGATION

INDOOR-NAVIGATION OUTDOOR-NAVIGATION

PLANNING A ROUTE

DEPARTURE ANDDESTINATION

TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION

LEVEL OF DETAIL

ROUTE FAVORITS

POINTS OF INTEREST

EVASION

INTERSTATIONS

FUZZY TEXT ENTRY

ROUTE TYPES

CREATING NEW ROUTES

ROUTE GUIDANCE

ROUTE AS A WHOLETURN-BY-TURN

GUIDANCE

VOICE GUIDANCEROUTE SKETCHES2D ROUTE MAPSPSEUDO-REALISTIC

INSTRUCTIONS

MAP ORIENTATION

DYNAMICRECALCULATION /BACK ON TRACK

INSTRUCTIONS LIST

DISTANCE BAR

DISTANCE INDICATIONDIRECTIONALPICTOGRAMS

LANDMARKS

INTERACTIVE MAPS

ZOOMING PANNING

ZOOM SLIDER

MAGNETIC POSITIONS

DISCRETE VIEWS

OVERVIEWWHERE AM I?

SPEED-DEPENDENTAUTO-ZOOM

HELICOPTERFUNCTION

ZOOMING FOCUSNAVIGABLE

OVERVIEW WINDOW

NIGHT VIEW SCALE BAR

CONTINUOUS PANNINGUSING

SCROLL BARS

CONTINUOS PANNINGUSING

DRAG'N'DROP

DISCRETE MOVEMENTSUSING

DOUBLE CLICKING

ADAPTIVE INTERACTIVELEGEND


BUTTONS



NAVIGATION SYSTEM


IN-CAR-NAVIGATION


PLANNING A ROUTE



LEVEL OF DETAIL

ROUTE FAVORITS

POINTS OF INTEREST

EVASION

INTERSTATIONS

FUZZY TEXT ENTRY

ROUTE TYPES

CREATING NEW ROUTES

ROUTE GUIDANCE


GUIDANCE


INSTRUCTIONS

MAP ORIENTATION


INSTRUCTIONS LIST

DISTANCE BAR


LANDMARKS

INTERACTIVE MAPS

ZOOMING PANNING

ZOOM SLIDER

MAGNETIC POSITIONS

DISCRETE VIEWS

OVERVIEWWHERE AM I?


HELICOPTERFUNCTION


OVERVIEW WINDOW



SCROLL BARS


DRAG'N'DROP


DOUBLE CLICKING



BUTTONS

NAVIGATION SYSTEM


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



• Beispiele:

• Referenzen auf Unterpatterns:– PLANNING A ROUTE– INTERACTIVE MAPS– ROUTE GUIDANCE– IN-CAR-NAVIGATION– SLOW-TRAVELLER-NAVIGATION



NAVIGATION SYSTEM


IN-CAR-NAVIGATION


PLANNING A ROUTE



LEVEL OF DETAIL

ROUTE FAVORITS

POINTS OF INTEREST

EVASION

INTERSTATIONS

FUZZY TEXT ENTRY

ROUTE TYPES

CREATING NEW ROUTES

ROUTE GUIDANCE


GUIDANCE


INSTRUCTIONS

MAP ORIENTATION


INSTRUCTIONS LIST

DISTANCE BAR


LANDMARKS

INTERACTIVE MAPS

ZOOMING PANNING

ZOOM SLIDER

MAGNETIC POSITIONS

DISCRETE VIEWS

OVERVIEWWHERE AM I?


HELICOPTERFUNCTION


OVERVIEW WINDOW



SCROLL BARS


DRAG'N'DROP


DOUBLE CLICKING



BUTTONS

NAVIGATION SYSTEM



NAVIGATION SYSTEM


IN-CAR-NAVIGATION


PLANNING A ROUTE



LEVEL OF DETAIL

ROUTE FAVORITS

POINTS OF INTEREST

EVASION

INTERSTATIONS

FUZZY TEXT ENTRY

ROUTE TYPES

CREATING NEW ROUTES

ROUTE GUIDANCE


GUIDANCE


INSTRUCTIONS

MAP ORIENTATION


INSTRUCTIONS LIST

DISTANCE BAR


LANDMARKS

INTERACTIVE MAPS

ZOOMING PANNING

ZOOM SLIDER

MAGNETIC POSITIONS

DISCRETE VIEWS

OVERVIEWWHERE AM I?


HELICOPTERFUNCTION


OVERVIEW WINDOW



SCROLL BARS


DRAG'N'DROP


DOUBLE CLICKING



BUTTONS

PLANNING A ROUTE



NAVIGATION SYSTEM


IN-CAR-NAVIGATION


PLANNING A ROUTE



LEVEL OF DETAIL

ROUTE FAVORITS

POINTS OF INTEREST

EVASION

INTERSTATIONS

FUZZY TEXT ENTRY

ROUTE TYPES

CREATING NEW ROUTES

ROUTE GUIDANCE


GUIDANCE


INSTRUCTIONS

MAP ORIENTATION


INSTRUCTIONS LIST

DISTANCE BAR


LANDMARKS

INTERACTIVE MAPS

ZOOMING PANNING

ZOOM SLIDER

MAGNETIC POSITIONS

DISCRETE VIEWS

OVERVIEWWHERE AM I?


HELICOPTERFUNCTION


OVERVIEW WINDOW



SCROLL BARS


DRAG'N'DROP


DOUBLE CLICKING



BUTTONS

ROUTE GUIDANCE



NAVIGATION SYSTEM


IN-CAR-NAVIGATION


PLANNING A ROUTE



LEVEL OF DETAIL

ROUTE FAVORITS

POINTS OF INTEREST

EVASION

INTERSTATIONS

FUZZY TEXT ENTRY

ROUTE TYPES

CREATING NEW ROUTES

ROUTE GUIDANCE


GUIDANCE


INSTRUCTIONS

MAP ORIENTATION


INSTRUCTIONS LIST

DISTANCE BAR


LANDMARKS

INTERACTIVE MAPS

ZOOMING PANNING

ZOOM SLIDER

MAGNETIC POSITIONS

DISCRETE VIEWS

OVERVIEWWHERE AM I?


HELICOPTERFUNCTION


OVERVIEW WINDOW



SCROLL BARS


DRAG'N'DROP


DOUBLE CLICKING



BUTTONS

INTERACTIVE MAPS



NAVIGATION SYSTEM


IN-CAR-NAVIGATION


PLANNING A ROUTE



LEVEL OF DETAIL

ROUTE FAVORITS

POINTS OF INTEREST

EVASION

INTERSTATIONS

FUZZY TEXT ENTRY

ROUTE TYPES

CREATING NEW ROUTES

ROUTE GUIDANCE


GUIDANCE


INSTRUCTIONS

MAP ORIENTATION


INSTRUCTIONS LIST

DISTANCE BAR


LANDMARKS

INTERACTIVE MAPS

ZOOMING PANNING

ZOOM SLIDER

MAGNETIC POSITIONS

DISCRETE VIEWS

OVERVIEWWHERE AM I?


HELICOPTERFUNCTION


OVERVIEW WINDOW



SCROLL BARS


DRAG'N'DROP


DOUBLE CLICKING



BUTTONS

OVERVIEW



NAVIGATION SYSTEM


IN-CAR-NAVIGATION


PLANNING A ROUTE



LEVEL OF DETAIL

ROUTE FAVORITS

POINTS OF INTEREST

EVASION

INTERSTATIONS

FUZZY TEXT ENTRY

ROUTE TYPES

CREATING NEW ROUTES

ROUTE GUIDANCE


GUIDANCE


INSTRUCTIONS

MAP ORIENTATION


INSTRUCTIONS LIST

DISTANCE BAR


LANDMARKS

INTERACTIVE MAPS

ZOOMING PANNING

ZOOM SLIDER

MAGNETIC POSITIONS

DISCRETE VIEWS

OVERVIEWWHERE AM I?


HELICOPTERFUNCTION


OVERVIEW WINDOW



SCROLL BARS


DRAG'N'DROP


DOUBLE CLICKING



BUTTONS

HELICOPTER FUNCTION


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



• Beispiele:– Falk City Guide, Map24.de

• Referenzen auf Unterpatterns:keine



NAVIGATION SYSTEM


IN-CAR-NAVIGATION


PLANNING A ROUTE



LEVEL OF DETAIL

ROUTE FAVORITS

POINTS OF INTEREST

EVASION

INTERSTATIONS

FUZZY TEXT ENTRY

ROUTE TYPES

CREATING NEW ROUTES

ROUTE GUIDANCE


GUIDANCE


INSTRUCTIONS

MAP ORIENTATION


INSTRUCTIONS LIST

DISTANCE BAR


LANDMARKS

INTERACTIVE MAPS

ZOOMING PANNING

ZOOM SLIDER

MAGNETIC POSITIONS

DISCRETE VIEWS

OVERVIEWWHERE AM I?


HELICOPTERFUNCTION


OVERVIEW WINDOW



SCROLL BARS


DRAG'N'DROP


DOUBLE CLICKING



BUTTONS

HELICOPTER FUNCTION


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


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


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


• Vielen Dank für Ihre Aufmerksamkeit!