App-Design – Alles zu Gestaltung, Usability und …...Title App-Design – Alles zu Gestaltung,...

LeseprobeAlle Plattformen fur mobile Endgerate sind zwar recht ahnlich aufge-baut, aber in den Details zeigen sich dennoch die kleinen und großen Unterschiede. Neben UI-Prinzipien sind es vor allem Nutzungskon-ventionen, die diese Unterschiede ausmachen. Diese Konventionen wirken sich auf alle Apps aus, die fur die jeweiligen Plattformen entwickelt werden.

Jan Semler

App-Design – Alles zu Gestaltung, Usability und User Experience484 Seiten, gebunden, in Farbe, Mai 2016 39,90 Euro, ISBN 978-3-8362-3453-5

www.rheinwerk-verlag.de/3737

Kapitel 6: »UI-Prinzipien und Konventionen«

Inhaltsverzeichnis

Index

Der Autor

Leseprobe weiterempfehlen

Know-how für Kreative.

https://www.rheinwerk-verlag.de/app-design_3737/?GPP=lpn

mailto:?body=Leseproben-Empfehlung:%20%C2%BBApp-Design%20%E2%80%93%20Alles%20zu%20Gestaltung,%20Usability%20und%20User%20Experience%C2%AB%20von%20Rheinwerk,%20http://gxmedia.galileo-press.de/leseproben/3737/leseprobe_rheinwerk_app-design_gestaltung_usability_user_experience.pdf&subject=Leseprobe:%20%C2%BBApp-Design%20%E2%80%93%20Alles%20zu%20Gestaltung,%20Usability%20und%20User%20Experience%C2%AB

195

6.1 Jede Plattform ist anders Kapitel 6 UI-Prinzipien und Konventionen

Um als App-Designer für eine Plattform zielgruppengerecht gestalten zu können, ist es wichtig zu wissen, wie die einzelnen Betriebssysteme visualisiert und genutzt werden.

6.1 Jede Plattform ist anders

Ob iOS oder Android, beide Plattformen werden von Anwendern ge-nutzt, um Aufgaben auszuführen, Spiele zu spielen oder beruflich damit zu arbeiten. Jedoch werden diese Aufgaben ganz unterschiedlich von den Plattformen realisiert. Häufig sind es stillschweigende Nutzungs-konventionen, die sich etabliert haben, die aber auf keiner dokumenta-rischen Basis fußen. Die eine Android-App lässt sich von einer anderen inspirieren, bestimmte Bestandteile werden übernommen und tradiert. Das eine Erfolgsrezept orientiert sich an einem anderen – und das ist auch gut so. Denn auch Anwender übertragen gemachte Erlebnisse auf neue Apps und verlassen sich darauf, dass etwa die Anordnungen von Icons oder Bedienelementen ähnlich sein werden.

6.1.1 Die Erwartungshaltung des Nutzers

90 % der Nutzer verwenden Android- oder iOS-Geräte. Viele App-De-signer konzentrieren daher ihre Bemühungen auf diese beiden großen

Kapitel 6

UI-Prinzipien und Konventionen Alle Plattformen für mobile Endgeräte sind zwar recht ähnlich aufgebaut, aber in den Details zeigen sich dennoch die kleinen und großen Unterschiede. Neben UI-Prinzipien sind es vor allem Nutzungskonventionen, die diese Unterschiede ausmachen. Diese Konventionen wirken sich auf alle Apps aus, die für die jewei-ligen Plattformen entwickelt werden.

196

Kapitel 6 UI-Prinzipien und Konventionen

Plattformen. In dem Fall, dass Sie für beide Plattformen eine App ent-wickeln möchten, sollten Sie die Eigenheiten und die Erwartungshal-tung beider Nutzergruppen kennen und diese bei der App-Gestaltung berücksichtigen.

Die Erwartungshaltung des Nutzers können wir nur dann kennen, wenn wir verstehen, wie sich diese Plattformen bei der Nutzung auf den Nutzer auswirken. Daher wollen wir im Folgenden zunächst betrachten, wie bestimmte Aspekte auf den einzelnen Betriebssystemen realisiert sind. Fünf Aspekte sollen miteinander verglichen werden:

E Gestaltung E Cognitve Load E Effizienz und Integration E Individualisierbarkeit E User Experience Friction

Gestaltung | In der Gestaltung bestehen bestimmte Konventionen, die wiederholt aufgegriffen und deshalb vom Benutzer vermutet bzw. vorausgesetzt werden. Jede Plattform hat dementsprechend ihre ganz eigene typische Optik. Gestalten Sie plattformspezifisch, erfüllen Sie die optische und ästhetische Erwartungshaltung der Plattformen. Bis vor wenigen Jahren gab es gestalterisch große Unterschiede zwischen den Plattformen. In den letzten Jahren bieten alle Plattformen im Zuge des Flat Designs eine ähnliche gestalterische Basis.

Mit iOS 7 wurde eine große Stiländerung auf der iOS-Plattform um-gesetzt, die in der Designer-Szene sehr umstritten ist. Vom realistischen bzw. skeuomorphischen Gestaltungsprinzip wurde abgelassen, bei drei-dimensionalen Elementen wurde ab Version iOS 7 nun komplett auf Ornamentik verzichtet (Abbildung 6.1). Das Design ist minimalistischer und orientiert sich an den Grundsätzen des Flat Designs. Dies gilt auch für das aktuelle iOS 9.

Es hat einen Grund, warum Apple die UI-Gestaltung nur selten stark verändert – große Veränderungen irritieren den Anwender und fordern von ihm Zeit ein, sich an die neue Gestaltung zu gewöhnen. Besonders wenn man bereits seit Längerem iOS-Nutzer ist, wirkt ein neues Design zunächst sehr fremd und gewöhnungsbedürftig.

In Android – aktuell mit Marshmallow 6.0 – haben die Grundzüge des minimalistischen Flat Designs bereits etwas früher Einzug gehalten. Dabei geht Android einen Schritt weiter und erlaubt beim sogenannten Material Design die Nutzung von Ebenen und daraus resultierenden Schlagschatten. Für mich ist das Material-Design-Prinzip revolutionär, da es sich an der physischen Welt orientiert, ohne skeuomorphistisch zu sein. Übrigens verfolgte zuerst Microsoft den Flat-Design-Ansatz und

Skeuomorphismus

Skeuomorphismus kommt aus dem Altgriechischen und bedeu-tet in etwa Behälter, Werkzeug oder Gestalt. Skeuomorphismus ist eine Design-Stilrichtung, bei der Objekte in ihrer Gestaltung die Form eines vertrauten Ob-jekts nachahmen.

197


zwar in Windows Phone 7. In Form des viel gefeierten Metro-Designs hat sich dieser auch auf der Desktop-Plattform etabliert.

Cognitive Load | Der Cognitive Load ist die Summe von Elementen, die der Nutzer kennen muss, um ein Gerät spontan und intuitiv nutzen zu können. Es ist einer der Schlüsselaspekte der User Experience für wenig technisch versierte Nutzer. Er dient als Benchmark der User Experience für Plattformen und Applikationen. Eine von Pfeiffer Consulting 2013 durchgeführte Studie ergab die Ergebnisse aus Tabelle 6.1 zum Cogniti-ve Load der jeweiligen Plattformen.

iOS 7 Android (Samsung) Windows Phone 8

Cognitive Load Index: 40



Windows Phone und iOS sind hieraus als Testsieger hervorgegangen. Beide Geräte lassen sich sehr intuitiv bedienen.

Versuchen Sie also, den Nutzer unter Android nicht noch mehr zu verwirren, er hat schon genug mit dem Betriebssystem zu tun. Kon-

G Abbildung 6.2 Windows war der Vorreiter in Sa-chen Flat-Design. Auch Windows Phone 10 ist schön flach und im Metro-Style.

G Abbildung 6.1 Links ist iOS 9 zu sehen, rechts Android 6.0 Marshmallow

G Tabelle 6.1 Cognitive Load (je niedriger die Indexziffer, desto besser; Pfeiffer Report 2013)

Studie zum Cognitive Load

Die Ergebnisse der Studie von Pfeiffer Consulting kön-nen Sie unter www.pfeiffer-report.com/v2/wp-content/uploads/2013/09/iOS7-User-Experience-Shootout.pdf – al-lerdings nur auf Englisch – im Detail nachlesen. Momentan gibt es leider keinen Report, der die aktuellen Versionen der Betriebssysteme unter die Lupe nimmt. Jedoch haben sich die Plattformen erweitert, und die Ergebnisse spiegeln sich auch noch heute in den Betriebssys-temen wider.

198


zentrieren Sie sich bei Android besonders auf eine gelungene Usability und User Experience. Nutzen Sie beispielsweise die Vorzüge des neuen Material Designs, und versuchen Sie keine eigenen Komponenten zu nutzen. Das bedeutet nicht, dass Sie diese Aspekte unter iOS etwas schleifen lassen können. Im Gegenteil, die Nutzer erwarten auch hier eine durchdachte und logische Nutzung des Betriebssystems.

G Abbildung 6.3 Views/Elemente, die ein iOS-7-Nutzer kennen muss

G Abbildung 6.4 Views/Elemente, die ein Android-(KitKat-)Nutzer unter Samsung kennen muss

G Abbildung 6.5 Views/Elemente, die ein Windows-Phone-Nutzer kennen muss

199


Im visuellen Vergleich zwischen iOS 7 und Android wird schnell erkenn-bar, warum Apple beim Cognitive Load so gut abgeschnitten hat und auch Windows ein gutes Ergebnis erzielt hat. Auch wenn die Studie mittlerweile etwas betagt ist, lassen sich die Ergebnisse grundsätzlich auch auf iOS 9 und Android Marshmallow (und Windows Phone 10) übertragen.

Behalten Sie aber im Hinterkopf, dass die Betriebssysteme unter-schiedliche Ansätze verfolgen, um einen Mehrwert für den Nutzer zu schaffen. Apple versucht bewusst, den Feature-Overload zu reduzie-ren. Das ist hingegen kein Anliegen von Android. Im Gegenteil: And-roid sieht seine Stärke in der Vielzahl an Optionen, Apps, Widgets und Einstellungsmöglichkeiten, die es dem Anwender zur Verfügung stellt. Daran liegt auch das sehr schlechte Abschneiden beim Cognitive Load. Erfahrende Nutzer finden dies vielleicht sehr nützlich, unerfahrene Nut-zer jedoch sind schlichtweg überfordert.

