E-Book, Deutsch, 680 Seiten
Reihe: Rheinwerk Design
Das umfassende Handbuch
E-Book, Deutsch, 680 Seiten
Reihe: Rheinwerk Design
ISBN: 978-3-8362-7052-6
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
Aus dem Inhalt:
Ideen finden und umsetzen
Konzeption
Usability und User Experience
Gestaltungsgrundlagen
Farblehre, Farbe auf Bildschirmen
Typografie
Grafiken, Bilder, Icons
Mock-ups, Wireframes & Prototypen
Testen und optimieren
Marktstrategien
Präsentation der App in den App Stores
Für Android und iOS
Die Fachpresse zur Vorauflage:
c't: »Der Autor macht haptische und audiovisuelle Merkmale moderner Apps dingfest.«
PAGE: »Rundumschlag von der Ideenfindung bis zum interaktiven Prototyp!«
iX - Magazin für professionelle Informationstechnik: »Das vollfarbige Buch lohnt sich für all jene, die wenig Erfahrungen auf diesem Gebiet haben - die Abschnitte zu Typografie und Farbenlehre sind ebenfalls hilfreich.«
Autoren/Hrsg.
Weitere Infos & Material
Vorwort ... 17
1. Der Smartphone- und Tablet-Boom ... 21
1.1 ... iPhone und iPad als Wegbereiter ... 21
1.2 ... Immer dabei und always on ... 26
1.3 ... Was macht eine gute App aus? ... 29
1.4 ... Tablets, Smartphones und Wearables ... 36
1.5 ... Die richtige Entwicklungsstrategie für die App ... 45
1.6 ... Design und Technik ... 52
2. Konzeption und Ideenfindung ... 59
2.1 ... Die App-Idee ... 59
2.2 ... Markt und Aufbau von App Stores ... 69
2.3 ... Welches Problem lösen Sie mit Ihrer App? ... 77
2.4 ... Wer ist Ihre Zielgruppe? ... 84
2.5 ... Die Bewertung Ihrer Idee ... 91
2.6 ... Auf welcher Plattform sollten Sie Ihre Idee umsetzen? ... 95
3. Think big, but build small ... 103
3.1 ... Wie Anwender Ihre Geräte und Apps nutzen ... 103
3.2 ... Der Nutzungskontext ... 113
3.3 ... Kleine Bildschirme, aber großes Design ... 118
3.4 ... Portrait und Landscape ... 121
3.5 ... Die Bedienung per Finger ... 127
3.6 ... Das richtige Gefühl -- die Touchbedienung ... 130
3.7 ... Die Smartphone-Bedienung ... 137
3.8 ... Die Tablet-Bedienung ... 142
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.2 ... Welche Arten von User Research gibt es? ... 158
4.3 ... Wann sollte man User Research durchführen? ... 164
4.4 ... Wie geht man bei der User Research vor? ... 171
4.5 ... Wie führt man einzelne User-Research-Methoden durch? ... 188
4.6 ... Wie bereitet man Erkenntnisse der User Research auf? ... 213
4.7 ... Welche ethischen Aspekte sind zu beachten? ... 221
5. Usability, User Experience und Barrierefreiheit ... 225
5.1 ... Was ist Usability? ... 225
5.2 ... Was ist User Experience? ... 232
5.3 ... Zehn Regeln für gutes Interaktionsdesign ... 248
5.4 ... Barrierefreiheit ... 252
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.3 ... Holen Sie Ihre Nutzer ab ... 267
6.4 ... Benutzerfreundliche Bedienung und Dateneingabe ... 284
6.5 ... Informieren Sie den Nutzer darüber, was passiert ... 291
6.6 ... Stolperfallen -- woran Nutzer die Lust verlieren ... 308
7. UI-Prinzipien und Konventionen ... 311
7.1 ... Jede Plattform ist anders ... 311
7.2 ... Informationsarchitektur und Navigation ... 322
8. Von Controls, Views und Komponenten bis Atomic Design und Design-Systemen ... 335
8.1 ... Was sind Controls und Views? ... 335
8.2 ... Die Standard-Controls von iOS ... 337
8.3 ... Die Standard-Controls von Android ... 371
8.4 ... Custom-Controls und Custom-Components ... 398
8.5 ... Atomic Design ... 402
8.6 ... Design-Systeme ... 406
8.7 ... Fazit ... 422
9. Vom Papier zum interaktiven Prototyp: Wireframe, Mock-up & Co. ... 425
9.1 ... Der iterative Design-Prozess ... 427
9.2 ... Stift und Papier -- eine erste Skizze der App ... 429
9.3 ... Wireframe -- es wird konkreter ... 434
9.4 ... Mock-ups -- jetzt wird's bunt ... 438
9.5 ... Interaktive Prototypen -- der erste echte Eindruck ... 440
9.6 ... Wireframe- und Mock-up-Tools ... 445
9.7 ... Grafik- und Zeichenprogramme ... 448
9.8 ... Tools für das Rapid Prototyping ... 460
10. Inspiration und Trends ... 467
10.1 ... Inspiration im Netz ... 467
10.2 ... Das Moodboard ... 479
10.3 ... Aktuelle Trends, Stilrichtungen ... 484
10.4 ... Umsetzung und Design ... 491
11. Typografie für kleine Bildschirme ... 501
11.1 ... Was ist Typografie? ... 502
11.2 ... Grundsätzliches zur Schrift ... 503
11.3 ... Kategorien von Schriften ... 507
11.4 ... Systemschriften ... 514
11.5 ... Regeln für gute Typografie im App-Design ... 518
11.6 ... Empfehlenswerte Schriften für Apps ... 538
12. Farbe ... 545
12.1 ... Grundsätzliches zur Farbe ... 545
12.2 ... Farben, Stimmungen und Assoziationen ... 550
12.3 ... Farbschemata ... 565
12.4 ... Farben im App-Design ... 577
12.5 ... Die Farbdarstellung auf Smartphone, Tablet & Co. ... 582
12.6 ... Tools, die bei der Farbwahl helfen ... 584
13. Icons, Grafiken und Bilder ... 589
13.1 ... Icons ... 590
13.2 ... Grafiken ... 605
13.3 ... Fotografien ... 609
13.4 ... Der Export ... 616
13.5 ... Tools für den Export und Styleguides ... 625
14. Apps erfolgreich in App Stores präsentieren ... 629
14.1 ... Die Marktsituation ... 629
14.2 ... Wie Sie Ihre App im App Store richtig in Szene setzen ... 632
14.3 ... Warum das App-Icon so wichtig ist ... 652
14.4 ... Kostenlose oder kostenpflichtige App? ... 657
14.5 ... Die App ist hochgeladen -- und dann? ... 663
14.6 ... Tipps, um im Apple App Store oder im Google Play Store gefeatured zu werden ... 666
14.7 ... Schön war's ... 669
Index ... 671
1 Der Smartphone- und Tablet-Boom
Anfang 2000 wurden die ersten Mobiltelefone eingeführt, die mehr konnten, als »nur« zu telefonieren. Erstmals war es möglich, über WAP auf Inhalte im Internet zuzugreifen. Diese Entwicklung fand 2007 ihren Höhepunkt, als Apple mit der Einführung des iPhones ein komplett neues Nutzererlebnis kreierte und somit den Grundstein für das App-Design legte. In diesem Kapitel lesen Sie quasi zum Warmwerden kurz die Geschichte der Smartphones, Tablets und Wearables. Dies soll Ihnen helfen zu verstehen, was in der Vergangenheit gut, aber auch schiefgelaufen ist, und uns heute helfen, richtige oder sogar bessere Entscheidungen zu treffen. Ebenso werfen wir einen kurzen Blick auf die verschiedenen Plattformen, ihre Besonderheiten und die unterschiedlichen Entwicklungsformen von Apps. 1.1 iPhone und iPad als Wegbereiter
Mit Einführung des iPhones 2007 war schnell klar, dass dieses Gerät den Markt mobiler Endgeräte revolutionieren würde. Und tatsächlich versetzte das iPhone den Handymarkt in helle Aufregung. Quasi über Nacht wurde Apple mit dem ersten Smartphone, das sich vollständig über einen großen Touchscreen per Fingergesten bedienen ließ, zum weltweiten Trendsetter. Am ersten Verkaufstag wechselten bereits 270.000 Geräte den Besitzer, und das, obwohl der Einführungspreis des Geräts bei 599 US$ lag (nur drei Monate später senkte Apple den Preis um 200 US$). Heute kostet das Apple-Flagschiff-Smartphone iPhone X über 1.000 €. Steve Jobs betonte während seiner Vorstellung auf der »Macworld 2007« mehrfach, dass es vor allem um Bedienbarkeit gehe. Jede Funktion des iPhones lasse sich mit wenigen Berührungen steuern und sei sehr einfach zu verstehen. An diesem Prinzip hat sich auch heute nach bald zwölf Jahren und Einführung des iPhone XS nichts wesentlich geändert. 1.1.1 Das iPhone schreibt Geschichte
Wie bereits gesagt, wurde die erste iPhone-Generation am 9. Januar 2007 auf der »Macworld Conference & Expo« in San Francisco vorgestellt. Sieben Jahre zuvor begann man zunächst mit der Konzeption und der Entwicklung eines mobilen Computers mit Touchoberfläche – dem heutigen iPad. Steve Jobs erkannte jedoch, dass es klüger wäre, zunächst ein Mobiltelefon mit einer derartigen Bedienoberfläche zu entwickeln. 2004 begann man mit der Entwicklung des ersten iPhones und stellte die Entwicklung des iPads zunächst ein. Doch was machte das iPhone so besonders? Es war nicht nur ein herkömmliches Mobiltelefon, sondern es vereinigte drei Geräteklassen: einen digitalen Mediaplayer (Abspielen von Musik, Videos und Betrachten von Bildern) ein Mobiltelefon (Telefonieren, SMS-Versand, E-Mail-Funktionalität) ein Internet-Kommunikationsgerät Für den Erfolg des iPhones war aber auch vor allem die einschneidend neue und intuitive Bedienung des Geräts ausschlaggebend: Bis dato gab es keine Mobiltelefone, die über eine Multitouchoberfläche verfügten. Handys wurden entweder über eine Hardwaretastatur oder mithilfe eines Stylus bedient. Abbildung 1.1 Nostalgie: alte, relativ klobige Nokia-Handys Stylus Ein Stylus ist ein Eingabestift, der zur Bedienung von Touchscreens oder Grafiktabletts verwendet wird. Apple Pencil Mit dem iPad Pro, das 2015 von Apple auf den Markt gebracht wurde, ist nun auch der Apple Pencil erhältlich, ein Stylus für das iPad Pro. Damit lässt sich das iPad Pro mit dem Pencil bedienen. Die Bedienung durch eine Multitouchoberfläche hat einige Aspekte der Nutzerführung vereinfacht. Nahezu der gesamte Bildschirm kann seitdem genutzt werden, denn Tastatur oder andere Bedienelemente werden lediglich eingeblendet, wenn diese auch wirklich benötigt werden. Bis dahin galten Mobiltelefone als unflexible Geräte mit kleinem Bildschirm, in die neue Funktionalitäten nur schwer implementiert werden konnten. Ebenso war die Bedienung meist komplex, und das Einstellen bestimmter Funktionen glich einem Hindernislauf durch eine wenig einladende Einstellungswüste. Ein weiterer großer Sprung war 2008 die Einführung des Apple App Stores. Hier können seitdem Entwickler Applikationen, sogenannte Apps, für das iPhone anbieten und jeder Apple-iPhone-Besitzer den Funktionsumfang seines Geräts erweitern und Applikationen auf seinem Smartphone installieren. Bis dato gab es für herkömmliche Mobiltelefone keine vergleichbare Möglichkeit, die Funktionalität auszubauen. Aus dem Mobiltelefon wurde nun ein Smartphone mit nahezu der Leistung eines herkömmlichen Computers. Das iPhone brachte also auch einen komplett neuen Industriezweig auf den Weg – den der App-Entwicklung. Das iPad Zehn Jahre nachdem Apple mit der Entwicklung eines iPads begann, wurde dieses am 27. Januar 2010 erstmals der Öffentlichkeit vorgestellt. Das iPad sollte ein genauso großer Erfolg werden wie das iPhone. Alles, was man bei der Entwicklung des iPhones gelernt hatte, fand nun Anwendung im iPad. Während jedoch das iPhone für den täglichen, mobilen Gebrauch entwickelt wurde, positioniert sich das iPad mehr zwischen dem herkömmlichen Computer und dem Smartphone und dient vorwiegend der Unterhaltung des Nutzers. Zwar greift das iPad auf dieselben technologischen Errungenschaften des iPhones zurück, klassifiziert aber dennoch eine neue Geräteklasse abseits des Smartphones. Auch hier folgten viele Hersteller, die auf Basis von Android Tablet-Geräte für den Markt entwickelten. 1.1.2 Die Konkurrenz schläft nicht: Android
Mit dem iPhone begann die Ära der Smartphones und mit ihr das dauerhafte Bedürfnis nach dem völlig neuen Nutzererlebnis – persönlich, intim und absolut komfortabel. Die Konkurrenz musste reagieren und zunächst den Technologievorsprung von Apple aufholen. Bereits 2003, parallel zur Entwicklung des iPhones, entwickelte ein kleines Unternehmen namens Android Inc. in Palo Alto, Kalifornien, ein mobiles Betriebssystem auf Basis eines Linux-Kernels. Ursprünglich war die Idee, ein Betriebssystem für digitale Kameras zu entwickeln, jedoch entschloss sich das Unternehmen, in den Mobiltelefonmarkt einzusteigen. Hauptkonkurrenten waren seinerzeit Symbian und Windows Mobile, die beiden damals am häufigsten vertretenen mobilen Betriebssysteme. 2005 kaufte Google Android Inc. auf, entwickelte das Betriebssystem weiter und stellte es für eine große Gruppe Mobiltelefonhersteller (Samsung, HTC, Sony, Motorola etc.) zur Verfügung. Am 22. Oktober 2008 – also rund 1,5 Jahre nach der Veröffentlichung des iPhones – brachte HTC mit dem HTC Dream das erste Smartphone der Android-Klasse auf den Markt. Es folgten weitere Versionen für Smartphones und später auch eine Android-Version für Tablets. Auch wenn Android leichte Startschwierigkeiten hatte, so ist es mittlerweile doch zu einer erwachsenen Plattform mit einer großen Anhängerschaft herangewachsen und das meist genutzte Betriebssystem bei Smartphones. Wearables Unter Wearables versteht man tragbare Computer wie eine Smartwatch, Fitnessarmbänder oder Brillen wie die Google Glass. Ohne Frage: Wearables verändern zunehmend den Technikmarkt als Zusatzgeräte zur herkömmlichen Hardware. Zuletzt brachte Google mit Google Glass ein innovatives Produkt auf den Markt, das als erstes Wearable betrachtet werden kann. 2014 stellte Apple die erste Version der Apple Watch vor. Anders als beim iPhone und iPad waren hier aber bereits einige Hersteller Apple voraus und schon 2013 mit sogenannten Smartwatches am Markt vertreten. So zeigten Google mit der Moto 360 oder Samsung mit der Galaxy Gear, was technologisch möglich ist. Die Zeit wird zeigen, welcher Ansatz für Smartwatches der richtige ist. Mit der neueren Version der Apple Watch Series 4 ist es nun möglich, sein EKG messen zu lassen. Wearables zeichnen sich aktuell durch Fitness- oder Gesundheits-Features aus. Vielleicht legen Sie ja die ersten neuen Prinzipien für das Design der Smartwatch fest. Auf jeden Fall erwarten App-Designer auch in den nächsten Jahren spannende Herausforderungen. 1.1.3 PWAs, Hybrid-Apps, React Native und Flutter, andere mischen mit
PWAs, Hybrid-Apps PWAs oder Hybrid-Apps sind im Grunde Webseiten mit angereicherten nativen Funktionen. Sie können sich hierbei eine responsive Webseite für Ihr Smartphone vorstellen. PWAs sind Apps die vorzugsweise im Browser genutzt werden. In Teilen ist es möglich, native Funktionen anzusprechen, so kann die Kamera oder die Ortungsfunktion genutzt werden. Hybrid-Apps sind eine Mischung aus Nativen- oder Webkomponenten. Diese Hybrid-Apps können in den jeweiligen App Stores bereitgestellt und angeboten werden. Solche Apps werden mit Webtechnologien wie CSS, HTML und Javascript...
