diseño (iterativo, web) centrado en el usuario

1. diseño (iterativo, web) centrado en el usuario tomas laurenzo cecal · inco · fing · udelar Interacción persona computadora. www.fing.edu.uy/inco/cursos/inpercom

2. Diseño web centrado en el usuario Basado en los capítulos 1, 3, 4 y 5 de The Design of Sites Douglas K. Van Duyne James A. Landay Jason I. Hong

3. La web es interesante porque • nóvel… • …mas establecida • ubicua. • usability-driven • usuarios volátiles • alta competencia • rápida evolución

4. Etapas en la evolución del diseño • Hacé un sitio web, y el público vendrá. Se ignoraba la perspectiva del usuario y cuál era la relación entre el sitio y el negocio. • Avisá que vendés on-line y el público vendrá. Se ignoraba la complejidad del proceso de diseño para lograr facilidad de uso. • Diseñá un sitio que brinde valor real y experiencia positiva al usuario. Son sitios web centrados en el cliente.

5. Diseño (web) centrado en el usuario Facilidad de uso Rendi-miento Valor de marca Satisfac-ción Conte-nido Temas centrales del D.C.U.

6. La gente abandona un sitio web si: • Suponen que hay que dedicarle demasiado esfuerzo a navegar por el sitio. • Suponen que no tiene el producto o servicio que están buscando. • Se desilusionan • Sienten que toma demasiado tiempo bajar la página. Para evitar esto se debe ser claro, pero en función de los usuarios y clientes potenciales.

7. En un sitio web sin competidores también hay que considerar a los usuarios. Sitios simples y bien diseñados permiten ahorrar tiempo a sus usuarios, reducen tiempo de mantenimiento y mejoran la satisfacción general.

8. Ejemplos de buen diseño: Google y Yahoo! ¿Gran diseño gráfico? ¿Propuesta atractiva y seductora? ¿Utiliza la última tecnología? ¿el último plugin de flash etc.? Simplicidad, facilidad de uso, mejores resultados, fácil descarga. • En Yahoo! (y en Google) se realizan estudios de campo, entrevistas con usuarios, se hacen evaluaciones de usabilidad, etc. • En líneas generales el diseño está orientado a satisfacer las necesidades de los clientes.

13. Tipos de diseño • Diseño centrado en el usuario: • Mezcla mercadeo (marketing)con usabilidad. • Se centra en el problema de obtener público y mantenerlo. Trata que el primer uso sea disfrutable y procura que los visitantes se transformen en clientes. • Se trata de combinar objetivos diversos: negocios, marketing, usabilidad, experiencia del usuario (“Good Customer Experience”) • La tecnología y el diseño son herramientaspara dar poder a la gente.

14. Tipos de diseño • Diseño centrado en la compañía: • Las necesidades e intereses de la compañía dominan la estructura del sitio. • Puede haber poca información útil. • Utilizan un léxico sólo conocido por expertos. • No hay ideas claras de porqué alguien visitará el sitio. • Diseño centrado en la tecnología: • Mucha animación, audio, streaming, banners. • Poca usabilidad, utilidad y deseabilidad. • La tecnología es un fin en lugar de un medio.

15. Tipos de diseño • Diseño centrado en el diseñador (ego design): • “Los diseñadores sabemos qué es lo mejor, por eso somos diseñadores” • Esto puede ser bueno para algunos sitios (por ejemplo, portafolios de diseño), pero no en general. • el éxito depende del número de visitantes. • El diseñador (o el ingeniero) son una herramienta, un insumo más en el dominio de interés.

16. Nueve mitos del diseño • Buen diseño requiere sólo sentido común. • Entonces, ¿por qué hay tanto sitio mal diseñado? • A su vez, los diseñadores no son iguales a los clientes y por tanto desconocen sus: • actividades, intereses, opiniones, actitudes, creencias, • valores, experiencia, percepción, edad, ocupación, ingreso, geografía, idioma, cultura, ...

17. Nueve mitos del diseño • Sólo expertos pueden crear buenos diseños. Los expertos pueden hacer análisis más rigurosos y llegar más rápido a buenos resultados, pero (casi) cualquiera podría hacer un buen diseño si se dedica a ello (!) • La interacción (las intefaces) pueden ser diseñadas en un rato. • Se asume que el sitio posee las funcionalidades correctas y que esas funcionalidades fueron construidas correctamente. • El problema es que si algo está mal, se va a conocer la verdad muy tarde.

