UX – Product design

Grabación de sesiones de usuarios online con Hotjar

Como sabéis es vital saber cómo se comportan los usuarios en tu página web. Por ello una de las herramientas más poderosas de la experiencia de usuario es la grabación de sesiones online. En nuestro caso empleamos la herramienta Hotjar.

Grabaciones de sesiones de usuarios

Al principio de instalarla comenzamos grabando tanto lo que realizaban en la web al navegar como cuando comenzaban el proceso de reserva.

También aprovechando sacamos mapas de calor (heat maps) de ciertas páginas para ver dónde había el mayor número de clics, o por el contrario donde queríamos que hiciesen clic y no lo hacían, o hasta que punto hacían scroll (scroll map).

heatmap-home

Esto te permite mejorar el diseño y la posición de ciertos elementos, en función de las necesidades de negocio y el comportamiento observado.

Las grabaciones sobre todo las empleamos para analizar cuándo sacamos nuevas funcionalidades o cambiamos el diseño si los usuarios lo entienden o tiene problemas. Cómo permite filtrar por bastantes parámetros es perfecto para focalizarse en casos concretos de investigación.

Seguir leyendo «Grabación de sesiones de usuarios online con Hotjar»

Nuevo diseño de formularios

Este invierno hemos cambiado el diseño de los formularios. Los objetivos a conseguir eran:

  • Que todos los sistemas usaran los mismos formularios del sistema de diseño
  • Obtener un diseño con un aspecto más moderno
  • Intentar que el formulario en su totalidad ocupara lo menos posible en altura
  • Mejorar la usabilidad en la visualización de los datos, el manejo de los errores…

Todos ellos eran importantes pero el primero sobre todo era básico, para evitar esfuerzos en el futuro.

Cualquier cambio que se hiciera en el sistema de diseño debía propagarse automáticamente al resto.

En un principio estudiamos la viabilidad de aplicar Material design pero decidimos crear unos patrones de diseño e interacción propios.

Para ello lo primero que se hizo fue recopilar los diferentes casos de formularios que existían en todos los sistemas para estudiar las funcionalidades y definir una serie de reglas (como buena fan que soy del Gov.uk):

  • Sólo se pedirá información cuando sea necesario.
  • Mejor formularios en una sola columna a no ser que no se quiera que haya scroll vertical. En el caso de que por cuestiones de espacio no se quiera alargar la página, el máximo serán 2 columnas principales.
  • Las labels siempre deben estar visibles.
  • Las labels deben estar asociadas al campo. Si se ponen encima del campo que haya separación visual del bloque con los otros campos.
  • Los textos de las label deben ser cortos y claros.
  • En móviles los campos irán normalmente al 100%.
  • Se leen mejor las minúsculas que las mayúsculas.
  • Placeholder o hint solo cuando aporte valor.
  • Agrupar los campos relacionados de forma visual.
  • Indicar el estado del campo en todo momento (focus, inactivo, error…)
  • En el caso de que haya errores debe quedar claro a que campo se refiere.

Seguir leyendo «Nuevo diseño de formularios»

Último día en Torresburriel Estudio

Hoy 31 de mayo es mi último día Torresburriel Estudio.

Han sido 6 meses muy intensos en los cuales por primera vez he estado trabajando en una empresa cuyo actividad principal se centra en la Experiencia de usuario.

Torresburriel Estudio

Web de www.torresburriel.com

Los que me conocen me habrán oído decir muchas veces que «sin usuarios no hay UX«. Y es que he oído a mucha gente llamarse UX y no haber hablado ni una sola vez con las personas a las que va dirigido el producto o servicio que está diseñando.

Y para mi, eso ha sido algo por lo que he luchado en cada empresa en la que he estado trabajando como UX.

Por ello, ha sido genial ver como en el Estudio se integraba desde el inicio de cualquier proyecto la interacción con los usuarios, haciéndoles entrevistas, user tasks journeys, encuestas, formularios y tests de todo tipo, tanto presenciales como remoto.

