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.