Flowchart para una app

1. Flowcharts en el guion interactivo
Mariona Grané. LMI UB.

2. finalidad marco target cliente benchmarking
documentación diseño conceptual planing presupuesto
BRIEFING
diseño informativo
diseño comunicativo UI GUI HCI
flowchart storyboard
DISEÑO
diseño formativo
wireframes
elementos mm interfaz gráfica
programación integración y/o maquetación testeo
PRODUCCIÓN

3. Es una colección de documentos:
diseño conceptual
documentación
esquema de navegación
diagrama de flujo - flowchart
storyboard - wireframes/mockups
EL GUIÓN INTERACTIVO
OBJETIVO: flujo informativo entre creadores

4. FLOWCHARTS

5. DIAGRAMAS
La estructura de los recursos digitales se puede centrar en contenidos y
sus relaciones o en procesos interactivos.
Storyline (navegación)
Flowcharts (algoritmos)
home
apartat 1 apartat 1 apartat 1
subapart subapart subapart
subapart
subapart subapart

6. STORYLINE
Un storyline se centra en la navegación entre contenidos,
se usa en el diseño web.

7. STORYLINE

11. DIAGRAMA DE FLUJO
Los diagramas de
fl
ujo son herramientas para representar graficamente un
algoritmo (=conjunto ordenado de operaciones que permiten resolver un problema)
Diagramas = Blueprint = Arquitecture Map = Flowcharts
Utilizan sistemas estándares de representación de acciones, procesos y funciones.

12. Representan procesos
DIAGRAMA DE FLUJO

13. DIAGRAMA DE FLUJO

14. DIAGRAMA DE FLUJO

15. lo que hace el programa
lo que hace el usuario
tria
tria
tria
fi
nal
entra
DIAGRAMA DE FLUJO

16. Se usan para mostrar relaciones de causa-efecto entre las
acciones e interacciones del sistema con el usuario.
Se usan desde la concepción de la
arquitectura de la información
desde la programación
y en el diseño de interacciones
complejas
como elemento esencial de un guion.
DIAGRAMA DE FLUJO

17. Elementos básicos de un diagrama de flujo
ETAPA DE
PROCESO
DECISIÓN
INICIO
CONECTOR
PROCESO
[ COMENTARIO ]
BASE DE DATOS
DIAGRAMA DE FLUJO

18. EJEMPLOS

26. Podemos construir
elementos a medida
de nuestro flowchart

27. Podemos detallar
parte de un proceso
c o m p l e j o e n u n
flowchart a medida

30. dancing queen 1

31. dancing queen 2

33. GAMEBOOK
Docentes
Crear curso
Mis cursos
Añadir lista de usuarios
Añadir libros a biblioteca
Crear código y contraseña
Curso 2 Curso 3
Curso 1
Editar
Biblioteca
Biblioteca
Asignar
insignias
Correo análisis
sobre las
lecturas
Canal de
noticias
Gestionar
ránkings
Evaluación
usuarios
Estudiantes
Entrar como
Ránkings
Análisis
lectura
Mi perfil
Canal de
noticias
Individual
Grupal
Valoración lectura
Comentario lectura
Datos personales
Libro actual
Libros leídos
Insignias
Publicaciones
Datos personales
Like
Libros
Información Valoraciones Comentarios Disponibilidad Recomendar
Comentario
válido
Comentario no
válido

39. HERRAMIENTAS

40. Apuntes y ampliación
Ejemplos profesionales
http://marionagrane.cat/eroo/guio.html
https://www.pinterest.es/mariona05/ux-
fl
owcharts/

41. Podemos usar lápiz y papel
DIAGRAMA DE FLUJO

42. DIAGRAMA DE FLUJO

43. Herramientas para crear flowcharts
Lucida Chart
Diagramo
DrawIO- diagrams.net
Spiderscribe
Mindomo
Mind42
Mindmeister
Wikimindmap
Miro
http://marionagrane.cat/eroo/eines.html#maps
DIAGRAMA DE FLUJO
http://marionagrane.cat/eroo/guio.html#guio3

44. @mariona_lmi