Laboratorio de Interfaces

Herramientas para prototipar y prácticas para validar ideas

Mario H. Valencia

Generalidades Prototipos

La agenda de hoy...1. ¿Qué está sucediendo? !2. ¿Qué es un prototipo? !3. Clases de prototipo !4. ¿Cuándo usar cuál? !5. ¿Por qué validar el prototipo? !6. Actividades de validación

Coordinar los diferentes grupos de trabajo

El Problema

Tech Team: !- Developers !- QA Testers !- Backend

- Product !- Manager !- Marketers

- UX Designers !- Researchers !- Visual Designer

La Solución

Un prototipo… !

❖ 1. Expone rápidamente una solución ante los usuarios (o el equipo) !

❖ 2. Evidencia problemas críticos antes de construir !

❖ 3. Genera una solución realista. Ayuda al PM a definir un roadmap preciso !

❖ 4. Permite validar la idea y seguir aprendiendo

Prototipado

¿Qué es un prototipo?

❖ 1. Simulación del producto final en diferentes grados de fidelidad !

❖ 2. Es una herramienta de validación !

❖ 3. Convencer, aterrizar, confirmar ideas estéticas y/o estructurales de una interface!

❖ 4. Inversión mínima basada en lo que quieres aprender !

❖ 5. De la versión ideal a la versión mínima (MVP)

Niveles de Fidelidad

❖ 1. Baja Fidelidad / Sketch en papel !

❖ 2. Mediana Fidelidad / Wireframe !

❖ 3. Alta Fidelidad / Interactive Prototype !

❖ 4. Demo Funcional / HTML - CSS

Lorem Ipsum Dolor

Prototipo de Baja Fidelidad Prototipado en Papel Pros Contra!!

● Rápido !● Sin costo !● Produce acuerdos

Contra!!● No es realista !● No es detallado !● No mides reacciones viscerales

¿Cuándo usarlo? !● Etapas tempranas de conceptualización !● Descartar ideas iniciales rápidamente

Prototipado en Papel

Lorem Ipsum Dolor

Prototipo de media Fidelidad Prototipado Digital Pros Contra!!

● Más realista !● Flexible !● Iteración rápida

Contra!!● Requiere tiempo!● Requiere curva de aprendizaje !● No interacciones

¿Cuándo usarlo? !!● Para probar la mayoría de los elementos de una interface !● Para validar controversias de usabilidad

Mockup

Lorem Ipsum Dolor

Prototipo de Alta Fidelidad Prototipado de Codigo Pros Contra!!● Fundamento técnico del producto !● Diferentes plataformas !● Certero a la realidad

Contra!!● Producción lenta !● Puede inhibir creatividad !● No es flexible

¿Cuándo usarlo? !!● Para obtener una representación realista de lo que se va a

construir !● Para definir hasta el detalle más mínimo

Prototipo de Alta Fidelidad

Herramientas Recomendadas

Validación

❖ Decisión basada en datos vs Puntos de vista basados en suposiciones !

❖ Conocer modelo mental y estilo de vida de usuarios = Solución más realista !

❖ Empatía para resolver problemas vs Concentrarse en feature release !

❖ Pobre planeación = Resultados peligrosos

Sin User Research no hay User Experience

Arreglar, rehacer y desechar es muy costoso… mucho

Tres Métodos de Validación

❖ 1. First Click Test / Qué tan rápido un diseño provee una solución al usuario !

❖ 2. Usability Testing / Cómo el diseño guía al usuario a realizar una tarea !

❖ 3. Kano Analysis / Qué features incluir en el producto

¿Qué es?

First Click Test

Un estudio para medir primeras impresiones. !Te dice si los usuarios fueron capaces de encontrar fácil y rápidamente en tu diseño la opción correcta… o de lo contrario cuáles fueron las opciones en donde hicieron click.

¿Como Hacerlo?

First Click Test1. Muestra prototipos a tus usuarios !2. Pídeles que completen una tarea predefinida !3. Los usuarios indicarán en dónde harían click primero para encontrar la información correcta !4. Te fijas dónde hicieron click primero !5. Mides el tiempo en que tardaron en encontrar la opción correcta

¿Qué Obtienes?

