Reto 3. Prototipado

Hola, compañeras/os:

A continuación os dejo los dos estudios de casos de este Reto 3. Yo he analizado en primer lugar un mando de ascensor elevacoches de garaje, y en segundo lugar el Joy-Con de la Nintendo Switch 1. Se trata de dos objetos con niveles de complejidad de interfaz completamente diferentes, que me han ayudado a profundizar de manera práctica en las ideas de Donald Norman.

Un saludo y felices fiestas : )))

CASO 1
“Placa de inducción”

1. Objeto y contexto de uso

El objeto analizado es una placa de inducción (Balay) instalada en la cocina doméstica.
La placa presenta una superficie de vidrio y con controles táctiles integrados en la propia placa, separada visualmente de las zonas de cocción.

Se trata de un objeto de uso cotidiano en el entorno doméstico, compartido por diferentes perfiles de usuario (usuarios habituales, personas mayores, visitas)

La interacción se realiza exclusivamente mediante toques sobre la superficie, sin ningún tipo de relieve, textura o diferenciación física.

El objetivo principal del usuario es:

• Encender una zona de cocción concreta,
• Regular la potencia,
• Confirmar visualmente que la placa está funcionando.

2. Modelos mentales e imagen del sistema

Según el modelo de Norman, el usuario construye su comprensión del funcionamiento del objeto a partir de la imagen del sistema, ya que no tiene acceso directo al modelo conceptual del diseñador.

En este caso, la placa de inducción actúa como mediadora entre:

• El modelo mental del diseñador, que define cómo funciona el sistema internamente.
• El modelo mental del usuario, que se construye a partir de lo que ve, toca y recibe como respuesta.

Cuando la imagen del sistema no comunica de forma clara el modelo de diseño, aparecen brechas de ejecución y de evaluación.

3. Test heurístico

3.1 Visibilidad del estado del sistema (Bien y Mal)

Observación
La placa muestra:

• La zona de cocción que está activa.
• El nivel de potencia (con una escala del 0 – 9)

Los indicadores luminosos existen, aunque son bastante pequeños, poco contrastados y, en algunos casos, temporales.

Problema de usabilidad
El usuario no puede evaluar bien el estado del sistema de un vistazo, debe fijarse para saber cómo está en funcionamiento la placa, y no funciona de manera intuitiva.

3.2 Mapeo natural (Mal)

Observación
No existe una correspondencia clara entre:

• La disposición de los controles táctiles,
• Los elementos de + y -.

El orden de interacción (seleccionar zona / seleccionar potencia) no se deduce a partir de la interfaz.

Los botones para ´variar la potencia de la zona de cocción, se encuentran a un lado del valor de la potencia de este, convirtiéndose en una interacción y visualización torpe.

Problema de usabilidad
El usuario no sabe con certeza qué acción afectará a qué zona.

3.3 Affordance (Mal)

Observación
La superficie de vidrio:

• No sugiere claramente que sea interactiva,
• No se diferencia visualmente entre zonas tocables y no tocables,
• No se ofrecen pistas físicas (relieve, textura, forma).

Problema de usabilidad
El usuario duda sobre:

• Dónde tocar,
• Cómo tocar,
• Si la acción ha sido correctamente registrada.

3.4 Feedback (Mal)

Observación
Tras una acción del usuario:

• El feedback visual es débil o poco inmediato,
• En algunos casos no hay respuesta perceptible,
• No se informa claramente de errores (por ejemplo, no existe un tipo de sonido para hacer entender al usuario que lo está usando de manera errónea).

Problema de usabilidad
El usuario no sabe si el sistema ha respondido correctamente o si debe repetir la acción.

3.5 Reconocer antes que recordar (Mal)

Observación
La placa obliga al usuario a:

• Recordar el orden correcto de uso,
• Memorizar qué icono cumple cada función,
• Aprender el sistema por repetición.

Problema de usabilidad
Usuarios poco frecuentes o personas mayores presentan mayores dificultades de uso.

4. Síntesis del test heurístico

A partir del test heurístico se detectan  problemas recurrentes relacionados con:

• La falta de visibilidad del estado del sistema,
• Un mapeo poco natural entre controles y zonas,
• Affordance insuficiente,
• Feedback débil o inexistente.