18. Nueve mitos del diseño • Buen diseño toma mucho tiempo y dinero. • Mayores costos al principio: hablar con los clientes, crear prototipos, obtener feedback, etc. • Luego se reducen los costos posteriores (back-end costs): insatisfacción del cliente, pérdidas de clientes potenciales, llamadas telefónicas de ayuda, compras devueltas, mantenimiento general del sitio, etc. • Buen diseño es solamente buen diseño gráfico. • Una buena estética es importante porque ayuda a comunicar cómo utilizar la interfaz y cómo hacer llegar un mensaje. • Es necesario tomar en consideración además qué es lo que los clientes quieren, qué comprenden, qué tareas desarrollan, en qué contexto hacen sus cosas.

19. Nueve mitos del diseño • Buenas guías (guidelines) sobre las interfaces, nos guiarán hacia un buen diseño. • Las guías evitan problemas comunes. Se dirigen a establecer un proceso. • No habla de cuáles rasgos debería poseer, la organización general del sitio web, o el flujo entre páginas. • Patrones, en cambio, ayudan a crear soluciones. • Los clientes pueden apoyarse en la documentación y la ayuda. • Las ayudas son muy poco utilizadas en general, y particularmente poco en un sitio web.

20. Nueve mitos del diseño • Una investigación de mercado llega a comprender todas las necesidades de los clientes. • Una cosa es lo que los clientes dicen, pero lo realmente importante es lo que ellos hacen. Tampoco los clientes, ni los investigadores saben qué sucederá al introducir productos disruptivos. • Por tanto, debe balancearse con la observación directa. • Hay que aplicar variedad de técnicas (desde observaciones hasta entrevistas) para conocer las necesidades verdaderas y enfocarse en las áreas más importantes para la mayoría de los clientes.

21. Nueve mitos del diseño • Los grupos de verificación (testing)de software aseguran que los sitios funcionen bien. • Los tests de software suelen estar más dirigidos hacia la tecnología que hacia la clientela. • Los expertos verifican que el sitio siga la especificación, en lugar de observar lo que hacen los clientes reales en situaciones reales. • El test se realiza luego de construido. Es difícil luego resolver errores mayores de diseño.

22. valor tangible en función de los usuarios

23. Diseño centrado en el usuario o cliente, implica comprender a la gente, sus tareas, la tencología disponible y cómo todo eso se relaciona con el contexto social u organizacional del cliente y, potencialmente, también de nuestro cliente.

24. Principios y técnicas para conocer a los clientes • Idea base del diseño centrado en el usuario: uno (el diseñador) no es como sus clientes. • Comprender los elementos (clientes, tareas, tecnologías, contexto social) y balancear las fuerzas. Cada elemento ejerce fuerzas que influyen en el diseño. • Comprender a los clientes como personas. • Comprender las personas como individuos. • Comprender las características básicas de la gente en general.

25. Principios y técnicas para conocer a los clientes • Los clientes son diferentes: • Niños, jóvenes, adultos, ancianos. • Nivel educativo. • Qué otros sitios utilizan. • Experiencia en la web. • Preocupación por la estética o la funcionalidad. • Los clientes son iguales: • Habilidades cognitivas. • Fitts, Hicks, Gestalt, ergonomía, psicología cognitiva. • Limitaciones perceptuales • Preocupación por la estética o la funcionalidad.

26. Principios y técnicas para conocer a los clientes • Comprender las tareas y objetivos de los clientes. • Catalogar y esquematizar lo que la gente puede hacer cuando utiliza el sitio web • Quiero mandar un mensaje a un amigo • Quiero comprar el mejor PC por 700 dólares. • Reducir la carga cognitiva: Si es posible, utilizar una metáfora que la gente comprenda. Aprovechar las posibilidades de las computadoras. • Nielsen: no usar metáforas, siempre que sea posible. • Entrenamiento para realización de tareas: No tiene por qué ser 100% intuitivo en el primer uso. Es distinta la facilidad de uso con la facilidad de aprendizaje. Los diseñadores deben ser cuidadosos. Resulta muy difícil encontrar el BALANCE ideal. • Ayudar a la gente a ser expertos: Términos básicos iniciales. Diccionario con términos usuales. Sección para primerizos. Todos los usuarios son potencialmente expertos. • Tolerancia a errores. Google y +.

27. Técnicas para conocer a los usuarios • No enfocarse en lo que los clientes quieren. Enfocarse en lo que necesitan (!) • Análisis de tareas (Task analysis). • Personas: quiénes son; intereses; perfil demográfico, etc. • Tareas: ¿qué actividades realizan? ¿qué buscan en nuestro producto? ¿con qué frecuencia lo hacen? ¿qué habilidades informáticas tienen? ¿poseen dificultades físicas? • Tecnología: ¿qué equipamiento poseen? Disco, potencia, monitores, software, conexiones. • Aspectos sociales: factores organizacionales o sociales que afectan a los usuarios. Lugar donde realizan sus tareas. Entorno. Seguridad.

