Вы находитесь на странице: 1из 83

UX

A través del Sprint de diseño

Yasmina Morán
Ernesto Gonzalo
UX
Se refiere a lo que experimenta el usuario antes,
durante y después de interactuar con un
sistema.
La experiencia de usuario surge de la suma de
todas las interacciones con el producto o servicio
de una organización y de ello depende su éxito.
Por esta razón existe una gran demanda de UX
en el sector.
FAIL
El proceso UX
Investigación

Validación Requisitos

Diseño Concepto
¿Qué pasa cuando no hay tiempo?
La respuesta: Lean UX
SPRINT
6 fases de diseño UX
El aprendizaje en el ciclo de desarrollo
El aprendizaje en un Sprint de diseño
Fases del sprint UX
1 Entender
Entender el problema
Fase inicial de investigación y análisis.
Explorar para definir los objetivos.

USUARIOS NEGOCIO TECNOLOGÍA

FASE 1: Entender
El caos
Nos enfrentamos al problema.
Toma de requisitos para alineamos los objetivos de negocio
al usuario, audiencia o target.
Necesitamos la colaboración de todos los implicados.

FASE 1: Entender
Comencemos
Rotuladores, post its, papel, puntos de votación,
temporizador y una campanilla.

FASE 1: Entender
El café
es útil pero
no necesario
FASE 1: Entender
5’

Equipo
Los equipos ideales se componen de 5-8 personas.

1. Project owner, responsable del proyecto (visión de negocio)


2. UX, establece la comunicación entre el sistema y el usuario
3. Diseñador gráfico (visual), llevará a cabo la interfaz gráfica
4. Programador frontend, se encarga del desarrollo de la capa vista
5. Programador backend, diseña la comunicación de carga de datos
6. Arquitecto de información, diseña flujo de contenido del producto
7. Analista funcional, define todas las variables funcionales
8. Marketing, establece las indicaciones corporativas de branding,
comunicación y marca
FASE 1: Entender
Planificar
Planificar las jornadas

Entender y definir: 45 min

Divergir y decidir: 45 min

Prototipar: 45 min

Probar: 45 min

FASE 1: Entender
Briefing
Es el resumen informativo que define la estrategia de
diseño

FASE 1: Entender
Compartir ubicación en Google Maps

FASE 1: Entender
Benchmarking
Qué otros productos o servicios pueden inspirar al equipo
de trabajo. Un breve resumen de 3 a 10 proyectos similares
puede ser de gran ayuda. (Google Play / Apple Store).

collectui.com
androidux.com
material.uplabs.com
zurb.com/library
pttrns.com
es.pinterest.com

FASE 1: Entender
Evaluaciones heurísticas
Revisar la investigación previa del usuario.
Entrevistas a los usuarios. Los usuarios serán los últimos en juzgar si nuestro producto es
bueno o no. Los entrevistadores deben preguntar sobre cómo los usuarios utilizan el
producto, qué les gusta y qué no?.
A la hora de diseñar un producto las entrevistas pueden enfocar las formas alternativas
que emplean los usuarios para resolver el problema.

FASE 1: Entender
Personas
Creamos personas ficticias para reflejar nuestra audiencia.

FASE 1: Entender
5’

Diseño centrado en el usuario


Pensamos en los posibles escenarios en los que se puede
encontrar nuestro usuario.

Foto:
Nombre:
Edad:
Ocupación:
Estado civil:
Uso de dispositivos móviles:
Apps preferidas:

FASE 1: Entender
FASE 1: Entender
Visita de campo
En algunas casos resulta útil visitar a los usuarios en el
contexto donde utilizan el producto.

FASE 1: Entender
Mapa de negocio
1. Listar todos los posible roles del
proyecto / 5 min
2. Agrupar los roles en secciones
significativas / 2 min
3. Decidir qué roles se diseñarán en el
sprint y en qué orden.
4. Planificar actividades y dividirlas
por grupos de trabajo.

FASE 1: Entender
2 Definir
Definición
Objetivos, requerimientos, impedimentos (limitaciones técnicas y
visuales), restricciones, briefing, investigación del usuario.
Sintetizar eficazmente la investigación de los problemas y una dirección
de diseño de experiencia de usuario que refleje la necesidad primaria
del público objetivo.

FASE 2: Definir
Viaje al centro del usuario
Técnica: Transformar las ideas en categorías y definir la estrategia mejor
adecuada al proyecto.

FASE 2: Definir
User Journey
Unas de forma de definir el problema es hacer un “User
Journey”, es un mapa que enumera todas las etapas por las
que pasa alguien hasta convertirse en un usuario experto.

FASE 2: Definir
User Journey
Se escribe en la pizarra un recorrido por pasos específicos
del usuario hasta llegar a los objetivos previstos de la
aplicación.

FASE 2: Definir
10’

HMW
How might we (Y si…) Es una técnica para transformar
puntos dolorosos en oportunidades.

FASE 2: Definir
10’

Método KJ o diagrama de afinidad


En una pizarra (por grupo de problemas) cada equipo cuelga
una idea por post-it para crear un cerebro visual del equipo.

