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 - V 1.1 12/2011
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 - V 1.1 12/2011
Liebe auf den ersten Touch –
Mobile Design & Usability für Apps
Liebe auf den ersten Touch - Mobile Design & Usability für Apps - V 1.1 12/2011
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
Liebe auf den ersten Touch - Mobile Design & Usability für Apps - V 1.1 12/2011
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
Liebe auf den ersten Touch - Mobile Design & Usability für Apps - V 1.1 12/2011
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
Liebe auf den ersten Touch - Mobile Design & Usability für Apps - V 1.1 12/2011
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
Liebe auf den ersten Touch - Mobile Design & Usability für Apps - V 1.1 12/2011
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
Liebe auf den ersten Touch - Mobile Design & Usability für Apps - V 1.1 12/2011
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
Liebe auf den ersten Touch - Mobile Design & Usability für Apps - V 1.1 12/2011
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
Liebe auf den ersten Touch - Mobile Design & Usability für Apps - V 1.1 12/2011
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                         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/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                                          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 Options-
                                                     menü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 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

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

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         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                                    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...“

     [11] http://mobile-patterns.com/custom-tab-navigation
1

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

     [12] http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Tech-
1    nologyUsage/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
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]

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                              33
3.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.

34
Action 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                                    35
3.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.

36
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:

    • 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                           37
Beispiele 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.

38
3.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                              39
3.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

40
Zusä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                              41
3.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.

42
Beispiel 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                      43
3.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

44
Beispiele 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                 45
3.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.

46
3.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                              47
3.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!

48
Andere 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                        49
4
                               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                               51
5
                          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)

52
Android

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
NÄCHSTE FOLIEN ... Stornieren