Profil-Screen-Design: Redesign von App-Profil und Einstellungen, Vorher und Nachher

Ein Profil-Screen hat drei Aufgaben: zeigen, wer du bist, zeigen, was du hast, und dir einen Ort geben, um Dinge zu ändern. Der erste Entwurf unten erledigt alle drei, aber in einer einzigen flachen Liste mit dreizehn Zeilen, die Punkte in eine winzige Zeile gequetscht und Abmelden als das lauteste Element auf dem Screen. Das ist eine Krimskramsschublade: Alles ist drin, und nichts ist leicht zu finden.

Die Lösung behält jede Funktion. Sie gibt jeder Aufgabe einen eigenen Block und lässt die Zeilen ihren Zustand zeigen, sodass sich die meisten Einstellungen lesen lassen, ohne sie zu öffnen.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links hat alles das gleiche Gewicht. Avatar, Name, E-Mail und Telefonnummer stapeln sich in der Mitte, das Nörgel-Banner sitzt direkt über den Punkten, und dann laufen dreizehn Zeilen die Seite hinunter, jede mit eigener Icon-Farbe. Der breite rote Button unten ist die stärkste Farbe auf dem Screen, also findet das Auge zuletzt genau die Aktion, die niemand versehentlich treffen sollte.

Rechts hat der Screen vier Blöcke und eine Farbe. Die Identitätszeile ist kurz, die Karte trägt die Punkte, und die Kacheln und die Einstellungsliste halten alles andere. Das Marken-Kobalt erscheint auf der Karte, dem Bearbeiten-Button und dem aktiven Tab, und Rot erscheint einmal, bei Abmelden, als schlichter Text.

Was sich geändert hat, gemessen

Jeder Unterschied auf einem Screen, aus den beiden Figma-Frames:

Fix 1: eine Zeile für das, wer du bist

Vorher

Nachher

Ein zentrierter Avatar, der Name, eine E-Mail, eine Telefonnummer und ein umrandeter Button Profil bearbeiten, darunter ein gelbes Banner, gegenüber einer Zeile: der Avatar links, Name und E-Mail daneben und eine kleine Bearbeiten-Pille rechts.

Der zentrierte Stapel verbraucht etwa 160 Punkte Höhe, um einen Namen und eine E-Mail zu nennen. Die Telefonnummer ist die nutzloseste Zeile darin, und der Button Profil bearbeiten ist ein vollwertiges umrandetes Element, das mit allem darunter konkurriert.

Die Lösung ist eine Zeile: der Avatar links, Name und E-Mail daneben und Bearbeiten als kleine Pille am Ende. Der Block ist 60 Punkte hoch statt 158, also beginnt der nächste Block weiter oben. Das Nörgel-Banner "Vervollständige dein Profil und erhalte 50 Punkte!!!" ist vom oberen Rand des Screens verschwunden. Die Bitte, das Profil zu vervollständigen, gehört nach den ersten Start oder in Bearbeiten, nicht über das, weshalb man gekommen ist.

Regel zum Wiederverwenden: Ein Mensch kennt seinen eigenen Namen. Gib der Identität eine Zeile und den Platz dem, was sich ändert.

Fix 2: aus einer Textzeile eine Karte machen

Vorher

Nachher

Eine kleine Wortmarke, gefolgt von "Punkte: 12480 | Stufe: Gold | Nächste: Platin (13000)" in einer Zeile winziger Schrift, gegenüber einer tiefblauen Karte mit der Wortmarke, einem Gold-Tag, 12.480 in großer Schrift, einem Fortschrittsbalken und "520 Punkte bis Platin".

Die Punkte sind der Grund, warum ein Mitglied diesen Screen öffnet, und der Entwurf setzt sie in die kleinste Schrift der Seite. Die Zahlen sind alle da, aber der Leser muss die Subtraktion selbst machen: 13.000 minus 12.480.

Die Lösung rechnet für ihn. Die Karte zeigt die Punkte in 44 pt, die Stufe als goldenes Tag, einen Balken, der zu 83 Prozent gefüllt ist, und den Satz "520 Punkte bis Platin". Gold beginnt bei 10.000, also liegen 12.480 weit auf dem Weg zur nächsten Stufe, und der Balken zeigt es auf einen Blick. Die Karte nutzt außerdem das Marken-Kobalt und das eine Gold der Stufe, wodurch sie der stärkste Block auf dem Screen wird, und das ist richtig so: Sie ist das Einzige hier, das die Person belohnt, die sie ansieht.

Regel zum Wiederverwenden: Zeige das Ergebnis der Rechnung, nicht die Zahlen, die hineingehen.

Fix 3: Einstellungen gruppieren und ihren Zustand zeigen

Vorher

Nachher

Dreizehn Zeilen in einer Liste, von Meine Bestellungen bis Allgemeine Geschäftsbedingungen, jede mit eigenem farbigem Icon und einem Chevron, gegenüber drei Kacheln (Bestellungen, Wallet, Gemerkt) und einer weißen Gruppe mit fünf Zeilen: Adressen, Zahlungsmethoden, Benachrichtigungen, Sprache und Hilfe und Rechtliches.

Dreizehn Zeilen mit gleicher Größe, gleichem Chevron und sieben Icon-Farben haben keine Ordnung. Meine Bestellungen und Allgemeine Geschäftsbedingungen wirken gleich wichtig, und der Entwurf sagt dir nichts darüber, was hinter einer Zeile steckt, bis du tippst.

