Flowcharts
(diagramas de flujo)
Tona Monjo http://www.latent-design.com
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com2
Flowcharts
Los flowcharts
se utilitzan para
repres...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com3
Flowcharts
La relación entre los
elementos de un f...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com4
Flowcharts
Los flowchart pueden
representar proces...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com5
Flowcharts
...o bajar
a nivel de detalle
Imagen de...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com6
Flowcharts en UX
Como los site maps, los flowchart...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com7
Flowcharts en UX
Los flowcharts se preparan al ini...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com8
Flowcharts en UX
En UX, los flowcharts representan...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com9
Flowcharts en UX
Permiten determinar
qué es lo que...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com10
Preparación de un flowchart
Los elementos esencia...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com11
Preparación de un flowchart
El flowchart
puede mo...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com12
Preparación de un flowchart
Las líneas
representa...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com13
Preparación de un flowchart
Cada proceso debe ten...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com14
Preparación de un flowchart
A partir de la
repres...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com15
Preparación de un flowchart
A partir de la
repres...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com16
Preparación de un flowchart
El flowchart
también
...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com17
Preparación de un flowchart
Es esencial que el fl...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com18
También representan procesos
pero no son flowchar...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com19
También representan procesos
pero no son flowchar...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com20
También representan procesos
pero no son flowchar...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com21
También representan procesos
pero no son flowchar...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com22
También representan procesos
pero no son flowchar...
Flowcharts (diagramas de flujo)Tona Monjo http://www.latent-design.com23
Más info
• BROWN, Dan. Comunicating Design
http:/...
Próxima SlideShare
Cargando en…5
×

Diagramas de flujo

3.042 visualizaciones

Publicado el

Publicado en: Diseño
1 comentario
6 recomendaciones
Estadísticas
Notas
Sin descargas
Visualizaciones
Visualizaciones totales
3.042
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
41
Comentarios
1
Recomendaciones
6
Insertados 0
No insertados

No hay notas en la diapositiva.

Diagramas de flujo

  1. 1. Flowcharts (diagramas de flujo) Tona Monjo http://www.latent-design.com
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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/

×