Know-how für Kreative.

Leseprobe

Alle Plattformen für mobile Endgeräte sind zwar recht ähnlich 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 für die jeweiligen Plattformen entwickelt werden.

Kapitel 6: »UI-Prinzipien und Konventionen«

Inhaltsverzeichnis

Index

Der Autor

Leseprobe weiterempfehlen

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

www.rheinwerk-verlag.de/3737 Kapitel 6 UI-Prinzipien6.1 Jede Plattform und Konventionen ist anders

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.

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

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

Plattformen. In dem Fall, dass Sie für beide Plattformen eine App ent- zwar in . In Form des viel gefeierten -Designs wickeln möchten, sollten Sie die Eigenheiten und die Erwartungshal- hat sich dieser auch auf der Desktop-Plattform etabliert. 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: EE Gestaltung EE Cognitve Load EE Effizienz und Integration EE Individualisierbarkeit EE 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 G Abbildung 6.1 G Abbildung 6.2 Plattformen. In den letzten Jahren bieten alle Plattformen im Zuge des Links ist iOS 9 zu sehen, rechts Android 6.0 Marshmallow Windows war der Vorreiter in Sa- Flat Designs eine ähnliche gestalterische Basis. chen Flat-Design. Auch Windows Phone 10 ist schön flach und im Mit iOS 7 wurde eine große Stiländerung auf der iOS-Plattform um- Cognitive Load | Der Cognitive Load ist die Summe von Elementen, die Metro-Style. Skeuomorphismus gesetzt, die in der Designer-Szene sehr umstritten ist. Vom realistischen der Nutzer kennen muss, um ein Gerät spontan und intuitiv nutzen zu Skeuomorphismus kommt aus bzw. skeuomorphischen Gestaltungsprinzip wurde abgelassen, bei drei- können. Es ist einer der Schlüsselaspekte der User Experience für wenig dem Altgriechischen und bedeu- dimensionalen Elementen wurde ab Version iOS 7 nun komplett auf technisch versierte Nutzer. Er dient als Benchmark der User Experience tet in etwa Behälter, Werkzeug Studie zum Cognitive Load Ornamentik verzichtet (Abbildung 6.1). Das Design ist minimalistischer für Plattformen und Applikationen. Eine von Pfeiffer Consulting 2013 oder Gestalt. Skeuomorphismus Die Ergebnisse der Studie ist eine Design-Stilrichtung, bei und orientiert sich an den Grundsätzen des Flat Designs. Dies gilt auch durchgeführte Studie ergab die Ergebnisse aus Tabelle 6.1 zum Cogniti- von Pfeiffer Consulting kön- der Objekte in ihrer Gestaltung für das aktuelle iOS 9. ve Load der jeweiligen Plattformen. nen Sie unter www.pfeiffer- die Form eines vertrauten Ob- Es hat einen Grund, warum Apple die UI-Gestaltung nur selten stark report.com/v2/wp-content/ jekts nachahmen. uploads/2013/09/iOS7-User- verändert – große Veränderungen irritieren den Anwender und fordern iOS 7 Android (Samsung) von ihm Zeit ein, sich an die neue Gestaltung zu gewöhnen. Besonders Experience-Shootout.pdf – al- Cognitive Load Index: Cognitive Load Index: Cognitive Load Index: lerdings nur auf Englisch – im wenn man bereits seit Längerem iOS-Nutzer ist, wirkt ein neues Design 40 162 40 Detail nachlesen. Momentan zunächst sehr fremd und gewöhnungsbedürftig. gibt es leider keinen Report, In Android – aktuell mit Marshmallow 6.0 – haben die Grundzüge G Tabelle 6.1 der die aktuellen Versionen der des minimalistischen Flat Designs bereits etwas früher Einzug gehalten. Cognitive Load (je niedriger die Indexziffer, desto besser; Pfeiffer Report 2013) Betriebssysteme unter die Lupe Dabei geht Android einen Schritt weiter und erlaubt beim sogenannten nimmt. Jedoch haben sich die die Nutzung von Ebenen und daraus resultierenden Windows Phone und iOS sind hieraus als Testsieger hervorgegangen. Plattformen erweitert, und die Ergebnisse spiegeln sich auch Schlagschatten. Für mich ist das Material-Design-Prinzip revolutionär, Beide Geräte lassen sich sehr intuitiv bedienen. noch heute in den Betriebssys- da es sich an der physischen Welt orientiert, ohne skeuomorphistisch Versuchen Sie also, den Nutzer unter Android nicht noch mehr zu temen wider. zu sein. Übrigens verfolgte zuerst den Flat-Design-Ansatz und verwirren, er hat schon genug mit dem Betriebssystem zu tun. Kon-

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

zentrieren Sie sich bei Android besonders auf eine gelungene Usability Im visuellen Vergleich zwischen iOS 7 und Android wird schnell erkenn- und User Experience. Nutzen Sie beispielsweise die Vorzüge des neuen bar, warum Apple beim Cognitive Load so gut abgeschnitten hat und Material Designs, und versuchen Sie keine eigenen Komponenten zu auch Windows ein gutes Ergebnis erzielt hat. Auch wenn die Studie nutzen. Das bedeutet nicht, dass Sie diese Aspekte unter iOS etwas mittlerweile etwas betagt ist, lassen sich die Ergebnisse grundsätzlich schleifen lassen können. Im Gegenteil, die Nutzer erwarten auch hier auch auf iOS 9 und Android Marshmallow (und Windows Phone 10) eine durchdachte und logische Nutzung des Betriebssystems. ü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. G Abbildung 6.3 Views/Elemente, die ein ­iOS-7-Nutzer kennen muss 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.

iOS 7 Android (Samsung) Windows Phone 8 F Tabelle 6.2 Effizienz und Integration (je höher G Abbildung 6.4 Effizienzbewertung: Effizienzbewertung: Effizienzbewertung: die Wertung, desto besser das Views/Elemente, die ein Android-(KitKat‑)Nutzer unter Samsung kennen muss 7/10 7/10 4/10 Ergebnis; Pfeiffer Report 2013)

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- G Abbildung 6.5 Views/Elemente, die ein Windows-Phone-Nutzer kennen muss geben, individuelle Anpassungen vorzunehmen. Daran hat sich auch in Android Marshmallow, iOS 9 oder Windows Phone 10 nichts geändert.

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

