Clase 04/6: Usuarios e interacciones.

Durante estas ultimas clases hemos estudiado los diferentes tipos de prototipos y herramientas usadas en esta etapa. Los diseños esquemáticos, son parte del proceso así como los sketch, los wireframes y los mockup con la interfaz terminada y montada en alguna pantalla que refiera a como se vera finalmente.

En este proceso es importante revisar que los textos de nuestro wireframe de baja calidad se lean bien y que las interacciones se entiendan.

Podemos hacer un primer acercamiento al diseño en muy baja calidad, muy rápido y luego pasar a un diseño de media calidad y en cada etapa vamos testeando y definiendo nuevas estratégicas sobre que podemos mejorar en la experiencia de usuario, no es necesario tener el diseño listo yo puedo testear en cualquier momento. El diseño de papel nos permite testar nuestros diseños esquemáticos simulando una interfaz pero a través de hojas de papel.

Para realizar nuestro experimento con el prototipo de papel se recomendó marvel app, a partir de fotos de los bocetos se le da interactividad a esas imágenes.

El objetivo es aterrizar esa mejora a un diseño especifico. La idea es poder trabajar este concepto y transformar estos dibujos en un prototipo de papel, observar la interacción que un usuario va hacer con nuestro dibujo, ver como funciona la interacción de nuestro diseño. Nuestro objetivo final es generar una mejora especifica en la experiencia de usuario y poder plantear una nueva pauta de evaluación para mejorar esta experiencia.

Siempre dentro del contexto del prototipo de papel, creamos mejoras de accesibilidad en el landing del sitio.

En nuestro proceso de rediseñar el landing del proyecto elegido en este caso el sitio yapo.cl nos encontramos con que debíamos hacer ciertas mejoras en cuanto a la accesibilidad para buscar contenidos, ya que al ingresar el sitio, solo nos da la opción de entrar a través del mapa de chile que nos muestra las regiones. Para mejorar eso integramos el en el buscador, muy visible dentro de la pagina, y debajo de este el botón de publicar. También incluimos el nav, que en el sitio solo aparece al ingresar a través del mapa, pero no esta visible en el landing. Además agregamos los botones de ayuda, mis avisos e ingresar para que el usuario pudiese ingresar desde el inicio de la pagina.

Nuestra propuesta incluye entre otras mejoras que se especifique mejor la información sobre el vendedor y el producto.

Luego le integramos categorías con iconos lo que lo hace mas reconocible para el usuario. Cada categoría tiene un menú desplegable que le indica las subcategorias. Al ingresar en alguna búsqueda, aparece la pantalla de resultados, en la cual si el usuario le hace clic puede entrar a una pagina donde esta especificado el producto con su foto, descripción la cual tendrá la opción de agrandar la letra. También se entrega información sobre el vendedor, el contacto con ese vendedor y las puntuaciones tanto del producto como del vendedor. También integramos la opción en la que el usuario pueda ocultar el filtro de búsqueda en caso de que este le esta estorbando. La galería incluye in slider para visualizar mejor las imágenes. Todo esto siempre en un prototipo wireframe de baja calidad, para que sea más rápido y efectivo de realizar.

Reflexiones… Aprendiendo de los usuarios.

En nuestro proceso de crear una nueva interfaz para mejorar la ya existente, hemos visto como las interacciones y los clic toman una gran importancia en el proceso. Hay que poner atención a cosas que tal vez antes no habíamos visto al hacer un boceto o diseñar una interfaz. Entender que al estar enfocado en el usuario es importante guiarlo en esta etapa a través de la correcta utilización de los elementos en la web, es por esto que se llama diseño estratégico, debemos pensar de forma inteligente como ayudaremos a nuestros usuarios a encontrar lo que necesita en la pagina. Pero en esta etapa es necesario entender que el prototipo en papel es la forma mas rápida de resolver estos nuevos objetivos planteados.

Al probar nuestro prototipo le daremos una tarea al usuario, un objetivo con el cual navegar por el sitio, por ejemplo, la tarea del usuario puede ser encontrar algo. Luego en una entrevista o reunión por zoom observamos como el usuario usa la interfaz, debemos tomar nota y observar. No podemos decirle al usuario que debe hacer. Si este no entiende hay que tratar de entender porque no entiende y que es lo que no puede hacer. Una vez identificados estas mejoras hay que hacer un nuevo wireframe pero de alta calidad, donde luego haremos una pauta heurística a partir de ese nuevo wireframe. Lo importante es observar y aprender del usuario, de como piensa y como interactúa en nuestro sitio, ya que esta es la base del diseño de experiencia basado en el usuario.