5 ejercicios de ui/ux para principiantes
TRANSCRIPT
![Page 1: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/1.jpg)
5 EJERCICIOS DE UI/UX [TÁCTICOS Y PARA PRINCIPIANTES] Verónica Traynor | @verotraynor | www.veronicatraynor.com.ar México, julio 205
![Page 2: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/2.jpg)
ÍNDICE • Detecta los falsos affordances • En cada campo muere un delfín • Averigua si tu call to action es fácil de encontrar • Observa si tu interfaz es fácil de aprender • Abre canales para escuchar los pains de tus usuarios
@verotraynor | www.veronicatraynor.com.ar
![Page 3: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/3.jpg)
1. DETECTA LOS FALSOS AFFORDANCES
![Page 4: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/4.jpg)
¿QUÉ ES UN AFFORDANCE?
@verotraynor | www.veronicatraynor.com.ar
![Page 5: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/5.jpg)
“El diseño es un acto de comunicación entre el diseñador y el usuario, donde toda la comunicación proviene de la apariencia del objeto; el
cual necesita explicarse por sí mismo”. Don Norman
@verotraynor | www.veronicatraynor.com.ar
![Page 6: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/6.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 7: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/7.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 8: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/8.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 9: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/9.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 10: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/10.jpg)
¿Cómo se imaginan un falso affordance en una interfaz?
@verotraynor | www.veronicatraynor.com.ar
![Page 11: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/11.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 12: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/12.jpg)
Un falso affordance es un elemento que parece un botón pero no lo es y genera frustración en la interacción y en la navegación ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 13: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/13.jpg)
JUEGO 1: ENCUENTRA LOS FALSOS AFFORDANCES
@verotraynor | www.veronicatraynor.com.ar
![Page 14: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/14.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 15: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/15.jpg)
falso affordance
@verotraynor | www.veronicatraynor.com.ar
![Page 16: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/16.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 17: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/17.jpg)
falso affordance
falso affordance
@verotraynor | www.veronicatraynor.com.ar
![Page 18: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/18.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 19: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/19.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 20: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/20.jpg)
Entonces ¿Qué podemos hacer para evitar estos tropiezos en la navegación?
@verotraynor | www.veronicatraynor.com.ar
![Page 21: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/21.jpg)
a. Necesitamos detectar los elementos que pueden confundir a los usuarios por parecer interactivos y eliminarlos (o convertirlos en link!).
@verotraynor | www.veronicatraynor.com.ar
![Page 22: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/22.jpg)
b. Cuando definimos los estilos (de textos, links, botones, etc.), estamos creando un lenguaje humano-computadora.
@verotraynor | www.veronicatraynor.com.ar
![Page 23: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/23.jpg)
c. Un lenguaje necesita consistencia ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 24: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/24.jpg)
d. Quiere decir, que un link no puede parecer un texto y un texto no puede parecer a un link.
@verotraynor | www.veronicatraynor.com.ar
![Page 25: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/25.jpg)
e. Y que el signo debe ser inmutable, para facilitar la comprensión y el diálogo humano-computadora ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 26: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/26.jpg)
f. Por eso, definir nuestros estilos o usar un framework ya diseñado, es fundamental :)
@verotraynor | www.veronicatraynor.com.ar
![Page 27: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/27.jpg)
bootstrap
![Page 28: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/28.jpg)
2. EN CADA CAMPO MUERE UN DELFÍN
![Page 29: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/29.jpg)
“Alguien me dijo que cada ecuación que incluyera en el libro reduciría las ventas a la mitad. Por consiguiente, decidí no poner ninguna en absoluto. Al final, sin embargo, sí que incluí una ecuación, la famosa ecuación de Einstein, E=mc 2 . Espero que esto no asuste a
la mitad de mis potenciales lectores” Stephen Hawking
es sólo el actor :)
![Page 30: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/30.jpg)
Reduzcamos el esfuerzo de los usuarios ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 31: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/31.jpg)
referente en diseño de interacción
![Page 32: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/32.jpg)
![Page 33: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/33.jpg)
![Page 34: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/34.jpg)
![Page 35: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/35.jpg)
![Page 36: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/36.jpg)
![Page 37: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/37.jpg)
American Airlines App
![Page 38: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/38.jpg)
Entonces, ¿Qué podemos hacer para optimizar nuestros formularios?
@verotraynor | www.veronicatraynor.com.ar
![Page 39: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/39.jpg)
a. Definir una alineación en función de lo que queremos lograr: rapidez o facilidad de scan.
@verotraynor | www.veronicatraynor.com.ar
![Page 40: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/40.jpg)
b. Distinguir y separar el call to action principal del secundario.
@verotraynor | www.veronicatraynor.com.ar
![Page 41: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/41.jpg)
c. Hacer mensajes de error que señalen el campo en cuestión; incluyan una forma (no sólo el color) y muestren de forma humana la solución.
@verotraynor | www.veronicatraynor.com.ar
![Page 42: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/42.jpg)
d. Disminuir al máximo la cantidad de campos, teniendo como objetivo liberar al usuario de realizar un esfuerzo.
@verotraynor | www.veronicatraynor.com.ar
![Page 43: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/43.jpg)
e. Evitar los formularios en dos columnas, para evitar que los usuarios al saltar de columna en columna, se olviden de completar un campo.
@verotraynor | www.veronicatraynor.com.ar
![Page 44: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/44.jpg)
Para debatir: ¿Cuál creen que sería la mejor forma de plantear un registro para un supermercado? ¿Cómo lo vincularían con el checkout?
@verotraynor | www.veronicatraynor.com.ar
![Page 45: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/45.jpg)
JUEGO 2: OPTIMICEMOS USANDO LA HERRAMIENTA MOQUPS.COM a. EL REGISTRO DEL SUPERMERCADO
SUPERAMA b. EL CHECKOUT DE SUPERAMA PARA UNA
PERSONA NO REGISTRADA
@verotraynor | www.veronicatraynor.com.ar
![Page 46: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/46.jpg)
![Page 47: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/47.jpg)
3. AVERIGUA SI TU CALL TO ACTION ES FÁCIL DE ENCONTRAR
![Page 48: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/48.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 49: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/49.jpg)
¿Para qué nos puede servir?
@verotraynor | www.veronicatraynor.com.ar
![Page 50: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/50.jpg)
a. Subimos nuestros mockups y armamos una encuesta, donde las personas deberán contestar cada pregunta haciendo click en la imagen.
@verotraynor | www.veronicatraynor.com.ar
![Page 51: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/51.jpg)
b. La herramienta nos ofrecerá los mapas de calor con cada respuesta, donde veremos los aciertos y desaciertos + el tiempo promedio que tardaron en contestar.
@verotraynor | www.veronicatraynor.com.ar
![Page 52: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/52.jpg)
c. Podemos probar la eficiencia de distintas versiones, haciendo la misma encuesta para los distintos mockups y enviándolas a grupos de personas diferentes; para comparar los resultados.
@verotraynor | www.veronicatraynor.com.ar
![Page 53: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/53.jpg)
d. Lo más importante es que ayuda a que el equipo de diseño se enfoque.
@verotraynor | www.veronicatraynor.com.ar
![Page 54: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/54.jpg)
JUEGO 3: CONFIGUREMOS UNA ENCUESTA INTERACTIVA CON 3 PREGUNTAS, COMPARTÁMOSLA CON NUESTROS AMIGOS AHORA MISMO Y OBTENGAMOS LOS MAPAS DE CALOR PARA MOSTRARLOS AL CURSO (20 MINUTOS).
@verotraynor | www.veronicatraynor.com.ar
![Page 55: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/55.jpg)
4. OBSERVA SI TU INTERFAZ ES FÁCIL DE APRENDER
![Page 56: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/56.jpg)
LO QUE AL USUARIO LE SUCEDE
LO QUE EL USUARIO INTERPRETA
LO QUE EL USUARIO EXPRESA
Técnica de observación THINK ALOUD ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 57: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/57.jpg)
¿Qué necesitamos para realizar una prueba de usabilidad Think Aloud?
@verotraynor | www.veronicatraynor.com.ar
![Page 58: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/58.jpg)
Preguntas + Prototipos + Seres humanos
no programadores, ni diseñadores
no bocetos, sino prototipos verosímiles
que no sesguen las respuestas
@verotraynor | www.veronicatraynor.com.ar
![Page 59: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/59.jpg)
Para debatir:¿En qué etapa del diseño nos conviene empezar a hacer pruebas de usabilidad? ¿Se podrán hacer antes de programar?
@verotraynor | www.veronicatraynor.com.ar
![Page 60: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/60.jpg)
![Page 61: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/61.jpg)
![Page 62: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/62.jpg)
¿Cuál es la diferencia entre boceto y prototipo?
@verotraynor | www.veronicatraynor.com.ar
![Page 63: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/63.jpg)
boceto = para discusión con el equipo
prototipo = para probar la comprensión con los usuarios
@verotraynor | www.veronicatraynor.com.ar
![Page 64: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/64.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 65: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/65.jpg)
BOCETO PROTOTIPO
• Sirve para discutir con nuestro equipo
• Sirve para que un usuario crea que es real e interactúe (así lo observamos y aprendemos)
• Podemos utilizar elementos de diseño como “Lorem Ipsum” / “Footer”.
• Necesitamos poner textos, precios, etc. que sean “semi-reales” así el usuario entra en la escena.
@verotraynor | www.veronicatraynor.com.ar
![Page 66: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/66.jpg)
¿Qué le arreglarían a estos bocetos para convertirlos en prototipos?
@verotraynor | www.veronicatraynor.com.ar
![Page 67: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/67.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 68: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/68.jpg)
si usamos cajas con cruces y líneas, no todos los usuarios van a entender que son fotos con copetes.
@verotraynor | www.veronicatraynor.com.ar
si ponemos palabras técnicas, podemos confundir al usuario y sacarlo de escena
![Page 69: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/69.jpg)
¿Qué tips podemos tener en cuenta para nuestras pruebas de usabilidad Think Aloud?
@verotraynor | www.veronicatraynor.com.ar
![Page 70: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/70.jpg)
Las sesiones son individuales • Como vamos a observar la curva de aprendizaje en profundidad, las
sesiones deben ser individuales, con personas que respondan al perfil de usuarios de nuestro sitio.
• Por lo general, no duran más de 45 minutos o menos si el invitado se cansa o se distrae.
@verotraynor | www.veronicatraynor.com.ar
![Page 71: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/71.jpg)
Al definir el guión, crear pequeños cuentos creíbles • Nos conviene presentar los objetivos como pequeños cuentos que les
resulten cotidianos, así se los puedan imaginar.
• Esto no tiene nada que ver con el mundo de QA donde se le pide a una persona que haga un testing para ver si algo funciona o no. Tiene que ver con analizar cómo piensa una persona que está interactuando e intentando resolver algo.
@verotraynor | www.veronicatraynor.com.ar
![Page 72: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/72.jpg)
Preparemos los prototipos para que cada usuario pueda jugar • Podemos hacer las pruebas en
– Recortando papelitos (paper prototyping) – Ligando mockups con herramientas como Invision – Maquetas en HTML – Sitios programados
@verotraynor | www.veronicatraynor.com.ar
![Page 73: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/73.jpg)
Si haremos paper prototyping, tengamos todos los papelitos recortados • Si vamos a probar la búsqueda avanzada que se encuentra en un
desplegable; tengamos listo y recortado el papelito del desplegable.
• Si va a haber pull-downs, tengamos el papelito recortado del desplegable.
• Lo mismo con los calendarios.
@verotraynor | veronicatraynor.com.ar @verotraynor | www.veronicatraynor.com.ar
![Page 74: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/74.jpg)
Preparemos los prototipos en su estado por default • Todos los pulldowns, calendarios, etc. deben estar inicialmente cerrados
(si el usuario quiere abrirlos, deberá hacerles click y nosotros pondremos el papelito correspondiente del desplegable).
• Todos los campos deben estar con el placeholder correspondiente; no con un texto de prueba escrito por el equipo. Cuidado con esto ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 75: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/75.jpg)
Al plantear los objetivos, no usar las palabras que usa la interfaz • Cuando le pedimos a la persona que haga algo, no debemos usar los
nombres de los botones o las categorías que deben encontrar.
• Si el botón dice: “Comparar”. NO decir en la prueba: “¿Dónde harías click para COMPARAR los planes?” sino, por ejemplo decir: “Como harías para ver los distintos precios de los planes y elegir el más económico”.
@verotraynor | www.veronicatraynor.com.ar
![Page 76: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/76.jpg)
Utilizar la palabra “imaginar”
• Podríamos plantear los objetivos diciendo, por ejemplo: “Ahora
IMAGINEMOS que queremos buscar un ticket a Puerto Escondido ¿Cómo lo haríamos?”. Para que la persona se meta en la escena.
@verotraynor | www.veronicatraynor.com.ar
![Page 77: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/77.jpg)
Todo el tiempo, necesitamos lograr que los usuarios no se sientan evaluados • Necesitamos cuidar que las personas no sientan que están en un examen.
• Por nada del mundo decir la palabra “prueba”, ni “prueba de usabilidad”. Creo que conviene siempre hablar de “juego” o de “encuesta de opinión”. “Este es un juego que estamos haciendo para que el sitio sea muy fácil de usar y nos encantaría poder verte jugar y conocer tu opinión”.
@verotraynor | www.veronicatraynor.com.ar
![Page 78: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/78.jpg)
No intimidarlos con la cantidad de observadores • Conviene que a lo sumo sean dos personas - donde una modere y la otra
observe en silencio - para no intimidar al usuario invitado ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 79: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/79.jpg)
No intimidarlos preguntándoles los apellidos • Si hacemos reclutamiento público – supermercados, estaciones – para no
intimidad a la gente, la frase podría ser:
“No te vamos a preguntar nombre y apellido, porque no va a quedar registrado en ningún lado. La encuesta es anónima”.
@verotraynor | www.veronicatraynor.com.ar
![Page 80: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/80.jpg)
No ayudarlos a resolver los objetivos ;) • El objetivo es observar la curva de aprendizaje.
– Ver cómo lo aprenden – Ver si hay desviaciones y cuáles son – Ver si no entendió, por qué no llegó a entenderlo
• Por eso antes de empezar, conviene decirle:
“Todas las dudas que te surjan, dilas en voz alta; yo quizás no te pueda responder pero me sirve entenderlas. Una vez que terminemos el juego te responderé todas las
dudas que te hayan surgido”.
@verotraynor | www.veronicatraynor.com.ar
![Page 81: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/81.jpg)
No dirigirlos con la mirada ;)
• Otro riesgo es mirar el botón donde tienen que elegir y que los usuarios
acierten por seguir nuestra mirada.
• Por eso siempre necesitamos más bien mirarle la cara o la mano, pero nunca dirigir nuestros ojos al lugar correcto que deben encontrar por sí mismos.
@verotraynor | www.veronicatraynor.com.ar
![Page 82: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/82.jpg)
Ser pacientes
• Si el usuario habla lento, si no entiende algo o si se toma su tiempo para
analizar; bajemos nuestra ansiedad y vayamos al tiempo de ellos.
• Intentemos siempre transmitirles tranquilidad ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 83: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/83.jpg)
Detectar si el usuario se cansa o pierde de la atención • Si observamos que el usuario se cansó o perdió la atención, terminar la
sesión.
@verotraynor | www.veronicatraynor.com.ar
![Page 84: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/84.jpg)
Anotar los hallazgos para analizarlos junto al equipo de diseño ;) • Se tratará de insights cualitativos (hallazgos que nos cuenten las razones
que creemos que causaron las confusiones de los usuarios al navegar y tratar de lograr sus objetivos en el sitio) extraídos de nuestra observación subjetiva ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 85: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/85.jpg)
JUEGO 4: REALICEMOS UNA PRUEBA DE USABILIDAD THINK ALOUD, ANALICEMOS LOS HALLAZGOS CON EL EQUIPO Y PASEMOS AL FRENTE A CONTAR LO QUE APRENDIMOS HACIÉNDOLO (30 MINUTOS).
@verotraynor | www.veronicatraynor.com.ar
![Page 86: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/86.jpg)
5. ABRE CANALES PARA ESCUCHAR LOS PAINS DE TUS USUARIOS
![Page 87: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/87.jpg)
LO QUE AL USUARIO LE SUCEDE
LO QUE EL USUARIO INTERPRETA
LO QUE EL USUARIO EXPRESA
ENCUESTAS, ETC ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 88: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/88.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 89: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/89.jpg)
@verotraynor | www.veronicatraynor.com.ar
![Page 90: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/90.jpg)
JUEGO 5: INCORPOREMOS EN NUESTRO SITIO UNA ENCUESTA PARA RECIBIR FEEDBACK DE LOS USUARIOS ;)
@verotraynor | www.veronicatraynor.com.ar
![Page 91: 5 Ejercicios de UI/UX para principiantes](https://reader033.vdocuments.net/reader033/viewer/2022042717/55d06200bb61eb54398b483b/html5/thumbnails/91.jpg)
todo feedback, es bienvenido :) Verónica Traynor | @verotraynor | www.veronicatraynor.com.ar México, julio 205