Presentación sobre Diseño Centrado en el Usuario en el evento Escalabilidad y Usabilidad: Buenas prácticas para el diseño de sitios Web, Universidad de Palermo, 25/8/2009

1. M E M B E R
Diseño Centrado
en el Usuario
Santiago Bustelo
Director de diseño, Kambrica
IxDA Buenos Aires
Universidad de Palermo
25 de agosto, 2009
@sbustelo
Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
http://creativecommons.org/licenses/by/2.5/ar

2. Santiago Bustelo (@sbustelo) •M E M B E R
Diseño Centrado en el Usuario:
un enfoque opuesto a...
• Diseño autoreferencial
• Diseño centrado en la tecnología
• Diseño centrado en stakeholders
• Diseño centrado en la competencia
2

3. Santiago Bustelo (@sbustelo) •M E M B E R
Nivel de detalle
3
Caso macro:
- Estructura general
- Navegación
Caso micro:
- Elementos de interfaz
diseñocentradoenelusuario
todas las pantallas
pixel

4. Santiago Bustelo (@sbustelo) •M E M B E R
Caso macro:
Estructura y navegación
dedirectorio de proveedores
4

5. Santiago Bustelo (@sbustelo) •M E M B E R
5
Estructura del sitio: Modelo original
Home » rubros
Diálogo con el usuario: pregunta
Aberturas
Aislaciones
Baños y Cocinas
Cerramientos
Climatización y ventilación
Construcciones
Decoración
Electricidad y electrónica
Equipamientos
Especialidades
Información
Maderas
Materiales
Metales
Movilidad y transporte
Máquinas, equipos y herramientas
Revestimientos
Sanitarios y gas
Seguridad e incendio
Servicios
Terminaciones

6. Santiago Bustelo (@sbustelo) •M E M B E R
6
Estructura del sitio: Modelo original
Home » rubros » subrubros
Diálogo con el usuario: acoso
Home » Revestimientos
Alfombras
Cerámicas
Chapas y placas
Cielorrasos
Molduras
Mosaicos
Mármoles y granitos
Piedras
Pisos
Revestimientos
Tejas

7. Santiago Bustelo (@sbustelo) •M E M B E R
7
Estructura del sitio: Modelo original
Home » rubros » subrubros »
sub-subrubros
Diálogo con el usuario: interrogatorio
Bordes cerámicos
Ceramicas
Cerámicas esmaltadas
Cerámicas rojas
Cerámicas rústicas
Escalones y zócalos cerámicos
Limpieza y protección de cerámicos
Porcellanatos para pisos y revestimientos
Home » Revestimientos » Cerámicas

8. Santiago Bustelo (@sbustelo) •M E M B E R
Estructura del sitio: Modelo original
Home » rubros » subrubros »
sub-subrubros » resultados
Diálogo con el usuario: desprecio
Aaronico Electrónica S.L.
Abab Argentina
Abaco SRL
Abad e hijos
Abalorios S.A.
Abanderado SRL
Abanicos Digitales
Abaratar S.A.
ABASI y CIA
Abasto Materiales
Abaz e Hijos
Abecedario S.A.
Abeja S.P.A.
Aberradux
Abaciscus S.A.
Abactor S.R.L.
Abacus SRL
Abarnare y Cían
Abatamentux
Abatare S.A.
1 2 3 4 5 6 7 8 9 10 próxima »
Home » Revestimientos » Cerámicas » Cerámicas esmaltadas

9. Santiago Bustelo (@sbustelo) •M E M B E R
9
¿Cómo se llegó a esto?
Modelos mentales enfrentados
Quien hace el sitio
Conoce el contenido
Conoce a fondo el modelo del sitio
Quiere diferenciar el sitio de otros
Foco en estructura
Usuario
No conoce el contenido
Conoce parcialmente otros sitios
Quiere aplicar experiencia previa
Foco en contenido

10. Santiago Bustelo (@sbustelo) •M E M B E R
10
Optimización
Ley de Pareto (80 / 20)
Priorizar y anticipar por relevancia:
Menos pasos en la operación.

11. Santiago Bustelo (@sbustelo) •M E M B E R
11
home
Modelo original: Cuantificación
Accesos
Pasos 10
x
100% = 1000
rubros
subrubros
sub-subrubros
items
item

12. Santiago Bustelo (@sbustelo) •M E M B E R
12
home
Modelo optimizado: Cuantificación
Accesos
Operación
Pasos 42 3
x xx
30% 20%50%
100 90+ + 80 = 270
itemitemitem
facetado+items facetado+items items

13. Santiago Bustelo (@sbustelo) •M E M B E R
Caso micro:
Formulario de contacto
13

14. Santiago Bustelo (@sbustelo) •M E M B E R
Formulario de contacto: Modelo original
14
Nombre: Apellido:
Email: Repetir
email:
Teléfono:
Mensaje:
Verificación:
¿Cómo llegó al sitio?
ENVIAR LIMPIAR
opción 1 opción 1
Quiero recibir información de promociones He leído y acepto la política de privacidad
Tipo de mensaje:
K98LQ1

