PARTE III: CÓMO HACER UN ANÁLISIS HEURÍSTICO | OPTIMIZACIÓN WEB DE DIDECO
Test de Usabilidad, Test de Usuarios, Creación de Insights, UX Design y Prototipado
OVERVIEW
Dideco es una tienda de juguetes educativos, libros infantiles y papelería escolar que busca dar respuesta a las necesidades de los padres, y educadores en la formación y el desarrollo de los más pequeños.
Para la optimización de la tienda online de Dideco o página web nos centraremos en dos objetivos:
1.Ofrecer la misma experiencia que en la tienda física.
2.Ampliar el target a nuevas generaciones de padres.
METODOLOGÍA DOUBLE DIAMOND
Double Diamond Design Process: es un método que permite entender a los usuarios, explorar, crear soluciones de forma creativa y testearlas para satisfacer las necesidades de estos usuarios.
El Double Diamond permite llegar a las soluciones y problemas pensando de dos formas diferentes:
1. Pensamiento Divergente: piensa a lo macro o de forma abierta y sin barreras donde todo es posible o casi todo.
2. Pensamiento Convergente: piensa a lo micro o de forma acotada enfocandote en los problemas y las soluciones definidas.
Las 4 fases del Double Diamond:
- Mapear o Descubrir: los insights en los problemas de los usuarios.
- Explorar y Definir: los problemas de los usuarios identificando cuales son los más importantes, los más frecuentes y realizables.
- Construir : las potenciales soluciones a los problemas del usuario prototipándolos, testeandolos e iterandolos.
- Entrega final del producto: el cual debe ser factible y viable para lanzarlo al mercado.
He usado está metodología para saber cuáles son los problemas del usuario y crear las soluciones más acertadas.
1era FASE: MAPEAR O DESCUBRIR
Toda la parte de Investigación (creación de Personas, Cuestionarios, Entrevistas en Profundidad, Mapas de Empatía, Escenarios de casos de uso, Benchmark, Diagnóstico de la industria, DAFO) y de Estrategia (Customer Journey, Recopilación de Insights, Brainstorming, Matriz A/E, Scope Canvas, Propuesta de Valor) están en la PARTE I.
Me centro en la optimización de la web para detectar los problemas de usabilidad y crear mejoras centradas en el usuario.
ANÁLISIS HEURÍSTICO O EVALUACIÓN DE USABILIDAD
Es un método que permite identificar los problemas en la interfaz del usuario (UI) basado en los principios de usabilidad.
Mi análisis heurístico está hecho para desktop y tiene 11 bloques de usabilidad donde el informe recoge:
1. La nota final para cada bloque con una valoración del 1 al 5 [ 1= muy mal| 2| 3| 4| 5=muy bien| VACÍO=si no existe o no procede ]. Se valoran a priori las guías de usabilidad para cada bloque con esta valoración.
2. Las observaciones: se hacen para las guías de usabilidad de cada bloque. Luego recomiendo resumirlas para cada bloque como lo presento en mi análisis.
3. Las soluciones posibles a estos problemas identificados en las observaciones de cada bloque.
Para finalizar el análisis heurístico, he creado un gráfico de araña (muy fácil de crear en excel) que me ha permitido mapear en donde la web falla más. Además, lo correlacionare con el Test de Usuarios para la generación de los insights.
TEST DE USUARIOS: DE LA USABILIDAD DE LA WEB
A continuación el Test de usuarios nos permitirá tener un análisis cualititativo sobre la usabilidad de la web actual de Dideco.
Los usuarios elegidos para testear se hacen con las PERSONAS previamente definidas en la investigación [ puedes leerlo en la PARTE I ]. Lo ideal sería hacerlo al menos con 5 personas, pero al ser la única componente en el equipo me quedé con 2 usuarios testados (os dejo un link que explica EL POR QUÉ 5 PERSONAS es el número ideal para hacer un TEST DE USABILIDAD UX).
Mi test de usuario se compone de los siguientes 5 pasos:
PASO 1: DEFINICIÓN DE LOS OBJETIVOS DEL TEST
Optimizar la HOME, FICHA DE PRODUCTO y PROCESO DE COMPRA a través del feedback de los 2 usuarios testados.
PASO 2: TEST CUALITATIVO
Este test cualitativo se compone de 6 PASOS:
- Los 3 primeros pasos: una pequeña introducción para empatizar con el usuario testado, y luego un cuestionario de 3 preguntas generales.
- Los últimos 3 pasos consisten en: las tareas de navegación que voy a optimizar de la web: HOME, FICHA DE PRODUCTO y PROCESO DE COMPRA.
Aquí puedes visualizar el PROTOCOLO DE LAS TAREAS DE PRUEBA DE USABILIDAD CON USUARIOS
PASO 3: SELECCIÓN DE PARTICIPANTES
- USUARIO NEGATIVO: kinesiologa, fisioterapeuta deportivo y doctoranda.
- USUARIO PADRE : con un hijo de 4 años.
PASO 4: REALIZACIÓN DEL TEST DE USABILIDAD
He usado la herramienta Camtasia para poder grabar todo el test y los movimiento que iba haciendo el usuario en la web.
!Siento el ruido de fondo en el vídeo!
PASO 5: ANÁLISIS DE LOS RESULTADOS E INFORME
Consta de 2 PARTES resueltas:
- Un cuestionario con 4 preguntas iniciales.
- 15 Tareas de Navegación para el análisis de usabilidad de las 3 partes de la web que voy a optimizar (es decir 5 tareas por parte):
A. HOME
B. FICHA DE PRODUCTO
C. PROCESO DE COMPRA
2da FASE: EXPLORAR
AFFINITY MAPPING
He utilizado el proceso de Affinity Mapping para colocar mis observaciones del Informe de Test de Usuarios en post-it.
Hay 3 mapas, una para cada parte a optimizar de la web, y están construidos según la narrativa del Cómo (leer libro User Story Mapping). Obtenemos así un primer y segundo nivel llamados el backbone o el esqueleto y el último nivel sería el body o cuerpo:
1. ACTIVIDAD PRINCIPAL: LOS USUARIOS SE INVOLUCRAN EN Y COMO LO HACEN
2. PASOS QUE PASAN EN ESTA ACTIVIDAD PRINCIPAL
3. DETALLES DE LOS PASOS: los post-it amarillos corresponden al usuario negativo y el verde al usuario padre.
INSIGHTS
Los Insights los he sacado del Affinity Mapping, son el resumen de los comportamientos y pain points de los dos usuarios:
INSIGHTS DE LA HOMEPAGE
- Los usuarios tienen problemas con el buscador porque no da resultados con más de una palabra.
- Los usuarios tienen problemas con el buscador central por falta de visibilidad y por ello recurren al menú lateral.
- Los usuarios tardan mucho en buscar un producto por precio porque no hay un filtro de precio.
- Los usuarios no pueden encontrar los productos en descuento porque como lo denominan`outlet´ nos le llama la atención.
- Los usuarios no encuentran llamativa la información de Dideco dada en Quiénes somos. Demasiado texto y poco visual.
- Los usuarios no encuentran su respuesta exacta en el link de preguntas frecuentes y les gustaría algo más directo y al momento.
BRAINSTORMING
En este paso, añado algunas conclusiones y soluciones del Análisis Heurístico que en gran parte coinciden con el Test de Usuarios.
Este método nos ayudará a establecer las ideas que luego se transformarán en el diseño de la optimización de la web.
BRAINSTORMING DE LA HOMEPAGE
Englobo los insights de los usuarios en dos preguntas y añado una pregunta más orientada al negocio.
1.¿CÓMO MEJORAR EL BUSCADOR Y CENTRARLO EN EL USUARIO PARA SEA MÁS VISUAL Y RÁPIDO?
Generar un buscador del tipo SNCF con Inteligencia Artificial
Tener un menú lateral
2.¿CÓMO ACERCARSE AL USUARIO PARA RESOLUCIÓN DE SUS DUDAS?
Un chatbot con machine learning tipo Intercom o Messenger de Facebook
3.¿CÓMO RENOVAR LA IMAGEN DE DIDECO E INFORMACIÓN PARA ACERCARLA A NUEVAS GENERACIONES?
Crear nuevos formatos tipo Horizontal Stories tipo Mashable Reel
Insertar vídeos de los productos
ANÁLISIS PARA PRIORIZAR DISEÑOS
Vamos a pensar como si fuéramos una empresa. Como no se tiene presupuesto infinito, hay que priorizar.
Para ello hacemos una matriz 2x2 de más importante a menos y de menos frecuente a más frecuente, donde ponemos las actividades principales de los Affinity Mapping.
De esta manera ofrecemos las soluciones mínimas viables al usuario, es decir las más pequeñas soluciones ofrecidas a los usuarios que logran con éxito los resultados deseados.
Priorizo los pain points más importantes y más frecuentes:
- Formas de Buscar un Producto (HOME)
- Búsqueda de un producto en descuento (HOME-FICHA DE PRODUCTO)
- Formato de descripción de producto (FICHA DE PRODUCTO)
- Interacción de la Imagen del producto (FICHA DE PRODUCTO)
- Elección de tienda cercana (PROCESO DE COMPRA)
TERCERA FASE: CONSTRUIR
SKETCHES
Después de todo el análisis previo empiezo con mis bocetos para plasmar los cinco pain points en resoluciones a través del diseño.
WIREFRAMES PARA LA HOME
PAIN POINT 1.1: Los usuarios tienen problemas con el buscador porque no da resultados con más de una palabra.
PAIN POINT 1.2: Los usuarios tienen problemas con el buscador central por falta de visibilidad y por ello recurren al menú lateral.
RESOLVIENDO EL PROBLEMA: para que no haya distracciones, situo el buscador al centro de toda la página, el cual estará generado por Inteligencia Artificial, pudiendo asesorar al usuario en todo momento.
Para las personas que no estén acostumbradas a este sistema, creo la alternativa de un menú lateral donde habrá opciones similares a la que tiene la web actualmente. Previamente habrá un filtro, por edad, precio y categoría, que al aplicar condicionarán los juguetes y libros. Por ejemplo: con filtro de 3 años y seleccionamos la pestaña Juguetes, visualizamos: dos productos y una oferta correspondiente (VER PROTO).
Se modifica la arquitectura de la información tras el test de usuarios hecho previamente.
PAIN POINT 2: Los usuarios no pueden encontrar los productos en descuento porque lo denominan `OUTLET´y no llama la atención.
RESOLVIENDO EL PROBLEMA: para la búsqueda de un producto en descuento, el propio Didibot (buscador inteligente) muestra tanto productos recomendados como productos en ofertas cuando el usuario hace una búsqueda. Por ejemplo: Juguetes para niños de 3 años. Y se visualizan dos productos y otro en oferta.
PAIN POINT 3: Los usuarios encuentran desordenada la información y no visualiza lo importante.
RESOLVIENDO EL PROBLEMA: para resolver el formato de descripción de producto, creo 4 interacciones con las denominaciones más importantes para el usuario en cuanto a la información del producto:
DESCRIPCIÓN
MATERIAL
DIMENSIONES
IDEAS
De esta forma no saturamos al usuario con tanta información a la vez.
PAIN POINT 4: los usuarios encuentran poco atractivo el formato de imágenes.
PROBLEMA NO RESUELTO: aquí me he quedado sin presupuesto y tocará mejorarlo más adelante. Pero una opción sería poner imágenes en 3D, 360 grados o generar un código expuesto al lado del producto para usarlo en la APP y visualizar el producto en Realidad Aumentada.
PAIN POINT 5: los usuarios no pueden elegir la tienda más cercana pues no tiene un geolocalizador.
RESOLVIENDO EL PROBLEMA: para solventar esa carencia, activamos un geolocalizador en el DidiBot permitiendo una geolocalización del usuario a través de Google maps. A continuación se despliegan las tiendas más cercanas.
Otros pain points que he abordado:
- Los usuarios tenían problemas para solventar sus dudas y estas no estaban en preguntas frecuentes.
Solución: poner a DidiChat para solventar al momento las dudas de los usuarios, los gestores son miembros del equipo Dideco. También es una manera de potenciar las ventas y mejorar la conversión, de hecho he simulado el diseño de la empresa Intercom. También podría haber sido Walmeric.
2. Los usuarios pedían tener al final del proceso de compra un recordatorio de productos.
Solución: ha sido exponer unos productos recomendados por los propios usuarios pudiendolos añadir a la cesta de compra.
3. Los usuarios tienen problemas para ver la información del producto en la pasarela de compra.
Solución: ha sido poner un link al producto para poder visualizar como un pop-up las 4 interacciones de las características del producto elegido.
CUARTA FASE: ENTREGA FINAL
Go to Interactive Prototype in Axure
Recordar que es un Wireframe y faltaría toda la parte UI o visual, donde habría que hacer un sistema de diseño y una guía de estilo.
Los iconos son los que establece Axure RP por defecto
Las imágenes son de Unsplash
Los superheroes son de Flaticon y Sketchappsources
El logo nuevo o Didi fue creado en Sketch por mi :)
Los wireframes siguen el GRID: Max width=1180px | Colums=10 | Gutter width=20px | Margin width=84px (lo podéis calcular en gridcalculator.dk)
TIPS: para que funcione bien el prototipo, deberéis:
- Clicar: Comenzar la búsqueda
- Clicar en el buscador DidiBot `JUGUETES´
- Luego escribir la edad del niño: `3 años´ y enviar. A posteriori, ya todo fluirá.
Bueno espero que os haya gustado el artículo :). ¡ Próximamente sacaré las partes que me faltan !No os lo perdáis.
Este post es la parte III del proyecto Dideco que se compone de III partes.
También podéis ver la presentación aquí.
Clica aquí para ver la PARTE I: CÓMO CONSTRUIR UNA EXPERIENCIA DE USUARIO+HERRAMIENTAS UX APLICADAS AL NEGOCIO DE JUGUETES
Clica aquí para ver la PARTE II: DISEÑANDO UNA APP DE GESTIÓN DE TAREAS PARA NIÑOS EN COLABORACIÓN CON LOS PADRES-CASO UX MOBILE.
Podéis seguirme en Twitter: @sotomayorstudio o Linkedin si os interesan estos temas.
CHECK MY WEBSITE: sotomayorstudio.com
[ Quisiera agradecer a mi antiguo equipo: Álvaro Muñoz Lomba y Virginia Gimenez Cañadas, con ellos empecé la investigación (estará en la PARTE I) y salió el nombre de Didi. ¡La idea del Chatbot va dedicada a vosotros! Éxito ]
