Presentación para el dia de la usabilidad 2015 #WUDco2015. Técnicas de diseño de flujos de usuario por César León

1. Las imágenes de la presentación fueron tomadas de presentaciones de a list apart ,
smashing magazine y libros de ux pin y son usadas con objetivo académico exclusivamente

2. Piensa en tu usuario.
Técnicas de diseño de flujos de usuario

3. Pensar que si algo es fácil de usar
tiene automáticamente una buena experiencia de
usuario
Pensar que si algo tiene un bonito diseño será
mágicamente de uso intuitivo

5. Tomando elementos prestados
Un poco de historia
Problemas antiguos problemas nuevos

6. ART NOUVEAU TABLE vs JOSEF ALBERS 1927 - BAUHAUS

7. ART NOUVEAU CHAIR vs MARCEL BREUER BAUHAUS DESIGNER 1928

8. CALCULADORA IOS6 VS IOS8

9. Decorativo / adornado.
Artesanía hábil,
Diseño basado en habilidades
artesanales tradicionales
Materiales - hierro forjado tradicional.
Caro
Artístico
Diseño funcional.
Moderno diseño simplista y sin embargo,
pensativa.
Fabricado a escala industrial utilizando
técnicas industriales.
La combinación de materiales modernos y
técnicas de fabricación modernas.
Relativamente barato.

10. ¿Una linea recta es el camino más corto?

14. Haussmann 1852

17. Pasos
deserción
com
plejidad
¿Una linea recta es el camino más corto?

18. • Ponga siempre primero el usuario.
• Conozca sus usuarios.
• Deje en claro lo que el sitio web / servicio / producto se trata.
• Hacer el sitio web / servicio / producto fácil de comprender.
• Hacer el sitio web fácil de navegar.
• Hacer la compra del producto / servicio en un instante.
• Ser transparente.
• Hacer el sitio web / servicio / producto útil para el usuario.
• Deje que el usuario decida.
• Explicar las cosas, si es necesario.
• Los usuarios son el núcleo de su actividad. Hágales la vida fácil
Principios UX

19. “all diagrams are destined for the garbage”
¿Para que los User flows?

21. user flows

22. User vs tasks flows

23. Un diagrama de flujo de trabajo
muestra cómo los usuarios viajan a
través de las plantillas del sistema
mientras se realiza una tarea
específica.
User vs tasks flows
Task flows
Apropiadas cuando la tarea en cuestión se
llevará a cabo de manera similar por todos los
usuarios, quienes también compartirán un
punto de entrada común.

24. Un diagrama de flujo de trabajo
muestra cómo los usuarios viajan a
través de las plantillas del sistema
mientras se realiza una tarea
específica.
Task flows
Apropiadas cuando la tarea en cuestión se
llevará a cabo de manera similar por todos los
usuarios, quienes también compartirán un
punto de entrada común.
User vs tasks flows

25. Diagramas de flujo de usuario son
similares a los flujos de trabajo, pero
hacen hincapié en que los diferentes
usuarios pueden realizar diferentes
tareas o viajes en diferentes caminos
(en gran parte debido a un punto de
entrada diferente).
User vs tasks flows
User flows
Los flujos de usuario son típicamente
asociadas a una persona y / o un punto de
entrada específico.

26. User vs tasks flows
Diagramas de flujo de usuario son
similares a los flujos de trabajo, pero
hacen hincapié en que los diferentes
usuarios pueden realizar diferentes
tareas o viajes en diferentes caminos
(en gran parte debido a un punto de
entrada diferente).
User flows
Los flujos de usuario son típicamente
asociadas a una persona y / o un punto de
entrada específico.

27. User vs tasks flows
User vs tasks
flows

28. ExperienceJourneys

29. User flows
Antes de empezar wireframing, es importante saber qué
páginas irán en el sitio.
Usted necesita saber qué componentes deben
conectarse entre sí.
User flows

30. UF Beneficios
Los flujos de usuario permiten diseñar call to
action que llevan a los usuarios a través del flujo
correcto
User flows

