Workshop UX Design de Treze y José Antonio López sobre Experiencia de Usuario y Metodologías Ágiles en desarrollo de proyectos.

1. Taller UX Design
La experiencia no se diseña, sucede.
UIXCODE
1
WORKSHOP
UX DESIGN

2. Taller UX Design
2
Designer and front end developer.
Optimization of user experience (UX) and
user interface (UI).
José Antonio Sánchez — Treze
CREATIVE & UX DESIGNER
Project Manager & Senior Software Engineer
Business Development and
Certified ScrumMaster.
José Antonio López — Vemovi
PRODUCTION MANAGER & UX DESIGNER
linkedin.com/in/treze linkedin.com/in/jalopezsuarez
UIXCODE
uixcode.com

3. Taller UX Design
3
Adaptar la forma de trabajo a las condiciones del
proyecto, consiguiendo flexibilidad y eficiencia
METODOLOGÍAS ÁGILES, EL PROCESO UIX
Prototipado workflow, sketching y wireframing
Introducción a sketch, adobe xd, marvel y mockup
HERRAMIENTAS UX/UI
Por naturaleza somos curiosos y buscamos un
equilibrio entre lo que conocemos y lo que es incierto
OBSERVACIONES DE INTERFACES
Invertir en UX es la mejor opción que tienen los
productos para diferenciarse de la competencia
MINIMUM VIABLE PRODUCT
A las personas nos tranquilizan los patrones, cuanto
más organización mejor nos sentimos.
DISEÑO Y PROTOTIPOS
Es casi imposible trabajar en la experiencia de usuario
sin tener en cuenta la interfaz de usuario, y viceversa
DISPOSITIVOS Y ENTORNOS
La experiencia de usuario está en evolución debido a la
experiencia que adquirimos con el uso de la tecnología
LO QUE REALMENTE IMPORTA
El diseño emocional está orientado a las personas, la
emoción es repentina, intensa y de corta duración
DISEÑANDO PARA PERSONAS
06
05
08
07
02
01
04
03

4. Taller UX Design
4
Lo que realmente
IMPORTA
Los patrones de interacción básicos se van
heredando y muchos usuarios ya han nacido
nativos digitales, no nos tendremos que
detener tanto en explicar las cosas.
CARMEN HEVIA
01

5. Taller UX Design
5
Arquitectura de
la información (AI)
La arquitectura de la información determina la organización de
la información con el objetivo de motivar al usuario a explorar
los contenidos y funcionalidades. Una correcta arquitectura de
información es aquella que permite al usuario encontrar la
información que necesita.
Tres aspectos:
1. El Contexto
2. El Contenido
3. El Usuario

6. Taller UX Design
6
Contexto
del usuario
No podemos predecir cómo una persona usará un
producto ya que la depende de muchos factores.
Pero el contexto del usuario tiene que tenerse en cuenta
antes del diseño y las restricciones que conlleva son
positivas para mejorar la experiencia de usuario. Y así
poder estar más cerca de lo que realmente importa.
Experiencia
presente
MOTIVACIÓN CONTEXTO
ACTION
Expectativas
Experiencia previa
Más experiencia
Expect. Diferentes
DONALD NORMAN

7. Taller UX Design
7
III. CONTEXTO
Ya tenemos un menú adaptado a
nuestro grupo de usuarios, ahora
debemos considerar el contexto en que
se realizará la cena.
Puedes elegir entre tres lugares:
• Picnic durante una noche de verano.
• En un restaurante para la ocasión.
• En la casa de uno de tus amigos.
Comentar cómo afecta el lugar, y realicen cambios en
los platos para mejorar la experiencia de usuario del
grupo. Una vez más intenten hacer los menores
cambios posibles.
I. SOLUCIÓN
Vamos a preparar una cena para los
amigos y tenemos que elaborar tres
platos de comida: primero, segundo y
postre.
Crea un equipo mínimo de tres personas para
elaborar el menú, puedes colocar cada elaboración
en un pósit. Dedica 5 minutos para cada tarea.
II. USUARIO
Ahora hay que considerar si el menú es
adecuado para un grupo de usuarios en
concreto.
Puedes elegir entre tres grupos:
• Niños y niñas de 8 años.
• Estudiantes de 18 años.
• Parejas recién casadas y sin hijos.
El equipo debe realizar los cambios necesarios para
ofrecerles una mejor experiencia. No eliminen los
primeros pósit, haga las modificaciones encima e
intente hacer los menores cambios posibles.
CONTEXTO DEL USUARIO
Ejercicio

