Ux interfaces persuasivas

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

Gracias!

Juan Paulo Madriazamad@uxd.cl

http://mad.uxd.cl

cl.linkedin.com/in/madriaza/