En este último reto, se ha desarrollado un prototipo de alta fidelidad inspirado en el estilo y la narrativa de Headspace. La plataforma está dirigida al ámbito B2B y permite a las empresas publicar contenidos relacionados con el bienestar emocional de sus empleados y empleadas.

A lo largo del proyecto se ha analizado el estilo de Headspace y se ha ido iterando en el diseño de los flujos para esta nueva aplicación; inicialmente en baja fidelidad para ir puliéndolo en futuras iteraciones.

Una vez completado el prototipo, se llevó a cabo una prueba con usuarios, en la que participaron tres personas. A pesar de las limitaciones metodológicas del test, fue posible identificar conclusiones relevantes y puntos de fricción que sirvieron como base para iterar el diseño e incorporar mejoras que resolvieron las principales limitaciones del prototipo inicial.

El resultado ha sido una nueva iteración del prototipo de alta fidelidad, en el que se han tenido en cuenta estas fricciones y se han aplicado las propuestas de mejora derivadas del proceso de evaluación.

En este enlace al prototipo podéis acceder a la última versión.

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

En este segundo Reto de Prototipado, he profundizado en el análisis y construcción del sistema de estilos y componentes interactivos de la aplicación de Headspace.

Después de analizar detalladamente el uso y aplicación de los distintos elementos de Headspace en sus diferentes interfaces móvil y web, he creado un álbum de estilos y un Kit UI con varios de estos elementos.

En el siguiente enlace podéis interactuar con las instancias creadas a partir de los distintos componentes generados: Prototipo instancias

En la segunda parte del reto, he diseñado un prototipo de baja fidelidad, utilizando diversas aproximaciones, con el fin de ir iterando desde distintas perspectivas y tratar de ir puliendo poco a poco los flujos.

Podéis acceder al prototipo final en el siguiente enlace: Prototipo app

En el vídeo que encontraréis a continuación, se muestra el prototipo en acción:

Buenas tardes!

Este primer reto de la asignatura de Prototipado ha consistido en replicar un flujo de la aplicación Headspace mediante un prototipo de alta fidelidad.

A continuación podéis ver el resultado de un mes de aprendizaje, práctica, ensayo y error, y también de algún que otro quebradero de cabeza:

Como veréis, he conseguido replicar con éxito varias de las interacciones y de los elementos de la app. Sin embargo, al crear ciertos componentes e interacciones, todavía me surgen dudas sobre si las soluciones que he aplicado son las más adecuadas.

Por ejemplo, al diseñar las etiquetas de las meditaciones con su animación en press, no he logrado generar un único componente que me permitiera modificar tanto el texto como la imagen y que, además, cambiara correctamente entre los estados Pressed y Unpressed (el texto y la imagen se mantenían como en la primera versión del contenido). Mi decisión final ha sido crear un componente con los dos estados de una única etiqueta, aunque de esta forma, para crear nuevas etiquetas, habrá que generar un componente para cada una de ellas… Por lo que creo que debe haber una manera más ágil y escalable de diseñar este elemento. ¿Cómo lo habéis resuelto vosotras?

¡Muchas gracias de antemano por vuestras sugerencias!

Os dejo también el enlace al prototipo por si queréis curiosear un poco más:  Prototipo Headspace