Transcript
Page 1: Flujos de interaccion

[email protected]

1

LAS ETAPAS DEL VIAJE

Flujos de interacción

2014

Page 2: Flujos de interaccion

[email protected]

2

Caminos deseados

2014

Page 3: Flujos de interaccion

[email protected]

3

Wayfinding

2014

Maneras de las cuales la gente se orienta en espacio físico y navegue de un sitio a otro.

Page 4: Flujos de interaccion

[email protected]

4

DISEÑAR EXPERIENCIASDEFINIR TAREAS

SOLUCIONAR ERRORES

2014

Objetivos

Page 5: Flujos de interaccion

[email protected]

5

Diseñar experiencias

2014

Page 6: Flujos de interaccion

[email protected]

6

Fácil

2014

Page 7: Flujos de interaccion

[email protected]

7

Fácil

2014

Page 8: Flujos de interaccion

[email protected]

8

Útil

2014

Page 9: Flujos de interaccion

[email protected]

9

Reversible

2014

Page 10: Flujos de interaccion

[email protected]

10

Sin barreras

2014

Page 11: Flujos de interaccion

[email protected]

11

Obvio

2014

Page 12: Flujos de interaccion

[email protected]

12

Oportuno

2014

Page 13: Flujos de interaccion

[email protected]

13

Cómodo

2014

Page 14: Flujos de interaccion

[email protected]

14

Redundante

2014

Page 15: Flujos de interaccion

[email protected]

15

Paso a paso

2014

Page 16: Flujos de interaccion

[email protected]

16

Incitar a la acción

2014

Page 17: Flujos de interaccion

[email protected]

17

Incitar a la acción

2014

Page 18: Flujos de interaccion

[email protected]

18

Sugerir

2014

Page 19: Flujos de interaccion

[email protected]

19

Inferir información

2014

Page 20: Flujos de interaccion

[email protected]

20

Alternativas

2014

Page 21: Flujos de interaccion

[email protected]

21

Alternativas

2014

Page 22: Flujos de interaccion

[email protected]

22

Alternativas

2014

Page 23: Flujos de interaccion

[email protected]

23

Social

2014

Page 24: Flujos de interaccion

[email protected]

24

Global

2014

Page 25: Flujos de interaccion

[email protected]

25

Prestigioso

2014

Page 26: Flujos de interaccion

[email protected]

26

Preguntar al usuario

2014

Page 27: Flujos de interaccion

[email protected]

27

Popular

2014

Page 28: Flujos de interaccion

[email protected]

28

Seguridad = Confianza

2014

Page 29: Flujos de interaccion

[email protected]

29

Valioso

2014

Page 30: Flujos de interaccion

[email protected]

30

Definir tareas

2014

Page 31: Flujos de interaccion

[email protected]

31

Acciones frecuentes

2014

Page 32: Flujos de interaccion

[email protected]

32

Acciones necesarias

2014

Page 33: Flujos de interaccion

[email protected]

33

Acciones marginales

2014

Page 34: Flujos de interaccion

[email protected]

34

Acciones frecuentes

2014

Page 35: Flujos de interaccion

[email protected]

35

Acciones necesarias

2014

Page 36: Flujos de interaccion

[email protected]

36

Acciones marginales

2014

Page 37: Flujos de interaccion

[email protected]

37

Solucionar errores

2014

Page 38: Flujos de interaccion

[email protected]

38

Ser permisivo

2014

Page 39: Flujos de interaccion

[email protected]

39

Instrucciones

2014

Page 40: Flujos de interaccion

[email protected]

40

Ayudar

2014

Page 41: Flujos de interaccion

[email protected]

41

Avisar

2014

Page 42: Flujos de interaccion

[email protected]

42

Ofrecer soluciones

2014

Page 43: Flujos de interaccion

[email protected]

43

Acciones reversibles

2014

Page 44: Flujos de interaccion

[email protected]

44

Segunda oportunidad

2014

Page 45: Flujos de interaccion

[email protected]

45

ESTRUCTURAS DE NAVEGACIÓNFLUJOS

2014

Métodos de trabajo

Page 46: Flujos de interaccion

[email protected]

46

Flujos de interacción

2014

 Las posibles acciones del usuario y las respuestas del sistema se representan en forma de diagramas mediante elementos y

