Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

7 Tipps für großartiges Mobile-App-Design

(Grafik: Shutterstock)

Beim Gestalten für kleinere Bildschirme muss dein UI-Design in Gedankenschnelle funktionieren. Idealerweise sollte das Interface einfach genug für Erstnutzer sein, ohne erfahrene Nutzer zu langweilen. 

7tipps01
Wenig Platz, aber hohe Ansprüche an Komfort und Schnelligkeit: Mobile Apps stellen Designer vor große Herausforderungen. (Foto: Omar Jordan Fawahl, Lizenz: Creative Commons 2.0)

1. Die Regeln für interaktives Design gelten überall und immer

Nur weil du weniger Bildschirmfläche zur Verfügung hast, heißt das nicht, dass die Regeln für gutes Interaction-Design hier keine Gültigkeit haben.

Lasst uns nochmal einen Blick auf die fünf Pfeiler des Interaktions-Designs werfen, bevor wir zu den Tipps übergehen, wie man benutzbare native App-Interfaces gestaltet:

  • Zielgerichtetes Design: Du sollstet für den richtigen Nutzer designen. Nutzerforschung wie etwa Umfragen und Interviews helfen dir dabei, Personas für diejenigen zu schaffen, die am ehesten deine App benutzen werden. Das ermöglicht dir, bestimmte Ziele für deine Nutzer zu formulieren und den Workflow deiner App für ihre Bedürfnisse maßzuschneidern.
  • Usability: Das klingt wie eine Selbstverständlichkeit, aber deine App muss benutzbar sein. Wenn deine Besucher die App nicht einfach verwenden können, werden sie sie sicherlich nicht aus dem App-Store herunterladen. Usability macht ein Produkt nützlich, was der erste Schritt dahin ist, beliebt zu sein.
  • Aufforderungscharakter & Anzeiger: Der Aufforderungscharakter ist die Funktion. Die Anzeiger heben den Aufforderungscharakter hervor. Blau unterstrichener Text suggeriert zum Beispiel, dass ein Klick darauf dich woanders hinführt. Verwende Anzeiger sinngemäß, sodass Nutzer nicht darüber nachgrübeln müssen, was welches UI-Element tut.
  • Erlernbarkeit: Du möchtest, dass deine Nutzer instinktiv wissen, wie sie ein Interface benutzen. An dieser Stelle kommen Design-Patterns gut gelegen, über die wir später in diesem Artikel noch sprechen werden. Gebräuchliche Patterns helfen einem neuen Nutzer, sich schnell an eine App zu gewöhnen.
  • Feedback- und Antwort-Zeit: Ein Feedback lässt Nutzer wissen, ob eine Handlung zu Ende gebracht wurde oder nicht. Das kann einfach ein Piepton sein oder - aufwendiger - ein Modalfenster. Sorge dafür, dass dein Feedback freundlich ist, menschlich, und in der Zeitspanne passiert, welche die Nielsen Norman Group in ihren Timing-Guidelines darstellt.

Wie Andrew Maier in seinem großartigen UX-Booth-Artikel herausstellt, sind diese fünf Regeln das Fundament, das du beachten solltest, bevor du anfängst, irgendeine Art von Interaktion zu designen, egal ob es für eine App ist oder nicht.

2. Wie kannst du bessere mobile Apps bauen? Kenne deine Nutzer!

Bildschirmgöße ist nicht die einzige Beschränkung bei mobilem Design. Laut Maier bilden die Nutzer die Grundlage für die Beschränkungen deiner Benutzeroberfläche. Also ist der erste Schritt bei der Erstellung einer zielgerichteten App-Benutzeroberfläche, deine Nutzer zu kennen.

7tipps02png
Zu wissen, wer am Ende deine App benutzt, gibt dir wertvolle Hinweise für die Entwicklung der Oberfläche. (Foto: Kārlis Dambrāns, Lizenz: Creative Commons 2.0)

