flujos de interaccion

gemafuentesanchez@gmail.com

LAS ETAPAS DEL VIAJE

Flujos de interacción

Caminos deseados

Wayfinding

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

DISEÑAR EXPERIENCIASDEFINIR TAREAS

SOLUCIONAR ERRORES

Objetivos

Diseñar experiencias

Fácil

Reversible

Sin barreras

Oportuno

Cómodo

Redundante

Paso a paso

Incitar a la acción

Sugerir

Inferir información

Alternativas

Social

Global

Prestigioso

Preguntar al usuario

Popular

Seguridad = Confianza

Valioso

Definir tareas

Acciones frecuentes

Acciones necesarias

Acciones marginales

Acciones frecuentes

Acciones necesarias

Acciones marginales

Solucionar errores

Ser permisivo

Instrucciones

Ayudar

Avisar

Ofrecer soluciones

Acciones reversibles

Segunda oportunidad

ESTRUCTURAS DE NAVEGACIÓNFLUJOS

Métodos de trabajo

Flujos de interacción

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.

Estructura navegación

Flujo para un escenario

VOCABULARIO VISUAL DE JESSE JAMES GARRETSOFTWARE

Herramientas

Vocabulario visual de Garret

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

Paginas y documentos

Navegables / no navegables

Pagina html / pdf

Conectores

Representan relaciones entre elementos

Flechas

Indican el movimiento posible y probable

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

Conjuntos concurrentes

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

Pagina de descargas > Instalador / Instrucciones

Puntos de continuación

Para dividir el diagrame en varias paginas

Áreas

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

Pop-up de ayuda

Áreas iterativas

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

Áreas de flujo y referencia

Pasos comunes en varios procesos del sitio

Proceso de login

Puntos de decisión

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

Login > Error // Área privada

Conectores y flechas condicionales

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

Ramas condicionales

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

Roles de un gestor de contenidos

Selectores condicionales

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

Resultados de búsqueda

Áreas condicionales

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

Conexión segura

Software

• 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/

Bibliografía

LIBROSWWW

Libros

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

• Designing for the digital age – Kim Goodwin

• 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

flujos de interaccion

Design

uml diagramas de interaccion

diagramas de interaccion con etabs

interaccion de factores iv semana

calidad de la interaccion familiar

trabajo estilos de interaccion social.doc

ambientes de interaccion eolica-fluvial

interaccion suelo estructura de cimentacion

diagrama de interaccion

diagrama de interaccion de columnas

asertividad des de interaccion card

tarea diseno - diagrama de interaccion

diagrama de interaccion columnas circulares

estilos de interaccion

interaccion de fuerzas!!!

interaccion de enz. - inh

diagrama de interaccion columnas

interaccion de los ecosistemas

diagramas de interaccion - cun monteria

apuntes de interaccion suelo estructura

elementos conceptuales de demanda oferta y flujos de...