Effizienz und Integration | Pfeiffer Consulting hat in der bereits oben genannten Usability-Studie den Betriebssystemen auch in puncto Effizi-enz und Integration auf den Zahn gefühlt. Bei diesem Punkt wurde die Integration wichtiger Funktionen wie Multitasking, Benachrichtigungen oder der Kamera getestet.

Hier stehen sich die zwei größten Plattformen in nichts nach (Tabelle 6.2). Sowohl Android als auch iOS schneiden mit 7 von 10 Punkten gut ab. Anwender können in beiden Betriebssystemen wichtige Funktionen einfach erreichen und mit diesen effizient arbeiten.


Effizienzbewertung: 7/10



Effizienz hat was mit der Aufgabe zu tun, die man erledigen möchte. Je schneller diese gelöst wird, desto effizienter arbeitet das Betriebssys-tem. Mit der vom Betriebssystem geprägten Erwartungshaltung wird der Anwender auch an Ihre App herantreten.

Individualisierbarkeit | Ein weiterer wichtiger Faktor, der für die Usa-bility und User Experience eines Geräts wichtig ist, ist seine Anpas-sungsfähigkeit an die individuellen Bedürfnisse seiner Nutzer.

Auf allen drei Betriebssystemen sind dem Nutzer Möglichkeiten ge-geben, individuelle Anpassungen vorzunehmen. Daran hat sich auch in Android Marshmallow, iOS 9 oder Windows Phone 10 nichts geändert.

F Tabelle 6.2 Effizienz und Integration (je höher die Wertung, desto besser das Ergebnis; Pfeiffer Report 2013)

200


Der Nutzer kann mitunter ein Hintergrundbild wählen oder Schriftgrö-ßen und Schriftschnitte individuell einstellen. Solche Einstellungen er-möglichen es dem Nutzer, sich stärker mit dem Gerät zu identifizieren. Andererseits können diese benutzerdefinierten Anpassungen auch ne-gative Auswirkungen auf die Nutzung des Geräts haben. So kann eine filigrane Schrift für den Nutzer schlecht lesbar sein.


Individualisierbarkeit: Individualisierbarkeit: Individualisierbarkeit:

6/10 7/10 2/10

In diesem Punkt schneidet Android am besten ab (Tabelle 6.3). Android war bereits von Beginn an als ein sehr individualisierbares Betriebssys-tem konzipiert, der Ursprung liegt im offenen Betriebssystem. Viele Apps bieten außerdem die Möglichkeit, tiefere Eingriffe in das System vornehmen zu können und diese nach individuellen Wünschen anzu-passen. Apple hingegen setzt auf ein einheitliches und geschlossenes User-Interface-System, das nur wenig individualisierbar ist und ein ein-heitliches Look & Feel der Apple-Produkte garantieren soll.

Unter Android wird der Nutzer erwarten, dass er die App noch wei-ter anpassen und auf seine Bedürfnisse zuschneiden kann. Unter iOS ist diese Erwartung weniger gegeben, hier geht es restriktiver zu, und der Nutzer bewegt sich innerhalb strikterer Konventionen.

User Experience Friction (UXF) | Unter dem Aspekt User Experience Friction (UXF) werden Stolperfallen bei der Nutzung beschrieben. Es geht um solche Momente, in denen das Gerät nicht das tut, was es soll, in denen es Schwachstellen in der Bedienung hat, oder den Fall, dass eine wichtige Funktion sogar ganz fehlt.


UXF-Faktor: 17 UXF-Faktor: 30 UXF-Faktor: 51

G Tabelle 6.4 UXF-Faktor (je niedriger der Wert, desto besser das Ergebnis; Pfeiffer Report 2013)

In der Usability-Studie von Pfeiffer Consulting schneidet das iOS-Be-triebssystem bei diesem Punkt am besten ab (Tabelle 6.4). Bei Android sind es vorwiegend Inkonsistenzen innerhalb des Betriebssystems, die Verwirrung schaffen.

Tabelle 6.3 E Individualisierbarkeit (je höher die Wertung, desto besser das Ergeb-nis; Pfeiffer Report 2013)

Geschlossenes vs. offenes System

Während Apple mit seinem Betriebssystem ein geschlos-senes System anbietet, ist An-droid eine quelloffene Software. Für Nutzer ergeben sich daraus folgende Unterschiede: Beim Kauf eines Apple-Produkts kön-nen nur Dienste und Applikati-onen genutzt werden, die von Apple angeboten werden. Als Hauptbezugsquelle dient dabei der App Store. Anders bei An-droid: Hier können Hersteller (HTC, Samsung etc.) die Nut-zeroberflächen ganz individuell anpassen und damit auch die Wünsche verschiedener Inter-essengruppen berücksichtigen. Auch können Apps aus unter-schiedlichen App Stores bezo-gen werden.

201


Versuchen Sie, in Ihrer App derartige Stolperfallen zu vermeiden. Ge-nerell sollten Sie dafür sorgen, dass das Interface bzw. dessen gelernte Elemente, das tun, was der User erwartet.

6.1.2 UI-Prinzipien der Plattformen

Jede der Plattformen wird mit Multitouch bedient, seit dem iPhone 6s/Plus und der Apple Watch haben diese Geräte zusätzlich einen druck-sensitiven Bildschirm, unabhängig davon jedoch unterscheiden sich die Betriebssysteme in der eigentlichen Bedienung. Jedes der Betriebssys-teme hat gängige Nutzungskonventionen, die ein Nutzer kennen und entsprechend in Apps anwenden muss.

Wenn Sie mit den Gedanken spielen, Ihre App auf unterschiedlichen Betriebssystemen realisieren zu wollen, gibt es UI-Prinzipien, die Sie bei der Entwicklung und der Umsetzung Ihrer App-Idee berücksichti-gen sollten. Sollten Sie also native Apps für die Plattformen entwickeln, kann das ein sehr umfangreiches Projekt werden, da Ihre App auf jede Plattform zugeschnitten werden muss.

Obwohl die Grundidee und die Funktionalität Ihrer App sicherlich auf allen Plattformen abbildbar sind, sollten das Interface und die Handha-bung der App im Idealfall auf die entsprechende Plattform zugeschnit-ten sein. Erfüllen Sie die Erwartungshaltung Ihres Nutzers, orientieren Sie sich an den etablierten Design Patterns, und respektieren Sie die na-tiven UI-Standards. Die wichtigsten stelle ich Ihnen im Folgenden vor.

Zurück-Navigation | Die Zurück-Funktionalität ist eines der wichtigs-ten Navigationselemente für den Nutzer. Mit der Zurück-Funktion fin-det der Nutzer in tiefen hierarchischen Strukturen einer Anwendung stets den Weg zurück.

Unter iOS ist die Zurück-Option im oberen linken Bereich in der Na-vigationsbar angesiedelt, so wie man es von Webbrowsern her kennt. Der Zurück-Button ist ein reines Navigationsbedienelement. Er wird dazu genutzt, um zur vorherigen Seite innerhalb einer App zu gelangen. Die Option wird nicht dafür eingesetzt, um zwischen Applikationen zu wechseln. Seit iOS 9 gibt es zusätzlich einen App-Switcher, der es er-möglicht, zur vorherigen App zu springen. Dies funktioniert jedoch nur dann, wenn der Nutzer zum Beispiel einen Internetlink in einer App wie Twitter berührt und sich daraufhin Safari öffnet. So kann der Nutzer von Safari zurück in Twitter springen. Diese Aktionsfläche befindet sich ganz oben links, wo sich die Anzeigen für Verbindungstärke und Anbieter befinden (Abbildung 6.6).

Design Patterns

Design Patterns sind bewährte Schablonen. Diese Schablonen können App-Designer nutzen, um wiederkehrende Probleme zu lösen. So sind einige Ab-läufe, wie zum Beispiel eine Registrierung, ein Stück weit standardisiert und können bei unterschiedlichen Projekten eingesetzt werden.

Zurück unter iOS 9

Unter iOS 9 gibt es ein neues Element, das in der Statusbar angezeigt wird und das dann erscheint, wenn man von der ei-nen App in die andere gelangt. So können manche Apps Ver-linkungen ins Internet anzeigen. Bei einem Tap auf einen solchen Link wechselt der Nutzer in die Browser-App und kann dann durch den Link in der Statusleis-te wieder zurück in die vorheri-ge App gelangen.

202


Unter Android gibt es eine Up-Funktion und eine Zurück-Funktion. Die Up-Aktion befindet sich in der App-Bar und verhält sich wie die Zurück-Aktion unter iOS. Der Nutzer kann somit innerhalb einer App die Views in einer hierarchischen Struktur zurückgehen.

Im Gegensatz dazu verhält sich die Zurück-Option anders. Diese befindet sich bei älteren Geräten im unteren Bereich als Hardware-schaltfläche bzw. bei neueren Smartphones mit aktuelleren Betriebs-systemen als Touchfläche. Dieser Zurück-Button wandert auch durch zuvor genutzte Screens zurück. So kann der Nutzer auch durch zuvor angezeigte Apps navigieren. Als Beispiel: Der Nutzer öffnet in der Twitter-App eine Verlinkung in das Internet, und der Browser öffnet sich. Mit dem Zurück-Button gelangt der Nutzer wieder zurück in die Twitter-App.

Unter Android wird ein Zurück-Button als Hardwareschaltfläche angeboten. Alternativ, wenn keine Hardwareschaltflächen vorhanden sind, kann durch eine Swipe-Geste vom unteren Bereich des Smart-phones diese Schaltfläche eingeblendet werden. Auch hier wird chro-nologisch durch Apps oder besuchte Webseiten zurück navigiert.

