En este proyecto, desarrollé un prototipo de alta fidelidad para una app destinada a los inspectores de calidad de Burger King. El objetivo era crear un diseño funcional y visualmente coherente con la identidad de la marca, adaptando elementos clave de la app oficial de BK a un contexto más específico. Partiendo de un análisis previo y apoyándome en un UI Kit creado en retos anteriores, definí pantallas clave que abordan procesos como la selección de ítems, evaluación de servicios y registro de datos.

El trabajo incluyó iteraciones basadas en pruebas de usuario, que permitieron identificar problemas de navegación y usabilidad, así como ajustar las interacciones para mejorar la experiencia general del prototipo.

Puedes acceder al prototipo interactivo y al vídeo de presentación en los enlaces a continuación:

• Prototipo interactivo: Enlace al prototipo
• Vídeo de presentación: Enlace video

CASO 1 (Brechas de ejecución y evaluación)

Objeto a inspeccionar: Apple Airpods 2ª Generación Auriculares Inalámbricos con Estuche de Carga.

Brechas de ejecución:

· Cuando los AirPods están conectados a un dispositivo, como un teléfono, y el usuario se acerca a otro dispositivo Apple (como un MacBook), los AirPods se conectan automáticamente al nuevo dispositivo sin que el usuario lo pida.

· Si el usuario toca los AirPods accidentalmente, por ejemplo, mientras ajusta el auricular o lo mueve en su oído, puede terminar colgando una llamada sin querer.

· El usuario no puede verificar la carga del estuche de manera sencilla o directa. Debe abrir el estuche y observar la luz parpadeante, lo que dificulta la ejecución rápida de esta acción.

Brecha de evaluación:

· Cuando los AirPods se conectan automáticamente a un dispositivo cercano, el usuario no recibe retroalimentación inmediata sobre por qué o cómo se realizó este cambio. Puede sentirse confundido y frustrado.

· El usuario no recibe un mensaje claro o una señal sonora que le informe que su acción causó la desconexión o el colgado de la llamada,lo que dificulta la evaluación de la situación.

· La luz LED del estuche parpadea brevemente al conectarlo indicando que está cargando, pero no proporciona información continua sobre si el estuche está cargando correctamente.

Topografía

Ejemplo positivo: Plancha de pelo

La plancha tiene 2 botones claramente etiquetados para ajustar la temperatura “+” para subir y “-” para bajar y una pantalla digital que muestra la temperatura en tiempo real.

• Tiene retroalimentación visual los números de el panel LED parpadean mientras la plancha alcanza la temperatura deseada.

· Los controles “+” y “-” están alineados con el ajuste de temperatura, y la pantalla permite al usuario ver el cambio de temperatura en tiempo real.

· Una luz fija indica que la plancha está lista para usar, eliminando la incertidumbre. Además es muy rápida, lo cual no frustra al usuario.

Este diseño minimiza tanto la brecha de ejecución (es fácil identificar cómo ajustar la temperatura) como la brecha de evaluación (el usuario puede confirmar que la plancha está lista gracias a la pantalla y las luces).

Ejemplo negativo: Monitor de ordenador con botones traseros

· El monitor tiene botones en la parte trasera y no establece una relación visual directa entre los controles y su efecto en la pantalla.

· Nos iconos de los botones, que aparecen en la zona inferior del monitor, no son entendibles.

· Muchas veces es imposible acabar una tarea, por ejemplo, subir el brillo de la pantalla, porque
es totalmente frustrante, sobre todo retroceder.

CASO 1 (Brechas de ejecución y evaluación)

El ejemplo seleccionado es una herramienta muy valiosa para cualquier crossfitero (como es mi caso). Se trata del masajeador muscular llamado Theragun.

Brechas de ejecución y evaluación en la Theragun

• Brecha de ejecución: la principal brecha de ejecución se encuentra en la activación del dispositivo. Una simple pulsación no hace nada, se requiere una pulsación doble o una pulsación prolongada (de tres segundos) para encenderla. Esto no es intuitivo. Muchos usuarios, como yo la primera vez que la utilicé, intentarán una sola pulsación, fallando en el intento inicial. La falta de una indicación clara sobre la secuencia correcta de pulsaciones es el fallo principal. También existe una brecha de ejecución en la selección de la intensidad de vibración y temperatura y los programas preestablecidos. La poca visibilidad de los botones y la falta de retroalimentación clara dificultan su uso.
• Brecha de evaluación: tras una pulsación incorrecta, la Theragun no proporciona ninguna indicación clara. No hay luces, vibraciones o sonidos que indiquen un error o que guíen al usuario. Si la intensidad no se configura correctamente después de la pulsación doble, el usuario puede pensar que la máquina no está funcionando correctamente. La falta de información sobre el estado del dispositivo después de pulsar los botones genera una brecha de evaluación. El usuario se queda con la incertidumbre sobre si ha realizado correctamente la acción y qué debe hacer a continuación.

Heurísticas de Nielsen aplicadas a la Theragun

Modelo de diseño, modelo del usuario e imagen del sistema:

