Design d'app domotique : refonte de l'écran d'accueil, avant et après

Sur son écran d'accueil, une app domotique a un seul travail : montrer dans quelle pièce vous êtes et vous laisser changer ce qui est allumé, en un tap. Le premier brouillon ci-dessous contient toutes les commandes, mais il aligne huit lignes identiques avec de minuscules lignes d'état, cache les pièces dans du texte souligné et relègue les scènes en dernier, sous la forme de six petits boutons. On dirait une page de réglages, donc l'utiliser donne l'impression de configurer, pas de vivre.

La correction garde chaque fonction et change la façon de les montrer. La pièce passe en premier, les appareils deviennent des tuiles qui s'allument quand ils sont actifs, et les scènes deviennent des pastilles accessibles au pouce.

L'écran entier, avant et après

Brouillon junior

Corrigé

À gauche, rien ne guide l'œil. L'en-tête, une bande de stats, six liens, une bannière photo, huit lignes et six boutons ont tous le même poids. Les lignes d'appareils forment le plus gros bloc, et elles sont toutes aussi grosses, donc une télé éteinte paraît aussi importante que le thermostat qui chauffe.

À droite, l'écran répond à deux questions dans l'ordre : où suis-je, et qu'est-ce qui est allumé. La photo est la pièce, pas une bannière sur l'app. L'état passe par la couleur, donc l'utilisateur lit la grille d'un coup d'œil.

Ce qui a changé, en chiffres

Correction 1 : dire la pièce, puis ce qui est allumé

Avant

Après

Un en-tête avec une icône menu, My Home, plus, réglages et une cloche avec un point rouge, une bande météo indiquant 18°C Nuageux, Intérieur 22°C, Humidité 44 %, Énergie 3,2 kWh, six liens de pièces soulignés et une bannière photo indiquant Haven, face à Salon en gros caractères gras avec 22° · 3 lumières allumées dessous, sur la photo de la pièce, avec un plus et un menu à trois points.

L'en-tête du brouillon essaie d'être un tableau de bord. Il porte trois actions, une ligne météo en quatre parties et un message disant que la maison « fonctionne parfaitement », ce qui n'est pas une information. L'utilisateur sait déjà que tout va bien, car rien ne clignote.

La correction donne un sujet à l'écran. « Salon » est le titre, et une ligne dessous contient les deux infos que l'on vérifie : la température et le nombre de lumières allumées. Les trois lumières sont la lampe sur pied, le plafonnier et la lampe d'étagère allumés dans le brouillon, donc rien n'a été inventé. Météo, humidité et énergie s'ouvrent depuis les trois points, et la cloche et l'engrenage passent dans Profil.

C'est le schéma qu'utilise Apple Home : un nom de pièce avec son état en direct tout en haut.

Règle à retenir : mettez le lieu en premier et une ligne d'état en direct dessous. Rangez le reste derrière un menu.

Correction 2 : des onglets de pièces simples, à balayer

Avant

Après

Six liens soulignés en ligne : Salon, Chambre, Cuisine, Salle de bain, Garage, Bureau, face à Salon en blanc gras et Chambre, Cuisine et Salle de bain en gris, qui dépassent du bord droit.

Un texte souligné se lit comme un lien dans un paragraphe, pas comme un choix entre des pièces. Six d'entre eux remplissent aussi la largeur, donc impossible de savoir quelle pièce est ouverte. Le soulignement est l'outil le plus bruyant de la page pour l'élément le plus discret.

Des onglets simples règlent les deux problèmes. La pièce sélectionnée est blanche et les autres grises, donc la pièce courante est la seule qui brille. La rangée dépasse du bord droit exprès : cela montre qu'on peut balayer et laisse la liste dépasser six pièces sans nouvelle mise en page. Salle de bain et Bureau sont à un balayage, et le Garage s'ouvre depuis les points.

Règle à retenir : montrez la sélection avec la couleur, pas avec un soulignement, et laissez une rangée de choix dépasser du bord.

Correction 3 : des tuiles à la place des lignes

Avant

Après

Huit lignes identiques avec une icône, un nom, une ligne d'état grise du type Allumé, 80 %, Blanc chaud et un petit interrupteur ambre ou gris à droite, face à de larges tuiles arrondies sur deux colonnes : lampe sur pied et thermostat en blanc avec des icônes ambre, télé et enceinte en sombre avec des icônes blanches, plafonnier et stores en dessous.

Les lignes coûtent le plus cher. Chacune oblige l'utilisateur à trouver une ligne de 9 px, lire « Allumé | 80 % | Blanc chaud » puis trouver un interrupteur de 30 x 18 à toucher. Huit d'entre elles forment une colonne de texte sans rien pour distinguer les appareils allumés des éteints.

Une tuile est un bouton. Toute la tuile est la cible du tap, le nom est en 14 et l'état en 12, et la couleur fait le travail de l'interrupteur : blanc avec une icône ambre, c'est allumé ; sombre avec une icône blanche, c'est éteint. L'utilisateur parcourt huit appareils d'un regard et voit que deux sont allumés dans les premières lignes. Les tuiles passent aussi sous la barre d'onglets flottante, ce qui indique que la liste continue.

