Erfreu Dich an Millionen von E-Books, Hörbüchern, Magazinen und mehr

Nur $11.99/Monat nach der Testversion. Jederzeit kündbar.

Besseres Mobile-App-Design: Optimale Usability für iOS und Android

Besseres Mobile-App-Design: Optimale Usability für iOS und Android


Besseres Mobile-App-Design: Optimale Usability für iOS und Android

Länge:
186 Seiten
1 Stunde
Herausgeber:
Freigegeben:
27. Mai 2016
ISBN:
9783868026849
Format:
Buch

Beschreibung

Es gibt für alles eine App, aber nicht für alles gibt es eine gute App. Was hilft der beste Inhalt, wenn schlechtes Design den Nutzer abschreckt? In diesem Buch erfahren Sie die Grundlagen eines besseren App-Designs für Smartphones. Anschaulich erläutert die Autorin, wie Sie mit Navigation, Farbgestaltung, Icondesign und vielem mehr optimale Usability und User Experience erreichen. Immer im Blick ist dabei die Portierung zwischen iOS und Android. Zahlreiche Best- und Worst-Practice-Beispiele erklären die Dos und Don'ts des Mobile-App-Designs. Mit praktischen Erfolgschecklisten für Ihre Smartphone-App.
Herausgeber:
Freigegeben:
27. Mai 2016
ISBN:
9783868026849
Format:
Buch

Über den Autor


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

Tipp: iOS

Sie haben das Ende dieser Vorschau erreicht. , um mehr zu lesen!
Seite 1 von 1

Rezensionen

Was die anderen über Besseres Mobile-App-Design denken

0
0 Bewertungen / 0 Rezensionen
Wie hat es Ihnen gefallen?
Bewertung: 0 von 5 Sternen

Leser-Rezensionen