Prioridades
0 (Indispensable)
1 (Importante)
2 (Secundario)

FASE 2: Definir
3’

Definición de palabras clave


Cuales son las tres palabras que te gustaría que describan el
producto para los usuarios? Fácil, divertido, poderoso,
intuitivo, útil, positivo…

Individualmente se debe hacer una lista con los posibles


principios del diseño y luego seleccionar los más
representativos en grupo.

FASE 2: Definir
El primer tweet
Imagina que es el momento de lanzar el producto. Cómo
sería el primer tweet para lanzar el comunicado.
Escribir el primer comunicado del producto en 140
caracteres o menos puede ayudar al equipo a no perder el
foco de la estrategia.

FASE 2: Definir
15’

Objetivos en 360
Resumir los aprendizajes y las primeras ideas en posti-ts.
Conversaciones relámpago en 360 grados.
Identificar los casos principales de uso.
El equipo continuará aprendiendo y decidiendo en las
etapas posteriores.

FASE 1: Entender
3 Divergir
Divergir
● Búsqueda de alternativas o
posibilidades creativas y
diferentes para la resolución de
un problema.
● No hay malas ideas ni crítica
● Se aprende y ejercita
● Herramientas: papel y boli

FASE 3: Divergir
¿Por qué dibujar?
● Es más rápido
● Todo el mundo puede
contribuir
● Los dibujos son prescindibles
● Permiten un grado de
abstracción superior a
soluciones más acabados

FASE 3: Divergir
Diseño colaborativo vs individual

En un proceso de diseño
colaborativo un equipo entero (sin
habilidades especiales de diseño)
puede participar en el diseño
aportando sus diferentes puntos de
vista.

Combinar colaboración + trabajo


individual
FASE 3: Divergir
Panel de diseño: exteriorizar Imagen de butlerhouse.net

FASE 3: Divergir
5’

Ctrl+C : Remezclar y mejorar

mobile-patterns.com
material.uplabs.com
zurb.com/library
ui-patterns.com
collectui.com
pttrns.com
es.pinterest.com ¿El problema nos recuerda a algo?

FASE 3: Divergir
Siempre hemos tenido miedo de robar grandes ideas.

Steve Jobs

FASE 3: Divergir
Tomar notas
Ahora que hemos recabado información en las fases
anteriores es momento de recopilar y anotar lo que
consideramos más importante para tenerlo presente.

FASE 3: Divergir
5’

Mapa mental: ejercicio


Con las notas que hemos tomado y las ideas que vayamos
teniendo, podemos hacer una especie de “mapa mental”.
Puedes escribir palabras, dibujar… La idea es sacar las
cosas de tu cabeza al papel.

FASE 3: Divergir
8’

“Crazy 8”: ejercicio

● El objetivo es ir más
allá de la idea inicial.
● Si te atascas, no
importa, prueba a
repetir la idea anterior
introduciendo una
variación.

FASE 3: Divergir
10’

“8 a 1”: ejercicio

● Tomamos la mejor
solución o una
combinación de ellas
● La desarrollamos en un
storyboard de 3 fases.

FASE 3: Divergir
4. Decidir
MVP (Mínimo producto viable)

FASE 4: Decidir
MVP (Mínimo producto viable)

¿Es demasiado complejo ¿demasiado simple? ¿Atractivo pero no


y poco factible? cumple su función?

FASE 4: Decidir
Principio KISS

Imagen de interaction-design.org

FASE 4: Decidir
10’

Ejercicio
El equipo decide qué incluirá en el prototipo.
Se pueden elegir ideas sueltas y componer un nuevo dibujo.

Imagen de: tandemseven.com

FASE 4: Decidir
5 Prototipar
Prototipo
Un prototipo es algo que hace que tus ideas parezcan “lo
suficientemente reales” para luego recoger un feedback
acorde a las sensaciones del usuario. Tiene naturaleza de
iteración.

FASE 5: Prototipar
Tipología
Un proyecto proyecto se puede representar como:
Vídeo (representando el flujo de navegación o las
acciones concretas)
SKETCH (Idea)

Mock-up (Estático)

Wireframe (Layout) Demo o Prototipo funcional

(Lo más cercano a la realidad)

FASE 5: Prototipar
Arquitectura de la información
Es la ciencia de organizar los espacios en estructuras de
navegación con el fin de ayudar a los usuarios a satisfacer
sus necesidades de información.

FASE 5: Prototipar
Flujo de navegación
La navegación se basa en la relación entre el sistema y las
personas.

● Se determinan las necesidades del usuario: tareas y


subtareas habituales, ocasionales y excepcionales.

● Identificar tipos de usuario y roles dentro del sitio.

● Identificar las interacciones del proceso.

FASE 5: Prototipar
Card sorting
El card sorting es una técnica usada en el diseño de
experiencia de usuario, para evaluar un árbol de categorías,
es decir la estructura de la información de una web.

● Es una prueba sencilla de realizar que nos da


mucha información sobre la opinión de los
usuarios acerca del rotulado de los nombres que
vamos a dar a la estructura jerárquica de un sitio
web.

