Experiencia de

Usuario
Pedro Pachas Suárez
 ¿Qué es la Experiencia de Usuario?
• La forma en que se siente una persona usando un producto, sistema o servicio.
• Incluye las percepciones de utilidad, facilidad de uso y eficiencia.
• Satisfacción de las promesas de la marca y la puesta en práctica de sus valores.
¿Cómo lograr que mi sitio web o
aplicación sea fácil de usar?
1. Interacción y Experiencia de
Usuario
 Consistencia

• Se refiere a la estabilidad (se mantiene /no cambia) y coherencia en el

comportamiento de los elementos de una interfaz.
• Los usuarios interactúan con los elementos de un sitio web, basándose en un
conocimiento previo y experiencias de otros sitios
 Perceptibilidad

• Capacidad que tiene un usuario de reconocer a través de sus sentidos o

conocimientos una interacción o un funcionamiento de un producto (web, app, etc…)
• El descubrimiento de las interacciones en un sitio web o aplicación no deben ser
producto de la casualidad. Deben ser percibidas fácilmente por el usuario.
Previsibilidad

Consiste en brindar
suficiente información al
usuario para que sepa
donde interactuar y
pueda intuir que va a
suceder después de la
interacción.
 Simplicidad
“Menos es más”

• Mantener solo elementos que sean relevantes y tengan una función determinada
• Buscar la productividad del usuario y no del sistema.
• Simplicidad visual diferente a Simplicidad funcional
• Agrupación de contenidos y estructura interactiva
Feedback
• El sistema o aplicación brinda
información al usuario como
resultado de una interacción.
• Los feedback consisten en brindar
indicaciones, mensajes o alertas
según el tipo de acción tomada por
el usuario
• El usuario tiene la posibilidad de
confirmar o deshacer la acción
• Debe ser conciso y explicativo.
No me hagas pensar
 Patrones de diseño
• Patrones de diseño
• Son soluciones ya probadas para dar respuesta a problemas
comunes de diseño. Puede ayudar a agilizar y simplificar el
diseño de una interfaz.
• Asegurar que el usuario va a encontrar elementos familiares en
la interfaz que los van a llevar a sentirse mas cómodos y seguros
en la aplicación.
 Diseño Movil
• Como se sujeta el dispositivo
• Las capacidades de las tecnologías disponibles
• Condiciones de Luz, entorno, lugar de uso.
• Mas sensible al entorno del usuario
• Ley del Pulgar
 ¿Qué es un Prototipo?
• Simulación o modelo de productos o servicio.
• Aproximar conceptos de experiencia de usuario, test de
interacciones
• Desde bocetos a productos casi acabados
• Sketch -Wireframes (esquetelo)
• Mockup (Propuestas mas fieles y algún tipo de interacción)
• Wireframe Vs Mockup
Proceso de Diseño centrado en
el Usuario
1. ESTRATEGIA
• Se recopila toda la
información existente y
necesaria para el proyecto
tanto del cliente como de los
usuarios
• Entender las objetivos,
requerimientos y definir el
plan de ejecución del
proyecto.
 Entrevistas con stakeholders
Método de investigación cualitativo que busca información de primera mano de los
involucrado en el proyecto (cliente, dueño del producto, etc)
 Benchmarking
Análisis comparativos de sitios y aplicaciones de la competencia
 Análisis de Métricas
Datos estadísticos recopilados de Google Analitycs para identificar el tipo de usuario
que interactúan en sitio web, tiempo de navegación, procedencia, etc.
 Inventario de Contenidos
Documentación que resume, con una breve y precisa descripción, todo el material
disponible para incluir en un proyecto..
2. INVESTIGACIÓN

• Se centra en la
comprensión del
comportamiento de
usuario, necesidades y
motivaciones
• Se emplean técnicas de
observación, análisis de
tareas y otras
metodologías de
retroalimentación
 Contextual Inquiry (Investigación Contextual)
Permite acercarse al usuario y hacerle preguntas mientras interactúa con el
sitio o aplicación. De esta manera podemos entender mejor las necesidades
que pueda tener.
 Evaluación Heurística
Análisis técnico realizado por especialista que busca identificar los
errores de usabilidad y mostrar oportunidades de optimización.
 10 REGLAS HEURÍSTICAS DE JAKOB NIELSEN
1. Informa sobre el estado del sistema de forma
oportuna.
2. Usa términos, palabras y frases que sean
familiares para los usuarios.
3. Incluye opciones para que los usuarios puedan
deshacer y rehacer las acciones.
4. Aplica las normas y convenciones de los
sistemas conocidos.
5. Previene la aparición de errores entregando la
información necesaria.
6. Evita que el usuario necesite memorizar datos
para realizar una acción.
7. Ofrece opciones para personalizar la interfaz.
8. Simplifica la interfaz lo más posible, evitando
la información irrelevante o decorativa.
9. Usa mensajes de error que expliquen qué falló
y cómo solucionarlo.
10. Entrega documentación fácil de encontrar que
explique las tareas más importantes.
 Cardsorting (organización de tarjetas)
• Es una técnica usada para evaluar cómo los usuarios asocian y agrupan las diferentes
categorías temáticas de un sitio web.
• Permitirá al equipo UX realizar una correcta categorización de los contenidos, sencilla
y entendible por el usuario.
3. ANALISIS

• El objetivo es extraer ideas

