Home-Services-App-Design: Ein Redesign des Startbildschirms, vorher und nachher

Eine Home-Services-App hat auf ihrem Startbildschirm nur eine Aufgabe: Jemanden mit so wenig Taps wie möglich von „Etwas ist kaputt“ zu einem gebuchten Profi zu bringen. Der erste Entwurf unten hat alles, was ein Hausbesitzer braucht, lässt ihn aber suchen. Er fordert dazu auf, nach „Services, Kategorien, Profis“ zu suchen, brüllt 30 % Rabatt in einem roten Banner, legt zwölf Kategorien mit 8-px-Labels aus und vergräbt jeden Profi in Zeilen mit 8-px-Fakten.

Der Fix behält jede Funktion und ändert die Reihenfolge. Eine schlichte Frage kommt zuerst, das Angebot schrumpft auf eine Zeile, drei Kategorien tragen den Bildschirm, und jeder Profi zeigt nur das, wonach Leute auswählen.

Der ganze Bildschirm, vorher und nachher

Junior-Entwurf

Repariert

Links verlangen ein Dutzend Dinge mit gleichem Gewicht Aufmerksamkeit. Das rote Banner ist das lauteste Objekt, die zwölf Kacheln sind der größte Block, und die Menschen, die die Arbeit tatsächlich erledigen, sitzen unten in einer Schrift, die so klein ist, dass man blinzeln muss.

Rechts liest sich der Bildschirm in der Reihenfolge, in der ein Hausbesitzer denkt: Was ist kaputt, gibt es einen Rabatt, welche Art von Job ist es, wer kann kommen. Der Text läuft von 12 bis 18 px gegenüber 8 bis 15 px im Entwurf, der Rand beträgt auf beiden Seiten 20, und nichts sitzt in einer Karte.

Was sich geändert hat, gemessen

Fix 1: eine schlichte Frage stellen

Vorher

Nachher

Ein dünnes umrandetes Suchfeld mit dem Text Nach Services, Kategorien, Profis suchen und einem Mikrofon, darüber eine Zeile mit beliebten Suchen: Leck reparieren, Klimaservice, Grundreinigung, Deckenventilator. Dagegen ein hohes graues Feld mit Lupe, den Worten Was muss repariert werden und einem Mikrofon.

„Nach Services, Kategorien, Profis suchen“ ist ein Datenbank-Label. Es verlangt vom Nutzer, sich zu entscheiden, ob er einen Service, eine Kategorie oder eine Person sucht, bevor er ein Wort tippt. Niemand kommt in eine Sanitär-App und denkt in diesen Begriffen. Man kommt mit dem Gedanken „Das Waschbecken tropft“.

„Was muss repariert werden?“ ist die Frage, die die App beantworten soll, also kann der Nutzer das Problem in eigenen Worten eintippen. Das Feld wächst von 32 auf 48 px und ist damit ein echtes Tap-Ziel, und das Mikrofon bleibt für den Moment, in dem eine Hand nass ist. Die beliebten Suchen, Leck reparieren, Klimaservice, Grundreinigung und Deckenventilator, öffnen sich beim Antippen aus dem Feld, es geht also nichts verloren, und der Bildschirm spart eine Zeile 9-px-Text.

Regel zum Wiederverwenden: Formuliere den Platzhalter als Problem des Nutzers, nicht als deine Informationsarchitektur.

Fix 2: aus dem Banner eine Zeile machen

Vorher

Nachher

Ein rotes Banner mit Preisschild-Icon, FLAT 30% OFF FIRST BOOKING in Großbuchstaben mit drei Ausrufezeichen, Kleingedrucktes mit dem Text Code FIX30 an der Kasse eingeben, nur für Neukunden, es gelten die AGB, und ein gelber Button JETZT BUCHEN. Dagegen eine schmale gelbe Zeile mit dem Text 30 % Rabatt auf deine erste Reparatur, FIX30, mit einem Chevron.

Das rote Banner hat drei Aufgaben und erfüllt keine davon gut. Rot wirkt wie ein Fehler oder eine Warnung, die Ausrufezeichen wirken wie Spam, und das Kleingedruckte ist der einzige Ort, an dem der Code steht. Sein Button JETZT BUCHEN konkurriert außerdem mit den BUCHEN-Buttons der Profis darunter.

Die reparierte Zeile sagt dasselbe in einem Atemzug: den Rabatt, für wen er gilt und den Code. Sie ist gelb, die einzige Aktionsfarbe der App, und die ganze Zeile ist der Button, der Chevron ersetzt also JETZT BUCHEN. Es gibt kein Foto und kein Geschrei. Ein Erstnutzer sieht den Deal trotzdem, und ein wiederkehrender Nutzer wird nicht bei jedem Öffnen der App angebrüllt.

