Hola a todos! Les comparto mi aproximación al R4.

Primero que todo, realicé un prototipo de alta fidelidad basado en el prototipo de baja fidelidad del R2. En este prototipo refiné algunos detalles de usabilidad y accesibilidad. Pueden verlo en este link:

https://www.figma.com/proto/UqobkR1px7r6q5LyenyGQv/App-Burger-King—Julio-Torres?page-id=258%3A2&node-id=258-4&viewport=25%2C315%2C0.18&t=vTYLB2c3aCsPvLyw-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=258%3A4

Este prototipo lo utilicé para realizar el testeo con usuarios, para lo cuál le solicité a dos de mis amigos cercanos del trabajo (que también son UX) y a dos amigos de fuera del trabajo (que no tienen trabajos relacionados al UX) que hicieran uso del prototipo, pensando en voz alta y me dieran feedback de como mejorarlo. De esto surgieron soluciones muy interesantes, aunque algunas tenían implementación más compleja que otras.

Las alternativas que decidí integrar a mi prototipo debido a que eran las más viables y que más valor aportaban, fueron integrar en una misma pantalla el buscador por nombre de la franquicia y por mapa, en lugar de tener estas funcionalidades separadas en dos tabs diferentes; y cambiar el sistema de firma de una firma sencilla, que no es tan fiable debido a las limitaciones del dispositivo, por una firma por inicio de sesión con usuario y contraseña y validación por biometría que se genera a través del escaneo de un QR en la app del auditor.

Esto me permitió poder iterar mi propuesta y generar dos nuevos prototipos, uno con la interacción sobre la app del interventor, y uno con la interacción del gerente de la tienda al escanear el QR y realizar la firma de la aceptación. Estos 2 flujos pueden verlos en el link a continuación:

https://www.figma.com/proto/UqobkR1px7r6q5LyenyGQv/App-Burger-King—Julio-Torres?page-id=258%3A3907&node-id=258-3908&viewport=339%2C236%2C0.21&t=QVogX2EvULtn7IJz-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=258%3A3908&show-proto-sidebar=1

Por último les comparto el video de presentación del producto:

App Burger King

Hola a todos!

Aquí les presento mi prototipo de alta fidelidad del último reto de la asignatura. Una app para inspectores de calidad de Burger King (BK), donde se pueden ver los escenarios planteados y como de una manera intuitiva se puede hacer uso de la app.

Considero que tener un buen UI kit ayuda muchísimo, el Atomic Design me ha servido para ir ajustando algunos elementos o iconos y que se puedan ir replicando en otros componentes. Vi muy claramente que al tener un buen UI kit o Design System lo más completo posible permite componer pantallas y secciones lo más ajustadas al branding de BK. Sumado a las interacciones que se prototipan con Figma se puede ver como se usa la app de manera muy directa.

Gracias al test con usuario pude iterar el prototipo y ajustar unas cuestiones que resultaban elementales para los usuarios, pero que a la hora del diseño no estaban consideradas.

Espero que les guste y enhorabuena por todos los trabajos que estuve viendo algunos y soy muy buenos!

Aqui les dejo el link de mi prototipo de Figma y abajo un video explicativo.

Comparto mi prototipo de aplicación diseñado para los inspectores de calidad de Burger King.

En este proyecto, he trabajado en un prototipado de alta fidelidad y llevado a cabo pruebas de guerrilla con usuarios para evaluar su funcionalidad. Gracias al feedback obtenido, realicé iteraciones en el diseño para optimizar la experiencia del usuario.

Os dejo un breve vídeo explicando cómo funciona la aplicación. ¡Cualquier comentario o sugerencia será muy bien recibido!

Hola a todos, a continuación les presento mi respuesta al Reto 3.

Caso 1: Bose Soundlink Color II

La razón para seleccionar este dispositivo, fue que si bien puede ser un dispositivo con un modo de uso al que estamos acostumbrados porque realizamos los mismos gestos en otros dispositivos bluetooth (como otros parlantes portátiles o audífonos inhalámbricos), en realidad los gestos no son intuitivos ni se relacionan con el modelo mental que se había construido en dispositivos más antiguos. El ejemplo más importante de esto, son los gestos para retroceder y avanzar en las canciones, que dependen de hacer múltiples clicks en el botón de reproducir.

