1 Der Smartphone- und Tablet-Boom

21

1.1 iPhone und iPad als Wegbereiter

21

1.1.1 Das iPhone schreibt Geschichte

22

1.1.2 Die Konkurrenz schläft nicht: Android

23

1.1.3 PWAs, Hybrid-Apps, React Native und Flutter, andere mischen mit

24

1.2 Immer dabei und always on

26

1.2.1 Ständig erreichbar

26

1.2.2 Der besondere Kontext

27

1.3 Was macht eine gute App aus?

29

1.3.1 Eine gute App erfüllt einen Zweck

29

1.3.2 Eine gute App ist schnell und spart Zeit

31

1.3.3 Eine gute App sieht gut aus und fühlt sich gut an

32

1.4 Tablets, Smartphones und Wearables

36

1.4.1 Das Smartphone und Phablet

36

1.4.2 Das Tablet

37

1.4.3 Wearables

38

1.4.4 Die Betriebssysteme

40

1.4.5 Exkurs: Mobile Geräte verändern unser Verhalten

44

1.5 Die richtige Entwicklungsstrategie für die App

45

1.5.1 Umsetzbarkeit von Design

45

1.5.2 Was ist eine native App?

46

1.5.3 Was ist eine Web-App?

48

1.5.4 Was ist eine Hybrid- bzw. PWA-App?

50

1.6 Design und Technik

52

1.6.1 Designer

52

1.6.2 Entwickler

54

1.6.3 Das Beste aus beiden Welten

55

2 Konzeption und Ideenfindung

59

2.1 Die App-Idee

59

2.1.1 Am Anfang steht die Idee

60

2.1.2 Ideen brauchen Kontext und fundierte Kenntnisse

60

2.1.3 Hilfestellung bei der Ideenfindung: Kreativitätstechniken

62

2.1.4 Ideen konkretisieren

66

2.1.5 Von erfolgreichen Apps lernen

67

2.2 Markt und Aufbau von App Stores

69

2.2.1 Kategorien von App Stores: Spiele, Social Media & Co.

69

2.2.2 Die populärsten Kategorien

70

2.2.3 Vom Angebot lernen

77

2.3 Welches Problem lösen Sie mit Ihrer App?

77

2.3.1 Kategorien von Problemlösungen

78

2.3.2 Was macht Ihre App zu etwas Besonderem?

83

2.4 Wer ist Ihre Zielgruppe?

84

2.4.1 Die Zielgruppe definieren

85

2.4.2 Braucht Ihre Zielgruppe diese App?

86

2.4.3 Personas

87

2.4.4 Konkurrenz- und Mitbewerberanalyse

89

2.4.5 Apps für die Masse oder nur für einen kleinen Kreis?

90

2.5 Die Bewertung Ihrer Idee

91

2.5.1 Dotmocracy: Bewertung mit Punkten

91

2.5.2 Bewertung nach vordefinierten Kriterien

91

2.5.3 Bewertung mit der Nutzwertanalyse

92

2.5.4 Bewertung durch SWOT-Analyse

93

2.6 Auf welcher Plattform sollten Sie Ihre Idee umsetzen?

95

2.6.1 Native versus Cross-Plattform-Entwicklung

96

2.6.2 Die Besonderheiten von iOS

96

2.6.3 Die Besonderheiten von Android

99

3 Think big, but build small

103

3.1 Wie Anwender Ihre Geräte und Apps nutzen

103

3.1.1 Daten zur Smartphone-, Tablet- und Wearable-Nutzung

103

3.1.2 Eine Woche ohne Computer

106

3.1.3 Weniger ist mehr

109

3.1.4 Mentale Modelle

111

3.1.5 Jedes Betriebssystem ist eine in sich geschlossene Welt

111

3.2 Der Nutzungskontext

113

3.2.1 Beispiele für Apps, die den Nutzungskontext beachten

113

3.2.2 Nutzungssituationen

115

3.3 Kleine Bildschirme, aber großes Design

118

3.3.1 Der Touchscreen

118

