Agradecimientos
2
Esta presentación será compartida :-)
Slide 3
Slide 3 text
Agenda
◍ Conocimientos básicos
◍ Proceso de diseño
◍ Escenario actual en la industria
3
Slide 4
Slide 4 text
1.
Conocimientos básicos
¿Por dónde comenzamos?
4
Slide 5
Slide 5 text
Fundamentos
● ¿Qué es diseño?
● ¿Qué es diseño centrado en el usuario?
● ¿Qué es usabilidad?
● ¿Qué es UX? + artefactos de UX
● ¿Qué es UI? + herramientas de UI
5
Slide 6
Slide 6 text
¿Qué es diseño?
Diseño es un proceso, se trata
de planear cómo va a ser o
cómo va a funcionar algo.
Siempre orientado a una
necesidad.
6
Slide 7
Slide 7 text
Diseño centrado en usuario
Es un enfoque de diseño cuyo
proceso está dirigido por
información sobre las
personas que van a hacer uso
del producto.
7
Slide 8
Slide 8 text
Usabilidad
8
Slide 9
Slide 9 text
Usabilidad
Es la facilidad con la que las
personas utilizan una
herramienta u otro objeto
para conseguir un objetivo
específico.
9
Slide 10
Slide 10 text
Usabilidad
10
Slide 11
Slide 11 text
Heurísticas Nielsen
11
◍ Visibilidad del estado del sistema
◍ Mismo lenguaje del usuario
◍ Consistencia en estándares
◍ Flexibilidad y eficiencia de uso
◍ Ayudar a los usuarios a identificar,
diagnosticar y solucionar errores.
◍ Ayuda y documentación
Slide 12
Slide 12 text
¿UX no es UI?
12
Slide 13
Slide 13 text
¿Qué es UX?
13
Slide 14
Slide 14 text
¿Qué es UX?
Es descubrir, investigar y
mejorar la experiencia de una
persona con un producto o
servicio.
14
Slide 15
Slide 15 text
Necesidades
De usuarios
Negocio
¿Qué es UX?
Tecnología
15
UX
Slide 16
Slide 16 text
UX
◍ Investigación
◌ Cuantitativa
◌ Cualitativa
◍ Pruebas de usabilidad
◍ Comunicación con marketing, comercial, desarrollo, negocio.
16
Slide 17
Slide 17 text
¿Qué es UI?
17
Slide 18
Slide 18 text
Interfaz de usuario
Es aplicar lo que se descubrió de a
una interfaz de usuario, casi
siempre es una interfaz gráfica.
18
Slide 19
Slide 19 text
Interfaz de usuario
19
Slide 20
Slide 20 text
UI Kits
◍ Material Design
20
Slide 21
Slide 21 text
UI Kits
◍ Human Interface
21
Slide 22
Slide 22 text
Herramientas
◍ XD Adobe
◍ Sketch
◍ Figma
22
Slide 23
Slide 23 text
Herramientas Prototipado
◍ Marvel
◍ Zeplin
23
Slide 24
Slide 24 text
2.
Proceso de Diseño
¿Cómo resuelves problemas?
24
Slide 25
Slide 25 text
Proceso de Diseño
25
Slide 26
Slide 26 text
Design Thinking
Slide 27
Slide 27 text
Lean Startup
Slide 28
Slide 28 text
Design Sprint
Slide 29
Slide 29 text
¿Entregables?
¿Qué son y por qué importan?
29
Slide 30
Slide 30 text
30
Slide 31
Slide 31 text
User personas
Una persona es una
descripción ficticia, pero
realista, de un usuario típico o
potencial de un producto.
-Nielsen/Norman Group
31
Slide 32
Slide 32 text
User personas
32
Slide 33
Slide 33 text
Site map
Es la lista de páginas
que tendrá un sitio
web o una aplicación
móvil
33
Slide 34
Slide 34 text
Historias de usuario
Descripción de tareas a realizar,
desde el punto de vista del
usuario
◍ Responden a las preguntas
“Quién”, “Qué” y “Por qué”
34
Slide 35
Slide 35 text
User Flow
Es la ruta que sigue un
usuario en un sitio web o
aplicación para completar una
tarea.
35
Slide 36
Slide 36 text
User Flow
36
Slide 37
Slide 37 text
Wireframes
Es un boceto que tiene como objetivo
definir el contenido y la posición de
bloques de un producto digital.
Incluye menús de navegación, bloques
de contenido.
37
Slide 38
Slide 38 text
Wireframes
38
Slide 39
Slide 39 text
Wireflows
Combinan las metas del
usuario, tareas e
interacciones entre pantallas.
Aprende más:
https:/
/uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a
39
Slide 40
Slide 40 text
Wireflows
40
Slide 41
Slide 41 text
Mockups
41
Slide 42
Slide 42 text
Prototipos interactivos
42
Slide 43
Slide 43 text
3.
Escenario actual
¿UI Designer, UI/UX Designer, UX Designer?
43
Slide 44
Slide 44 text
Tipo de empresas
● Agencia
● Consultora
● Producto - Servicio
44
Recomendaciones
50
Don’t make me think
- Steve Krug
About Face
Jacob Nielsen
Nielsen Norman
Group
UX Collective
Slide 51
Slide 51 text
RETO!
◍ Financiera
◍ Aerolínea
◍ Salud
51
Slide 52
Slide 52 text
◍ Identifica la
funcionalidad que te
enoja!
◍ ¿Cómo la mejorarías?
◍ Describe tu solución
◍ Dibuja
◍ Comparte en Twitter :-)
52
Slide 53
Slide 53 text
Gracias
53
Más de mi:
Medium - @gabrielaa.ayon
SpeakerDeck- @supergabs
Slide 54
Slide 54 text
¿Preguntas?
54
Slide 55
Slide 55 text
Credits
Special thanks to all the people
who made and released these awesome
resources for free:
◍ Presentation template by
SlidesCarnival
◍ Photographs by Unsplash
55