Einen digitalen Zurück-Button in der Form eines Up- bzw. Back-But-tons wie unter Android ist nicht vorgesehen. Durch die seitenbasier-te Nutzung werden positionierte Views angeschnitten und rechts ne-ben dem Hauptbereich angezeigt. Im oberen Bereich befindet sich der View-Titel, dieser wandert stetig langsam nach links, sobald man tiefer in die App navigiert, und suggeriert dem Nutzer die Tiefe der aktuellen Position in der Navigationsstruktur. Der Nutzer kann durch eine Swipe-Geste nach links oder rechts durch diese Views navigieren.

Tab-Navigation | Die Tab-Navigation ist ein Navigationselement, um zwischen Hauptbereichen einer App zu wechseln. Meist wer-den hier kleine Icons und Labels angezeigt. Bei Apps mit bis zu ma-ximal fünf Seiten ist eine Tab-Navigation ein probates und sinnvolles Navigationsinstrument.

G Abbildung 6.6 Links die Zurück-Navigation von iOS, in der Mitte von Android und rechts die Aktionsfläche »Zurück zu Twitter«

G Abbildung 6.7 Zurück-Option bei Android: Hier werden Apps gezeigt, die der Nut-zer geöffnet hat.

G Abbildung 6.8 Back-Button bei Android

203


Unter iOS befindet sich die Tab-Navigation im unteren Bereich des Bildschirms. In der Tab-Navigation sollten nicht mehr als fünf Elemente angezeigt werden (warum mehr nicht empfehlenswert sind, erfahren Sie noch in Kapitel 7, »Controls und Views von iOS und Android«). In manchen Apps wird hier auch die Toolbar angezeigt, die im Grunde so aussieht wie die Tabbar.

In Android-Apps wird empfohlen, die Tab-Navigation im oberen Be-reich des Bildschirms zu positionieren. Dort wird Sie in der Regel von den Android-Nutzern erwartet. Unter Android dürfen mehre Elemen-te angezeigt werden, und zwar in einem scrollbaren Container 1. Der Nutzer muss nur seitwärts scrollen, wenn mehre Elemente angezeigt werden.

Wechsel zwischen Ansichten | In iOS-Apps wechselt der Anwender zwischen Seiten verschiedener Datensätze mittels der sogenannten Segmented Control. Ein Datensatz kann zum Beispiel eine längere Liste sein. Jedes Segment innerhalb des Controls steht für eine weitere Sei-te mit Inhalt. So kann zum Beispiel bei einer Shopping-App über die Segmented Control zwischen Beschreibung, Technische Details oder Rezensionen gewechselt werden.

Bei Android-Apps wird der Spinner verwendet. Er funktioniert wie ein Dropdown-Menü und wird vorwiegend in der Action-Bar verwen-det, die sich unter der App-Bar bzw. der Systembar befindet. Dieses Element kann auch als Navigationselement genutzt werden, während eine Tabbar genutzt wird, um innerhalb einer Inhaltsseite Ansichten zu wechseln.

F Abbildung 6.9 Tab-Navigation unter den Betriebs-systemen (links iOS und rechts Android)

a

G Abbildung 6.10 Ansicht verschiedener Daten ansichten

204


Suchfunktion | Unter iOS befindet sich die Suche vorwiegend im obe-ren Bereich der App.

In Android-Systemen gibt es verschiedene Möglichkeiten, die Suche zu positionieren:

E als Search-Bar im oberen Bereich der App, ähnlich wie unter iOS; jedoch ist das Suchfeld hier häufig hinter einem Lupe-Icon versteckt, ein Tap darauf öffnet das Suchfeld.

E als Search-Widget; dieses Widget, das eigentlich keines ist, kann überall in der App eingesetzt werden, weshalb es als Widget be-zeichnet wird; vorwiegend wird es in der Action-Bar im oberen Be-reich positioniert.

Aktionen | Aktionen werden in Regel durch Icons repräsentiert, die be-stimmte Funktionen darstellen. Sie erscheinen im Kontext einer View. Es sind dynamische Aktionen, die mitunter nur in bestimmten Screens angezeigt werden. Konkrete Beispiele wären: Speichern, Senden, Tei-len, Liken etc.

In iOS-Apps können Aktionen an verschiedenen Stellen positioniert werden. So können Aktionsflächen als Leiste im unteren Bereich er-scheinen oder in der Navigationsbar in der rechten oberen Ecke. Al-ternativ können diese Aktionsflächen natürlich auch im Zentrum des Bildschirms angezeigt werden, je nach Konzeption der App.

In Android-Apps wird empfohlen, die Aktionsflächen in der Action-Bar im oberen Bereich darzustellen. Sollten mehr Aktionen abgebildet werden, so wird ein Action-Overflow-Icon abgebildet (drei überein-anderstehende Punkte), hinter dem sich weitere Aktionen befinden. Mehr zu der Action-Bar in Kapitel 7, »Controls und Views von iOS und Android«.

Abbildung 6.11 E Suchfeld der Betriebssysteme

Abbildung 6.12 E Action-Bars

205

6.2 Informationsarchitektur und Navigation


Die Informationsarchitektur, auch bekannt als IA, ist das Fundament Ihrer App. Eine gut entwickelte App mit einem ansprechenden ästhe-tischen Design wird ohne vernünftige Informationsarchitektur nicht er-folgreich sein.

Die IA ist dabei nicht gleichzusetzen mit der Navigation. Zwar hän-gen diese Konzepte eng miteinander zusammen, und es ist logisch, dass die Informationsarchitektur das Design der Navigation bestimmt. Aber die IA erstreckt sich weit über die App-Navigation hinaus.Es ist eine Kunst, aus Informationen nutzbare, im Kontext sinnvolle In-halte zu machen. Eine gute Informationsarchitektur leistet im Idealfall genau das. Eine Informationsarchitektur und die daraus resultierende Navigationsstruktur beschreiben nicht nur, wie welche Informationen strukturiert und angeordnet werden, sondern auch, wie der Nutzer da-mit interagiert. Das Ganze wird bei mobilen Geräten noch schwieriger, da es verschiedene Plattformen sowie Geräte gibt, die alle unterschied-lichen Interaktionsmodellen folgen.

Meist basieren Betriebssysteme auf einer hierarchischen Struktur, der klassischen Ordnerstruktur. In mobilen Apps gibt es zwar kein Ordner-system, jedoch sind auch hier die Betriebssysteme hierarchisch aufge-baut. Für Ihre App muss das jedoch nicht gelten. Gerade für komplexe Tablet-Anwendungen können andere Strukturen besser geeignet sein. Eine Universallösung gibt es allerdings nicht. Hier muss von Fall zu Fall entschieden werden. Egal, für welches Navigationskonzept Sie sich ent-scheiden, wichtig ist, dass die richtigen Inhalte den Anwender an genau der richtigen Stelle im richtigen Moment erreichen. Eine gute Informa-tionsarchitektur beachtet also auch immer den Kontext, in dem sich der Nutzer befindet.

Als App-Designer sollten Sie einige der gängigsten Navigationsstruk-turen, denen immer auch eine gründlich ausgearbeitete Informations-architektur zugrunde liegen muss, kennen und einsetzen können. Im Folgenden werde ich näher auf verschiedene Navigationskonzepte ein-gehen und Vor- und Nachteile vorgestellen.

6.2.1 Der Klassiker: Die hierarchische Navigation

Die Hierarchiestruktur, oder auch Baumstruktur genannt, ist eine der klassischsten Navigationsstrukturen. Eine hierarchische Navigation liegt dann vor, wenn der Anwender durch Anklicken von Links immer weiter in ein bestimmtes Thema eindringen kann. Sie basiert auf einer Haupt-seite, der sogenannten Indexseite, und weiteren Unterseiten. Diesen

Indexseite

Eine Indexseite ist der Start-punkt einer Applikation. Es ist der Homescreen bei einer App, entsprechend der Startseite ei-ner Website.

206


Unterseiten können wiederum weitere Unterseiten folgen. Nutzer ken-nen diese Struktur sehr gut, da zum Beispiel Ordnersysteme auf dem Desktop genauso funktionieren.

Pro E Gut geeignet zur Organisation komplizierter Strukturen. E Optimal für Apps, bei denen der Nutzer in wenigen Schritten sein Ziel erreichen kann.

Contra E Problematisch bei kleinen Screens durch komplexere Inhalte oder verschachtelte Navigation. Der Nutzer kann sich recht schnell verlie-ren und in die falsche Richtung navigieren.

6.2.2 Jede Seite für sich: Hub & Spoke

Die Hub-&-Spoke-Navigation ist ebenfalls von einem hierarchischen Charakter geprägt. Das Pattern Hub & Spoke hat eine zentrale Index-seite, aus der der Nutzer navigieren kann: den sogenannten Hub. Der Anwender sieht also nach dem Starten der App einen Hub-Screen mit Icons. Bei einer Unterseite spricht man von einem Spoke, der wieder-

G Abbildung 6.13 Amazon ist das Beispiel einer App mit einer hierarchischen Struktur.

G Abbildung 6.14 Schema der hierarchischen Navigation

207


um ein Hub sein kann. Möchte der Nutzer nun in einen anderen Spoke wechseln, muss er wieder zurück zum (letzten) Hub.

Das klassische Beispiel einer derartigen Navigation sind die Home-screens aller gängigen Apps mit einer Dashboard Funktionalität. Hier findet der Nutzer eine Übersicht all seiner installierten Apps, die er von hier aus öffnen kann. Durch die Betätigung des Home-Buttons kann der Anwender immer wieder zurück zum Homescreen gelangen.

Pro E Multifunktionale Tools, jedes für sich mit interner Navigation und Funktion. In einem Spoke kann ein Workflow abgebildet sein, den der Nutzer über mehrere Seiten durchführen muss. Der Anwender kann immer wieder einfach zum Hub zurückkehren.

F Abbildung 6.15 Schema der Hub-&-Spoke- Navigation

G Abbildung 6.16 Hub-&-Spoke-Beispiel in der oogababy-App für iOS

208


Contra E Weniger geeignet für Nutzer, die multitasken und zwischen den Spokes hin und her wechseln wollen.

6.2.3 Ineinander gestapelt: Nested Doll

