Diseño Centrado en el Usuario - UP 25 ago 2009

486 views

Published on

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

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
486
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Diseño Centrado en el Usuario - UP 25 ago 2009

  1. 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. 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. 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. 4. Santiago Bustelo (@sbustelo) •M E M B E R Caso macro: Estructura y navegación dedirectorio de proveedores 4
  5. 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. 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. 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. 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. 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. 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. 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. 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. 13. Santiago Bustelo (@sbustelo) •M E M B E R Caso micro: Formulario de contacto 13
  14. 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. 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. 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. 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. 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. 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. 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. 21. Santiago Bustelo (@sbustelo) •M E M B E R 21 Entregables Cómo logramos que estas decisiones lleguen al producto final
  22. 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. 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. 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. 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. 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. 27. M E M B E R ¡Muchas gracias! Santiago Bustelo Universidad de Palermo 25 de agosto, 2009

×