Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ux interfaces persuasivas

1,022 views

Published on

Presentación de introducción al User experience para el diplomado de marketing digital de la UDD

Published in: Education
  • Login to see the comments

  • Be the first to like this

Ux interfaces persuasivas

  1. 1. User Experience Módulo tendencias Marketing Digital UDD CLASE Interfaces Persuasivas
  2. 2. ¿Y este módulo? ¿Para qué me sirve? Comprender el concepto de UX y considerarlo como parte relevante del proceso de conversión y cierre Comprender las principales buenas prácticas de Experiencia de usuario en el diseño de sitios web Ser capaz de aplicar tests de usabilidad básicos a interfaces existentes que le permitan identificar los principales puntos de conflicto Tener los conocimientos básicos para solicitar, gestionar y exigir estudios de UX de primer nivel a especialistas.
  3. 3. ¿Qué esperan aprender hoy? ¿Cuáles son sus expectativas?
  4. 4. Probablementeyagastasteunmontóndedineroyesfuerzoen aumentarlas visitas atusitio,perohaymuchadeesa gente queseva air sin comprar… No basta con traer usuarios a tu sitio web, necesitas convertir esos visitantes enclientes …el UX sabecómo. ¿Para qué me sirve este curso?
  5. 5. El ROI del UX http://humanfactors.com/coolstuff/roi_increased_conversion_rate.asphttp://humanfactors.com/coolstuff/roi.asp
  6. 6. ¿Dónde puede ayudar el UX? http://humanfactors.com/coolstuff/roi.asp Aumentarla productividad •Aumentarla eficienciaen tressegundosparaunapáginadeterminada Reducirel uso de call centers •Reducirlosllamadosal callcenterun25% Aumentarlas tasas deconversión •Aumentarla tasade conversiónenun5% Reducirlos costos decapacitación •Reducirlassolicitudesdecapacitaciónen un 40% Disminuir la tasa deabandono •Reducirla tasade abandonoenla páginade pago enun2% Suavizar la curvadeaprendizaje •Reducirel tiemponecesariopara aprenderen4 horas
  7. 7. Definiciones Experiencia de usuario/ Usabilidad / Arquitectura de Información / Diseño de interacción / Diseño de interfaz
  8. 8. Dan Saffer (2009)
  9. 9. Magnus Revang (2007)
  10. 10. Peter Morville (2004)
  11. 11. Stephen P. Anderson (2011)
  12. 12. Jesse James Garrett (2010)
  13. 13. Usabilidad “Disciplina orientada a lograr que las cosas sean más fáciles de usar”
  14. 14. ¿Para qué? “Porque cuando algo es más difícil de usar, no lo uso tanto” Steve Krug
  15. 15. ¿Y cómo? Diseño / Validación Diseñando interfaces más fáciles de usar Validando los diseños mediante la revisión
  16. 16. ¿Cómo diseñar una interfaz más fácil de usar? “Muy fácil”…
  17. 17. Haz que funcione como algo que tu usuario ya sabe usar Televisores y microondas
  18. 18. USABILIDAD 4 pasos imprescindibles Conocer las buenas prácticas generales Conocer las buenas prácticas específicas Conocer las particularidades de mi usuario Probar con usuarios 1 2 3 4
  19. 19. Diseñando engagement Cómo la psicología puede ayudarnos
  20. 20. Diseñando Engagement Validación social Estás más propenso a actuar (o no actuar) si otros ya lo han hecho
  21. 21. Diseñando Engagement Reciprocidad Si yo te doy un regalo, tu estás más propenso a responder positivamente a algo que yo te pido
  22. 22. Diseñando Engagement Concesión Si primero te pido mucho y luego te pido menos, es más probable que me des tu aprobación
  23. 23. Diseñando Engagement Confianza Yo confío en ti si tu confías en mi. El look & feel genera/rompe la confianza
  24. 24. Diseñando Engagement Competencia Si compites contra otros es más probable que aumente tu engagement Es más motivante si hay 10 o menos rivales Tiene más efecto en hombres que en mujeres
  25. 25. Diseñando Engagement Cantidad de opciones Los usuarios prefieren tener más opciones disponibles (atracción), pero están más dispuestos a comprar (conversión) si las opciones son reducidas (entre 3 y 4)
  26. 26. Diseñando Engagement Miedo a la pérdida Si siento que puedo perder algo, me siento más motivado a la acción “Sólo quedan 2 unidades”
  27. 27. Diseñando Engagement Área fusiforme facial Es una parte del cerebro que se encarga de interpretar los rostros Los rostros son muy poderosos en captar atención Funcionan mejor si te miran directamente
  28. 28. Diseñando Engagement Pasos muy pequeños Ayudan a sentir que progresas rápidamente Sientes que son metas alcanzables Crees que puedes hacerlo ahora
  29. 29. Diseñando Engagement Minimiza las decisiones Decidir es difícil, hace que tenga que razonar antes de actuar, eso disminuye las tasas de conversión
  30. 30. Diseñando Engagement Muestra el progreso constantemente Dónde estoy, cuánto he avanzado, cuánto me falta
  31. 31. Recomendaciones de usabilidad Cómo los mandamientos, pero de la usabilidad
  32. 32. Formularios Usa labels alineados verticalmente Son más fáciles de completar
  33. 33. Formularios Un formulario debe ser una conversación Debe tener una secuencia y ritmo lógico
  34. 34. Formularios Elige bien el lenguaje que ocupas (y cuánto ocupas) Debe estar en sintonía con tu usuario
  35. 35. Formularios Evita las distracciones Cada elemento sobrante daña la experiencia
  36. 36. Formularios Nunca más de una columna Excepto Nombre/apellido y Región/comuna
  37. 37. Formularios Para cada interacción su patrón La creatividad no es una buena idea acá
  38. 38. Formularios Acciones primarias > acciones secundarias Nunca deben ser parecidas
  39. 39. Formularios Evita las acciones genéricas Es mejor un “pagar” que un “enviar”
  40. 40. Formularios La ayuda debe ser contextual De nada sirve si no está a la mano
  41. 41. Formularios La validación debe darse cuanto antes Ojalá en tiempo real
  42. 42. Formularios Nunca los labels dentro de los inputs Se desaparecen al clickear
  43. 43. Formularios Agrupa los contenidos Si los campos son muchos
  44. 44. Formularios Que lo llenen como quieran Tu te encargas del formato
  45. 45. Formularios El aire mejora el entendimiento El formulario parecerá más simple
  46. 46. Formularios Cuida el ancho y el alto Evita la claustrofobia
  47. 47. Formularios Permite el uso del “Tab” Para pasearse entre campos
  48. 48. Formularios Permite los “smart defaults” Para ahorrarse tiempo en el llenado
  49. 49. Formularios Usa el “Progressive disclosure” Para no saturar al usuario
  50. 50. Formularios Usa la animación para comunicar Puede servir para entender mejor lo que sucede
  51. 51. Formularios Nunca borres el avance del usuario Nada peor que volver a empezar el formulario
  52. 52. Navegación Organiza y etiqueta como lo harían tus usuarios No como lo hacen en la institución (aprende de las búsquedas)
  53. 53. Navegación Usa links con texto descriptivo No más “haga click aquí”
  54. 54. Navegación El desplegable debe esperar 0.5 segundos antes de aparecer para no molestar la navegación
  55. 55. Formularios Ejercicio! Qué errores ven en los siguientes formularios:
  56. 56. Metodologías y entregables Cuando contratas a un especialista, esto es lo que recibes
  57. 57. ¿Cómo se debe diseñar un sitio complejo? ¿Y no morir en el intento?
  58. 58. UCD Waterfall
  59. 59. UCD Waterfall
  60. 60. Personas ¿Qué es? Es una ficha con descriptores de los usuarios arquetípicos de mi idea ¿Para qué sirve? Para entender a los usuarios, sus intereses, motivaciones, contextos de uso, preocupaciones, etc. ¿Cuándo realizarlo? Al principio del proyecto ¿Cómo se hace? • Se definen arquetipos de usuarios • Se hacen entrevistas con los involucrados • Se crean fichas por cada usuario mencionando sus características como si estuviéramos definiendo a una persona real
  61. 61. Storyboarding ¿Qué es? Es una historia dibujada de formas de uso de la idea ¿Para qué sirve? Para focalizarse en lo central de la idea, para revisar la lógica de la idea, para comunicar el concepto de manera fácil ¿Cuándo realizarlo? Cuando se tienen las primeras ideas, usuarios y contextos de uso ¿Cómo se hace? • Se definen las tareas y usuarios a dibujar • Se establece el guión • Se dibuja la historia • Se evalúa su resultado
  62. 62. Benchmarks ¿Qué es? Es una sistematización de las mejores ideas de otros proyectos existentes ¿Para qué sirve? Para no inventar la rueda, para no cometer los mismos errores de otros, para diferenciarme de mi competencia ¿Cuándo realizarlo? Al momento de empezar un proyecto que ya está relativamente definido en su contexto ¿Cómo se hace? • Se definen los referentes a analizar • Se analizan rescatando lo bueno y lo malo • Se establecen conclusiones haciendo énfasis en las ideas que me sirven
  63. 63. Capacidades del sistema ¿Qué es? Es un listado detallado de todas las posibles funcionalidades que puede tener nuestra idea ¿Para qué sirve? Para definir y jerarquizar las funcionalidades de nuestro proyecto ¿Cuándo realizarlo? Al momento de tener la idea clara, los usuarios estudiados y los referentes analizados ¿Cómo se hace? • Se crea una tabla con todas las posibles funcionalidades del sistema • Se asignan niveles de importancia y complejidad a cada funcionalidad • Se definen las funcionalidades que van finalmente en la solución
  64. 64. Card Sorting ¿Qué es? Es una dinámica de organización de contenidos ¿Para qué sirve? Para obtener información respecto de cuál es la manera más lógica de agrupar contenido ¿Cuándo realizarlo? Al momento de tener los contenidos delineados y/o definidos ¿Cómo se hace? • Se invita a varios grupos de usuarios a una sesión de trabajo • Se le entregan postits (definidos o en blanco) con los contenidos del proyecto • Se les pide que organicen los postits en secciones (ya definidas o por crearse) • Se realiza un reporte de los resultados
  65. 65. Site Maps ¿Qué es? Es un diagrama de ordenamiento de secciones y sus contenidos ¿Para qué sirve? Para visualizar las distintas pantallas de la solución y sus relaciones ¿Cuándo realizarlo? Al momento de tener definidos los contenidos ¿Cómo se hace? • Se recopilan los contenidos que deben formar parte del proyecto • Se establecen cuáles serán las páginas que formarán parte del proyecto • Se establecen secciones donde se encontrará cada página • Se definen relaciones jerárquicas entre cada pantalla • Se crea un diagrama que lo especifique
  66. 66. Task Flows ¿Qué es? Es un diagrama de ordenamiento de procesos y tareas ¿Para qué sirve? Para visualizar la manera en que las distintas tareas son realizadas (paso a paso) y encontrar posibles errores de lógica ¿Cuándo realizarlo? Al momento de tener definidas las capacidades del sistema ¿Cómo se hace? • Se definen las tareas a visualizar • Se establecen los pasos necesarios para realizar una tarea • Se buscan los puntos de bifurcación y se establecen rutas alternativas • Se crea un diagrama que explica las distintas posibilidades de interacción http://www.jjg.net/ia/visvocab/spanish.html
  67. 67. Ideal Task Flows ¿Qué es? Es un diagrama que muestra la interacción ideal de un usuario con el proyecto ¿Para qué sirve? Para que al momento de diseñar el proyecto podamos priorizar evidentemente el flujo ideal ¿Cuándo realizarlo? Al momento de tener definidas las capacidades del sistema ¿Cómo se hace? • Se definen las tareas más relevantes • Se determina la ruta o los pasos ideales con los que un usuario debería relacionarse con el sistema • Se determinan los puntos clave • Se visualizan en una serie de diagramas simples
  68. 68. Sketching ¿Qué es? Es un proceso de bocetaje de las principales ideas del proyecto (no sólo pantallas) ¿Para qué sirve? Para sistematizar y visualizar las ideas y sus posibles soluciones ¿Cuándo realizarlo? Al momento de tener definidas las capacidades del sistema (*mapa de navegación) ¿Cómo se hace? • Se definen las ideas a bocetear • Se establecen las variables que conforman cada idea • Se realizan múltiples iteraciones hasta encontrar las mejores soluciones • Se realizan anotaciones que permitan argumentar, detallar o invalidar una idea
  69. 69. Wireframes ¿Qué es? Es una serie de imágenes que muestran el layout, sin gráfica, de las principales pantallas ¿Para qué sirve? Para especificar el diseño de layout de cada página y comprobar su funcionalidad (usabilidad) ¿Cuándo realizarlo? Al momento de concluir conforme el proceso de sketching ¿Cómo se hace? • Se determinan las pantallas que forman parte de la médula del proyecto (plantillas a prototipar) • Se crean las pantallas utilizando un software de wireframing (Axure, Omnigraffle) • Se validan los resultados con usuarios • Se realizan iteraciones hasta estar convencido de la solución
  70. 70. Prototipado interactivo ¿Qué es? Es una serie de wireframes o sketches que están vinculados entre si (eventualmente tienen funcionalidades básicas también) ¿Para qué sirve? Para testear con usuarios determinados flujos de tareas ¿Cuándo realizarlo? Cuando se tienen listos los wireframes o sketches asociados a un flujo de tarea ¿Cómo se hace? • Se determina la tarea a testear • Se realizan los wireframes o sketches que forman parte de la tarea • Se les agrega funcionalidad • Se ejecuta el proceso de testeo • Se realizan cambios según los resultados obtenidos POP app
  71. 71. Diseño visual ¿Qué es? Es una serie de imágenes que representan el diseño final de la propuesta ¿Para qué sirve? Para evaluar su diseño, como insumo final para el desarrollo ¿Cuándo realizarlo? Cuando se tienen definidos los wireframes de las plantillas ¿Cómo se hace? • Se determinan las pantallas a diseñar • Se le agregan a los wireframes decisiones de color, tipografía, imagen, textura, etc. • Se evalúa su funcionamiento (interactive prototype) • Se realizan mejoras según los resultados
  72. 72. …Y luego qué? Mejoras constantes Ciclos de iteración Supervisión colaborativa de desarrollo Control de calidad Prototipos funcionales User testings Evaluación de KPIs etc…
  73. 73. ¿Y si quiero saber si el proyecto está bien? La usabilidad al rescate
  74. 74. Análisis Heurístico Expert Review User Testing Metrics Analysis Revisión en base a una tabla de comprobación predefinida Revisión detallada realizada por un experto basado en principios de usabilidad Testeo de la interfaz mediante la observación de usuarios ejecutando tareas Análisis de las estadísticas de uso disponible para detectar potenciales puntos de conflicto Métodos de detección, validación y análisis de la Usabilidad Card sorting, Entrevistas, Encuestas, Focus Groups, Social Media Feedback, etc…
  75. 75. User Testing Probando con usuarios
  76. 76. Proceso de user testing Paso a paso Definición de tareas / usuarios Definición de guión Reclutamiento Aplicación Reporte Modificación
  77. 77. ¿Cómo se hace bien? 10 Recomendaciones User Testing
  78. 78. Pensamiento hablado Pídele al usuario que diga lo que piensa. 01
  79. 79. Todo es testeable Mientras se tenga un prototipo y usuarios. 02
  80. 80. Comportamiento > Opinión Créele a lo que ves por sobre lo que escuchas. 03
  81. 81. Se prueban tareas definidas Nunca un paseo libre. 04
  82. 82. Registra los indicadores clave Que luego te permitan comparar performance. 05
  83. 83. Si se puede, testea con usuarios reales Si no se puede, con cualquiera que no esté en el equipo de diseño. 06
  84. 84. Testea y re-testea para comparar Hazlo con usuarios diferentes. 07
  85. 85. No puedes ayudar al tester Nada de frío-frío, caliente-caliente. 08
  86. 86. La culpa NUNCA es del tester Evita que sienta que está rindiendo examen. 09
  87. 87. Entrevista al final para complementar Puedes hacer un cuestionario para complementar tus hallazgos. 10
  88. 88. ¿Qué estás pensando? Describe los pasos que te han llevado hasta acá ¿Qué piensas que ocurrirá ahora? ¿Es esto lo que esperabas que pasara? ¿Eso fue confuso? ¿Te importaría repetir eso? ?
  89. 89. Resultados de un user testing Un buen reporte asegura un proceso exitoso
  90. 90. Resultados de un user testing Un buen reporte asegura un proceso exitoso
  91. 91. Resultados de un user testing
  92. 92. Resultados de un user testing
  93. 93. Resultados de un user testing
  94. 94. Resultados de un user testing
  95. 95. Management de proyectos de UX Cómo proceder cuando tu eres el cliente
  96. 96. ¿Cómo elegir a un proveedor? Metodología Equipo a cargo (calidad / cantidad) Entregables (calidad / claridad / accionabilidad) Tiempos (por etapa / total) Costos Referencias Experiencia en el área
  97. 97. ¿Cuándo encargar un estudio? Cuando mis métricas de conversión son bajas Cuando recibo muchos reclamos/dudas sobre como usar mi sitio web Cuando mi costo por adquisición de cliente es muy alto Cuando mi sitio es parte medular de mi estrategia de negocio Cuando no conozco a mis usuarios y su comportamiento online Cuando voy a empezar un rediseño de mi sitio Cuando necesito compararme a nivel digital con mi competencia Mientras sea un buen negocio…constantemente
  98. 98. ¿Cómo encargar un estudio? Plantear problemática desde los síntomas detectados (idealmente jerarquizados) Solicitar propuesta metodológica detallada / marco presupuestario / planificación Comparar proveedores
  99. 99. ¿Qué esperar/exigir de un estudio? Que lo entiendan quienes lo van a usar Que sea altamente accionable Que me permita tomar decisiones Que esté correctamente documentado Que se ajuste a lo comprometido
  100. 100. Ya para terminar Llegó la hora de decir adiós
  101. 101. ¿Cómo dar en el blanco? Saber/aplicar usabilidad en general Saber/aplicar usabilidad de mi nicho “Copiando” Conocer las especificidades de mi usuario Hacer pruebas con mis usuarios
  102. 102. Libros Web Form Design: Filling in the Blanks Luke Wroblewski Don’t make me think Steve Krug Rocket surgery made easy Steve Krug http://www.goodreads.com/shelf/show/usability
  103. 103. Links http://www.usability.gov/ http://www.usability.gov/what-and-why/user-experience.html http://www.digitalgov.gov/resources/digitalgov-user-experience- program/government-usability-case-studies/ http://kitdigital.gob.cl/ http://www.guiadigital.gob.cl/guia-web http://www.guiadigital.gob.cl/documentos-oficiales https://www.youtube.com/watch?v=JZEwDTz7ctc https://webtoolkit.govt.nz/ http://www.tbs-sct.gc.ca/ws-nw/ http://www.digitalgov.gov/resources/mobile-user-experience-guidelines- and-recommendations/ http://www.digitalgov.gov/2014/04/14/noaa-national-ocean-service- usability-case-study/
  104. 104. ¿Y para adelante? Mobile / Tablet / Responsive / Personalización / Integración multicanal / Animated UI / geolocalización / Gamification / Wearable Computing / Data Visualization / Huella digital móvil
  105. 105. Gracias!  Juan Paulo Madriaza mad@uxd.cl http://mad.uxd.cl cl.linkedin.com/in/madriaza/

×