Die verschachtelte Matroschka-Puppe gibt dem klassischen Navigati-onskonzept Nested Doll seinen Namen. Die Nested-Doll-Struktur führt den Nutzer in einer linearen Weise zu detaillierterem Content. Der Nut-zer startet in einer Listenansicht von einer Startseite, die die Haupt-bereiche der App voneinander trennt. Tippt er einen Listeneintrag an, gelangt er zur nächsten Unterseite. Befindet sich der Nutzer in einer schwierigen Situation, kann er schnell und einfach zurücknavigieren.

Ein gutes Beispiel sind hier Apps, die eine Timeline-Funktion haben, wie Facebook, Twitter oder Instagram. Hier gibt es aufgelistete Berei-che, durch die der Nutzer dann auf eine Unterseiten gelangen kann. Dort sind weitere Details über den ausgewählten Post, Tweet oder das Bild zu finden.

Pro E Diese Navigation eignet sich gut für Apps mit einer einfachen Aufgabe.

E Sie kann auch verwendet werden für Unterseiten in anderen Patterns.

Contra E Der Nutzer kann nicht einfach zwischen Seiten wechseln. Je nach Tiefe eines Nested Dolls muss er entsprechend wieder alle Stufen zurückgehen, um zu einer Übersicht zu gelangen.

G Abbildung 6.18 Nested Dolls auf Instagram

G Abbildung 6.17 Schema einer Nested-Doll-Navigation

< zurück < zurück < zurück< zurück < zurück < zurück

209


6.2.4 Für Multitasker: Tabbed View

Die Tabbed View ist wohl die bekannteste Struktur unter allen Platt-formen. Sie ist die klassische Ansicht mit Tabs am unteren (iOS) oder oberen (Android) Rand des Screens.Der Nutzer kann schnell zwischen den einzelnen Sektionen hin und her springen. In manchen Apps ist der mittlere Tab der Hauptfunktion vor-behalten, wie zum Beispiel der Auslöser-Button in Foto-Applikationen.

Ein gutes Beispiel für die Tabbed View ist die Onefootball-App. Im un-teren Bereich des Bildschirms kann der Nutzer zwischen den verschie-denen Bereichen der App hin und her wechseln, zum Beispiel News, Spiele, Browse, Friends, Profil.

Pro E Ermöglicht eine schnelle Navigation und erlaubt Multitasking. E Zudem kennt jeder Smartphone- oder Tablet-Nutzer diese Struktur und weiß auf Anhieb, wie diese zu nutzen ist. Die Struktur funktio-niert also auf allen Plattformen.

Contra E Bei zu komplexen Apps lässt sich diese Struktur nur schlecht reali-sieren. Die Navigation funktioniert am besten bei einfachen Infor-mationsarchitekturen. Unter iOS sollte man nicht mehr als fünf Tabs verwenden, während bei Android mehr möglich sind. Ich rate aber generell unabhängig der Plattform zu nicht mehr als fünf.

6.2.5 Mehr Übersicht: Bentobox/Dashboard

Die Bentobox, oder auch Dashboard genannt, bringt kleine, detaillierte Informationen auf der Indexseite unter. Im Grunde ist sie der Hub-&-Spoke-Variante sehr ähnlich. Jedoch werden hier in den Kacheln selber schon detaillierte Informationen angezeigt. Diese Variante eignet sich

G Abbildung 6.19 Schema einer Tabbed-View-Navigation

G Abbildung 6.20 Onefootball-App mit einer Tabbed View

210


aufgrund der Screengröße weniger für Smartphones, sondern eher für Tablets. Sie stellt Informationen von Funktionen oder Inhalten auf einer Übersichtsseite dar. Ein Dashboard wird vorwiegend bei Tablets ver-wendet, auf Smartphones hingegen findet man es seltener.

Pro E Ein Dashboard kann sehr kraftvoll sein, denn es ermöglicht dem Nut-zer, auf einen kurzen Blick alle relevanten Informationen zu sehen.

Contra E Die Schwierigkeit des Bentobox-Modells liegt in der Darstellung der Informationen. Es muss auf ein gut durchdachtes grafisches Inter-face-Design geachtet werden.

6.2.6 Der Contentking: Navigation durch Filter

Sollte der Nutzer mit einem großen Umfang von Inhalten arbeiten, empfiehlt sich die sogenannte Filtered View. Zwar ist die Filtered View kein reines Navigationskonzept, sondern besser als Inhaltselement zu verstehen, doch kann sie Nutzer bei der Navigation unterstützen.

Die Filtered View hilft den Nutzern dabei, mittels Aktivierung von Filtern den Inhalt zu konkretisieren. Sie hilft den Nutzern dabei, gezielt nach Inhalten zu suchen bzw. sie zu finden. Hierbei wählt der Nutzer aus einer Reihe von Filtern den gewünschten aus und bekommt sofort geordnete Ergebnisse angezeigt.

Abbildung 6.21 E Schema einer Bentobox- bzw. Dashboard-Navigation

G Abbildung 6.22 Suchergebnisse in der Shazam-App als Bentobox

211


Pro E geeignet für Apps mit umfangreichen Inhalten wie Artikel, Bilder oder Videos

E gut geeignet für Shopsysteme auf Tablets E Funktioniert sehr gut als Unterseite einer der anderen Navigations-strukturen.

Contra E Es kann sehr schwierig sein, die Filter auf Smartphones oder Wear-ables ordentlich darzustellen. Meist sind diese selbst eine Liste, und die Bildschirmgröße reicht meist nicht aus.

F Abbildung 6.23 Schema einer Filtered View

Filter

G Abbildung 6.24 Filtered View der Airbnb-App, wobei hier mehrere Filtereinstellungen möglich sind. Dabei werden interaktiv die Ergebnisse ausgeblendet und erst nach Setzen des Filters angezeigt. Es ist eine sehr schöne und interaktive Variante der Filtered View.

212


EXKURS

Navigation auf Wearables

Über Apple Watch OS Glances hat die App einen kleinen Bereich, in dem Informationen der App angezeigt werden können. Der Nutzer ge-langt über diese Glances in die installierte Apple-Watch-App und kann weitere Aktionen ausführen. Man kann die Glances-Ansicht mit der Mitteilungszentrale für das iPhone bzw. iPad vergleichen. Als Beispiel sei die App Lifesum genannt (Abbildung 6.25).

Bei Lifesum handelt es sich um eine Kalorienzähler-App. Die App zeigt dem Anwender seinen aktuellen Kalorienverbrauch und seine Ka-lorienaufnahme an. Bei Tap auf die Lifesum-Glance gelangt der Nutzer in die Apple-Watch-App, wo er weitere Aktionen ausführen kann.

Pro E Die Dashboard-Navigation ist auf Wearables vor allem sinnvoll, wenn umfangreiche Applikationen vorliegen, die eine Übersichtsseite be-nötigen. Vorwiegend wird das Dashboard bei Applikationen genutzt, die statistische Auswertungen machen sowie Diagramme oder Kenn-zahlen darstellen möchten.

Contra E Weniger geeignet für kleinere Applikationen, die keinen großen Funktionsumfang besitzen.

G Abbildung 6.25 Lifesum-App auf dem Smartphone (oben) und die Apple-Watch-App (unten)

6.2.7 Der Kombinator: Navigationskonzepte miteinander kombinieren

Wie Sie vielleicht schon erkannt haben, können die verschiedenen Na-vigationsstrukturen miteinander kombiniert werden. Versuchen Sie, maximal zwei Navigationsstrukturen zu nutzen. Kombinieren Sie zwei Navigationsstrukturen, sollten Sie mit einer Hauptnavigationsstruktur arbeiten und die andere Struktur nur untergeordnet verwenden.

In der Facebook-App finden Sie zum Beispiel eine Kombination von Navigationsstrukturen. Elemente aus der Timeline verhalten sich nach Regeln der Nested-Doll-Navigation, die Hauptnavigation der App folgt allerdings der Tabbed View. In der Tabbar werden alle Hauptseiten der Applikation angezeigt, der Nutzer kann hier zwischen den einzelnen Bereichen hin und her wechseln.

213


Pro E Eine Kombination verschiedener Navigationskonzepte bietet sich bei komplexen Applikationen an, wenn verschiedene Werkzeuge und In-halte miteinander kombiniert werden müssen.

Contra E Navigationskombinationen sollten nicht erstellt werden, um Proble-me im Konzept oder in der Informationsarchitektur zu lösen.

G Abbildung 6.26 Facebook-App mit einer Tabbed View

G Abbildung 6.27 Facebook-App mit einer Nested-Doll-Struktur

214


CHECKLISTE: KONVENTIONEN BEACHTEN

E Adaptieren Sie keine iOS-Prinzipien auf die Android-Plattform oder umgekehrt.

E Reduzieren Sie den Cognitive Load. Unterschiedliche Elemente für die gleiche Funktion erschweren die Nutzung Ihrer App.

E Erarbeiten Sie sich eine Informationsarchitektur. Diese stellt die Basis für die Navigation in Ihrer App dar.

E Erlernen Sie die verschiedenen Informationsarchitekturen und Navigationsarten.

In diesem Kapitel haben Sie einiges zur Informationsarchitektur von Apps gelesen. Im folgenden Kapitel werde ich Ihnen die verfügbaren Komponenten auf den beiden Plattformen vorstellen und zeigen, wofür diese gedacht und auch genutzt werden sollten.

3

Inhalt

Inhalt

Vorwort ....................................................................................... 13

1 Der Smartphone- und Tablet-Boom

1.1 iPhoneundiPadalsWegbereiter ...................................... 151.1.1 Das iPhone schreibt Geschichte ............................. 161.1.2 Die Konkurrenz schläft nicht: Android ................... 17

1.2 Immerdabeiundalwayson .............................................. 181.2.1 Ständig erreichbar ................................................. 181.2.2 Der besondere Kontext ......................................... 19

1.3 WasmachteineguteAppaus? ......................................... 211.3.1 Eine gute App erfüllt einen Zweck ......................... 211.3.2 Eine gute App ist schnell und spart Zeit ................ 221.3.3 Eine gute App sieht gut aus und fühlt sich gut an ... 24

