¡Hola!
Taller Tarugo de UX para profanos

Soy Jimena
piensaenpixels.com
@subidubi
jimena.catalina@gmail.com

Intro Definir Buscar Pintar Testar Iterar ?
20 min. 20 30 40 50 10 15

¿Diseño de experiencia de usuario?

Idioma origen
Complejo
Idioma destino
Sencillo
TRADUCIR

Hacemos herramientas…
Que hagan bien su trabajo
Den control al usuario
Minimicen el esfuerzo

Cuando el diseño falla…

Frustración
Ira
Pérdida de tiempo
Coste económico

Cuando el diseño es bueno…

Aprendizaje rápido
Reduce errores
Lealtad
Ahorra tiempo

Dinero
Buena educación
Resumiendo

No hace falta ser diseñador para
crear buenos diseños
Todos podemos detectar una mala UX en cualquier punto del proyecto

¿Cómo trabajamos?
Definir el
problema
Buscar
soluciones
Pintar
Testar
Construir y medir

Pedir cita al médico Regar las plantas

1
Definir y validar

¿Cuál es el problema a resolver?
¿Quién lo va a usar?
¿Qué necesidades tienen?
¿Qué dispositivos usan?
¿Contexto de uso?

Todos somos usuarios

Todos somos usuarios
Nosotros no somos usuarios

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.

Yo soy vuestra
entrevistada
Escribid 4 preguntas,
me hacéis 1
Apuntad info
interesante
E
J
E
R
C
I
C
I
O
Entrevista

¿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

2
Buscar soluciones

Matriz OTI
E
J
E
R
C
I
C
I
O
Objetivos Tareas de usuario Interfaz

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

Ya sabemos QUÉ tenemos que diseñar
Ahora ¿CÓMO lo hacemos?

Tu usuario

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.

Inattentional blindness
La parte de abajo/arriba no se percibe.
Muestra las cosas junto al foco de atención.

Anclaje
Escoge buenos valores predeterminados y valores sugeridos.
Establece expectativas al inicio de un proceso.

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.

Gestalt
Organiza, agrupa, alinea, jerarquiza, destaca, etc.

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

Diseños en 8s
E
J
E
R
C
I
C
I
O
Boceta 8 opciones
en 8 minutos
Las ideas locas también
valen
Dobla una hoja en 8
secciones

3
Pintar y prototipo

Más truquis

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

¡clic!

Respuesta

Respuesta

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.

Disponemos de un sistema de ayudas para estudiantes sin
recursos económicos.

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

Claro
Conciso
Útil
Consistente
sin jerga, con contexto
breve, económico
siguiente acción
siempre mismas palabras

¿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

Una posible solución
E
J
E
R
C
I
C
I
O
t
Límites
Limita cuántas veces este disparador se lanza:
Por cada contacto
Sin límite
En total, para todos los contactos
Sin límite
Aplicar límites

Prototipar en papel
E
J
E
R
C
I
C
I
O
Necesito una cita
con mi médico de familia
Me han regalado
una planta nueva

Prototipar en papel
E
J
E
R
C
I
C
I
O
¿Qué necesitaba mi
usuario?
Textos reales.
Tamaños decentes.
Poco detalle al
principio, luego refinad

Cada pantalla debe responder 3 preguntas:
1. ¿Dónde estoy?
2. ¿Qué tengo que hacer aquí?
Pónmelo fácil
3. ¿Qué va a pasar luego?

4
Probar con personas

Personas de verdad,
haciendo tareas de verdad

Prototipo interactivo en POP
E
J
E
R
C
I
C
I
O

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

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

1. Convertimos los problemas en frases cortas
2. Revisamos los diseños para analizar qué
funcionó y qué no
3. Vuelta a empezar

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

5
Iterar

Si no mides estás A CIEGAS
(da igual que sigas todas las best practices)

Satisfacción
% de abandono de tarea
Tiempo para completar tarea
Contactos con atención al cliente
…

Nº de papelitos

Apaños caseros

¿Cómo trabajamos?
Definir el
problema
Buscar
soluciones
Pintar
Testar
Construir y medir

El CMR obliga

Ética

Manipulación

¿Preguntas?

Libros UX
Principios universales de diseño A project guide to UX Design La psicología de los objetos
cotidianos

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.

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