8. Taller UX Design
8
Ligeros cambios
que cumplen
los requisitos
Ahora podemos analizar como el menú principal que
teníamos pensado como la solución ha sufrido ligeros
cambios con el fin de mejorar la experiencia de usuario
y sin embargo sigue cumpliendo con todos los requisitos.
Además, durante la elección de los grupos o del lugar
seguro que han aparecido estereotipos habituales como
la comida para niños, la comida rápida para el picnic o
los platos más elaborados de un restaurante.
CONCLUSIÓN EJERCICIO 1

9. Taller UX Design
9
Cuando diseñamos un interfaz de usuario intentamos
conducir al usuario, determinando las áreas de acción
u opciones de qué dispondrá en cada pantalla y cómo
responderá el producto a cada una de sus acciones.
Hay que tener en cuenta las brechas de interacción que
ocurre cuando el usuario no es capaz de relacionar qué
pretende hacer y cómo llevar a cabo la acción.
Diseño de
interacción
Un buen wireframe es aquel que comunica
decisiones de diseño de forma precisa y
eficaz a su audiencia.

10. Taller UX Design
10
Usabilidad es
facilidad de uso
La usabilidad es un atributo de calidad de un producto que
se refiere sencillamente a su facilidad de uso.
¿Cómo de difícil resulta al usuario realizar
tareas básicas?
¿Cuánto tardan en realizar las tareas?
¿Cuántos errores comente el usuario?,
¿Cómo rectifica?
El atractivo visual de
un producto hace
que el usuario lo
perciba como más
fácil de usar, aún
cuando no lo es

11. Taller UX Design
11
Diseño y
Prototipado
Si nos vemos obligados a explicar como usar
algo, probablemente es porque se
encuentre mal diseñado.
Hassan Montero, Y.
02

12. Taller UX Design
12
El espacio y la composición son
fundamentales para hacer las interfaces
atractivas y sencillas
MARGIN/PADDING
Espacios
Recuerda que cuando algo falla, estamos
dirigiendo el mensaje a personas
ERROR/OOPS
Excepciones
Los colores resultan muy útiles para reforzar
el significado de elementos de la interfaz
RGBA/HEX
Colores
Los siguientes principios se centran en la confección de mensajes visuales, que junto al espaciado
y la composición proporcionan a los usuarios una clara visión de la interacción
Principios del Diseño
DISEÑO Y PROTOTIPOS

13. Taller UX Design
13
Uso del color
en interfaces I
Tiene una importante función comunicativa y utilizarlo de
forma incorrecta puede llevar a problemas de usabilidad.
Esto lo vemos en botones de acción, cuando vemos un botón
rojo sabemos que algo va mal, cuando es un botón verde
podemos continuar y si es un botón blanco nos genera dudas.
color: #FF0000;
color: rgba(0,0,0,0.8);
color: rgb(255,0,0);
color: red;
Una buena práctica es diseñar en blanco y negro,
para añadir el color al final.
Creativedash