Estos problemas generan confusión, un posible error y frustración durante el uso.

5. Análisis a partir de los modelos

A partir de los problemas detectados, se analiza el caso teniendo en cuenta el modelo del diseñador, el modelo del usuario y la imagen del sistema, siguiendo el marco teórico de Norman.

5.1. Imagen del sistema

La imagen del sistema que ofrece esta placa presenta varios problemas clave:

• Los controles no están alineados directamente con las zonas de cocción.
• Demasiados botones y elementos decorativos sin ningún tipo de funcionalidad, que entorpecen la lectura y comprensión de los elementos importantes
• Las líneas curvas que intentan representar la topografía de la placa son sutiles y poco legibles.
• El feedback visual (números o indicadores) no están claramente asociado a una zona concreta.
• El temporizador (“min”) aparece en una posición central que puede confundirse con los controles de potencia.

La imagen del sistema no facilita un mapeo natural, obligando al usuario a interpretar y recordar cómo funciona la interfaz.

5.2. Modelo mental del diseñador

El diseño de esta placa sugiere que el diseñador asume que el usuario:

• Comprende que cada bloque vertical de controles corresponde a dos zonas de cocción (superior e inferior).
• Interpreta correctamente las líneas curvas y rectas como representación espacial de las zonas de cocción.
• Entiende que debe:
• 1. Encender la placa
  2. Seleccionar un fuego
  3. Ajustar la potencia con + y –
• Reconoce el significado de iconos abstractos sin texto explicativo.

El diseño prioriza:

• Simetría
• Minimalismo (aunque con elementos decorativos)
• Continuidad visual de la superficie

Este modelo presupone un usuario experto o habituado, capaz de aprender el sistema por repetición.

6. Brechas de ejecución y evaluación

– Brecha de ejecución

Esta brecha se encuentra en el momento en el que el usuario no puede deducir claramente qué acción debe realizar para encender un fuego en concreto:

• Qué acción realizar.
• Qué control corresponde a cada zona.

Ejemplo real:

• El usuario quiere encender la zona de cocción superior izquierda.
• Debe interpretar:
• • Cuál es la zona donde debe pulsar para encender ese fuego.
  • Qué símbolo activa esa zona (que en este caso, no existe símbolo).
• Nada en la interfaz indica donde debe pulsar

El usuario se enfrenta a la duda:
“¿Pulso aquí o aquí para este fuego?”

La imagen del sistema no traduce correctamente el modelo del diseñador, generando incertidumbre y un posible error.
El usuario tampoco sabe si pulsar en las zona interna de la plancha o en el espacio interior donde se encuentran los + y – (que es donde están los botones para activar los fuegos)

– Brecha de evaluación

Una vez realizada la acción, aparece la brecha de evaluación:

• Si la acción ha sido correcta.
• En qué estado está el sistema.
• Ni por qué a veces no se produce el resultado esperado.

Ejemplo real:

• El usuario pulsa “+” en uno de los bloques.
• Se ilumina un número.
• No queda claro:
• • A qué fuego corresponde ese número.
  • Si el fuego deseado está realmente activo.

El usuario necesita comprobar el resultado por otros medios (mirar si el fuego que quieres encender, si se enciende o si calienta acercando la mano,), lo que indica que el feedback del sistema es insuficiente.

7. Conclusión

El análisis de esta placa de inducción concreta muestra cómo una imagen del sistema poco detallada que puede generar brechas de ejecución y evaluación en su funcionalidad.

La composición entre los controles y las zonas de cocción, junto con una iconografía abstracta y en algunas partes inexistente, dificulta la construcción de un modelo mental correcto por parte del usuario y por tanto, fracasar en el desarrollo de la actividad.

Tal y como plantea Norman, los errores no son atribuibles al usuario, sino a un diseño que no hace visibles las acciones posibles ni sus consecuencias.

La placa de inducción analizada genera:

• Brecha de ejecución → no sé cómo hacerlo.
• Brecha de evaluación → no sé qué ha pasado.

Poniendo de manifiesto la importancia de diseñar objetos físicos que se expliquen a través de su forma, organización y feedback.

Una mejora en el mapeo y en la visibilidad del estado del sistema permitiría alinear el modelo del diseñador con el modelo del usuario, mejorando significativamente la usabilidad del producto.