Si bien mediante la observación inicial se pudo diagnosticar una brecha de uso en el sistema, se procede a realizar un test de heurísticas:

• Visibilidad del estado del sistema: Si, ya que el usuario puede saber si se está reproduciendo algo o no por el sonido que genera, y hay auxiliares LED que indican el tipo de conexión y el estado de la batería.
• Relación entre el sistema y el mundo real. No, el dispositivo no tiene una relación con el modelo mental obtenido en generaciones previas de reproductores de música.
• Control de uso y libertad: Si, el usuario no tiene problemas para llevar a cabo distintas acciones con la interfaz.
• Consistencia y estándares: Si, es consistente con otros dispositivos de su misma generación.
• Prevención del error: No, no hay sistemas que eviten el error del usuario.
• Reconocimiento antes que recuerdo: No, los gestos no son intuitivos y tampoco se apoyan con la iconografía de la interface.
• Flexibilidad y eficiencia de uso.: Si, no hay bloqueantes en su uso.
• Diseño estético y minimalista: Si, no hay distracciones hacia el usuario y el dispositivo es acorde a las tendencias estéticas del mercado.
• Ayuda a los usuarios a reconocer, diagnosticar y recuperar de errores. No, no cuenta con nada que informe al usuario que se equivocó, más allá de que el resultado del error pueda ser reconocido en la no reproducción de la música o medios de audio.
• Ayuda y documentación: cuenta con un manual básico.

Propuesta:

Se generan dos propuestas. En la primera, se modifica la estructura del sistema, agregando nuevos botones para poder separar funciones que no son obvias solo mediante gestos, e indicadores LED que den más información acerca del estado del dispositivo. En la segunda propuesta, se modifican los gestos con los que se opera el dispositivo, complementando esto con elementos gráficos en la interfaz que guien al usuario a realizar la acción.

Caso 2: Banda para correr Matrix T3x

En este caso, se consideró que los botones que componen la interfaz, no cuentan con un orden lógico ni representativo de las acciones que llevan a cabo en el sistema, a pesar de que estéticamente pueda verse limpia la interfaz.

Propuesta:

En la propuesta de topografía que se genera, se intenta que los botones que controlan las acciones principales que modifican la actividad del usuario, tengan una relación lógica con lo que generan en el sistema. De esta manera, si un usuario quiere aumentar la velocidad de la cinta, podrá hacer click en el botón que apunta hacia adelante de la ilustración que representa al usuario.

Por otro lado, se agruparon las acciones que tienen características similares entre sí, y se reservó un espacio para brindar información al usuario acerca de los programas predeterminados, ya que dentro de la interfaz actual esta información no se comunica al usuario, y hace dificil entender el propósito de un teclado numérico dentro de la interfaz.

Espero que les haya parecido interesante mi aproximación al reto.

Saludos a todos!

CASO 1

Para realizar el análisis elegí como imagen de sistema una cafetera automática DeLongui magnifica EVO. El objetivo es poder comprobar las interacciones, encontrar esas brechas de ejecución y de evaluación, si es que existen, para luego poder presentar un esquema con propuestas de mejora.

Para ello, se utilizó inicialmente una evaluación heurística, más concretamente, el listado de heurísticas de Jakob Nielsen. Este listado, es uno de los más utilizados y la idea fue buscar resultados que permitan mejorar los problemas de usabilidad que presenta la cafetera.

Desde la usabilidad, hasta la estética, la forma que interpela al usuario, etc. son criterios que se tendrán en cuenta en el momento del análisis.

Una de las brechas que me pareció más interesante es cuando la máquina se queda sin café y se quiere rellenar los granos no se sabe bien si el espacio para poner los granos de café es el grande o el pequeño. No queda claro cual es de granos y cual de café molido, no hay ningún indicador.