3.3.2 Bildschirmgrößen bei Android-Geräten

118

3.3.3 Bildschirmgrößen bei iOS-Geräten

119

3.3.4 Bildbenennung bei iOS-Geräten

119

3.3.5 Bildbenennung bei Android-Geräten

120

3.3.6 Bildschirme von Wearables

120

3.3.7 Fazit

121

3.4 Portrait und Landscape

121

3.4.1 Orientation Design Models

122

3.5 Die Bedienung per Finger

127

3.5.1 Kleine Bedienelemente, große Probleme

127

3.5.2 Zeigefinger und Daumen

128

3.5.3 Pixelbreite von Fingern

129

3.6 Das richtige Gefühl – die Touchbedienung

130

3.6.1 Besonderheiten der Bedienung

131

3.6.2 Gesten: drücken, wischen, tippen …

132

3.6.3 Hotspots: Wohin schaut der Nutzer?

134

3.7 Die Smartphone-Bedienung

137

3.7.1 Mit nur einer Hand

137

3.7.2 Haltung im Portrait-Modus/Landscape-Modus

137

3.7.3 Der Daumen als Entdecker

138

3.7.4 Die Home-Buttons

140

3.8 Die Tablet-Bedienung

142

3.8.1 Frei-, ein- oder zweihändig?

142

3.8.2 Schutzzonen einrichten

144

3.8.3 Accessoires

146

3.9 Die Bedienung von Wearables

147

3.10 Internet der Dinge oder Industrie 4.0

149

4 User Research

153

4.1 Was ist User Research und warum ist sie so wichtig?

154

4.1.1 Begriffsdefinition User Research

154

4.1.2 Gründe für User Research

156

4.1.3 Vorurteile und Gründe gegen User Research

157

4.2 Welche Arten von User Research gibt es?

158

4.2.1 Qualitative und quantitative Dimension

160

4.2.2 Attitudinal und Behavioral-Dimension

161

4.2.3 Context of Use-Dimension

162

4.2.4 Mixed Methods

163

4.3 Wann sollte man User Research durchführen?

164

4.3.1 Die Phasen in nutzerzentrierten Innovationsprojekten

164

4.3.2 Einsatz von User Research in Ihrem Projekt

168

4.3.3 Wie beginnen Sie mit User Research?

169

4.4 Wie geht man bei der User Research vor?

171

4.4.1 Definition des Scopes

172

4.4.2 Vorbereitung der Research

172

4.4.3 Durchführung der Research

179

4.4.4 Analyse und Synthese der Research

184

4.4.5 Kommunikation der Erkenntnisse

187

4.5 Wie führt man einzelne User-Research-Methoden durch?

188

4.5.1 Qualitative Interviews – die Nutzer befragen

188

4.5.2 Kontextanalysen – die Nutzer beobachten

200

4.5.3 Usability Testing – die Nutzer mit Ihrem Produkt interagieren lassen

205

4.6 Wie bereitet man Erkenntnisse der User Research auf?

213

4.6.1 Frameworks zur klaren Darstellung Ihrer Erkenntnisse

213

4.6.2 Ideen zur überzeugenden Kommunikation Ihrer Erkenntnisse

221

4.7 Welche ethischen Aspekte sind zu beachten?

221

5 Usability, User Experience und Barrierefreiheit

225

5.1 Was ist Usability?

225

5.1.1 Merkmale guter Usability

226

5.1.2 Usability-Vergleich zweier To-do-Apps

227

5.1.3 Zentrale Aspekte einer gelungenen Usability

231

5.1.4 Usability vs. Aussehen: Entweder oder?

231

5.2 Was ist User Experience?

232

5.2.1 User Experience und Informationsarchitektur

233

5.2.2 Warum es sich lohnt, in eine gute UX zu investieren

241

5.2.3 Schönheit und Emotionalität

243

5.3 Zehn Regeln für gutes Interaktionsdesign

248

5.4 Barrierefreiheit

252

5.4.1 Grenzen und Möglichkeiten der Betriebssysteme

254

