Una nueva GUI de referencia para el control ambiental inteligente
Smart home device
UX Design
UI Design
- CLIENT
- Elsner
- LOCATION
- Germany
- EQUIPO
- Diseñador de UX, diseñador de UI, diseñador de interacción, gestor de proyectos, propietario del producto, investigador
- WEBSITE
- elsner-elektronik.de
Elsner se acercó a nosotros con un briefing que abarcaba todas las capas de un moderno producto de smart home para consumidores. El diseño de la GUI se desarrolló dentro de una estructura empresarial con un equipo de diseño UX y UI apoyado por un comité de dirección de cinco personas. La interfaz de usuario debía servir a consumidores en 54 países, y distribuidores de diez países formaron parte del proceso de diseño y validación.
La entrega tomó nueve meses, con un equipo de diseño embedded trabajando codo a codo con ingenieros para alinear la interfaz con hardware personalizado, la lógica de control existente y una red de componentes conectados. Como se trataba de un controlador de calefacción y refrigeración, el trabajo comenzó con un mapeo detallado del entorno físico del sistema.
El dispositivo recibía datos de estaciones meteorológicas, sensores de CO₂, sensores de humedad, sondas de temperatura y la unidad principal de calefacción. La precisión de los sensores, la fiabilidad de los actuadores y la estabilidad de la red influyeron en todas las decisiones iniciales. La interfaz debía funcionar con las API actuales y anticipar las futuras, creando una base capaz de evolucionar con nuevo firmware y variantes del producto.
NUESTRAS CONTRIBUCIONES
Mapeo de requisitos
Investigación de usuarios
Benchmarking
UX Design
Prototipos y pruebas de usuario
Diseño de UI – claro y oscuro
Sistema de diseño a nivel organizacional
Garantía de calidad
COLABORACIÓN ESTRUCTURADA ENTRE DISEÑO E INGENIERÍA A TRAVÉS DE DISCIPLINAS
El proyecto avanzó a través de capas interconectadas que se reforzaban entre sí. La investigación de usuarios y el benchmarking competitivo proporcionaron la comprensión inicial de necesidades, limitaciones y patrones de la industria. Las sesiones con distribuidores de diez países aportaron experiencia directa y destacaron diferencias de comportamiento entre mercados. Los distribuidores también ofrecieron información sobre la presión competitiva local y las tendencias emergentes.
Las primeras sesiones de ingeniería revelaron realidades prácticas sobre el comportamiento del firmware, incluidos los tiempos de actualización de la temperatura y las condiciones en las que la unidad de calefacción aplicaba nuevos valores. Con este conocimiento, entramos en la fase divergente del modelo double diamond, donde se abrieron rutas de wireframes y conceptos, que fueron probadas, comparadas y analizadas en cuanto a fortalezas y debilidades.
Los prototipos se probaron junto a ingenieros, quienes sacaron a la luz comportamientos ocultos en condiciones de latencia, deriva de calibración y sincronización de controles. Todas las direcciones emergentes se presentaron al comité directivo, que ayudó a refinar la visión a largo plazo y a mantener la coherencia entre las capas técnica, estratégica y experiencial.
DISEÑO MOLDEADO POR RESTRICCIONES REALES
El hardware que sustentaba este controlador influyó en todo el proyecto. Se trataba de un dispositivo a medida con un comportamiento inusual, memoria limitada y una capacidad de procesamiento modesta, pero que aun así ofrecía un conjunto de funciones sorprendentemente versátil para un panel TFT LCD circular de cuatro pulgadas con una resolución de 480 × 480 píxeles. Las conversaciones muy tempranas con el equipo de ingeniería revelaron limitaciones críticas relacionadas con el voltaje disponible, la interfaz gráfica y el margen de rendimiento del procesador. El cliente necesitaba que prestáramos atención a las especificaciones técnicas de los proveedores de pantallas, en particular al voltaje requerido para el panel y su retroiluminación, así como a las consideraciones sobre la interfaz gráfica, la profundidad de color y la disponibilidad de muestras.
Cuando comenzó el rediseño, la pantalla final aún no había sido seleccionada, por lo que nuestra única referencia consistía en la unidad anterior y en un amplio volumen de feedback de campo sobre retrasos de desplazamiento, tiempos de carga y renderizado inconsistente bajo actividad de sensores. Los ingenieros definieron los presupuestos de memoria, la temporización de los ciclos de actualización de datos y el comportamiento del sistema de calefacción durante la calibración. Para minimizar riesgos, tomamos una decisión estratégica y diseñamos la experiencia inicialmente a una resolución menor de 320 × 240 píxeles, que posteriormente se escaló una vez confirmado el panel final. Cada elección visual y de comportamiento respetó los límites físicos y eléctricos del dispositivo, y cada restricción se convirtió en un detonante para la innovación. A lo largo de todo el proceso vinculamos cada decisión técnica a factores humanos para preservar la claridad y el confort dentro de un estrecho margen operativo.
Hallazgos de la investigación en factores humanos
En la práctica
INTERFAZ AJUSTADA A CONTEXTOS REALES
El controlador debía funcionar de forma fiable en múltiples contextos, por lo que los factores físicos y ambientales dieron forma al diseño de la interfaz. La altura de instalación de 140 centímetros situaba la pantalla a la altura natural de los ojos. Esto definió el tamaño de los objetivos táctiles y limitó los patrones de escaneo vertical. La mayoría de las interacciones se producían con luz diurna, mientras que el uso nocturno requería un modo oscuro automático activado al atardecer. Los flujos habituales incluían el control de la iluminación, la activación de escenas y el ajuste de persianas, mientras que la lógica de instalación se configuraba por separado por ingenieros de sistemas mediante software de escritorio.
La interfaz también debía gestionar condiciones no ideales con claridad. Cuando los sensores generaban lecturas retrasadas, valores contradictorios o fallos de calibración, la interfaz comunicaba estos estados de forma calmada y sin ambigüedad. Las alertas de la unidad principal de calefacción se trataron como señales primarias, mientras que las notificaciones menores, como ventanas abiertas, permanecieron visualmente secundarias. Este sistema dual preservó tanto la transparencia como el equilibrio cognitivo.
Hacerse una idea de la GUI
EJEMPLO DE COMPONENTE DE UI: CONTROL DE TEMPERATURA
El control de temperatura ofrece una visión concentrada del equilibrio entre el pensamiento de diseño y la realidad de la ingeniería. La escala vertical se inspiró en un termómetro clásico, con la temperatura actual situada en el punto medio. Esta estructura coincidía con los hallazgos de comportamiento, que muestran que los usuarios rara vez ajustan más de cuatro grados en cualquier dirección.
Los socios de ingeniería nos ayudaron a comprender cómo llegan las actualizaciones de temperatura desde la unidad de calefacción y cómo visualizar lecturas retrasadas sin generar confusión. Al pulsar los botones de más o menos se produce una señal de color clara: rojo para más calor y azul para más frío. Cada incremento se realiza en pasos de medio grado, ya que el firmware aplica los nuevos valores mediante comandos internos discretos.
La temperatura deseada se muestra como una línea discontinua y permanece fijada en los límites cuando el desplazamiento supera el rango central. Las animaciones están ajustadas para evitar tirones en el procesador limitado. Todas las decisiones se revisaron con el comité directivo para garantizar estabilidad y claridad a largo plazo.“
Concepto de interacción del componente de UI de temperatura
División: 100 segmentos = 0,5°T (temperatura) por segmento
Eliminados: 20 segmentos → 80 segmentos restantes
Arco por círculo: 360°/100 = 3,6°
Conclusión: 0,5°T = 3,6° arco, 1,0°T = 7,2° arco
EJEMPLO DE DISEÑO UX/UI: CONTROL CIRCULAR
El indicador circular de temperatura introduce una forma diferente de precisión. El círculo se divide en cien segmentos, cada uno de los cuales representa medio grado. Al eliminar los veinte segmentos inferiores se creó un límite visual, dejando ochenta segmentos activos. Cada segmento corresponde a 3,6 grados en el arco, lo que significa que un grado completo de temperatura equivale a una rotación de 7,2 grados. Este nivel de rigor matemático fue necesario debido a las estrictas limitaciones de renderizado del dispositivo.
La temporización de las animaciones se alineó con los intervalos de actualización del firmware para que los cambios visuales nunca se desincronizaran de los valores térmicos reales. El indicador muestra la temperatura actual de forma neutra, con los ajustes marcados en rojo o azul. Una vez que el usuario cambia la temperatura, el campo inferior se actualiza para mostrar el nuevo valor y la dirección del cambio. En paralelo, reestructuramos la navegación en un sistema modular con un menú superpuesto y accesos directos configurables.
Una de las negociaciones más complejas se centró en el control de las persianas. Por razones técnicas, los ingenieros insistieron en mantener todas las funciones en una sola pantalla, mientras que la investigación con usuarios mostraba el riesgo de saturación visual. Tras varias iteraciones con el comité directivo, alcanzamos una configuración que preservaba la usabilidad respetando al mismo tiempo las restricciones de ingeniería.
Comportamiento del componente de UI radial de temperatura
PRECISIÓN EN CADA DETALLE DE DISEÑO
El mejor trabajo vive en los detalles más pequeños. Los objetivos táctiles se calibraron al milímetro para que la interfaz resultara natural al usarse de pie. La distancia de lectura y la luminancia del panel definieron los espacios y la tipografía. Cada valor de color se probó directamente en el hardware para garantizar que ningún elemento se viera deslavado a plena luz del día. Las pruebas con prototipos revelaron la curva exacta de latencia durante las actualizaciones de los sensores y ayudaron a refinar microanimaciones que guían la mirada sin sobrecargar el procesador.
Bajo la precisión visible existía toda una capa de refinamiento estructural. La reorganización de los menús y la reconstrucción de la jerarquía de la información resultaron esenciales tanto para la claridad como para la rapidez. Los patrones de navegación se mantuvieron coherentes en toda la interfaz y se actualizaron a lo largo del proyecto a medida que se acumulaban nuevos aprendizajes. Los estados se clarificaron y alinearon, y los colores de los modos claro y oscuro se trataron como sistemas emparejados para mantener estable en todo momento el mapa cognitivo del usuario. El resultado es un dispositivo que se percibe como sencillo únicamente porque cada detalle oculto ha sido resuelto con disciplina y cuidado.
También entregamos un sistema de diseño completo que incluía design tokens a nivel organizativo, una biblioteca de componentes integral y modelos de gobernanza claros que respaldan la coherencia a largo plazo.
Sistema de diseño con design tokens a nivel organizativo
UN NUEVO ESTÁNDAR PARA LA UX DEL HOGAR INTELIGENTE
Este proyecto reunió todos los aspectos más exigentes del diseño de interfaces gráficas embebidas. Operó dentro de límites técnicos estrictos, una estructura de gobernanza multinivel y un ecosistema de sensores y actuadores interconectados. En lugar de verse limitado por las restricciones, el equipo las utilizó como base para la innovación. Diseñadores, ingenieros, distribuidores, investigadores y un comité directivo dieron forma al producto a lo largo de nueve meses de colaboración. La metodología aportó continuidad, desde la investigación temprana con usuarios hasta la exploración conceptual y el prototipado técnico alineado con el comportamiento real del firmware. La validación en hardware prototipo garantizó que la interfaz funcionara correctamente incluso ante lecturas de sensores retrasadas, valores contradictorios y estados de recuperación.
La arquitectura modular ahora admite la evolución futura del firmware y nuevas variantes de producto. Durante el proyecto, la navegación se refinó a lo largo de varias iteraciones hasta permitir tanto un acceso rápido a las acciones más frecuentes como una estructura de menús completa en la que se pudiera encontrar toda la funcionalidad. Este equilibrio aporta al producto estabilidad y adaptabilidad a largo plazo.
La navegación refleja patrones de uso reales. Los componentes de temperatura traducen las realidades técnicas en interacciones seguras y confiadas. Las alertas comunican la verdad operativa sin generar alarma. Cada capa es coherente, desde las limitaciones físicas del dispositivo hasta el confort cognitivo del usuario.
El resultado es una interfaz embebida que se establece como punto de referencia para el diseño de GUI técnicamente exigente, integrando precisión, realismo y una estructura capaz de crecer con el tiempo.