Para resolver el problema con la confusión sobre dónde se debe poner el café, ya sea en el compartimento grande o en el pequeño, es necesario implementar soluciones que le den indicio visibles al usuario. Por ejemplo, se podría añadir una etiqueta en cada compartimento que especifique de manera clara su función. Ejemplo: «Solo para café molido», para el compartimento pequeño, mientras que en el compartimento grande podría decir: «Solo para café en grano». Estas etiquetas con texto claro, ayudarían a evitar confusiones, reduciendo el riesgo de errores.

Además de las etiquetas, se podría incorporar una solución física para prevenir el uso incorrecto del sistema. Por ejemplo, en el compartimento para café molido, sería útil añadir una rejilla fina más pequeñas que el tamaño de un grano de café. Este diseño garantizaría que, si un usuario intenta colocar granos enteros en el espacio para al café molido, estos no puedan pasar a través de la rejilla. Al quedar bloqueados físicamente, se evitaría que la máquina funcione de manera incorrecta, preservando su buen estado y prolongando su vida útil.

Para ver el caso completo haz click aqui

CASO 2

En el ejemplo elegido se puede ver una topografía que ayuda a mejorar la comprensión del sistema y el uso del objeto. Es un molinillo de pimienta, pero a diferencia de los molinillos convencionales, que se utilizan girando la parte superior para que gire el molinillo, en este se presiona como un botón.

Como se puede ver en la imagen, el tamaño del pimentero es de una dimensión para un agarre con la palma de la mano y queda el dedo pulgar libre como para poder presionar y lograr moler los granos de pimienta. El diseño del molinillo es, a diferencia de los tradicionales que son circulares a rosca, este es vertical que mediante el movimiento de arriba hacia abajo, se muele la pimienta.

Para ver el caso completo haz click aqui

Evaluación Heurística de una Cámara de foto desechable

Visibilidad del estado del sistema


Aspectos positivos:
La rueda de avance de la película da feedback físico y sonoro, indicando al usuario que la película está lista para la siguiente toma.
Aspectos negativos:
No siempre es claro cuántas fotos quedan, especialmente si el contador es pequeño o poco visible.

Concordancia entre el sistema y el mundo real


Aspectos positivos:
Utiliza un diseño simple y familiar (botón para disparar, lente visible).
Aspectos negativos:
El ícono del flash a veces no es intuitivo para quienes no están familiarizados con cámaras tradicionales.

Control y libertad del usuario


Aspectos positivos:
Es difícil cometer errores críticos debido a la simplicidad del diseño.
Aspectos negativos:
No permite corregir errores, como fotos mal tomadas, ya que no hay vista previa ni opción de borrar imágenes.

Consistencia y estándares


Aspectos positivos:
Cumple con los estándares tradicionales de cámaras de película: botón de disparo, visor óptico, y flash.
Aspectos negativos:
Algunas marcas tienen ubicaciones poco intuitivas para el flash o el botón de avance.

Prevención de errores

Aspectos positivos:
La cámara está diseñada para evitar usos incorrectos, como disparar sin avanzar la película.
Aspectos negativos:
No previene que el usuario olvide activar el flash en condiciones de poca luz.

Reconocimiento mejor que recuerdo


Aspectos positivos:
Los controles principales (botón de disparo y flash) suelen ser claramente visibles y accesibles.
Aspectos negativos:
Algunos usuarios pueden olvidar el significado de los íconos, especialmente si son poco claros.

Flexibilidad y eficiencia de uso


Aspectos positivos:
Funciona bien para principiantes debido a su simplicidad.
Aspectos negativos:
Usuarios avanzados podrían encontrarla limitante por la falta de control manual sobre la exposición y el enfoque.

Flexibilidad y eficiencia de uso


Aspectos positivos:
Funciona bien para principiantes debido a su simplicidad.
Aspectos negativos:
Usuarios avanzados podrían encontrarla limitante por la falta de control manual sobre la exposición y el enfoque.

Estética y diseño minimalista


Aspectos positivos:
Su diseño es sencillo y no distrae con elementos innecesarios.
Aspectos negativos:
Algunas cámaras tienen etiquetas o indicaciones que abarrotan el espacio visual.

Ayuda para reconocer, diagnosticar y corregir errores