5.4.2 Was Sie als App-Designer tun können

256

5.5 Weiter geht's

257

6 Nutzerzentriertes Design

259

6.1 Phasen nutzerorientierten Designs

260

6.2 Die Interaktion als Erlebnis designen

262

6.2.1 Gamification

263

6.2.2 Gamification in Apps

264

6.3 Holen Sie Ihre Nutzer ab

267

6.3.1 Das On-Boarding

267

6.3.2 Die Registrierung

274

6.3.3 Den Nutzer im Blick

279

6.3.4 Transitional Interfaces

279

6.4 Benutzerfreundliche Bedienung und Dateneingabe

284

6.4.1 Die richtige Positionierung von Controls

286

6.4.2 Der Einsatz von Custom-Controls

288

6.4.3 Kontextbezogene Bedienelemente und Navigation

289

6.5 Informieren Sie den Nutzer darüber, was passiert

291

6.5.1 Formen von Feedback

291

6.5.2 Wann Feedback und Notifications zu viel werden

296

6.5.3 iOS-Push-Notifications und Widgets

296

6.5.4 Android-Notifications und Widgets

299

6.5.5 Wann ist der Einsatz von Notifications empfehlenswert?

301

6.5.6 Pop-ups

304

6.5.7 Fehler- und Infomeldungen

306

6.6 Stolperfallen – woran Nutzer die Lust verlieren

308

6.6.1 In der Warteschleife

309

6.6.2 Der Ladebalken

309

7 UI-Prinzipien und Konventionen

311

7.1 Jede Plattform ist anders

311

7.1.1 Die Erwartungshaltung des Nutzers

311

7.1.2 UI-Prinzipien der Plattformen

317

7.2 Informationsarchitektur und Navigation

322

7.2.1 Der Klassiker: die hierarchische Navigation

323

7.2.2 Jede Seite für sich: Hub & Spoke

324

7.2.3 Ineinander gestapelt: Nested Doll

326

7.2.4 Für Multitasker: Tabbed View

327

7.2.5 Mehr Übersicht: Bentobox/Dashboard

329

7.2.6 Der Contentking: Navigation durch Filter

329

7.2.7 Exkurs: Navigation auf Wearables

331

7.2.8 Der Kombinator: Navigationskonzepte miteinander kombinieren

332

8 Von Controls, Views und Komponenten bis Atomic Design und Design-Systemen

335

8.1 Was sind Controls und Views?

335

8.1.1 Zusammenhang von Controls und Views

335

8.2 Die Standard-Controls von iOS

337

8.2.1 Navigationsbar

339

8.2.2 Toolbar

341

8.2.3 Tabbar

342

8.2.4 Label, System-Button, Refresher & Co.

343

8.2.5 Exkurs: Komponenten der Apple Watch

361

8.3 Die Standard-Controls von Android

371

8.3.1 Layoutprinzipien

373

8.3.2 System-, App- und Toolbar

375

8.3.3 Bottom-Navigation

378

8.3.4 Seitennavigation

378

8.3.5 Komponenten

379

8.4 Custom-Controls und Custom-Components

398

8.4.1 Side-Menü

399

8.4.2 Swipe to Choose

400

8.4.3 Animiertes On-Boarding

400

8.4.4 Diagramme

401

8.4.5 Erstellen Sie individuelle Controls

402

8.5 Atomic Design

402

8.6 Design-Systeme

406

8.6.1 Sind Design-Systeme nicht Styleguides?

407

8.6.2 Also was sind Design-Systeme dann?

407

8.6.3 Wann soll ich ein Design-System nutzen?

407

8.6.4 Die Design-System-Logik unter Sketch

409

8.6.5 Los geht’s: wir bauen ein Design-System

412

8.7 Fazit

422

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

425

9.1 Der iterative Design-Prozess

427

9.1.1 Warum überhaupt Iterationen?

428

9.2 Stift und Papier – eine erste Skizze der App

429

9.2.1 Die erste Skizze

430

9.2.2 Storyboard

431

9.3 Wireframe – es wird konkreter

