Embed Size (px)
Citation preview
User Experience
Módulo tendencias
Marketing Digital UDD
CLASE
Interfaces Persuasivas
¿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.
¿Qué esperanaprender hoy?
¿Cuáles son sus expectativas?
Probablemente ya gastaste un montón de dinero y esfuerzo en aumentar las visitas a tu sitio, pero hay mucha de esa gente que se va a ir sin comprar…
No basta con traer usuarios a tu sitio web, necesitas convertir esos visitantes en clientes
…el UX sabe cómo.
¿Para qué me sirve este curso?
El ROI del UX
http://humanfactors.com/coolstuff/roi_increased_conversion_rate.asphttp://humanfactors.com/coolstuff/roi.asp
¿Dónde puede ayudar el UX?
http://humanfactors.com/coolstuff/roi.asp
Aumentar la productividad•Aumentar la eficiencia en tres segundos para una página determinada
Reducir el uso de call centers•Reducir los llamados al callcenter un 25%
Aumentar las tasas de conversión•Aumentar la tasa de conversión en un 5%
Reducir los costos de capacitación•Reducir las solicitudes de capacitación en un 40%
Disminuir la tasa de abandono•Reducir la tasa de abandono en la página de pago en un 2%
Suavizar la curva de aprendizaje•Reducir el tiempo necesario para aprender en 4 horas
DefinicionesExperiencia de usuario/ Usabilidad / Arquitectura de Información /
Diseño de interacción / Diseño de interfaz
Dan Saffer (2009)
Magnus Revang (2007)
Peter Morville (2004)
Stephen P. Anderson (2011)
Jesse James Garrett (2010)
Usabilidad“Disciplina orientada a lograr que las cosas sean más fáciles de usar”
¿Para qué?“Porque cuando algo es más difícil de usar, no lo uso tanto”
Steve Krug
¿Y cómo?
Diseño / ValidaciónDiseñando interfaces más
fáciles de usarValidando los diseños mediante la revisión
¿Cómo diseñar una interfaz más fácil de usar?
“Muy fácil”…
Haz que funcione como algo que tu usuario ya sabe usar
Televisores y microondas
USABILIDAD4 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
Diseñando engagementCómo la psicología puede ayudarnos
Diseñando Engagement
Validación socialEstás más propenso a actuar (o no actuar) si otros ya
lo han hecho
Diseñando Engagement
ReciprocidadSi yo te doy un regalo, tu estás más propenso a
responder positivamente a algo que yo te pido
Diseñando Engagement
ConcesiónSi primero te pido mucho y luego te pido menos, es
más probable que me des tu aprobación
Diseñando Engagement
ConfianzaYo confío en ti si tu confías en mi.
El look & feel genera/rompe la confianza
Diseñando Engagement
CompetenciaSi compites contra otros es más probable que aumente
tu engagementEs más motivante si hay 10 o menos rivales
Tiene más efecto en hombres que en mujeres
Diseñando Engagement
Cantidad de opcionesLos 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)
Diseñando Engagement
Miedo a la pérdidaSi siento que puedo perder algo, me siento más
motivado a la acción“Sólo quedan 2 unidades”
Diseñando Engagement
Área fusiforme facialEs 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
Diseñando Engagement
Pasos muy pequeñosAyudan a sentir que progresas rápidamente
Sientes que son metas alcanzables
Crees que puedes hacerlo ahora
Diseñando Engagement
Minimiza las decisionesDecidir es difícil, hace que tenga que razonar antes
de actuar, eso disminuye las tasas de conversión
Diseñando Engagement
Muestra el progreso constantemente
Dónde estoy, cuánto he avanzado, cuánto me falta
Recomendaciones de usabilidad
Cómo los mandamientos, pero de la usabilidad
Formularios
Usa labels alineados verticalmente
Son más fáciles de completar
Formularios
Un formulario debe ser una conversación
Debe tener una secuencia y ritmo lógico
Formularios
Elige bien el lenguaje que ocupas (y cuánto ocupas)
Debe estar en sintonía con tu usuario
Formularios
Evita las distraccionesCada elemento sobrante daña la experiencia
Formularios
Nunca más de una columna
Excepto Nombre/apellido y Región/comuna
Formularios
Para cada interacción su patrón
La creatividad no es una buena idea acá
Formularios
Acciones primarias > acciones secundarias
Nunca deben ser parecidas
Formularios
Evita las acciones genéricas
Es mejor un “pagar” que un “enviar”
Formularios
La ayuda debe ser contextual
De nada sirve si no está a la mano
Formularios
La validación debe darse cuanto antes
Ojalá en tiempo real
Formularios
Nunca los labels dentro de los inputs
Se desaparecen al clickear
Formularios
Agrupa los contenidosSi los campos son muchos
Formularios
Que lo llenen como quieran
Tu te encargas del formato
Formularios
El aire mejora el entendimiento
El formulario parecerá más simple
Formularios
Cuida el ancho y el altoEvita la claustrofobia
Formularios
Permite el uso del “Tab”Para pasearse entre campos
Formularios
Permite los “smart defaults”
Para ahorrarse tiempo en el llenado
Formularios
Usa el “Progressivedisclosure”Para no saturar al usuario
Formularios
Usa la animación para comunicar
Puede servir para entender mejor lo que sucede
Formularios
Nunca borres el avance del usuario
Nada peor que volver a empezar el formulario
Navegación
Organiza y etiqueta como lo harían tus usuarios
No como lo hacen en la institución(aprende de las búsquedas)
Navegación
Usa links con texto descriptivo
No más “haga click aquí”
Navegación
El desplegable debe esperar
0.5 segundos antes de aparecer para no molestar la navegación
Formularios
Ejercicio!Qué errores ven en los siguientes formularios:
Metodologías y entregables
Cuando contratas a un especialista, esto es lo que recibes
¿Cómo se debe diseñar un sitio complejo?
¿Y no morir en el intento?
UCD Waterfall
UCD Waterfall
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
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
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
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
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
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
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
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
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
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
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
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 (interactiveprototype)
• Se realizan mejoras según los resultados
…Y luego qué?
Mejoras constantesCiclos de iteración
Supervisión colaborativa de desarrolloControl de calidad
Prototipos funcionalesUser testings
Evaluación de KPIsetc…
¿Y si quiero saber si el proyecto está bien?
La usabilidad al rescate
Análisis Heurístico
Expert Review
User Testing
MetricsAnalysis
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…
User TestingProbando con usuarios
Proceso de user testingPaso a paso
Definición de tareas / usuarios
Definición de guión
Reclutamiento Aplicación Reporte Modificación
¿Cómo se hace bien?
10 Recomendaciones
User Testing
Pensamiento hablado
Pídele al usuario que diga lo que piensa.
01
Todo es testeable
Mientras se tenga un prototipo y usuarios.
02
Comportamiento > Opinión
Créele a lo que ves por sobre lo que escuchas.
03
Se prueban tareas definidas
Nunca un paseo libre.
04
Registra los indicadores clave
Que luego te permitan comparar performance.
05
Si se puede, testea con usuarios reales
Si no se puede, con cualquiera que no esté en el equipo de diseño.
06
Testea y re-testea para comparar
Hazlo con usuarios diferentes.
07
No puedes ayudar al tester
Nada de frío-frío, caliente-caliente.
08
La culpa NUNCA es del tester
Evita que sienta que está rindiendo examen.
09
Entrevista al final para complementar
Puedes hacer un cuestionario para complementar tus hallazgos.
10
¿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?
?
Resultados de un user testing
Un buen reporte asegura un proceso exitoso
Resultados de un user testing
Un buen reporte asegura un proceso exitoso
Resultados de un user testing
Resultados de un user testing
Resultados de un user testing
Resultados de un user testing
Management de proyectos de UX
Cómo proceder cuando tu eres el cliente
¿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
¿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
¿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
¿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
Ya para terminarLlegó la hora de decir adiós
¿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
Libros
Web Form Design: Filling in the BlanksLuke Wroblewski
Don’t make me thinkSteve Krug
Rocket surgery made easySteve Krug
http://www.goodreads.com/shelf/show/usability
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/
¿Y para adelante?
Mobile / Tablet / Responsive / Personalización / Integración multicanal / Animated UI / geolocalización / Gamification / Wearable Computing /
Data Visualization / Huella digital móvil
![[GUTS-RS] Testar Interfaces com UX](https://img.dokumen.tips/doc/110x75/58ab60741a28abbc2a8b57fb/guts-rs-testar-interfaces-com-ux.jpg)
