Liebe auf den ersten Touch Mobile Design & Usability für Apps

Transkript

1 Liebe auf den ersten Touch Mobile Design & Usability für Apps V /2011

2 Liebe auf den ersten Touch Mobile Design & Usability für Apps

3 Copyright 2011 by inserteffect All rights reserved Publisher: inserteffect GmbH Editors: Ute Mündlein, Nina Wieland, Sabrina Kley, Benno Bartels, Halil Kavasoglu, Manuel Robledo Design & Composition: Susanne Vestner-Ludwig

4 Inhaltsverzeichnis 1. Der erste Eindruck zählt 1.1. Grundlegendes zum Design von iphone- und Android-Apps Grundprinzipien für User Interface Design Grundlegendes zum Design von Android-Apps Grundlegendes zum Design von iphone-apps 1.2. Überblick über wichtige UI-Elemente iphone Android 2. Vorstellung Projekt Lokuskop 2.1. Zielgruppenanalyse 2.2. Funktionalitäten / Featureliste 2.3. Featureliste priorisieren 1

5 3. Umsetzung 3.1. Startseite Grundlegende Überlegungen Android iphone 3.2. Detailansicht Grundlegende Überlegungen Android iphone 3.3. Suche Grundlegende Überlegungen Android iphone 4. Zusammenfassung 5. Weitere Ressourcen 6. Kontakt

6 Executive Summary Mobile Design & Usability warum soll man sich darüber überhaupt Gedanken machen? Ziel des vorliegenden E-Books ist es, eine Antwort darauf zu geben und ein Bewusstsein dafür zu schaffen, dass Mobile Design ein sehr wichtiger Bestandteil bei der Entwicklung von Apps ist ganz gleich, ob es dabei um iphone, Android oder eine andere Plattform handelt. Es geht darum, eine Anwendung zu entwickeln, die sich rund anfühlt, Spaß macht, die man gerne benutzt. Kurz, die man einfach auf seinem Handy nicht mehr missen möchte. Das E-Book ist als kurze Einführung in das Thema Mobile Design gedacht. Es bietet einen Überblick über die Design-Philosophie sowie die wichtigsten User-Interface-Elemente von Android- und iphone-apps und geht außerdem auf die Grundprinzipien von User-Interface- Gestaltung ein. Worum es bei Mobile Design geht, lässt sich jedoch am besten anhand eines praxisnahen Beispieles demonstrieren: Lokuskop, eine fiktive Android- und i-phone-app, mit der nach öffentlichen Toiletten im Umkreis gesucht werden kann. 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. 6

7 Liebe auf den ersten Touch Mobile Design & Usability für Apps 7

8 1 Der erste Eindruck zählt inserteffect entwickelt seit knapp zehn Jahren Anwendungen für mobile Plattformen. Dabei erleben wir immer wieder, dass Mobile Design für viele lediglich heißt, eine App bzw. Webseite hübsch zu machen. Dies ist natürlich ein wichtiger Aspekt, aber letztlich jedoch nur ein Gesichtspunkt. Aber warum sollte man sich sonst um Mobile Design Gedanken machen? Think of design as communication between you and the user. Jim Palmer auf der Google I/O 2010 Ziel sollte es sein, ein für die Plattform stimmiges Nutzererlebnis zu schaffen: Es soll sich richtig anfühlen. 1 8