Rien n'a été supprimé. Le plafonnier, la lampe d'étagère, les stores et le purificateur d'air du brouillon se trouvent derrière « Tous 8 » sous Accessoires, donc chaque appareil reste accessible.

Règle à retenir : quand chaque élément a un état allumé et éteint, montrez l'état avec la couleur de l'élément lui-même, et faites de toute la carte la cible.

Correction 4 : de vraies pastilles de scènes

Avant

Après

Un petit libellé SCENES au-dessus de six boutons gris identiques en majuscules : Cinéma, Sommeil, Absent, Matin, Fête, Lecture, face à une rangée de pastilles arrondies avec icônes : Cinéma en blanc, Sommeil et Absent en sombre, la suivante dépassant du bord.

Les scènes sont la meilleure partie d'une app domotique, car un seul tap change toute la pièce. Dans le brouillon, elles sont tout en bas, sous huit lignes, sous la forme de six boutons gris identiques. Elles ressemblent à un formulaire, et aucune n'indique quelle scène est active.

La correction remonte les scènes juste sous les onglets de pièces et donne une icône à chacune. Elles font 44 de haut, donc elles se règlent au pouce, et la scène active est en blanc. Fête se trouve en balayant les pastilles et Lecture est dans l'onglet Scènes.

Règle à retenir : mettez l'action de plus grande valeur là où se trouve le pouce, et montrez laquelle est active.

Les petites corrections

• Chaque fonction reste. Plafonnier, lampe d'étagère, stores et purificateur d'air sont derrière Tous 8. Météo, humidité et énergie s'ouvrent depuis les points de l'en-tête. Cloche et engrenage passent dans Profil, qui porte le point de notification.
• Des marges égales. Le brouillon a 14 px à gauche et 12 px à droite. L'écran corrigé utilise une seule marge des deux côtés.
• Un seul accent. L'ambre apparaît uniquement sur les icônes des tuiles allumées et l'onglet actif. Dans le brouillon, il est sur chaque interrupteur et plusieurs icônes.
• Un calque d'assombrissement uni. Un seul calque noir à 52 % recouvre la photo, sans dégradé ni lueur, donc la lampe reste lisible et les livres s'estompent.
• Moins d'onglets. Quatre onglets dans une barre flottante de 62 px remplacent cinq onglets aux icônes pleines et contour mélangées.
• Échelle typographique. Le texte va de 12 à 34 pt, avec des libellés d'onglets en 10 pt, à la place des 9 à 15 px du brouillon.

Auditez votre propre écran domotique

Récupérez le fichier Figma

Le fichier gratuit contient le brouillon junior, l'écran corrigé et chaque élément sous forme de composant.

Fichier Figma gratuit

Refonte d'un écran domotique, avant et après

Les deux écrans et chaque élément en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.

Ouvrir dans Figma

FAQ

Comment concevoir l'écran d'accueil d'une app domotique ?

Commencez par le nom de la pièce et une ligne d'état en direct, comme « 22° · 3 lumières allumées ». Montrez les appareils en tuiles sur deux colonnes où la couleur signifie allumé, mettez les scènes en pastilles près du haut, et rangez la météo et les réglages derrière un menu.

Une app domotique doit-elle utiliser des tuiles ou des listes pour les appareils ?

Des tuiles, pour un écran d'accueil. Toute la tuile est la cible du tap et la couleur montre l'état d'un coup d'œil. Une liste convient très bien pour une longue vue de réglages ou d'historique.

Comment montrer qu'un appareil est allumé dans une app domotique ?

Avec la tuile elle-même : une carte blanche avec une icône ambre pour allumé et une carte sombre avec une icône blanche pour éteint, pour que personne n'ait à lire une ligne d'état ni à trouver un petit interrupteur.

Où placer les scènes dans une app domotique ?

Près du haut, sous les onglets de pièces, en pastilles que le pouce atteint, avec la scène active en surbrillance. Les scènes changent toute une pièce en un tap, elles ne doivent donc pas se trouver sous huit lignes.

De combien d'onglets une app domotique a-t-elle besoin ?

Quatre suffisent : Accueil, Scènes, Automatisations et Profil. Les pièces vivent dans les onglets à balayer de l'écran d'accueil.

Pourquoi ne pas souligner les noms de pièces dans une app domotique ?

Le soulignement se lit comme un lien dans un texte. Des onglets simples, avec la pièce sélectionnée en blanc et les autres en gris, montrent quelle pièce est ouverte et permettent de balayer la rangée.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'app, Haven, et ses appareils sont inventés. Les chiffres sont cohérents : trois lumières sont allumées sur les deux écrans, la lampe sur pied est à 80 % et le thermostat est réglé sur 22° sur les deux.
• Schéma étudié : Apple Home, avec un nom de pièce et son état en haut, des tuiles pour les accessoires et des scènes en pastilles. Les tailles de texte suivent iOS (12 à 34 pt, libellés d'onglets en 10 pt).
• Les icônes viennent de Phosphor (MIT). Photos de Pexels : Yusuf P et Jan Vee.
• D'abord publié sous forme de carrousel sur App Brainy.