8. Propuesta de mejora

El objetivo de la propuesta es reducir las brechas de ejecución y evaluación mejorando la imagen del sistema y sin modificar el funcionamiento interno, sino mejorando la construcción de la imagen del sistema y redistribuyendo mejor los elementos y los botones de acción, favoreciendo un modelo mental correcto desde el primer uso.

• Agrupar los botones de las zonas de cocción (con la misma estructura que están dispuestas en la placa, para que la estructura le pueda orientar al usuario hacer relaciones entre botón y fuego)
• Representar botones visibles donde el usuario tenga que pulsar para activar el fuego deseado, representando como botones, las formas que tienen los propios fogones.
• Eliminar elementos visuales que no aportan nada y que entorpecen la comprensión del usuario
• Introducir una mayor jerarquía entre los elementos y una agrupación visual.

CASO 2
“Topografías”

Mando del aire acondicionado

«Mal caso»

Para este ejercicio analizo la topografía de la pantalla de cámara de un teléfono móvil (iPhone). Es un caso en el que la topografía está resuelta de forma eficaz, porque organiza los elementos visuales de manera que el usuario comprende intuitivamente qué acciones puede realizar o en qué orden.

1. Descripción

El mando a distancia del aire acondicionado LG presenta una interfaz física compuesta por una pantalla superior y múltiples botones distribuidos en varias filas inferiores.

Todos los botones tienen un tamaño y forma similar, con etiquetas textuales y abreviaturas para identificar sus funciones.

2. Diagnósticos de la topografía

La topografía de esta interfaz resulta poco eficaz debido a una mala organización funcional de los elementos. Esto provoca que la interacción requiera un mayor esfuerzo cognitivo al usuario.

2.1. Falta de jerarquía visual clara

• El botón de encendido/apagado se distingue ligeramente por el color, pero comparte tamaño y proximidad con el resto.
• Las funciones principales (regular temperatura, modo, velocidad de ventilador) no destacan visualmente.
• Todos los botones compiten entre sí al estar en “igualdad de condiciones”.

Consecuencia:
El usuario debe buscar activamente qué botón usar, en lugar de reconocerlo de inmediato.

2.2. Agrupamiento confuso de elementos

• Botones similares distribuidos en zonas separadas sin una lógica perceptiva evidente.
• Funciones relacionadas con temperatura o ventilación o aparecen dispersas.
• El bloque inferior recoge funciones básicas bajo la sección “SET UP”, pero sin una  delimitación clara.

Consecuencia:
El usuario debe leer las etiquetas y memorizar ubicaciones/patrones (aumentando la carga cognitiva)

2.3. Sobrecarga textual y simbolismo inconsistente

• Algunas funciones usan texto completo o iconos, creando inconsistencia visual.
• El usuario debe interpretar y recordar sus significados y funciones.

2.4. Brechas de ejecución y evaluación

Siguiendo modelos descritos por Norman:

• Brecha de ejecución: el usuario no sabe qué secuencia de botones produce la acción deseada.
• Brecha de evaluación: al activar funciones con temporizador o no llegan a ser evidente en el display y genera incertidumbre.

3. Carga cognitiva y comprensión del sistema

La topografía obliga al usuario a:

• Inspeccionar cada botón
• Leer las etiquetas en pequeño
• Recordar funciones
• Interpretar abreviaciones
• Probar acciones para obtener resultados

Esto incrementa la carga cognitiva, aumentando los errores y ralentiza la interacción.

4. Conclusión

El mando del aire acondicionado LG constituye un caso representativo de topografía poco eficaz en una interfaz física. La ausencia de jerarquía visual, la agrupación inconsistente de funciones y el exceso de botones similares impiden comprender fácilmente el sistema.

Todo ello aumenta la carga cognitiva del usuario, generando incertidumbre durante la acción y dificulta la evaluación de los resultados.

Panel de control para tornos y barreras

«Buen caso»

1. Descripción

El panel está formado por:

• Dos filas  principales:
  • Arriba: selectores rotativos (normal / bloqueo / abierto)
  • Abajo: botones grandes de acción (verde = abrir, rojo = cerrar)

• Cada fila corresponde a un dispositivo distinto:
  • Torno salida
  • Torno entrada
  • Barrera salida
  • Barrera entrada
