Une nouvelle interface graphique de référence pour le contrôle environnemental intelligent
Smart home device
Design UX
Design UI
- CLIENT
- Elsner
- LOCATION
- Germany
- TEAM
- UX designer, UI designer, designer d'interaction, chef de projet, product owner, chercheur.
- WEBSITE
- elsner-elektronik.de
Elsner nous a approchés avec un brief qui concernait tous les niveaux d’un produit domotique moderne destiné aux consommateurs. La conception de l’interface graphique s’est développée au sein d’une structure d’entreprise comprenant une équipe UX et UI soutenue par un comité de pilotage composé de cinq membres. L’interface utilisateur devait servir des consommateurs dans 54 pays, et des distributeurs provenant de dix pays ont été intégrés au processus de conception et de validation.
La livraison a pris neuf mois, un équipe de design embedded travaillant étroitement avec les ingénieurs pour aligner l’interface sur le matériel sur mesure, la logique de contrôle existante et un réseau de composants connectés. Comme il s’agissait d’un contrôleur de chauffage et de refroidissement, le travail a commencé par une cartographie détaillée de l’environnement physique du système.
L’appareil recevait des données de stations météo, de capteurs de CO₂, de capteurs d’humidité, de sondes de température et de l’unité principale de chauffage. La précision des capteurs, la fiabilité des actionneurs et la stabilité du réseau ont façonné chaque décision préliminaire. L’interface devait fonctionner avec les API actuelles tout en anticipant les futures, créant ainsi une base capable d’évoluer avec de nouveaux firmwares et variantes de produit.
NOS CONTRIBUTIONS
Cartographie des exigences
Recherche sur les utilisateurs
Benchmarking
Design UX
Prototypage et tests utilisateurs
Design UI – clair et sombre
Design system à l’échelle de l’organisation
Assurance qualité
COLLABORATION STRUCTURÉE ENTRE LE DESIGN ET L’INGÉNIERIE À TRAVERS LES DISCIPLINES
Le projet a progressé à travers des couches interconnectées qui se renforçaient mutuellement. La recherche utilisateur et le benchmarking concurrentiel ont fourni une compréhension initiale des besoins, des contraintes et des schémas du secteur. Des sessions avec des distributeurs de dix pays ont apporté une expérience concrète et mis en lumière des différences comportementales entre les marchés. Les distributeurs ont également partagé des informations sur la pression concurrentielle locale et les tendances émergentes.
Les premières sessions d’ingénierie ont révélé des réalités concrètes sur le comportement du firmware, notamment le timing des mises à jour de température et les conditions dans lesquelles l’unité de chauffage appliquait de nouvelles valeurs. Forts de ces connaissances, nous sommes entrés dans la phase divergente du double diamant, où des wireframes et des pistes conceptuelles ont été explorés, testés, comparés et analysés selon leurs forces et leurs faiblesses.
Les prototypes ont été testés avec des ingénieurs, révélant des comportements cachés liés aux conditions de latence, à la dérive de calibration et à la synchronisation des contrôles. Toutes les orientations émergentes ont été présentées au comité de pilotage, qui a contribué à affiner la vision à long terme et à maintenir la cohérence entre les dimensions techniques, stratégiques et expérientielles.
DESIGN FAÇONNÉ PAR DES CONTRAINTES RÉELLES
Le matériel à l’origine de ce contrôleur a influencé l’ensemble du projet. Il s’agissait d’un appareil sur mesure au comportement inhabituel, doté d’une mémoire limitée et d’une puissance de calcul modeste, tout en offrant un ensemble de fonctionnalités étonnamment polyvalent pour un écran TFT LCD circulaire de quatre pouces avec une résolution de 480 × 480 pixels. Des échanges très précoces avec l’équipe d’ingénierie ont révélé des contraintes critiques liées à la tension disponible, à l’interface graphique et à l’enveloppe de performance du processeur. Le client attendait de nous que nous respections les spécifications techniques des fournisseurs d’écrans, notamment en ce qui concerne la tension requise pour le panneau et son rétroéclairage, ainsi que les choix liés à l’interface graphique, à la profondeur de couleur et à la disponibilité des échantillons.
Lorsque la refonte a débuté, l’écran final n’avait pas encore été sélectionné ; notre seule référence provenait donc de l’unité précédente et d’un volume conséquent de retours terrain concernant les latences de défilement, les délais de chargement et les rendus incohérents sous activité des capteurs. Les ingénieurs ont défini les budgets mémoire, le rythme des cycles de rafraîchissement des données et le comportement du système de chauffage lors de la calibration. Afin de limiter les risques, nous avons fait un choix stratégique en concevant l’expérience à une résolution plus faible de 320 × 240 pixels, puis en la mettant à l’échelle une fois le panneau final confirmé. Chaque choix visuel et comportemental respectait les limites physiques et électriques de l’appareil, et chaque contrainte est devenue un levier d’invention. Tout au long du processus, nous avons relié chaque décision technique aux facteurs humains afin de préserver la clarté et le confort dans un cadre de fonctionnement restreint.
Résultats issus de la recherche en facteurs humains
En pratique
INTERFACE AJUSTÉE AUX CONTEXTES RÉELS
Le contrôleur devait fonctionner de manière fiable dans de nombreux contextes, ce qui a conduit les facteurs physiques et environnementaux à façonner le design de l’interface. La hauteur d’installation de 140 centimètres plaçait l’écran à hauteur naturelle des yeux. Cela a déterminé la taille des cibles tactiles et contraint les schémas de balayage vertical. La plupart des interactions avaient lieu en journée, tandis que l’utilisation en soirée nécessitait un mode sombre automatique déclenché au coucher du soleil. Les parcours courants comprenaient le contrôle de l’éclairage, l’activation de scènes et le réglage des stores, tandis que la logique d’installation était configurée séparément par des ingénieurs système via un logiciel desktop.
L’interface devait également gérer des conditions non idéales avec clarté. Lorsque les capteurs produisaient des relevés retardés, des valeurs contradictoires ou des défauts de calibration, l’interface communiquait ces états de manière calme et sans ambiguïté. Les alertes provenant de l’unité principale de chauffage étaient traitées comme des signaux prioritaires, tandis que les notifications mineures, telles que les fenêtres ouvertes, restaient visuellement secondaires. Ce système à deux niveaux préservait à la fois la transparence et l’équilibre cognitif.
Se faire une idée de l’interface graphique
EXEMPLE DE COMPOSANT UI : CONTRÔLE DE LA TEMPÉRATURE
Le contrôle de la température offre une vision concentrée de l’équilibre entre la réflexion en design et la réalité technique. L’échelle verticale s’inspire d’un thermomètre classique, avec la température actuelle positionnée au point central. Cette structure correspondait aux résultats comportementaux, qui montrent que les utilisateurs ajustent rarement la température de plus de quatre degrés dans un sens ou dans l’autre.
Nos partenaires en ingénierie nous ont aidés à comprendre comment les mises à jour de température proviennent de l’unité de chauffage et comment visualiser des relevés différés sans créer de confusion. L’appui sur les boutons plus ou moins génère un repère couleur clair — rouge pour plus chaud et bleu pour plus froid. Chaque incrément progresse par demi-degré, car le firmware applique les nouvelles valeurs via des commandes internes discrètes.
La température souhaitée apparaît sous forme de ligne pointillée et reste ancrée aux limites lorsque le défilement dépasse la zone centrale. Les animations sont réglées afin d’éviter les saccades sur le processeur limité. L’ensemble des décisions a été revu avec le comité de pilotage afin de garantir une stabilité et une clarté à long terme.
Concept d’interaction du composant UI de température
Division : 100 segments = 0,5°T (température) par segment
Supprimé : 20 segments → 80 segments restants
Arc par cercle : 360°/100 = 3,6°
Conclusion : 0,5°T = 3,6° arc, 1,0°T = 7,2° arc
EXEMPLE DE DESIGN UX/UI : CONTRÔLE CIRCULAIRE
La jauge de température circulaire introduit une autre forme de précision. Le cercle est divisé en cent segments, chacun représentant un demi-degré. La suppression des vingt segments inférieurs a créé une limite visuelle et laissé quatre-vingts segments actifs. Chaque segment correspond à 3,6 degrés sur l’arc, ce qui signifie qu’un degré complet de température équivaut à une rotation de 7,2 degrés. Ce niveau de rigueur mathématique était nécessaire en raison des contraintes strictes de rendu de l’appareil.
Le timing des animations a été aligné sur les intervalles de mise à jour du firmware afin que les changements visuels ne se désynchronisent jamais des valeurs thermiques réelles. La jauge affiche la température actuelle de manière neutre, tandis que les ajustements sont indiqués en rouge ou en bleu. Une fois que l’utilisateur modifie la température, le champ situé en dessous se met à jour pour afficher la nouvelle valeur ainsi que le sens de variation. En parallèle, nous avons restructuré la navigation en un système modulaire avec un menu en surimpression et des raccourcis configurables.
L’une des négociations les plus délicates portait sur le contrôle des stores. Pour des raisons techniques, les ingénieurs insistaient pour regrouper toutes les fonctions sur un seul écran, tandis que la recherche utilisateur mettait en évidence le risque d’encombrement visuel. Après plusieurs itérations avec le comité de pilotage, nous sommes parvenus à une configuration qui préservait l’utilisabilité tout en respectant les contraintes techniques.
Comportement du composant UI radial de température
PRÉCISION DANS CHAQUE DÉTAIL DE CONCEPTION
Le travail le plus abouti se joue dans les plus petits détails. Les cibles tactiles ont été calibrées au millimètre afin que l’interface paraisse naturelle à hauteur de lecture debout. La distance de lecture et la luminance de l’écran ont guidé les espacements et la typographie. Chaque valeur de couleur a été testée directement sur le matériel afin de garantir qu’aucun élément ne se délave en plein jour. Les tests de prototypes ont révélé la courbe exacte de latence lors des mises à jour des capteurs et ont permis d’affiner des micro-animations capables de guider le regard sans surcharger le processeur.
Sous la précision visible se trouvait toute une couche de raffinement structurel. La réorganisation des menus et la reconstruction de la hiérarchie de l’information se sont révélées essentielles tant pour la clarté que pour la rapidité. Les schémas de navigation ont été maintenus cohérents sur l’ensemble de l’interface et ont évolué tout au long du projet à mesure que les enseignements s’accumulaient. Les états ont été clarifiés et alignés, et les palettes de couleurs des modes clair et sombre ont été traitées comme des systèmes appariés afin de préserver en permanence la carte cognitive de l’utilisateur. Le résultat est un appareil qui paraît simple uniquement parce que chaque détail invisible a été résolu avec discipline et rigueur.
Nous avons également livré un design system complet comprenant des design tokens à l’échelle de l’organisation, une bibliothèque de composants exhaustive et des modèles de gouvernance clairs favorisant la cohérence à long terme.
Design system avec des design tokens à l’échelle de l’organisation
UN NOUVEAU STANDARD POUR L’UX DE LA MAISON CONNECTÉE
Ce projet a réuni tous les aspects les plus exigeants du design d’interfaces graphiques embarquées. Il s’inscrivait dans des limites techniques strictes, une structure de gouvernance à plusieurs niveaux et un écosystème de capteurs et d’actionneurs interconnectés. Plutôt que d’être freinée par ces contraintes, l’équipe les a utilisées comme un cadre d’invention. Designers, ingénieurs, distributeurs, chercheurs et comité de pilotage ont façonné le produit au cours de neuf mois de collaboration. La méthodologie a assuré une continuité allant de la recherche utilisateur initiale à l’exploration conceptuelle, puis au prototypage technique aligné sur le comportement réel du firmware. La validation sur matériel prototype a garanti le bon fonctionnement de l’interface, même en cas de données capteurs retardées, de valeurs contradictoires ou d’états de récupération.
L’architecture modulaire prend désormais en charge l’évolution future du firmware ainsi que de nouvelles variantes de produit. Tout au long du projet, la navigation a été affinée au fil de plusieurs cycles d’itération, jusqu’à offrir à la fois un accès rapide aux actions fréquentes et une structure de menu complète permettant de retrouver l’ensemble des fonctionnalités. Cet équilibre confère au produit une stabilité et une capacité d’adaptation à long terme.
La navigation reflète les usages réels. Les composants de température traduisent les réalités techniques en interactions sûres et maîtrisées. Les alertes communiquent la vérité opérationnelle sans provoquer d’inquiétude. Chaque couche est cohérente, des contraintes physiques de l’appareil jusqu’au confort cognitif de l’utilisateur.
Le résultat est une interface embarquée qui fait référence en matière de design GUI techniquement exigeant, en réunissant précision, réalisme et une structure capable d’évoluer dans le temps.