9 Aber damit eine App gut ankommt, müssen auch Usability-Aspekte und plattformspezifische Besonderheiten berücksichtigt werden. Und natürlich Features noch vor der Umsetzung auf Performance, Funktionalität und Verständlichkeit überprüft werden. Dies geschieht am besten mit Hilfe von sog. Klickdummys, d. h. interaktiven Prototypen, mit denen geplante Features klickbar gemacht werden. 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 Mit diesem E-Book soll ein Bewusstsein dafür geschaffen werden, was es bei Mobile Design & Usability zu beachten gilt, insbesondere im Hinblick auf die unterschiedlichen Plattformen. Dafür wurde ein fiktives, wenn auch sehr praxisnahes Beispiel gewählt: Lokuskop eine Anwendung zum schnellen Suchen und Finden von öffentlichen Toiletten. Anhand von Scribbles werden die einzelnen Screens vorgestellt und Design-Empfehlungen ausgesprochen. Es handelt sich jedoch nicht um einen Klickdummy. Um den Rahmen nicht zu sprengen, wurde die App nur für iphone und Android-Smartphones konzipiert und designt. Tablets wurden nicht berücksichtigt, da wohl eher mit dem Handy nach einem stillen Örtchen gesucht wird. Liebe auf den ersten Touch Mobile Design & Usability für Apps 9

10 1.1. Grundlegendes zum Design von iphoneund Android-Apps Bevor es an die Umsetzung geht, ist es wichtig, auf die Design-Philosophie von Google und Apple sowie auf einige wichtige UI-Elemente einzugehen. Davor noch kurz zu zehn Grundprinzipien des User Interface Design, auf die Google und Apple, wenn auch nicht explizit, Bezug nehmen: Grundprinzipien für User Interface Design Jakob Nielsen (1) hat auf Basis von 249 Usability-Problemen eine Liste mit zehn Grundprinzipien (Heuristiken) für die Gestaltung von Bedienoberflächen erstellt. Sie sollen helfen, die Qualität von Webseiten in puncto Benutzerfreundlichkeit und Bedienbarkeit zu verbessern. Sie lassen sich zum Teil auch auf die Gestaltung von App User Interfaces anwenden, daher soll an dieser Stelle zumindest kurz darauf eingegangen werden. Sichtbarkeit des Systemstatus Was passiert gerade? Das System sollte den Nutzer zeitnah und in angemessener Form darüber informieren. Übereinstimmung zwischen System und Wirklichkeit Zum Beispiel möglichst nur dem Nutzer vertraute Wörter und Konzepte verwenden. 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] 10

11 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. Wiedererkennen statt sich erinnern Anstatt auf die Gedächtnisleistung des Nutzer 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ötigte Informationen sollte besser verzichtet werden. Fehler erkennen Nutzer sollten Fehler selbst erkennen, deren Ursache diagnostizieren und anschließend selbst beheben können. 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] [3] Liebe auf den ersten Touch Mobile Design & Usability für Apps 11

12 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: Verständlich sein, nicht simpel ( Clear vs. Simple ) 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 ( Content vs. Chrome ) Ziel sollte sein, die visuelle Komplexität (visual compexity of screens) zu verringen und möglichst viel Platz auf dem Display dafür zu verwenden, was dem User wichtig ist: Content. [4]

13 Konsistent sein, aber dennoch Spaß machen, die App zu benutzen ( Consistent yet engaging ) 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. Cloud verbessert User Experience ( Enhanced by cloud ) 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 User Experience zu verbessern, indem sie dem Nutzer hilft, Zeit zu sparen und sich darauf zu konzentrieren, was ihm wichtig ist. Products need to focus on engaging the users. Jim Palmer, Head of Android UX team, Google Bildquelle: Liebe auf den ersten Touch Mobile Design & Usability für Apps 13

14 Grundlegendes zum Design von iphone-apps In der ios Developer Library geht Apple näher darauf ein, was ein exzellentes User Interface bzw. exzellente User Experience ausmacht. [5] Auch hier findet sich viel von Jakob Nielsens Heuristiken wieder. 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 [6] [5] [6] Zitate aus ios Human Interface Design Guidelines Principles.html#//apple_ref/doc/uid/TP CH5-SW1 1 14