1.4 Tablets,SmartphonesundWearables ............................... 261.4.1 Das Smartphone und Phablet ................................ 261.4.2 Das Tablet ............................................................. 271.4.3 Wearables ............................................................. 281.4.4 Die Betriebssysteme .............................................. 29

1.5 DierichtigeEntwicklungsstrategiefürdieApp ................ 341.5.1 Umsetzbarkeit von Design ..................................... 351.5.2 Was ist eine native App? ....................................... 361.5.3 Was ist eine Web-App .......................................... 371.5.4 Was ist eine Hybrid-App? ..................................... 39

1.6 DesignundTechnik .......................................................... 401.6.1 Designer ............................................................... 401.6.2 Entwickler ............................................................. 411.6.3 Das Beste aus beiden Welten ................................ 42

2 Konzeption und Ideenfindung

2.1 DieApp-Idee .................................................................... 452.1.1 Am Anfang steht die Idee ...................................... 452.1.2 Ideen brauchen Kontext und fundierte Kenntnisse 462.1.3 Hilfestellung bei der Ideenfindung: Kreativitätstechniken ............................................ 48

4

Inhalt

2.1.4 Ideen konkretisieren .............................................. 512.1.5 Von erfolgreichen Apps lernen .............................. 53

2.2 MarktundAufbauvonAppStores ................................... 542.2.1 Kategorien von App Stores: Spiele, Social Media & Co. .................................... 542.2.2 Die populärsten Kategorien .................................. 552.2.3 Vom Angebot lernen ............................................. 60

2.3 WelchesProblemlösenSiemitIhrerApp? ....................... 602.3.1 Kategorien von Problemlösungen .......................... 612.3.2 Was macht Ihre App zu etwas Besonderem? .......... 65

2.4 WeristIhreZielgruppe? ................................................... 662.4.1 Die Zielgruppe definieren ...................................... 662.4.2 Braucht Ihre Zielgruppe diese App? ....................... 672.4.3 Personas ................................................................ 682.4.4 Konkurrenz- und Mitbewerberanalyse ................... 702.4.5 Apps für die Masse oder nur für einen kleinen Kreis? ........................................................ 71

2.5 DieBewertungIhrerIdee ................................................. 722.5.1 Dotmocracy: Bewertung mit Punkten .................... 722.5.2 Bewertung nach vordefinierten Kriterien ............... 722.5.3 Bewertung mit der Nutzwertanalyse ...................... 732.5.4 Bewertung durch SWOT-Analyse ........................... 74

2.6 AufwelcherPlattformsolltenSieIhreIdeeumsetzen? ..... 752.6.1 Die Besonderheiten von iOS ................................. 752.6.2 Die Besonderheiten von Android .......................... 78

3 Think big, but build small

3.1 WieAnwenderIhreGeräteundAppsnutzen ................... 833.1.1 Daten zur Smartphone-, Tablet- und Wearable- Nutzung ............................................... 843.1.2 Eine Woche ohne Computer ................................ 863.1.3 Weniger ist mehr .................................................. 883.1.4 Mentale Modelle ................................................... 893.1.5 Jedes Betriebssystem ist eine in sich geschlossene Welt ................................................. 90

3.2 DerNutzungskontext ....................................................... 903.2.1 Beispiele für Apps, die den Nutzungs kontext beachten ............................................................... 913.2.2 Nutzungssituationen ............................................ 92

5

Inhalt

3.3 KleineBildschirme,abergroßesDesign ........................... 943.3.1 Der Touchscreen ................................................... 943.3.2 Bildschirmgrößen bei Android-Geräten .................. 943.3.3 Bildschirmgrößen bei iOS-Geräten ......................... 953.3.4 Bildbenennung bei iOS-Geräten ........................... 963.3.5 Bildbenennung bei Android-Geräten .................... 963.3.6 Bildschirme von Wearables ................................... 97

3.4 PortraitundLandscape ..................................................... 983.4.1 Orientation Design Models ................................... 99

3.5 DieBedienungperFinger ................................................. 1033.5.1 Kleine Bedienelemente, große Probleme ............... 1043.5.2 Zeigefinger und Daumen ....................................... 1043.5.3 Pixelbreite von Fingern .......................................... 105

3.6 DasrichtigeGefühl–dieTouchbedienung ....................... 1063.6.1 Besonderheiten der Bedienung .............................. 1063.6.2 Gesten: Drücken, wischen, tippen … ..................... 1083.6.3 Hotspots: Wohin schaut der Nutzer? ..................... 110

3.7 DieSmartphone-Bedienung ............................................. 1123.7.1 Mit nur einer Hand .............................................. 1123.7.2 Haltung im Portrait-Modus/Landscape-Modus ....... 1133.7.3 Der Daumen als Entdecker ................................... 1143.7.4 Die Home-Buttons ................................................ 115

3.8 DieTablet-Bedienung ...................................................... 1173.8.1 Frei-, ein- oder zweihändig? .................................. 1173.8.2 Schutzzonen einrichten ......................................... 1193.8.3 Accessoires ........................................................... 120

3.9 DieBedienungvonWearables ......................................... 1213.9.1 Leicht am Handgelenk, leicht in der Bedienung ..... 121

3.10 InternetderDinge ............................................................ 123

4 Usability, User Experience und Barrierefreiheit

4.1 WasistUsability? ............................................................. 1254.1.1 Merkmale guter Usability ...................................... 1264.1.2 Usability-Vergleich zweier To-do-Apps ................... 1274.1.3 Zentrale Aspekte einer gelungenen Usability .......... 1304.1.4 Usability vs. Aussehen: Entweder oder? ................ 131

Hauptnavigation

Hauptbereich

Sekundärnavigation

6

Inhalt

4.2 WasistUserExperience? .................................................. 1324.2.1 User Experience und Informationsarchitektur ........ 1334.2.2 Zehn Tipps für eine gelungene User Experience ..... 1354.2.3 Warum es sich lohnt, in eine gute UX zu investieren ............................................................ 1404.2.4 Schönheit und Emotionalität ................................. 142

4.3 ZehnRegelnfürgutesInteraktionsdesign ........................ 146

4.4 Barrierefreiheit .................................................................. 1504.4.1 Grenzen und Möglichkeiten der Betriebssysteme ... 1514.4.2 Was Sie als App-Designer tun können ................... 153

5 Nutzerzentriertes Design

5.1 PhasennutzerorientiertenDesigns ................................... 156

5.2 DieInteraktionalsErlebnisdesignen ............................... 1575.2.1 Gamification ......................................................... 1585.2.2 Gamification in Apps ............................................. 1595.2.3 Gamification, ja oder nein? .................................... 161

5.3 HolenSieIhreNutzerab ................................................... 1615.3.1 Das On-Boarding .................................................. 1615.3.2 Die Registrierung .................................................. 1665.3.3 Den Nutzer im Blick .............................................. 1695.3.4 Transitional Interfaces ............................................ 170

5.4 BenutzerfreundlicheBedienungundDateneingabe .......... 1745.4.1 Die richtige Positionierung von Controls ................ 1755.4.2 Der Einsatz von Custom-Controls .......................... 1765.4.3 Kontextbezogene Bedienelemente und Navigation 177

5.5 InformierenSiedenNutzerdarüber,waspassiert ............ 1785.5.1 Formen von Feedback .......................................... 1795.5.2 Wann Feedback zu viel wird .................................. 1825.5.3 iOS-Notifications und Widgets .............................. 1835.5.4 Android-Notifications und Widgets ....................... 1865.5.5 Wann ist der Einsatz von Notifications empfehlenswert? ................................................... 1875.5.6 Pop-ups ................................................................ 1895.5.7 Fehler- und Infomeldungen ................................... 190

5.6 Stolperfallen–woranNutzerdieLustverlieren ................ 1925.6.1 In der Warteschleife .............................................. 1925.6.2 Der Ladebalken ..................................................... 193

7

Inhalt

6 UI-Prinzipien und Konventionen

6.1 JedePlattformistanders ................................................. 1956.1.1 Die Erwartungshaltung des Nutzers ....................... 1956.1.2 UI-Prinzipien der Plattformen ................................ 201

6.2 InformationsarchitekturundNavigation ........................... 2056.2.1 Der Klassiker: Die hierarchische Navigation ........... 2056.2.2 Jede Seite für sich: Hub & Spoke ........................... 2066.2.3 Ineinander gestapelt: Nested Doll ......................... 2086.2.4 Für Multitasker: Tabbed View ............................... 2096.2.5 Mehr Übersicht: Bentobox/Dashboard ................. 2096.2.6 Der Contentking: Navigation durch Filter .............. 2106.2.7 Der Kombinator: Navigationskonzepte miteinander kombinieren ..................................... 212

7 Controls und Views von iOS und Android

7.1 WassindControlsundViews? ......................................... 2157.1.1 Zusammenhang von Controls und Views ............... 215

7.2 DieStandard-ControlsvoniOS ........................................ 2177.2.1 Navigationsbar ..................................................... 2177.2.2 Toolbar ................................................................. 2197.2.3 Tabbar ................................................................... 2207.2.4 Label, System-Button, Refresher & Co. .................. 222

7.3 DieStandard-ControlsvonAndroid ................................. 2457.3.1 Layoutprinzipien ................................................... 2467.3.2 System-, App- und Toolbar .................................... 2487.3.3 Seitennavigation ................................................... 2507.3.4 Komponenten ....................................................... 251

7.4 Custom-ControlsundCustom-Components ..................... 2677.4.1 Side-Menü ............................................................ 2677.4.2 Swipe to Choose ................................................... 2687.4.3 Animiertes On-Boarding ........................................ 2697.4.4 Diagramme ........................................................... 2697.4.5 Erstellen Sie individuelle Controls .......................... 270

7.5 Fazit .................................................................................. 270

8

Inhalt

8 Vom Papier zum interaktiven Prototyp: Wireframe, Mock-up & Co.

8.1 DeriterativeDesignprozess .............................................. 2728.1.1 Warum überhaupt Iterationen? ............................. 273

8.2 StiftundPapier–eineersteSkizzederApp ..................... 2748.2.1 Die erste Skizze ..................................................... 2748.2.2 Storyboard ............................................................ 275