Aspectos positivos:
El diseño limita errores graves.
Aspectos negativos:
Si el usuario olvida avanzar la película o activar el flash, no recibe ningún aviso hasta que revisa las fotos (después del revelado).

Ayuda y documentación


Aspectos positivos:
Las instrucciones impresas suelen ser claras y están disponibles en el empaque.
Aspectos negativos:
No hay soporte adicional mientras se usa el producto.

PRINCIPALES PROBLEMAS
•El indicador del estado del flash es poco visible o accesible, lo que genera:
•Fotos mal iluminadas en condiciones de poca luz.
•Frustración del usuario al no obtener los resultados esperados.
•Falta de feedback que informe si el flash está listo.

PROPUESTAS DE MEJORAS
• Un indicador LED junto al botón de disparo que muestre el estado del flash
– Luz verde: Flash listo.
– Luz roja: Flash cargando.
• Iconos más grandes y claros sobre el interruptor del flash
• Colocación del indicador en un lugar visible mientras se sostiene la cámara además de aumentar el tamaño de casi todo los elementos tangibles.
• Mayor lente para conseguir una mayor calidad
• Luz pre-disparo para conseguir mayor luminosidad

¿QUE PASA SI MEJORAMOS?
•Reducción de errores en fotos mal iluminadas.
•Mejora en la experiencia de usuarios principiantes y avanzados.
•Aumento de la confianza y satisfacción del usuario.

Topografía en las interfaces

Ejemplo: Microondas y su panel de control

Problema identificado:
 Muchos microondas modernos tienen un diseño de panel confuso, donde los botones son pequeños, están abarrotados, y los íconos o etiquetas no son intuitivos. Esto puede dificultar tareas simples como seleccionar una función o ajustar el tiempo de cocción.

Impacto:
Usuarios mayores o principiantes pueden tener dificultades para entender las funciones.
El sistema no ofrece retroalimentación clara (como luces o sonidos).
Puede generar errores al usar botones incorrectos.

Propuesta de mejora con enfoque en la topografía

Distribución clara de funciones:


-Agrupar botones relacionados en secciones diferenciadas, como «Cocción rápida», «Ajustes de tiempo», y «Opciones avanzadas».

Uso de íconos y etiquetas claras:


-Emparejar íconos comprensibles (como un reloj para tiempo, una llama para potencia) con texto explicativo.

Retroalimentación visual y sonora:


-Agregar luces LED alrededor de los botones seleccionados y sonidos específicos para confirmar interacciones.

Botones grandes y bien espaciados:


-Evitar botones pequeños y agrupados para mejorar la accesibilidad.

Prototipo explicativo

Webflow

Hola a todos, les comparto mi experiencia con el reto propuesto.

En primer lugar generé una serie de estilos para generar los elementos más básicos del sistema de diseño de BK:

Posteriormente, procedí a generar los componentes que se solicitaron en el reto. Teniendo en cuenta que la app y web de BK no cuentan con interacciones como estados de Hover y Click en sus componentes, propuse una animación sencilla que permite que el usuario tenga feedback cuando realiza una acción. Estos componentes y sus interacciones pueden ser vistas en este video:
Componentes BK

Por último, en respuesta al caso propuesto en el que se solicitan los wireframes de una app en la que los empleados de BK puedan hacer control de calidad, generé un prototipo sin interacciones y solo haciendo uso de los estilos más básicos que me permitieran mostrar la idea. Lo podrán ver a continuación:
Burger King Wireframe

Saludos!

Hola a todos,

En este reto cuenta con dos partes, en la primera se analizó la interfaz de Burger King (BK) viendo como son los elementos de estilo, los elementos de interacción e iconografía con lo que preparé un ui-kit básico. Que se puede ver en este enlace de figma: LINK

Aqui algunas capturas de los componentes:

Pero también presento este video que permite ver las interacciones de esos componentes y como se relacionan con el prototipo:

En la segunda, realizaré un pequeño prototipo de baja fidelidad para plantear una aplicación que serviría para facilitar a los controladores de calidad de BK poder cargar reportes de calidad de los productos. Este prototipo se puede ver es este enlace: LINK

También en el siguiente video se puede observar la navegación por el mismo:

Espero que les haya gustado! Saludos!