• Etiquetas claras junto a cada control.
• Código de color industrial estándar (verde = activación, rojo = detención/cierre).

2. Diagnósticos de la topografía

La topografía de esta interfaz resulta poco eficaz debido a una mala organización funcional de los elementos. Esto provoca que la interacción requiera un mayor esfuerzo cognitivo al usuario.

2.1. Jerarquía muy clara

• Los botones más grandes y visualmente llamativos (verde/rojo) indican que son las acciones principales.
• Los selectores son secundarios y están perfectamente diferenciados.

Consecuencia:
El usuario sabe dónde mirar y dónde actuar primero.

2.2. Agrupamiento coherente y estructurado

• Cada fila representa un único elemento físico: una barrera o un torno.
• Cada fila contiene los elementos necesarios para ese dispositivo (selector + botones).
• Esto sigue las leyes de proximidad (Gestalt)
• Los controles relacionados están juntos y con la misma forma del botón.
• Arriba de cada uno de ellos, tiene un selector para el estado de la barrera o torno en cuestión (normal, bloqueo y abierto)

Consecuencia:
El usuario no mezcla funciones entre dispositivos.

2.3. Consistencia

Todo el panel mantiene una estructura repetitiva y predecible:

• Selector: Arriba.
• Botones de acción: Abajo.
• Etiquetas: Encima de los botones claras.

Consecuencia:
El usuario aprende el patrón en un segundo y lo aplica al resto.

2.4. Uso correcto de los colores

• Verde = activar / abrir
• Rojo = detener / cerrar

Consecuencia:
Reduce la carga cognitiva: se reconoce, no se memoriza.

2.5. Brecha de ejecución reducida

El usuario:

• Sabe qué botón debe presionar.
• Entiende que cada columna opera un dispositivo específico.
• Entiende el orden lógico: primero el selector, luego la acción.

Consecuencia:
La interfaz “explica” sola cómo debe interactuarse con ella.

2.6. Brecha de evaluación reducida

Los selectores tienen posiciones claras y mecánicamente estables
Los botones tienen retroalimentación física inmediata.

Consecuencia:
El usuario percibe de forma fiable si la acción ha sido realizada.

3. Carga cognitiva y comprensión del sistema

La topografía del panel reduce significativamente la carga cognitiva del usuario. La distribución espacial de los controles refleja directamente la estructura del sistema: cada columna de elementos controla un único dispositivo (torno o barrera), y cada fila corresponde a un tipo de acción (modo de operación mediante selector y ejecución mediante botones). Esta alineación física facilita que el usuario comprenda la relación causa–efecto sin necesidad de memorizar funciones ni leer instrucciones adicionales.

El código de color (verde para activar/abrir y rojo para detener/cerrar), junto con el tamaño diferenciado de los botones de acción, permite reconocer las operaciones antes que recordarlas. De este modo, el usuario puede anticipar correctamente resultados y tomar decisiones rápidas, reduciendo errores y tiempos de reacción.

Al disminuir el esfuerzo mental necesario para interpretar la interfaz, el panel ayuda a que el usuario sepa qué acción debe tomar y que el usuario perciba con claridad el resultado de sus acciones, fortaleciendo la comprensión global del sistema.

4. Conclusión

El panel de control para tornos y barreras es un caso de buena topografía porque organiza visualmente sus funciones de forma lógica, clara y predecible. La jerarquía está bien definida, los elementos se agrupan por dispositivo, los colores refuerzan la acción que hacen y permite operar el sistema sin ambigüedades. Esto reduce la carga cognitiva y las brechas de ejecución y evaluación, facilitando el uso incluso en situaciones de estrés o rapidez.

Donald Norman nos ofrece una entretenida y enriquecedora reflexión sobre el diseño de los objetos mundanos en su obra La psicología de los objetos cotidianos.

Tras su lectura pude entender la importancia de que la imagen del sistema permita al usuario acercar su modelo mental al del diseñador.

Cuando esto no ocurre el usuario puede llegar a no entender cómo utilizar el objeto e incluso culparse por ello.

Justamente esto me pasó al tratar de utilizar la Máquina de coser portátil de InnovaGoods: un producto ideado para ser utilizado de forma sencilla, práctica y en cualquier lugar.