29. Técnicas para conocer a los usuarios Técnicas tradicionales de marketing para conocer a los usuarios. • Focus groups (antes de diseñar el sitio) y encuestas (teléfono, en línea, con diferentes tipos de potenciales clientes). • Tests pilotos antes de mostrar el sitio a potenciales clientes. • Testear antes las encuestas y los focus groups. • Retroalimentación constante. e.g: encuestas en línea.

30. Técnicas para conocer a los usuarios Construir escenarios. • Enfocarse más en lo que la gente hace (o pretende hacer) que en cómo lo hace (casos de uso). • Los escenarios hablan de los clientes y sus características, las tareas que quieren hacer, el contexto del uso del producto. • Crear muchos escenarios para cada uno de los diferentes tipos de personas. Tener a personas reales en mente. • Los escenarios pueden incluir fotografías o secuencias de dibujos (storyboards), secuencia de páginas web que dan idea de cómo se realiza una tarea. Si bien podemos estar tentados a hacer bellos diseños, es importante no hacerlos en esta etapa. FORM FOLLOWS FUNCTION.

31. Ejemplo de escenario Victoria es una joven estudiante universitaria buscando un regalo para su hermana más joven, quien va a cumplir 16 años en dos semanas. Victoria tiene un presupuesto ajustado, pero quiere tener algo memorable y útil para su hermana en este importante cumpleaños. Ella ha escuchado a alguno de sus amigos acerca de ebirthdayz.com, por lo tanto, decide probar. En la página principal, ve que hay una opción de recomendación de regalos. Victoria encuentra la pantalla de recomendaciones y ve regalos basados en la edad e intereses de su hermana, y en su presupuesto menguado. El sitio muestra algunas sugerencias, y Victoria elige un regalo popular y lo compra, con envoltorio para regalo. Tiempo total empleado: 20 minutos.

32. Técnicas para conocer a los usuarios Construir escenarios. • Antes de decidirse a diseñar las funcionalidades para que el escenario sea una realidad, hay que determinar si la opción de recomendación de regalos es una buena idea. • ¿Es una buena idea? • ¿Parece útil? • ¿Problemas?

33. Ejemplos de bosquejos(sketchs)

35. Técnicas para conocer a los usuarios Elegir tareas (prototípicas o cruciales) Elegir los objetivos o tareas a ser desarrolladas por los usuarios.. • Las tareas elegidas provienen del análisis de tareas y posteriormente de las observaciones y entrevistas con clientes reales. • Las tareas deben ser representativas: deben ser tareas que los clientes quieren (o tienen que) realizar. No algo del tipo: “nadie ha hecho las tareas que mi sitio permitirá hacer”. Quizá sean nuevas en la web, pero –probablemente- no deban ser nuevas en la vida de las personas. • Las tareas deben ser comunes o importantes. • Las tareas deben describir una actividad completa.

36. Técnicas para conocer a los usuarios Observar y entrevistar a los clientes. • Observar lo que hacen los clientes: • Registrar las tareas que realiza el cliente a lo largo de uno o dos días. • Usar una cámara para registrar el lugar donde desempeñe la actividad. • Vea los sitios web que visitan los clientes. • Pedirles que vean su sitio web o el de la competencia. • Qué cosas le gustan o disgustan. • Preguntemos para estar seguro de que entendemos lo que están haciendo.

37. Técnicas para conocer a los usuarios Observar y entrevistar a los clientes. • Entrevistar a los clientes: • Preguntar si tienen ideas acerca de cómo organizar y estructurar las partes del sitio web o de la aplicación. • Luego de un tiempo, mostrar escenarios y bosquejos, y preguntar acerca de si son correctos los conceptos manejados. • Evitar que la respuesta sea simplemente sí o no. La realidad es compleja. • Grabar las entrevistas, sin interrupciones, en el entorno habitual del cliente. • Comenzar con preguntas fáciles. • Realizar preguntas abiertas. Que los entrevistados hablen de sus pensamientos y experiencia. • No juzgar ni confrontar al cliente. • Hay que escuchar mucho más que hablar. Es una entrevista, no una conversación.

