Immobilien-App-Design: Ein Redesign des Startbildschirms, Vorher und Nachher

Ein Immobilien-Startbildschirm hat genau eine Aufgabe: einen Menschen von „Ich suche“ zu einem Inserat zu bringen, das er öffnen will. Der erste Entwurf unten macht nichts kaputt. Jede Funktion klappt. Er verlangt nur vom Leser, alles auf einmal aufzunehmen: ein Suchfeld, fünf runde Kategorien, vier verschiedene Buttons, ein Banner und eine Karte mit neun kleinen Details.

Die Korrektur behält jede Funktion und ändert die Reihenfolge, die Größe und die Anzahl der Stile.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links trifft das Auge auf ein Suchfeld, fünf Kategoriekreise, vier Bedienelemente in drei verschiedenen Stilen, ein blaues Banner in voller Breite, einen Stern, einen Pfeil, zwei gestapelte Buttons auf jedem Foto und einen schwebenden Karten-Button, der über den Inseratsdetails liegt. Für sich genommen ist nichts falsch. Zusammen gibt es kein Erstes, das man lesen könnte.

Rechts liest sich der Screen von oben nach unten: wer du bist, was du suchst, mieten oder kaufen, welche Art von Zuhause, dann ein großes Inserat. Das Banner ist noch da, wartet aber unten, kleiner, wo es nicht mit der Suche konkurriert.

Fix 1: eine Suchzeile, ein Mieten-oder-Kaufen-Control

Vorher

Nachher

Ein umrandetes Suchfeld mit Mikrofon, fünf runde Kategorie-Icons, dann ein gefüllter Mieten-Button, ein schlichtes Wort Kaufen, ein umrandeter Sortieren-Button und ein Filter-Link. Dagegen ein graues Suchfeld mit einem blauen Filter-Button, und Mieten und Kaufen als zwei Hälften eines Segmented Controls.

Der Entwurf packt vier Bedienelemente in eine Zeile und gibt jedem einen anderen Look: Mieten ist ein gefüllter Button, Kaufen nackter Text, Sortieren ist umrandet und Filtern ist ein schlichter Link mit Icon. Der Leser muss erst herausfinden, welche davon Buttons, welche Tabs und welche Schalter sind, bevor er eines benutzt.

Die Korrektur gibt jeder Aufgabe eine Form. Suche und Filter leben in derselben Zeile, weil Filtern Teil des Suchens ist. Mieten oder Kaufen ist eine Wahl zwischen genau zwei Dingen, wofür ein Segmented Control gemacht ist: Beide Optionen bleiben sichtbar und die gewählte leuchtet klar. Sortieren rückt aus dem Weg, denn es zählt erst, wenn es Ergebnisse gibt.

Regel zum Wiederverwenden: Wenn zwei Bedienelemente dieselbe Art von Aufgabe erfüllen, sollten sie gleich aussehen. Wenn sie unterschiedliche Aufgaben haben, nicht.

Fix 2: Kategorien, die zeigen, was gewählt ist

Vorher

Nachher

Fünf dünne umrandete Kreise mit einem kleinen Label darunter, wobei nur das blaue Label zeigt, dass Wohnung gewählt ist. Dagegen gefüllte Chips mit Icon und Wort in einer Zeile, wobei Wohnungen satt blau ist und die nächsten Chips über den Rand hinauslaufen.

Im Entwurf ist das einzige Zeichen für die Auswahl ein blaues Label in kleinem Text unter einem Kreis. Die Kreise selbst sehen identisch aus, also muss das Auge die Labels einzeln lesen, um den aktiven zu finden.

Ein Chip mit voller Füllung beantwortet die Frage, bevor sie gestellt wird. Der gewählte Zustand hat eine andere Farbe und ein anderes Gewicht, nicht nur einen kleinen Unterschied im Text. Die Chips sind außerdem breiter als hoch, sodass Icon und Wort in einer Zeile stehen und die ganze Reihe weniger Höhe braucht. Der am rechten Rand abgeschnittene Chip zeigt, dass die Reihe scrollt, ganz ohne Pfeile.

Fix 3: eine Inseratskarte, die sich der Reihe nach liest

Vorher

Nachher

Empfohlene Inserate mit Stern und Pfeil, ein Foto mit einem Badge „1 Year Old“ und Plus- und Herz-Buttons, blaue 2.400 $ pro Monat, Pills für Verkauf und Miete, eine Adresse sowie Schlafzimmer- und Bad-Details, die von einem schwebenden Karten-Button abgeschnitten werden. Dagegen ein großes Foto mit abgerundeten Ecken und einem Herz, dann 2.400 $ pro Monat, 2-Zimmer-Wohnung, Alfama, Lissabon und 2 Zi., 2 Bäder, 91 m².

Wer ein Zuhause ansieht, stellt vier Fragen in derselben Reihenfolge: Wie viel kostet es, was ist es, wo liegt es und wie groß ist es. Die Korrektur bringt die Karte in genau diese Reihenfolge, eine Antwort pro Zeile. Der Preis ist der größte Text, dann der Wohnungstyp, dann hellere Zeilen für Ort und Details.