15 Great ios Apps Embrace the Platform and Human Interface Design Principles Die User erwarten, dass eine iphone-app sich auch wie eine iphone-app anfühlt und bedienen lässt. Selbst wenn die User nicht mit dem HI-Design-Prinzipien vertraut sind, so die Überzeugung, merken sie intuitiv den Unterschied zwischen jenen, die sich danach richten und jenen, die dies nicht tun. Zu den HI-Design-Prinzipien, die Apple aufführt, zählen: Aesthethic Integrity Entscheidend ist nicht, wie hübsch eine App ist, sondern wie sehr Design und Funktionalität aufeinander abgestimmt sind. Consistency Im Hinblick auf ios-standards, UI-Elementen und früheren Versionen. Direct Manipulation Können die User direkt auf dem Bildschirm Aktionen ausführen oder sind zusätzliche Buttons erforderlich? Dazu gehören beispielsweise Gesten zum Zoomen (Pinch) oder zum Durchblättern (Swipe). Feedback User erwarten unmittelbares Feedback auf Aktionen, wie z. B. Vibration beim Berühren eines Buttons oder einen Fortschrittsbalken beim Laden. 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 Folder 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. (7) User Control Bedienelemente und Aktionen sollten dem User vertraut vorkommen bzw. leicht nachvollziehbar sein. [7] Dies lässt sich selbstverständlich auf das gesamte Screendesign übertragen. Durch sog. mentale Modelle (Mental Models) wird auf Gelerntes / Bekanntes aus der Wirklichkeit des Benutzers zurückgegriffen und abgebildet. 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. UIElementGuidelines.html#//apple_ref/doc/uid/TP CH13-SW34 Liebe auf den ersten Touch Mobile Design & Usability für Apps 15

16 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. (8) 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 bei 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 einem ansprechenden Home Screen auch hübsche Icons, die Features und Funktionalitäten auch optisch unterstützen. [8] 16

17 1.2. Übersicht über wichtige UI-Elemente iphone Status bar height: 20 px Navigation bar height: 44 px Total screen width: 320 points Total screen height: 480 points Nav bar icons height: 20 px iphone 4 screen is 640 x 960 pixels, however the coordinate system is still 320 x 480 px Tab bar icons: typically 30 x 30 px Tab bar height: 49px iphone 4 resolution: 326 ppi iphone, iphone 3G and 3 GS resolution: 163 ppi Bildquelle: Liebe auf den ersten Touch Mobile Design & Usability für Apps 17

18 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. Navigation Bar Die Navigation Bar erscheint am obersten Rand der Anwendung direkt unter der sog. Status Bar. Hier werden unter anderem Uhrzeit, Name des Providers oder Akku-Stand angezeigt. Die Navigation Bar soll dem Nutzer eine hierarchische Navigation durch die Inhalte ermöglichen, z. B. von der Startseite über eine Auswahlliste hin zu einer Detailseite. Am linken Rand befinden sich üblicherweise, außer auf der Startseite, ein Zurück-Button bzw. ein Button mit dem Namen der vorherigen Seite, um wieder dorthin zu navigieren. In der Mitte sollte ein aussagekräftiger Titel stehen, der dem Nutzer mitteilt, auf welcher Seite 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 Seite durchführen kann, z. B. Inhalte einfügen oder editieren. Dazu sollte am besten auf Standard-Icons [9] zurückgegriffen werden. [9] Eine Liste mit Standard-Buttons gibt es hier: Guidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP CH13-SW41 Zusätzliche Informationen zum Design von Icons gibt es hier: 18

19 Toolbar Die Toolbar befindet sich am Ende der App. Über die Toolbar können seitenabhängige Aktionen durchgeführt werden, zum Beispiel Einträge bearbeiten, löschen, speichern, hinzufügen. Tab Bar Als Tab Bar wird die untere, fixe Navigationsleiste bezeichnet. Dort können bis zu fünf Aktionen platziert werden, die anders als auf der Toolbar, anwendungsübergreifend gültig sind, wie etwa eine Suchfunktion oder ein Link auf die Startseite. 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 Unterseite 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 [10]. Es ist jedoch Vorsicht geboten, da der Benutzer sich schnell überfordert fühlen kann, weil er an dieser Stelle etwas Bekanntes erwartet. [10] 1 Liebe auf den ersten Touch Mobile Design & Usability für Apps 19