8.3 Wireframe–eswirdkonkreter ......................................... 2778.3.1 Was ist ein Wireframe? .......................................... 2788.3.2 Wann werden Wireframes eingesetzt? ................... 2798.3.3 Was sollte ein Wireframe leisten? .......................... 280

8.4 Mock-ups–jetztwird’sbunt ............................................ 2818.4.1 Mit richtigen Inhalten arbeiten .............................. 282

8.5 InteraktivePrototypen–derersteechteEindruck ........... 2838.5.1 Was ist ein interaktiver Prototyp? .......................... 2838.5.2 Low Fidelity – ein Wireframe-Prototyp .................. 2848.5.3 High Fidelity – Design-Prototyp ............................. 285

8.6 Wireframe-undMock-up-Tools ........................................ 2878.6.1 Balsamiq Mockups ................................................ 2888.6.2 Omnigraffle ........................................................... 2888.6.3 Axure .................................................................... 289

8.7 Grafik-undZeichenprogramme ........................................ 2908.7.1 Adobe Photoshop ................................................. 2908.7.2 Adobe Illustrator ................................................... 2938.7.3 Bohemian Sketch 3 ............................................... 2958.7.4 Mirrorprogramme ................................................. 298

8.8 ToolsfürdasRapidPrototyping ........................................ 2988.8.1 POP – Prototyping on Paper .................................. 2998.8.2 Pixate .................................................................... 2998.8.3 Quartz Composer und Origami .............................. 3008.8.4 Framer.js ............................................................... 3018.8.5 Flinto for Mac ....................................................... 3028.8.6 Principle ................................................................ 3038.8.7 Design- und Entwicklungsperspektive ................... 304

9

Inhalt

9 Inspiration und Trends

9.1 InspirationimNetz ........................................................... 3059.1.1 Inspiration für Designs .......................................... 3069.1.2 Inspiration für die Ideenfindung ............................ 311

9.2 DasMoodboard ................................................................ 3139.2.1 Quellen ................................................................. 3149.2.2 Regeln für gute Moodboards ................................. 3159.2.3 Moodboard-Varianten ........................................... 316

9.3 AktuelleTrends,Stilrichtungen ........................................ 3189.3.1 Flat Design – der Minimalist .................................. 3189.3.2 Skeuomorphismus – der Realist ............................. 3199.3.3 Fashioned – der Modische ..................................... 3209.3.4 Mixed – der Klare .................................................. 321

9.4 UmsetzungundDesign ................................................... 3229.4.1 Die richtige Auflösung und Größe ......................... 3229.4.2 Bilder .................................................................... 3269.4.3 Dokumentgröße .................................................... 3269.4.4 Hilfreiche Tipps und Techniken .............................. 327

10 Typografie für kleine Bildschirme

10.1 WasistTypografie? ........................................................... 340

10.2 GrundsätzlicheszurSchrift ............................................... 34110.2.1 Typografie in der Anwendung ................................ 34110.2.2 Wesentliche Merkmale einer Schrift ...................... 34110.2.3 Wesentliche Merkmale eines Textlayouts ............... 343

10.3 KategorienvonSchriften ................................................. 34410.3.1 Serifenschrift ......................................................... 34410.3.2 Serifenlose Schrift ................................................. 34510.3.3 Dekorative Schriften, Handschriften etc. ................ 34610.3.4 Schriftart, Schriftfamilie, Schriftschnitte und Schriftauszeichnung ............................................... 347

10.4 Systemschriften ................................................................ 34810.4.1 Ein Beispiel: Die San-Francisco-Schriftfamilie ........ 348

10.5 RegelnfürguteTypografieimApp-Design ....................... 35110.5.1 Wo findet man Schriften fürs App-Design? ............ 35210.5.2 Was Sie bei der Schriftwahl beachten müssen ....... 35210.5.3 Lesbarkeit hat oberste Priorität .............................. 35410.5.4 Das Look & Feel der Schrift .................................. 359

10

Inhalt

10.5.5 Schriftmischung und Auszeichnungen ................... 36010.5.6 Wie viel Text ist wirklich nötig? ............................. 36310.5.7 Typografie auf Smartphones, Tablets und Wearables ............................................................. 36310.5.8 Grundlinienraster (Baseline Grids) ......................... 36510.5.9 Textelemente frühzeitig kategorisieren ................... 366

10.6 EmpfehlenswerteSchriftenfürApps ................................ 37110.6.1 »Open Sans« ......................................................... 37110.6.2 »Ubuntu« .............................................................. 37110.6.3 »Droid Sans« ......................................................... 37210.6.4 »Source Sans Pro« ................................................. 37310.6.5 »Segoe UI« ............................................................ 37310.6.6 Sonstige Schriften ................................................. 374

11 Farbe

11.1 GrundsätzlicheszurFarbe ................................................. 37511.1.1 Farbton, Sättigung, Helligkeit und Transparenz ...... 37611.1.2 Der Farbkreis und die Primär-, Sekundär- und Tertiärfarben ................................................... 378

11.2 Farben,StimmungenundAssoziationen ........................... 37911.2.1 Wie Farben wirken ................................................ 38011.2.2 Farbwirkung und Farbassoziationen ....................... 381

11.3 Farbschemata .................................................................... 38911.3.1 Monochrome Farbschemata .................................. 39011.3.2 Analoge Farbschemata .......................................... 39211.3.3 Triadisches Farbschemata ..................................... 39311.3.4 Farbkontraste ........................................................ 393

11.4 FarbenimApp-Design ...................................................... 39711.4.1 Die 60-10-30-Regel ............................................... 39811.4.2 Fragen, die Sie sich bei der Farbgestaltung stellen sollten ........................................................ 39811.4.3 Farben und das Corporate Design ......................... 39911.4.4 Mit Farben strukturieren und leiten ....................... 400

11.5 DieFarbdarstellungaufSmartphone,Tablet&Co. ........... 40211.5.1 Die verschiedene Display-Typen ............................ 40211.5.2 Farben vorab mit der Mirrorfunktion testen ........... 403

11

Inhalt

11.6 Tools,diebeiderFarbwahlhelfen .................................... 40311.6.1 Adobe Color CC (ehemals Adobe Kuler) ................ 40411.6.2 ColoRotate ............................................................ 40511.6.3 Copaso ................................................................. 406

12 Icons, Grafiken und Bilder

12.1 Icons ................................................................................. 40812.1.1 Von guten und schlechten Icons ............................ 40912.1.2 Arten von Icons .................................................... 41112.1.3 Tipps für gelungenes Icon-Design in Apps ............. 41312.1.4 Vorgefertigte Icon-Sets .......................................... 418

12.2 Grafiken ........................................................................... 41812.2.1 Die Grafik als funktionelle Darstellung ................... 41912.2.2 Die Grafik als Maskottchen ................................... 42012.2.3 Woher Grafiken beziehen? .................................... 421

12.3 Fotografien ...................................................................... 42412.3.1 Die Verwendung von Fotografien in Apps .............. 42412.3.2 Dynamische Bilder ................................................ 42512.3.3 Produktfotografien ................................................ 42612.3.4 Woher Fotografien beziehen? ................................ 428

12.4 DerExport ........................................................................ 42912.4.1 Styleguide (Gestaltungsrichtlinien) ......................... 42912.4.2 Assets erstellen ..................................................... 43012.4.3 Der Export unter Sketch ....................................... 43512.4.4 Der Export unter Photoshop ................................ 43712.4.5 Was geht nach dem Export an den Entwickler? ...... 438

12.5 ToolsfürdenExportundStyleguides ............................... 44112.5.1 Plugins für Sketch über die »Sketch Toolbox« installieren ............................................................ 44112.5.2 Plugins für Photoshop ........................................... 442

13 Apps erfolgreich in App Stores präsentieren

13.1 DieRollederAppStores .................................................. 44513.1.1 Die Marktsituation ............................................... 44513.1.2 Umsätze in den App Stores ................................... 44713.1.3 Eine App für alle Plattformen? ............................... 448

13.2 WieSieIhreAppimAppStorerichtiginSzenesetzen .... 44913.2.1 ASO: App Store Optimization ............................... 44913.2.2 Präsentation der App über Screenshots ................. 451

12

Inhalt

13.2.3 Der Beschreibungstext und Keywords .................... 45513.2.4 Bewertungen ....................................................... 45613.2.5 Ihre App auf anderen Seiten präsentieren .............. 45713.2.6 Preview-Videos .................................................... 460

13.3 WarumdasApp-Iconsowichtigist ................................. 46113.3.1 Regeln für gut gestaltete App-Icons ....................... 46213.3.2 Der Name Ihrer App ............................................. 464

13.4 KostenloseoderkostenpflichtigeApp? ............................ 46513.4.1 Kostenpflichtige Apps ............................................ 46613.4.2 Apps mit In-App-Käufen ....................................... 46613.4.3 Apps mit Paywalls ................................................. 46713.4.4 Freemium-Apps mit Werbung ............................... 468

13.5 DieAppisthochgeladen–unddann? .............................. 47013.5.1 Die App stetig verbessern ...................................... 47013.5.2 Optimierungstools für In-App-Nutzungsanalysen ... 471

13.6 Tipps,umimAppleAppStoreoderimGooglePlayStoregefeaturtzuwerden .......................................................... 47313.6.1 Im Apple App Store gefeaturt werden ................... 47313.6.2 Im Google Play Store gefeaturt werden ................. 474

13.7 Schönwar’s ...................................................................... 475

Index .......................................................................................... 477

477

IndexIndex

Index@2 3233D Touch 31, 1089-Patch-Grafik 42260-10-30-Regel 39880-zu-20-Regel 137

A

AARRR-Modell 470Abgerundete Ecken 329Accessoires 120Adaptionsrate 32Additional Model 101Additive Farbmischung 376Adobe Color CC 404Aktionen 204Always-on 18AMOLED 403Android 17, 29

App-Bar 248Bottom Sheet 251Buttons 251Cards 252Chips 253Design 78Dialoge 254Dividers 256Grid Lists 257HTC Dream 18Indikatoren 262Layoutprinzip 246List-Controls 258Lists 258Menü 260Notifications 186Picker 261Seitennavigation 250Selection Controls 263Sliders 264Snackbar 265Systembar 248Tab 265Text Fields 266Toolbar 249Update-Politik 79Widgets 186

