Chat-App-Design: Redesign einer Chatliste, Vorher und Nachher

Eine Chatliste hat genau einen Job: zeigen, wer geschrieben hat, was gesagt wurde und ob es eine Antwort braucht. Der erste Entwurf unten hat jedes Feature, das sich eine Messaging-App wünschen kann, und er zeigt alle gleichzeitig: vier Icons in der Titelleiste, ein Suchfeld, das sich selbst erklärt, sechs Filter, die über den Rand laufen, und ein volles Datum in jeder Zeile. Die Lösung behält dieselben Personen und dieselben Nachrichten und gibt jedem Teil des Screens genau einen Job.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links trifft das Auge auf vier Icons, einen Suchhinweis mit 47 Zeichen, fünf identische Regenbogenringe, eine Filterleiste, die nicht aufhört, und sieben Zeilen mit einzeiligen Nachrichten, je einem Datum und einem Badge. Rechts trifft das Auge auf einen großen Titel, einen Button, ein Suchfeld, fünf Gesichter, vier Chips und fünf Zeilen, die sich wie Sätze lesen.

Fix 1: eine Aktion im Titel, eine Suche, die Suchen sagt

Vorher

Nachher

Vier Icons und ein Suchfeld, das aufzählt, was es durchsucht, gegen einen Button und das einzelne Wort Suchen.

Die Titelleiste des Entwurfs enthält eine Kamera, einen Stift, eine Lupe und ein Menü. Die Lupe sitzt über einem Suchfeld, das selbst eine Lupe hat, der Screen bietet also dieselbe Suche zweimal an.

Die Lösung behält die eine Aktion, für die Leute herkommen, nämlich eine neue Nachricht zu schreiben, und gibt ihr einen weichen runden Button im Markenblau. Der Titel wächst zu einem großen Titel, dem gleichen Muster, das iOS nutzt, sodass der Screen zuerst sagt, wo du bist. Das Suchfeld sagt „Suchen“. Die 47 Zeichen des Entwurfs, „Nachrichten, Personen, Gruppen und mehr“, beschrieben ein Feld, das jeder schon zu bedienen weiß.

Die Regel zum Mitnehmen: Eine Titelleiste bekommt eine Aktion, und ein Feld namens Suchen braucht keinen Satz.

Fix 2: ein Ring, der „neu“ bedeutet

Vorher

Nachher

Fünf identische Regenbogenringe und abgeschnittene Namen, gegen Blau für neu, Grau für gesehen und ganze Vornamen.

Wenn jeder Ring gleich aussieht, trägt ein Ring keine Information. Der Entwurf gibt allen fünf Stories denselben Verlauf, also sieht eine Story, die du gesehen hast, genauso aus wie eine, die du nicht gesehen hast, und die Namen sind zu „Jessica M...“ und „Daniel Ro...“ gekürzt.

Die Lösung gibt dem Ring eine Bedeutung. Ein blauer Ring mit 2,5 px heißt neu. Ein grauer Ring mit 1,5 px heißt gesehen.

Deine eigene Story steht zuerst mit einem kleinen Plus, und jeder Name ist ein ganzer Vorname: Jessica, Daniel, Amara, Leo. Kurze Namen passen, und mit dem Vornamen rufen sich Leute auch an.

Die Regel zum Mitnehmen: Nutze Farbe, um zwei Zustände zu trennen, und zeige nur den Zustand in Farbe, der Aufmerksamkeit braucht.

Fix 3: vier Chips, ein Stil, die Zahl auf ihrem Chip

Vorher

Nachher

Sechs umrandete Chips in einer Reihe, die breiter ist als der Bildschirm, gegen vier Chips, die passen, mit der Zahl als Badge.

Der Entwurf hat sechs Chips in einer 434 px breiten Reihe auf einer 364 px breiten Spalte. Der sechste ist halb abgeschnitten, der Screen zeigt also, dass es mehr gibt, ohne zu verraten, was. Zahlen stehen in Klammern in den Labels, „Ungelesen (12)“ und „Gruppen (3)“, wodurch jedes Label eine andere Länge hat.

Die Lösung behält vier: Alle, Ungelesen, Favoriten und Gruppen. Der gewählte ist blau gefüllt, die anderen sind weiches Grau. Die Zahl der ungelesenen Chats wandert als kleines blaues Badge auf ihren eigenen Chip, denn es ist die eine Zahl, die Leute wollen, und es ist dasselbe Badge, das sie unten in den Zeilen sehen. Gruppen hat seine Zahl verloren.

Kanäle und Archiviert haben die Reihe verlassen. Das sind echte Features, und dieses Redesign zeichnet nicht, wohin sie gehen, eine vollständige App braucht also noch einen Platz für sie.

Die Regel zum Mitnehmen: Eine Filterreihe sollte innerhalb des Bildschirms enden, und der gewählte Filter sollte der einzige gefüllte sein.

Fix 4: Zeilen mit Person, zwei Zeilen Text und kurzer Uhrzeit

