Diapositivas del Taller Tarugo de UX para profanos de la TarugoConf 2019.
Que la usabilidad es importante ya lo sabemos todos. Es la «herramienta mágica» que hace que nuestros usuarios no se frustren y vuelvan, paguen, conviertan… en resumen, que nos quieran. Lo que no sabe todo el mundo es que no hace falta ser un experto/a en diseño para mejorar la UX de nuestros productos digitales.
En las 3 horas que dura el taller no puedo convertirte en un gurú de la UX, pero sí conocerás «herramientas» (métodos, no software) que te permitirán mejorar la usabilidad de tus productos. Podrás usar estas nuevas habilidades para mejorar tus proyectos personales, el MVP de tu startup o simplemente para trabajar mejor con tus compañeros del equipo de diseño.
¿Qué superpoderes vas a adquirir en este taller?
Aprenderás cómo es el proceso para mejorar la usabilidad de cualquier producto/servicio digital.
Descubrirás las taras que la evolución ha ido dejando en nuestro cerebro, y cómo definen el uso que hacen las personas de la tecnología.
Dibujarás sin miedo pantallas con papel y boli para explorar múltiples soluciones.
Harás un auténtico test de usuarios.
Agenda del taller
11:00 – Intro a la UX: Por qué es importante. Qué proceso seguimos.
11:15 – Validar el problema: Vamos a diseñar una app. Aprender a hacer preguntas. Práctica: entrevista.
11:35 – Buscando soluciones: Tu usuario es Homer Simpson. Taras del cerebro. Práctica: lista de funcionalidades y pantallas en 8s.
12:05 – Pintando soluciones: Truquis para nuestras taras. Práctica: reescribiendo galimatías y prototipar en papel
12:45 – Testando soluciones: Usuarios reales con tareas reales. Práctica: test con usuarios en papel con Marvelapp
13:35 – Iterar y medir.
13:45 – Ética: un gran poder conlleva una gran responsabilidad
13:50 – ¿Dudas y preguntas finales? (10 min)
14:00 – Fin del taller
24. Entrevistas
Hablamos directamente
con las personas para
entender sus necesidades,
preferencias y experiencias
con un servicio.
Tenemos que tratar con personas
Inmersión
Observamos al usuario
mientras realiza las tareas
que nos interesan, sin
interferir.
Talleres
Compartimos el problema
con el equipo del producto
para conocer sus puntos de
vista y necesidades.
26. ¿Cómo realizan la tarea en la actualidad?
¿Por qué necesitan hacer esa tarea?
¿Qué les molesta del sistema actual?
¿Lo hacen para ellos mismos o para otros?
¿Qué productos similares usan?
¿Cómo lo hacen otras personas?
¿Cómo encuentran la información que necesitan?
¿Puedes contarme algo más sobre eso?
Entrevista
E
J
E
R
C
I
C
I
O
29. Matriz OTI
E
J
E
R
C
I
C
I
O
Objetivos Tareas de usuario Interfaz
Vender churros
- Ver tipos de churros
- Seleccionar
- Pagar
- Listado de producto
- Detalle de producto
- Carrito
- Formularios pago y envío
Dar a conocer la marca - Conocer quiénes somos y nuestra historia - Apartado “about us”
Captación leads
- Apuntarse a newsletter
- Prueba un churro gratis
- Recomienda a un amigo
- Formularios de registro
- Banners con CTA
Crear comunidad
- Seguirnos en redes sociales
- Informarse de eventos relacionados con el
churro
- Discutir sobre churros con otros clientes
- Área de redes sociales en todas pantallas
- Listado de noticias/eventos
- Detalle de noticias/eventos
- Foro del churro
30. Ya sabemos QUÉ tenemos que diseñar
Ahora ¿CÓMO lo hacemos?
32. El cerebro está optimizado para
ver el mundo de cierta manera
Tenemos sesgos visuales, cognitivos, intuitivos y psicológicos.
Y los diseñadores los aprovechamos.
40. Priming
Utiliza patrones de diseño similares a otras webs/apps.
Haz que las imágenes/textos de la página encajen con lo que ofreces.
Evita la impronta accidental.
45. Y más…
Framing
Aesthetic usability effect
Doherty Threshold
Fitts Law
Hick’s Law
Jakob’s Law
Law of Prägnanz
Miller’s Law
Occam’s Razor
Pareto Principle
Parkinson’s Law
Peak-End Rule
Postel’s Law
Serial Position Effect
Tesler’s Law
Von Restorff Effect
Zeigarnik Effect
Loss aversion
Need to complete
Social proof
50. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus hendrerit.
Pellentesque aliquet nibh
nec urna. In nisi neque,
aliquet vel, dapibus id,
mattis vel, nisi. Sed pretium,
ligula sollicitudin laoreet
viverra, tortor libero sodales
leo, eget blandit nunc tortor
eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
Enviar
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus hendrerit.
Pellentesque aliquet nibh
nec urna. In nisi neque,
aliquet vel, dapibus id,
mattis vel, nisi. Sed pretium,
ligula sollicitudin laoreet
viverra, tortor libero sodales
leo, eget blandit nunc tortor
eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
Enviar
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus hendrerit.
Pellentesque aliquet nibh
nec urna. In nisi neque,
aliquet vel, dapibus id,
mattis vel, nisi. Sed pretium,
ligula sollicitudin laoreet
viverra, tortor libero sodales
leo, eget blandit nunc tortor
eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
Enviar
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus hendrerit.
Pellentesque aliquet nibh
nec urna. In nisi neque,
aliquet vel, dapibus id,
mattis vel, nisi. Sed pretium,
ligula sollicitudin laoreet
viverra, tortor libero sodales
leo, eget blandit nunc tortor
eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
Enviar
Affordance
55. Siguiendo esta línea de actuación, y con el objeto de que con
independencia de su capacidad económica todo aquel candidato
que disponga del perfil requerido por nuestro riguroso proceso
de admisión pueda cursar nuestros distintos programas,
disponemos de un sistema de ayuda al estudiante mediante
programas de Becas, financiaciones y asesoramiento económico.
56. Disponemos de un sistema de ayudas para estudiantes sin
recursos económicos.
57. UX copy
Undefined Error
W500-62829: Failed upload
Error code: 1013
No se ha podido
subir el archivo
El sistema ha encontrado
un error desconocido
mientras subía el archivo.
Vaya, es
demasiado
Has subido demasiados
archivos. El límite máximo
es de 3 para poder
continuar.
Continuar más tarde
Eliminar archivos
Para máquinas Para humanos Para personas
59. ¿Cómo dirías…
E
J
E
R
C
I
C
I
O
t
Limitaciones
'Máx. veces disparable por Contact' se utiliza para limitar la cantidad de veces que este disparador
se puede disparar por cada Contact individualmente. 'Máx. total veces disparable' se utiliza para
limitar la cantidad total de veces que este disparador puede ser disparado entre todos los Contacts.
Máx. veces disparable por Contact
Unlimited
Máx. total veces disparable
Unlimited
Aceptar
67. Test con usuarios
E
J
E
R
C
I
C
I
O
Pedimos al usuario que
comente lo que va
haciendo
No interrumpimos. No
decimos por dónde
seguir cuando se atasca
Tomamos notas y
grabamos
68. “Estamos probando algunas ideas. Las hemos puesto
todas en el diseño sin juzgarlas. Me ayudarás a
descubrir qué ideas son buenas, cuáles no, y a encontrar
nuevas opciones que no se nos ocurrieron”
69. 1. Convertimos los problemas en frases cortas
2. Revisamos los diseños para analizar qué
funcionó y qué no
3. Vuelta a empezar
70. ¿Tu prototipo no funcionó?
No es un fracaso
Piensa en el tiempo que has ahorrado en desarrollo y diseño.
Y ahora sabes algo más sobre lo que quieren tus usuarios.
82. Webs UX
Laws of UX
Una recopilación de los principios que se pueden tener en cuenta al diseñar interfaces
UX Movement
Prácticas y patrones de diseño para una buena experiencia de usuario, organizadas por categorías (formularios, navegación, etc.)
Google UX Playbooks
Los recopilatorios de Google de buenas prácticas de UX por sectores (viajes, financiero, etc) y con ejemplos reales. Todo relativo
a web móvil.
Refactoring UI videos
Rediseños “en vivo” para hacer interfaces más atractivas. Son geniales para empaparse de los principios de la Gestalt sin darte
cuenta.
Digital psychology
Como “Laws of UX”, otra colección de principios/sesgos pero con ejemplos muy claros y sencillos.
Hey Nishi
Recopilación de páginas web que “hablan” como personas y no como robots corporativos.
83. Ética y dark patterns
Userinyerface.com
Un juego desquiciante en el que debes completar un formulario que usa TODAS las técnicas anti-UX posibles.
Darkpatterns.org
Tipos de “dark patterns” en UX y un Hall of Shame con ejemplos de lo que nunca deberíamos hacer.
Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites
Cuando las ventas entran por la puerta la ética sale por la ventana. El estudio es un LADRILLO pero se ve cuán
extendidas están los “dark patterns” y los ejemplos son interesantes.
Senators Introduce Bill to Stop 'Dark Patterns' Huge Platforms Use to Trick Users
El intento en EEUU por legislar este tema. Muy curioso y dado que la “autoregulación” del sector se nos ha dado
regular es probable que lo veamos también por Europa en breve.
A Designer’s Code of Ethics
“A designer is responsible for the work they put into the world […] We cannot be surprised when a gun we designed
kills someone. We cannot be surprised when a database we designed to catalog immigrants gets those immigrants
deported. ”