Regel zum Wiederverwenden: Ein Angebot ist eine Zeile, keine Werbetafel. Gib dem Nutzer den Code und mach die Zeile selbst antippbar.

Fix 3: zwölf Kategorien auf drei und ein Mehr kürzen

Vorher

Nachher

Eine Überschrift Alle Kategorien mit einem Link Alle ansehen über zwölf kleinen umrandeten Kacheln in drei Reihen zu je vier, jede mit einem andersfarbigen Icon und einem 8-px-Label: Sanitär, Elektrik, Reinigung, Malerarbeiten, Tischlerei, Klimaanlage, Haushaltsgeräte, Schädlingsbekämpfung, Umzug, Gartenarbeit, Schlüsseldienst, Smart Home. Dagegen vier größere umrandete Kacheln mit schlichten tintenfarbenen Icons: Sanitär, Elektrik, Reinigung und Mehr.

Zwölf farbige Icons in einem Raster sehen geordnet aus, aber der Nutzer muss zwölf Labels lesen, um seins zu finden. Schlimmer noch: Ein Hausbesitzer mit einem Leck weiß oft nicht, zu welcher Kategorie es gehört. Ist eine tropfende Decke Sanitär, Malerarbeiten oder Tischlerei? Ein breites Menü hilft dieser Person nicht, es macht das Raten schwerer.

Der Fix arbeitet auf zwei Ebenen. Das Suchfeld nimmt das Problem in einfachen Worten entgegen, sodass der Nutzer, der die Kategorie nicht kennt, nie eine raten muss. Die drei Kacheln decken die häufigsten Jobs ab, und Mehr öffnet die anderen neun: Malerarbeiten, Tischlerei, Klimaanlage, Haushaltsgeräte, Schädlingsbekämpfung, Umzug, Gartenarbeit, Schlüsseldienst und Smart Home. Die Kacheln messen 76 mal 72 mit 26-px-Icons und 12-px-Labels, und die Icons werden schlicht tintenfarben, denn zwölf verschiedene Icon-Farben waren Rauschen, keine Information.

Nichts wurde entfernt. Alle zwölf Kategorien sind weiterhin einen Tap entfernt. Thumbtack geht genauso vor: zuerst eine Suche nach dem Job und darunter eine kurze Liste mit Kategorien.

Regel zum Wiederverwenden: Zeige die wenigen, die die meisten brauchen, und lass den Rest hinter einem Mehr sitzen. Lass die Suche die Leute auffangen, die die Kategorie nicht kennen.

Fix 4: jeden Profi so zeigen, wie Leute einen auswählen

Vorher

Nachher

Drei Profis, jeweils mit einem 40-px-Foto, einem Namen, einer grauen Zeile mit Fähigkeiten wie Sanitär, Leck reparieren, Warmwasserbereiter, Abflussreinigung, einer Zeile mit 4,9 (312), 1.240 erledigte Jobs, 1,9 km, 45 Dollar pro Stunde, einer Zeile mit Verfügbar Mo bis Sa, 8 bis 18 Uhr, und einem BUCHEN-Button in Großbuchstaben. Dagegen drei Profis mit einem 48-px-Foto, einem Namen, einem Stern mit 4,9, 1.240 Jobs und 45 Dollar pro Stunde sowie dem nächsten freien Termin in Grün, etwa Nächster freier Termin heute, 15 Uhr, mit einem Button Buchen.

Der Entwurf listet alles auf, was er über jeden Profi weiß: Fähigkeiten, Bewertung, Anzahl der Rezensionen, Jobs, Entfernung, Preis und Wochenzeiten. Das sind sieben Fakten in 8-px-Schrift, und die drei Profis sehen identisch aus, sodass der Nutzer keine Möglichkeit hat, sie zu vergleichen. Die Zeile mit den Zeiten ist für alle drei gleich und enthält damit keine Information.

Leute wählen einen Profi nach drei Dingen: wer er ist, ob andere ihm vertrauen und wann er kommen kann. Der Fix zeigt also einen Namen, eine Zeile „4,9 · 1.240 Jobs · 45 $/Std.“ und den nächsten freien Termin in Grün, etwa „Nächster freier Termin heute, 15 Uhr“. Die Uhrzeit ist der neue Fakt, und sie ersetzt die generischen Wochenzeiten durch die eine Angabe, die eine Buchung braucht.

Fähigkeiten, Entfernung und vollständige Zeiten wandern auf die eigene Seite des Profis. Das Foto wächst von 40 auf 48 px und der Buchen-Button von 21 auf 34 px Höhe, sodass er ein echtes Tap-Ziel ist.