Der Nutzer kann mitunter ein Hintergrundbild wählen oder Schriftgrö- Versuchen Sie, in Ihrer App derartige Stolperfallen zu vermeiden. Ge- ßen und Schriftschnitte individuell einstellen. Solche Einstellungen er- nerell sollten Sie dafür sorgen, dass das Interface bzw. dessen gelernte möglichen es dem Nutzer, sich stärker mit dem Gerät zu identifizieren. Elemente, das tun, was der User erwartet. 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. 6.1.2 UI-Prinzipien der Plattformen Jede der Plattformen wird mit Multitouch bedient, seit dem iPhone 6s/ iOS 7 Android (Samsung) Windows Phone 8 Plus und der Apple Watch haben diese Geräte zusätzlich einen druck- Tabelle 6.3 E sensitiven Bildschirm, unabhängig davon jedoch unterscheiden sich die Individualisierbarkeit (je höher die Individualisierbarkeit: Individualisierbarkeit: Individualisierbarkeit: Betriebssysteme in der eigentlichen Bedienung. Jedes der Betriebssys- Wertung, desto besser das Ergeb- 6/10 7/10 2/10 nis; Pfeiffer Report 2013) teme hat gängige Nutzungskonventionen, die ein Nutzer kennen und entsprechend in Apps anwenden muss. In diesem Punkt schneidet Android am besten ab (Tabelle 6.3). Android Wenn Sie mit den Gedanken spielen, Ihre App auf unterschiedlichen war bereits von Beginn an als ein sehr individualisierbares Betriebssys- Betriebssystemen realisieren zu wollen, gibt es UI-Prinzipien, die Sie Design Patterns tem konzipiert, der Ursprung liegt im offenen Betriebssystem. Viele bei der Entwicklung und der Umsetzung Ihrer App-Idee berücksichti- Design Patterns sind bewährte Apps bieten außerdem die Möglichkeit, tiefere Eingriffe in das System gen sollten. Sollten Sie also native Apps für die Plattformen entwickeln, Schablonen. Diese Schablonen vornehmen zu können und diese nach individuellen Wünschen anzu- kann das ein sehr umfangreiches Projekt werden, da Ihre App auf jede können App-Designer nutzen, passen. Apple hingegen setzt auf ein einheitliches und geschlossenes Plattform zugeschnitten werden muss. um wiederkehrende Probleme User-Interface-System, das nur wenig individualisierbar ist und ein ein- Obwohl die Grundidee und die Funktionalität Ihrer App sicherlich auf zu lösen. So sind einige Ab- heitliches Look & Feel der Apple-Produkte garantieren soll. allen Plattformen abbildbar sind, sollten das Interface und die Handha- läufe, wie zum Beispiel eine Registrierung, ein Stück weit Geschlossenes vs. Unter Android wird der Nutzer erwarten, dass er die App noch wei- bung der App im Idealfall auf die entsprechende Plattform zugeschnit- standardisiert und können bei offenes System ter anpassen und auf seine Bedürfnisse zuschneiden kann. Unter iOS ist ten sein. Erfüllen Sie die Erwartungshaltung Ihres Nutzers, orientieren unterschiedlichen Projekten Während Apple mit seinem diese Erwartung weniger gegeben, hier geht es restriktiver zu, und der Sie sich an den etablierten Design Patterns, und respektieren Sie die na- ­eingesetzt werden. Betriebssystem ein geschlos- Nutzer bewegt sich innerhalb strikterer Konventionen. tiven UI-Standards. Die wichtigsten stelle ich Ihnen im Folgenden vor. senes System anbietet, ist An­ droid eine quelloffene Software. User Experience Friction (UXF) | Unter dem Aspekt User Experience Zurück-Navigation | Die Zurück-Funktionalität ist eines der wichtigs- Für Nutzer ergeben sich daraus Friction (UXF) werden Stolperfallen bei der Nutzung beschrieben. Es ten Navigationselemente für den Nutzer. Mit der Zurück-Funktion fin- folgende Unterschiede: Beim Zurück unter iOS 9 Kauf eines Apple-Produkts kön- geht um solche Momente, in denen das Gerät nicht das tut, was es soll, det der Nutzer in tiefen hierarchischen Strukturen einer Anwendung nen nur Dienste und Applikati- in denen es Schwachstellen in der Bedienung hat, oder den Fall, dass stets den Weg zurück. Unter iOS 9 gibt es ein neues onen genutzt werden, die von eine wichtige Funktion sogar ganz fehlt. Unter iOS ist die Zurück-Option im oberen linken Bereich in der Na- Element, das in der Statusbar Apple angeboten werden. Als vigationsbar angesiedelt, so wie man es von Webbrowsern her kennt. angezeigt wird und das dann Hauptbezugsquelle dient dabei erscheint, wenn man von der ei- iOS 7 Android (Samsung) Windows Phone 8 Der Zurück-Button ist ein reines Navigationsbedienelement. Er wird der App Store. Anders bei An- nen App in die andere gelangt. dazu genutzt, um zur vorherigen Seite innerhalb einer App zu gelangen. So können manche Apps Ver- droid: Hier können Hersteller UXF-Faktor: 17 UXF-Faktor: 30 UXF-Faktor: 51 (HTC, Samsung etc.) die Nut- Die Option wird nicht dafür eingesetzt, um zwischen Applikationen zu linkungen ins Internet anzeigen. zeroberflächen ganz individuell G Tabelle 6.4 wechseln. Seit iOS 9 gibt es zusätzlich einen App-Switcher, der es er- Bei einem Tap auf einen solchen anpassen und damit auch die UXF-Faktor (je niedriger der Wert, desto besser das Ergebnis; Pfeiffer Report 2013) möglicht, zur vorherigen App zu springen. Dies funktioniert jedoch nur Link wechselt der Nutzer in die Wünsche verschiedener Inter- dann, wenn der Nutzer zum Beispiel einen Internetlink in einer App wie Browser-App und kann dann durch den Link in der Statusleis- essengruppen berücksichtigen. In der Usability-Studie von Pfeiffer Consulting schneidet das iOS-Be- Twitter berührt und sich daraufhin Safari öffnet. So kann der Nutzer von Auch können Apps aus unter- te wieder zurück in die vorheri- triebssystem bei diesem Punkt am besten ab (Tabelle 6.4). Bei Android Safari zurück in Twitter springen. Diese Aktionsfläche befindet sich ganz schiedlichen App Stores bezo- ge App gelangen. gen werden. sind es vorwiegend Inkonsistenzen innerhalb des Betriebssystems, die oben links, wo sich die Anzeigen für Verbindungstärke und Anbieter Verwirrung schaffen. befinden (Abbildung 6.6).

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

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.

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« a F Abbildung 6.9 Tab-Navigation unter den Betriebs- Unter Android gibt es eine Up-Funktion und eine Zurück-Funktion. Die systemen (links iOS und rechts Up-Aktion befindet sich in der App-Bar und verhält sich wie die Zurück- Android) Aktion unter iOS. Der Nutzer kann somit innerhalb einer App die Views in einer hierarchischen Struktur zurückgehen. In Android-Apps wird empfohlen, die Tab-Navigation im oberen Be- Im Gegensatz dazu verhält sich die Zurück-Option anders. Diese reich des Bildschirms zu positionieren. Dort wird Sie in der Regel von ­befindet sich bei älteren Geräten im unteren Bereich als Hardware- den Android-Nutzern erwartet. Unter Android dürfen mehre Elemen- schaltfläche bzw. bei neueren mit aktuelleren Betriebs- te angezeigt werden, und zwar in einem scrollbaren Container 1. Der systemen als Touchfläche. Dieser Zurück-Button wandert auch durch Nutzer muss nur seitwärts scrollen, wenn mehre Elemente angezeigt zuvor ­genutzte Screens zurück. So kann der Nutzer auch durch zuvor werden. angezeigte Apps navigieren. Als Beispiel: Der Nutzer öffnet in der Twitter-App eine Verlinkung in das Internet, und der Browser öffnet Wechsel zwischen Ansichten | In iOS-Apps wechselt der Anwender sich. Mit dem Zurück-Button gelangt der Nutzer wieder zurück in die zwischen Seiten verschiedener Datensätze mittels der sogenannten Twitter-App. Segmented Control. Ein Datensatz kann zum Beispiel eine längere Liste Unter Android wird ein Zurück-Button als Hardwareschaltfläche sein. Jedes Segment innerhalb des Controls steht für eine weitere Sei- G Abbildung 6.7 angeboten. Alternativ, wenn keine Hardwareschaltflächen vorhanden te mit Inhalt. So kann zum Beispiel bei einer Shopping-App über die Zurück-Option bei Android: Hier sind, kann durch eine Swipe-Geste vom unteren Bereich des Smart­ Segmented Control zwischen Beschreibung, Technische Details oder werden Apps gezeigt, die der Nut- phones diese Schaltfläche eingeblendet werden. Auch hier wird chro- Rezensionen gewechselt werden. zer geöffnet hat. 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 G Abbildung 6.10 G Abbildung 6.8 Position in der Navigationsstruktur. Der Nutzer kann durch eine Swipe- Ansicht verschiedener Daten­ansichten Back-Button bei Android Geste nach links oder rechts durch diese Views navigieren. Bei Android-Apps wird der Spinner verwendet. Er funktioniert wie Tab-Navigation | Die Tab-Navigation ist ein Navigationselement, ein Dropdown-Menü und wird vorwiegend in der Action-Bar verwen- um zwischen Hauptbereichen einer App zu wechseln. Meist wer- det, die sich unter der App-Bar bzw. der Systembar befindet. Dieses den hier kleine Icons und Labels angezeigt. Bei Apps mit bis zu ma- Element kann auch als Navigationselement genutzt werden, während ximal fünf Seiten ist eine Tab-Navigation ein probates und sinnvolles eine Tabbar genutzt wird, um innerhalb einer Inhaltsseite Ansichten zu Navigationsinstrument. wechseln.

202 203 Kapitel 6 UI-Prinzipien und Konventionen 6.2 Informationsarchitektur und Navigation