Android Developers Blog 310Android-Smartwatch 122Android Wear 122Animation

Dauer 172Easing 172Farbveränderung 173Timing 171

Animationen 170Ansichtswechsel 203Anti-Aliasing 294AOS App Store OptimizationAPI 36APM 471Apostroph 351App

BMW Individual 7 Series AR 85CalenGoo 24Duolingo 420Feedly 26Fontli 347für wen? 71iBooks 91IFTTT 144Instant-App 84Monument Valley 56Namewhale 361Nike+ 159Noom Coach 92TimeFish 397Tinder 43Toilet Finder 21Typography Insight 342verbessern 470WhatTheFont 348Wunderlist 24YO 53Zombies, run! 159

App-Drawer 30App-Icon 413, 439

Bedeutung 449, 461Gestaltungsregeln 462Grid 464Größe (Android) 439Größe (iOS) 439Inspiration 462testen 463

App-Idee 45App-Kategorien 55App-Kombinationsmethode 50Apple

iPad 17

iPhone 15Pencil 17

Apple App Store 446Apple Watch 18, 122

Komponenten 238UI-Elemente 242

Appmethod 37App-Modell

Freemium 468In-App-Käufe 466kostenpflichtig 466mit Paywall 467

App-Name 464Hilfe Namensfindung 465international 464Tipps 465

App-Präsentation 445AOS 449App-Name 464Beschreibungstext 455Bewertung 456Keywords 455Landing Page 457Marktsituation 445, 449Off-Page-Faktoren 450On-Page-Faktoren 450Pressemitteilung 459Preview-Video 460Screenshots 451Tipps 453Tonalität 455Werbung schalten 460

App Ranking 456App Stores 54

Apple App Store 446App präsentieren 445, 449Google Play Store 447Kategorien 54Marktsituation 445Policies 461Umsätze 447

App Store Optimization 449Assets 23

Android 436Bounding Box 432Einstellung Photoshop 430Einstellung Sketch 430erstellen 430exportieren 323iOS 436

Asset Sheet 434Auflösung 322

478

Index

Augmented Reality 85Axure 289

B

B2B-App 273B2C-App 273Balsamiq Mockups 288BarMax 449Barrierefreiheit 150

Farbinventierung 151für Hörgeschädigte 152Lupenfunktion 152Rot-Grün-Sehschwäche 150Sprachausgabe 151

Baseline 342Bedienung

Dateneingabe 174Daumen 114einhändig (Smartphone) 112einhändig (Tablet) 118Fingereingabe 103Finger ist Maus 107Fitts Gesetz 106freihändig 118Größe Bedienelemente 104Hotspots 110One-Handed-Mode 114Phablet 112Pixelbreite von Fingern 105Smartphone 112Tablet 117Touchbedienung 106Wearables 121Zeigefinger und Daumen 104zweihändig 117

Behance 307Bentobox 209Benutzererlebnis 142Beschreibungstext 455Best Practices 140BetaList 312Betriebssystem 195

Cognitive Load 90Erwartungshaltung 195geschlossen 90welches? 448

Bewertungder App 456gefälschte 457

BildbenennungAndroid 96iOS 96

Bilder, dynamisch 425Bildschirm 94

Ausrichtung 98Display-Typen 402Landscape-Modus 98Portrait-Modus 98Touchscreen 94

BildschirmausrichtungAdditional Model 101Chameleon Model 103Complementary Model 102Landscape und Portrait? 100Orientation Design Models 99Responsive Model 101

BildschirmgrößenAndroid 94Wearable 97

Bjango Actions 438Bleikegel 345BMW Individual 7 Series AR 85Body Text 355Bohemian Sketch 295BOT 167Bounding Box 432

erstellen 433Brainstorming 46, 48Brand-Evangelist 141Breakdown 172Break-even-Point 60Bunte Farben 376Burger-Icon 177Button

Floating Action 247

C

C 36Chameleon Model 103Chrome 217Clear 158, 173Clippy 420Coca Controls 268Cognitive Load 90, 197Cognitive Walktrough 70Collage 316ColoRotate 405Companion 29

Companion-App 181Complementary Model 102Controls 174, 215

positionieren 175Conversion Rate 141Copaso 406Corporate Design

Farben 399Schrift 352

Creative Commons 428CSS3 37Custom-Components 267Custom-Controls 267

D

Dark-and-Light-Modus 357Dashboard 209Dateneingabe 174Daumen 114

Radius 114Daumenbreite 105Dekorative Schriften 346Delightful Details 141Design

Ästhetik 145aufgabenbasiert 137Einfallsreichtum 145Farbe 375Fotografien 424funktionale Schönheit 143für viele Bildschirmgrößen 94Grafiken 418Icon 408Inspiration 305Moodboard 313Persönlichkeit 145Prototyp 271Technik 40Trends 318Typografie 339Umsetzbarkeit 35Umsetzung 322Usability 125User Experience 132vs. Entwicklung 304

Design Patterns 201Designprozess, interativer 272Design Thinking 40, 143Desktop-PC 19

479

Index

Diagramm 269Dickte 342Display-Typen 402Dithering 294Dokument anlegen 323Dokumentgröße 326Dotmocracy 72dp 325, 327DPI 94Draft 279Dribbble 306Droid Sans 372Duktus 342Duolingo 420Dynamische Bilder 425Dynamischer Inhalt 282

E

Early Adopter 145Easing 172Elevator Pitch 52Emotionalität 142Empathisierung 156Entwicklungsstrategie 34

Hybrid-App 39Native App 36Umsetzbarkeit Design 35Web-App 37

Entwurfsskizze 272, 274Erfolgsmeldung 192Erlebnis 157Erreichbarkeit, ständige 18Erwartungshaltung 195Event 173Evernote 314Experiment

Ohne Computer 86Export 429

Android-Assets 436Assets 430Entwickler 438iOS-Assets 436mit Photoshop 437mit Sketch 435Styleguide 429

F

FacebookTipping-Point 57

FAQ 138Farbe 375

Assoziationen 381auf Bildschirm 402Blau 385bunt 376Farbton 376Gelb 384Gold 383Grün 387Helligkeit 377im App-Design 397kalt 381Kontrast 393Orange 383Orientierung 401primär 379Rosa 382Rot 381Sättigung 376Schwarz 388sekundär 379teritär 379Transparenz 378unbunt 377Violett 386warm 381Weiß 389Wirkung 381Zielgruppe 398zum Hervorheben 401zum Strukturieren 400

Farbe-an-sich-Kontrast 395Farbe kombinieren 398

60-10-30-Regel 398Farbharmonie 396Farbkontrast 393

Farbe-an-sich 395Hell-Dunkel 394Kalt-Warm 395komplementär 393

Farbkreis 378Farbsättigung 376Farbschema 389

analoges 392monochromes 390triadisches 393

Farbton 376Farbveränderung 173Farbwahl

Hilfe 403Farbwirkung 380Faux Bold 362Featuring 45Feedback 178

Formen 179initiiert 180systemseitig 181visuell 179zu viel 182

Fehlermeldung 191Festnetz 18Filled Icon 412Fitts Gesetz 106Flat Design 318Flinto for Mac 302Flowcharts 277Flurry 471Fontli 347Force Touch 108Formfaktor 26Fotografie 424

dynamisch 425in Apps 424kaufen 428kostenlos 428von Produkten 426

Framer.js 301Funktionale Schönheit 143

G

Galaxy Gear 18Gamification 158Gefeaturt werden

Apple App Store 473Google Play Store 474

Gender-Marketing 382Gerätevielfalt 33Geschlossenes System 200Gesten 107, 108

zukünftige Entwicklung 108Github 87Glow-Effekt 328Google Fonts Pairing Tool 362Google I/O 305

480

Index

Google Play Store 447Google Universal Analytics 472Grafik

9-Patch 422funktionale 419kaufen 421Maskottchen 420

Grafikprogramm 290Illustrator 293Photoshop 290

Graphical User Interface 106Grid 464Größe 322Größe Interaktionsfläche 105Grundlinienraster 365GUI 106Guideline

Android 104, 245iOS 104, 218

GUI Graphical User Interface

H

Hauptscreen skizzieren 276Hell-Dunkel-Kontrast 394Helligkeit 377Home-Button 115Homekit 123Hotspots 110

Navigationsbar 110sekundäre Navigation 110

HTML5 37Hub & Spoke 206Human Interface Guidelines 104Hybrid-App 39

Vor- und Nachteile 39, 40

I

IconArten 411der App 413filled 412Set kaufen 418stroked 411testen 414, 417Tipps 413

Verwendung 410wozu? 409

iconmonstr 418Icons 408Icon-Set 418Idee

bewerten 72konkretisieren 51Kontext 46Probleme erkennen 47

Ideen bewerten 72Dotmocracy 72nach Kritierien 72Nutzwertanalyse 73SWOT-Analyse 74

Ideenfindung 48andere Apps 53Elevator Pitch 52Inspiration 311Reflexion 72Welche Plattform? 75

Ideenkreis 52IFTTT 144Illustrator 293In-App-Käufe 466In-App-Nutzungsanalyse 471In-App-Purchase 58Inboard 315Indexseite 205Individueller Control 270Infomeldung 191Informationsarchitektur 133, 205Inspiration

App-Icon 462Button 223holen 305Ideenfindung 311im Netz 305

Instant-App 84Interaktion 157Interaktionsdesign 146

10 Regeln 146Interaktionsmodell 98Interaktiver Prototyp 283

High Fidelity 285Low Fidelity 284

Internet der Dinge 28, 123Interpolation 324iOS 31, 75, 95

Acitivity Indicator 224Action Sheet 234

Alert 233Design 76Label 222Modal View 235Navigationsbar 217Notifications 183Page-Control 227Picker 231Pop-over 231Progress-View 226Refresh Controls 225Segmented Control 228Slider 230Stepper 229Switch 229System-Button 222Tabbar 220Table-View 236Textfeld 223Text-View 237Toolbar 219Update-Politik 77Widgets 183