de los datos recopilados
durante la fase de
investigación
• Los hallazgos obtenidos
ayudaran a tomar
decisiones sobre la
estructura, organización
del contenido, diseño y
desarrollo del producto.
 User Mindsets (perfiles de usuario)
• Descripción detallada de los atributos de los usuarios (trabajo/empleo, educación,
tareas habituales, edad, etc).
• Permiten al diseñador UX a entender para quien está diseñando su producto.
• Uso de la técnica “personas” (mascara) , que consiste en la creación de individuos
ficticios (arquetipos) que permiten describir patrones de conducta, objetivos y
necesidades.
 ESCENARIOS
María quiere conocer el estado de su
nombramiento para el próximo
periodo y el detalle de los pagos
realizados.
NECESIDADES
Conocer información de su
nombramiento y pagos
FUNCIONALIDADES
Área para revisar la
información personal
COMPORTAMIENO
Cuando María tenga alguna dudad
sobre el estado de su
nombramiento y pagos ingresará al
sitio web y realizará su consulta

Para mejorar sus funciones María
conocer los procedimientos
adecuados a los tramites
correspondientes a sus funciones
María desea esta informada de las
novedades de la institución
Conocer los procesos
respectivos a los tramites
internos para poder realizarlos
según los lineamientos
establecidos y cumplir sus
funciones de manera más
eficiente
Estar informada de la situación
y novedades de la institución
Sección con el listado del
tramites con su información
correspondiente (encargados,
requisitos, etc). Esta sección
puede ser para usuarios
registrados
Blog informativo con
categorías y tags específicos
María podrá consultar en el sitio
web los procesos, requerimientos,
encargados y especificaciones de los
tramites correspondientes a sus
labores.
María podrá ingresar el blog del sitio
web a ver las últimas noticias de la
institución.

User Journeys (escenarios)

Es una descripción narrativa concisa de una o más personas para alcanzar una meta
especifica. El escenario es donde la persona realiza una determinada tarea para cumplir
una meta..
 Storyboards
En los storyboards se representa la interacción entre usuario y producto mediante
ilustración y narrativa, aportando contexto a dicha interacción como situaciones,
ambientes, necesidades, motivaciones o interacciones sociales.
 Sitemaps (mapas del sitio)
Es la estructura de enlaces de páginas web que definirá la navegación de un sitio web.
Puede ser un documento en cualquier formato usado como herramienta de
planificación para el diseño de una web
4. IDEACIÓN,
PROTOTIPADO Y TEST
DE USUARIO
• Es una fase colaborativa (aportes
e ideas de diferentes personas) e
iterativa (ciclos repetitivos para
validar ideas y supuestos) que
busca poner las ideas frente a los
usuarios, obtener sus
comentarios, refinar y repetir.
• Estas ideas están usualmente
representadas en prototipos de
baja fidelidad que permiten
validar la usabilidad, y
funcionalidad del producto.
 Flujos de navegación
En los storyboards se representa la interacción entre usuario y producto mediante
ilustración y narrativa, aportando contexto a dicha interacción como situaciones,
ambientes, necesidades, motivaciones o interacciones sociales.
 Sketch
Un sketch es un dibujo rápido o bosquejo de guía general que no tiene muchos detalles
y que reproduce un concepto, idea, o generalidad de un proyecto de una manera muy
sencilla. Por lo general se realiza a mano con lápiz y borrador, por su facilidad en el
momento de plasmar una base o punto de partida.
 Wireframes
Es una representación estática en baja calidad de un diseño. Se definen las principales
zonas de contenido, elementos HTML, elementos de navegación e interacción con el
usuario . Los wireframe carecen de elementos gráficos, no se especifican tipografías,
colores o cualquier otro elemento que tenga relación con el tema.
 Mockup
Representación gráfica estática de un diseño en calidad media o alta. Representa la
estructura de la información, visualiza el contenido y demuestra las funcionalidades básicas.
Puede incluir paletas de colores, contenido de referencia, tipografía, iconos, etc.
 Prototipos (Lo-Fi y Hi-Fi)
Representación navegable del producto final. Debe permitir que el usuario
experimente interactuando con la interfaz y contenido del proyecto de una manera
similar al producto final. Puede ser de poco detalle o menos atractivo visual (Lo-Fi), o
con gran detalle en el aspecto visual, contenido e interacciones.
 Test de usuario
El objetivo es observar los pasos que siguen los usuarios, en el prototipo del sitio web o
aplicación, para llegar de un punto a otro. Debe participar un facilitador con
experiencia, usuarios del target y observadores. Como resultado debe informarse los
problemas más urgentes a resolver, hallazgos importantes, estadísticas y
recomendaciones.
5. IDEACIÓN,
PROTOTIPADO Y TEST
DE USUARIO
• Es una fase colaborativa (aportes
e ideas de diferentes personas) e
iterativa (ciclos repetitivos para
validar ideas y supuestos) que
busca poner las ideas frente a los
usuarios, obtener sus
comentarios, refinar y repetir.
• Estas ideas están usualmente
representadas en prototipos de
baja fidelidad que permiten
validar la usabilidad, y
funcionalidad del producto.
 Diseño de interacción
En los storyboards se representa la interacción entre usuario y producto mediante
ilustración y narrativa, aportando contexto a dicha interacción como situaciones,
ambientes, necesidades, motivaciones o interacciones sociales.