No lo logré ni leyéndome el manual.

Me encontré con que la imagen del sistema no me daba pistas sobre su funcionamiento, y no logré entender el modelo mental del diseñador.

Para empezar no tenía claro cuántos hilos utilizaba la máquina (mi modelo mental como usuaria de máquinas de coser de sobremesa, era el de usar dos hilos), así que busqué largo rato orificios en los que añadir una segunda bobina.

Sistema de máquina de sobremesa a dos hilos:

Sistema de máquina InnovaGoods a un hilo:

Tampoco sabía cual era la forma correcta de enhebrar el hilo. Tanto el manual, las imágenes de la página web y el vídeo explicativo mostraban incoherencias…

Este diseño provocó en mí, tanto brechas de ejecución como de evaluación que recogí en el siguiente análisis:

Brecha de ejecución:

- El usuario no sabe como subir la aguja en primer lugar. No tiene affordances en el mismo producto ni indicaciones claras en el manual. Esta situación puede llevarlo a forzar el mecanismo y romperlo o bien a no poder empezar a usarlo.

- El usuario espera encontrar un mecanismo para añadir un segundo hilo. La falta de indicaciones hace que abra erróneamente el compartimento de las pilas.

- El usuario no puede saber cómo enhebrar correctamente el hilo: el manual contiene errores, las imágenes disponibles son contradictorias y el vídeo es incompleto. Esto puede llevarlo a enhebrar incorrectamente el hilo, que al no estar bien tensado, no permita coser correctamente.

- El usuario espera que el movimiento de la tela vaya en sentido contrario (por lo que puede cometer errores y coser dónde no desea).

Brecha de evaluación:

- El volante tiene un feedback muy leve. Al girarlo el movimiento de la aguja es tan sutil que puede pasar desapercibido si uno no sabe qué está haciendo.

- Una vez enhebrado el hilo, no hay forma de saber si se ha hecho correctamente.

Tras realizar un análisis heurístico de este objeto, pude detectar algunos aspectos de la imagen del sistema que impedían a la persona usuaria acercar su modelo mental al del diseñador.

A continuación se muestra una propuesta de mejora para tratar de facilitar el uso de esta máquina de coser a la persona usuaria:

Uno de los aspectos que menciona Don Norman para facilitar que el modelo mental del usuario se acerque a la del diseñador consiste en diseñar basándonos en una topografía que siga un mapeo natural. Esto ayudará a que la imagen del sistema permita a la persona usuaria  interpretarlo correctamente.

Para ilustrar este aspecto, me fijé en la topografía de los controles de la ducha de casa de mi padre.

La primera vez que usé la ducha termostática de casa de mi padre pasé bastante frío. Tiene dos mandos, pero su disposición y la iconografía casi borrada me llevaron a usarlos al revés de lo que esperaba. Siguiendo mi costumbre con duchas más antiguas, giré un control pensando que calentaría el agua y solo conseguí un chorro helado (ya que era el selector de grifo). Giré el otro controlador en la dirección de la flecha hacia arriba, esperando que augmentara la temperatura. Tras esperar sin éxito a que se calentara el agua, llegué a pensar que la caldera estaba estropeada.

Al final entendí cómo funcionaba, pero el aprendizaje fue a base de error. Desde entonces no me ha vuelto a pasar, aunque la primera experiencia no fue precisamente agradable ni intuitiva.

Aquí podéis ver cómo está diseñado el regulador: la flecha hacia arriba indica que al girar la maneta en dirección horaria, la temperatura disminuirá. Al girarla hacia abajo en dirección antihoraria, la temperatura augmentará. Esto queda reforzado por los símbolos + y – (apenas perceptibles ya, tras muchos usos).

Considero que en cuanto a reguladores de temperatura se refiere, una buena topografía que mantenga un mapeo natural, pasaría por colocar el controlador a mano izquierda, para que la rotación antihoraria coincida con la dirección ascendente, y sugiera naturalmente un augmento de la temperatura.

¿Qué opináis? ¿Os ha pasado alguna vez?

En los siguientes enlaces podéis ver con más detalle el análisis de los casos expuestos en esta entrada:

1. Máquina de coser InnovaGoods
2. Ducha termostática Aquassent