iOS Fonts 348Iteration 272

J

Jailbreak 39Jakob Nielsen 146JavaScript 37Joy of Use 132, 142

K

Kalt-Warm-Kontrast 395Kantar Worldpanel 446Keep it simple 88Keep it simple, stupid 138Kerning 351Keywords 455KISS Keep it simple, stupidKISS-Prinzip 138Klickdemo 277Komplementärkontrast 393Konventionen 195

Aktionen 204

481

Index

Ansichtswechsel 203Gestaltung 196Suchfunktion 204Tab-Navigation 202Zurück-Navigation 201

Konzeption 45Moodboard 313

Kreativitätstechnik 48App-Kombinationsmethode 50Brainstorming 48Umkehrmethode 49

Kundenloyale 141

L

Ladebalken 193Landing-Page 457Laufweite 356Launcher 29Launch-Image 439

Android 439iOS 440

Lean-Back 117Lean-Forward 117Lean Start-up 71Lesbarkeit 354Linux-Kernel 17Little Big Details 309Long Shadow erstellen 329Look & Feel 132, 142Low Fidelity 284

M

Makrotypografie 340Markt

vom Angebot lernen 60Marktanalyse 54Marktsituation 445

Kantar Worldpanel 446Marktstrategie

AARRR-Modell 470App-Icon 461App-Name 464App-Präsentation 449Bezahlmodell 465

gefeaturt werden 473Nutzungsanalyse 471

Mentales Model 89Merkmale guter Apps 21

Aussehen 24Bedienbarkeit 24drängt sich nicht auf 34Effizienz 22lösen Probleme 60Unterhaltsungswert 92Zeitersparnis 22Zweckerfüllung 21

Mikrotypografie 340Mirrorfunktion 403Mirrorprogramm 298

Adobe Preview 298Skala Preview 298Sketch Preview 298

Mitbewerberanalyse 70Mixed-Stil 321Mobile Computing 28Mock-up 272, 281Mock-Up-Tools 287Monument Valley 56Moodboard 313

Collage 316Quellen 314Regeln 315Varianten 316

Moto 360 18Multitouchdisplay 108

N

Namewhale 361Native App 36

Nachteile 37Vorteile 36

Navigation 205Bentobox 209Burger-Icon 177Dashboard 209hierarchisch 205Hub & Spoke 206Konzepte kombinieren 212mit Filtern 210Nested Doll 208Tabbed View 209Wearables 212

Navigationsbar 110Nebenscreens skizzieren 276Nested Doll 208Nike+ 159Notifications 20

Android 186Empfehlungen 187iOS 183

Nucleo 418Nutzerzentriertes Design 155Nutzungskontext 90Nutzungssituation 92

aus Langeweile 92zur Aufgabenerfüllung 93zur Informationssuche 93

Nutzungsverhalten 83beruflicher Alltag 86Daten 84mentales Modell 89Unternehmen 85Use Case beachten 88

Nutzwertanalyse 73

O

Oberlänge 341Offenes System 200Off-Page-Faktor 450Omnigraffle 288On-Boarding 161

animiert 269funktionorientiertes 164Methoden kombinieren 166per Video 166progressives 164überspringen 166vorteilorientiertes 162

One-Handed-Mode 114On-Page-Faktor 450Open Sans 371Open Source 39Orientation Design Models 99Origami 300

482

Index

P

Paretoprinzip 137Paywall 467Personas 68Persönlichkeit 24Phablet 26

Bedienung 112Photoshop 290, 442

Artboards 292Assets 291Cloud-Bibliotheken 291Ebenenstile 292Export 325, 437Formebene 431Ink/Specking 442LayerCraft 443Random User 443Smart Objekt 431

Pirate Metrics 470Pixate 299Pixel 293Pixelbreite von Fingern 105Pop-over 231Pop-ups 189Positionierung von Controls 175PPI 94Pressemitteilung 459Preview-Video 460

erstellen 461Primäre Nutzungserlebnis 135Primärfarbe 379Principle 303Probleme lösen 60Product Hunt 311Produktfoto 426Prototyp 271

Flowcharts 277interaktiver 283Mock-up 281Storyboard 275Wireframe 277

Pttrns 308Punze 342Push-Notification 187

Q

Quartz Composer 300

R

Rahmenbedingungen 19, 83Rapid Prototyping 298Registrierung 166

Abbruchrate 169in der App 168per Mail 167per Scoial Connect 167

Responsive Model 101Retina-Display 403RGB 376, 378Roboto 348Rot-Grün-Sehschwäche 150RSS-Feed 26

S

San Francisco 348Satzschrift 347Schlagschatten 327Schrift

Ausrichtung 343Empfehlungen 371finden 352Kategorien 344Kerning 351Lizenzrecht beachten 354Look & Feel 359Merkmale 341mischen 360Tracking 350

Schriftart 347Schriftcharakter 359, 363Schriftfarbe 356Schriftgröße 343, 356Schriftmischung 360Schriftschnitt 348Schriftwahl 352Schutzzone einrichten 119Segoe UI 373Sekundäre Navigation 110Sekundärfarbe 379Serifenlose Schrift 345Serifenschrift 344Sketch

Artboard 296Content Generator 442erweitern 296

Export 325, 435Globale Styles 296Marketch 441Style Inventory 441Symbole 295Toolbox 441

Skeuomorphismus 196, 319Schaltfläche erstellen 334

Slab Serif 346Smartphone 26, 84

Accessoires 24Bedienung 112Companion 29

Smashing Magazine 310Social Connect 134Social Media 458Source Sans Pro 373Spinner 193Standard-Controls

Android 245iOS 217

Statischer Inhalt 282Statistik

Anzahl Android-Apps 447Anzahl Nutzer 84App-Anzahl auf Smartphone 21App-Downloads weltweit 447App-Nutzung 25Break-even-Point 60Deinstallationsrate 25iOS Downloadzahlen 446

Stockfotografie 424, 428Stolperfallen 192Storyboard 275Stroked Icon 411Styleguide 180, 400, 429Stylus 17Suchfunktion 204Swipe to Choose 268SWOT-Analyse 74Synergieeffekt 49Systemschrift 348

T

Tabbed View 209Tablet 27, 84

Bedienung 117Schutzzone 119

483

Index

Tab-Navigation 202Tertiärfarbe 379Text

funktional 358hierarchisieren 357kategorisieren 366

Textkörper 355Textlayout

Merkmale 343Text Truncation 237The Noun Project 418TimeFish 397Timing 171Tinder 43Tipping-Point 57Touchbedienung

Qualitätsmerkmale 107Tracking 350Transitional Interface 170Transitions 170Transparenz 378Trends 318Trial and Error 130Typografie 339

im App-Design 351lernen 342Lesbarkeit 354

U

Ubuntu 371UI-Prinzipien 195UI User InterfaceUmkehrmethode 49Umsetzbarkeit Design 35UMTS-Lizenz 19Unbunte Farbe 377Unterlänge 342Usability 125

Norm EN ISO 9241 127Vergleich To-do-Apps 127vs. Aussehen 131vs. Gamification 160

Use Case 88User-Centered Design 146, 155User Experience 125, 132

10 Tipps 135Conversion Rate 141Emotionalität 142

Joy of Use 142lohnt sich! 140Look & Feel 142Nutzungsfreude 143primäre Nutzungserlebnis 135

User Flow 279User Interface 195User Journey 156, 272UX User Experience

V

Vektor 293Versalhöhe 341View 215Visuelles Feedback 128Visuelles Rauschen 410Vor- und Nachbreite 342

W

Warnmeldung 191Wearable 18, 28, 84

Google Glass 18Smartwatch 18

Web-App 37Nachteile 39Vorteile 39

Weißraum 409Welche Plattform? 75

Android 78iOS 75

Welt in der Hosentasche 20Werbung 460WhatTheFont 348Wheel of Death 192Widgets

Android 186iOS 183

Windows Phone 32Marktanteil 32

Wireframe 272, 277Einsatz 279

Wireframe-Tools 287WLAN Triangulation 27Wording 163Worldwide Developer Conference

305

Wortabstände 343Wunderlist 128WWDC Worldwide Developer

Conference

X

x-height 342xxxHDPI 324

Y

YO 52

Z

Zeichenbreite 343Zeigefingerbreite 105Zeilenabstand 358Zeilenbreite 343Zeilenlänge 358Zielgruppe 66

Bedarf prüfen 67definieren 66Personas 68

Zombies, run! 159Zurück-Navigation 201

Wissen, wie’s geht.

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Sie durfen sie gerne empfehlen und weitergeben, allerdings nur vollstandig mit allen Seiten. Bitte beachten Sie, dass der Funktionsumfang dieser Leseprobe sowie ihre Darstel-lung von der E-Book-Fassung des vorgestellten Buches abweichen können. Diese Leseprobe ist in all ihren Teilen urheberrechtlich geschutzt. Alle Nut-zungs- und Verwertungsrechte liegen beim Autor und beim Verlag.

Teilen Sie Ihre Leseerfahrung mit uns!

Jan Semler

App-Design – Alles zu Gestaltung, Usability und User Experience484 Seiten, gebunden, in Farbe, Mai 2016 39,90 Euro, ISBN 978-3-8362-3453-5

www.rheinwerk-verlag.de/3737

Jan Semler ist UI- und UX-Designer aus Karlsruhe und spezialisiert auf das User Interface Design von Mobile- und Web-Apps. Als Geschäftsführer von »Notion Lab« tüftelt er zusammen mit seinem Team an überzeugenden interaktiven Erlebnissen für iOS- sowie Android-Apps und das Web.

Know-how für Kreative.

https://www.rheinwerk-verlag.de/app-design_3737/?GPP=lpn

https://www.facebook.com/rheinwerkverlag

https://plus.google.com/118435207805510651040

http://twitter.com/rheinwerkverlag

App-Design – Alles zu Gestaltung, Usability und …...Title App-Design – Alles zu Gestaltung,...

Documents

Transcript of App-Design – Alles zu Gestaltung, Usability und …...Title App-Design – Alles zu Gestaltung,...