31. Dan una imagen clara de la jerarquía de
navegación. Usted obtiene una idea de la
amplitud y profundidad de la navegación.
UF Beneficios
User flows

32. UF Beneficios
Los desarrolladores a menudo necesitan saber
qué páginas que enlazan entre sí cuando añaden
código o cuales son sus microinteracciones
User flows

35. Anatomía de un UF

36. Anatomía de un UF
Personas
Las personajes principales que ilustran
las necesidades, metas,
pensamientos, sentimientos,
opiniones, expectativas y puntos de
dolor de los usuarios

37. Anatomía de un UF
Línea de
tiempo
Una cantidad finita de tiempo (por
ejemplo, 1 semana o 1 año) o fases
variables (por ejemplo, sensibilización,
toma de decisiones, de compra,
renovación)

38. Anatomía de un UF
Puntos de
contacto
Las acciones de los clientes y las interacciones
con la organización servicio. Este es el lo que el
usuario está haciendo
Canales
Donde la interacción se lleva a cabo y
el contexto de uso (por ejemplo, sitio
web, aplicación nativa, centro de
llamadas, en la tienda).

39. Juntando
elementos

40. Layouts

41. Layouts

42. Layouts

43. guía simple los user flows

46. Comience con los objetivos
Objetivos del usuario vs objetivos del negocio
Determine el medio y el origen
Como llego aca? cual es el medio que le estoy ofreciendo
Diseñe el flujo
Como llegó acá? cual es el medio que le estoy ofreciendo, paso siguiente…

47. Lo mas importante!

51. uso de tarjetas (cards)

52. Prototipos en papel

53. Prototipos web
pixate framer invision frame

54. Combinando elementos
creando sitios partir de flows y no de clisés

55. creando sitios partir de flows y no de clisés

56. creando sitios partir de flows y no de clisés

57. Combinando elementos
ejemplos propios

58. Contruyendo a partir de
user flows’ touchpoints

59. Visitante búsqueda orgánica:
Busca reviews de iphone
Entra en Amazon.com.
Utiliza la barra de búsqueda para encontrar
iPhone
Examina mas reviews de iPhone
Utiliza la barra de búsqueda para encontrar
Galaxy de Samsung
Examina reviews del Galaxy
Vuelve a la pagina de iPhone
Compra el iPhone
Visitante directo:
Entra a amazon.com
Utiliza la barra de búsqueda para encontrar
iPhone
Compra el iPhone

60. Competitive
According to MBTI this person would be the NT (iNtuitive/
Thinking) type. These people prefer to decide quickly, their
choice is mostly based on facts. If he would ask himself a
question it would definately start with ‘what’.
Spontaneous
MBTI describes these persons as the SP (Sensing/Perceiving)
type. They act quickly and their acts are based on feelings. If
these people would ask themselves a question, it probably
start with ‘why’.
Humanistic
The MBTI would call this person an NF (iNtuitive/Feeling)
type. These people follow their feelings and emotions, just
like the spontaneous type. The humanistic type takes a lot
more time to make a decision. In order to gain this
person’s trust we need to do a little more effort. They’re
very curious about what other people think of the product
and about who sells it. If this person would ask himself a
question it probably start with ‘who’.
Methodical
According the MBTI this is the SJ (Sensing/Judging) person, a
slow decision maker who keeps looking for factual
information. He wants to read and compare every detail
before deciding which product he’ll choose. If he would ask
himself a question it would probably start with ‘how’.

61. Competitive
lister page with short summaries (they don’t need more
information to decide) and a quick buying button to get it
over with
Spontaneous
A design solution for this person could be highlighting one
product from the list as a special discount. This will definately
appeal to them.
Humanistic
An idea for the humanistic type could be a testimonial or a
client quote. Also a reviews section would help this
person decide.
Methodical
A solution for this type of person could be a comparison
function. The comparison table would show all factual data of
the product so our website visitor can take a comprehensive
look before he decides. He probably wants to print all specs
so he can take a look later on.

62. Competitive Spontaneous
Humanistic
Methodical

63. twitter y gmail: cleonx