Debo agradecer así mismo que desde muy pronto, Daniel Torres Burriel, CEO y fundador del Estudio, me dio la responsabilidad de ser UX Manager coordinando los proyectos y las tareas de los integrantes del estudio. Un puesto que unificaba varias de las cosas que llevo realizando desde hace años: trato con el cliente, comunicación entre los diferentes perfiles y empresas que pueden intervenir en un proyecto, gestión de las tareas y los tiempos de entrega, resolución técnica de los proyectos…

6 meses de trabajo en proyectos nacionales e internacionales, donde he podido conocer a las geniales personas que forman parte de Torresburriel Estudio.

Desde hace 3 años vivo en Valencia, por lo que la idea inicial era estar en la oficina de Zaragoza en contadas ocasiones. Pero estos meses he visto que para realizar correctamente las tareas que requería mi puesto debía estar más tiempo en la oficina, lo cual sumado a los viajes que surgían por los proyectos (kickoffs, presentaciones, tests…)… hacía que estuviera poco en casa.

Seguir leyendo «Último día en Torresburriel Estudio»

Test con usuarios con Lookback

La semana pasada estuve realizando 10 tests con usuarios para un cliente del sector ocio probando un software nuevo Lookback.  Una agencia de experiencia de usuario francesa coordinaba el trabajo global para realizar en paralelo los tests en 4 países (Gran Bretaña, Alemania, Francia y España).

En este caso, tanto el screener de captación como el «Discussion Guide» (la guía para el test) como la llaman ellos, nos lo mandaba el cliente, teniendo nosotros que realizar la captación de los usuarios (para lo cual usamos una agencia especializada).

Los tests debía ser grabados PiP (picture in picture) es decir, que se viera la imagen de la pantalla y la cara del usuario a la vez (como cuando compartes pantalla en una call y se ven las caritas en pequeño de las personas que escuchan). Normalmente el estudio emplea Morae un software especializado en test con usuarios que sólo funciona en SO Windows.

Pero el cliente solicitaba usar Mac y además parte de los tests debía realizarse con un prototipo en Principle, un programa especializado en realizar animaciones en prototipos que sólo está disponible para Apple.

Lookback fue la solución que encontramos, y la verdad es que es alucinante, facilitando en gran medida el trabajo tanto a la hora de hacer los tests como a la hora de hacer el report (si, es donde aportas valor al cliente por lo cual cualquier cosa que quite tiempo en tareas banales se agradece).

Lookback panel

Panel de Lookback

Varios tipos de test

Lookback permite la realización de varios tipos de test lo que viene genial para las necesidades de cada proyecto. En el estudio realizamos test en remoto con usuarios de todo el mundo pero muchas veces también hacemos presenciales, en nuestro laboratorio de Zaragoza o en otros lugares de España.

  1. “In-person”: es presencial con móvil, desktop o tablet.
  2. “Live”: en remoto dirigido con un investigador que guíe la prueba.
  3. “Self-test”: en remoto sin dirigir.

En “Live” permite configurar una landing page especial para cada proyecto, pudiendo añadir instrucciones o mensajes antes y después de que la persona realice el test. Seguir leyendo «Test con usuarios con Lookback»

UX Manager

Desde el pasado 11 de diciembre formo parte como UX Manager de Torresburriel Estudio, una empresa de Diseño centrado en el usuario creada por Daniel Torres Burriel en Zaragoza.

TBE

Imagen del Estudio

Principalmente mi trabajo se centra en la gestión del equipo de UX, 6 personas que trabajamos diseñando productos digitales centrados en el usuario y las necesidades de negocio, desde conceptualización hasta entrega de mockups de alta fidelidad para clientes nacionales e internacionales.

Entrevistas con usuarios

Sesión de test con usuarios en el Estudio

Con laboratorio de usabilidad propio, somos expertos en realizar research con todo tipo de test con usuarios: Think aloud, card sorting, tree test, user journeys… , benchmark, análisis heurísticos…