20 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, etwa 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. Bildquelle: 20

21 Action Bar Die Action Bar befindet sich am obersten Rand der App. Dort sollten zwei, maximal drei Aktionen untergebracht werden, die dem Nutzer dabei helfen, möglichst schnell etwas Bestimmtes zu tun ( How do I do a <common action> quickly? ), wie etwa ein Refresh-Button, ein Suche- oder Hinzufügen-Symbol. Die Action Bar ist jedoch kein Ersatz für das Menü, sondern eher eine Erweiterung. Daher sollten nicht alle Funktionen dort platziert werden. Die Tendenz geht jedoch in Zukunft eher dahin, Menüpunkte als Actions in der Action Bar unterzubringen zumindest bei Tablets. [11] Anstelle eines expliziten Zurück-Buttons wird häufig auf der linken Seite ein Logo platziert, um darüber wieder auf die Startseite (Dashboard) zu kommen. [11] Auf der Google I/O 2011 wurde die neue Action Bar vorgestellt. Demnach soll es zumindest für Tablets keinen Menü-Button mehr geben. Alle Actions sind rechts in der Action Bar untergebracht. Welche Auswirkungen das für Smartphones haben wird, ist derzeit noch nicht abzusehen. Das Video zur Session bzw. die Präsentationsfolien gibt es hier: 1 Bildquelle: Liebe auf den ersten Touch Mobile Design & Usability für Apps 21

22 Optionsmenü vs. Kontextmenü Bei Android-Apps gibt es ein Optionsmenü und ein Kontextmenü. Optionsmenü Optionsmenü Ausgeklapptes Optionsmenü Das Optionsmenü enthält Menüpunkte, die anwendungsübergreifend gültig sind, etwa die Suche. Bildquelle: 22

23 Kontextmenü Listenansicht Kontextmenü Das Kontextmenü enthält seitenspezifische Aktionen, z. B. Speichern, Bearbeiten, Löschen. Anstelle eines Kontextmenüs kann auch ein QuickActions -Menü [12] verwendet werden. Beide Möglichkeiten werden aktuell genutzt, da Android keine so strikten Richtlinien kennt wie Apple. Options- wie auch Kontextmenü können durch andere, teilweise neuere Mechanismen ersetzt bzw. erweitert werden. Wie bereits unter dem Punkt Action Bar angesprochen geht die Tendenz dahin, Menüpunkte in der Actionbar und nicht im Optionsmenü unterzubringen. [12]Im Android Developer Blog wird ausführlicher auf das UI-Pattern QuickActions am Beispiel der Twitter Android App eingegegangen. Lesenswert ist hierzu auch der Eintrag auf Android Patterns Bildquelle: Liebe auf den ersten Touch Mobile Design & Usability für Apps 23

24 2 Vorstellung Projekt Lokuskop Wie bereits erwähnt geht es bei Mobile Design 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, wurde ein Beispiel gewählt, dass: leicht nachvollziehbar ist die grundsätzliche Herangehensweise demonstriert die wichtigsten Elemente einer App beinhaltet Lokuskop, eine Location-Based-Service-App, um schnell, vor allem aber einfach eine öffentliche Toilette im Umkreis zu finden. Sie wurde für iphone und Android-Smartphones konzipiert und designt. Auf andere Plattformen, wie etwa Blackberry oder Windows Phone 7 wurde bewusst verzichtet. Auch wurden Tablets außer Acht gelassen, denn selbst wenn sie für den Einsatz unterwegs gedacht sind, so ist davon auszugehen, dass für die WC-Suche meist das Handy verwendet wird. 24

