Liebe auf den ersten Touch Mobile Design & Usability für Apps V 1.1-12/2011
Liebe auf den ersten Touch Mobile Design & Usability für Apps
Copyright 2011 by inserteffect All rights reserved Publisher: inserteffect GmbH Editors: Ute Mündlein, Nina Wieland, Sabrina Kley, Timo Ohr, Benno Bartels, Halil Kavasoglu, Manuel Robledo Design & Composition: Susanne Vestner-Ludwig
Inhaltsverzeichnis 1. Der erste Eindruck zählt 1.1. Grundlegendes zum Design von iphone- und Android-Apps 1.1.1. Grundprinzipien für User Interface Design 1.1.2. Grundlegendes zum Design von Android-Apps 1.1.3. Grundlegendes zum Design von iphone-apps 1.2. Überblick über wichtige UI-Elemente 1.2.1. Android 1.2.2. iphone 2. Vorstellung Projekt Lokuskop 2.1. Zielgruppenanalyse 2.2. Funktionalitäten / Featureliste 2.3. Featureliste priorisieren 1
3. Umsetzung 3.1. Startansicht 3.1.1. Grundlegende Überlegungen 3.1.2. Android 3.1.3. iphone 3.2. Detailansicht 3.2.1. Grundlegende Überlegungen 3.2.2. Android 3.2.3. iphone 3.3. Suche 3.3.1. Grundlegende Überlegungen 3.3.2. Android 3.3.3. iphone 3.4. Fehlermeldungen 3.4.1. Ortung 3.4.2. Fehlende Internetverbindung 3.4.3. Keine Toiletten im Umkreis 4. Zusammenfassung 5. Weitere Ressourcen 6. Kontakt
Executive Summary Mobile Design & Usability warum soll man sich darüber überhaupt Gedanken machen? Auf diese Frage wollen wir mit diesem E-Book eine Antwort geben und ein Bewusstsein dafür schaffen, dass Design & Usability wesentliche Bestandteile bei der Entwicklung von mobilen Anwendungen sind ganz gleich, ob es sich dabei um iphone, Android oder eine andere Plattform handelt. Das E-Book ist von uns als kurze Einführung in das Thema Mobile Design & Usabiltiy gedacht. Neben Design-Philosophie, einem Überblick über die wichtigsten User-Interface- Elemente sowie den Grundprinzipien von User-Interface-Gestaltung gehen wir anhand der Lokuskop-App, einer fiktiven Android- und iphone-app, näher darauf ein, worum es bei Mobile Design & Usability geht. 6
Die Idee eines Toilettenfinders wie auch der Name Lokuskop stammt von einem Projekt der Georg-Simon- Ohm Hochschule Nürnberg, an dem Stefan Groh, Martin Meier, Nina Wieland und Julia Meier beteiligt waren. Wir möchten uns an dieser Stelle bedanken, dass wir es für dieses E-Book verwenden durften. Liebe auf den ersten Touch Mobile Design & Usability für Apps 7
1 Der erste Eindruck zählt Mobilize, Don t Miniaturize. Bob Miller, User Experience Strategist Seit knapp zehn Jahren entwickeln wir von inserteffect Anwendungen für mobile Plattformen. Wir erleben immer wieder, dass für manche mobil heißt: Web, aber auf einem kleineren Display. Dabei wird gerne übersehen, dass Konzept, Design und Usability sich nicht eins zu eins übertragen lassen und auch bei Features und Funktionalitäten überlegt werden muss, ob sie für den Einsatz unterwegs wirklich sinnvoll sind. Aber warum sollte man sich überhaupt über Mobile Design & Usability Gedanken machen? Ziel sollte sein so zumindest unsere Überzeugung Apps zu entwickeln, die sich rund anfühlen, die Spaß machen, die man gerne benutzt. Kurz, die man einfach auf seinem Handy nicht mehr missen möchte. 8
Für ein perfektes Nutzererlebnis müssen daher Design und Usability optimal auf Plattform und Displaygröße abgestimmt werden, denn es zählt der erste Eindruck. Damit das gelingt, halten wir es für wichtig, auch ein Verständnis für die Design-Philosophie und die wichtigsten UI-Elemente der jeweiligen Plattform zu haben. Und natürlich plattformspezifische Besonderheiten zu berücksichtigen. Wir haben dieses E-Book mit dem Ziel geschrieben, genau darauf näher einzugehen und beim Leser ein Bewusstsein für die Bedeutung von Mobile Design & Usability zu schaffen und das Ganze natürlich auch in der Praxis zu zeigen. A user interface that is unattractive, convoluted, or illogical can make even a great application seem like a chore to use. Apple Human Interface Principles Dafür haben wir eine fiktive, wenn auch praxisnahe Android- bzw. iphone-app designt und konzipiert: Lokuskop eine Anwendung zum schnellen Suchen und Finden von öffentlichen Toiletten. Anhand von Scribbles erklären wir, was es im Hinblick auf die unterschiedlichen Plattformen zu beachten gilt. Da es jedoch nicht nur DEN Weg gibt, eine App zu gestalten, haben wir auch über den eigenen Displayrand hinausgeblickt und Beispiele von anderen Apps genommen, um zu zeigen, wie dort bestimmte Dinge gelöst bzw UI-Elemente verwendet wurden. Für Version 1 haben wir uns zunächst auf Android-Smartphones und das iphone konzentriert, Tablets wie auch andere Plattformen wurden (noch) nicht berücksichtigt. Liebe auf den ersten Touch Mobile Design & Usability für Apps 9
1.1. Grundlegendes zum Design von iphoneund Android-Apps Bevor wir uns der Praxis widmen, möchten wir zunächst noch etwas näher auf zehn Grundprinzipien der User-Interface-Gestaltung, der Design-Philosophie von Google und Apple sowie einige UI-Elemente näher eingehen. Dies ist unserer Meinung nach wichtig, um besser zu verstehen, was ein stimmiges Nutzererlebnis ausmacht. 1.1.1. Grundprinzipien für User Interface Design Ein wichtiger Aspekt, ob eine App gut bei den Usern ankommt, ist Benutzerfreundlichkeit und Bedienbarkeit. In diesem Zusammenhang hat Jakob Nielsen [1] eine Liste mit zehn Grundprinzipien (Heuristiken) für die Gestaltung von Bedienoberflächen erstellt. Sie wurden zwar für die Gestaltung von Webseiten erstellt, lassen sich zum Teil aber auch auf Apps anwenden. Sichtbarkeit des Systemstatus Was passiert gerade? Das System sollte den Nutzer zeitnah und in angemessener Form darüber informieren. Übereinstimmung zwischen System und Wirklichkeit Das System sollte die Sprache des Benutzers sprechen und Wörter bzw. Begriffe verwenden, die dem Nutzer vertraut sind. Benutzerkontrolle und -freiheit Immer einen einfachen Notausgang für den Benutzer bereit halten und Funktionen wie Rückgängig und Wiederholen ermöglichen. 1 [1] http://www.useit.com/jakob/ 10
Konsistenz und Standards Benutzer sollten sich nicht fragen müssen, ob abweichende Wörter bzw. unterschiedliche Situationen und Aktionen dasselbe meinen. Plattformkonventionen sollten beachtet werden. Fehler vermeiden Besser als jede gute Fehlermeldung ist es, mögliche Fehlerquellen zu vermeiden und Nutzer ggf. vor Ausführung einer Aktion um Bestätigung zu bitten. Wiedererkennen statt sich erinnern Anstatt auf die Gedächtnisleistung des Nutzers lieber auf leicht sicht- und auffindbare Informationen setzen. Flexibilität und Effizienz Das System sollte Abkürzungen für erfahrene Nutzer bereithalten, aber den unerfahrenen User damit nicht verwirren. Ästethisches und minimalistisches Design Auf alle überflüssigen oder selten benötigten Informationen sollte besser verzichtet werden. Fehler erkennen Fehlermeldungen sollten einfach und verständlich sein und das Problem bzw. dessen Behebung genau beschreiben. Hilfe und Dokumentation Entsprechende Informationen sollten leicht auffindbar, knapp, konkret sowie Schritt für Schritt nachvollziehbar sein. Wer mehr und ausführlich über die zehn Heuristiken lesen möchte, dem sei die englische Originalversion [2] empfohlen. Eine gute deutsche Übersicht gibt es von Jens Meiert.[3] [2] http://www.useit.com/papers/heuristic/heuristic_list.html [3] http://meiert.com/de/publications/articles/20051218/ Liebe auf den ersten Touch Mobile Design & Usability für Apps 11
1.1.2. Grundlegendes zum Design von Android-Apps Jim Palmer, Head of Android UX team, ging in seiner Präsenation Android UI design patterns auf der Google I/O 2010 auf die Design-Philosophie für Android ein.[4] Guidelines, wie eine App aussehen sollte und an die man sich halten konnte, gab es zuvor nicht. Think of design as communication between you and your user and help you move beyond just thinking of mere functionality but how you persuade people to try and then stay engaged in your products Jim Palmer, Head of Android UX team, Google Manches wird dem Leser vom vorherigen Punkt Grundprinzipien zur Gestaltung von User Interface nach Nielsen bekannt vorkommen. Android Apps sollten: Einfach und verständlich sein Ein gutes User Interface sollte leicht zu bedienen und nicht mit Features überfrachtet sein. Das bedeutet aber nicht, dass auf alle komplexeren Funktionalitäten verzichtet werden sollte. Sich auf den Inhalt, nicht nur auf das Aussehen konzentrieren Ziel sollte sein, die visuelle Komplexität zu verringern und möglichst viel Platz auf dem Display dafür zu verwenden, was dem User wichtig ist: Inhalt. [4] http://www.google.com/intl/de-de/events/io/2010/sessions/android-ui-design-patterns.html 1 12
Konsistent sein, aber auch Spaß machen Das User Interface einer App sollte konsistent sein, damit der User sich schnell zurecht findet. Dies bedeutet jedoch nicht, dass alle Apps gleich aussehen und funktionieren sollten. Es geht vielmehr darum, dass es Spaß machen soll, die Anwendung zu benutzen. Darauf sollte der Fokus liegen und nicht darauf, immer noch mehr Funktionalitäten und Features einzubauen. Durch Cloud-basierte Services verbesserte Benutzerfreundlichkeit Auch wenn die meisten User gerne Neues ausprobieren und regelmäßig neue Apps herunterladen, so möchten die wenigsten, laut Jim Palmer, ständig Dinge neu organisieren. Die Cloud wird seiner Meinung nach daher zukünftig nicht nur Quelle für Informationen sein. Sie stellt für ihn eine Möglichkeit dar, die Benutzerfreundlichkeit zu verbessern, indem sie Nutzern hilft, Zeit zu sparen und sich darauf zu konzentrieren, was wichtig ist. Products need to focus on engaging the users. Jim Palmer, Head of Android UX team, Google Bildquelle: http://www.android.com/media/ Liebe auf den ersten Touch Mobile Design & Usability für Apps 13
1.1.3. Grundlegendes zum Design von iphone-apps In der ios Developer Library geht Apple näher darauf ein, was eine exzellente Bedienoberfläche bzw. Benutzerfreundlichkeit ausmacht.[5] Auch hier findet sich viel von Jakob Nielsens Heuristiken wieder. Großartige ios-apps beachten sowohl plattformspezifische Besonderheiten als auch die Prinzipien der User-Interface-Gestaltung Damit ist gemeint, dass die User erwarten, dass sich eine iphone-app wie eine iphone-app anfühlt. Und selbst wenn sie noch nie etwas von den Prinzipien der User-Interface-Gestaltung gehört haben, so merken sie intuitiv den Unterschied zwischen jenen, die sich danach richten und jenen, die dies nicht tun, d. h. die sich irgendwie unrund anfühlen. In den ios Human Interface Design Guidelines werden folgende folgende Prinzipien aufgeführt: Aesthethic Integrity Entscheidend ist nicht, wie hübsch eine App ist, sondern wie sehr Design und Funktionalität aufeinander abgestimmt sind. Consistency Eine App sollte dem User im Hinblick auf UI-Elementen und früheren Versionen vertraut vorkommen und daher ios-standards berücksichtigt werden. Direct Manipulation Die Nutzer sollten auf dem Touchscreen Aktionen ausführen können, etwa mit Gesten zum Zoomen (Pinch) oder zum Durchblättern (Swipe). Es soll Spaß machen, die App zu benutzen. Feedback User erwarten unmittelbares Feedback auf Aktionen, wie z. B. Vibration beim Berühren eines Buttons oder ein Fortschrittsbalken beim Laden. User Control Bedienelemente und Aktionen sollten dem User vertraut vorkommen bzw. leicht nachvollziehbar sein. [5] http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/introduction/introduction.html#//apple_ref/doc/uid/tp40006556-ch1-sw1 1 14
Metaphors Für Aktionen, die der Nutzer ausführen kann, sollten Icons verwendet werden, die Aktionen aus dem realen Leben symbolisieren. Dadurch findet der Nutzer sich schneller zurecht: ein Ordner für Ablage, ein Papierkorb für Löschen. Die ios Developer Library empfiehlt für gängige Aktionen, möglichst auf Standard- Buttons zurückzugreifen.[6] Great App Design Begins with Some Clear Definitions Es ist wichtig, sich vor dem Entwickeln Gedanken darüber zu machen, welche Features die App haben sollte und wer die App nutzen wird. In den ios User Interface Guidelines wird dem ein eigenes, auch für nicht iphone-entwickler empfehlenswertes Kapitel gewidmet: App Design Strategies.[7] A Great User Experience Is Rooted in Your Attention to Detail Liebe zum Detail: Beim Design stets das Nutzererlebnis im Hinterkopf behalten, egal ob es sich um die Startseite handelt oder die Art und Weise, wie ein Button platziert wird oder benutzt werden kann. People Expect to Find ios Technologies in the Apps They Use Die im iphone integrierten Funktionalitäten sollten auch für Apps genutzt werden, etwa die Möglichkeit für Multitasking, Geolocating, Sound oder Push Notifications. All Apps Need at Least Some Custom Artwork Ähnlich wie beim Punkt Liebe zu Detail zeichnet sich eine App laut den ios Human Interface Guidelines auch durch schöne Grafiken aus, denn das Auge klickt mit. Dazu zählen neben einer attraktiven Startseite auch ansprechende Icons, die die Features auch optisch unterstützen. [6] Dies lässt sich selbstverständlich auf das gesamte Screendesign anwenden. Durch sog. mentale Modelle (Mental Models) wird auf Gelerntes / Bekanntes aus der Wirklichkeit des Benutzers zurückgegriffen. So muss das Aussehen und die Bedienung eines Buches nicht neu erfunden werden, sondern der Benutzer kann die Seiten wie bei einem echten Buch umblättern. http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/ UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW34 [7] http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/appdesign/appdesign.html#//apple_ref/doc/uid/tp40006556-ch19-sw1 Liebe auf den ersten Touch Mobile Design & Usability für Apps 15
1.2. Übersicht über wichtige UI-Elemente 1.2.1. Android Dashboard Das Dashboard ist die Startseite einer Android-, aber auch iphone-app. Dort soll der Nutzer auf einen Blick erkennen können, über welche Funktionen die App verfügt oder aus welchen verschiedenen Kategorien er auswählen kann (z. B. neueste, beliebteste). Zusätzlich können auch Benachrichtigungen angezeigt werden, z. B. wie viele neue Nachrichten der Benutzer hat oder bei einem Suchauftrag, wie viele neue Objekte hinzugekommen sind. Google empfiehlt, dort 3-6 Einträge zu platzieren. Ein klassischer Dashboard-Eintrag setzt sich dabei aus Icon und Text zusammen. Beispiele Dashboard Dashboard Facebook -Android-App Logo führt zurück zum Dashboard Zusätzlich ausziehbares Schubfach ( Drawer ) für Benachrichtigungen Unten: integrierte Bildergallerie Actions in der Action Bar: Suche Status schreiben 16
Dashboard Evernote -Android-App Enthält Info über letzte Synchronisation Spezialelement unten am Screen, Tab-Element für Synchronisierung und Datennutzung Logo in der Action Bar führt immer zurück zum Dashboard Dashboard Google+ -Android-App Spezialfall: Keine Action Bar auf dem Dashboard Unten: ausziehbares Schubfach ( Drawer ) für Benachrichtigungen Dashboard immowelt -Android-App Login in der Action Bar Logo führt zum Dashboard zurück Ausziehbares Schubfach (Drawer) mit Suchverlauf Liebe auf den ersten Touch Mobile Design & Usability für Apps 17
Action Bar Die Action Bar befindet sich am obersten Rand der App. Dort sollten alle Aktionen untergebracht werden, die sich auf die gesamte Ansicht beziehen, wie etwa ein Refresh-, Suche- oder Hinzufügen-Button. Kontextbezogene Aktionen werden in der Ansicht selbst untergebracht. In aller Regel wird auf der linken Seite das Logo platziert, um darüber auf die Startansicht (z. B. Dashboard) zu gelangen. Action Bar BBC Android-App Beinhaltet Logo, Shortcut zu Spezialnews, Bearbeiten und Refresh Bearbeiten und Refresh beziehen sich auf die aktuelle Ansicht Overflow-Menü Seit Android 3 (Honeycomb) ersetzt die Action Bar auch komplett das Optionsmenü. Alle Aktionen, die in der Leiste keinen Platz mehr finden bzw. die nicht so oft genutzt werden, landen im Overflow-Menü, einem Dropdown-Menü am rechten Rand der Action Bar. Mit Android 4 (Icecream Sandwich) lässt sich die Action Bar auf Smartphones optional auch zweiteilen; damit gelangen Aktionen des Overflow- Menüs in eine zweite Leiste, die am unteren Bildschirmrand untergebracht ist. Overflow-Menü in der Gmail -App in Android 3 (Honeycomb) Selten genutzte Aktionen landen im Overflow-Menü Alle Optionen des ehemaligen Optionsmenüs landen ab Android 3 ebenfalls im Overflow-Menü 18
Zweigeteilte Action Bar der Messaging-App in Android 4 Die sonst im Overflow-Menü untergebrachten Aktionen können in eine zweite Action Bar am unteren Bildschirmrand verschoben werden. Ein Overflow-Menü wird auf Smartphones daher meist nicht mehr benötigt Navigation Zusätzlich kann die Action Bar seit Android 3 (Honeycomb) auch ein Dropdown-Menü oder eine Tab-Leiste zur Navigation enthalten. Die Tab-Leiste wird auf Smartphones dabei meist in eine zweite Zeile direkt unterhalb der Action Bar verschoben. Manche Apps, wie beispielsweise die Telefon-App in Android 4 (Icecream Sandwich), enthalten auf Smartphones anstelle der Action Bar auch nur eine Tab-Leiste. Dropdown-Navigation in der Kalendar-App Ersetzt für gewöhnlich Titel der Ansicht in der Action Bar Dropdowns werden ab Android 3 durch Pfeil in der rechten unteren Ecke gekennzeichnet Wird meist benutzt, um die aktuelle Ansicht umzuschalten Liebe auf den ersten Touch Mobile Design & Usability für Apps 19
Music-App in Android 4 Tab-Leiste ersetzt komplett die Action Bar Unten: zusätzlich eine Action Bar Tabs können über die Breite des Displays hinausgehen und entweder direkt in der Tab-Leiste gescrollt werden oder scrollen automatisch mit, wenn die Ansicht nach links oder rechts geswiped wird Action-Mode Die Action Bar lässt sich außerdem in einen sogenannten Action-Mode versetzen. Das passiert beispielsweise wenn der Nutzer Text oder eine Reihe von E-Mails auswählt. Dabei werden die Aktionen in der Action Bar durch kontextsensitive Aktionen ersetzt, zum Beispiel Text kopieren oder E-Mails löschen. Der Action-Mode kann an vielen Stellen das Kontextmenü ersetzen. Action-Mode im Android-Browser Wird angezeigt, sobald der Nutzer anfängt Text zu selektieren, mögliche Aktionen ist z. B. Select All Rechts oben: Overflow-Menü mit neuem Android-4-Icon 20
Action Bar in Android 2 Action Bars werden in Android erst seit Version 3 (Honeycomb) offiziell unterstützt; in älteren Versionen mussten Entwickler Action Bars noch selbst einbauen. Mit Hilfe von ActionBarSherlock [8] lassen sich die meisten erwähnten Funktionen, wie das Overflow- Menü oder die Navigations-Features, auch in Android 2 nutzen. ActionBarSherlock bietet dabei die gleiche Programmierschnittstelle wie unter Android 3. Dadurch können Anwendungen, die für Android 3 oder 4 entwickelt wurden und die Action Bar nutzen, ohne große Anpassungen auch mit Android 2 laufen. Action Bar in der SeriesGuide -App, auf Basis von ActionBarSherlock in Android 2 Identisch zu den Funktionen der Action Bar in Android 3 Greift in neueren Versionen direkt auf die offizielle Implementierung zurück [8] http://actionbarsherlock.com/ Liebe auf den ersten Touch Mobile Design & Usability für Apps 21
1.2.2. iphone iphone 3G (S) iphone 4 (S) 22
UI-Elemente Nachfolgend werden die wichtigsten UI-Elemente in der Reihenfolge, in der sie auf dem Display erscheinen, von oben nach unten kurz erklärt. A great user interface follows human interface design principles that are based on the way people users think and work, not on the capabilities of the device. A user interface that is unattractive, convoluted, or illogical can make even a great application seem like a chore to use. But a beautiful, intuitive, compelling user interface enhances an application s functionality and inspires a positive emotional attachment in users. ios Human Interface Design Guidelines [9] [9] Zitate aus ios Human Interface Design Guidelines http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/principles/ Principles.html#//apple_ref/doc/uid/TP40006556-CH5-SW1 Liebe auf den ersten Touch Mobile Design & Usability für Apps 23
Status Bar Navigation Bar Ganz oben am Display befindet sich die Status Bar mit Informationen zu Uhrzeit, Name des Providers und Akkustand. Die Status Bar liegt in drei Versionen vor: grau (Standardfarbe, wird verwendet, wenn nichts anderes definiert ist), schwarz oder halbtransparentes schwarz. Die Navigation Bar erscheint direkt unter der Status Bar. Sie soll dem Nutzer eine hierarchische Navigation durch die Inhalte ermöglichen, z. B. von der Startansicht über eine Auswahlliste hin zu einer Detailansicht. Am linken Rand befinden sich üblicherweise, außer auf der Startansicht, ein Zurück-Button bzw. ein Button mit dem Namen der vorherigen Ansicht, um wieder dorthin zu navigieren. In der Mitte sollte ein aussagekräftiger Titel stehen, der dem Nutzer mitteilt, auf welcher Ansicht er sich gerade befindet. Es empfiehlt sich, den Titel genauso zu nennen, wie den Button, auf den der Nutzer zuvor geklickt hat. Zusätzlich können rechts noch maximal zwei Buttons eingebaut werden, mit denen der Nutzer eine bestimmte Aktion auf der Ansicht durchführen kann, z. B. Inhalte einfügen oder editieren. Dazu sollte am besten auf Standard-Icons zurückgegriffen werden. [10] Beispiele Navigation Bar Navigation Bar der BBC -iphone-app Custom Navigation Bar Custom Buttons Logo eingebettet Navigation Bar der l tur -iphone-app Logo eingebettet Zurück-Button [10] Eine Liste mit Standard-Buttons gibt es hier: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/uielement- Guidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW41 Zusätzliche Informationen zum Design von Icons gibt es hier: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/iconsimages/iconsimages.html#//apple_ref/doc/uid/tp40006556-ch14-sw1 24
Toolbar Die Toolbar befindet sich am unteren Bildschirmrand. Über die Toolbar können seitenabhängige Aktionen durchgeführt werden, z. B. Einträge bearbeiten, löschen, speichern, hinzufügen. Sowohl in der Toolbar als auch in der Navigation Bar kommen zwei Arten von Interaktionselementen vor: Icons oder Buttons (einfacher Button oder ein segmented control button ). Der einzige Unterschied liegt darin, dass Icons ohne grafischen Button nur in der Toolbar verwendet werden dürfen. In der Navigation Bar werden die Icons nur akzeptiert, wenn sie in der Button Umrandung eingefügt sind (siehe Screenshot Taskeater-App Navigationbar). Generell sollten Navigation Bar und Toolbar aus einem Guss sein, d. h. gleiche Farbverläufe und Effekte, sofern man mit diesen arbeitet. Beispiele Toolbar Standard Toolbar Mail-App Enthält bis zu 5 Elemente Ansichtbezogene Aktionen Standard Navigation bar Back-Button Pfeil-Buttons zum Navigieren durch die Mailbox Custom Toolbar BBC -App Custom Buttons Logo (wird aus Branding- Gründen manchmal gemacht, es sollte aber laut Guidelines an der Stelle nur Text stehen) Custom Toolbar Taskeater -App Dient sowohl für Tabs (Erledigt, nicht erledigt, Alarm gesetzt) als auch als Toolbar (Einstellungen) Liebe auf den ersten Touch Mobile Design & Usability für Apps 25
Tab Bar Als Tab Bar wird die untere, fixe Navigationsleiste bezeichnet. Dort können bis zu fünf Tabs platziert werden, die anders als auf der Toolbar, anwendungsübergreifend gültig sind, wie etwa eine Suchfunktion oder ein Link auf die Startansicht. Macht es der Feature-Umfang der App nötig, mehr als fünf Elemente in der Tab Bar unterzubringen, so kann als fünfter Eintrag folgender Button eingebaut werden. Dieser führt den Benutzer auf eine Ansicht mit weiteren Menüpunkten. Selbstverständlich besteht die Möglichkeit, die Tab Bar frei zu gestalten. Ideen dafür gibt es zum Beispiel online bei www.mobile-patterns.com [11]. Es ist jedoch Vorsicht geboten, da der Benutzer sich schnell überfordert fühlen kann, weil er an dieser Stelle etwas Bekanntes erwartet. Um nicht unnötig viel Platz auf dem Bildschirm zu verschwenden, sollten beide Elemente, d. h. Toolbar und Tab Bar, nicht gleichzeitig in einer App verwendet werden. Beispiele Tab Bar Standard Tab Bar Germany 2011 - iphone-app bis zu 5 Tabs letzter Tab ist Mehr... 1 [11] http://mobile-patterns.com/custom-tab-navigation 26
Mehr...-Button in der Tab Bar barcoo -iphone-app Enthält weitere Elemente, die nicht in den Tabs enthalten sind. Sie können per Edit in die vorhandenen Tabs geladen werden Beispiel einer angepassten Tab Bar Heads Up Lite -iphone-app Orientiert sich an den Styleguide-Vorgaben, Standard-Icons subtil anders Aktiver Tab hervorgehoben Tab-Höhe geringer Für die Verwendung einer angepassten Tab Bar, spricht vor allem das Argument der Ästhetik. Möchte man sich von anderen Apps grundlegend unterscheiden und seinen ganz eigenen Style verwenden, so kann man eine eigene Tab Bar designen und programmieren. Hier hat man alle Freiheiten und kann auch auf ausgewählte Tabs den Fokus legen. Liebe auf den ersten Touch Mobile Design & Usability für Apps 27
Benachrichtigungen (Push Notifications) Es gibt drei Möglichkeiten den Benutzer über Statusänderungen oder Updates zu informieren: durch ein Banner mit einem Emblem (Badge) über einen Hinweis (Alert) Push Notifications sollten mit Bedacht eingesetzt werden, da sie schnell nerven können, insbesondere wenn zusätzlich zum visuellen Reiz noch mit akkustischen Signalen gearbeitet wird. Bei der Ebay-App erinnern Push Notifications an eine ablaufende Auktion oder falls der Nutzer gerade überboten wurde (zeitkritische Benachrichtigung). Die Giftköder-App schlägt zum Beispiel Alarm, wenn sich ein Giftköder-Fundort in der Nähe befindet (ortsbezogene Benachrichtigung).[12] Benachrichtigung mit einem Emblem (Badge) In einem Emblem, dem sog. Badge wird dem Benutzer direkt auf dem Home Screen angezeigt, ob sich der Status einer Funktion in der App geändert hat. Die Benutzer sollten allerdings selbst bestimmen, ob sie die Funktion möchten. Home-Screen Icons mit Push Notification. 1 [12] http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/technologyusage/technologyusage.html#//apple_ref/doc/uid/tp40006556-ch18-sw11 28
Beispiel für angepasste Tab Bar mit Push Notification: Sport1 -iphone-app. Um den Benutzer über Statusänderungen zu informieren, kann zusätzlich in der Tab Bar eine Push Notification angezeigt werden. Benachrichtigung mit einem Hinweis (Alert) Auch im gesperrten Zustand ist es möglich, Benachrichtigungen zu empfangen. Sie werden vor allem für Funktionen eingesetzt, wie zum Beispiel Wecker oder dem Kalender. Auch Apps wie Facebook verwenden dieses Benachrichtigungsverfahren. Eine einfache Interaktion ermöglicht es dem User, direkt darauf Einfluss zu nehmen. Benachrichtigung durch ein Banner Banner-Benachrichtungen bekommt der Benutzer angezeigt, wenn er sich bspw. in einer anderen App befindet. Das App-Icon und ein kurzer Text informieren den Benutzer über die eingegangene Veränderung. Ein klassisches Beispiel dafür sind Benachrichtigungen über neue Mails. Liebe auf den ersten Touch Mobile Design & Usability für Apps 29
2 Vorstellung Projekt Lokuskop Bei Mobile Design geht es nicht nur darum, eine Anwendung schick aussehen zu lassen, sie soll sich auch gut und rund anfühlen. Um dies nicht nur theoretisch anhand von plattformspezifische UI-Guidelines und Empfehlungen zu verdeutlichen, haben wir uns ein Beispiel überlegt, das: leicht nachvollziehbar ist die grundsätzliche Herangehensweise demonstriert die wichtigsten Elemente einer App beinhaltet Lokuskop ist eine Location-Based-Service-App, mit der schnell, vor allem aber auch einfach eine öffentliche Toilette im Umkreis gesucht bzw. gefunden werden kann. Wir haben sie zunächst für das iphone und Android-Smartphones designt und konzipiert. Andere Plattformen, wie etwa WindowsPhone 7 oder Tablets haben wir zunächst nicht berücksichtigt, schließen jedoch für zukünftige Updates nicht aus, das E-Book zu erweitern. 30
2.1. Zielgruppenanalyse: Wer soll diese Anwendung nutzen? Bevor mit dem Design begonnen wird, ist es wichtig sich zu überlegen, für wen die App entwickelt wird. [13] Im Fall des Lokuskop gibt es nicht DEN User, denn wohl jeder kommt einmal in die Situation, möglichst schnell eine Toilette zu finden zu müssen. Bei unseren Überlegungen kamen uns vor allem folgende Personengruppen in den Sinn: 1. Touristen bzw. Leute, die sich in der Gegend nicht auskennen 2. Eltern 3. Behinderte 4. Ältere Menschen Wie versiert sind diese Personengruppen im Umgang mit Smartphones bzw. wie wahrscheinlich ist es, dass sie ein entsprechendes Gerät besitzen? Diese Frage ist zum Beispiel wichtig, um mögliche Fehlerquellen zu identifizieren, weiß der Nutzer etwa, wie er GPS oder Internetfunktion aktivieren kann oder muss entsprechende Hilfestellung gegeben werden? [13] Unter Punkt 1.1.1 Grundlegendes zu Design von iphone-apps wurde bereits auf das Kapitel App Design Strategies in den ios Human Interface Guidelines verwiesen nicht nur für iphone-entwickler lesenswert. http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/appdesign/ AppDesign.html#//apple_ref/doc/uid/TP40006556-CH19-SW1 Liebe auf den ersten Touch Mobile Design & Usability für Apps 31
2.2. Funktionalitäten / Featureliste: Was soll die App können? Was sind die Erwartungen der Nutzer? Welche Features soll die Anwendungen haben? Hierzu wurde überlegt, was für die Suche nach einem nahegelegenen WC wichtig ist. Die unsortierte Feature-Liste sah so aus: Toilette in der Nähe suchen Toilette bewerten (Sauberkeit) Toilette hinzufügen (falls sie noch nicht eingetragen wurde) Toilette merken (Favoriten) Nach bestimmten Kriterien suchen Zur Toilette navigieren Toilette melden (z. B. wenn nicht mehr vorhanden) Verschiedene Ansichten (Liste, Karte) Filterfunktion Nach welchen Kritierien soll der Nutzer suchen bzw. soll die Ergebnisliste gefiltert werden können? Behindertengerecht Öffnungszeiten (wichtig gerade nachts oder an Feiertagen) Kostenpflichtig Sauberkeit (Bewertung anderer Nutzer) Wickelmöglichkeiten / kinderfreundlich 2.3. Featureliste priorisieren: Welche Funktionen soll wo untergebracht werden? Noch bevor die App designt wird sollte überlegt werden, welche der geplanten Features für den Nutzer wichtig sind und welche am häufigsten genutzt werden. Diese Überlegungen dienen dazu festzulegen, welche Funktionen auf der Startseite, in der Navigation / Action Bar untergebracht bzw. welche anwendungsübergreifend zur Verfügung stehen sollten (Tab Bar). 32