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?

“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

¿Cómo se imaginan un falso affordance en una interfaz?

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 ;)

JUEGO 1: ENCUENTRA LOS FALSOS AFFORDANCES

falso affordance

Entonces ¿Qué podemos hacer para evitar estos tropiezos en la navegación?

a. Necesitamos detectar los elementos que pueden confundir a los usuarios por parecer interactivos y eliminarlos (o convertirlos en link!).

b. Cuando definimos los estilos (de textos, links, botones, etc.), estamos creando un lenguaje humano-computadora.

c. Un lenguaje necesita consistencia ;)

d. Quiere decir, que un link no puede parecer un texto y un texto no puede parecer a un link.

e. Y que el signo debe ser inmutable, para facilitar la comprensión y el diálogo humano-computadora ;)

f. Por eso, definir nuestros estilos o usar un framework ya diseñado, es fundamental :)

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 ;)

referente en diseño de interacción

American Airlines App

Entonces, ¿Qué podemos hacer para optimizar nuestros formularios?

a. Definir una alineación en función de lo que queremos lograr: rapidez o facilidad de scan.

b. Distinguir y separar el call to action principal del secundario.

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.

d. Disminuir al máximo la cantidad de campos, teniendo como objetivo liberar al usuario de realizar un esfuerzo.

e. Evitar los formularios en dos columnas, para evitar que los usuarios al saltar de columna en columna, se olviden de completar un campo.

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?

JUEGO 2: OPTIMICEMOS USANDO LA HERRAMIENTA MOQUPS.COM a.  EL REGISTRO DEL SUPERMERCADO

SUPERAMA b.  EL CHECKOUT DE SUPERAMA PARA UNA

PERSONA NO REGISTRADA

3. AVERIGUA SI TU CALL TO ACTION ES FÁCIL DE ENCONTRAR

¿Para qué nos puede servir?

a. Subimos nuestros mockups y armamos una encuesta, donde las personas deberán contestar cada pregunta haciendo click en la imagen.

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.

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.

d. Lo más importante es que ayuda a que el equipo de diseño se enfoque.

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).

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 ;)

¿Qué necesitamos para realizar una prueba de usabilidad Think Aloud?

Preguntas + Prototipos + Seres humanos

no programadores, ni diseñadores

no bocetos, sino prototipos verosímiles

que no sesguen las respuestas

Para debatir:¿En qué etapa del diseño nos conviene empezar a hacer pruebas de usabilidad? ¿Se podrán hacer antes de programar?

¿Cuál es la diferencia entre boceto y prototipo?

boceto = para discusión con el equipo

prototipo = para probar la comprensión con los usuarios

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.

¿Qué le arreglarían a estos bocetos para convertirlos en prototipos?

si usamos cajas con cruces y líneas, no todos los usuarios van a entender que son fotos con copetes.

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?

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.

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.

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

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 ;)

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”.

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.

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”.

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 ;)

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”.

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”.

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.

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 ;)

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.

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 ;)

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).

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 ;)

JUEGO 5: INCORPOREMOS EN NUESTRO SITIO UNA ENCUESTA PARA RECIBIR FEEDBACK DE LOS USUARIOS ;)

todo feedback, es bienvenido :) Verónica Traynor | @verotraynor | www.veronicatraynor.com.ar México, julio 205

5 Ejercicios de UI/UX para principiantes

Internet

Claudio Adrian Michieli - Diseño ui / ux más que estética

UX( UX 大手銀行5社の住宅ローン比較事例 · UXサーベイは、よくあるUI面・デザインでの表層的なサイト評価ではなく、業界毎に異なる

DESARROLLO WEB & MARKETING ONLINE · Diseño web / UX + UI Marketing Digital Consultoría IT Diseño responsive E-commerce Apps móviles Desarrollo Software Productos digitales. Studio

UX vs. UI? (SPA)

formació - Microgestio · • Illustrator • Indesign • UX/Ui • Procreate • Adobe Acrobat DC • 480 Interactive Imatge digital i foto • Photoshop • Lightroom • Fotografia

La UX antes del UI - Construyendo productos que la gente ame

110, Integrando diseño de UX y UI en desarrollos Móviles

UI / UX Design Presentation

¿Cómo hacer más usables los · - Diseñadores UX / UI (diseño y test de usuario) - Estudiantes auxiliares UX/UI ... - Conceptos básicos de usabilidad y sus beneficios ... -Brindar

Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Apoyo implementación UI (Github, Less, MediaQueries)

Experiencia de Usuario / User Experience UI / UX · 2019-03-23 · Diseño de UX Esta noción de resultado deseado nos lleva a la meta de diseño de interfaz de usuario y tener una

Ux Nights - Casos de estudio UX

UX for Life - 2017.mexicocity.wordcamp.org · UX for Life ! Arantxa Mendoza Bárbara - UX/UI Consultant ! WordCamp CDMX 2017 Satisfacer las necesidades exactas del cliente Simplicidad

UI. Herramientas. Sketch, Figma, · Diseño UX/UI con Sketch (3h) Wireframes UI kits Práctica: Diseñar wireframes de una web Herramientas UI (Sketch, Figma, Invision y Principle)

Hablemos de UX - José Ma. Medina, UX UI designer

소프트웨어 업데이트 버전 1.11€¦ · 소프트웨어 업데이트 ui/ux 기능 ⚫ 안드로이드 spinner 아이템 기능 지원 (1.11.0) ⚫ 안드로이드 9.0 적용,

UX no es lo mismo que UI

contenidos Inkinn 2019 · 2019-07-08 · ๏ Presupuesto vs Resultados ๏ Scripts ... ๏ Introducción a UI/UX ๏ Diseño Centrado en usuario ... ๏ Fundamentos de marketing tradicional

FedericoLópez Diseñador UI/UX y Desarrollador front-end · Portafolio Diseñador UI/UX Noviembre 2019 - Investigación y pruebas de usuario. - Planificación de flujos del sitio

Experiencia de Usuario / User Experience UI / UX€¦ · Diseño de UX Esta noción de resultado deseado nos lleva a la meta de diseño de interfaz de usuario y tener una experiencia