conectores.

El significado de cada elemento y la relación definida por los conectores, suele

codificarse mediante su forma gráfica, y explicitarse mediante leyendas

descriptivas.

Page 47: Flujos de interaccion

[email protected]

47

Estructura navegación

2014

Page 48: Flujos de interaccion

[email protected]

48

Flujo para un escenario

2014

Page 49: Flujos de interaccion

[email protected]

49

VOCABULARIO VISUAL DE JESSE JAMES GARRETSOFTWARE

2014

Herramientas

Page 50: Flujos de interaccion

[email protected]

50

Vocabulario visual de Garret

2014

 Conjunto de símbolos usado para describir un sistema, estructura o

proceso.

• Compatible con pizarra blanca• Independiente de herramienta • Pequeño y fácil aprender

Page 51: Flujos de interaccion

[email protected]

51

Paginas y documentos

2014

Navegables / no navegables

Pagina html / pdf

Page 52: Flujos de interaccion

[email protected]

52

Conectores

2014

Representan relaciones entre elementos

Page 53: Flujos de interaccion

[email protected]

53

Flechas

2014

Indican el movimiento posible y probable

Listado productos > Detalle productoPasarela pago > Pago realizadoListado productos / ofertas > detalle producto

Page 54: Flujos de interaccion

[email protected]

54

Conjuntos concurrentes

2014

 Una acción del usuario genera resultados múltiples simultáneos

Pagina de descargas > Instalador / Instrucciones

Page 55: Flujos de interaccion

[email protected]

55

Puntos de continuación

2014

Para dividir el diagrame en varias paginas

Page 56: Flujos de interaccion

[email protected]

56

Áreas

2014

Grupo de paginas que comparten uno o más atributos comunes

Pop-up de ayuda

Page 57: Flujos de interaccion

[email protected]

57

Áreas iterativas

2014

Repetir la misma estructura básica tal como es aplicada a un número de elementos de información funcionalmente idénticos

Paginas de producto

Page 58: Flujos de interaccion

[email protected]

58

Áreas de flujo y referencia

2014

Pasos comunes en varios procesos del sitio

Proceso de login

Page 59: Flujos de interaccion

[email protected]

59

Puntos de decisión

2014

El sistema decide que contenido mostrar tras una acción del usuario

Login > Error // Área privada

Page 60: Flujos de interaccion

[email protected]

60

Conectores y flechas condicionales

2014

El sistema decide un camino puede ser o no ser presentado al usuario dependiendo de si una o más condiciones son cumplidas

Contenidos personales de una aplicación en la nube

Page 61: Flujos de interaccion

[email protected]

61

Ramas condicionales

2014

 El sistema decide cuál camino será presentado al usuario entre varios mutuamente excluyentes

Roles de un gestor de contenidos

Page 62: Flujos de interaccion

[email protected]

62

Selectores condicionales

2014

 El sistema decide varios caminos será presentado al usuario no excluyentes entre si

Resultados de búsqueda

Page 63: Flujos de interaccion

[email protected]

63

Áreas condicionales

2014

Cuando una o más condiciones aplican a un grupo de páginas. 

Conexión segura

Page 64: Flujos de interaccion

[email protected]

64

Software

2014

• http://dia-installer.de/• http://www.smartdraw.com/product/• http://office.microsoft.com/es-es/visio/

• https://www.draw.io• https://www.lucidchart.com/• https://cacoo.com/• http://flowchart.com/• http://www.gliffy.com/

Page 65: Flujos de interaccion

[email protected]

65

2014

Bibliografía

LIBROSWWW

Page 66: Flujos de interaccion

[email protected]

66

Libros

2014

• The Elements of User Experience: User-Centered Design for the Web - Jesse James Garrett

• Designing for the digital age – Kim Goodwin

Page 67: Flujos de interaccion

[email protected]

67

www

2014

• https://diy.org/join ejemplo formulario alta divertido y usable

• http://www.torresburriel.com/weblog/2013/02/04/diseno-del-formulario-de-insercion-de-datos-de-pago/

recomendaciones formularios métodos pago

• http://www.jjg.net/ia/visvocab/spanish.htmlVocabulario de Garret traducido


Top Related