• Modelo de diseño: el diseñador probablemente priorizó un diseño minimalista y compacto, sacrificando la claridad y la usabilidad.
• Modelo del usuario: el usuario espera un sistema de control simple e intuitivo, donde una acción tenga una consecuencia clara y predecible.
• Imagen del sistema: la imagen del sistema es confusa y contradictoria, lo que crea una desconexión entre la expectativa del usuario y la realidad del funcionamiento del dispositivo.

Esquema con el problema y la solución

Conclusión

La Theragun presenta varios problemas de usabilidad debido a una mala implementación de la “imagen del sistema”. Las brechas de ejecución y evaluación, junto con el incumplimiento de varias heurísticas de Nielsen, demuestran que el diseño priorizó la estética sobre la funcionalidad, resultando en una experiencia de usuario frustrante e ineficiente. Una interfaz más clara, con retroalimentación inmediata, y una secuencia de acciones más intuitiva mejoraría significativamente la usabilidad del dispositivo.

CASO  2 (Topografía en las interfaces)

El siguiente ejemplo es un equipo DJ minimalista llamado “Whiteout”, centrándome en la evolución de su topografía. Tradicionalmente, las mesas de mezclas y controladores de DJ se han caracterizado por una disposición densa de botones, perillas, faders y otros controles. Esto puede resultar problemático para principiantes e incluso para DJs experimentados, lo que provoca problemas de usabilidad debido a una topografía deficiente de la interfaz.

Una amiga mía, que es DJ, destacó este problema. La gran cantidad de controles crea una interfaz desordenada y confusa; la relación entre los controles y sus funciones no siempre es inmediatamente clara. Esta topografía densa dificulta la operación rápida e intuitiva, afectando el flujo de trabajo y el rendimiento. La carga cognitiva es alta, lo que requiere una memorización extensa y puede provocar errores.

Equipo DJ tradicional

Equipo DJ Whiteout

Actualmente, existe una tendencia a los controladores de DJ minimalistas. Whiteout demuestra un enfoque simplificado. Este diseño prioriza una topografía clara e intuitiva. Al reducir la cantidad de controles y emplear un diseño espacial más organizado, estos controladores minimalistas mejoran la usabilidad y reducen la carga cognitiva. La topografía mejorada mejora directamente la experiencia del usuario al hacer que el sistema sea más fácil de entender y operar. De hecho, investigando pude enterarme de que son los propios DJ que montan los botones que necesitan, haciendo que el sistema sea mucho más personalizado y a medida.

El contraste entre los controladores de DJ tradicionales y los minimalistas ilustra cómo la topografía afecta significativamente la usabilidad de la interfaz. Una topografía bien diseñada, como se ve en los controladores minimalistas, promueve una interacción eficiente e intuitiva.

Este documento presenta un prototipo de baja fidelidad para una aplicación móvil destinada a los empleados de Burger King encargados de la evaluación crítica de productos y servicios. La aplicación permite realizar diferentes acciones, así como, tiene implementadas diferentes funcionalidades a modo que les permita a estos usuarios poder encontrar los productos tanto evaluado, no evaluados y pendientes de evaluar.

Este prototipo presenta los siguientes puntos desarrollados:

• Autenticación: para que los usuarios puedas acceder al perfil concreto.
• Página de usuario: con gráficas de estadísticas y con información personalizada.
• Sección de evaluación: para que puedan evaluar mediante diferentes vías los productos.
• Historial de evaluaciones: la aplicación permite crear un listado con todos los productos evaluados.
• Sección de productos no evaluados: el sistema enseña a los usuarios aquellos productos que ellos no han evaluado.
• Proceso de evaluación: todo el proceso desde la selección del producto hasta el envío de la valoración.
• Mapa: se ofrece la posibilidad de encontrar establecimientos a través del mapa.
• Valoración: mediante estrellas se pueden valorar diferentes factores del servicio.
• Comentario: se puede comentar en forma de texto libre sobre el producto.
• Confirmación de envío: se accede a una pantalla de confirmación de cumplimiento de todos los campos y del envío de la misma valoración.

He realizado un vídeo en el que enseño los diferentes puntos previos y cómo se realiza cada uno de los procesos:

El enlace a mi prototipo de baja fidelidad se puede consultar a través del siguiente enlace:

https://www.figma.com/proto/8AbZDoTw3wLUYqIzkxSPUG/Pr%C3%A1ctica-2?node-id=278-142&t=4sFVqTIiyswSiMHL-1

Creación de prototipo de baja fidelidad para inspectores del Burger King.

Para la creación del prototipo de baja fidelidad, me he basado en que el inspector se encontrará en el restaurante en el momento en el que utilice la aplicación y por lo tanto, necesita un sistema de registro e iniciar la evaluación de la manera más rápida posible.

Adjunto el link del prototipo en Figma.

https://www.figma.com/design/0I7sQOpNDfylqESrYf4Zx3/Prototipado-Reto-2-Iba%CC%81n%CC%83ez-Prats-Paula?node-id=2001-1139