First Click Test

Test Datos para decidir sobre... !1. El contenido y elementos visuales para priorizar para tu audiencia !2. El lenguaje para tus botones, etiquetas, links y contenido !3. Donde colocar elementos como botones, íconos de compra, menús, secciones, etc

¿Cuantos Usuarios Probar?

First Click TestSegún Jeff Sauro de Measuring Usability con 13 usuarios puedes identificar los errores más críticos. !Si automatizas la tarea puedes probar hasta con 200 usuarios para confianza estadística

¿Qué es?

Usability Test

Es un estudio de uso. El objetivo es identificar problemas críticos de usabilidad. Durante la prueba los usuarios tratan de completar tareas mientras observas su comportamiento, escuchas sus impresiones y tomas notas de sus acciones.

¿Como Hacerlo?

Usability Test1. Haz un plan de tareas y recluta usuarios!2. Muestra prototipos a tus usuarios !3. Pídeles que completen una tarea predefinida !4. Observa todo lo que hacen para lograrlo!5. Pide que piensen en voz alta !6. Toma notas y graba la sesión !7. Analiza y reporta resultados

¿Qué Obtienes?

Usability Test

1. Aprender si el diseño guía a los usuarios !2. Identificar tiempos en completar tareas!3. Descubrir niveles de satisfacción !4. Identificar cambios para mejorarlo !5. Descubrir expectativas de usuarios y trucos escondidos

¿Cuantos Usuarios Probar?

Usability TestSegún Norman Nielsen Group necesitas probar con tan solo 5 usuarios. !“Si sigues añadiendo más usuarios, aprenderás cada vez menos y menos porque seguirás viendo los mismos errores una y otra vez.”

¿Qué es?

Kano Analysis

Es un estudio de preferencias. El objetivo es identificar cuáles funcionalidades (features) causarán mayor satisfacción e impacto entre los usuarios. Durante la prueba muestras ejemplos de funcionalidades e indagas en las preferencias de los usuarios sobre si estuviera presente esa feature en el producto o no.

¿Como Hacerlo?

Kano Analysis1. Crea prototipos de las funcionalidades y recluta usuarios !2. Explica cómo funciona cada feature y pon un ejemplo de uso… un escenario !3. Pregunta cómo se sentiría si la feature estuviera presente !4. … Y si no estuviera presente !5. Grafica resultados

¿Qué Obtienes?

Kano Analysis

1. Agrupar cada feature en 5 categorías con comportamientos muy predecible !2. Definir qué features desarrollar primero!3. Ahorrar tiempo y dinero al no construir features que no son necesarias !4. Identificar cuáles features son más atractivas y cuáles pueden ser un diferenciador de producto

¿Resultados?

Kano Analysis1. Attractive / Inesperadas / Diferenciadores !2. One-Dimensional / Principales / Confianza !3. Must-Have / Básicas / Desconfianza si ausentes !4. Unimportant / Sin importancia / Da igual !5. Undesired / Actúan en reversa

¿Cuantos Usuarios Probar?

Kano AnalysisSegún Jan Moorman necesitas probar de 12 a 24 usuarios Toma en cuenta.. !1. La diversidad de los usuarios !2. La granularidad de las diferencias que quieras medir

Conclusiones

❖ 1. Define ideas iniciales con tu equipo !

❖ 2. Prueba con usuarios… junto con tu equipo !

❖ 3. Valida tus supuestos… junto con tu equipo !

❖ 4. Itera tu diseño… junto con tu equipo !

❖ 5. Arreglar, rehacer y desechar es muy costoso… mucho

Herramientas Útiles para Prototipos❖ UXPin para hacer wireframes digitales!

❖ Pop App para crear paginas de “apps” !

❖ InVision To create visual prototypes!

❖ Moqups crea wireframes rápidos !

❖ Balsamiq crea wireframes rápidos !

❖ Unbounce crea landing pages !

❖ Proto.io crea wireframes rápidos!

❖ Comp CC crea wireframes rápidos!

❖ Sketch para prototipos hi-fi!

❖ Fluid UI para prototipos móviles!

❖ Atomic.io crea prototipos visuales !

❖ Macaw para prototipos responsive