Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. User Testing

Métodos de pruebas de usabilidad: Los beneficios de las pruebas cara a cara

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Marilu (you can also view the original English article)

Mientras trabajaba como desarrollador web vi que muchas funcionalidades del proyecto fallaban debido a la falta de pruebas de usabilidad antes del lanzamiento. Las partes interesadas o ''stakeholders'' suelen creer que saben lo que quieren sus usuarios y optan por elaborar una versión final basada en sus propios deseos en el lugar de los datos de los usuarios recopilados. Esto eventualmente lleva a la compañía a perder visitantes del sitio, y por lo tanto, ingresos.

Las pruebas de usabilidad no tienen por qué ser un proyecto grande y a largo plazo; pueden realizarse rápidamente y aún así ofrecer resultados que ahorrarán a los desarrolladores muchas recodificaciones. Veamos unos cuantos pasos sencillos que muestran cómo realizar pruebas de usabilidad rentables, fiables y cara a cara.

HR management - colorful isometric illustration
Ilustración isométrica colorida en Envato Elements

Haz que las pruebas sean parte de tu proceso de diseño desde el principio

En primer lugar, probamos los sitios web de la competencia (o el sitio web existente del cliente si estamos construyendo uno nuevo) para tener una idea de lo que los usuarios quieren de ellos. Después de eso es el momento de empezar a construir nuestro propio wireframe basado en esos resultados.

Como prefiero probar varias ideas lo antes posible en vez de desarrollar una completamente de inmediato, tiendo a usar wireframes de baja fidelidad en los que se pueden hacer clics que además son muy simples. La idea viene de Jake Knapps Design Sprints, que muestra que es más productivo probar los prototipos temprano que cuando el producto ya está construido. En esa etapa, existe un mayor riesgo de no satisfacer las necesidades de los usuarios y tener que reconstruir el producto.

Normalmente empiezo usando la herramienta online Balsamiq para crear rápidos wireframes de baja fidelidad. Allí, podemos dibujar el producto con líneas desiguales para que parezca casi hecho a mano. Esto ayuda a mostrar al cliente y al usuario la estructura, en lugar de los colores y elementos gráficos que no son relevantes en las primeras etapas del proceso. A medida que se realizan las pruebas y llegan los resultados, empiezo a hacer el wireframe cada vez más similar al producto final hasta que todas las preguntas han sido contestadas y no es necesario realizar más pruebas.

High-fidelity wireframe built with WeDot - Wireframe UI Kit from Envato Elements
El wireframe de alta fidelidad construido con WeDot - Wireframe UI Kit de Envato Elements

Cómo realizar una prueba de uso cara a cara

Ya sea que esté probando el sitio web de un competidor, un wireframe de baja fidelidad o un prototipo de alta fidelidad, siempre utilizo los mismos pasos para realizar la prueba. Esto se basa en el hecho de que ya tenemos una base de usuarios que se ajusta al grupo objetivo que necesitamos probar.

Paso 1: Preparación

  1. Encuentra un máximo de cinco personas para hacer la prueba. Queremos hacer las pruebas lo más pequeñas posibles para poder iterar el diseño rápidamente y luego probar de nuevo. Asegúrate de que las personas se ajustan a la demografía y si no, pídeles que se pongan en la situación del usuario que utilizará el producto.
  2. Escribe un máximo de cinco escenarios que el usuario debe probar. Por ejemplo: "Hacer una reserva en un restaurante para dos personas en Londres esta noche a las 6pm" o "Envíar un correo electrónico a través del formulario de contacto con el Horario de apertura como línea del asunto mismo". Más escenarios que eso llevarán demasiado tiempo y pueden hacer que nos centremos en demasiados aspectos del diseño al mismo tiempo. Queremos hacer pequeños cambios de manera efectiva. Escribe las instrucciones para estas tareas.
  3. Configura un programa de grabación que grabará cómo los usuarios mueven el ratón en la pantalla. Quicktime está bien para esto. Si queremos ir un paso más allá, también podemos grabar su voz y encender la cámara web. Esto es beneficioso si olvidamos algo y queremos mirar o escuchar la sesión en una etapa posterior para recordar dónde encontraba dificultades el usuario. Solo asegúrate de que da su consentimiento primero.
  4. Escribe una introducción que explique el test y cómo el participante ayudará. También escribe cualquier pregunta que puedas tener para ellos, como preguntas sobre sus datos demográficos o la experiencia con tu producto. Por ejemplo, "¿Cuántos años tienes?" o "¿Cuántas horas al día usas aplicaciones de redes sociales en tu teléfono?".
  5. Prepara el wireframe en tu portátil, móvil o papel (prototipo) y llévalo contigo a la sesión.
High-fidelity wireframe built with WeDot - Wireframe UI Kit from Envato Elements
El wireframe de alta fidelidad construido con WeDot - Wireframe UI Kit de Envato Elements

Paso 2: Realización de la prueba de usabilidad

¡Todo está preparado y ahora estamos 100% seguros de que nuestra sesión de pruebas irá según lo planeado!

Comencemos invitando al primer participante y hagamos la introducción con ellos. Normalmente empiezo diciendo lo siguiente:

Antes de empezar, pensé en darte algo de información. Actualmente estamos construyendo una solución para *nombre del proyecto aquí*. Hemos diseñado un prototipo sobre el que se basará el producto y ahora necesitamos probarlo para ver que hemos implementado las características correctas. Estaré observando cuando uses el prototipo. Dado que se trata de un prototipo y no de un producto acabado, experimentarás algunos errores. No obstante, quiero que intentes usarlo como si fuera una aplicación/sitio web real.

