1. Flowcharts
(diagramas de flujo)
Tona Monjo http://www.latent-design.com

2. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com2
Flowcharts
Los flowcharts
se utilitzan para
representar un
proceso, desde
su inicio hasta
su final.
Los site maps (diagramas
de contenido), en cambio,
representan la estructura
de contenidos del
proyecto.
http://inspirationlab.files.wordpress.com/2010/04/infographiclarge_v2.png

3. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com3
Flowcharts
La relación entre los
elementos de un flowchart
es secuencial, no jerárquica
como en los site maps.
http://www.buzzfeed.com/gavon/a-day-in-the-life-of-a-cyclist

4. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com4
Flowcharts
Los flowchart pueden
representar procesos
a alto nivel...
Imagen de
Communicating Design
(ver Más info al final)

5. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com5
Flowcharts
...o bajar
a nivel de detalle
Imagen de
Communicating Design
(ver Más info al final)

6. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com6
Flowcharts en UX
Como los site maps, los flowcharts son un documento
de trabajo y de comunicación.
Por lo tanto, deben utilizar unos códigos reconocibles
y claros para todo el equipo y otros implicados en el proyecto.

7. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com7
Flowcharts en UX
Los flowcharts se preparan al inicio del
proceso de diseño, generalmente después
del site map.
sitemap flowchart sketches wireframes mockups prototipo

8. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com8
Flowcharts en UX
En UX, los flowcharts representan cómo interactúa el usuario
con la aplicación, y qué procesos se llevan a cabo.

9. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com9
Flowcharts en UX
Permiten determinar
qué es lo que la aplicación
tiene que mostrar o realizar,
dependiendo de la
información que proporcionan
las interacciones del usuario.
http://www.guiadigital.gob.cl/guia/capitulos/dos/navegacion.htm

10. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com10
Preparación de un flowchart
Los elementos esenciales de
un flowchart son:
•Los pasos, representados
por pantallas de la
aplicación.
•Un punto de inicio y un
punto final.
http://webaccess.msu.edu/review-process/flow-chart.html

11. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com11
Preparación de un flowchart
El flowchart
puede mostrar
agrupaciones
de pasos o
pasos
destacados (por
ejemplo, los
pasos clave de
un proceso).
Imagen de
Communicating Design
(ver Más info al final)

12. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com12
Preparación de un flowchart
Las líneas
representan
los caminos
entre diferentes
pasos.
http://www.nosolousabilidad.com/articulos/diagramacion.htm

13. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com13
Preparación de un flowchart
Cada proceso debe tener
un nombre que lo
identifique.
También se pueden
numerar los pasos, para
relacionarlos con otros
documentos como los
wireframes.
Imagen de
Communicating Design
(ver Más info al final)

14. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com14
Preparación de un flowchart
A partir de la
representación
básica del
flowchart, se
pueden añadir
detalles que
profundicen en
la descripción
del proceso.
Por ejemplo, quién lleva a cabo cada fase o cómo se agrupan los pasos...
http://blog.braintraffic.com/images/content-strategy-nontext-flowchart.png

15. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com15
Preparación de un flowchart
A partir de la
representación básica
del flowchart, se
pueden añadir detalles
que profundicen en la
descripción del
proceso.
... o qué ocurre
cuando existe un error
Imagen de Designing for the Digital Age
(ver Más info al final)

16. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com16
Preparación de un flowchart
El flowchart
también
puede
explicar
secuencias
gestuales
http://jdfresneda.files.wordpress.com/2008/11/secuencia-interfaz-ipod1.png

17. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com17
Preparación de un flowchart
Es esencial que el flowchart utilice un lenguaje visual consistente.
Puede recurrirse a alfabetos visuales predeterminados:
• Jesse Hames Garrett:
http://www.jjg.net/ia/visvocab/spanish.html
• Dan Brown:
http://communicatingdesign.com/2010/09/23/flow-charts-samples-to-download-
and-a-workshop/
• Rodrigo Ronda:
http://www.nosolousabilidad.com/articulos/diagramacion.htm

18. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com18
También representan procesos
pero no son flowcharts...
Journey framework
http://www.ideo.com/images/uploads/news/pdfs/metropolis_1.pdf

19. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com19
También representan procesos
pero no son flowcharts...
Journey framework
http://wiki.fluidproject.org/download/attachments/11770616/JF_IndividualVisitoratDIA_All.pdf?version=1modificationDate=1269972580000

20. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com20
También representan procesos
pero no son flowcharts...
Journey framework
http://www.maya.com/portfolio/carnegie-library

21. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com21
También representan procesos
pero no son flowcharts...
Experience
map
http://adaptivepath.com/ideas/the-anatomy-of-an-experience-map

22. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com22
También representan procesos
pero no son flowcharts...
Storyboard
http://www.cooper.com/approach/#communication

23. Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com23
Más info
• BROWN, Dan. Comunicating Design
http://communicatingdesign.com/
• SAFFER, Dan. Designing for Interaction
http://www.designingforinteraction.com/
• GOODWIN, K.Designing for the digital age
http://www.amazon.es/Designing-Digital-Age-Human-Centered-Products/
dp/0470229101
• RONDA, Rodrigo. La diagramación en la arquitectura de la información
http://www.nosolousabilidad.com/articulos/diagramacion.htm
• Stop Designing Pages And Start Designing Flows
http://uxdesign.smashingmagazine.com/2012/01/04/stop-designing-
pages-start-designing-flows/