Suchfunktion | Unter iOS befindet sich die Suche vorwiegend im obe- 6.2 Informationsarchitektur und Navigation ren Bereich der App. 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- Abbildung 6.11 E gen diese Konzepte eng miteinander zusammen, und es ist logisch, dass Suchfeld der Betriebssysteme die Informationsarchitektur das Design der Navigation bestimmt. Aber In Android-Systemen gibt es verschiedene Möglichkeiten, die Suche zu die IA erstreckt sich weit über die App-Navigation hinaus. positionieren: Es ist eine Kunst, aus Informationen nutzbare, im Kontext sinnvolle In- EE als Search-Bar im oberen Bereich der App, ähnlich wie unter iOS; halte zu machen. Eine gute Informationsarchitektur leistet im Idealfall jedoch ist das Suchfeld hier häufig hinter einem Lupe-Icon versteckt, genau das. Eine Informationsarchitektur und die daraus resultierende ein Tap darauf öffnet das Suchfeld. Navigationsstruktur beschreiben nicht nur, wie welche Informationen EE als Search-Widget; dieses Widget, das eigentlich keines ist, kann strukturiert und angeordnet werden, sondern auch, wie der Nutzer da- überall in der App eingesetzt werden, weshalb es als Widget be- mit interagiert. Das Ganze wird bei mobilen Geräten noch schwieriger, zeichnet wird; vorwiegend wird es in der Action-Bar im oberen Be- da es verschiedene Plattformen sowie Geräte gibt, die alle unterschied- reich positioniert. lichen Interaktionsmodellen folgen. Meist basieren Betriebssysteme auf einer hierarchischen Struktur, der Aktionen | Aktionen werden in Regel durch Icons repräsentiert, die be- klassischen Ordnerstruktur. In mobilen Apps gibt es zwar kein Ordner- stimmte Funktionen darstellen. Sie erscheinen im Kontext einer View. system, jedoch sind auch hier die Betriebssysteme hierarchisch aufge- Es sind dynamische Aktionen, die mitunter nur in bestimmten Screens baut. Für Ihre App muss das jedoch nicht gelten. Gerade für komplexe angezeigt werden. Konkrete Beispiele wären: Speichern, Senden, Tei- Tablet-Anwendungen können andere Strukturen besser geeignet sein. len, Liken etc. Eine Universallösung gibt es allerdings nicht. Hier muss von Fall zu Fall In iOS-Apps können Aktionen an verschiedenen Stellen positioniert entschieden werden. Egal, für welches Navigationskonzept Sie sich ent- werden. So können Aktionsflächen als Leiste im unteren Bereich er- scheiden, wichtig ist, dass die richtigen Inhalte den Anwender an genau scheinen oder in der Navigationsbar in der rechten oberen Ecke. Al- der richtigen Stelle im richtigen Moment erreichen. Eine gute Informa- ternativ können diese Aktionsflächen natürlich auch im Zentrum des tionsarchitektur beachtet also auch immer den Kontext, in dem sich der Bildschirms angezeigt werden, je nach Konzeption der App. 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. Abbildung 6.12 E Action-Bars

In Android-Apps wird empfohlen, die Aktionsflächen in der Action- 6.2.1 Der Klassiker: Die hierarchische Navigation Indexseite Bar im oberen Bereich darzustellen. Sollten mehr Aktionen abgebildet Die Hierarchiestruktur, oder auch Baumstruktur genannt, ist eine der Eine Indexseite ist der Start- werden, so wird ein Action-Overflow-Icon abgebildet (drei überein- klassischsten Navigationsstrukturen. Eine hierarchische Navigation liegt punkt einer Applikation. Es ist der Homescreen bei einer App, anderstehende Punkte), hinter dem sich weitere Aktionen befinden. dann vor, wenn der Anwender durch Anklicken von Links immer weiter entsprechend der Startseite ei- Mehr zu der Action-Bar in Kapitel 7, »Controls und Views von iOS und in ein bestimmtes Thema eindringen kann. Sie basiert auf einer Haupt- ner Website. ­Android«. seite, der sogenannten Indexseite, und weiteren Unterseiten. Diesen

204 205 Kapitel 6 UI-Prinzipien und Konventionen 6.2 Informationsarchitektur und Navigation

Unterseiten können wiederum weitere Unterseiten folgen. Nutzer ken- um ein Hub sein kann. Möchte der Nutzer nun in einen anderen Spoke nen diese Struktur sehr gut, da zum Beispiel Ordnersysteme auf dem wechseln, muss er wieder zurück zum (letzten) Hub. Desktop genauso funktionieren.

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

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

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

Das klassische Beispiel einer derartigen Navigation sind die Home- G Abbildung 6.13 screens aller gängigen Apps mit einer Dashboard Funktionalität. Hier Amazon ist das Beispiel einer App mit einer hierarchischen Struktur. 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.

G Abbildung 6.14 Schema der hierarchischen Navigation

6.2.2 Jede Seite für sich: Hub & Spoke G Abbildung 6.16 Die Hub-&-Spoke-Navigation ist ebenfalls von einem hierarchischen Pro Hub-&-Spoke-Beispiel in der Charakter geprägt. Das Pattern Hub & Spoke hat eine zentrale Index- EE Multifunktionale Tools, jedes für sich mit interner Navigation und ­oogababy-App für iOS seite, aus der der Nutzer navigieren kann: den sogenannten Hub. Der Funktion. In einem Spoke kann ein Workflow abgebildet sein, den Anwender sieht also nach dem Starten der App einen Hub-Screen mit der Nutzer über mehrere Seiten durchführen muss. Der Anwender Icons. Bei einer Unterseite spricht man von einem Spoke, der wieder- kann immer wieder einfach zum Hub zurückkehren.

206 207 Kapitel 6 UI-Prinzipien und Konventionen 6.2 Informationsarchitektur und Navigation

Contra 6.2.4 Für Multitasker: Tabbed View EE Weniger geeignet für Nutzer, die multitasken und zwischen den Die Tabbed View ist wohl die bekannteste Struktur unter allen Platt- ­Spokes hin und her wechseln wollen. 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 6.2.3 Ineinander gestapelt: Nested Doll springen. In manchen Apps ist der mittlere Tab der Hauptfunktion vor- Die verschachtelte Matroschka-Puppe gibt dem klassischen Navigati- behalten, wie zum Beispiel der Auslöser-Button in Foto-Applikationen. 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.

G Abbildung 6.19

< zurück < zurück < zurück Schema einer Tabbed-View-Navigation < zurück < zurück < zurück

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.

G Abbildung 6.17 Schema einer Nested-Doll-Navigation Pro EE Ermöglicht eine schnelle Navigation und erlaubt Multitasking. Ein gutes Beispiel sind hier Apps, die eine Timeline-Funktion haben, EE Zudem kennt jeder - oder Tablet-Nutzer diese Struktur wie Facebook, Twitter oder Instagram. Hier gibt es aufgelistete Berei- und weiß auf Anhieb, wie diese zu nutzen ist. Die Struktur funktio- che, durch die der Nutzer dann auf eine Unterseiten gelangen kann. niert also auf allen Plattformen. Dort sind weitere Details über den ausgewählten Post, Tweet oder das Bild zu finden. Contra EE Bei zu komplexen Apps lässt sich diese Struktur nur schlecht reali- Pro sieren. Die Navigation funktioniert am besten bei einfachen Infor- EE Diese Navigation eignet sich gut für Apps mit einer einfachen mationsarchitekturen. Unter iOS sollte man nicht mehr als fünf Tabs ­Aufgabe. verwenden, während bei Android mehr möglich sind. Ich rate aber EE Sie kann auch verwendet werden für Unterseiten in anderen Patterns. generell unabhängig der Plattform zu nicht mehr als fünf. G Abbildung 6.20 Contra Onefootball-App mit einer 6.2.5 Mehr Übersicht: Bentobox/Dashboard Tabbed View EE Der Nutzer kann nicht einfach zwischen Seiten wechseln. Je nach

G Abbildung 6.18 Tiefe eines Nested Dolls muss er entsprechend wieder alle Stufen Die Bentobox, oder auch Dashboard genannt, bringt kleine, detaillierte Nested Dolls auf Instagram zurückgehen, um zu einer Übersicht zu gelangen. 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

208 209 Kapitel 6 UI-Prinzipien und Konventionen 6.2 Informationsarchitektur und Navigation

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. Filter Abbildung 6.21 E Schema einer Bentobox- bzw. Dashboard-Navigation F Abbildung 6.23 Schema einer Filtered View

Pro EE geeignet für Apps mit umfangreichen Inhalten wie Artikel, Bilder oder Videos EE gut geeignet für Shopsysteme auf Tablets EE Funktioniert sehr gut als Unterseite einer der anderen Navigations- strukturen.

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

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

Contra EE 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 G Abbildung 6.24 G Abbildung 6.22 nach Inhalten zu suchen bzw. sie zu finden. Hierbei wählt der Nutzer Filtered View der Airbnb-App, wobei hier mehrere Filtereinstellungen möglich sind. Suchergebnisse in der Shazam-App aus einer Reihe von Filtern den gewünschten aus und bekommt sofort Dabei werden interaktiv die Ergebnisse ausgeblendet und erst nach Setzen des als Bentobox geordnete Ergebnisse angezeigt. Filters angezeigt. Es ist eine sehr schöne und interaktive Variante der Filtered View.

210 211 Kapitel 6 UI-Prinzipien und Konventionen 6.2 Informationsarchitektur und Navigation

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.