Seguir leyendo «UX Manager»

Design Thinking

Soy muy partidaria de que cuando diferentes personas participan en la creación de un producto o se centran en la solución de un problema es cuando aparecen las mejores ideas. Ya que es imposible que una sóla persona sepa toda la información hay que aprovechar el conocimiento de todos para crear algo diferente.

Para obtener un resultado creativo y novedoso, tiene que existir cierta cantidad de caos, pero es necesario empezar por un orden.

Pero en el día a día nos olvidamos de esto, y en vez de juntar los cerebros trabajamos de forma individual, desaprovechando esos increibles recursos que son las personas que tenemos a nuestro alrededor.

Design Thinking es un método para la resolución práctica y creativa de problemas.

Ayuda a facilitar el proceso de innovación permitiendo trabajar en grupo de forma dinámica, comunicativa y eficiente hablando el mismo idioma y sin tener en cuenta egos, ni posiciones jerárquicas e involucrando a todo el mundo de la misma forma.

Trabajando de forma dinámica y positiva

Gracias al poder de la escritura y el dibujo todo el mundo tiene oportunidad de aportar sus conocimientos de la misma forma. Logra evitar que siempre hablen los mismos, poniendo al mismo nivel todas las ideas e integrando el conocimiento de todos en el trabajo común.

Cuando alguien habla, solo esa persona tiene el poder en ese momento.

Si en vez de hablar, se escriben las ideas en dibujos o etiquetas, todo el mundo trabaja a la vez, construyendo algo de forma conjunta. Además se evita el bias del poder de la oratoria e influenciar en otras personas aunque sea una mala idea.

Al escribir la idea deja de ser de la persona pasando al grupo.

El hecho de dibujar o escribir dinamiza la actividad, ya que es más entretenido que estar escuchando a una persona. Y es que la capacidad de atención del ser humano es limitada, siendo cada vez menor.

Design Thinking

Workshop de Design Thinking usando Manual Thinking

Además al ordenar las etiquetas o post-its nos movemos, cambiando el equipo de forma constante de posición y postura, tanto de forma mental como física.

Seguir leyendo «Design Thinking»

Checklist de arranque de proyecto UX

Muchas empresas antes de empezar el proyecto, mandan al cliente una checklist de preguntas para obtener la máxima información de contexto, y obtener así una primera impresión del proyecto, su naturaleza, su competencia, su historia, responsables, objetivos…

Toma de requerimientos proyecto UX

Imagen extraída del checklist de Olga Revilla

A continuación os dejo un ejemplo de este tipo de preguntas realizado por Olga Revilla en 2009, pero  cuyo contenido sigue siendo actual: Requerimientos iniciales de un proyecto. Son 69 preguntas repartidas en varias categorías:

  • Datos básicos
  • La empresa y su entorno
  • Los usuarios y clientes
  • Misión y objetivos del sitio
  • Tareas
  • Expectativas, requisitos y preferencias
  • Contenidos
  • Requisitos de accesibilidad
  • Recursos humanos disponibles
  • Recursos técnicos disponibles

Estas preguntas son perfectas para una primera toma de contacto y más importante, alinear expectativas con el cliente de lo que espera del proyecto.

Seguir leyendo «Checklist de arranque de proyecto UX»

Cómo debe ser una buena arquitectura de la información

La Arquitectura de Información (en inglés Information Architecture, también llamada por el acrónimo IA) tiene por objetivo clasificar y etiquetar información para facilitar su asimilación, el acceso a los distintos bloques de contenido y asegurar la consistencia y escalabilidad futura de la estructura de contenidos.

Buscando un símil, es como el plano de un edificio sobre la que se construyen y organizan las puertas de acceso, los pasillos para ir entre salas, las habitaciones… Traducido a nuestro elemento se refiere a los menús de navegación de las aplicaciones, los bloques de contenidos…

Estructura informacion