14. Taller UX Design
14
Uso del color
en interfaces II
Número de Colores
Limita la paleta de colores usa alrededor de cinco es suficiente,
en función de la complejidad del diseño.
• http://www.materialpalette.com
• https://flatuicolors.com
• http://brandcolors.net
• https://coolors.co
Combinaciones de Color
Utiliza colores complementarios. También es muy común utilizar
combinaciones de colores que se hallan en la naturaleza.
Simbolismo
Cada cultura dota a los colores significados distintos. Por lo tanto, ten
en cuenta las combinaciones que utiliza según el público de destino.
No dejes que el color distraiga a los usuarios.

15. Taller UX Design
15
Espacios,
usa el blanco
El espacio en blanco permite priorizar el contenido haciendo
que se lea fácilmente. Da orden a los elementos de la
interfaz y es esencial para conseguir que un diseño sea
armónico y equilibrado.
Utiliza bien los márgenes, paddings, letter spacing,
interlineado y el espaciado entre columnas.
Igor Chebotarev Gal Shir

16. Taller UX Design
16
Esta es una de las pantallas más negativas y con un
buen uso del diseño emocional podemos conseguir que
un error se convierta en una experiencia, en algo
atractivo que invite a continuar navegando.
Tener en cuenta cuando cargamos un listado de
información previa a la selección de algún filtro o a la
acción búsqueda
SIN RESULTADOS, NO USAR EL ‘0’
Proporciona información previa suficiente referente a
advertencias y utiliza un lenguaje sencillo para
humanos
MENSAJES Y FALLOS
Nuestros productos contienen errores y forman parte
del mismo, hay que minimizar el sentimiento negativo
ERROR 404
Es muy importante cuidar la información relevante
hasta en las pantallas vacías con el fin de guiar a la
persona que interactúa y conseguir su atención.
LISTAS VACÍAS

17. Taller UX Design
17
Definen aspectos generales del sistema
sin entrar en detalles
LOW-FIDELITY
Lo-Fi
Se representan aspectos más precisos
y proporcionan los asset finales
HIGHT-FIDELITY
Hi-Fi
Determinar muchos aspectos del análisis
de requisitos y funcionalidades
BOCETO
Wireframes
Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una
forma muy sencilla y esquemática la estructura de un producto.
Prototipado
DISEÑO Y PROTOTIPOS

18. Taller UX Design
18
Bocetos y
Wireframes
Los wireframes especifican la relación entre
arquitectura del producto y su aspecto gráfico.
CONSEJOS PARA BOCETAR
• Participación de equipo multidisciplinar
• Planificación y costes.
• Elimine elementos que distraigan.
• Definición de funcionalidades básicas.
• Identifica prioridades en el diseño.
• Mide la viabilidad del proyecto.

19. Taller UX Design
19
Prototipos
Lo-Fi
Cuando tienes definido el concepto, entendido los casos de
uso principales, y establecido la lista de funcionalidades, es
hora de pensar en como va a ser la interfaz de usuario de la
aplicación(UI)y el diseño de interacción(IxD).
Creativedash Dmitriy Goncharov

20. Taller UX Design
20
Prototipos
Hi-Fi
Los prototipos de alta definición ofrecen la oportunidad de
interaccionar con el interfaz de nuestro producto
realizando así los primeros test de usabilidad.
Budi Tanrim Virgil Pana

21. Taller UX Design
21
Herramientas
Prototipado

22. Taller UX Design
22
Diseñando para
PERSONAS
Las emociones estimulan el sistema cognitivo.
Importa el comportamiento emocional del
usuario y la estética.
03
Las cosas atractivas funcionan mejor.
DONALD NORMAN

23. Taller UX Design
23
Diseño
Emocional
Interpreta el mundo, nos lleva a entender y aprender.
SISTEMA COGNITIVO
La primera impresión, es donde la apariencia importa.
NIVEL VISCERAL
Nos hace juzgar que esta bien y que está mal.
SISTEMA AFECTIVO

24. Taller UX Design
24
La experiencia está más
basada en la memoria que
en la realidad
Si lo que recuerdas del producto
es maravilloso, serás capaz de
perdonar cualquier situación
problemática
DONALD NORMAN