G Abbildung 6.26 Pro Facebook-App mit einer Tabbed View EE 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. G Abbildung 6.25 Lifesum-App auf dem Smartphone Contra (oben) und die Apple-Watch-App EE Weniger geeignet für kleinere Applikationen, die keinen großen (unten) Funktionsumfang besitzen.

6.2.7 Der Kombinator: Navigationskonzepte ­miteinander ­kombinieren

Wie Sie vielleicht schon erkannt haben, können die verschiedenen Na- G Abbildung 6.27 vigationsstrukturen miteinander kombiniert werden. Versuchen Sie, Facebook-App mit einer Nested-Doll-Struktur maximal zwei Navigationsstrukturen zu nutzen. Kombinieren Sie zwei Navigationsstrukturen, sollten Sie mit einer Hauptnavigationsstruktur Pro arbeiten und die andere Struktur nur untergeordnet verwenden. EE Eine Kombination verschiedener Navigationskonzepte bietet sich bei In der Facebook-App finden Sie zum Beispiel eine Kombination von komplexen Applikationen an, wenn verschiedene Werkzeuge und In- Navigationsstrukturen. Elemente aus der Timeline verhalten sich nach halte miteinander kombiniert werden müssen. Regeln der Nested-Doll-Navigation, die Hauptnavigation der App folgt allerdings der Tabbed View. In der Tabbar werden alle Hauptseiten der Contra Applikation angezeigt, der Nutzer kann hier zwischen den einzelnen EE Navigationskombinationen sollten nicht erstellt werden, um Proble- Bereichen hin und her wechseln. me im Konzept oder in der Informationsarchitektur zu lösen.

212 213 Kapitel 6 UI-Prinzipien und Konventionen

CHECKLISTE: KONVENTIONEN BEACHTEN

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

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

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

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

214 Inhalt

Inhalt

Vorwort ...... 13

1 Der Smartphone- und Tablet-Boom

1.1 iPhone und iPad als Wegbereiter ...... 15 1.1.1 Das iPhone schreibt Geschichte ...... 16 1.1.2 Die Konkurrenz schläft nicht: Android ...... 17 1.2 Immer dabei und always on ...... 18 1.2.1 Ständig erreichbar ...... 18 1.2.2 Der besondere Kontext ...... 19 1.3 Was macht eine gute App aus? ...... 21 1.3.1 Eine gute App erfüllt einen Zweck ...... 21 1.3.2 Eine gute App ist schnell und spart Zeit ...... 22 1.3.3 Eine gute App sieht gut aus und fühlt sich gut an .... 24 1.4 Tablets, Smartphones und Wearables ...... 26 1.4.1 Das Smartphone und Phablet ...... 26 1.4.2 Das Tablet ...... 27 1.4.3 Wearables ...... 28 1.4.4 Die Betriebssysteme ...... 29 1.5 Die richtige Entwicklungs­strategie für die App ...... 34 1.5.1 Umsetzbarkeit von Design ...... 35 1.5.2 Was ist eine native App? ...... 36 1.5.3 Was ist eine Web-App ...... 37 1.5.4 Was ist eine Hybrid-App? ...... 39 1.6 Design und Technik ...... 40 1.6.1 Designer ...... 40 1.6.2 Entwickler ...... 41 1.6.3 Das Beste aus beiden Welten ...... 42

2 Konzeption und Ideenfindung

2.1 Die App-Idee ...... 45 2.1.1 Am Anfang steht die Idee ...... 45 2.1.2 Ideen brauchen Kontext und fundierte Kenntnisse . 46 2.1.3 Hilfestellung bei der Ideenfindung: ­ Kreativitätstechniken ...... 48

3 Inhalt Inhalt

2.1.4 Ideen konkretisieren ...... 51 3.3 Kleine Bildschirme, aber großes Design ...... 94 2.1.5 Von erfolgreichen Apps lernen ...... 53 3.3.1 Der Touchscreen ...... 94 2.2 Markt und Aufbau von App Stores ...... 54 3.3.2 Bildschirmgrößen bei Android-Geräten ...... 94 2.2.1 Kategorien von App Stores: 3.3.3 Bildschirmgrößen bei iOS-Geräten ...... 95 Spiele, Social Media & Co...... 54 3.3.4 Bildbenennung bei iOS-Geräten ...... 96 2.2.2 Die populärsten Kategorien ...... 55 3.3.5 Bildbenennung bei Android-Geräten ...... 96 2.2.3 Vom Angebot lernen ...... 60 3.3.6 Bildschirme von Wearables ...... 97 3.4 Portrait und Landscape ...... 98 2.3 Welches Problem lösen Sie mit Ihrer App? ...... 60 Hauptnavigation 2.3.1 Kategorien von Problemlösungen ...... 61 3.4.1 Orientation Design Models ...... 99 2.3.2 Was macht Ihre App zu etwas Besonderem? ...... 65 3.5 Die Bedienung per Finger ...... 103 Hauptbereich 3.5.1 Kleine Bedienelemente, große Probleme ...... 104 2.4 Wer ist Ihre Zielgruppe? ...... 66 Sekundärnavigation 2.4.1 Die Zielgruppe definieren ...... 66 3.5.2 Zeigefinger und Daumen ...... 104 2.4.2 Braucht Ihre Zielgruppe diese App? ...... 67 3.5.3 Pixelbreite von Fingern ...... 105 2.4.3 Personas ...... 68 3.6 Das richtige Gefühl – die Touchbedienung ...... 106 2.4.4 Konkurrenz- und Mitbewerberanalyse ...... 70 3.6.1 Besonderheiten der Bedienung ...... 106 2.4.5 Apps für die Masse oder nur für einen 3.6.2 Gesten: Drücken, wischen, tippen … ...... 108 kleinen Kreis? ...... 71 3.6.3 Hotspots: Wohin schaut der Nutzer? ...... 110 2.5 Die Bewertung Ihrer Idee ...... 72 3.7 Die Smartphone-Bedienung ...... 112 2.5.1 Dotmocracy: Bewertung mit Punkten ...... 72 3.7.1 Mit nur einer Hand ...... 112 2.5.2 Bewertung nach vordefinierten Kriterien ...... 72 3.7.2 Haltung im Portrait-Modus/Landscape-Modus ...... 113 2.5.3 Bewertung mit der Nutzwertanalyse ...... 73 3.7.3 Der Daumen als Entdecker ...... 114 2.5.4 Bewertung durch SWOT-Analyse ...... 74 3.7.4 Die Home-Buttons ...... 115 2.6 Auf welcher Plattform sollten Sie Ihre Idee umsetzen? ...... 75 3.8 Die Tablet-Bedienung ...... 117 2.6.1 Die Besonderheiten von iOS ...... 75 3.8.1 Frei-, ein- oder zweihändig? ...... 117 2.6.2 Die Besonderheiten von Android ...... 78 3.8.2 Schutzzonen einrichten ...... 119 3.8.3 Accessoires ...... 120 3 Think big, but build small 3.9 Die Bedienung von Wearables ...... 121 3.9.1 Leicht am Handgelenk, leicht in der Bedienung ...... 121 3.1 Wie Anwender Ihre Geräte und Apps nutzen ...... 83 3.10 Internet der Dinge ...... 123 3.1.1 Daten zur Smartphone-, Tablet- und ­ Wearable-­Nutzung ...... 84 3.1.2 Eine Woche ohne Computer ...... 86 4 Usability, User Experience und 3.1.3 Weniger ist mehr ...... 88 Barrierefreiheit 3.1.4 Mentale Modelle ...... 89 3.1.5 Jedes Betriebssystem ist eine in sich ­ 4.1 Was ist Usability? ...... 125 geschlossene Welt ...... 90 4.1.1 Merkmale guter Usability ...... 126 4.1.2 Usability-Vergleich zweier To-do-Apps ...... 127 3.2 Der Nutzungskontext ...... 90 4.1.3 Zentrale Aspekte einer gelungenen Usability ...... 130 3.2.1 Beispiele für Apps, die den Nutzungskontext­ ­ 4.1.4 Usability vs. Aussehen: Entweder oder? ...... 131 beachten ...... 91 3.2.2 Nutzungssituationen ...... 92

4 5 Inhalt Inhalt