434

9.3.1 Was ist ein Wireframe?

434

9.3.2 Wann werden Wireframes eingesetzt?

436

9.3.3 Was sollte ein Wireframe leisten?

437

9.4 Mock-ups – jetzt wird’s bunt

438

9.4.1 Mit richtigen Inhalten arbeiten

439

9.5 Interaktive Prototypen – der erste echte Eindruck

440

9.5.1 Was ist ein interaktiver Prototyp?

441

9.5.2 Low Fidelity – ein Wireframe-Prototyp

441

9.5.3 High Fidelity – Design-Prototyp

442

9.6 Wireframe- und Mock-up-Tools

445

9.6.1 Balsamiq Mockups

446

9.6.2 Omnigraffle

447

9.6.3 Axure

447

9.7 Grafik- und Zeichenprogramme

448

9.7.1 Pixel vs. Vektor

449

9.7.2 Adobe Illustrator für Interface Design?

450

9.7.3 Bohemian Sketch

452

9.7.4 Adobe XD

455

9.7.5 Figma

457

9.7.6 Mirror-Programme

459

9.8 Tools für das Rapid Prototyping

460

9.8.1 POP – Prototyping on Paper

460

9.8.2 Pixate

461

9.8.3 Framer.js

462

9.8.4 Flinto for Mac

463

9.8.5 Principle

464

9.8.6 Design- und Entwicklungsperspektive

465

10 Inspiration und Trends

467

10.1 Inspiration im Netz

467

10.1.1 Inspiration für Designs

467

10.1.2 Inspiration für die Ideenfindung

474

10.2 Das Moodboard

479

10.2.1 Quellen

480

10.2.2 Regeln für gute Moodboards

481

10.2.3 Moodboard-Varianten

482

10.3 Aktuelle Trends, Stilrichtungen

484

10.3.1 Flat Design – der Minimalist

484

10.3.2 Skeuomorphismus – der Realist

486

10.3.3 Fashioned – der Modische

487

10.3.4 Deep Flat

488

10.3.5 3D

490

10.4 Umsetzung und Design

491

10.4.1 Die richtige Auflösung und Größe

492

10.4.2 Bilder

495

10.4.3 Dokumentgröße

495

10.4.4 Hilfreiche Tipps und Techniken

496

11 Typografie für kleine Bildschirme

501

11.1 Was ist Typografie?

502

11.2 Grundsätzliches zur Schrift

503

11.2.1 Typografie in der Anwendung

503

11.2.2 Wesentliche Merkmale einer Schrift

504

11.2.3 Wesentliche Merkmale eines Textlayouts

506

11.3 Kategorien von Schriften

507

11.3.1 Serifenschrift

508

11.3.2 Serifenlose Schrift

509

11.3.3 Dekorative Schriften, Handschriften etc.

511

11.3.4 Schriftart, Schriftfamilie, Schriftschnitte und Schriftauszeichnung

513

11.4 Systemschriften

514

11.5 Regeln für gute Typografie im App-Design

518

11.5.1 Wo findet man Schriften fürs App-Design?

518

11.5.2 Was Sie bei der Schriftwahl beachten müssen

519

11.5.3 Lesbarkeit hat oberste Priorität

521

11.5.4 Das Look & Feel der Schrift

527

11.5.5 Schriftmischung und Auszeichnungen

528

11.5.6 Wie viel Text ist wirklich nötig?

531

11.5.7 Typografie auf Smartphones, Tablets und Wearables

532

11.5.8 Grundlinienraster (Baseline Grids)

535

11.5.9 Textelemente frühzeitig kategorisieren

536

11.6 Empfehlenswerte Schriften für Apps

538

11.6.1 »Open Sans«

538

11.6.2 »Ubuntu«

539

11.6.3 »Droid Sans«

540

11.6.4 »Source Sans Pro«

541

11.6.5 »Segoe UI«

542

11.6.6 Sonstige Schriften

542

12 Farbe

545

12.1 Grundsätzliches zur Farbe

545