Der Entwurf wirft die Antworten durcheinander. Der Preis teilt sich eine Zeile mit zwei Pills, die Verkauf und Miete sagen, obwohl das Zuhause nur zur Miete ist. Die Adresse steht über den Details, aber unter dem Preis in einer anderen Farbe. Die Details sind kleiner 9-Punkt-Text und das letzte versteckt sich unter dem Karten-Button, sodass der Leser die Fläche verliert, eine Zahl, die die meisten vergleichen.

Außerdem vom Foto entfernt: das Badge „1 Year Old“ und der Plus-Button. Zwei schwebende Buttons auf jedem Bild verlangen Entscheidungen, die der Leser noch nicht getroffen hat. Ein Herz reicht, und das Foto ist größer, weil das Foto das Zuhause verkauft.

Regel zum Wiederverwenden: Eine Karte ist ein Satz. Lege seine Wortstellung fest, dann gib jedem Wort einen Stil.

Fix 4: vier Tabs in einem Icon-Stil

Vorher

Nachher

Start, Meine Immobilien, Nachrichten, Favoriten und Mehr, mit gemischten gefüllten und Outline-Icons. Dagegen Start, Gespeichert, Nachrichten und Profil, alles Outline-Icons, nur Start in Blau.

Der Entwurf hat fünf Tabs, und drei davon liegen nah beieinander: Meine Immobilien, Favoriten und Mehr klingen alle nach Orten, an denen ein gespeichertes oder eigenes Zuhause liegen könnte. Seine Icons mischen außerdem gefüllte Formen (das Haus, die Nachrichten) mit Outlines (das Gebäude, das Herz), sodass der aktive Tab schwer von einem Tab zu unterscheiden ist, der nur kräftiger gezeichnet ist.

Die Korrektur nutzt vier Tabs mit einem Icon-Stil, sodass der einzige Unterschied zwischen den Tabs ist, welcher aktiv ist. „Favoriten“ wird zu „Gespeichert“, einem kürzeren Wort, das zum Herz auf der Karte passt. „Mehr“ wird zu „Profil“, ein Name, der sagt, was dahintersteckt. Apples Richtlinien beschreiben die Tab-Leiste als Navigation zwischen Hauptbereichen, also gehört ein Ziel, das eigentlich ein Menü für Übriggebliebenes ist, nicht hinein.

Die kleineren Korrekturen

• Ein Header mit einem Menschen darin. Die Korrektur fügt eine Begrüßung hinzu, einen Initialen-Avatar in einem satt blauen Kreis und eine Glocke mit rotem Punkt. Der Entwurf hat keinen Header, also sagt nichts, wessen App das ist.
• Ein Rand. Der Entwurf nutzt 12 links und 16 rechts, sodass nichts mit dem Bildschirmrand fluchtet. Die Korrektur nutzt 20 auf beiden Seiten jeder Zeile.
• Eine Abstandsskala. Abstände sind 4, 8, 12 oder 16. Wenn jeder Abstand aus derselben kurzen Liste stammt, wirken Zeilen verwandt, ganz ohne Trennlinien.
• Eine Textskala von der Plattform. Der Text im Entwurf läuft von 9 bis 15 px ohne Muster. Die Korrektur nutzt die iOS-Größen von 11 bis 22 pt, Größen, die Menschen lesen können.
• Ein ruhigeres Banner. „List your home for Free“ hat das kursive Akzentwort, die Haus-Outline und den zweiten Button darin verloren. Es ist jetzt eine einzelne Zeile mit einem Pfeil.

Prüfe deine eigene Immobilien-App

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens, jeden Teil des reparierten Screens als Komponente, die Farbvariablen, die iOS-Textstile und eine Readme mit den Fotonachweisen.

Kostenlose Figma-Datei

Immobilien-Startbildschirm, vorher und nachher

Beide Screens und jeder reparierte Teil als Figma-Komponenten. Kostenlos, nur ansehen, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte ein Immobilien-App-Startbildschirm zuerst zeigen?

Ein Suchfeld mit einem Filter-Button, dann Mieten oder Kaufen und die Immobilienart. Setze die Inserate direkt darunter, mit dem Banner und Zusatzangeboten danach.

Wie sollten Mieten und Kaufen in einer Immobilien-App dargestellt werden?

Als Segmented Control mit zwei Hälften, sodass beide Optionen immer sichtbar sind und die gewählte klar hervorgehoben ist. Vier verschiedene Button-Stile in einer Reihe lassen Menschen raten.

Was sollte eine Immobilien-Inseratskarte enthalten?

Zuerst den Preis, dann den Wohnungstyp, den Ort und die wichtigsten Details wie Schlafzimmer, Bäder und Fläche. Ein Favoriten-Button auf dem Foto reicht.

Wie viele Tabs sollte eine Immobilien-App haben?

Vier sind eine gute Zahl: Start, Gespeichert, Nachrichten und Profil. Vermeide zwei Tabs, die nach demselben Ort klingen, etwa Favoriten und Meine Immobilien.

Wie zeigt man, welche Kategorie gewählt ist?

Fülle den gewählten Chip mit der Markenfarbe und halte die anderen neutral. Eine kleine Änderung der Textfarbe unter einem Kreis übersieht man leicht.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen.
• Fotos über Unsplash von Luke van Zyl, A. L. Brown und Annie Spratt, unter der Unsplash-Lizenz.
• Apple Human Interface Guidelines: Tab bars.
• Apple Human Interface Guidelines: Typography, die iOS-Textgrößen.
• Zuerst als Karussell veröffentlicht auf App Brainy.