4.2 Was ist User Experience? ...... 132 6 UI-Prinzipien und Konventionen 4.2.1 User Experience und Informationsarchitektur ...... 133 4.2.2 Zehn Tipps für eine gelungene User Experience ...... 135 6.1 Jede Plattform ist anders ...... 195 4.2.3 Warum es sich lohnt, in eine gute UX zu 6.1.1 Die Erwartungshaltung des Nutzers ...... 195 investieren ...... 140 6.1.2 UI-Prinzipien der Plattformen ...... 201 4.2.4 Schönheit und Emotionalität ...... 142 6.2 Informationsarchitektur und Navigation ...... 205 4.3 Zehn Regeln für gutes Interaktionsdesign ...... 146 6.2.1 Der Klassiker: Die hierarchische Navigation ...... 205 6.2.2 Jede Seite für sich: Hub & Spoke ...... 206 4.4 Barrierefreiheit ...... 150 6.2.3 Ineinander gestapelt: Nested Doll ...... 208 4.4.1 Grenzen und Möglichkeiten der Betriebssysteme .... 151 6.2.4 Für Multitasker: Tabbed View ...... 209 4.4.2 Was Sie als App-Designer tun können ...... 153 6.2.5 Mehr Übersicht: Bentobox/Dashboard ...... 209 6.2.6 Der Contentking: Navigation durch Filter ...... 210 5 Nutzerzentriertes Design 6.2.7 Der Kombinator: Navigationskonzepte miteinander ­kombinieren ...... 212 5.1 Phasen nutzerorientierten Designs ...... 156 5.2 Die Interaktion als Erlebnis designen ...... 157 5.2.1 Gamification ...... 158 7 Controls und Views von iOS und Android 5.2.2 Gamification in Apps ...... 159 7.1 Was sind Controls und Views? ...... 215 5.2.3 Gamification, ja oder nein? ...... 161 7.1.1 Zusammenhang von Controls und Views ...... 215 5.3 Holen Sie Ihre Nutzer ab ...... 161 7.2 Die Standard-Controls von iOS ...... 217 5.3.1 Das On-Boarding ...... 161 7.2.1 Navigationsbar ...... 217 5.3.2 Die Registrierung ...... 166 7.2.2 Toolbar ...... 219 5.3.3 Den Nutzer im Blick ...... 169 7.2.3 Tabbar ...... 220 5.3.4 Transitional Interfaces ...... 170 7.2.4 Label, System-Button, Refresher & Co...... 222 5.4 Benutzerfreundliche Bedienung und Dateneingabe ...... 174 7.3 Die Standard-Controls von Android ...... 245 5.4.1 Die richtige Positionierung von Controls ...... 175 7.3.1 Layoutprinzipien ...... 246 5.4.2 Der Einsatz von Custom-Controls ...... 176 7.3.2 System-, App- und Toolbar ...... 248 5.4.3 Kontextbezogene Bedienelemente und Navigation . 177 7.3.3 Seitennavigation ...... 250 5.5 Informieren Sie den Nutzer darüber, was­ passiert ...... 178 7.3.4 Komponenten ...... 251 5.5.1 Formen von Feedback ...... 179 7.4 Custom-Controls und Custom-Components­ ...... 267 5.5.2 Wann Feedback zu viel wird ...... 182 7.4.1 Side-Menü ...... 267 5.5.3 iOS-Notifications und Widgets ...... 183 7.4.2 Swipe to Choose ...... 268 5.5.4 Android-Notifications und Widgets ...... 186 7.4.3 Animiertes On-Boarding ...... 269 5.5.5 Wann ist der Einsatz von Notifications ­ 7.4.4 Diagramme ...... 269 empfehlenswert? ...... 187 7.4.5 Erstellen Sie individuelle Controls ...... 270 5.5.6 Pop-ups ...... 189 7.5 Fazit ...... 270 5.5.7 Fehler- und Infomeldungen ...... 190 5.6 Stolperfallen – woran Nutzer die Lust verlieren ...... 192 5.6.1 In der Warteschleife ...... 192 5.6.2 Der Ladebalken ...... 193

6 7 Inhalt Inhalt

8 Vom Papier zum interaktiven Prototyp: 9 Inspiration und Trends

­Wireframe, Mock-up & Co. 9.1 Inspiration im Netz ...... 305 8.1 Der iterative Designprozess ...... 272 9.1.1 Inspiration für Designs ...... 306 8.1.1 Warum überhaupt Iterationen? ...... 273 9.1.2 Inspiration für die Ideenfindung ...... 311 8.2 Stift und Papier – eine erste Skizze der App ...... 274 9.2 Das Moodboard ...... 313 8.2.1 Die erste Skizze ...... 274 9.2.1 Quellen ...... 314 8.2.2 Storyboard ...... 275 9.2.2 Regeln für gute Moodboards ...... 315 9.2.3 Moodboard-Varianten ...... 316 8.3 Wireframe – es wird konkreter ...... 277 8.3.1 Was ist ein Wireframe? ...... 278 9.3 Aktuelle Trends, Stilrichtungen ...... 318 8.3.2 Wann werden Wireframes eingesetzt? ...... 279 9.3.1 Flat Design – der Minimalist ...... 318 8.3.3 Was sollte ein Wireframe leisten? ...... 280 9.3.2 Skeuomorphismus – der Realist ...... 319 9.3.3 Fashioned – der Modische ...... 320 8.4 Mock-ups – jetzt wird’s bunt ...... 281 9.3.4 Mixed – der Klare ...... 321 8.4.1 Mit richtigen Inhalten arbeiten ...... 282 9.4 Umsetzung und Design ...... 322 8.5 Interaktive Prototypen – der erste echte Eindruck ...... 283 9.4.1 Die richtige Auflösung und Größe ...... 322 8.5.1 Was ist ein interaktiver Prototyp? ...... 283 9.4.2 Bilder ...... 326 8.5.2 Low Fidelity – ein Wireframe-Prototyp ...... 284 9.4.3 Dokumentgröße ...... 326 8.5.3 High Fidelity – Design-Prototyp ...... 285 9.4.4 Hilfreiche Tipps und Techniken ...... 327 8.6 Wireframe- und Mock-up-Tools ...... 287 8.6.1 Balsamiq Mockups ...... 288 8.6.2 Omnigraffle ...... 288 10 Typografie für kleine Bildschirme 8.6.3 Axure ...... 289 10.1 Was ist Typografie? ...... 340 8.7 Grafik- und Zeichenprogramme ...... 290 10.2 Grundsätzliches zur Schrift ...... 341 8.7.1 Adobe Photoshop ...... 290 10.2.1 Typografie in der Anwendung ...... 341 8.7.2 Adobe Illustrator ...... 293 10.2.2 Wesentliche Merkmale einer Schrift ...... 341 8.7.3 Bohemian Sketch 3 ...... 295 10.2.3 Wesentliche Merkmale eines Textlayouts ...... 343 8.7.4 Mirrorprogramme ...... 298 10.3 Kategorien von Schriften ...... 344 8.8 Tools für das Rapid Prototyping ...... 298 10.3.1 Serifenschrift ...... 344 8.8.1 POP – Prototyping on Paper ...... 299 10.3.2 Serifenlose Schrift ...... 345 8.8.2 Pixate ...... 299 10.3.3 Dekorative Schriften, Handschriften etc...... 346 8.8.3 Quartz Composer und Origami ...... 300 10.3.4 Schriftart, Schriftfamilie, Schriftschnitte und 8.8.4 Framer.js ...... 301 Schriftauszeichnung ...... 347 8.8.5 Flinto for Mac ...... 302 10.4 Systemschriften ...... 348 8.8.6 Principle ...... 303 10.4.1 Ein Beispiel: Die San-Francisco-Schriftfamilie ...... 348 8.8.7 Design- und Entwicklungsperspektive ...... 304 10.5 Regeln für gute Typografie im App-Design ...... 351 10.5.1 Wo findet man Schriften fürs App-Design? ...... 352 10.5.2 Was Sie bei der Schriftwahl beachten müssen ...... 352 10.5.3 Lesbarkeit hat oberste Priorität ...... 354 10.5.4 Das Look & Feel der Schrift ...... 359

8 9 Inhalt Inhalt