25 2.1. Zielgruppenanalyse: Wer soll diese Anwendung nutzen? Bevor mit dem eigentlichen Design begonnen wird, ist es wichtig, sich zu überlegen, für wen die App entwickelt wird. [13] Das klingt selbstverständlich, aber häufig wird vergessen, dass nicht alle User so versiert im Umgang mit dem Smartphone sind. Im Fall des Lokuskop gibt es jedoch nicht DEN User, denn wohl jeder kommt einmal in die Situation, möglichst schnell eine Toilette zu finden zu müssen. [13] Unter Punkt 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. AppDesign.html#//apple_ref/doc/uid/TP CH19-SW1 Liebe auf den ersten Touch Mobile Design & Usability für Apps 25

26 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 26

27 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). Liebe auf den ersten Touch Mobile Design & Usability für Apps 27

28 3 Umsetzung Nach dem grundsätzliche Überlegungen getroffen wurden, wer die App wie nutzen wird und welche Features Lokuskop haben soll, wird nun die App designt. Make the right things visible. slidehshare.net - Android User Interface Design Tips [14] [14] (Seite 10) 28

29 3.1. Startseite Grundlegende Überlegungen Die Startseite oder Dashboard ist das erste nach einem Screenshot im App-Store, das der User von der App sieht. Sie soll, um Richard Fulcher (Google) zu zitieren, Lust auf mehr machen. [15] Gleichzeitig soll der Nutzer von dort aus, auf die wichtigsten Funktionen zugreifen können. [15] (Seite 35) Liebe auf den ersten Touch Mobile Design & Usability für Apps 29

30 Android Bei der Lokuskop-Android-App gelangt der Nutzer zunächst auf einen Screen mit folgenden Auswahlmöglichkeiten: In der Nähe Lieblingsklos Nach Kriterien suchen Toilette hinzufügen Klickt der User auf In der Nähe, gelangt er zur Ergebnisliste. Diese Variante wurde gewählt, weil für Android-Apps keine Tab Bar vorgesehen ist, innerhalb der der Nutzer zwischen verschiedenen Funktionen (Suche, Favoriten,...) wechseln kann anders als bei der iphone-app. 30

31 Dennoch werden in Android Apps Tab Bars verwendet. Sie fühlen sich aber nicht rund an und gelten eher als bad style. Deutlich wird das etwa bei der DasTelefonbuch -App*. Am unteren Displayrand wurde keine echte Tab Bar integriert. Sie wird nicht wie bei einer iphone-app bei einem Tab-Wechsel mit ausgetauscht, was optisch unrund wirkt. Dieses Unrunde lässt sich jedoch recht schwer beschreiben. Daher ist es besser, die kostenlose App im Android Market (16) herunterzuladen und selbst einmal durch die Tab Bar zu navigieren. Der Vorteil des Verzichts auf eine Tab Bar ist, dass mehr Platz für Inhalte verwendet werden kann, was auch der Forderung Jim Palmers entspricht, die visuelle Komplexität in Apps zu reduzieren (siehe dazu das Kapitel Grundlegendes zu Design von Android-Apps: Content vs. Chrome ). Best Practice: Die Entscheidung, ob ein Dashboard verwendet wird, hängt auch davon ab, wie viele unterschiedliche Bereiche es innerhalb einer App gibt. Bei nur zwei Bereichen lohnt sich ein Dashboard eigentlich nicht. Google gibt als Empfehlung, 3-6 der wichtigsten Funktionen auf dem Dashboard zu platzieren. Neben den Hauptbereichen können in der Action Bar der Startseite auch spezielle Aktionen wie Login oder Einstellungen eingebaut werden. Nicht unüblich ist auch ein Bereich Benachrichtigungen, wie z. B. bei der App von Facebook oder Google+. * Wir möchen nicht damit Apps schlecht machen oder die App als Ganzes kritisieren, aber es lässt sich eben immer an einem Beispiel besser verdeutlichen. [16] Liebe auf den ersten Touch Mobile Design & Usability für Apps 31

