¡Hola a todos! Hoy quiero compartir con ustedes un emocionante ejercicio de prototipado que realicé, durante una temporada de viajes laborales. Este ejercicio se centra en las brechas de ejecución y evaluación al utilizar un limpiador para sanitarios y en la topografía en las interfaces, utilizando como ejemplo un bebedor de agua.

Análisis del Toiletseatcleaner

En una situación personal, me encontré con un limpiador para sanitario en el Aeropuerto de Schipool. Después de intentar usarlo varias veces, no obtuve ninguna retroalimentación o cambio del objeto. Esto me llevó a reflexionar sobre el reto del diseñador de crear una imagen del sistema acorde al modelo mental del usuario que facilite el uso del sistema, objeto o solución.

Evaluación Heurística

Siguiendo los 10 principios de usabilidad por Jakob Nielsen, evalué el limpiador de sanitarios y encontré los siguientes puntos de mejora del sistema:

1. La visibilidad del estado del sistema: Es crucial que el usuario pueda ver el estado actual del sistema para entender si sus acciones han tenido efecto.
2. La prevención de errores: El sistema debe estar diseñado para prevenir errores antes de que ocurran.
3. El reconocer en lugar de recordar: El sistema debe facilitar que los usuarios reconozcan opciones y acciones en lugar de tener que recordarlas.
4. La ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores: El sistema debe proporcionar mensajes de error claros y ayudar a los usuarios a corregirlos.
5. La ayuda y documentación: El sistema debe ofrecer ayuda y documentación accesible para que los usuarios puedan resolver problemas por sí mismos.

Este ejercicio me permitió comprender mejor la importancia de alinear el diseño del sistema con el modelo mental del usuario para mejorar la usabilidad y la experiencia del usuario.

Análisis de un Bebedor de agua

Topografía en las interfaces

La palabra «topografía» es un término técnico que viene a significar la relación entre dos cosas; en este caso, entre el bebedor de agua y los resultados en el mundo exterior. La topografía se aprende con facilidad y se recuerda siempre. En el caso del bebedor, es una topografía natural, visto que la relación lógica de presionar un pedal resulta en la salida del agua del bebedor.

Proceso de aprendizaje

El bebedor de agua es un claro ejemplo de cómo un objeto, por su diseño, facilita a los usuarios una comprensión rápida del sistema para el uso constante del objeto. La simplicidad y la intuición del diseño permiten que los usuarios entiendan rápidamente cómo interactuar con el bebedor sin necesidad de instrucciones adicionales.

Evaluación Heurística

Al realizar la evaluación heurística del bebedor de agua, se encontraron los siguientes puntos fuertes y puntos de mejora del sistema. Siguiendo los 10 principios de usabilidad por Jakob Nielsen, se validó que el bebedor de agua es fácil de utilizar gracias a:

1. La visibilidad del estado del sistema: El bebedor muestra claramente cuándo está en funcionamiento, lo que ayuda a los usuarios a entender el estado actual del sistema.
2. Darle al usuario el control y la libertad: Los usuarios pueden controlar fácilmente la cantidad de agua que desean obtener, lo que les da libertad en su uso.
3. Reconocer en lugar de recordar: El diseño del bebedor permite a los usuarios reconocer las acciones necesarias para obtener agua, sin necesidad de recordar pasos complejos.
4. La estética y diseño minimalista: El bebedor tiene un diseño limpio y minimalista que facilita su uso y comprensión.
5. La ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores: En caso de que el bebedor no funcione correctamente, los usuarios pueden fácilmente identificar el problema y buscar soluciones.

Este ejercicio me permitió comprender mejor la importancia de la topografía en las interfaces y cómo un diseño intuitivo puede mejorar significativamente la experiencia del usuario.

Referencias

Norman, D. (2002). The Design of Everyday Things. New York: Basic Books. pp. 1-36. ISBN 0465067107.

https://design-toolkit.recursos.uoc.edu/es/evaluacion-heuristica/

¡Hola a todos y todas! 

Quiero compartir con ustedes el proceso y el resultado de la creación del prototipo de la página de producto de la app Grover.

Prototipo de Página de Producto de Grover App

Aquí está el video que realicé con el resultado final:

Un Proceso Creativo

Empatía

Para comenzar, me enfoqué en entender el servicio que ofrece Grover, el anuncio y mis objetivos con este reto. Aunque el servicio puede parecer lógico, tuve dificultades para comprenderlo, ya que al descargar la aplicación desde el App Store de Colombia, se descargó en alemán. 

Gracias al plugin de Figma Brandfetch, pude identificar la paleta de colores, logos y tipografía utilizados en la página web, y guardé estos estilos para la app. Tomé capturas de pantalla de la app, asimilé los tamaños y estilos de texto, descargué los íconos en SVG con el plugin Iconify, definí el layout grid y finalmente guardé las primeras imágenes del producto sugerido, el iPad mini. 

Coherencia 

Después de crear los estilos base, comencé a desarrollar cada componente siguiendo el sistema Atomic Design, que explica cómo las unidades atómicas se unen para formar moléculas, que a su vez se combinan en organismos más complejos. Esta metodología fue muy útil para mantener coherencia y consistencia en cada botón, componente e interacción que iba creando. Al realizar el prototipo, me di cuenta de que el desarrollo de la aplicación no coincidía con los estilos de texto y la similitud con los flujos en la página web. 

En esta etapa, quiero resaltar que crear átomos, moléculas y organismos me ayudó mucho a corregir errores y rediseñar componentes que ya tenía prácticamente diseñados. 

Economía y reutilización 

Durante el diseño de la interacción de los datos técnicos, me di cuenta de que el estilo era muy similar a las cards en la página de detalle del producto. Esto me llevó a rediseñar la «Content-card» con todas las posibilidades que este átomo podría incluir, como el Trailing y Leading Icon, subtítulos de dos líneas, los logos de los métodos de pago e incluir el ícono o no. Todas estas decisiones fueron tomadas con el objetivo de reutilizar los componentes creados y minimizar el número de nuevos componentes por crear. De esta forma, logré resolver la interfaz gráfica con el menor número de elementos posibles para el diseño de las Collection cards, datos técnicos, etiquetas, carruseles y los precios. 

De la misma manera, se crearon las cards de los diferentes carruseles, diseñando una sola card pero con dos variables para mantener el mismo número de piezas que componen las cards, como el título, la descripción y una imagen, y usando la misma card pero en diferentes carruseles, con diferentes títulos y contenidos. 

Estética 

Una vez que todos los componentes fueron diseñados y prototipados, comencé a agregar el contenido real de la app. Aunque tenía un alto nivel de fidelidad, terminé copiando y pegando textos e imágenes que faltaban en el prototipo. En esta fase, también traté de perfeccionar algunas de las interacciones en Figma, pero al final me di cuenta de que esta es una oportunidad para seguir aprendiendo más sobre esta herramienta. 

Prototipo de Figma

Les dejo el enlace al prototipo de Figma con todo el proceso que les comenté: aquí

Referencias

Brandfetch. (s.f.). Brandfetch for Figma. https://brandfetch.com/plugins/figma

Frost, B. (2013, 10 de diciembre). Atomic web design. Brad Frost. https://bradfrost.com/blog/post/atomic-web-design/

Iconify. (s.f.). Iconify for Figma. https://iconify.design/docs/design/figma/

Universitat Oberta de Catalunya. (s.f.). Estética y usabilidad. Quadern Prototipat. https://quadern-prototipat.aula.uoc.edu/es/2-1-introduccion/

Saludos,

Angélica.