25. Taller UX Design
25

26. Taller UX Design
26
Ayudar al usuario a centrarse en una tarea,
gracias a la relación entre el aspecto,
posición y comportamiento
El aprendizaje de ciertas interacciones ha hecho que
consideremos la consistencia a la hora de diseñar la
interfaz de nuestros productos. Hay ciertos elementos
habituales que todos conocemos, por ejemplo el
botón play, el icono papelera o la flecha hacia atrás.
No hay que sorprender con cambios o
comportamientos que no se esperan, pues
implica que el usuario tenga que aprender
nuevas metodologías o patrones
La consistencia en una interfaz permite a los usuario
transferir conocimiento de una aplicación a otra.
Consistencia y
Percepción

27. Taller UX Design
27
Hay que informar al usuario de dónde está, qué
pasa o qué va a pasar en cada momento
Hay que tener en cuenta las listas vacías, los mensajes de
confirmación o de error; así como tooltip o ventanas de
ayuda tanto previas a la interacción como posterior.
La información generada ante un problema es una
nueva interacción.
Mantener informado
al usuario siempre

28. Taller UX Design
28
Un diálogo requiere que el usuario interactúe y
diseñado para obtener una respuesta que puede ser
confirmar que ha leído una información crítica, que
debe tomar una decisión, o que implique multitarea.
USOS DE DIÁLOGOS
• Usar un leguaje entendible para todas las personas.
• Evitar distraer e ir al grano, uso de fondos oscuros.
• Evitar disculpas, ambigüedad o preguntas.
• Evitar el uso de más información o link externos.
João Oliveira Nick Babich
Diálogos de
interacción
Daniela Alves Julia Vedenyapina

29. Taller UX Design
29
Dispositivos y
ENTORNOS
Ofrecer una experiencia consistente no significa
ofrecer siempre lo mismo. Hay que tener en
cuenta los multidispositivos y entornos.
04

30. Taller UX Design
30
Ley del pulgar y el dedo índice
La forma en la que sujetamos los dispositivos
marcan las áreas de interacción, aquí podemos
observar como la zona inferior es más propicia
para colocar los elementos de navegación.
El color verde indica el área de un usuario puede
llegar fácilmente; amarillo, un área que requiere
un tramo; y rojo, un área que requiere que los
usuarios a cambiar la forma en que están
sosteniendo el móvil.
Fácil
Diseñar para los
dedos, tocar

31. Taller UX Design
31
Busca la productividad del usuario, no del sistema.
No todo el mundo usa móviles con una mano,
hay gente que utiliza los dispositivos móviles
cuando están de pie, caminando, en un autobús,
o tumbado en la cama.
El 40% de los usuarios solo navega, interactúan con
el móvil sin introducir ningún dato a través del
teclado o la pantalla.
Cómo y cuándo se
usa un dispositivo
36% 15%49%
How Do Users Really Hold Mobile Devices?
STEVEN HOOBER

32. Taller UX Design
32
Hay que evitar realizar botones, o elementos de
interacción, que sean demasiado pequeños, o que
estén muy unidos entre sí, porque esto lo que
causará es que se seleccione cosas por error, o que
no se seleccione nada del todo.
El área mínima de un botón debe ser mayor o igual
de 44 x 44 pixeles, ese es el tamaño óptimo para que
un dedo índice promedio pueda seleccionar algo
fácilmente. En definitiva, hay que amplificar la zona
pulsable alrededor de la acción.
Focos de Interacción,
amplifica la acción

33. Taller UX Design
33
Existen pocos gestos que sean universales, pero
desde que el iPhone popularizó la tecnología
multi gesto se han ido adaptando y introduciendo
los gestos en el diseño de interacciones.
Cuando utilizamos dispositivos como el ratón, los
elementos que se ubican en las esquinas o bordes
de la pantalla porque son más fácil de alcanzar.
Gestos naturales
para interactuar
Users Know the Standard Gestures
JULIAN BURFORD