12.1.1 Farbton, Sättigung, Helligkeit und Transparenz

546

12.1.2 Der Farbkreis und die Primär-, Sekundär- und Tertiärfarben

549

12.2 Farben, Stimmungen und Assoziationen

550

12.2.1 Wie Farben wirken

550

12.2.2 Farbwirkung und Farbassoziationen

552

12.3 Farbschemata

565

12.3.1 Monochrome Farbschemata

566

12.3.2 Analoge Farbschemata

569

12.3.3 Triadische Farbschemata

570

12.3.4 Farbkontraste

572

12.4 Farben im App-Design

577

12.4.1 Die 60-10-30-Regel

577

12.4.2 Fragen, die Sie sich bei der Farbgestaltung stellen sollten

578

12.4.3 Farben und das Corporate Design

579

12.4.4 Mit Farben strukturieren und leiten

580

12.5 Die Farbdarstellung auf Smartphone, Tablet & Co.

582

12.5.1 Die verschiedene Display-Typen

582

12.5.2 Farben vorab mit der Mirror-Funktion testen

584

12.6 Tools, die bei der Farbwahl helfen

584

12.6.1 Adobe Color (ehemals Adobe Kuler)

584

12.6.2 ColoRotate

586

12.6.3 Copaso

586

13 Icons, Grafiken und Bilder

589

13.1 Icons

590

13.1.1 Von guten und schlechten Icons

591

13.1.2 Arten von Icons

594

13.1.3 Tipps für gelungenes Icon-Design in Apps

596

13.1.4 Vorgefertigte Icon-Sets

602

13.2 Grafiken

605

13.2.1 Die Grafik als funktionelle Darstellung

606

13.2.2 Die Grafik als Maskottchen

607

13.2.3 Woher Grafiken beziehen?

608

13.3 Fotografien

609

13.3.1 Die Verwendung von Fotografien in Apps

609

13.3.2 Dynamische Bilder

611

13.3.3 Produktfotografien

612

13.3.4 Woher Fotografien beziehen?

614

13.4 Der Export

616

13.4.1 Styleguide (Gestaltungsrichtlinien)

616

13.4.2 Assets erstellen

617

13.4.3 Der Export unter Sketch

621

13.4.4 Der Export unter Adobe XD

621

13.4.5 Was geht nach dem Export an den Entwickler?

622

13.5 Tools für den Export und Styleguides

625

13.5.1 Tools & Plugins für Sketch über die »Sketch Toolbox« installieren

625

13.5.2 Plugins für Adobe XD

628

14 Apps erfolgreich in App Stores präsentieren

629

14.1 Die Marktsituation

629

14.1.1 Umsätze in den App Stores

631

14.1.2 Eine App für alle Plattformen?

631

14.2 Wie Sie Ihre App im App Store richtig in Szene setzen

632

14.2.1 ASO: App Store Optimization

634

14.2.2 Präsentation der App über Screenshots

637

14.2.3 Der Beschreibungstext und Keywords

641

14.2.4 Bewertungen

644

14.2.5 Ihre App auf anderen Seiten präsentieren

645

14.2.6 Preview-Videos

650

14.3 Warum das App-Icon so wichtig ist

652

14.3.1 Regeln für gut gestaltete App-Icons

653

14.3.2 Der Name Ihrer App

655

14.4 Kostenlose oder kostenpflichtige App?

657

14.4.1 Kostenpflichtige Apps

657

14.4.2 Apps mit In-App-Käufen

658

14.4.3 Apps mit Paywalls

659

14.4.4 Freemium-Apps mit Werbung

661

14.4.5 App Store Subscribtions

662

14.5 Die App ist hochgeladen – und dann?

663

14.5.1 Die App stetig verbessern

663

14.5.2 Optimierungstools für In-App-Nutzungsanalysen

665

14.6 Tipps, um im Apple App Store oder im Google Play Store gefeatured zu werden

666

14.6.1 Im Apple App Store gefeatured werden

667

14.6.2 Im Google Play Store gefeatured werden

668

14.7 Schön war's

669