a través del sprint de diseño - uv.es a través del sprint de... · balsamiq crear un artefacto...
TRANSCRIPT
![Page 1: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/1.jpg)
UXA través del Sprint de diseño
Yahvé Pérez
Jaime Moncho
![Page 2: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/2.jpg)
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.
![Page 3: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/3.jpg)
FAIL
![Page 4: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/4.jpg)
El proceso UXInvestigación
Requisitos
ConceptoDiseño
Validación
![Page 5: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/5.jpg)
¿Qué pasa cuando no hay tiempo?
![Page 6: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/6.jpg)
La respuesta: Lean UX
![Page 7: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/7.jpg)
SPRINT6 fases de diseño
UX
![Page 8: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/8.jpg)
Fases del sprint UX
![Page 9: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/9.jpg)
El aprendizaje en el ciclo de desarrollo
![Page 10: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/10.jpg)
El aprendizaje en un Sprint de diseño
![Page 11: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/11.jpg)
1 Entender
![Page 12: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/12.jpg)
Entender el problema
Fase inicial de investigación y análisis. Explorar para definir
los objetivos.
USUARIOS NEGOCIO TECNOLOGÍA
FASE 1: Entender
![Page 13: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/13.jpg)
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
![Page 14: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/14.jpg)
Comencemos
Rotuladores, post its, papel, puntos de votación...
FASE 1: Entender
![Page 15: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/15.jpg)
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
![Page 16: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/16.jpg)
Planificar
Planificar las jornadas
Entender y definir
Divergir y decidir
Prototipar
Probar
FASE 1: Entender
![Page 17: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/17.jpg)
Briefing
Es el resumen informativo que define la estrategia
de diseño
FASE 1: Entender
![Page 18: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/18.jpg)
Compartir ubicación en Google Maps
FASE 1: Entender
![Page 19: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/19.jpg)
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
![Page 20: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/20.jpg)
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
![Page 21: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/21.jpg)
Visita de campo
En algunas casos resulta útil visitar a los usuarios en
el contexto donde utilizan el producto.
FASE 1: Entender
![Page 22: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/22.jpg)
Personas
Creamos personas ficticias para reflejar nuestra audiencia.
FASE 1: Entender
![Page 23: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/23.jpg)
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
![Page 24: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/24.jpg)
FASE 1: Entender
![Page 25: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/25.jpg)
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
![Page 26: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/26.jpg)
2 Definir
![Page 27: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/27.jpg)
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
![Page 28: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/28.jpg)
Viaje al centro del usuarioTécnica: Transformar las ideas en categorías y definir la estrategia
mejor adecuada al proyecto.
FASE 2: Definir
![Page 29: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/29.jpg)
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
![Page 30: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/30.jpg)
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
![Page 31: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/31.jpg)
HMW
How might we (Y si…) Es una técnica para transformar
puntos dolorosos en oportunidades.
10’
FASE 2: Definir
![Page 32: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/32.jpg)
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
![Page 33: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/33.jpg)
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
![Page 34: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/34.jpg)
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
![Page 35: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/35.jpg)
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
![Page 36: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/36.jpg)
3 Divergir
![Page 37: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/37.jpg)
● 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
![Page 38: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/38.jpg)
● 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
![Page 39: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/39.jpg)
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
![Page 40: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/40.jpg)
¿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
![Page 41: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/41.jpg)
Imagen de butlerhouse.net
FASE 3: Divergir
Panel de diseño: exteriorizar
![Page 42: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/42.jpg)
Siempre hemos tenido miedo de robar grandes ideas.
FASE 3: Divergir
Steve Jobs
![Page 43: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/43.jpg)
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
![Page 44: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/44.jpg)
● 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
![Page 45: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/45.jpg)
“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
![Page 46: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/46.jpg)
4. Decidir
![Page 47: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/47.jpg)
MVP (Mínimo producto viable)
FASE 4: Decidir
![Page 48: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/48.jpg)
MVP (Mínimo producto viable)
¿Es demasiado complejo y poco factible?
FASE 4: Decidir
¿demasiado simple? ¿Atractivo pero no cumple su función?
![Page 49: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/49.jpg)
Imagen de interaction-design.org
Principio KISS
FASE 4: Decidir
![Page 50: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/50.jpg)
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
![Page 51: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/51.jpg)
5 Prototipar
![Page 52: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/52.jpg)
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
![Page 53: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/53.jpg)
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)
![Page 54: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/54.jpg)
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
![Page 55: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/55.jpg)
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
![Page 56: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/56.jpg)
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
![Page 57: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/57.jpg)
FASE 5: Prototipar
![Page 58: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/58.jpg)
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
![Page 59: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/59.jpg)
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
![Page 60: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/60.jpg)
Balsamiq
Crear un artefacto que permita probar las ideas con los
usuarios.
40’
FASE 5: Prototipar
https://balsamiq.com/
![Page 61: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/61.jpg)
40’
FASE 5: Prototipar
Balsamiq
![Page 62: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/62.jpg)
6 Validar
![Page 63: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/63.jpg)
Tipos de validación
Externa - usuario Interna - Equipo/negocio
![Page 64: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/64.jpg)
Test con usuarios (User testing)
unicornux.co
FASE 6: Validar
thenextweb.com
![Page 65: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/65.jpg)
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
![Page 66: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/66.jpg)
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
![Page 67: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/67.jpg)
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
![Page 68: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/68.jpg)
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
![Page 69: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/69.jpg)
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
![Page 70: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/70.jpg)
● 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)
![Page 71: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/71.jpg)
• 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)
![Page 72: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/72.jpg)
¿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
![Page 73: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/73.jpg)
Bonus track: después de lanzar
![Page 74: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/74.jpg)
● 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
![Page 75: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/75.jpg)
● Formularios de feedback y
livechats● Encuestas breves
● Encuestas de satisfacción
Feedback directo
Google forms (free)
typeform (free)
getfeedback
Surveymonkey
FASE 6: Validar
![Page 76: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/76.jpg)
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
![Page 77: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/77.jpg)
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.
![Page 78: A través del Sprint de diseño - uv.es a través del Sprint de... · Balsamiq Crear un artefacto que permita probar las ideas con los usuarios. 40](https://reader034.vdocuments.co/reader034/viewer/2022042605/5acbfe167f8b9a6a678bcea5/html5/thumbnails/78.jpg)