FASE 5: Prototipar
Agrupación de conceptos
Se basa en la observación de cómo los usuarios agrupan y asocian entre
sí un número predeterminado de tarjetas etiquetadas con las diferentes
categorías temáticas del sitio web.

FASE 5: Prototipar
Tipología
■ Darles el nombre de los elementos principales bajo los
cuales tienen que agrupar las tarjetas.
■ No darles ese nombre y dejar la tarjeta en blanco para
que los usuarios lo nombren.
■ Indicarles el número de grupos que tienen que hacer.

FASE 5: Prototipar
30’

Popapp
Crear un artefacto que permita probar las ideas con los
usuarios.

https://popapp.in
FASE 5: Prototipar
30’
Download Popapp

FASE 5: Prototipar
30’

Compartir ubicación en Google Maps

FASE 5: Prototipar
30’

Crear documento “Google map”

FASE 5: Prototipar
30’

Capturar los bocetos

FASE 5: Prototipar
30’

Diseñar interacción del prototipo

FASE 5: Prototipar
6 Validar
Tipos de validación

Externa - usuario Interna - Equipo/negocio


Test con usuarios (User testing)

unicornux.co thenextweb.com

FASE 6: Validar
¿Por qué hacer test con usuarios?

Detectar los Detectarlos cuanto Poder corregirlos y


problemas reales o antes. (El tiempo es iterar lo antes posible
aciertos con los crucial!)
usuarios

FASE 6: Validar
Test de usabilidad formal
Ventajas
● Control
● Más fácil coleccionar datos
(eyetracking, grabación)
● Poder observar el equipo
fakecrow.com Inconvenientes
● Puede ser caro
● Requiere espacio y equipo
● Menos probable la iteración

FASE 6: Validar
Guerrilla testing o test informal
Ventajas
● Muy asequible: no requiere
equipación ni mucho tiempo
● Portable
● Permite encontrar errores y
arreglarlos con rapidez
Inconvenientes
● Subjetividad del moderador
● Menos controlado que el de
laboratorio.

FASE 6: Validar
Test remoto no moderado
remoteresear.ch/tools/
Ventajas
lookback.io/
UserTest.io ● Barato y rápido
TryMyUI ● El usuario está en su entorno
Usabilla ● Más barato para hacer muchas
UserTesting
muestras
● No necesita entrevistador
Inconvenientes
● Unidireccional
● No hay feedback de expresiones
● El usuario se centra “demasiado”
en la usabilidad

FASE 6: Validar
Test remoto moderado
Ventajas
● El usuario está en su entorno
● Mayor control al poder guiar
● Se puede recoger feedback
“humano”
Inconvenientes
● Más costoso
● Requiere mayor esfuerzo
● Requiere un moderador
● Válido para muestras pequeñas

FASE 6: Validar
5’

Preparar el test (Ejercicio)

● Seleccionaremos entre 2 y 3 usuarios (6 y 20 en un sprint)


● Recordamos los objetivos de nuestro diseño.
● Haremos una lista de una o dos tareas (tareas de usabilidad) que los usuarios
tendrán que realizar. Todo lo que presentes al usuario tendrá un impacto.
Intenta mezclar:
○ Tareas cerradas: Claramente definidas- resultados cuantitivos
○ Tareas abiertas: Pueden ser resueltas de varias maneras -resultados
cualitativos y inesperados

FASE 6: Validar
15’

Test con usuarios (Ejercicio)

• Todos los usuarios deben tomar notas y registrar lo que sienten o han
aprendido. ¿Les ha resultado difícil, fácil, divertido...? ¿Creen que es una buena
solución?
• Nosotros tomaremos notas de sus reacciones.
• Se unifican todas las ideas y con ello deberíamos sacar conclusiones para en el
futuro iterar y mejorar los diseños.

FASE 6: Validar
5’

Validación interna (ejercicio)

¿Es factible?
¿Se cumplen las palabras clave y el propósito del
diseño?
Explicar cómo se ha procedido y la solución.

FASE 6: Validar
Bonus track: después de lanzar
Herramientas de monitorización
● Análisis visual (Heatmaps)
● Capturas de sesiones

Clicktale.com
Mouseflow.com
inspectlet.com
crazyegg.com
heatmap.me (free plan)

FASE 6: Validar
Feedback directo
● Formularios de feedback y
livechats
● Encuestas breves
● Encuestas de satisfacción

Google forms (free)


typeform (free)
getfeedback
Surveymonkey

FASE 6: Validar
Métricas y datos analíticos
Análisis a gran escala. Llaman
la atención sobre lo que no va
bien, pero no dicen bien el
qué o cómo resolverlo.

Google Analytics (free)


bitly.com (free)
Open web analytics (free)
clicktale.com
KISSmetrics.com

FASE 6: Validar
Test A/B, test multivariante
Un test A/B consiste en desarrollar y
lanzar dos versiones de un mismo
elemento y medir cuál funciona
mejor.

unbounce.com
Google Analytics Experiments (free)
fivesecondtest.com (free)
KISSmetrics

FASE 6: Validar