소프트웨어 업데이트 버전 1.11€¦ · 소프트웨어 업데이트 ui/ux 기능 ⚫ 안드로이드 spinner 아이템 기능 지원 (1.11.0) ⚫ 안드로이드 9.0 적용,
5 Ejercicios de UI/UX para principiantes
-
Upload
veronica-traynor -
Category
Internet
-
view
1.013 -
download
6
Transcript of 5 Ejercicios de UI/UX para principiantes
5 EJERCICIOS DE UI/UX [TÁCTICOS Y PARA PRINCIPIANTES] Verónica Traynor | @verotraynor | www.veronicatraynor.com.ar México, julio 205
Í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
1. DETECTA LOS FALSOS AFFORDANCES
¿QUÉ ES UN AFFORDANCE?
@verotraynor | www.veronicatraynor.com.ar
“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
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
¿Cómo se imaginan un falso affordance en una interfaz?
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
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
JUEGO 1: ENCUENTRA LOS FALSOS AFFORDANCES
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
falso affordance
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
falso affordance
falso affordance
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
Entonces ¿Qué podemos hacer para evitar estos tropiezos en la navegación?
@verotraynor | www.veronicatraynor.com.ar
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
b. Cuando definimos los estilos (de textos, links, botones, etc.), estamos creando un lenguaje humano-computadora.
@verotraynor | www.veronicatraynor.com.ar
c. Un lenguaje necesita consistencia ;)
@verotraynor | www.veronicatraynor.com.ar
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
e. Y que el signo debe ser inmutable, para facilitar la comprensión y el diálogo humano-computadora ;)
@verotraynor | www.veronicatraynor.com.ar
f. Por eso, definir nuestros estilos o usar un framework ya diseñado, es fundamental :)
@verotraynor | www.veronicatraynor.com.ar
bootstrap
2. EN CADA CAMPO MUERE UN DELFÍN
“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 :)
Reduzcamos el esfuerzo de los usuarios ;)
@verotraynor | www.veronicatraynor.com.ar
referente en diseño de interacción
American Airlines App
Entonces, ¿Qué podemos hacer para optimizar nuestros formularios?
@verotraynor | www.veronicatraynor.com.ar
a. Definir una alineación en función de lo que queremos lograr: rapidez o facilidad de scan.
@verotraynor | www.veronicatraynor.com.ar
b. Distinguir y separar el call to action principal del secundario.
@verotraynor | www.veronicatraynor.com.ar
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
d. Disminuir al máximo la cantidad de campos, teniendo como objetivo liberar al usuario de realizar un esfuerzo.
@verotraynor | www.veronicatraynor.com.ar
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
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
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
3. AVERIGUA SI TU CALL TO ACTION ES FÁCIL DE ENCONTRAR
@verotraynor | www.veronicatraynor.com.ar
¿Para qué nos puede servir?
@verotraynor | www.veronicatraynor.com.ar
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
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
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
d. Lo más importante es que ayuda a que el equipo de diseño se enfoque.
@verotraynor | www.veronicatraynor.com.ar
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
4. OBSERVA SI TU INTERFAZ ES FÁCIL DE APRENDER
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
¿Qué necesitamos para realizar una prueba de usabilidad Think Aloud?
@verotraynor | www.veronicatraynor.com.ar
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
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
¿Cuál es la diferencia entre boceto y prototipo?
@verotraynor | www.veronicatraynor.com.ar
boceto = para discusión con el equipo
prototipo = para probar la comprensión con los usuarios
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
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
¿Qué le arreglarían a estos bocetos para convertirlos en prototipos?
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
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
¿Qué tips podemos tener en cuenta para nuestras pruebas de usabilidad Think Aloud?
@verotraynor | www.veronicatraynor.com.ar
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
5. ABRE CANALES PARA ESCUCHAR LOS PAINS DE TUS USUARIOS
LO QUE AL USUARIO LE SUCEDE
LO QUE EL USUARIO INTERPRETA
LO QUE EL USUARIO EXPRESA
ENCUESTAS, ETC ;)
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
@verotraynor | www.veronicatraynor.com.ar
JUEGO 5: INCORPOREMOS EN NUESTRO SITIO UNA ENCUESTA PARA RECIBIR FEEDBACK DE LOS USUARIOS ;)
@verotraynor | www.veronicatraynor.com.ar
todo feedback, es bienvenido :) Verónica Traynor | @verotraynor | www.veronicatraynor.com.ar México, julio 205