¡Hola a tod@s!
Después de hacer este curso y algunos otros de Platzi enfocados al UI/UX, me he animado a crear un tutorial de todos las fases a seguir y las técnicas que se pueden emplear para llevar a cabo un Diseño Centrado en el Usuario, de principio a fin.
Me gustaría tomar como proyecto para poder ejemplificar mejor las técnicas, la creación de una app de viajes, tal como se plantea en este curso.
¿Por dónde empezamos a diseñar este proyecto? El siguiente esquema nos puede seguir como guía para éste y otros proyectos que queramos llevar a cabo:
, pensando en lo que sí o sí tiene que tener nuestro producto de forma imprescindible (must to have), lo que debería tener aunque no es estrictamente imprescindible (should to have) y lo que estaría bien que tuviera pero no es una prioridad (nice to have).
En el momento que ya tenemos definido el MPV y las funcionalidades con las que va a contar, es hora de pasar a las fases de **generación **y evaluación. Los objetivos de estas fases son las de dar forma y estructura a esas funcionalidades y comprobar que funcionan con el usuario final. El siguiente esquema nos servirá como guía para llevar a cabo estas fases:
. Hay que pensar en qué contenidos tendrá la web y cómo estarán organizados. Tendremos también que tener en cuenta qué valores queremos que respete y transmita la aplicación. Por ejemplo, ordenado, visual, colaborativo y/o participativo, en tiempo real, etc. , serían algunos de los valores que se podrían plantear en este proyecto. Además, no hay que perder de vista los perfiles de usuario a los que va dirigido la plataforma para darle un “aire” o un “tono” adecuado a los contenidos.
Para definir la categorización de los contenidos y estructurarlos en la web de acuerdo al modelo mental de los usuarios, creo que sería imprescindible implicarlos en el proceso, por lo que recurriría a la técnica del Card Sorting. Una vez extraídas las categorías que han definido los usuarios, las validaría nuevamente con otros usuarios distintos a través de un Tree Test.
Una vez definida la AI, creo que sería conveniente empezar a pensar en la navegación de la web. Sabemos que queremos que se puedan buscar viajes por destino, fechas o características concretas, también que se puedan filtrar los resultados. Después, que se puedan ver las actividades propuestas para el viaje, por lo que me imagino que hay que poder acceder a una ficha de cada viaje donde tal vez veas una descripción, galería de imágenes y valoraciones de otros usuarios. Finalmente, sabemos que hay que poder guardar documentos e invitar a otros usuarios a participar, teniendo estos diferentes roles. Para poder definir la navegación y el workflow de todas esas funcionalidades, podemos recurrir a la técnica del Diagrama de Flujos.
Ahora que tenemos los contenidos , su categorización y los flujos de navegación, podemos empezar a pensar en la experiencia del usuario. Para ello recurriría a la técnica de Storyboards, ya que nos permite representar de forma gráfica los flujos a seguir para llevar a cabo las diferentes acciones, parándonos a pensar en las emociones y sentimientos de los usuarios.
Llegados a este punto donde ya hemos definido contenidos, categorización, flujos y cómo va a ser la experiencia del usuario, es hora de empezar a ponerle “cara y ojos” y por tanto comenzaremos con el Prototipado. Empezaremos realizando _wireframes lo-fi _(de baja fidelidad) y así empezaremos a comunicar la estructura de la solución de diseño que estamos pensando. Pensaremos cosas como: ¿Dónde van a ir los menús? ¿Y el logo? ¿Dónde pondremos las call to action principales? ¿Qué jerarquía tendrán los distintos grupos de contenidos? Es importante centrarnos en la estructura, espacios, dimensiones y jerarquías, pero no en colores, tipografías ni aspectos visuales que detallaremos en etapas posteriores. Estos primeros wireframes van a ser muy importantes para iterar y detectar limitaciones y pensar alternativas dentro del equipo. Iremos elaborando _wireframes hi-fi _(de alta fidelidad) con las soluciones que vayan emergiendo hasta dar con la estructura que finalmente va a funcionar. Puede ser interesante también para _iterar _mejor, realizar algún test con usuarios en estas primeras etapas de wireframes.
A partir de ahí, será el momento de realizar el mockup o maqueta definitiva, donde ya se tomarán decisiones de cómo va a ser la interfaz a nivel visual y se concretarán colores tipografías, imágenes, botones, etc.
Una vez que tenemos el mockup, podemos iniciar la evaluación de la usabilidad y la experiencia de usuario. Yo optaría por realizar pruebas primero sin usuarios ya que conllevan menos coste y se pueden obtener también en menor tiempo.
Creando un prototipado interactivo con la herramienta _Invision _escogería la técnica del Recorrido Cognitivo ya que permite que varios expertos en usabilidad lleven a cabo tareas concretas situándose en el lugar del usuario que usa la plataforma por primera vez, comprobando que se pueden llevar a cabo con éxito las diferentes acciones. En caso de que se detecten errores, esta técnica nos permitirá _iterar _y adoptar nuevas soluciones.
Me parece que sería importante también, llevar a cabo una Evaluación Heurística ya que nos dará información de si la web que hemos diseñado cumple con los _principios de usabilidad _para solucionar aquellos aspectos que no estén funcionando.
Finalmente, antes de llevar a desarrollo la web, creo que sería conveniente llevar a cabo Test con usuarios pues es realmente donde veremos si todo el producto que hemos pensado y diseñado funciona con el usuario final.
Tremendo aporte, muchas gracias ❤️