Liebe auf den ersten Touch - Mobile Design & Usability für Apps - V 1.1 12/2011
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
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 iPhone-
und 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. unter-
schiedliche 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 111.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 131.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/Intro-
duction/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/AppDe-
sign/AppDesign.html#//apple_ref/doc/uid/TP40006556-CH19-SW1
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 151.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
16Dashboard „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 17Action 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 Options-
menüs landen ab Android 3 ebenfalls im
Overflow-Menü
18Zweigeteilte 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 19Music-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 hin-
ausgehen 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 Kontext-
menü 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
20Action 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 211.2.2. iPhone
iPhone 3G (S)
iPhone 4 (S)
22UI-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 23Status 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.
Navigation Bar
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/IconsIma-
ges/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
24Toolbar
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 Custom Toolbar „BBC“-App Custom Toolbar „Taskeater“-App
• Enthält bis zu 5 Elemente • Custom Buttons • Dient sowohl für Tabs
• Ansichtbezogene Aktionen • Logo (wird aus Branding- (Erledigt, nicht erledigt,
Gründen manchmal Alarm gesetzt) als auch
Standard Navigation bar gemacht, es sollte aber laut als Toolbar (Einstellungen)
• Back-Button Guidelines an der Stelle nur
• Pfeil-Buttons zum Navigieren Text stehen)
durch die Mailbox
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 25Tab 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...“
[11] http://mobile-patterns.com/custom-tab-navigation
1
26Mehr...-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 vorhan-
denen 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 27Benachrichtigungen (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.
[12] http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Tech-
1 nologyUsage/TechnologyUsage.html#//apple_ref/doc/uid/TP40006556-CH18-SW11
28Beispiel 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 292
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.
302.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 312.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).
323
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]
3.1. Startansicht
3.1.1. Grundlegende Überlegungen
Die Startansicht 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.
[14] http://www.slideshare.net/AndroidDev/android-ui-design-tips (Seite 10)
[15] http://www.slideshare.net/AndroidDev/android-ui-design-tips (Seite 35)
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 333.1.2. 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.
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.
Portions of this page are modifications based on work created and shared by Google and used according to
terms described in the Creative Commons 3.0 Attribution License.
34Action Bar
Über die Action Bar sollte der Nutzer die Möglichkeit haben,
schnell etwas Bestimmtes zu tun (siehe Kapitel „1.2.2
Grundlegendes zu UI-Elementen – Android-Action Bar“.)
Am linken Rand wurde das Logo der App platziert (Branding). Darüber gelangt der Nutzer
zurück zum Dashboard. Alternativ kann auch ein Home-Icon verwendet werden. Über
die jeweiligen Icons kann die Ergebnisliste außerdem gefiltert bzw. zur Kartenansicht
gewechselt werden.
Ein typisches Beispiel für zwei verschiedene Ansichten desselben Inhalts ist der Wechsel
zwischen einer Listen- und einer Kartenansicht.
„Earthquake“-Android-App
• Auswahl zwischen den Ansichten
über zwei Tabs in der Action Bar
„immowelt“-Android-App
• Auswahl zwischen den An-
sichten als Dropdown
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 353.1.3. iPhone
Variante 1 Variante 2
Nachdem die App gestartet und die Lokalisierung erfolgreich durchgeführt wurde, werden
dem Benutzer auf der Startansicht sofort die ersten Ergebnisse präsentiert.
Wir haben zwei verschiedene Varianten der Startansicht 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.
36Variante 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:
• Startansicht
• 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 37Beispiele Listenansicht vs. Kartenansicht
„Qype“-iPhone-App
• Umschalten entweder
am oberen oder unteren
Screen-Rand durch Toggle-
Buttons
„Speisekarte“-iPhone-App
• Umschalten über Button
in der Navigation Bar. Der
Button „Liste“ bzw. „Karte“
wechselt zur jeweils anderen
Ansicht
3.2. Detailansicht
3.2.1. Grundlegende Überlegungen
Von der Startansicht gelangt der Nutzer auf die Detailansicht 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.
383.2.2. Android
Lieblingsklo hinzufügen
Toilette melden
Bei der Android-App kann sich der Nutzer über
den Button „Route planen“ zur Toilette navigieren
lassen.
Über „Bewerten“ können anschließend für das stille Örtchen Klorollen für Sauberkeit
vergeben werden:
Sehr sauber
Sauber
In Ordnung
Geht gerade noch
Nur wenn es dringend ist
Action Bar
Über die Action Bar kann der Nutzer folgende
Aktionen durchführen:
• Zur Startansicht gehen (Logo)
• Toilette melden (z. B. wenn Stand-
ort nicht mehr vorhanden ist)
• Zu Favoriten hinzufügen
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 393.2.3. iPhone
Detailansicht Galerie
Wie bei der Android-App gibt es weitere Informationen. Es kann außerdem die Toilette
bewertet, gemeldet und über die Galeriefunktion weitere Bilder angeschaut werden.
Selbstverständlich kann sich der Nutzer über „Route anzeigen“ dorthin navigieren lassen.
Die Bewertungskriterien sind natürlich die gleichen:
Sehr sauber
Sauber
In Ordnung
Geht gerade noch
Nur wenn es dringend ist
40Zusätzliche Aktionen wurden in der Navigation Bar untergebracht.
Navigation Bar
In der Navigation Bar befindet sich links der „Zurück-Button“, in der Mitte kann entweder
das Logo der App oder die Bezeichung der Seite, in dem Fall „Detailansicht“ stehen. Über das
Icon rechts kann der User die aufgerufene Toilette zu seinen Favoriten hinzufügen.
3.3. Suche
3.3.1. Grundlegende Überlegungen
Ein wichtiger Bestandteil der App ist die Suchfunktion, mit der der Nutzer schnell fündig
wird. Dazu zählt, dass bei der Ortseingabe die Möglichkeit der Autovervollständigung
besteht und nach bestimmten Kriterien gefiltert werden kann:
• Sauberkeit
• Behindertengerecht
• Jetzt geöffnet
• Kostenpflichtig ja / nein
• Kinderfreundlich (Wickelmöglichkeit)
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 413.3.2. Android
Anstatt den Ort einzugeben, kann der Nutzer
über das Icon neben dem Sucheingabe-Feld
seinen Standort lokalisieren lassen. Hierzu
muss jedoch die Standorterkennung in den
Nutzereinstellungen (Settings) aktiviert sein.
Anschließend kann noch nach bestimmten Kritierien gefiltert werden:
Kosten:
Über ein Pull-Down-Menü kann der Nutzer in 50-Cent-Schritten festlegen, ob und wie viel er
maximal zahlen möchte.
Behindertengerecht, Wickelmöglichkeiten, Jetzt geöffnet:
Hier setzt der Nutzer einen Haken.
Um die Suche zu starten, klickt der Nutzer anschließend auf den entsprechenden Suchen-
Button.
42Beispiel weitere Filtermöglichkeiten
„immowelt“-Android-App
• Beispiel für Android-Auswahlmenü bis Android 3.
Kontakte-Android-App
• Android-Auswahlmenü ab Android 4. Statt einem
Pop-Up wird ein Drop-Down Menü verwendet.
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 433.3.3. iPhone – „Make Search Quick and Rewarding“
Apple gibt in den iOS Human Interface Guidelines
ebenfalls Empfehlungen zur Gestaltung der
Suche, unter anderem:
• dem Nutzer sollen, wenn möglich,
Filtermöglichkeiten zur Verfügung
stehen
• die Search Bar sollte zu Beginn
stehen
• Ergebnisse sollten „live“
gefiltert werden (z. B. durch
Autovervollständigung)
Die vollständige Liste gibt es unter dem Punkt „Make Search Quick and Rewarding“[16].
In der Lokuskop-App klickt der Nutzer zur Ortseingabe auf den entsprechenden Button und
gelangt auf eine neue Seite. Dort kann der Ort entweder direkt eingegeben, die aktuelle
Position bestimmt oder Orte alphabethisch durchgescrollt werden.
Nachdem der Ort ausgewählt wurde, gelangt man zurück zur Ergebnisliste. Dort kann, wie in
der Android-App, nach den bereits erwähnten Kriterien gefiltert werden.
Um weitere denkbare Designs für Filter zu demonstrieren, wurde für „Behindertengerecht“,
„Kinderfreundlich“ und „Geöffnet“ ein Ja-Nein-Selektor verwendet.
Sauberkeit:
Wie in der Android-App wird die entsprechende Anzahl der Klorollen markiert.
Nachdem der Ort ausgewählt wurde, gelangt man zurück zur Ergebnisliste.
Die Funktionsweise ist die gleiche wie bei der Android-App. Auch hier wird die Suche über
den Suchen-Button gestartet.
[16] http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UE-
BestPractices/UEBestPractices.html#//apple_ref/doc/uid/TP40006556-CH20-SW1
44Beispiele weitere Filtermöglichkeiten
„DB Navigator“-iPhone-App
• Standard Picker (hier: Date Picker)
• Picker gibt es ausschließlich in iOS
„Taskeater“-iPhone-App
• Spezialpicker mit Icons
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 453.4. Fehlermeldungen
„If an error is possible someone will make it.“
Donald Norman, Autor The Design of Everyday Things
3.4.1. Ortung
Lokuskop ist eine Location-Based-Service-App. Um die Umkreissuche nutzen zu
können, müssen die Ortungsdienste aktiviert sein. „Ortungsdienste“ ist eine
Einstellung im iPhone-Menü. Je nach dem wird für die Standorterkennung GPS
oder Cell-ID verwendet. Bei Android-Geräten kann unter „Ort“ dies auch manuell
ausgewählt werden.
Es ist nicht davon auszugehen, dass alle Nutzer wissen, wie diese Funktion,
wenn sie deaktiviert wurde, aktiviert werden kann. Daher sollte in diesem Fall ein
entsprechender Hinweis auf dem Display erscheinen.
Fehlermeldung (kein GPS) am Beispiel der
„Qype“-Android-App
Der Hinweis erscheint als Dialog. Dieser bietet
die Möglichkeit, entweder ohne Lokalisierung
weiterzumachen oder verlinkt direkt zu den
Android-Einstellungen, um das Problem zu
beheben.
463.4.2. Fehlende Internetverbindung
Nicht alle Nutzer haben eine Datenflatrate, sondern monatlich ein bestimmtes Datenvolumen
und haben daher die Internetverbindung deaktiviert. Um die App jedoch nutzen zu können,
muss eine Internetverbindung hergestellt werden. Möglich ist auch, dass der Nutzer keinen
Empfang hat (Funkloch).
Last but not least, es kann keine Verbindung zum Server hergestellt werden, z. B. Server ist
down oder braucht zu lange für eine Antwort.
Fehlermeldung (keine Internetverbindung)
am Beispiel der „DB Navigator“-iPhone-App
Es erscheint ein entsprechender Hinweis. Die
App bietet die Möglichkeit zum Aktualisieren,
sobald eine Internetverbindung besteht (hier
in der Navigation Bar).
Fehlermeldung (keine Internetverbindung) am
Beispiel der Android-Systemaktualisierung.
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 473.4.3. Keine Toiletten im Umkreis
In der Datenbank gibt es für den Umkreis noch keine eingetragenen Toiletten. Daher vielleicht
die Bitte an den Nutzer, falls er „offline“ fündig wurde, diese Toilette hinzuzufügen.
Beispiel Fehlermeldung
„Toilux“-iPhone-App
• Fehlermeldungen können durchaus auch
Humor beweisen!
48Andere Fehlermeldungen:
Nichtvorhersehbare Fehlerfälle (Bugs)
Für iPhone ist es typisch, dass die App geschlossen wird, bei Anroid öffnet sich ein
Fehlerdialog, der anschließend die App schließt.
Beispiel Fehlermeldung
„DailyStrip“-Android-App
• Anwendung wurde unerwartet geschlossen.
Vorhersehbare Fehlerfälle
In diesen Fällen erscheint die Fehlermeldungen als Pop-Up oder mit Hinweisen innerhalb
der Seite. Dazu zählen die Eingabe falscher Daten (Passwort, Kontaktformular etc.),
Fehlermeldungen bei unzulässigen Aktionen, wie etwa Button drücken, obwohl etwa der
Ladevorgang noch nicht abgeschlossen wurde oder Fehler, die beim Senden auftreten.
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 494
Zusammenfassung
„Mobilize, Don‘t Miniaturize“ [20]
Zu Beginn dieses E-Books stand die Frage: Mobile Design & Usability – warum soll man
sich darüber überhaupt Gedanken machen? Unser Ziel war es, ein Bewusstsein dafür zu
schaffen, dass Design & Usability wesentliche Bestandteile bei der Entwicklung von
mobilen Anwendungen sind. Es ging uns aber auch darum zu zeigen, dass es sich bei Mobile
um eine eigene Plattform handelt, d. h. nicht Web, nur auf einem kleineren Display.
Gleichzeitig sollte immer berücksichtigt werden, dass auch Mobile nicht gleich Mobile
bedeutet, sondern es etwa bei Konzeption und Usability einen Unterschied macht, ob es sich
um eine Android- oder iPhone-App oder andere Plattform handelt. Dies wollten wir anhand
der fiktiven Lokuskop-App verdeutlichen. Wir hoffen, es ist uns gelungen. Das wichtigste ist
für uns - frei nach den iOS Human Interface Design Guidelines:
Design the app for the device but always keep the user in mind.
[17] Bob Miller, User Experience Strategist
50„Make the right things visible.“
slidehshare.net - Android User Interface Design Tips [18]
Noch bevor die App designt wird, sollte überlegt werden, wer die App wie nutzt.
Selbstverständlich, aber leider wird dieser Schritt häufig kurz abgehakt. Welche Features
und Funktionalitäten sind am wichtigsten. Welche sind dabei anwendungsübergreifend
(Dashboard / Tab Bar) wichtig und welche Aktionen nur für bestimmte Seiten (Action Bar /
Navigation Bar)? Dieser Schritt sollte nicht übersprungen werden, insbesondere auch vor dem
Hintergrund, dass nicht alle Nutzer der App versiert im Umgang mit Smartphones sind.
„If an error is possible someone will make it.“
Donald Norman, Autor The Design of Everyday Things
Im Fall der Lokuskop-App sollte nicht davon ausgegangen werden, dass jeder weiß, wie die
Standorterkennung aktiviert werden kann. Daher sollte dem User, wo nötig, Hilfestellung
gegeben werden, denn: Es ist wohl noch nie eine App für ein Zuviel an Hilfe, sondern vielmehr
dafür kritisiert worden, dass der User sich nicht zurecht fand.
[18] http://www.slideshare.net/AndroidDev/android-ui-design-tips (Seite 10)
— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 515
Weitere Ressourcen
Zum Abschluss noch eine Liste mit empfehlenswerten Links zum Thema Mobile Design &
Usability. Da es natürlich immer Seiten gibt, die wir noch nicht kennen, würden wir uns über
Link-Tipps freuen.
iPhone
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/
MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556
Sehr umfangreich und ein Must-read für alle, die mehr über das Design von iPhone-Apps
lesen möchten. (Englisch)
App Design Strategies (iPhone)
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/
MobileHIG/AppDesign/AppDesign.html#//apple_ref/doc/uid/TP40006556-CH19-SW1
Von der Idee zur App – App Design Strategies
Nicht nur iPhone-Entwickler geeignet. (Englisch)
52Android http://developer.android.com/guide/practices/ui_guidelines/index.html Nicht ganz so ausführlich wie die Human Interface Guideline, aber ebenfalls ein Must-read. (Englisch) http://www.slideshare.net/AndroidDev/android-ui-design-tips Android User Interface Design Tipps. Zwar vom Juli 2010, aber es lohnt sich die Präsentation anzuschauen. (Englisch) http://www.androidpatterns.com/ UNITiD hat eine Liste mit Interaction Design Patterns für Android Apps erstellt. Sehr empfehlenswert. (Englisch) Folgende Bücher sind auch empfehlenswert: „Don’t Make Me Think: A Common Sense Approach to Web Usability“ von Steve Krug „Usability Engineering“ von Jakob Nielsen „Das mobile Web“ von Tom Alby — Liebe auf den ersten Touch – Mobile Design & Usability für Apps 53
6
Kontakt
Fragen, Feedback, Lob, Anmerkungen?
insertEFFECT GmbH
Hessestr. 5–7
90443 Nürnberg
Telefon: +49 911 / 27 44 87-0
Fax +49 911 / 27 44 87-29
ebook@inserteffect.com
www.inserteffect.com
twitter.com/inserteffect
facebook.com/inserteffect
54— Liebe auf den ersten Touch – Mobile Design & Usability für Apps 55
Sie können auch lesen
