Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
Vorwort
13
1 Der Smartphone- und Tablet-Boom
15
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
45
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
2.1.4 Ideen konkretisieren
51
2.1.5 Von erfolgreichen Apps lernen
53
2.2 Markt und Aufbau von App Stores
54
2.2.1 Kategorien von App Stores: Spiele, Social Media & Co.
54
2.2.2 Die populärsten Kategorien
55
2.2.3 Vom Angebot lernen
60
2.3 Welches Problem lösen Sie mit Ihrer App?
60
2.3.1 Kategorien von Problemlösungen
61
2.3.2 Was macht Ihre App zu etwas Besonderem?
65
2.4 Wer ist Ihre Zielgruppe?
66
2.4.1 Die Zielgruppe definieren
66
2.4.2 Braucht Ihre Zielgruppe diese App?
67
2.4.3 Personas
68
2.4.4 Konkurrenz- und Mitbewerberanalyse
70
2.4.5 Apps für die Masse oder nur für einen kleinen Kreis?
71
2.5 Die Bewertung Ihrer Idee
72
2.5.1 Dotmocracy: Bewertung mit Punkten
72
2.5.2 Bewertung nach vordefinierten Kriterien
72
2.5.3 Bewertung mit der Nutzwertanalyse
73
2.5.4 Bewertung durch SWOT-Analyse
74
2.6 Auf welcher Plattform sollten Sie Ihre Idee umsetzen?
75
2.6.1 Die Besonderheiten von iOS
75
2.6.2 Die Besonderheiten von Android
78
3 Think big, but build small
83
3.1 Wie Anwender Ihre Geräte und Apps nutzen
83
3.1.1 Daten zur Smartphone-, Tablet- und ­Wearable-­Nutzung
84
3.1.2 Eine Woche ohne Computer
86
3.1.3 Weniger ist mehr
88
3.1.4 Mentale Modelle
89
3.1.5 Jedes Betriebssystem ist eine in sich ­geschlossene Welt
90
3.2 Der Nutzungskontext
90
3.2.1 Beispiele für Apps, die den Nutzungs­kontext ­beachten
91
3.2.2 Nutzungssituationen
92
3.3 Kleine Bildschirme, aber großes Design
94
3.3.1 Der Touchscreen
94
3.3.2 Bildschirmgrößen bei Android-Geräten
94
3.3.3 Bildschirmgrößen bei iOS-Geräten
95
3.3.4 Bildbenennung bei iOS-Geräten
96
3.3.5 Bildbenennung bei Android-Geräten
96
3.3.6 Bildschirme von Wearables
97
3.4 Portrait und Landscape
98
3.4.1 Orientation Design Models
99
3.5 Die Bedienung per Finger
103
3.5.1 Kleine Bedienelemente, große Probleme
104
3.5.2 Zeigefinger und Daumen
104
3.5.3 Pixelbreite von Fingern
105
3.6 Das richtige Gefühl – die Touchbedienung
106
3.6.1 Besonderheiten der Bedienung
106
3.6.2 Gesten: Drücken, wischen, tippen …
108
3.6.3 Hotspots: Wohin schaut der Nutzer?
110
3.7 Die Smartphone-Bedienung
112
3.7.1 Mit nur einer Hand
112
3.7.2 Haltung im Portrait-Modus/Landscape-Modus
113
3.7.3 Der Daumen als Entdecker
114
3.7.4 Die Home-Buttons
115
3.8 Die Tablet-Bedienung
117
3.8.1 Frei-, ein- oder zweihändig?
117
3.8.2 Schutzzonen einrichten
119
3.8.3 Accessoires
120
3.9 Die Bedienung von Wearables
121
3.9.1 Leicht am Handgelenk, leicht in der Bedienung
121
3.10 Internet der Dinge
123
4 Usability, User Experience und Barrierefreiheit
125
4.1 Was ist Usability?
125
4.1.1 Merkmale guter Usability
126
4.1.2 Usability-Vergleich zweier To-do-Apps
127
4.1.3 Zentrale Aspekte einer gelungenen Usability
130
4.1.4 Usability vs. Aussehen: Entweder oder?
131
4.2 Was ist User Experience?
132
4.2.1 User Experience und Informationsarchitektur
133
4.2.2 Zehn Tipps für eine gelungene User Experience
135
4.2.3 Warum es sich lohnt, in eine gute UX zu investieren
140
4.2.4 Schönheit und Emotionalität
142
4.3 Zehn Regeln für gutes Interaktionsdesign
146
4.4 Barrierefreiheit
150
4.4.1 Grenzen und Möglichkeiten der Betriebssysteme
151
4.4.2 Was Sie als App-Designer tun können
153
5 Nutzerzentriertes Design
155
5.1 Phasen nutzerorientierten Designs
156
5.2 Die Interaktion als Erlebnis designen
157
5.2.1 Gamification
158
5.2.2 Gamification in Apps
159
5.2.3 Gamification, ja oder nein?
161
5.3 Holen Sie Ihre Nutzer ab
161
5.3.1 Das On-Boarding
161
5.3.2 Die Registrierung
166
5.3.3 Den Nutzer im Blick
169
5.3.4 Transitional Interfaces
170
5.4 Benutzerfreundliche Bedienung und Dateneingabe
174
5.4.1 Die richtige Positionierung von Controls
175
5.4.2 Der Einsatz von Custom-Controls
176
5.4.3 Kontextbezogene Bedienelemente und Navigation
177
5.5 Informieren Sie den Nutzer darüber, ­was passiert
178
5.5.1 Formen von Feedback
179
5.5.2 Wann Feedback zu viel wird
182
5.5.3 iOS-Notifications und Widgets
183
5.5.4 Android-Notifications und Widgets
186
5.5.5 Wann ist der Einsatz von Notifications ­empfehlenswert?
187
5.5.6 Pop-ups
189
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 UI-Prinzipien und Konventionen
195
6.1 Jede Plattform ist anders
195
6.1.1 Die Erwartungshaltung des Nutzers
195
6.1.2 UI-Prinzipien der Plattformen
201
6.2 Informationsarchitektur und Navigation
205
6.2.1 Der Klassiker: Die hierarchische Navigation
205
6.2.2 Jede Seite für sich: Hub & Spoke
206
6.2.3 Ineinander gestapelt: Nested Doll
208
6.2.4 Für Multitasker: Tabbed View
209
6.2.5 Mehr Übersicht: Bentobox/Dashboard
209
6.2.6 Der Contentking: Navigation durch Filter
210
6.2.7 Der Kombinator: Navigationskonzepte ­miteinander ­kombinieren
212
7 Controls und Views von iOS und Android
215
7.1 Was sind Controls und Views?
215
7.1.1 Zusammenhang von Controls und Views
215
7.2 Die Standard-Controls von iOS
217
7.2.1 Navigationsbar
217
7.2.2 Toolbar
219
7.2.3 Tabbar
220
7.2.4 Label, System-Button, Refresher & Co.
222
7.3 Die Standard-Controls von Android
245
7.3.1 Layoutprinzipien
246
7.3.2 System-, App- und Toolbar
248
7.3.3 Seitennavigation
250
7.3.4 Komponenten
251
7.4 Custom-Controls und Custom-­Components
267
7.4.1 Side-Menü
267
7.4.2 Swipe to Choose
268
7.4.3 Animiertes On-Boarding
269
7.4.4 Diagramme
269
7.4.5 Erstellen Sie individuelle Controls
270
7.5 Fazit
270
8 Vom Papier zum interaktiven Prototyp: Wireframe, Mock-up & Co.
271
8.1 Der iterative Designprozess
272
8.1.1 Warum überhaupt Iterationen?
273
8.2 Stift und Papier – eine erste Skizze der App
274
8.2.1 Die erste Skizze
274
8.2.2 Storyboard
275
8.3 Wireframe – es wird konkreter
277
8.3.1 Was ist ein Wireframe?
278
8.3.2 Wann werden Wireframes eingesetzt?
279
8.3.3 Was sollte ein Wireframe leisten?
280
8.4 Mock-ups – jetzt wird’s bunt
281
8.4.1 Mit richtigen Inhalten arbeiten
282
8.5 Interaktive Prototypen – der erste echte Eindruck
283
8.5.1 Was ist ein interaktiver Prototyp?
283
8.5.2 Low Fidelity – ein Wireframe-Prototyp
284
8.5.3 High Fidelity – Design-Prototyp
285
8.6 Wireframe- und Mock-up-Tools
287
8.6.1 Balsamiq Mockups
288
8.6.2 Omnigraffle
288
8.6.3 Axure
289
8.7 Grafik- und Zeichenprogramme
290
8.7.1 Adobe Photoshop
290
8.7.2 Adobe Illustrator
293
8.7.3 Bohemian Sketch 3
295
8.7.4 Mirrorprogramme
298
8.8 Tools für das Rapid Prototyping
298
8.8.1 POP – Prototyping on Paper
299
8.8.2 Pixate
299
8.8.3 Quartz Composer und Origami
300
8.8.4 Framer.js
301
8.8.5 Flinto for Mac
302
8.8.6 Principle
303
8.8.7 Design- und Entwicklungsperspektive
304
9 Inspiration und Trends
305
9.1 Inspiration im Netz
305
9.1.1 Inspiration für Designs
306
9.1.2 Inspiration für die Ideenfindung
311
9.2 Das Moodboard
313
9.2.1 Quellen
314
9.2.2 Regeln für gute Moodboards
315
9.2.3 Moodboard-Varianten
316
9.3 Aktuelle Trends, Stilrichtungen
318
9.3.1 Flat Design – der Minimalist
318
9.3.2 Skeuomorphismus – der Realist
319
9.3.3 Fashioned – der Modische
320
9.3.4 Mixed – der Klare
321
9.4 Umsetzung und Design
322
9.4.1 Die richtige Auflösung und Größe
322
9.4.2 Bilder
326
9.4.3 Dokumentgröße
326
9.4.4 Hilfreiche Tipps und Techniken
327
10 Typografie für kleine Bildschirme
339
10.1 Was ist Typografie?
340
10.2 Grundsätzliches zur Schrift
341
10.2.1 Typografie in der Anwendung
341
10.2.2 Wesentliche Merkmale einer Schrift
341
10.2.3 Wesentliche Merkmale eines Textlayouts
343
10.3 Kategorien von Schriften
344
10.3.1 Serifenschrift
344
10.3.2 Serifenlose Schrift
345
10.3.3 Dekorative Schriften, Handschriften etc.
346
10.3.4 Schriftart, Schriftfamilie, Schriftschnitte und Schriftauszeichnung
347
10.4 Systemschriften
348
10.4.1 Ein Beispiel: Die San-Francisco-Schriftfamilie
348
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
10.5.5 Schriftmischung und Auszeichnungen
360
10.5.6 Wie viel Text ist wirklich nötig?
363
10.5.7 Typografie auf Smartphones, Tablets und Wearables
363
10.5.8 Grundlinienraster (Baseline Grids)
365
10.5.9 Textelemente frühzeitig kategorisieren
366
10.6 Empfehlenswerte Schriften für Apps
371
10.6.1 »Open Sans«
371
10.6.2 »Ubuntu«
371
10.6.3 »Droid Sans«
372
10.6.4 »Source Sans Pro«
373
10.6.5 »Segoe UI«
373
10.6.6 Sonstige Schriften
374
11 Farbe
375
11.1 Grundsätzliches zur Farbe
375
11.1.1 Farbton, Sättigung, Helligkeit und Transparenz
376
11.1.2 Der Farbkreis und die Primär-, Sekundär- und ­Tertiärfarben
378
11.2 Farben, Stimmungen und Assoziationen
379
11.2.1 Wie Farben wirken
380
11.2.2 Farbwirkung und Farbassoziationen
381
11.3 Farbschemata
389
11.3.1 Monochrome Farbschemata
390
11.3.2 Analoge Farbschemata
392
11.3.3 Triadisches Farbschemata
393
11.3.4 Farbkontraste
393
11.4 Farben im App-Design
397
11.4.1 Die 60-10-30-Regel
398
11.4.2 Fragen, die Sie sich bei der Farbgestaltung ­stellen sollten
398
11.4.3 Farben und das Corporate Design
399
11.4.4 Mit Farben strukturieren und leiten
400
11.5 Die Farbdarstellung auf Smartphone, Tablet & Co.
402
11.5.1 Die verschiedene Display-Typen
402
11.5.2 Farben vorab mit der Mirrorfunktion testen
403
11.6 Tools, die bei der Farbwahl helfen
403
11.6.1 Adobe Color CC (ehemals Adobe Kuler)
404
11.6.2 ColoRotate
405
11.6.3 Copaso
406
12 Icons, Grafiken und Bilder
407
12.1 Icons
408
12.1.1 Von guten und schlechten Icons
409
12.1.2 Arten von Icons
411
12.1.3 Tipps für gelungenes Icon-Design in Apps
413
12.1.4 Vorgefertigte Icon-Sets
418
12.2 Grafiken
418
12.2.1 Die Grafik als funktionelle Darstellung
419
12.2.2 Die Grafik als Maskottchen
420
12.2.3 Woher Grafiken beziehen?
421
12.3 Fotografien
424
12.3.1 Die Verwendung von Fotografien in Apps
424
12.3.2 Dynamische Bilder
425
12.3.3 Produktfotografien
426
12.3.4 Woher Fotografien beziehen?
428
12.4 Der Export
429
12.4.1 Styleguide (Gestaltungsrichtlinien)
429
12.4.2 Assets erstellen
430
12.4.3 Der Export unter Sketch
435
12.4.4 Der Export unter Photoshop
437
12.4.5 Was geht nach dem Export an den Entwickler?
438
12.5 Tools für den Export und Styleguides
441
12.5.1 Plugins für Sketch über die »Sketch Toolbox« ­installieren
441
12.5.2 Plugins für Photoshop
442
13 Apps erfolgreich in App Stores präsentieren
445
13.1 Die Rolle der App Stores
445
13.1.1 Die Marktsituation
445
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
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