34. Taller UX Design
34
Observaciones de
Interfaces
Un buen diseñador tiene que conseguir que su
solución sea una idea contagiosa.
César Astudillo
05

35. Taller UX Design
35
Empty Screen
INTERFACES

36. Taller UX Design
36
Login
INTERFACES

37. Taller UX Design
37
List
INTERFACES

38. Taller UX Design
38
Tab Bar
INTERFACES

39. Taller UX Design
39
Search
INTERFACES

40. Taller UX Design
40
Setting
INTERFACES

41. Taller UX Design
41
Metodologías Ágiles
PROCESO UIX
Muchos equipos tienen la capacidad para
desarrollar proyectos, pero sólo unos pocos
tienen la visión para crear un producto.
JOSÉ ANTONIO LÓPEZ
06

42. Taller UX Design
42
Las metodologías ágiles se centran en ofrecer pequeños
conjuntos de funciones de software lo más rápido posible
en interacciones cortas.
Sprint
Son interacciones (mini-proyectos) de tiempo fijo.
Priorizar
Hay que priorizar tareas al principio de cada sprint.
Entregas
Cada sprint genera entregas de interacciones en la que
interviene el cliente.
Desarrollo Iterativo Scrum
Desarrollo Tradicional
Producto Terminado
Cumple todas las necesidades
y se ajusta a la realidad
Producto Aceptable
Cumple algunas necesidades ya
que presenta desajustes
Producto Incompleto
No cumple las necesidades y
no se ajusta a la realidad
Principios de Scrum
Comienzo
Producto
Final
Producto
Final
Sprint 1
Sprint 3
Sprint 2
Sprint 4
Sprint 5
Sprint 6

43. Taller UX Design
43
LISTA DE OBJETIVOS — Product Backlog
Tenemos un conjunto de funcionalidades, casos de uso o
requisitos que están bien definidos y hay que priorizar.
La valoración de los costes y priorización de cada uno de los
casos de uso, usualmente la hace la dirección y el responsable
de equipo(dueño del producto), que tiene que ajustar en función
de los recursos de que dispone más o menos funcionalidades
para cada interacción.
Hay que respetar el plazo firmado en el contrato para dar
resultados, lo que si es variable es la cantidad de funcionalidades
completadas que se van a entregar al final de cada interacción
en función de los recursos disponibles.
Organización
METODOLOGÍAS ÁGILES

44. Taller UX Design
44
Organización
METODOLOGÍAS ÁGILES
LISTA DE TAREAS — Sprint Backlog
Intervienen el responsable de equipo con su equipo multidisciplinar,
compuesto en un desarrollo normal por: diseñadores, front end,
programadores, analistas, sistemas y el responsable
experiencia de usuario.
El objetivo es coger cada una de las funcionalidades requeridas,
e ir dividiéndolas en tareas a partir de un análisis multidisciplinar
de cada funcionalidad y todas ellas valoradas entre 1 o 2 días de
trabajo máximo y de forma individual.
Las tareas tienen una disciplina concreta y dependencias de otras.
Para determinar la conclusión de una tarea se usa la prueba de
aceptación que indican si se considera finalizada.

45. Taller UX Design
45
PANEL DE TRABAJO — Pizarra y Posit
Se utilizan posit para ayudar a distribuir las tareas de
una manera cómoda, cada posit representa una tarea
con su código de identificación, de tal manera que
tenemos tres columnas originalmente:
• Tareas pendientes
• Tareas en Curso
• Tareas Terminadas.
Mediante esas tres columns se controla visualmente
en que situación del proyecto nos encontramos. Este
panel aporta un lugar donde el equipo se reúne para
generar una dinámica de equipo y colaboración.
Organización
METODOLOGÍAS ÁGILES
En horizontal se pone cada uno de los
bloque de casos de uso que se ha
acordado entregar para la fecha
establecida, agrupando las tareas.
En la columna central tenemos las tareas
en curso que no deben estar más del
tiempo previsto para su realización, si lleva
más tiempo es que hay un problema.
Esto nos permite conocer con exactitud que se está haciendo y cada
miembro del equipo debe tener una tarea única.
Si vas a coger una nueva tarea vuelves atrás, se la pasas a otro
compañero o la terminas.