32 Ergebnisliste Auf der Ergebnisliste werden, wie der Name sagt, die Ergebnisse mit einer Bildvorschau angezeigt. Über die Action Bar können diese weiter gefiltert werden. Action Bar Über die Action Bar sollte der Nutzer die Möglichkeit haben, schnell etwas Bestimmtes zu tun (siehe Kapitel Grundlegendes zu UI-Elementen Android-Action Bar.] Anstelle eines Zurück-Buttons wurde das Logo der App am linken Rand platziert (Branding). Darüber gelangt der Nutzer zurück zum Dashboard. Alternativ kann auch ein Home-Icon verwendet werden. 32

33 Über die jeweiligen Icons kann die Ergebnisliste außerdem gefiltert bzw. zur Kartenansicht gewechselt werden. Empfehlungen von Google [17]: In der Action Bar sollten Icons für häufig genutzte, anwendungsübergreifende Aktionen untergebracht werden. Der User sollte darüber auch wieder auf die Startseite der App gelangen. Seitenspezifische Aktionen, wie Bearbeiten, Speichern, Löschen, sollten nicht in der Action Bar integriert werden, wobei dies bei Tablets inzwischen gemacht wird. Options Menu Seitenspezifische Aktionen sollten vielmehr im Optionsmenü untergebracht werden, es ist aber keine Pflicht [18]. Der Nachteil von Optionsmenüs ist, dass dafür erst auf Menü geklickt werden muss, was Nutzer mitunter nicht wissen bzw. nicht daran denken. Bei der Lokuskop-App war ein solches Menü jedoch nicht notwendig, weil alle erforderlichen Funktionen in der Action Bar untergebracht werden können. [17] (Seite 14-15) [18] In der neuesten Version Honey Comb 3.1 (Tablet) geht Google, wie bereits erwähnt, weg vom Options Menu und bringt die wichtigsten Funktionen in der Action Bar unter. Liebe auf den ersten Touch Mobile Design & Usability für Apps 33

34 iphone Variante 1 Variante 2 Nachdem die App gestartet und die Lokalisierung erfolgreich durchgeführt wurde, werden dem Benutzer auf der Startseite sofort die ersten Ergebnisse präsentiert. Wir haben zwei verschiedene Varianten der Startseite entwickelt, die sich lediglich darin unterscheiden, wie der User zwischen Karten- und Listenansicht wählen kann. Variante 1 Navigation Bar: Bei Variante 1 wurde in der Navigation Bar neben dem Logo nur noch das Filter-Symbol untergebracht. Darunter kann über einen Toggle-Button zwischen Listen- und Kartenansicht gewechselt werden. 34

35 Variante 2 Navigation Bar: In Variante 2 kann der Nutzer über die Navigation Bar zur Kartenansicht wechseln. Dadurch können mehr Ergebnisse angezeigt werden. Logo und Filterfunktion befinden sich, wie bei Variante 1, in der Mitte bzw. am rechten Rand der Navigation Bar. Tab Bar (für alle Seiten gleich): Auf der Tab Bar, der unteren, fixen Navigationsleiste, können bis zu fünf anwendungsübergreifende Aktionen platziert werden. Bei der Lokuskop-App sind dies: Startseite Suchfunktion, Favoriten Hinzufügen von Toiletten (Apple empfiehlt in der Tab Bar nicht mehr als fünf Aktionen unterzubringen.) Liebe auf den ersten Touch Mobile Design & Usability für Apps 35

36 3.2. Detailansicht Grundlegende Überlegungen Von der Startseite gelangt der Nutzer auf die Detailseite mit einer kurzen Beschreibung der Toilette, Bewertung sowie der Möglichkeit, sich dorthin navigieren zu lassen. Zusätzlich soll die Möglichkeit bestehen, die Toilette zu melden und sie zu den Favoriten hinzuzufügen Android Lieblingsklo hinzufügen Toilette melden 36