Die Lösung sortiert die Liste danach, wie oft Leute sie nutzen:

• Bestellungen, Wallet und Gemerkt werden zu Kacheln. Es sind die drei Orte, an die Leute am häufigsten gehen, also bekommen sie große Ziele und je einen Live-Fakt: "2 aktiv", "42,50 $" und "18 Artikel".
• Einstellungen sitzen in einer Gruppe. Adressen sagt "2 gespeichert", Zahlungsmethoden sagt "Visa ·· 4242" und Sprache sagt "Deutsch". Man kann sie ohne Tippen prüfen.
• Benachrichtigungen wird zum Schalter. Es ist eine Ein-Aus-Entscheidung, also braucht sie keinen eigenen Screen.
• Die selten genutzten Zeilen wandern hinter Hilfe und Rechtliches. Freunde einladen, App bewerten, Über uns, Datenschutz und Bedingungen gibt es weiterhin, einen Tipp weiter drin.

Jede Zeile aus dem Entwurf ist weiterhin erreichbar. Nichts wurde gelöscht, es wurde dorthin gestellt, wo seine Häufigkeit es hinweist. Die Icons teilen außerdem einen Farbton, sodass die Farbe auf dem Screen etwas bedeutet: Die Marke kennzeichnet die aktiven, antippbaren Dinge.

Fix 4: Abmelden leise machen

Vorher

Nachher

Ein roter Button in voller Breite mit weißen Großbuchstaben, die ABMELDEN lesen, gegenüber den Worten Abmelden in Rot, 17 pt, zentriert mit Raum drumherum.

Ein durchgehend roter Button ist das lauteste Element im Entwurf, und er bittet darum, gedrückt zu werden. Abmelden ist selten und leicht destruktiv, denn es wirft die Person zurück auf eine Anmeldung. Es sollte leicht zu finden und schwer versehentlich zu treffen sein.

Die Lösung behält das Rot, weil Rot weiterhin sagt, dass dies eine Verlassen-Aktion ist, und nimmt die Füllung weg. Es ist schlichter Text unter der Einstellungsgruppe, mit Raum drumherum. Es ist weiterhin einen Tipp entfernt, zieht aber das Auge nicht mehr an.

Die kleineren Fixes

• Ein großer Titel statt einer Navigationsleiste. "Mein Profil" mit Zurück-Pfeil, Teilen-Icon und Sonnen-Icon wurde zu "Profil" in 34 pt. Die Tab-Leiste sagt bereits, wo du bist, also ist der Zurück-Pfeil weg, und die Benachrichtigungsglocke ist das einzige verbliebene Icon.
• Ein Rand. Der Entwurf nutzt 14 links und 12 rechts. Die Lösung nutzt 20 auf beiden Seiten und 14 zwischen den Blöcken.
• Eine Typoskala. Der Text im Entwurf reicht von 8 bis 15 px. Die Lösung nutzt iOS-Größen von 11 bis 34 pt.
• Eine Akzentfarbe. Der Entwurf hat sieben Icon-Farben, ein gelbes Banner und einen roten Button. Die Lösung hat das Marken-Kobalt, ein Gold für die Stufe und Rot für Abmelden.
• Eine schwebende Tab-Leiste. Die fünf Tabs bleiben, aber sie nutzen einen Icon-Stil, und nur der aktive Tab ist gefüllt.

Prüfe deinen eigenen Profil-Screen

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens, mit den reparierten Blöcken als Komponenten.

Kostenlose Figma-Datei

Redesign des Profil-Screens, vorher und nachher

Beide Screens und jeder Teil als Figma-Komponente. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte ein Profil-Screen in einer App zeigen?

Wer die Person ist, was sie hat und einen Weg, ihre Einstellungen zu ändern. Setze die Identität in eine kurze Zeile, packe Punkte, Guthaben oder Tarif in eine Karte und gruppiere darunter die Einstellungen.

Wohin gehört der Abmelden-Button auf einem Profil-Screen?

An das Ende der Einstellungen, unter die letzte Gruppe, als schlichter Text. Er sollte erreichbar sein, aber nie das lauteste Element der Seite.

Wie viele Zeilen sollte eine Einstellungsliste haben?

Fünf bis sieben in der ersten Ansicht funktionieren gut. Verschiebe die selten genutzten, wie Rechtsseiten und App-Bewertung, hinter eine Zeile wie Hilfe und Rechtliches.

Sollten Einstellungszeilen ihren aktuellen Wert zeigen?

Ja. Ein Wert wie "Deutsch" oder "Visa ·· 4242" beantwortet die Frage ohne Tippen, und für eine einfache Ein-Aus-Entscheidung ist ein Schalter besser als eine Zeile.

Wie zeigt man Treuepunkte auf einem Profil-Screen?

Als Karte mit großer Zahl, der aktuellen Stufe als Tag und einem Satz dazu, was als Nächstes kommt, etwa "520 Punkte bis Platin". Mach die Subtraktion für den Leser.

Quellen

• Beide Screens sind unsere eigenen, in Figma entworfen und vermessen. Die App, das Mitglied und die Zahlen sind erfunden.
• Die Textgrößen folgen der iOS-Typoskala in Apples Human Interface Guidelines.
• Avatar-Foto: Tamra Creatives Agency auf Pexels.
• Zuerst als Karussell veröffentlicht auf App Brainy.