Die Zahlen sind auf beiden Bildschirmen dieselben. Minh Tran hat in beiden 4,9, 1.240 Jobs und 45 $/Std.

Regel zum Wiederverwenden: Zeige die Fakten, nach denen Leute wählen, und verschiebe den Rest auf die Detailseite.

Die kleineren Fixes

• Jede Funktion bleibt. Die lange Adresse öffnet sich über „24 Hayes St“ und ihren Chevron. Das Mikrofon bleibt im Suchfeld. Der Tab Angebote ging in der Angebotszeile auf, und der Warenkorb wurde zum Tab Buchungen.
• Ein Rand. Der Entwurf hat 14 px links und 12 px rechts. Der reparierte Bildschirm nutzt 20 auf beiden Seiten.
• Ein Akzent. Gelb ist die Aktionsfarbe, beim Angebot und bei jedem Buchen-Button. Im Entwurf konkurrieren Rot, Gelb und zwölf Icon-Farben.
• Vier Tabs, ein Icon-Stil. Fünf Tabs mit gemischten gefüllten und umrissenen Icons werden zu vier in einem Stil, über einer flachen 78-px-Leiste mit Haarlinie.
• Ein größerer Schriftzug, eine kürzere Adresse. Der Schriftzug wächst auf 24 px, und die Adresse verliert Straßenzeile und Stadt, weil der Nutzer weiß, wo er wohnt.
• Typografische Skala. Der Text läuft von 12 bis 18 px statt 8 bis 15 px.
• Alle ansehen bleibt. Die übrigen Profis liegen hinter Alle ansehen, und der dritte Profi läuft über die Tab-Leiste hinaus, damit die Liste länger wirkt.

Prüfe deinen eigenen Home-Services-Bildschirm

Die Figma-Datei holen

Die kostenlose Datei enthält den Junior-Entwurf, den reparierten Bildschirm und jedes Teil als Komponente.

Kostenlose Figma-Datei

Redesign eines Home-Services-Bildschirms, vorher und nachher

Beide Bildschirme und jedes Teil als Figma-Komponente. Kostenlos, nur ansehen, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Wie sollte der Startbildschirm einer Home-Services-App gestaltet sein?

Beginne mit einer schlichten Frage wie „Was muss repariert werden?“, dann eine schmale Angebotszeile, drei oder vier Kategoriekacheln mit einem Mehr und eine kurze Liste von Profis. Zeige jeden Profi mit Name, Bewertung und nächstem freien Termin, mit einem Buchen-Button.

Wie viele Kategorien sollte eine Home-Services-App zeigen?

Drei oder vier auf dem Startbildschirm, mit einem Mehr für den Rest. Zwölf Kacheln lassen jeden jedes Label lesen, und Leute mit einem Problem wissen oft nicht, zu welcher Kategorie es gehört.

Sollte eine Services-App eine Suchleiste oder Kategorien verwenden?

Beides, in dieser Reihenfolge. Ein Suchfeld, das nach dem Problem fragt, fängt die Leute auf, die die Kategorie nicht kennen, und ein paar Kacheln decken die gängigen Jobs für alle ab, die sie kennen.

Was sollte die Karte eines Profis in einem Services-Marktplatz zeigen?

Einen Namen, eine Bewertung mit erledigten Jobs und Preis sowie den nächsten verfügbaren Termin. Fähigkeiten, Entfernung und vollständige Zeiten gehören auf die eigene Seite des Profis, weil sie bei der Wahl zwischen drei Optionen nicht helfen.

Wie sollte ein Rabatt in einer Home-Services-App gezeigt werden?

Als schmale Zeile mit dem Angebot und seinem Code, wobei die ganze Zeile antippbar ist. Ein rotes Banner mit Ausrufezeichen wirkt wie Spam, und sein Button konkurriert mit den Buchen-Buttons.

Quellen

• Beide Bildschirme sind unsere eigenen, in Figma gestaltet und vermessen. Die App Fixly, die Personen, die Adresse und die Preise sind erfunden. Das Angebot, 30 % Rabatt mit dem Code FIX30, und Minh Trans 4,9, 1.240 Jobs und 45 $/Std. sind auf beiden Bildschirmen gleich.
• Untersuchtes Muster: Thumbtack, mit einer Suche nach dem Job zuerst und einer kurzen Liste von Kategorien darunter.
• Icons stammen von Phosphor (MIT). Fotos stammen von Pexels: Ivan S, Kindel Media, Son Hoa Nguyen und Mahmoud Yahyaoui.
• Zuerst veröffentlicht als Karussell auf App Brainy.