Das sind die drei grundlegenden Taktiken, um deine Nutzer zu verstehen, wie es auch im kostenlosen Ratgeber Guide to UX Design Process and Documentation herausgestellt wird

  • Personas: Personas sind fiktionale Charaktere, modelliert aus dem erwarteten Verhalten deiner gewünschten Nutzer. Sie ermöglichen es dir herauszufinden, was die Entscheidungen der Nutzer innerhalb deiner App lenkt.
  • Nutzer-Szenarien: Szenarien ermöglichen Einblicke darin, wie eine Persona handeln wird. Mit Nutzer-Szenarien bist du in der Lage, eine Benutzeroberfläche zu gestalten, die bestmöglich zu ihnen passt und zu den Zielen, die du erreichen willst.
  • Experience-Maps: Hiermit kannst du alle möglichen Zustände für eine einzelne Interaktion entdecken. Experience-Maps zeichnen jeden Schritt auf, den Personas höchstwahrscheinlich gehen werden, wenn sie eine App benutzen. Sie helfen dir, alle Emotionen und Umstände zu verstehen, welche diese Schritte begleiten.

Wenn du das im Voraus erarbeitest, sparst du dir viel Kopfzerbrechen auf der Strecke, wie Google Ventures Braden Kovitz feststellt.

„Ersetze also das Startup-Dogma ‚Launch early und often‘ mit ‚learn early and often‘. Mir hat das die Augen geöffnet für all die verschiedenen Arten, wie Startups lernen können, und wie wertvoll Nutzerforschung für das Hauptziel eines jeden Startups sein kann.“

In anderen Worten – stelle sicher, dass du vor jeder großen Überarbeitung Usability-Test-Sessions durchführst. Du solltest mindestens Remote-Usability-Tests mit einem Service wie User-Testing durchführen, damit du sehen kannst, wie Leute deine App unter normalen Umständen nutzen. Für mehr Einblicke in Verhaltens-Nuancen (zum Beispiel Gesten und Körperhaltung) empfehlen wir die Durchführung einer persönlichen Laborsitzung mit mindestens fünf Nutzern.

Wenn du noch mehr wissen willst: Der Usability-Experte Jeff Sauros gibt exzellente Hinweise für das Testen von Mobile-Usability.

3. Das beste User-Experience-Design beginnt mit dem Festlegen der Inhalte und Nutzerströme

Design und Forschung funktionieren parallel. Du kannst zum Beispiel schnell Nutzerströme skizzieren basierend auf dem, was du bisher gelernt hast. Bevor du dich auf einen Weg festlegst, solltest du dennoch einen einfachen Prototypen bauen. Das muss nichts Großartiges sein – dein Prototyp kann auch nur auf dem Papier entstehen, damit du anfängst zu verstehen, wie sich Nutzer zwischen Inhalten und Handlungen bewegen.

7tipps03
(Foto: Rodolphe Courtier, Lizenz: Creative Commons 2.0)

Wenn du diese Bewegung eingrenzen willst, kannst du den „Writing-First“-Ansatz verwenden, über den Jessica Downey in ihrem großartigen Artikel „Jumpstarting Your App Conception Without Sketching UI“ schreibt. Diese Abgrenzungs-Methode hilft dabei, Ideen auszuarbeiten und eine „einfache Verständlichkeit“ jeder Seite deiner App zu erstellen.

Lasst uns als Beispiel so etwas für eine Banking-App erstellen. Das Szenario: Jemand möchte Auto-Deposit einstellen.

Auto-Deposit aus (Auto-Deposit einstellen) Deposit-Frequenz festlegen (einmal pro Monat) (zweimal pro Monat) (jede zweite Woche) (jede Woche) Deposit Einmal pro Monat (wähle einen Kalendertag) Summe festlegen (Summe eingeben) (auto-Deposit einstellen)

Vor dem Skizzieren oder Prototyping hilft dir eine schriftliche Eingrenzung dabei, den wichtigsten Teil deiner App zu erkunden – den Inhalt. Ströme rund um Inhalte zu schaffen, bringt dich zu einer viel akkurateren Einschätzung der ingesamt für deine App benötigten Seiten.

Als nächsten Schritt könntest du nun für jede Seite eine Skizze deines Flows erstellen (in diesem Fall könntest du vier Skizzen anfertigen). Darauf aufbauend könntest du die Skizzen weiter auf Papier überarbeiten und sie für einen Papier-Prototypen ausschneiden, oder in ein digitales Prototyping-Tool übertragen.