10.5.5 Schriftmischung und Auszeichnungen ...... 360 11.6 Tools, die bei der Farbwahl helfen ...... 403 10.5.6 Wie viel Text ist wirklich nötig? ...... 363 11.6.1 Adobe Color CC (ehemals Adobe Kuler) ...... 404 10.5.7 Typografie auf Smartphones, Tablets und 11.6.2 ColoRotate ...... 405 Wearables ...... 363 11.6.3 Copaso ...... 406 10.5.8 Grundlinienraster (Baseline Grids) ...... 365 10.5.9 Textelemente frühzeitig kategorisieren ...... 366 12 Icons, Grafiken und Bilder 10.6 Empfehlenswerte Schriften für Apps ...... 371 10.6.1 »Open Sans« ...... 371 12.1 Icons ...... 408 10.6.2 »Ubuntu« ...... 371 12.1.1 Von guten und schlechten Icons ...... 409 10.6.3 »Droid Sans« ...... 372 12.1.2 Arten von Icons ...... 411 10.6.4 »Source Sans Pro« ...... 373 12.1.3 Tipps für gelungenes Icon-Design in Apps ...... 413 10.6.5 » UI« ...... 373 12.1.4 Vorgefertigte Icon-Sets ...... 418 10.6.6 Sonstige Schriften ...... 374 12.2 Grafiken ...... 418 12.2.1 Die Grafik als funktionelle Darstellung ...... 419 11 Farbe 12.2.2 Die Grafik als Maskottchen ...... 420 12.2.3 Woher Grafiken beziehen? ...... 421 11.1 Grundsätzliches zur Farbe ...... 375 12.3 Fotografien ...... 424 11.1.1 Farbton, Sättigung, Helligkeit und Transparenz ...... 376 12.3.1 Die Verwendung von Fotografien in Apps ...... 424 11.1.2 Der Farbkreis und die Primär-, Sekundär- 12.3.2 Dynamische Bilder ...... 425 und ­Tertiärfarben ...... 378 12.3.3 Produktfotografien ...... 426 11.2 Farben, Stimmungen und Assoziationen ...... 379 12.3.4 Woher Fotografien beziehen? ...... 428 11.2.1 Wie Farben wirken ...... 380 12.4 Der Export ...... 429 11.2.2 Farbwirkung und Farbassoziationen ...... 381 12.4.1 Styleguide (Gestaltungsrichtlinien) ...... 429 11.3 Farbschemata ...... 389 12.4.2 Assets erstellen ...... 430 11.3.1 Monochrome Farbschemata ...... 390 12.4.3 Der Export unter Sketch ...... 435 11.3.2 Analoge Farbschemata ...... 392 12.4.4 Der Export unter Photoshop ...... 437 11.3.3 Triadisches Farbschemata ...... 393 12.4.5 Was geht nach dem Export an den Entwickler? ...... 438 11.3.4 Farbkontraste ...... 393 12.5 Tools für den Export und Styleguides ...... 441 11.4 Farben im App-Design ...... 397 12.5.1 Plugins für Sketch über die »Sketch Toolbox« ­ 11.4.1 Die 60-10-30-Regel ...... 398 installieren ...... 441 11.4.2 Fragen, die Sie sich bei der Farbgestaltung ­ 12.5.2 Plugins für Photoshop ...... 442 stellen sollten ...... 398 11.4.3 Farben und das Corporate Design ...... 399 13 Apps erfolgreich in App Stores präsentieren 11.4.4 Mit Farben strukturieren und leiten ...... 400 11.5 Die Farbdarstellung auf Smartphone, Tablet & Co...... 402 13.1 Die Rolle der App Stores ...... 445 11.5.1 Die verschiedene Display-Typen ...... 402 13.1.1 Die Marktsituation ...... 445 11.5.2 Farben vorab mit der Mirrorfunktion testen ...... 403 13.1.2 Umsätze in den App Stores ...... 447 13.1.3 Eine App für alle Plattformen? ...... 448 13.2 Wie Sie Ihre App im App Store richtig in Szene setzen ..... 449 13.2.1 ASO: App Store Optimization ...... 449 13.2.2 Präsentation der App über Screenshots ...... 451

10 11 Inhalt

13.2.3 Der Beschreibungstext und Keywords ...... 455 13.2.4 Bewertungen ...... 456 13.2.5 Ihre App auf anderen Seiten präsentieren ...... 457 13.2.6 Preview-Videos ...... 460 13.3 Warum das App-Icon so wichtig ist ...... 461 13.3.1 Regeln für gut gestaltete App-Icons ...... 462 13.3.2 Der Name Ihrer App ...... 464 13.4 Kostenlose oder kostenpflichtige App? ...... 465 13.4.1 Kostenpflichtige Apps ...... 466 13.4.2 Apps mit In-App-Käufen ...... 466 13.4.3 Apps mit Paywalls ...... 467 13.4.4 Freemium-Apps mit Werbung ...... 468 13.5 Die App ist hochgeladen – und dann? ...... 470 13.5.1 Die App stetig verbessern ...... 470 13.5.2 Optimierungstools für In-App-Nutzungsanalysen .... 471 13.6 Tipps, um im Apple App Store oder im Google Play Store gefeaturt zu werden ...... 473 13.6.1 Im Apple App Store gefeaturt werden ...... 473 13.6.2 Im Google Play Store gefeaturt werden ...... 474 13.7 Schön war’s ...... 475

Index ...... 477

12 Index

Android Developers Blog 310 iPhone 15 Index Android-Smartwatch 122 Pencil 17 Android Wear 122 Apple App Store 446 Animation Apple Watch 18, 122 @2 323 Dauer 172 Komponenten 238 3D Touch 31, 108 Easing 172 UI-Elemente 242 9-Patch-Grafik 422 Farbveränderung 173 Appmethod 37 60-10-30-Regel 398 Timing 171 App-Modell 80-zu-20-Regel 137 Animationen 170 Freemium 468 Ansichtswechsel 203 In-App-Käufe 466 Anti-Aliasing 294 kostenpflichtig 466 A AOS  App Store Optimization mit Paywall 467 API 36 App-Name 464 APM 471 Hilfe Namensfindung 465 AARRR-Modell 470 Apostroph 351 international 464 Abgerundete Ecken 329 App Tipps 465 Accessoires 120 BMW Individual 7 Series AR 85 App-Präsentation 445 Adaptionsrate 32 CalenGoo 24 AOS 449 Additional Model 101 Duolingo 420 App-Name 464 Additive Farbmischung 376 Feedly 26 Beschreibungstext 455 Adobe Color CC 404 Fontli 347 Bewertung 456 Aktionen 204 für wen? 71 Keywords 455 Always-on 18 iBooks 91 Landing Page 457 AMOLED 403 IFTTT 144 Marktsituation 445, 449 Android 17, 29 Instant-App 84 Off-Page-Faktoren 450 App-Bar 248 Monument Valley 56 On-Page-Faktoren 450 Bottom Sheet 251 Namewhale 361 Pressemitteilung 459 Buttons 251 Nike+ 159 Preview-Video 460 Cards 252 Noom Coach 92 Screenshots 451 Chips 253 TimeFish 397 Tipps 453 Design 78 Tinder 43 Tonalität 455 Dialoge 254 Toilet Finder 21 Werbung schalten 460 Dividers 256 Typography Insight 342 App Ranking 456 Grid Lists 257 verbessern 470 App Stores 54 HTC Dream 18 WhatTheFont 348 Apple App Store 446 Indikatoren 262 Wunderlist 24 App präsentieren 445, 449 Layoutprinzip 246 YO 53 Google Play Store 447 List-Controls 258 Zombies, run! 159 Kategorien 54 Lists 258 App-Drawer 30 Marktsituation 445 Menü 260 App-Icon 413, 439 Policies 461 Notifications 186 Bedeutung 449, 461 Umsätze 447 Picker 261 Gestaltungsregeln 462 App Store Optimization 449 Seitennavigation 250 Grid 464 Assets 23 Selection Controls 263 Größe (Android) 439 Android 436 Sliders 264 Größe (iOS) 439 Bounding Box 432 Snackbar 265 Inspiration 462 Einstellung Photoshop 430 Systembar 248 testen 463 Einstellung Sketch 430 Tab 265 App-Idee 45 erstellen 430 Text Fields 266 App-Kategorien 55 exportieren 323 Toolbar 249 App-Kombinationsmethode 50 iOS 436 Update-Politik 79 Apple Asset Sheet 434 Widgets 186 iPad 17 Auflösung 322

477 Index Index

