Smart-Home-App-Design: Ein Home-Screen-Redesign, Vorher und Nachher

Eine Smart-Home-App hat auf ihrem Home Screen eine einzige Aufgabe: zeigen, in welchem Raum du gerade bist, und dich mit einem Tipp ändern lassen, was an ist. Der erste Entwurf unten hat zwar jede Steuerung, listet aber acht identische Zeilen mit winzigen Statuszeilen auf, versteckt die Räume in unterstrichenem Text und packt die Szenen als sechs kleine Buttons ans Ende. Er sieht aus wie eine Einstellungsseite, also fühlt sich die Nutzung nach Konfigurieren an, nicht nach Wohnen.

Die Korrektur behält jede Funktion bei und ändert nur, wie sie gezeigt werden. Der Raum kommt zuerst, Geräte werden zu Kacheln, die leuchten, wenn sie an sind, und Szenen werden zu Pills, die der Daumen erreicht.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links führt nichts. Header, Statusleiste, sechs Links, Foto-Banner, acht Zeilen und sechs Buttons haben alle das gleiche Gewicht. Die Geräte-Zeilen sind der größte Block, und alle sind gleich groß, also wirkt ein ausgeschalteter Fernseher so wichtig wie das Thermostat, das gerade heizt.

Rechts beantwortet der Screen der Reihe nach zwei Fragen: Wo bin ich, und was ist an? Das Foto ist der Raum, kein Banner über die App. Der Zustand wird über Farbe getragen, sodass der Nutzer das Raster auf einen Blick liest.

Was sich geändert hat, gemessen

Fix 1: erst den Raum nennen, dann was an ist

Vorher

Nachher

Ein Header mit Menü-Icon, My Home, Plus, Einstellungen und einer Glocke mit rotem Punkt, eine Wetterleiste mit 18°C bewölkt, innen 22°C, Luftfeuchtigkeit 44 %, Strom 3,2 kWh, sechs unterstrichene Raum-Links und ein Foto-Banner mit der Aufschrift Haven, gegenüber Living Room in großer fetter Schrift mit 22° · 3 Lichter an darunter, über dem Raumfoto, mit einem Plus und einem Drei-Punkte-Menü.

Der Header im Entwurf versucht, ein Bedienfeld zu sein. Er trägt drei Aktionen, eine vierteilige Wetterzeile und eine Begrüßung, die sagt, das Zuhause „läuft reibungslos“, was keine Information ist. Der Nutzer weiß längst, dass nichts falsch ist, weil nichts blinkt.

Die Korrektur gibt dem Screen ein Thema. „Living Room“ ist der Titel, und eine Zeile darunter enthält die zwei Fakten, die Leute prüfen: die Temperatur und wie viele Lichter an sind. Die drei Lichter sind Floor Lamp, Ceiling Light und Shelf Light, die im Entwurf an sind, es wurde also nichts erfunden. Wetter, Luftfeuchtigkeit und Strom öffnen sich über die drei Punkte, und Glocke und Zahnrad wandern ins Profil.

Das ist das Muster, das Apple Home verwendet: ein Raumname mit seinem Live-Zustand oben.

Regel zum Wiederverwenden: Setze den Ort an die erste Stelle und eine Zeile Live-Zustand darunter. Den Rest verlege hinter ein Menü.

Fix 2: schlichte Raum-Tabs zum Wischen

Vorher

Nachher

Sechs unterstrichene Links in einer Reihe: Living Room, Bedroom, Kitchen, Bath, Garage, Office, gegenüber Living Room in fettem Weiß und Bedroom, Kitchen und Bathroom in Grau, die über den rechten Rand hinauslaufen.

Unterstrichener Text wirkt wie ein Link in einem Absatz, nicht wie eine Auswahl zwischen Räumen. Sechs davon füllen zudem die ganze Breite, sodass der Nutzer nicht erkennt, welcher Raum offen ist. Der Unterstrich ist das lauteste Werkzeug der Seite für das leiseste Element.

Schlichte Tabs lösen beides. Der gewählte Raum ist weiß, die anderen sind grau, also ist der aktuelle Raum der einzige helle. Die Reihe läuft absichtlich über den rechten Rand, was zeigt, dass man wischen kann, und lässt die Liste über sechs Räume hinaus wachsen, ohne neues Layout. Bathroom und Office sind einen Wisch entfernt, und Garage öffnet sich über die Punkte.

Regel zum Wiederverwenden: Zeige Auswahl mit Farbe, nicht mit Unterstrich, und lass eine Reihe von Optionen über den Rand laufen.

Fix 3: Kacheln statt Zeilen

Vorher

Nachher

Acht identische Zeilen mit Icon, Name, grauer Statuszeile wie On, 80 %, Warm White und einem kleinen bernsteinfarbenen oder grauen Schalter rechts, gegenüber breiten abgerundeten Kacheln in zwei Spalten: Floor Lamp und Thermostat in Weiß mit bernsteinfarbenen Icons, TV und Speaker dunkel mit weißen Icons, und Ceiling Light und Blinds weiter unten beginnend.

Die Zeilen kosten am meisten. Jede verlangt, dass der Nutzer eine 9-px-Zeile findet, „On | 80% | Warm White“ liest und dann einen Schalter von 30 x 18 zum Tippen sucht. Acht davon sind eine Textspalte, in der nichts die eingeschalteten von den ausgeschalteten Geräten trennt.

Eine Kachel ist ein Button. Die ganze Kachel ist die Tippfläche, der Name hat 14 und der Zustand 12, und die Farbe übernimmt die Aufgabe des Schalters: Weiß mit bernsteinfarbenem Icon ist an, dunkel mit weißem Icon ist aus. Der Nutzer kann acht Geräte mit einem Blick überfliegen und sieht, dass in den ersten Reihen zwei an sind. Die Kacheln laufen außerdem unter der schwebenden Tab-Leiste durch, was dem Nutzer sagt, dass die Liste weitergeht.