15. Santiago Bustelo (@sbustelo) •M E M B E R
15
¿Cómo se llegó a esto?
Modelos mentales enfrentados
Formulario de contacto vs. link “mailto:”
Para la empresa
Dirección no es tomada para spam
Se pueden obtener datos adicionales
El usuario puede poner mal su mail
Para el usuario
Funciona con webmail
Puede enviar desde PC ajena
No se puede guardar borrador
No queda registro en “enviados”

16. Santiago Bustelo (@sbustelo) •M E M B E R
16
Importancia de la cuantificación
Creencia: “Preguntar es gratis”
- “Si no quieren se lo saltean”
- No se percibe costo de agregar preguntas
no relevantes a la tarea para el usuario
- No se evalúa beneficio de tener el dato vs.
obtener datos espurios, o abandono del usuario

17. Santiago Bustelo (@sbustelo) •M E M B E R
17
Cuantificación de la operación:
KLM-GOMS
Key 0,2 seg. Tecla / mouse click & release
Hover 0,4 seg. Paso mouse fl‡ teclado
Point 1,1 seg. Apuntar con el mouse
Mental 1,35 seg. Preparación mental nueva tarea
Response ? Respuesta del sistema
Cada operación del usuario tiene un costo.
Preguntar no es gratis.

18. Santiago Bustelo (@sbustelo) •M E M B E R
18
Cuantificación de la operación:
Formulario de contacto
Obligatorio (opcional)
Nombre 7.55 ( 2.70 )
Apellido 4.50 ( 2.70 )
Email 6.90 8.40
Repetir email 6.90 6.90
Código de área 3.50 ( 2.70 )
Teléfono 4.50 ( 2.70 )
Cómo llegó al sitio 14.00 ( 2.70 )
Tipo de mensaje 13.40 ( 2.70 )
Mensaje 32.40 32.40
Quiero recibir promociones 4.40 4.40
Política de privacidad 2.65 2.65
Verificación 20.05 20.05
Enviar vs. limpiar 5.75 5.75
124.95 seg. 96.75 seg.

19. Santiago Bustelo (@sbustelo) •M E M B E R
19
Formulario de contacto optimizado
Nombre y apellido:
Email:
Mensaje:
ENVIAR MENSAJE
recibir en mi email copia del mensaje enviado
7.60 seg.
6.90 seg.
2.70 seg.
32.40 seg.
3.05 seg.
52.65 seg.

20. Santiago Bustelo (@sbustelo) •M E M B E R
20
Preguntas en segunda pantalla
¡Gracias!
Su mensaje ha sido enviado.
ENVIAR
Su opinión es muy importante para nosotros.
Si no es molestia, le agradeceremos unos
instantes más de su tiempo:
¿Cómo supo de nosotros?
¿Desea recibir promociones y ofertas por e-mail?
opción 1
No, gracias Sí, deseo recibir ofertas por e-mail

21. Santiago Bustelo (@sbustelo) •M E M B E R
21
Entregables
Cómo logramos que estas decisiones
lleguen al producto final

22. Santiago Bustelo (@sbustelo) •M E M B E R
22
Función de los entregables
• Proceso de Diseño: solucionar problemas
• Entregables: comunicar esas soluciones
...de forma clara
...de manera económica en un proceso iterativo

23. Santiago Bustelo (@sbustelo) •M E M B E R
23
Entregables: documentación de...
Investigación y objetivos
• Brief de proyecto
• Personas
• Escenarios
Decisiones de diseño
• Matriz de acciones
• Casos de uso
• Descripción de pantallas
• Wireframes
• Prototipos
• Mockups
• Plantillas
Más información: D. Keith Robinson, Critical Web App Design Deliverables
Validación, mantenimiento
• Revisión experta
• Reporte de usabilidad
• Guías de estilo

24. Santiago Bustelo (@sbustelo) •M E M B E R
24
Casos de uso
• Cómo un usuario interactuará con el sistema paso a paso
• Cómo funciona el sistema y cómo está organizado
• Contemplar todos los objetivos del usuario
• Contemplar errores y desvíos
• Foco en tareas y acciones

25. Santiago Bustelo (@sbustelo) •M E M B E R
25
Wireframes
• Entregable clave: “planos” del diseño
• Comunican decisiones de diseño e interfaz
• Fundamental para proceso de diseño, maquetación y desarrollo
• Baja fidelidad alta fidelidad
• Primeras iteraciones: descripción escrita de las pantallas
• Ultimas iteraciones: pantallas cliqueables, HTML

26. Santiago Bustelo (@sbustelo) •M E M B E R
26
Producto final
Centrado en el usuario, como resultado
de un proceso que lo toma en cuenta
desde el primer momento

27. M E M B E R
¡Muchas gracias!
Santiago Bustelo
Universidad de Palermo
25 de agosto, 2009