Augmented Reality 85 Bildbenennung Companion-App 181 Diagramm 269 F Farbton 376 Axure 289 Android 96 Complementary Model 102 Dickte 342 Farbveränderung 173 iOS 96 Controls 174, 215 Display-Typen 402 Farbwahl Facebook Bilder, dynamisch 425 positionieren 175 Dithering 294 Hilfe 403 Tipping-Point 57 Bildschirm 94 Conversion Rate 141 Dokument anlegen 323 Farbwirkung 380 FAQ 138 B Ausrichtung 98 Copaso 406 Dokumentgröße 326 Faux Bold 362 Farbe 375 Display-Typen 402 Corporate Design Dotmocracy 72 Featuring 45 Assoziationen 381 B2B-App 273 Landscape-Modus 98 Farben 399 dp 325, 327 Feedback 178 auf Bildschirm 402 B2C-App 273 Portrait-Modus 98 Schrift 352 DPI 94 Formen 179 Blau 385 Balsamiq Mockups 288 Touchscreen 94 Creative Commons 428 Draft 279 initiiert 180 bunt 376 BarMax 449 Bildschirmausrichtung CSS3 37 Dribbble 306 systemseitig 181 Farbton 376 Barrierefreiheit 150 Additional Model 101 Custom-Components 267 Droid Sans 372 visuell 179 Gelb 384 Farbinventierung 151 Chameleon Model 103 Custom-Controls 267 Duktus 342 zu viel 182 Gold 383 für Hörgeschädigte 152 Complementary Model 102 Duolingo 420 Fehlermeldung 191 Grün 387 Lupenfunktion 152 Landscape und Portrait? 100 Dynamische Bilder 425 Festnetz 18 Helligkeit 377 Rot-Grün-Sehschwäche 150 Orientation Design Models 99 Dynamischer Inhalt 282 Filled Icon 412 im App-Design 397 Sprachausgabe 151 Responsive Model 101 D Fitts Gesetz 106 kalt 381 Baseline 342 Bildschirmgrößen Flat Design 318 Kontrast 393 Bedienung Android 94 Dark-and-Light-Modus 357 Flinto for Mac 302 Orange 383 Dateneingabe 174 Wearable 97 Dashboard 209 E Flowcharts 277 Orientierung 401 Daumen 114 Bjango Actions 438 Dateneingabe 174 Flurry 471 primär 379 einhändig (Smartphone) 112 Bleikegel 345 Daumen 114 Early Adopter 145 Fontli 347 Rosa 382 einhändig (Tablet) 118 BMW Individual 7 Series AR 85 Radius 114 Easing 172 Force Touch 108 Rot 381 Fingereingabe 103 Body Text 355 Daumenbreite 105 Elevator Pitch 52 Formfaktor 26 Sättigung 376 Finger ist Maus 107 Bohemian Sketch 295 Dekorative Schriften 346 Emotionalität 142 Fotografie 424 Schwarz 388 Fitts Gesetz 106 BOT 167 Delightful Details 141 Empathisierung 156 dynamisch 425 sekundär 379 freihändig 118 Bounding Box 432 Design Entwicklungsstrategie 34 in Apps 424 teritär 379 Größe Bedienelemente 104 erstellen 433 Ästhetik 145 Hybrid-App 39 kaufen 428 Transparenz 378 Hotspots 110 Brainstorming 46, 48 aufgabenbasiert 137 Native App 36 kostenlos 428 unbunt 377 One-Handed-Mode 114 Brand-Evangelist 141 Einfallsreichtum 145 Umsetzbarkeit Design 35 von Produkten 426 Violett 386 Phablet 112 Breakdown 172 Farbe 375 Web-App 37 Framer.js 301 warm 381 Pixelbreite von Fingern 105 Break-even-Point 60 Fotografien 424 Entwurfsskizze 272, 274 Funktionale Schönheit 143 Weiß 389 Smartphone 112 Bunte Farben 376 funktionale Schönheit 143 Erfolgsmeldung 192 Wirkung 381 Tablet 117 Burger-Icon 177 für viele Bildschirmgrößen 94 Erlebnis 157 Zielgruppe 398 Touchbedienung 106 Button Grafiken 418 Erreichbarkeit, ständige 18 zum Hervorheben 401 Wearables 121 Floating Action 247 Icon 408 Erwartungshaltung 195 G zum Strukturieren 400 Zeigefinger und Daumen 104 Inspiration 305 Event 173 Farbe-an-sich-Kontrast 395 zweihändig 117 Moodboard 313 Evernote 314 Galaxy Gear 18 Farbe kombinieren 398 Behance 307 Persönlichkeit 145 Experiment Gamification 158 60-10-30-Regel 398 Bentobox 209 C Prototyp 271 Ohne Computer 86 Gefeaturt werden Farbharmonie 396 Benutzererlebnis 142 Technik 40 Export 429 Apple App Store 473 Farbkontrast 393 Beschreibungstext 455 C 36 Trends 318 Android-Assets 436 Google Play Store 474 Farbe-an-sich 395 Best Practices 140 Chameleon Model 103 Typografie 339 Assets 430 Gender-Marketing 382 Hell-Dunkel 394 BetaList 312 Chrome 217 Umsetzbarkeit 35 Entwickler 438 Gerätevielfalt 33 Kalt-Warm 395 Betriebssystem 195 Clear 158, 173 Umsetzung 322 iOS-Assets 436 Geschlossenes System 200 komplementär 393 Cognitive Load 90 Clippy 420 Usability 125 mit Photoshop 437 Gesten 107, 108 Farbkreis 378 Erwartungshaltung 195 Coca Controls 268 User Experience 132 mit Sketch 435 zukünftige Entwicklung 108 Farbsättigung 376 geschlossen 90 Cognitive Load 90, 197 vs. Entwicklung 304 Styleguide 429 Github 87 Farbschema 389 welches? 448 Cognitive Walktrough 70 Design Patterns 201 Glow-Effekt 328 analoges 392 Bewertung Collage 316 Designprozess, interativer 272 Google Fonts Pairing Tool 362 monochromes 390 der App 456 ColoRotate 405 Design Thinking 40, 143 Google I/O 305 triadisches 393 gefälschte 457 Companion 29 Desktop-PC 19

478 479 Index Index

Google Play Store 447 Verwendung 410 Alert 233 Ansichtswechsel 203 gefeaturt werden 473 Navigationsbar 110 Google Universal Analytics 472 wozu? 409 Design 76 Gestaltung 196 Nutzungsanalyse 471 Nebenscreens skizzieren 276 Grafik iconmonstr 418 Label 222 Suchfunktion 204 Mentales Model 89 Nested Doll 208 9-Patch 422 Icons 408 Modal View 235 Tab-Navigation 202 Merkmale guter Apps 21 Nike+ 159 funktionale 419 Icon-Set 418 Navigationsbar 217 Zurück-Navigation 201 Aussehen 24 Notifications 20 kaufen 421 Idee Notifications 183 Konzeption 45 Bedienbarkeit 24 Android 186 Maskottchen 420 bewerten 72 Page-Control 227 Moodboard 313 drängt sich nicht auf 34 Empfehlungen 187 Grafikprogramm 290 konkretisieren 51 Picker 231 Kreativitätstechnik 48 Effizienz 22 iOS 183 Illustrator 293 Kontext 46 Pop-over 231 App-Kombinationsmethode 50 lösen Probleme 60 Nucleo 418 Photoshop 290 Probleme erkennen 47 Progress-View 226 Brainstorming 48 Unterhaltsungswert 92 Nutzerzentriertes Design 155 Graphical 106 Ideen bewerten 72 Refresh Controls 225 Umkehrmethode 49 Zeitersparnis 22 Nutzungskontext 90 Grid 464 Dotmocracy 72 Segmented Control 228 Kunden Zweckerfüllung 21 Nutzungssituation 92 Größe 322 nach Kritierien 72 Slider 230 loyale 141 Mikrotypografie 340 aus Langeweile 92 Größe Interaktionsfläche 105 Nutzwertanalyse 73 Stepper 229 Mirrorfunktion 403 zur Aufgabenerfüllung 93 Grundlinienraster 365 SWOT-Analyse 74 Switch 229 Mirrorprogramm 298 zur Informationssuche 93 GUI 106 Ideenfindung 48 System-Button 222 Adobe Preview 298 Nutzungsverhalten 83 Guideline andere Apps 53 Tabbar 220 L Skala Preview 298 beruflicher Alltag 86 Android 104, 245 Elevator Pitch 52 Table-View 236 Sketch Preview 298 Daten 84 iOS 104, 218 Inspiration 311 Textfeld 223 Ladebalken 193 Mitbewerberanalyse 70 mentales Modell 89 GUI  Reflexion 72 Text-View 237 Landing-Page 457 Mixed-Stil 321 Unternehmen 85 Welche Plattform? 75 Toolbar 219 Laufweite 356 Mobile Computing 28 Use Case beachten 88 Ideenkreis 52 Update-Politik 77 Launcher 29 Mock-up 272, 281 Nutzwertanalyse 73 IFTTT 144 Widgets 183 Launch-Image 439 Mock-Up-Tools 287 H Illustrator 293 iOS Fonts 348 Android 439 Monument Valley 56 In-App-Käufe 466 Iteration 272 iOS 440 Moodboard 313 Hauptscreen skizzieren 276 In-App-Nutzungsanalyse 471 Lean-Back 117 Collage 316 O Hell-Dunkel-Kontrast 394 In-App-Purchase 58 Lean-Forward 117 Quellen 314 Helligkeit 377 Inboard 315 Lean Start-up 71 Regeln 315 Oberlänge 341 Home-Button 115 Indexseite 205 J Lesbarkeit 354 Varianten 316 Offenes System 200 Homekit 123 Individueller Control 270 Linux-Kernel 17 Moto 360 18 Off-Page-Faktor 450 Hotspots 110 Infomeldung 191 Jailbreak 39 Little Big Details 309 Multitouchdisplay 108 Omnigraffle 288 Navigationsbar 110 Informationsarchitektur 133, 205 Jakob Nielsen 146 Long Shadow erstellen 329 On-Boarding 161 sekundäre Navigation 110 Inspiration JavaScript 37 Look & Feel 132, 142 animiert 269 HTML5 37 App-Icon 462 Joy of Use 132, 142 Low Fidelity 284 funktionorientiertes 164 Hub & Spoke 206 Button 223 N Methoden kombinieren 166 Human Interface Guidelines 104 holen 305 per Video 166 Hybrid-App 39 Ideenfindung 311 Namewhale 361 progressives 164 Vor- und Nachteile 39, 40 im Netz 305 K M Native App 36 überspringen 166 Instant-App 84 Nachteile 37 vorteilorientiertes 162 Interaktion 157 Kalt-Warm-Kontrast 395 Makrotypografie 340 Vorteile 36 One-Handed-Mode 114 Interaktionsdesign 146 Kantar Worldpanel 446 Markt Navigation 205 On-Page-Faktor 450 I 10 Regeln 146 Keep it simple 88 vom Angebot lernen 60 Bentobox 209 Open Sans 371 Interaktionsmodell 98 Keep it simple, stupid 138 Marktanalyse 54 Burger-Icon 177 Open Source 39 Icon Interaktiver Prototyp 283 Kerning 351 Marktsituation 445 Dashboard 209 Orientation Design Models 99 Arten 411 High Fidelity 285 Keywords 455 Kantar Worldpanel 446 hierarchisch 205 Origami 300 der App 413 Low Fidelity 284 KISS  Keep it simple, stupid Marktstrategie Hub & Spoke 206 filled 412 Internet der Dinge 28, 123 KISS-Prinzip 138 AARRR-Modell 470 Konzepte kombinieren 212 Set kaufen 418 Interpolation 324 Klickdemo 277 App-Icon 461 mit Filtern 210 stroked 411 iOS 31, 75, 95 Komplementärkontrast 393 App-Name 464 Nested Doll 208 testen 414, 417 Acitivity Indicator 224 Konventionen 195 App-Präsentation 449 Tabbed View 209 Tipps 413 Action Sheet 234 Aktionen 204 Bezahlmodell 465 Wearables 212

