A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto...
Transcript of A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto...
UXA través del Sprint de diseño
Yahvé Pérez
Jaime Moncho
Se refiere a lo que experimenta el usuario antes,
durante y despue s de interactuar con un
sistema.
UX
La experiencia de usuario surge de la suma de
todas las interacciones con el producto o servicio
de una organizacion y de ello depende su e xito.
Por esta razo n existe una gran demanda de UX
en el sector.
FAIL
El proceso UXInvestigación
Requisitos
ConceptoDiseño
Validación
¿Qué pasa cuando no hay tiempo?
La respuesta: Lean UX
SPRINT6 fases de diseño
UX
Fases del sprint UX
El aprendizaje en el ciclo de desarrollo
El aprendizaje en un Sprint de diseño
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...
FASE 1: Entender
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 usuario3. Diseñador gráfico (visual), llevará a cabo la interfaz gráfica4. Programador frontend, se encarga del desarrollo de la capa vista5. Programador backend, diseña la comunicación de carga de datos6. Arquitecto de información, diseña flujo de contenido del producto7. Analista funcional, define todas las variables funcionales8. Marketing, establece las indicaciones corporativas de
branding, comunicación y marca
5’
FASE 1: Entender
Planificar
Planificar las jornadas
Entender y definir
Divergir y decidir
Prototipar
Probar
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
Entrevistas a lo usuariosRevisar la investigación previa del usuario.
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
Visita de campo
En algunas casos resulta útil visitar a los usuarios en
el contexto donde utilizan el producto.
FASE 1: Entender
Personas
Creamos personas ficticias para reflejar nuestra audiencia.
FASE 1: Entender
Diseño centrado en el usuario
Pensamos en los posibles escenarios en los que se
puede encontrar nuestro usuario.
5’
Foto:
Nombre:
Edad:
Ocupación:
Estado civil:
Uso de dispositivos móviles:
Apps preferidas:
FASE 1: Entender
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ónObjetivos, 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 usuarioTécnica: Transformar las ideas en categorías y definir la estrategia
mejor adecuada al proyecto.
FASE 2: Definir
User Journey
Una 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
HMW
How might we (Y si…) Es una técnica para transformar
puntos dolorosos en oportunidades.
10’
FASE 2: Definir
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
1 (Indispensable)
2 (Importante)
3 (Secundario)
10’
FASE 2: Definir
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.
3’
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
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.
15’
FASE 1: Entender
3 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
Divergir
FASE 3: Divergir
● 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
¿Por qué dibujar?
FASE 3: Divergir
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.
Hay que combinar colaboración
con trabajo individual.
Diseño colaborativo vs individual
FASE 3: Divergir
¿El problema nos recuerda a algo?
Ctrl+C : Remezclar y mejorar
FASE 3: Divergir
mobile-patterns.com
material.uplabs.com
zurb.com/library
ui-patterns.com
collectui.com
pttrns.com
es.pinterest.com
Imagen de butlerhouse.net
FASE 3: Divergir
Panel de diseño: exteriorizar
Siempre hemos tenido miedo de robar grandes ideas.
FASE 3: Divergir
Steve Jobs
Mapa mental: ejercicio5’
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
● 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.
“Crazy 8”: ejercicio8’
FASE 3: Divergir
“8 a 1”: ejercicio10’
● 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 y poco factible?
FASE 4: Decidir
¿demasiado simple? ¿Atractivo pero no cumple su función?
Imagen de interaction-design.org
Principio KISS
FASE 4: Decidir
El equipo decide qué incluirá en el prototipo.Se pueden elegir ideas sueltas y componer un nuevo dibujo.
Imagen de: tandemseven.com
Ejercicio10’
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:
SKETCH (Idea)
Wireframe (Layout)
Vídeo (representando el flujo de navegación o
las acciones concretas)
FASE 5: Prototipar
Mock-up (Estático)
Demo o Prototipo funcional
(Lo más cercano a la realidad)
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
FASE 5: Prototipar
Agrupación de conceptosSe 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
Balsamiq
Crear un artefacto que permita probar las ideas con los
usuarios.
40’
FASE 5: Prototipar
https://balsamiq.com/
40’
FASE 5: Prototipar
Balsamiq
6 Validar
Tipos de validación
Externa - usuario Interna - Equipo/negocio
Test con usuarios (User testing)
unicornux.co
FASE 6: Validar
thenextweb.com
Detectar los
problemas reales o
aciertos con los
usuarios
Detectarlos cuanto
antes. (El tiempo es
crucial!)
Poder corregirlos y
iterar lo antes posible
¿Por qué hacer test con usuarios?
FASE 6: Validar
fakecrow.com
Test de usabilidad formal
FASE 6: Validar
Ventajas
● Control
● Más fácil coleccionar datos
(eyetracking, grabación)
● Poder observar el equipo
Inconvenientes
● Puede ser caro
● Requiere espacio y equipo
● Menos probable la iteración
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 moderadoVentajas
● Barato y rápido
● El usuario está en su entorno
● Más barato para hacer muchas
muestras
● No necesita entrevistador
Inconvenientes
● Unidireccional
● No hay feedback de expresiones
● El usuario se centra “demasiado”
en la usabilidad
remoteresear.ch/tools/
lookback.io/ UserTest.io
TryMyUI
Usabilla
UserTesting
FASE 6: Validar
Test remoto moderadoVentajas
● 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
● 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
5’
FASE 6: Validar
Preparar el test (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.
15’
FASE 6: Validar
Test con usuarios (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.
5’
Validación interna (ejercicio)
FASE 6: Validar
Bonus track: después de lanzar
● Análisis visual (Heatmaps)
● Capturas de sesiones
Herramientas de monitorización
Clicktale.com
Mouseflow.com
inspectlet.com
crazyegg.com
heatmap.me (free plan)
FASE 6: Validar
● Formularios de feedback y
livechats● Encuestas breves
● Encuestas de satisfacción
Feedback directo
Google forms (free)
typeform (free)
getfeedback
Surveymonkey
FASE 6: Validar
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.
Métricas y datos analíticos
Google Analytics (free)
bitly.com (free) Open
web analytics (free)
clicktale.com
KISSmetrics.com
FASE 6: Validar
Test A/B, test multivariante
unbounce.com Google Analytics
Experiments (free)
fivesecondtest.com (free)
KISSmetrics
FASE 6: Validar
Un test A/B consiste en desarrollar y lanzar dos versiones de un mismo elemento y medir cuál funciona mejor.