38. Técnicas para conocer a los usuarios Organizar la información descubierta. • Diagrama de afinidad. • Todos los conceptos se organizan (en una pared :)), en diagramas jerárquicos. • Cada concepto va en un papel independiente. • Se agrupan los conceptos relacionados, y se unen con líneas los conceptos relacionados que estén en diferentes grupos. • El diagrama de afinidad permite de un vistazo considerar los problemas y necesidades de los clientes. • Puede ser la base de la arquitectura de la información. • Puede ser la base para escenarios y storyboards.

39. Técnicas para conocer a los usuarios Organizar la información descubierta. • Diagrama de afinidad.

40. Apples Apples Oranges Oranges Bananas Bananas Fruit Técnicas para conocer a los usuarios Organizar la información descubierta. • Ordenamiento de cartas (card sorting). • Cómo agrupar la información de forma que le permita a la gente encontrar lo que están buscando, en base al reconocimiento de los grupos. • Sirve para establecer la terminología que podría ser fácil o difícil de comprender.

41. Fruit Fruit Pyrus Citrus Musa Local Tropical Apples Apples Oranges Oranges Bananas Bananas Técnicas para conocer a los usuarios Organizar la información descubierta. • Ordenamiento de cartas.

42. Técnicas para conocer a los usuarios Encuestar a los usuarios • Es útil para realizar estudios cuantitativos. • Se precisa ser estrictos en los aspectos estadísticos. (muestra representativa (cantidad, calidad), bien hecha la muestra, etc.). • Convencer a la gente a participar en una encuesta requiere de motivación. Una “atención” (camiseta, taza de café, etc.), o efectivo. Cuanto más larga sea la encuesta, más hay que pagar. • Las encuestas muestran lo que la gente dice que hace, pero no lo que realmente hace. Esto puede ser problemático.

43. Técnicas para conocer a los usuarios Focus Groups • Es útil para realizar estudios cualitativos. Sirve para conocer por qué la gente hace lo que hace. • Consiste en grupos (6-12 personas), representativos de la población objetivo, reunidos en una misma habitación. (preferiblemente, no se conocen entre ellos). • Hay que preparar con antelación la reunión. Hay que conocer qué información se quiere relevar. • Otros miembros (pocos) del equipo de desarrollo pueden estar en la reunión. Escuchar directamente a los clientes es mucho mejor que leer un informe. • Es imprescindible la existencia de un moderador con experiencia, para que todos en el grupo puedan hablar, para que no haya predominancia de lo que uno opina y desvíe al grupo.

44. Técnicas para conocer a los usuarios Focus Groups • Es buena idea realizar varios grupos de enfoque. • Se aprende mucho de sus actitudes y percepciones, pero no mucho sobre lo que realmente hacen en la práctica. • Por eso se utilizan más en las primeras etapas de diseño, cuando no hay que evaluar que es lo que harían al utilizar el sitio.

45. Técnicas para conocer a los usuarios Analizar productos existentes • Que usuarios potenciales evalúen productos existentes (propios o ajenos). • Observar lo que dicen y quieren hacer en el producto, lo que realmente hacen, los pasos que dan para hacerlo. • Tomar nota de los errores, lo que ellos dicen que les gusta o disgusta. • Deben llenar un cuestionario con información demográfica, con sus intereses, etc. • Tener cuidado con la info de los usuarios de tus productos (sitios o sistemas)

46. La segunda lección más importante de la disciplina HCI es que es necesario involucrar a los usuarios al proceso de construcción del softwareUna herramienta para lograrlo es el diseño iterativo

47. Diseño Evaluación Prototipado Ciclo de diseño iterativo

48. Proceso de diseño iterativo Razones para utilizar diseño iterativo • Ayuda a encontrar problemas mientras estos son aún baratos y fáciles de arreglar. • Asegura que se está construyendo un sitio que tiene las prestaciones que los clientes necesitan. • Asegura que se están construyendo dichas prestaciones en una forma que los clientes puedan utilizar. Es generalmente considerada como una técnica de gran valor para el diseño interfaces pero, mas importante aún, al utilizar esta técnica se reconoce que ningún grupo de diseño es perfecto.

49. build the right product build the product right

50. Diseñar con objetivos y principios. Objetivos medibles a través de tests. • Completar en menos tiempo la tarea. • Completar exitosamente más tareas. • Mayor facilidad de aprendizaje. • Cometer menos errores (¿back button es un error?) • El abandono de menos carritos compras. • Mayor placer o satisfacción. • Mayor diversión. • Mayor tasa de conversión de visitante a cliente. • Incremento en la repetición de visitas de los clientes. • Mayor ganancia económica. ¿Cómo medirlos?