Nichts wurde gestrichen. Ceiling Light, Shelf Light, Blinds und Air Purifier des Entwurfs liegen hinter „All 8“ unter Accessories, jedes Gerät bleibt also erreichbar.

Regel zum Wiederverwenden: Wenn jedes Element einen An- und Aus-Zustand hat, zeige den Zustand mit der eigenen Farbe des Elements und mach die ganze Karte zum Ziel.

Fix 4: echte Szenen-Pills

Vorher

Nachher

Ein kleines Label SCENES über sechs gleichen grauen Buttons in Großbuchstaben: Movie, Sleep, Away, Morning, Party, Reading, gegenüber einer Reihe abgerundeter Pills mit Icons: Movie weiß leuchtend, Sleep und Away dunkel, die nächste läuft über den Rand.

Szenen sind der beste Teil einer Smart-Home-App, weil ein Tipp den ganzen Raum verändert. Im Entwurf sitzen sie unten, unter acht Zeilen, als sechs identische graue Buttons. Sie sehen aus wie ein Formular, und keiner sagt, welche Szene aktiv ist.

Die Korrektur schiebt die Szenen nach oben, direkt unter die Raum-Tabs, und gibt jeder ein Icon. Sie sind 44 hoch, funktionieren also mit dem Daumen, und die aktive Szene leuchtet weiß. Party wischt in den Pills herein, und Reading liegt im Tab Scenes.

Regel zum Wiederverwenden: Setze die wertvollste Aktion dorthin, wo der Daumen ist, und zeige, welche aktiv ist.

Die kleineren Korrekturen

• Jede Funktion bleibt. Ceiling Light, Shelf Light, Blinds und Air Purifier liegen hinter All 8. Wetter, Luftfeuchtigkeit und Strom öffnen sich über die Punkte im Header. Glocke und Zahnrad wandern ins Profil, das den Badge-Punkt trägt.
• Gleichmäßige Ränder. Der Entwurf hat 14 px links und 12 px rechts. Der reparierte Screen nutzt auf beiden Seiten denselben Rand.
• Ein Akzent. Bernstein erscheint nur auf den Icons der eingeschalteten Kacheln und im aktiven Tab. Im Entwurf steckt er in jedem Schalter und mehreren Icons.
• Eine flache Abdunklung. Eine schwarze Ebene mit 52 % liegt über dem Foto, kein Verlauf und kein Glühen, damit die Lampe lesbar bleibt und die Bücher abdunkeln.
• Weniger Tabs. Vier Tabs in einer schwebenden 62-px-Leiste ersetzen fünf Tabs mit gemischten gefüllten und Outline-Icons.
• Schriftskala. Der Text reicht von 12 bis 34 pt, mit Tab-Labels in 10 pt, statt der 9 bis 15 px des Entwurfs.

Prüfe deinen eigenen Smart-Home-Screen

Hol dir die Figma-Datei

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

Kostenlose Figma-Datei

Smart-Home-Screen-Redesign, vorher und nachher

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

In Figma öffnen

FAQ

Wie sollte der Home Screen einer Smart-Home-App gestaltet sein?

Beginne mit dem Raumnamen und einer Zeile Live-Zustand, etwa „22° · 3 Lichter an“. Zeige Geräte als Kacheln in zwei Spalten, bei denen Farbe „an“ bedeutet, setze Szenen als Pills nach oben und verlege Wetter und Einstellungen hinter ein Menü.

Sollte eine Smart-Home-App für Geräte Kacheln oder Listen verwenden?

Kacheln, für einen Home Screen. Die ganze Kachel ist die Tippfläche, und Farbe zeigt den Zustand auf einen Blick. Eine Liste ist für eine lange Einstellungs- oder Verlaufsansicht in Ordnung.

Wie zeigt man in einer Smart-Home-App, dass ein Gerät an ist?

Mit der Kachel selbst: eine weiße Karte mit bernsteinfarbenem Icon für an und eine dunkle Karte mit weißem Icon für aus, sodass niemand eine Statuszeile lesen oder einen kleinen Schalter suchen muss.

Wohin gehören Szenen in einer Smart-Home-App?

Nach oben, unter die Raum-Tabs, als Pills, die der Daumen erreicht, mit leuchtender aktiver Szene. Szenen verändern einen ganzen Raum mit einem Tipp, also sollten sie nicht unter acht Zeilen sitzen.

Wie viele Tabs braucht eine Smart-Home-App?

Vier genügen: Home, Scenes, Automations und Profile. Die Räume leben in den wischbaren Tabs auf dem Home Screen.

Warum Raumnamen in einer Smart-Home-App nicht unterstreichen?

Unterstrich wirkt in Text wie ein Link. Schlichte Tabs, mit dem gewählten Raum in Weiß und den anderen in Grau, zeigen, welcher Raum offen ist, und lassen die Reihe wischen.

Quellen

• Beide Screens stammen von uns, entworfen und vermessen in Figma. Die App Haven und ihre Geräte sind erfunden. Die Zahlen sind stimmig: Auf beiden Screens sind drei Lichter an, die Floor Lamp steht auf 80 % und das Thermostat ist auf beiden auf 22° gestellt.
• Untersuchtes Muster: Apple Home, mit einem Raumnamen und seinem Zustand oben, Kacheln für Zubehör und Szenen als Pills. Die Textgrößen folgen iOS (12 bis 34 pt, Tab-Labels in 10 pt).
• Icons stammen von Phosphor (MIT). Fotos von Pexels: Yusuf P und Jan Vee.
• Zuerst als Karussell auf App Brainy veröffentlicht.