46. Taller UX Design
46
CICLO DE DESARROLLO
Se estable una reunión diaria de tiempo estipulado al inicio
o al final de cada jornada en la que todo el equipo, pone en
común tres aspectos:
1. ¿Qué he estado haciendo el día anterior?
2. ¿Qué problemas me han surgido?
3. ¿Qué tengo previsto hacer?
Estas reuniones tienen la función de detectar problemas, no
para resolveros. Es muy importante establecer que cada
persona tiene un tiempo limitado para intervenir, las reuniones
no se pueden alargar y deben ser rápidas y concisas.
Organización
METODOLOGÍAS ÁGILES
Este seguimiento continuo (daily meeting) es para que todo el
equipo conozca lo que se está haciendo en cada etapa diaria
del desarrollo, de ese modo cuando haya problemas, cualquier
miembro del equipo puede ayudar ya sea de la misma u otra
disciplina. Los problemas se resolver tras la reunión con el fin de
evitar bloqueos en el proyecto.

47. Taller UX Design
47
CIERRE DE CICLO
Lo más importante es asegurarse que todas las tareas están
terminadas, se ha acabado el ciclo en los plazos establecidos y
todas las tareas cumplen los test de aceptación.
Al cierre de cada ciclo hay que hacer una reunión especifica
para que cada miembro del equipo aporte su opinión de como
ha trabajado en cada interacción, para que en los próximos
ciclos se pueda mejorar la productividad o forma de trabajar.
Finalmente se muestra el estado del proyecto a los dueños del
proyecto y se obtiene un feedback junto al equipo de trabajo.
Organización
METODOLOGÍAS ÁGILES

48. Taller UX Design
48
Scrum
Interacción #2 de SGX
• 15 días de interacción
• 10 casos de usos
• 57 tareas
• 280 horas
• 3 trabajadores
• Gráfica de productividad

49. Taller UX Design
49
Minimum viable
PRODUCT
El producto mínimo viable no es un producto
definitivo o perfecto, irá mejorando y creciendo
07

50. Taller UX Design
Además de ofrecernos información de los usuarios y
la posibilidad de ir mejorando nuestro producto con
cada iteración.
Ayuda a reducir tu producto al mínimo, con solo
aquellas cosas que sean absolutamente básicas y
no perder el tiempo en nada innecesario.
La idea es que empieces por un producto bueno,
aunque sea pequeño, pero además sabiendo con
certeza que se puede utilizar.
50
Producto Mínimo
Viable (MVP)
Aprende
Construye
Mide
Clientes
Análisis
del Mercado
Producto
Mínimo Viable
Decisiones e Ideas

51. Taller UX Design
51
Proceso UX
Comunicación Visual o Diseño
SUPERFICIE
Diseño de interfaz y navegación
Wireframes
ESQUELETO
Diseño de interacción
Arquitectura de Información
ESTRUCTURA
Funcionalidad, casos de uso y requerimientos
ALCANCE
Negocio y objetivos del producto
ESTRATEGIA

52. Taller UX Design
52
Herramientas
UX/UI
La gente no sabe lo quiere,
hasta que se lo enseñas
STEVE JOBS
08

53. Taller UX Design
53
Lo realmente difícil es comprender el comportamiento de los
usuarios y crear un buen diseño visual en torno a eso con
plazos ajustados en tiempo y en pruebas de usabilidad.
EL DISEÑO
IMPORTA

54. Taller UX Design
GRACIAS
54
WWW.UIXCODE.COM
UX DESIGN