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é esperan
aprender hoy?
¿Cuáles son sus expectativas?

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?

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
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

Definiciones
Experiencia de usuario/ Usabilidad / Arquitectura de Información /
Diseño de interacción / Diseño de interfaz

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ón
Diseñando interfaces más
fáciles de usar
Validando 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

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

Diseñando engagement
Cómo la psicología puede ayudarnos

Diseñando Engagement
Validación social
Estás más propenso a actuar (o no actuar) si otros ya
lo han hecho

Reciprocidad
Si yo te doy un regalo, tu estás más propenso a
responder positivamente a algo que yo te pido

Concesión
Si primero te pido mucho y luego te pido menos, es
más probable que me des tu aprobación

Confianza
Yo confío en ti si tu confías en mi.
El look & feel genera/rompe la confianza

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

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)

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”

Á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

Pasos muy pequeños
Ayudan a sentir que progresas rápidamente
Sientes que son metas alcanzables
Crees que puedes hacerlo ahora

Minimiza las decisiones
Decidir es difícil, hace que tenga que razonar antes
de actuar, eso disminuye las tasas de conversión

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 distracciones
Cada 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
contenidos
Si 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 alto
Evita 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
“Progressive
disclosure”
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?

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
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
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
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
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
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
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
¿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
(*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)
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
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
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

…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…

¿Y si quiero saber si el
proyecto está bien?
La usabilidad al rescate

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…

User Testing
Probando con usuarios

Proceso de user testing
Paso 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

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 terminar
Llegó 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
Blanks
Luke Wroblewski
Don’t make me think
Steve Krug
Rocket surgery made easy
Steve 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 Madriaza
mad@uxd.cl
http://mad.uxd.cl
cl.linkedin.com/in/madriaza/

Ux interfaces persuasivas

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (16)

Similaire à Ux interfaces persuasivas

Similaire à Ux interfaces persuasivas (20)

Plus de Juan Paulo Madriaza

Plus de Juan Paulo Madriaza (13)

Dernier

Dernier (20)

Ux interfaces persuasivas