Besseres Mobile-App-Design: Optimale Usability für iOS und Android
Von Melinda Albert
()
Über dieses E-Book
Ähnlich wie Besseres Mobile-App-Design
Ähnliche E-Books
Microsoft KINECT: Programmierung des Sensorsystems Bewertung: 0 von 5 Sternen0 BewertungenF#: Ein praktischer Einstieg Bewertung: 0 von 5 Sternen0 BewertungenMobile App Testing: Praxisleitfaden für Softwaretester und Entwickler mobiler Anwendungen Bewertung: 0 von 5 Sternen0 BewertungenSEO mit Google Search Console: Webseiten mit kostenlosen Tools optimieren Bewertung: 0 von 5 Sternen0 BewertungenBootstrap kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenWindows-8-Apps für C#-Entwickler: Design-Guidelines, Anleitungen, Best Practices Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren von Kopf bis Fuß Bewertung: 4 von 5 Sternen4/5Weniger schlecht über IT schreiben: Die Schreibwerkstatt für IT-Erklärer Bewertung: 0 von 5 Sternen0 BewertungenCross-Plattform-Entwicklung mit HTML und JavaScript Bewertung: 0 von 5 Sternen0 BewertungenUX Design - Definition und Grundlagen: Definition und Grundlagen Bewertung: 4 von 5 Sternen4/5Programmieren für Einsteiger: Teil 1 Bewertung: 0 von 5 Sternen0 BewertungenHTML5, JavaScript und jQuery: Der Crashkurs für Softwareentwickler Bewertung: 2 von 5 Sternen2/5Programmieren lernen mit Python 3: Schnelleinstieg für Beginner Bewertung: 0 von 5 Sternen0 BewertungenModerne Webentwicklung: Geräteunabhängige Entwicklung -- Techniken und Trends in HTML5, CSS3 und JavaScript Bewertung: 0 von 5 Sternen0 BewertungenUX-Missverständnisse: Was sich User wirklich wünschen Bewertung: 0 von 5 Sternen0 BewertungenKompaktkurs C# 7 Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren für Einsteiger: Teil 2 Bewertung: 0 von 5 Sternen0 BewertungenMeine erste App Bewertung: 0 von 5 Sternen0 BewertungenC++17: Praxiswissen zum neuen Standard. Von C++11 bis 17 Bewertung: 0 von 5 Sternen0 BewertungenDurchstarten mit Swift: Apples neue Programmiersprache - Schritt für Schritt verständlich und gut erklärt Bewertung: 0 von 5 Sternen0 BewertungenZukunftssichere Architektur: So bauen Sie monolithische Anwendungen zu komponentenorientierten um Bewertung: 0 von 5 Sternen0 BewertungenMobile Web-Apps mit JavaScript: Leitfaden für die professionelle Entwicklung Bewertung: 0 von 5 Sternen0 BewertungenBaukunst für Softwarearchitekten: Was Software mit Architektur zu tun hat Bewertung: 0 von 5 Sternen0 BewertungenConversion-Optimierung: Praxismethoden für mehr Markterfolg im Web Bewertung: 0 von 5 Sternen0 BewertungenUX Design für Tablet-Websites: Ein Überblick Bewertung: 0 von 5 Sternen0 BewertungenUser - Interface - Design: Usability in Web- und Software-Projekten Bewertung: 0 von 5 Sternen0 BewertungenPraxiseinstieg Deep Learning: Mit Python, Caffe, TensorFlow und Spark eigene Deep-Learning-Anwendungen erstellen Bewertung: 0 von 5 Sternen0 BewertungenPrinzipien des Softwaredesigns: Entwurfsstrategien für komplexe Systeme Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren lernen mit Computerspielen: In Visual Basic 5.0 / 6.0 Bewertung: 0 von 5 Sternen0 BewertungenAndroid mit Kotlin – kurz & gut: Inklusive Android 8 und Android Studio 3.0 Bewertung: 0 von 5 Sternen0 Bewertungen
Anwendungen & Software für Sie
Php E Mysql Bewertung: 0 von 5 Sternen0 BewertungenCoole Bilder mit dem Smartphone: Der komplette Fotokurs Apple, Samsung, Sony und andere Bewertung: 0 von 5 Sternen0 BewertungenLerne lieber gehirngerecht! (E-Book): Wie man neuronale Potenziale nutzen und erweitern kann Bewertung: 0 von 5 Sternen0 BewertungenHigh-End-Röhrenschaltungen: So bauen Sie professionelle High-End Ein- und Gegentaktverstärker Bewertung: 0 von 5 Sternen0 BewertungenDie 50 besten Rallye- und Geländespiele - eBook Bewertung: 0 von 5 Sternen0 BewertungenDie achtsame Schule: Achtsamkeit als Weg zu mehr Wohlbefinden für Lehrer und Schüler Bewertung: 0 von 5 Sternen0 BewertungenDie Verwendung von TurboCAD in technischen Berufen: Zur Erstellung von technischen Zeichnungen und Konstruktionen für Zeichner, Techniker und Ingenieure Bewertung: 0 von 5 Sternen0 BewertungenDie Methodenbibel Bd. 2: Neues Testament: Geburt und Leben Jesu Bewertung: 0 von 5 Sternen0 BewertungenDas Spotify-Buch Bewertung: 0 von 5 Sternen0 BewertungenDie 50 besten Spiele für Mathe. Klasse 1-2 - eBook Bewertung: 0 von 5 Sternen0 BewertungenDie achtsame Schule - Praxisbuch: Leicht anwendbare Anleitungen für die Vermittlung von Achtsamkeit Bewertung: 0 von 5 Sternen0 BewertungenOpenSCAD verstehen und richtig anwenden: Eine praktische Einführung in OpenSCAD für den 3D-Druck Bewertung: 5 von 5 Sternen5/5Ubuntu für Einsteiger Bewertung: 4 von 5 Sternen4/5Vom imaginären Leben in der Spätmoderne: Wie technische Bilder die Realität beeinflussen Bewertung: 0 von 5 Sternen0 BewertungenMalen mit dem iPad Bewertung: 0 von 5 Sternen0 BewertungenLinux-Musikserver - Die Anleitung: 1hourbook Bewertung: 0 von 5 Sternen0 BewertungenFotografie Lost Places: Fotografische Abenteuer in verborgenen Welten. Bewertung: 0 von 5 Sternen0 BewertungenGlauben ist menschlich: Argumente für die Torheit vom gekreuzigten Gott Bewertung: 0 von 5 Sternen0 BewertungenHilfreiche Programme für Linux-Einsteiger Bewertung: 0 von 5 Sternen0 BewertungenVisio 2013/2016: Das Handbuch für Anwender Bewertung: 0 von 5 Sternen0 BewertungenExcel 2016 . Probleme und Lösungen . Band 2 Bewertung: 0 von 5 Sternen0 BewertungenVisio 2019: Das Handbuch für Anwender Bewertung: 0 von 5 Sternen0 BewertungenACCESSOIRES - Digital Zeichnen mit Adobe Illustrator: Techniken & Tipps Bewertung: 3 von 5 Sternen3/5Nimm den Chor doch selber auf: Crashkurs für das Aufnehmen und Mischen von Chören Bewertung: 0 von 5 Sternen0 BewertungenErlebnispädagogik im Klassenzimmer: Praktische Übungen zur Wissensvermittlung Bewertung: 0 von 5 Sternen0 BewertungenExcel 2016 . Probleme und Lösungen . Band 1 Bewertung: 0 von 5 Sternen0 Bewertungen
Rezensionen für Besseres Mobile-App-Design
0 Bewertungen0 Rezensionen
Buchvorschau
Besseres Mobile-App-Design - Melinda Albert
Bösel
1 Die Navigation für iPhone- und Android-Apps auswählen
Noch stehen Sie ganz am Anfang und vermutlich treibt Sie eine App-Idee ziemlich zügig zur Frage, auf welcher Plattform – Apples iOS oder Googles Android – Sie Ihre Idee entwickeln und umsetzen möchten. Oder aber Sie möchten eine bestehende Applikation auch auf anderen Plattformen anbieten. In beiden Fällen stellt sich dann die Folgefrage, wie eine geeignete, plattformspezifische Navigation ausschauen könnte, um Benutzern eine intuitive Bedienung zu ermöglichen. Um diese manchmal nicht ganz einfache Entscheidung treffen zu können, ist es wichtig, dass Sie die gängigsten Navigationsmodelle¹ kennen. Lernen wir sie kennen:
Die Baumstruktur
Die Tab-Bar-Navigation
Die Blatt-für-Blatt-Navigation
Die Grid-Navigation
Die Sidebar-Navigation
Das Dashboard
Kombinierte Navigationsmodelle
Apps mit individueller Navigation
1.1 Die Baumstruktur
Vergleichen Sie die Baumstruktur mit dem Aufbau eines Baums, den der User bis zum Gipfel emporklettert. Immer wieder trifft er auf Astgabelungen, an denen er sich für den weiteren Weg entscheiden muss. Die Baumstruktur bietet also eine hierarchische Nutzerführung, die – meist in Listenform dargestellt – von einem Screen zum nächsten führt, bis der Zielbildschirm erreicht ist.²
Eines ist allerdings klar: Die Baumstruktur zählt nicht unbedingt zu den spannendsten, aber sicher zu den bewährtesten Navigationsmodellen im App-Design. Sie ist eine hervorragende Wahl für eine übersichtliche Darstellung mehrerer Kategorien. Gleichwertige Informationsblöcke können hier in nach unten scrollbaren Listen aufgeführt werden, bei denen der User über die jeweiligen Listeneinträge in tiefer liegende Hierarchieebenen gelangt. Mit dem Zurück-Button der Navigations- oder der App-Bar-Leiste (je nach System) navigiert er hierarchisch wieder zurück.³
Abbildung 1.1: Beispiele für eine Navigation mit Baumstruktur auf dem iPhone – Elevatr, Nachrichten, Notizen
Abbildung 1.2: Android-Beispiele für eine Hauptnavigation in Form der Baumstruktur: Messenger, Koalcat’s Clear und die Android-Einstellungen
1.2 Die Tab-Bar-Navigation
Mithilfe der Tab-Bar-Navigation machen Sie die wichtigsten Navigationspunkte jederzeit für den Benutzer erreichbar, denn wie das Wörtchen Bar beschreibt, ist eine permanente Leiste am oberen oder unteren Bildschirmrand vorhanden und mit Tabs, sprich Schaltflächen, bestückt. Je nach Inhalt der App vereinen diese Tabs also grundlegende Funktionen oder Modi und sind aus jeder Ebene heraus bedienbar. Ein gutes Beispiel zeigt sich in der App Kitchen Stories, die die fünf wichtigsten Funktionen in einer Tab Bar unterbringt, nämlich Rezepte, Küchentipps, Meine Rezepte, Einkaufsliste und Grundlagen.
Wenn Ihre App zu wenige gleichrangige Navigationspunkte beinhaltet, um den App-Bildschirm zu füllen, und in naher Zukunft auch keine neuen Punkte geplant sind, bietet sich eine Tab-Bar-Navigation an.⁴
Abbildung 1.3: Beispiele für iPhone-Apps, die eine Tab Bar nutzen: Kitchen Stories, Musik-App, Twitter
Abbildung 1.4: Beispiele für Android-Apps, die eine Tab-Bar-Navigation mit Icon oder Texttabs nutzen: Kontakte-App, Timely und Skype
Tipp: iOS vs. Android
Die Tab Bar ist sowohl in iPhone- als auch Android-Apps ein Standardelement. Lediglich in ihrer Positionierung und im Inhalt unterscheiden sich die beiden Systeme. Während die iOS Tab Bar am unteren Bildschirmrand zu finden ist und bis zu fünf Icons und/oder Textelemente beinhaltet, enthält die Android Tab Bar ausschließlich entweder Textinhalte oder Icons und ist am oberen Rand befindlich. Weiterführendes finden Sie in Kapitel 2.3.
Eine weitere Besonderheit der Android Tab Bar sind scrollbare Tabs. Möchten Sie in Ihrer App eine größere Anzahl an Tabs abbilden, sind überzählige Tabs, die keinen Platz mehr finden, durch horizontales Scrollen der Leiste nach links und rechts erreichbar. Scrollbare Tabs kollidieren allerdings mit der weiter unten vorgestellten Blatt-für-Blatt-Navigation.
In iPhone-Apps wird häufig der fünfte, in Abbildung 1.5 mit Mehr betitelte Tab, dazu genutzt, weitere Navigationspunkte in einer beliebig langen Liste unterzubringen. Benutzerfreundlicher ist es jedoch, die Navigationspunkte eindeutig zu benennen.
Abbildung 1.5: Der Mehr-Button innerhalb der Tab Bar am Beispiel der iPhone-App iTunes Store. Dieser öffnet eine Liste weiterer Navigationspunkte
1.3 Die Blatt-für-Blatt-Navigation
Abbildung 1.6: Ein vereinfachtes Schema für die Blatt-für-Blatt-Navigation
Im Gegensatz zur hierarchischen Baumstruktur bietet die Blatt-für-Blatt-Navigation weniger verzweigte Auswahlmöglichkeiten für den User. Die flache Hierarchie lässt im Grunde nur zwei Möglichkeiten offen: nach links oder rechts. Vergleichbar ist die Blatt-für-Blatt-Navigation mit auf dem Schreibtisch aufgereihten Papierblättern, von denen immer nur eines sichtbar ist.
Für Apps mit überschaubaren und vor allem gleichwertigen Inhalten ist die Blatt-für-Blatt-Navigation eine solide, einfach zu bedienende Lösung. In vielen Wetter-Apps zum Beispiel lassen sich sämtliche Städte durch bequemes Swipen, also durch Wischbewegungen mit dem Finger, durchblättern und jeweils in voller Bildschirmgröße darstellen.
Die Blatt-für-Blatt-Navigation verhält sich allerdings linear, das heißt: User müssen unter Umständen ein Dutzend Wischbewegungen ausüben, um ans Ziel zu gelangen. Bewährt hat sich dieses Modell bei maximal sieben bis neun Seiten (den sogenannten Flat Pages) – je weniger, desto besser.
Abbildung 1.7: In den iPhone-Apps Wetter, Regenschirm und Tipps navigieren User mit horizontalen Wischbewegungen durch die Blatt-für-Blatt-Navigation