Presentación bajo licencia Creative Commons Atribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar
icogramaMEMBER
Diseño Centradoen el UsuarioSantiago Bustelo • icograma.com
icograma diseño centrado en el usuario •
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
icograma diseño centrado en el usuario • 3
Nivel de detalle
Caso macro:- Estructura general- Navegación
Caso micro:- Elementos de interfaz
dis
eño
cen
trad
o e
n e
l u
suar
io
todas las pantallas
pixel
icograma diseño centrado en el usuario • 4
Caso macro:
Estructura y navegación dedirectorio de proveedores
icograma diseño centrado en el usuario •
Estructura del sitio: Modelo original
Home » rubrosDiá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
5
icograma diseño centrado en el usuario •
Estructura del sitio: Modelo original
Home » rubros » subrubrosDiálogo con el usuario: acoso
6
Aaronico Electrónica S.L.Abab ArgentinaAbaco SRLAbad e hijosAbalorios S.A.
Abanderado SRLAbanicos DigitalesAbaratar S.A.ABASI y CIAAbasto Materiales
Abaz e HijosAbecedario S.A.Abeja S.P.A.AberraduxAbaciscus S.A.
Abactor S.R.L.Abacus SRLAbarnare y CíanAbatamentuxAbatare S.A.
Home » Revestimientos
icograma diseño centrado en el usuario •
Estructura del sitio: Modelo original
Home » rubros »subrubros » sub-subrubrosDiá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
7
Home » Revestimientos » Cerámicas
icograma diseño centrado en el usuario •
Estructura del sitio: Modelo original
Home » rubros » subrubros » sub-subrubros » resultadosDiálogo con el usuario: desprecio
Aaronico Electrónica S.L.Abab ArgentinaAbaco SRLAbad e hijosAbalorios S.A.
Abanderado SRLAbanicos DigitalesAbaratar S.A.ABASI y CIAAbasto Materiales
Abaz e HijosAbecedario S.A.Abeja S.P.A.AberraduxAbaciscus S.A.
Abactor S.R.L.Abacus SRLAbarnare y CíanAbatamentuxAbatare S.A.
1 2 3 4 5 6 7 8 9 10 próxima »
Home » Revestimientos » Cerámicas » Cerámicas esmaltadas
8
icograma diseño centrado en el usuario •
¿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
9
icograma diseño centrado en el usuario •
Optimización
10
Ley de Pareto (80 / 20)
Priorizar y anticipar por relevancia: Menos pasos en la operación.
icograma diseño centrado en el usuario •
home
Modelo original: Cuantificación
11
Accesos
Pasos 5x100% = 1000
rubros
subrubros
sub-subrubros
items
item
icograma diseño centrado en el usuario •
home
Modelo optimizado: Cuantificación
12
Accesos
Operación
Pasos 42 3x xx30% 20%50%
100 90+ + 80 = 270
itemitemitem
facetado+items facetado+items items
icograma diseño centrado en el usuario • 13
Caso micro:
Formulario de contacto
icograma diseño centrado en el usuario •
Formulario de contacto: Modelo original
14
Nombre: Apellido:
Email: Repetiremail:
Teléfono:
Mensaje:
Verificación:
¿Cómo llegó al sitio?
ENVIAR
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
icograma diseño centrado en el usuario •
¿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”
15
icograma diseño centrado en el usuario •
Importancia de la cuantificación
Creencia: “Preguntar es gratis” - “Si no quieren se lo saltean”
- No se percibe costo de agregar preguntasno relevantes a la tarea para el usuario
- No se evalúa beneficio de tener el dato vs.obtener datos espurios, o abandono del usuario
16
icograma diseño centrado en el usuario •
Cuantificación de la operación:KLM-GOMS
Key 0,2 seg. Tecla / mouse click & release
Hover 0,4 seg. Paso mouse teclado
Point 1,1 seg. Apuntar con el mouse
Mental 1,35 seg. Preparación mental nueva tarea
Response ? Respuesta del sistema
17
Cada operación del usuario tiene un costo.
Preguntar no es gratis.
icograma diseño centrado en el usuario •
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 3.05 3.05
122.25 seg. 94.05 seg.
18
icograma diseño centrado en el usuario •
Formulario de contacto optimizado
19
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.
icograma diseño centrado en el usuario •
Preguntas en segunda pantalla
20
¡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
icograma diseño centrado en el usuario • 21
Entregables
Cómo logramos que estas decisioneslleguen al producto final
icograma diseño centrado en el usuario •
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
22
icograma diseño centrado en el usuario •
Entregables: documentación de...
Investigación y objetivos
• Brief de proyecto
• Personas
• Escenarios
23
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
icograma diseño centrado en el usuario •
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
24
icograma diseño centrado en el usuario •
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
25
icograma diseño centrado en el usuario • 26
Producto final
Centrado en el usuario, como resultadode un proceso que lo toma en cuentadesde el primer momento
¡Muchas gracias!Santiago Bustelo • icograma.com
icogramaMEMBER