Es importante que sepas que estamos observando cómo se puede mejorar el flujo de trabajo y no cómo usas este producto. ¡No harás nada mal! Si algo no funciona, es culpa del producto, no tuya. Durante el curso de la prueba, te pediré que intentes pensar en voz alta tanto como sea posible: di lo que no va bien, lo que intentas hacer y lo que piensas. Esto será muy útil.

La prueba tomará *tiempo aquí*. Grabaré esta sesión con un micrófono, una webcam y un programa de grabación Quicktime que nos ayudará mucho a la hora de analizar los datos y nos permitirá tomar menos notas. ¿Estás de acuerdo? ¿Tienes alguna pregunta antes de que empecemos?

Entrega al participante un formulario de consentimiento, si lo tienes, pídele que lo firme. Empieza a grabar. Haz las preguntas demográficas y de experiencia que se prepararon. Comienza a llenar el siguiente formulario de prueba de usuario:

  • Nombre, edad, nivel técnico u otros datos demográficos del participante:
  • Escenario/Objetivo/Tarea:
  • Notas de observación:
  • Puntos problemáticos:
  • Resumen:

Pídele al usuario que realice la primera tarea: obsérvalos y toma notas mientras lo hacen. Como queremos que la prueba sea lo más natural posible, no comentamos cuando están usando el wireframe. Si nos preguntan qué hacer a continuación, hacemos la pregunta "¿Qué hubieras hecho si hubieras usado esta aplicación/sitio web y yo no estuviera aquí?". Hay una gran guía sobre qué decir durante las pruebas de usabilidad por Steve Krug llamada "Cosas que diría un terapeuta".

Una vez completada la primera tarea, podemos hacer al usuario nuestras preguntas y también ver si tiene alguna pregunta sobre la tarea. Cuando estén todas despejadas, les pedimos que completen la siguiente tarea.

Recuérdales que piensen en voz alta. Cuando todas las tareas y preguntas hayan sido completadas:

  • Detén la grabación y guárdala con su nombre como título.
  • Agradece al participante.
  • Dales su "salario".
  • Escribe cualquier nota adicional y completa el formulario de prueba de usuario anterior.
  • Prepara una nueva sesión de grabación.
  • Pídele al nuevo participante que entre.

Paso 3: Análisis de los resultados

Una vez completadas las pruebas, la ruta para el análisis puede ser de dos maneras dependiendo de en qué punto del proceso de diseño nos encontramos. Si es en una etapa posterior y los datos de la prueba son más cuantitativos, recomendaría usar una herramienta gratuita de análisis de datos en línea como Voyant, en la que se puede medir la frecuencia de un problema añadiendo las notas de las pruebas de usuario actuales y anteriores. La herramienta mostrará qué frases y palabras se han usado antes para que podamos ver si hay problemas recurrentes. Pero si está en las primeras etapas, podemos analizar la prueba manualmente:

  1. Toma las notas del test y escribe cinco objetivos de usuario y cinco problemas de usuario. Mira si hay alguna duplicación entre los usuarios. También puede ser útil anotar citas específicas de los participantes que estén relacionadas con los objetivos y problemas. Por ejemplo, un objetivo podría ser "Alex quería hacer una reserva en un restaurante con opciones vegetarianas" y un problema podría ser "No había filtros para los restaurantes vegetarianos".
  2. Después de eso, reunimos al equipo de UX y discutimos lo que funcionó y lo que necesita ser mejorado. Presenta tus resultados y si ellos también hicieron pruebas, pídeles que hagan lo mismo. Aquí podemos aclarar las principales preocupaciones y llegar a posibles soluciones.
  3. Luego construimos un nuevo wireframe basado en la discusión del equipo de UX, lo probamos y analizamos de nuevo. Hacemos esto una y otra vez hasta que sentimos que hemos llegado a una etapa en la que estamos satisfechos con las funciones y el contenido.
  4. Para realizar mejoras menores en el futuro, se puede utilizar HotJar para medir si los usuarios están utilizando la aplicación o el sitio web correctamente a través de mapas de calor, grabaciones de usuarios y encuestas de retroalimentación.
  5. Ahora que el wireframe está completo, se lo mostramos al cliente y lo hacemos coincidir con su visión. Una vez más, habrá más cambios y el diseño del wireframe irá y vendrá unas cuantas veces antes de ser aprobado por el cliente.

Conclusión

Cuando hemos trabajado con un producto durante un tiempo, es difícil predecir cómo se comportará el usuario en el sitio, ya que sabemos dónde va cada botón. Una prueba de usabilidad cara a cara puede mostrarnos todo tipo de escenarios de usuario impredecibles y nos permite preguntarnos "¿Por qué hiciste eso?", en lugar de solo "¿En qué hiciste clic?".

Esto nos da una mayor comprensión sobre el producto, los usuarios, y hace que el proceso de diseño (y codificación) sea mucho más rápido. Los desarrolladores recibirán un diseño a prueba de balas que ha sido probado varias veces, lo que minimiza el riesgo de que tengan que recodificar el producto inmediatamente después de su lanzamiento. En lugar de eso, podemos empezar a monitorear los ingresos. Es una gran manera de descubrir y reparar posibles problemas de usabilidad.

Más recursos de pruebas de usabilidad en Tuts+

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.