Morville y Rosenfeld, definen en 2006 que una buena arquitectura de información se sustenta en tres pilares: el contexto organizacional en el que se desarrolla, el contenido que alberga y los usuarios que la visitan y consultan.

No es lo mismo definir un etiquetado para usuarios con conocimientos técnicos avanzados sobre un tema, que para personas que no los posean.

Por eso es muy importante saber a que tipo de usuarios nos dirigimos cuando debemos organizar la información de un sistema.

Características de la arquitectura de la información

Una buena arquitectura de información es:

  • Intuitiva, aprendida a manejar en un corto periodo de tiempo.
  • Flexible apoyando la realización de tareas para los diferentes perfiles de usuario y diversas variables en el contexto de uso actual.
  • Consistente, permitiendo predecir el comportamiento del sistema durante la interacción.
  • Escalable, orientando el crecimiento de los contenidos según un modelo establecido, en lugar de hacerlo por “apilamiento” de ítems en los menús.

Estructura de información

La estructura de la información se basa en el análisis de las necesidades funcionales que dan como resultado los diferentes bloques de contenidos. La estructura de la información se encarga por tanto de analizar, clasificar y etiquetar la información.

La estructura de la información está íntimamente relacionada con el modelo de acceso que contempla la navegación, la orientación y las herramientas de búsqueda. Por ello tiene que ver con la clasificación y tipos de contenidos, la agrupación de los mismos en extensión y profundidad y su etiquetado.

Seguir leyendo «Cómo debe ser una buena arquitectura de la información»

Consultoría UX para simplificar un proceso complejo para el usuario

Seguimos con las consultorías a startup, en este caso el modelo de negocio se basa en un market place de venta de un producto técnico de segunda mano.

El proceso de venta es así:

  1. El vendedor sube el producto indicando sus características, fotos y estado técnico de cada pieza, definiendo el precio que cree que es adecuado para su producto.
  2. Una vez que un comprador decide que quiere un producto, la empresa se encarga de ir a buscarlo gratuitamente a donde lo tienen el vendedor y llevarselo a un técnico de confianza para que lo revise. Aquí pueden darse 2 casos:
    1. Si el estado del produto es correcto, se le manda al comprador, que ingresa el dinero y el vendedor recibe su parte.
    2. Si el técnico ve fallos no descritos o más graves de los comentados por el vendedor, se cambia la pieza, bajando el precio definido por el vendedor para pagar ese gasto. En el caso de que el vendedor no lo acepte debe pagar para que le devuelvan el producto.

El punto crítico era el formulario de subida de un producto a la venta.

Es un proceso complejo, ya que hay que subir fotos, conocer cierta información técnica y definir muy claramente el estado técnico de ciertas piezas, siendo muy importante que el vendedor sea sincero en este punto, ya que un técnico va a evaluar después si es verdad esa información.

Además aunque la persona quiera ser sincera, es complejo determinar a veces el estado de una pieza, ya que lo que para una persona es aceptable para otra no lo es.

Además hay que informar al usuario claramente en el proceso de lo que puede ocurrir si el técnico decide que hay que cambiar alguna pieza:

  • que el precio definido por el vendedor se va a ver reducido por ese gasto o,
  • que sino acepta el cambio o el producto no tiene arreglo debe pagar para que le devuelvan su producto (ya que el coste de transporte de la devolución no está incluído).

El miedo que tenían era si el usuario leía esto antes de iniciar el proceso, a lo mejor ya no subía el producto. Pero después de comprobar con varios casos reales, que la experiencia que generaba al vendedor ese desconocimiento era mucho peor, querían probar a comunicarlo de forma más directa.

Después de escuchar y comentar varios puntos del problema con ellos en una sesión de unos 45 minutos, pasé a proponerles varias cosas.

La solución que se propuso iba por dos caminos:

  1. Informar que existía una revisión del producto (en la landing y en el proceso).
  2. Informar de las posibilidades que existen en el caso de que las características del producto no cumpliera con lo afirmado por el vendedor.

