Für kleine Bildschirme denken
Die besten Ideen für mobiles App-Design beginnen mit einer Person, die in einer bestimmten Situation eine Aufgabe erledigen möchte. Wählen Sie einen Moment – eine Zugverbindung prüfen, eine Mahlzeit erfassen oder einen Beleg teilen – und gestalten Sie dafür den kürzesten klaren Weg.
Ein nützliches Konzept macht die Hauptaufgabe, ihren Kontext und ihre Grenzen sichtbar. Diese Grenzen verhindern, dass ein ansprechender Bildschirm mit einem funktionierenden mobilen Erlebnis verwechselt wird.
Ein Bildschirmkonzept zeigt nicht, ob Menschen eine Geste verstehen, einen Fehler bemerken oder nach einer fehlgeschlagenen Aktion weitermachen können.
Was Sie stattdessen tun können
Beschreiben Sie die Aufgabe als kurze Abfolge. Fragen Sie dann jemanden, der das Konzept nicht kennt, worauf er als Nächstes tippen würde.
Visuelles App-Design erzeugt keine installierbare Software für Android oder iOS, keine Geräteberechtigungen und keine funktionierenden Benachrichtigungen.
Was Sie stattdessen tun können
Dokumentieren Sie das beabsichtigte Verhalten separat und prüfen Sie vor der Entwicklung die Anforderungen der Plattform.
Perfekte Beispielnamen und kurze Beschriftungen können beengte Layouts, leere Zustände und ungewöhnlich lange Inhalte verbergen.
Was Sie stattdessen tun können
Testen Sie realistische Texte, fehlende Daten und eine Fehlermeldung, bevor Sie sich auf ein Layout festlegen.
Gehen Sie von einer konkreten Situation zu einer kleinen Auswahl an Bildschirmen über. Geben Sie jedem Schritt einen Zweck, bevor Sie das Design verfeinern.
Beschreiben Sie die Person, ihr Ziel und ihren Aufenthaltsort. Wer unterwegs eine verspätete Verbindung prüft, braucht einen anderen Startbildschirm als jemand, der zu Hause eine Reise plant.
Notieren Sie den ersten Bildschirm, die Entscheidung, die er ermöglicht, und den Ergebnisbildschirm. Optionale Einstellungen und zusätzliche Informationen gehören nicht auf diesen Weg.
Prüfe die einhändige Bedienbarkeit, lesbaren Text, langsame Verbindungen und das Verhalten, wenn kein Ergebnis vorliegt. Überarbeite den Ablauf, bevor du Farben oder Illustrationen verfeinerst.
Wenn dein Konzept einen umfassenderen Ausgangspunkt, ein wiederverwendbares Layout oder plattformspezifische Prüfungen benötigt, folge dem Pfad, der zur nächsten Entscheidung passt.
Vergleiche eine ansprechende erste Skizze mit einem Konzept, das für eine praktische Prüfung bereit ist. Jede Zeile gibt dir etwas Beobachtbares, das du überprüfen kannst.
| Erste Skizze | Konzept zur Prüfungsfreigabe | |
|---|---|---|
| Primäre Aktion | Steht in Konkurrenz zu mehreren gleich auffälligen Schaltflächen. | Eine nächste Aktion ist für das unmittelbare Ziel des Nutzers klar erkennbar. |
| Navigation | Jede Funktion erscheint auf dem ersten Bildschirm. | Die Hauptaufgabe bleibt sichtbar; sekundäre Wege haben vorhersehbare Bezeichnungen. |
| Text | Kurze Platzhalterbeschriftungen lassen alles passend erscheinen. | Realistische Namen, Beträge und Anweisungen bleiben lesbar. |
| Feedback | Nur der ideale Erfolgsbildschirm wird angezeigt. | Lade-, Leer-, Fehler- und Erfolgszustände erklären, was passiert ist. |
| Touch | Bedienelemente wirken in Präsentationsgröße präzise. | Wichtige Bedienelemente lassen sich auf einem Smartphone bequem antippen. |
| Kontext | Setzt volle Aufmerksamkeit und eine zuverlässige Verbindung voraus. | Der Ablauf funktioniert auch bei Unterbrechungen und macht unsichere Daten deutlich. |
Diese Beispiele zeigen, wo ein vielversprechendes mobiles Konzept oft einen zweiten Durchgang braucht. Nutzen Sie den verlinkten Pfad, wenn diese Art der Überarbeitung zu Ihrem Schwerpunkt wird.
Ein ÖPNV-Bildschirm zeigt eine elegante Streckenkarte, doch die nächste Abfahrt ist darunter versteckt.
Platzieren Sie Abfahrtszeit, Störungsstatus und die nächste sinnvolle Aktion oberhalb der Karte. Die Karte sollte zur Orientierung verfügbar bleiben, statt zur ersten Aufgabe zu werden.
Eine gemeinsame Einkaufsliste sieht ordentlich aus, bis mehrere Personen lange Artikelnamen und Notizen hinzufügen.
Testen Sie überfüllte Zeilen, abgehakte Artikel und widersprüchliche Änderungen. Das Hinzufügen und Abhaken von Artikeln sollte einfacher bleiben als das Verwalten von Kategorien.
Ein Konzept für den Check-in bei Veranstaltungen setzt voraus, dass alle Teilnehmenden guten Empfang haben und draußen ein dicht gedrängtes Formular lesen können.
Machen Sie den Status der Teilnehmenden auf einen Blick erkennbar und planen Sie, was die Oberfläche anzeigen soll, wenn Informationen nicht aktualisiert werden können.
Ein Portfolio-Konzept beginnt mit Animationen, während Besucher vor allem ein Projekt finden und Kontakt aufnehmen möchten.
Erleichtern Sie das schnelle Sichten der Projekte und bieten Sie einen klaren Kontaktweg. Die visuelle Gestaltung sollte die Inhalte unterstützen, statt den Zugang zu ihnen zu verzögern.
Wählen Sie eine Situation aus den Beispielen oder beschreiben Sie eine eigene in einem Satz. App Design kann Ihnen einen Ausgangspunkt im Browser zeigen; prüfen Sie die verfügbaren Werkzeuge und Nutzungsbedingungen des Zielangebots, bevor Sie von einer bestimmten Funktion oder einem bestimmten Ergebnis ausgehen.
Beginnen Sie mit einer wiederkehrenden Situation statt mit einem visuellen Stil: Wer muss unter welchen Bedingungen was tun? Skizzieren Sie die erste Handlung und das gewünschte Ergebnis, bevor Sie Farben auswählen oder Referenzen sammeln.
Ein Smartphone wird oft in kurzen, unterbrochenen Sitzungen genutzt, und der Platz für verschiedene Optionen ist begrenzt. Bei einem mobilen Konzept sollte die unmittelbare Aufgabe leicht zu erkennen sein. Prüfen Sie außerdem, ob Bedienelemente, Texte und Rückmeldungen auf einem Smartphone funktionieren.
Nehmen Sie genügend Bildschirme auf, um den Einstieg, eine wichtige Entscheidung und das Ergebnis zu zeigen. Fügen Sie einen Leer- oder Fehlerzustand hinzu, wenn er beeinflusst, was die Person tun muss. Ein stimmiger Ablauf ist nützlicher als eine große Sammlung von Bildschirmen.
Es kann unklare Beschriftungen, überladene Bildschirme und fehlende Schritte sichtbar machen, aber weder die Benutzerfreundlichkeit nachweisen noch natives Verhalten umsetzen. Testen Sie die Aufgabe mit Menschen und prüfen Sie die technischen Anforderungen sowie die Plattformvorgaben, bevor Sie das Konzept als fertige App betrachten.