480 481 Index Index

P R Export 325, 435 Tab-Navigation 202 Joy of Use 142 Wortabstände 343 Globale Styles 296 Tertiärfarbe 379 lohnt sich! 140 Wunderlist 128 Marketch 441 Text Look & Feel 142 WWDC  Worldwide Developer Paretoprinzip 137 Rahmenbedingungen 19, 83 Style Inventory 441 funktional 358 Nutzungsfreude 143 Conference Paywall 467 Rapid Prototyping 298 Symbole 295 hierarchisieren 357 primäre Nutzungserlebnis 135 Personas 68 Registrierung 166 Toolbox 441 kategorisieren 366 User Flow 279 Persönlichkeit 24 Abbruchrate 169 Skeuomorphismus 196, 319 Textkörper 355 User Interface 195 Phablet 26 in der App 168 Schaltfläche erstellen 334 Textlayout User Journey 156, 272 X Bedienung 112 per Mail 167 Slab Serif 346 Merkmale 343 UX  User Experience Photoshop 290, 442 per Scoial Connect 167 Smartphone 26, 84 Text Truncation 237 x-height 342 Artboards 292 Responsive Model 101 Accessoires 24 The Noun Project 418 xxxHDPI 324 Assets 291 Retina-Display 403 Bedienung 112 TimeFish 397 Cloud-Bibliotheken 291 RGB 376, 378 Companion 29 Timing 171 V Ebenenstile 292 Roboto 348 Smashing Magazine 310 Tinder 43 Export 325, 437 Rot-Grün-Sehschwäche 150 Social Connect 134 Tipping-Point 57 Vektor 293 Y Formebene 431 RSS-Feed 26 Social Media 458 Touchbedienung Versalhöhe 341 Ink/Specking 442 Source Sans Pro 373 Qualitätsmerkmale 107 View 215 YO 52 LayerCraft 443 Spinner 193 Tracking 350 Visuelles Feedback 128 Random User 443 Standard-Controls Transitional Interface 170 Visuelles Rauschen 410 Smart Objekt 431 S Android 245 Transitions 170 Vor- und Nachbreite 342 Pirate Metrics 470 iOS 217 Transparenz 378 Z Pixate 299 San Francisco 348 Statischer Inhalt 282 Trends 318 Pixel 293 Satzschrift 347 Statistik Trial and Error 130 Zeichenbreite 343 Pixelbreite von Fingern 105 Schlagschatten 327 Anzahl Android-Apps 447 Typografie 339 W Zeigefingerbreite 105 Pop-over 231 Schrift Anzahl Nutzer 84 im App-Design 351 Zeilenabstand 358 Pop-ups 189 Ausrichtung 343 App-Anzahl auf Smartphone 21 lernen 342 Warnmeldung 191 Zeilenbreite 343 Positionierung von Controls 175 Empfehlungen 371 App-Downloads weltweit 447 Lesbarkeit 354 Wearable 18, 28, 84 Zeilenlänge 358 PPI 94 finden 352 App-Nutzung 25 Google Glass 18 Zielgruppe 66 Pressemitteilung 459 Kategorien 344 Break-even-Point 60 Smartwatch 18 Bedarf prüfen 67 Preview-Video 460 Kerning 351 Deinstallationsrate 25 Web-App 37 definieren 66 erstellen 461 Lizenzrecht beachten 354 iOS Downloadzahlen 446 U Nachteile 39 Personas 68 Primäre Nutzungserlebnis 135 Look & Feel 359 Stockfotografie 424, 428 Vorteile 39 Zombies, run! 159 Primärfarbe 379 Merkmale 341 Stolperfallen 192 Ubuntu 371 Weißraum 409 Zurück-Navigation 201 Principle 303 mischen 360 Storyboard 275 UI-Prinzipien 195 Welche Plattform? 75 Probleme lösen 60 Tracking 350 Stroked Icon 411 UI  User Interface Android 78 Product Hunt 311 Schriftart 347 Styleguide 180, 400, 429 Umkehrmethode 49 iOS 75 Produktfoto 426 Schriftcharakter 359, 363 Stylus 17 Umsetzbarkeit Design 35 Welt in der Hosentasche 20 Prototyp 271 Schriftfarbe 356 Suchfunktion 204 UMTS-Lizenz 19 Werbung 460 Flowcharts 277 Schriftgröße 343, 356 Swipe to Choose 268 Unbunte Farbe 377 WhatTheFont 348 interaktiver 283 Schriftmischung 360 SWOT-Analyse 74 Unterlänge 342 Wheel of Death 192 Mock-up 281 Schriftschnitt 348 Synergieeffekt 49 Usability 125 Widgets Storyboard 275 Schriftwahl 352 Systemschrift 348 Norm EN ISO 9241 127 Android 186 Wireframe 277 Schutzzone einrichten 119 Vergleich To-do-Apps 127 iOS 183 Pttrns 308 Segoe UI 373 vs. Aussehen 131 Windows Phone 32 Punze 342 Sekundäre Navigation 110 vs. Gamification 160 Marktanteil 32 Push-Notification 187 Sekundärfarbe 379 Use Case 88 Wireframe 272, 277 Serifenlose Schrift 345 T User-Centered Design 146, 155 Einsatz 279 Serifenschrift 344 Tabbed View 209 User Experience 125, 132 Wireframe-Tools 287 Sketch Tablet 27, 84 10 Tipps 135 WLAN Triangulation 27 Q Artboard 296 Bedienung 117 Conversion Rate 141 Wording 163 Content Generator 442 Schutzzone 119 Emotionalität 142 Worldwide Developer Conference Quartz Composer 300 erweitern 296 305

482 483 Know-howWissen, wie’s für Kreative.geht.

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.

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Sie dürfen sie gerne empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Bitte Jan Semler beachten Sie, dass der Funktionsumfang dieser Leseprobe sowie ihre Darstel- App-Design – Alles zu Gestaltung, Usability lung von der E-Book-Fassung des vorgestellten Buches abweichen können. und User Experience Diese Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nut- zungs- und Verwertungsrechte liegen beim Autor und beim Verlag. 484 Seiten, gebunden, in Farbe, Mai 2016 39,90 Euro, ISBN 978-3-8362-3453-5 Teilen Sie Ihre Leseerfahrung mit uns! www.rheinwerk-verlag.de/3737