Vorher

Nachher

Eine abgeschnittene Zeile, ein voller Zeitstempel und ein rotes Badge mit Icon, gegen zwei Zeilen, eine kurze Uhrzeit und ein leises Badge.

Eine Zeile ist eine Nachricht in Miniatur, und der Entwurf schneidet die Nachricht nach etwa fünf Wörtern ab: „Haha yes!! Send me the photos fro...“. Der Platz ging an das Datum, „10/24/26 9:41 AM“, und an ein kleines Pin- oder Lautsprecher-Icon neben einem roten Badge. Ein Datum mit Jahr und Sekunden ist das Unnützeste in einer Zeile für eine Nachricht, die heute Morgen kam.

Die Lösung gibt der Vorschau zwei Zeilen, sodass „Haha yes! Send me the photos from last night when you get a chance“ lesbar ist, ohne den Chat zu öffnen. Die Zeit ist kurz: „9:41“ heute, „Gestern“, dann „Do“.

Ein ungelesener Chat bekommt seine Uhrzeit in Blau und ein blaues 17-px-Badge. Die stummgeschaltete Gruppe, Design Team, bekommt ein graues Badge, sodass sie zählt, ohne zu rufen. Avatare wachsen auf 52 px, und eine Sprachnachricht bekommt ein kleines Mikrofon vor ihrer Länge.

Die Regel zum Mitnehmen: Gib den Platz der Zeile der Nachricht und schreibe die Zeit so, wie Leute sie sagen.

Die kleineren Fixes

• Eine linke Kante. Der Entwurf nutzte 14 px links und 12 px rechts. Die Lösung nutzt 20 px auf beiden Seiten, mit Trennlinien, die nach dem Avatar beginnen.
• Eine Farbe für Aufmerksamkeit. Die Badges des Entwurfs sind rot, die Ringe orange bis lila und der Ungelesen-Chip nur umrandet. Die Lösung nutzt das Markenblau #2E7CF6 für neu, ausgewählt und ungelesen und Grau für alles Ruhige.
• Eine echte Typo-Skala. Der Text ging von 9 bis 20 px zu iOS-Textgrößen von 11 bis 28 pt, mit dem großen Titel oben.
• Vier Tabs, nicht fünf. Aus Chats, Anrufe, Kamera, Status und Einstellungen wurden Chats, Anrufe, Updates und Einstellungen. Die Kamera hat die Tab-Leiste verlassen.
• Größere Gesichter. Avatare in der Liste wuchsen auf 52 px, sodass die Person das Erste ist, was eine Zeile zeigt.

Prüfe deine eigene Chatliste

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens als Komponenten, jeden Fix als Vorher-Nachher-Paar, die Farbvariablen und die iOS-Textstile.

Kostenlose Figma-Datei

Chatliste, vorher und nachher

Beide Screens und jedes reparierte Element als Figma-Komponenten. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte ein Chatlisten-Screen in jeder Zeile zeigen?

Die Person, zwei Zeilen der letzten Nachricht, eine kurze Uhrzeit und ein kleines Badge für ungelesen. Lass das volle Datum, die zusätzlichen Icons und jedes zweite Badge weg.

Wie viele Filter sollte eine Messaging-App zeigen?

Vier Chips reichen auf der Hauptliste: Alle, Ungelesen, Favoriten und Gruppen. Pack den Rest, etwa Archiviert, hinter ein Menü oder auf einen anderen Screen, und achte darauf, dass die Reihe nie über den Rand läuft.

Wie gestaltet man Story-Ringe in einer Chat-App?

Nutze eine Farbe für neu und eine ruhige Farbe für gesehen, damit der Ring Information trägt. Unsere Lösung nutzt einen blauen Ring für neu und einen dünnen grauen Ring für gesehen, mit ganzen Vornamen unter den Gesichtern.

Wie sollte eine Chat-App die Zeit einer Nachricht zeigen?

So kurz, wie ein Mensch sie sagen würde: die Uhrzeit für heute, dann „Gestern“, dann der Wochentag. Heb volle Datumsangaben für den Chat selbst auf.

Welche Schriftgrößen sollte eine Chat-App nutzen?

Nutze die Textskala der Plattform. Der reparierte Screen nutzt iOS-Größen von 11 bis 28 pt, mit einem großen Titel für den Screen-Namen.

Quellen

• Beide Screens sind unsere eigenen, in Figma entworfen und vermessen. Die Namen und Nachrichten sind für die Übung erfunden.
• Fotos über Pexels von Татьяна Танатова, Iphanyi Ezemenari, pessoas uem, Son Hoa Nguyen, Ajan Yogi, Tamra Creatives Agency, Kenneth Surillo und kaleef lawal.
• Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen und den großen Titel im reparierten Screen.
• Apple Human Interface Guidelines: Accessibility, für die Touch-Target-Größe von 44 pt.
• Zuerst als Karussell veröffentlicht auf App Brainy.