Revisión del producto como estándar de calidad

En el diseño actual en la landing dirigida al vendedor ya se comentaba que en un momento dado un técnico iba a revisar el producto, pero estaba en la parte inferior de la página (haciendo bastate scroll) y entre otra información que reducía la importancia visual de esa información.

Por ello se recomendó que en el nuevo diseño estuviera resaltada en la parte superior, junto con las otras ventajas que existen de usar este marketplace.

Esta revisión por parte de una persona imparcial permite asegurar un producto de calidad, y debe ser entendida y trasmitida bajo ese concepto.

Es asi mismo muy importante trasmitir el concepto de que la revisión va a ser justa para ambas partes, y no es una manera de sacar más beneficio por parte de la empresa.

Tambien a lo largo del nuevo proceso de subida (que estaba mejorado para que la definición del estado de las piezas fuera más sencilla y acertada) se aconsejaron una serie de cambios para que el mensaje apareciera de forma amigable y no amenazante (otro de los miedos que tenía la empresa).

Psicológicamente está comprobado que tenemos más tendencia a comportarnos de forma correcta si nos sentimos observados.

El conocimiento a lo largo de diferentes puntos de que un técnico va a revisar el producto para asegurar la calidad, implicará que el vendedor sea más consciente de la información que sube e intente que sea lo más verídica posible.

Seguir leyendo «Consultoría UX para simplificar un proceso complejo para el usuario»

Realización de una prueba de usabilidad con test de usuarios

Esta semana he estado colaborando con una empesa realizando un análisis heurístico y varios test de usuarios para evaluar la usabilidad de 2 webs que querían analizar.

Test de usuarios Valencia

Momento del montaje de la sala para la realización del test

El propósito de las pruebas de usabilidad realizadas era recopilar información sobre cómo los usuarios usan el sitio, ver si existen problemas al navegar, al interactuar con los elementos y al leer la información, y comprobar si existen mejoras que permitan aumentar la conversión del objetivo principal de la web: la reserva una habitación.

Para ello se han definido varios elementos que eran necesarios:

  • La metodología de prueba
  • Los tipos de usuarios para la prueba
  • La declaración del problema y las tareas/escenarios propuestos
  • Entregables con las conclusiones obtenidas

Durante la prueba se han realizado 3 test:

  1. Test para recolectar los participantes: test de filtrado mandado a los partipantes interesados via formulario online para que lo rellenasen y detectar en base a sus respuestas cuales entraban dentro de la tipología definida.
  2. Test con las tareas a realizar en la prueba: Definición de las tareas a realizar en la prueba (4 en este caso)
  3. Test realizado después de cada prueba para su evaluación: Después de cada tarea y al finalizar la prueba mediante un ipad que disponíamos al lado del ordenador,  el usuario debía valorár del 1 al 10, 3 preguntas por tarea para analizar su satisfacción de lo realizado y el sentimiento generado.

Tipología de usuario para la prueba

Después de analizar el perfil del usuario en base a entrevistas con el cliente, al producto ofrecido, y la posible competencia, se definió un usuario tipo a buscar para la prueba con varias preguntas de control.

El participante debía cumplir los siguientes requisitos:

  • Que viajasen mínimo 1-3 veces al año a hoteles (se les preguntaba además número de noches dormidas en hotel el pasado año).
  • Que viajasen por placer y acompañados de la familia o pareja (se les preguntaba además año de nacimiento).
  • Que utilizasen internet más de 2 horas al día (se les preguntaba para que lo usaban).
  • Que fueran ellos los que realicen las reservas (se les preguntaba donde reservaban habitualmente).

Además, lógicamente se agradecía su tiempo con un cheque regalo de 30€.

Escenarios propuestos para el test de usabilidad

EL objetivo de la prueba es proporcionar datos cualitativos sobre la experiencia del usuario en la web.

Seguir leyendo «Realización de una prueba de usabilidad con test de usuarios»

Scroll hacia arriba