So gestalten wir Apps

Von der Aufgabe zum durchdachten Bildschirm.

Wir gestalten, was Menschen sehen müssen, wie sie den nächsten Schritt machen und was bei einem Fehler passiert. Folgen Sie vier Schritten an einem Beispiel aus Ihrer Branche.

Das Beispiel entdeckenErzählen Sie uns von Ihrem Projekt
Wählen Sie ein Beispiel für den gesamten Ablauf

Schritt 1 · Aufgabe

Zuerst verstehen wir die Aufgabe.

Wir klären Aufgabe, Nutzer und Risiken. Danach entscheiden wir, was auf den Bildschirm gehört und was nur ablenken würde.

Geld senden und sicher sein, dass der richtige Betrag bei der richtigen Person ankommt.
Für wen wir gestaltenKundinnen und Kunden, die vom Smartphone an eine Person oder ein Unternehmen zahlen.
Was Nutzer wissen müssenBetrag, Empfänger und Kosten sind klar, bevor sich etwas bewegt.
Worauf wir achtenEine Zahlung an das falsche Konto oder an Betrüger.

Schritt 2 · Referenzen

Wie lösen andere Apps die Aufgabe?

In der Mobbin-Bibliothek vergleichen wir echte Bildschirme ähnlicher Abläufe. Wir wählen passende Muster für Ihre Aufgabe und prüfen sie im Kontext Ihres Produkts.

Muster, die wir betrachten:Zuerst Betrag und EmpfängerEine Prüfung bei neuen EmpfängernDie vollen Kosten vor dem ButtonSagen, wann das Geld ankommtEine Aktion, in Daumenreichweite

Referenzen aus der Mobbin-Bibliothek: Bildschirme öffentlicher iOS-Apps. Namen und Marken gehören ihren Inhabern. Diese Apps sind keine Kunden von Tolaron.

Schritt 3 · Entwurf

Jedes Element hat einen Grund.

Schalten Sie Elemente ein und sehen Sie, was sie ergänzen. Hinweise zur Barrierefreiheit zeigen Maße und Kontrast. Zur Prüfung der fertigen App gehören auch größere Schrift und Screenreader.

Elemente im Entwurf2 von 5
Was noch fehltEine Prüfung bei neuen Empfängern

Ohne das sieht die erste Zahlung an Betrüger aus wie jede andere.

Worauf wir beim Entwurf achten

  • Touch-Flächen: die Plattformen empfehlen mindestens 44 × 44 Punkte auf iOS und 48 × 48 dp auf Android.
  • Lesbarer Text: mindestens 4,5:1 Kontrast, bei großem Text 3:1 nach WCAG 2.2 AA.
  • Größere Schrift: die Oberfläche muss Änderungen der Textgröße unterstützen.
  • Assistive Technik: klare Beschriftungen und eine logische Lesereihenfolge für Screenreader.
  • Hilfe bei Fehlern: das Problem erklären und einen nächsten Schritt anbieten.

Schritt 4 · Kontext

Ihre Marke. Auch im Fehlerfall.

Vergleichen Sie die Entwürfe, öffnen Sie die Begründungen und testen Sie den Fehlerzustand. Andere Farben zeigen, wie dieselbe Struktur eine andere Marke tragen kann.

Zustand des Beispiels
Beispielfarben wählen
AusgangsentwurfDurchdachter Entwurf

  1. Die zwei Angaben, die Menschen zuerst prüfen, stehen oben und am größten.

    Im Ausgangsentwurf: in einem Formular verstecktReferenzen: Wise, Airwallex

Tolaron hat beide Beispielentwürfe mit erfundenen Daten erstellt. Farben neben Tolaron-Blau stehen für Beispielmarken.

Weitere Beispiele · Fintech

Derselbe Ansatz, andere Aufgaben.

Fintech-Abläufe

Start und Kontostand

  • Der Kontostand ist das Größte auf dem Bildschirm.
  • Zwei bis vier Aktionen direkt darunter.
  • Umsätze nach Tagen gruppiert, die neuesten zuerst.

Was uns aufgefallen ist: Starling zeigt neben dem Kontostand die Summe über alle Spar-Spaces.

Was das für den Entwurf bedeutet: der Startbildschirm beantwortet „Wie viel habe ich?“ auf einen Blick, und die nächste Aktion ist ein Tippen entfernt.

Referenzen aus der Mobbin-Bibliothek: Bildschirme öffentlicher iOS-Apps. Namen und Marken gehören ihren Inhabern. Diese Apps sind keine Kunden von Tolaron.

Was soll Ihre App einfacher machen?

Erzählen Sie uns von Ihrem Projekt← Zurück zur Arbeitsweise
  • Wir beginnen mit Ihrer Aufgabe: wer die App nutzt, was sie ermöglichen soll und woran sie anschließt.
  • Referenzen helfen bei Entscheidungen: wie Informationen angeordnet werden, wann der Preis erscheint oder wo Hilfe angeboten wird.
  • Wir passen den Entwurf an Ihr Produkt, Ihre Marke und Ihre Anforderungen an. Die Prüfung planen wir anhand der Projektrisiken.