Die Ausarbeitung hilft dir dabei, schnell unterschiedliche Seiten-Ströme zu erkunden. Die Skizzen verdeutlichen diese Ströme mit mehr Details in Layout und Struktur. Schlussendlich hilft dir ein schneller Prototyp dabei, diese Ideen an Nutzern zu testen.

4. Verbessere deine Usability mit gebräuchlichen mobilen Patterns

Mobiles Design dreht sich um viele gerätespezifische Nuancen, so wie die Position des Daumens, die Ausrichtung und Körperhaltung.

Untersuche beliebte Oberflächen und studiere die gebräuchlichsten mobilen Patterns, wie etwa ein seitlich herausfahrendes Menü (siehe unten). Das wird dich in die Lage versetzen, eine Benutzeroberfläche zu schaffen, in der sich deine Nutzer „Zuhause“ fühlen, wie es im Treehouse-Blog steht.

7tipps04
Die Verwendung von gewohnten Bedienelementen, wie hier das seitlich herausfahrende Navigationsmenü, gibt Nutzern ein vertrautes Gefühl. (Screenshot: Lyft)

Wir sagen nicht, dass du einfach das Design von anderen kopieren sollst. Verwende übliche Benutzeroberflächen-Patterns als Grundlage für gute Benutzbarkeit, dann gib deine eigene Kreativität dazu. Indem du das tust, stellst du sicher, dass dein App-Design die Erwartungen deiner Nutzer erfüllt, ohne sich langweilig anzufühlen.

Wie das kostenlose E-Book Mobile UI Design Patterns zeigt, gibt es zwei Kategorien von Interaction-Design-Patterns, die du für gutes mobiles Design beherrschen solltest.

  • Gesten: Touch-Geräte leben von Gesten. Berührungen, Wischen, Doppelklick und Zoomen gehen Nutzern in Fleisch und Blut über. Folge Luke Wroblewskis Gesture-Guide, damit dein Interaktions-Design stets sinnvoll ist.
  • Animationen: Bewegung verbindet Nutzer mit der UI, während sie gleichzeitig Inhalte hinzufügt. Es gibt einen Unterschied zwischen Elementen, die verschwinden und solchen, die aus dem Blickfeld rutschen. Erstere werden gelöscht, letztere stehen dem Nutzer für eine spätere Verwendung zur Verfügung. Wenn Animationen mit Gesten kombiniert werden, fügen sie dem Erlebnis eine neue Tiefe hinzu.
7tipps05
Die verschiedenen Gesten zur Bedienung von Touch-Geräten sind Nutzern bereits in Fleisch und Blut übergegangen. (Grafik: “Android UI Design — Touchscreen Gestures,” hsigmond, Lizenz: Creative Commons 3.0)

Mobile Interaktions-Muster helfen bei der Bestimmung von Layouts für übliche Interface-Elemente. Navigations-Buttons sind zum Beispiel am Ende des Bildschirms für Nutzer besser per Daumen klickbar als Buttons am oberen Rand.

7tipps06
Große Buttons am unteren Bildschirmende sind bequem per Daumen klickbar. (Screenshot: Yelp)

Yelp ist ein gutes Beispiel für intuitives mobiles Interaktions-Design. Die App ist sehr clean, mit hübschen, großen Buttons, die ihren Zweck anzeigen. Die klaren Labels der Buttons sind für wirklich jeden Nutzer leicht verständlich. Darüberhinaus nutzt die App einige übliche mobile UI-Patterns, wie etwa die Toolbar am unteren Rand – ein Pattern, das man in vielen nativen Apps sieht.

Wenn es um Text geht, solltest du sicherstellen, dass die Sprache immer leicht verständlich ist. Hier ein paar Tipps für Texte:

  • Formuliere Beschriftungen posititv, damit Nutzer das Gefühl haben, Kontrolle zu besitzen.
  • Wichtige Begriffe müssen zuerst auftauchen. Mobile Nutzer sind besonders ungeduldig, verwende also „Ganzer Name“ anstatt „Name (vollständig)“.
  • Texte sollten konsistent und über alle Screens hinweg einheitlich formatiert sein.

Sieh dir für tolle Interface-Beispiele, die alle gestischen, animierten und textlichen Nuancen von mobilen Design enthalten, die UI-Bibliotheken capptivate und Use Your Interface an.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen