Flujos de interaccion

Download Flujos de interaccion

Post on 20-Jun-2015

172 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

Cmo se mueven los usuarios por la web. Definir objetivos y tareas. Ejemplos de buenas practicas en booking.com

TRANSCRIPT

<ul><li> 1. L A S E T A P A S D E L V I A J E Flujos de interaccin 2014 1 gemafuentesanchez@gmail.com </li></ul> <p> 2. Caminos deseados 2014gemafuentesanchez@gmail.com 2 3. Wayfinding 2014gemafuentesanchez@gmail.com 3 Maneras de las cuales la gente se orienta en espacio fsico y navegue de un sitio a otro. 4. D I S E A R E X P E R I E N C I A S D E F I N I R T A R E A S S O L U C I O N A R E R R O R E S gemafuentesanchez@gmail.com 2014 4 Objetivos 5. Disear experiencias 2014gemafuentesanchez@gmail.com 5 6. Fcil 2014gemafuentesanchez@gmail.com 6 7. Fcil 2014gemafuentesanchez@gmail.com 7 8. til 2014gemafuentesanchez@gmail.com 8 9. Reversible 2014gemafuentesanchez@gmail.com 9 10. Sin barreras 2014gemafuentesanchez@gmail.com 10 11. Obvio 2014gemafuentesanchez@gmail.com 11 12. Oportuno 2014gemafuentesanchez@gmail.com 12 13. Cmodo 2014gemafuentesanchez@gmail.com 13 14. Redundante 2014gemafuentesanchez@gmail.com 14 15. Paso a paso 2014gemafuentesanchez@gmail.com 15 16. Incitar a la accin 2014gemafuentesanchez@gmail.com 16 17. Incitar a la accin 2014gemafuentesanchez@gmail.com 17 18. Sugerir 2014gemafuentesanchez@gmail.com 18 19. Inferir informacin 2014gemafuentesanchez@gmail.com 19 20. Alternativas 2014gemafuentesanchez@gmail.com 20 21. Alternativas 2014gemafuentesanchez@gmail.com 21 22. Alternativas 2014gemafuentesanchez@gmail.com 22 23. Social 2014gemafuentesanchez@gmail.com 23 24. Global 2014gemafuentesanchez@gmail.com 24 25. Prestigioso 2014gemafuentesanchez@gmail.com 25 26. Preguntar al usuario 2014gemafuentesanchez@gmail.com 26 27. Popular 2014gemafuentesanchez@gmail.com 27 28. Seguridad = Confianza 2014gemafuentesanchez@gmail.com 28 29. Valioso 2014gemafuentesanchez@gmail.com 29 30. Definir tareas 2014gemafuentesanchez@gmail.com 30 31. Acciones frecuentes 2014gemafuentesanchez@gmail.com 31 32. Acciones necesarias 2014gemafuentesanchez@gmail.com 32 33. Acciones marginales 2014gemafuentesanchez@gmail.com 33 34. Acciones frecuentes 2014gemafuentesanchez@gmail.com 34 35. Acciones necesarias 2014gemafuentesanchez@gmail.com 35 36. Acciones marginales 2014gemafuentesanchez@gmail.com 36 37. Solucionar errores 2014gemafuentesanchez@gmail.com 37 38. Ser permisivo 2014gemafuentesanchez@gmail.com 38 39. Instrucciones 2014gemafuentesanchez@gmail.com 39 40. Ayudar 2014gemafuentesanchez@gmail.com 40 41. Avisar 2014gemafuentesanchez@gmail.com 41 42. Ofrecer soluciones 2014gemafuentesanchez@gmail.com 42 43. Acciones reversibles 2014gemafuentesanchez@gmail.com 43 44. Segunda oportunidad 2014gemafuentesanchez@gmail.com 44 45. E S T R U C T U R A S D E N A V E G A C I N F L U J O S gemafuentesanchez@gmail.com 2014 45 Mtodos de trabajo 46. Flujos de interaccin 2014gemafuentesanchez@gmail.com 46 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 relacin definida por los conectores, suele codificarse mediante su forma grfica, y explicitarse mediante leyendas descriptivas. 47. Estructura navegacin 2014gemafuentesanchez@gmail.com 47 48. Flujo para un escenario 2014gemafuentesanchez@gmail.com 48 49. V O C A B U L A R I O V I S U A L D E J E S S E J A M E S G A R R E T S O F T W A R E gemafuentesanchez@gmail.com 2014 49 Herramientas 50. Vocabulario visual de Garret 2014gemafuentesanchez@gmail.com 50 Conjunto de smbolos usado para describir un sistema, estructura o proceso. Compatible con pizarra blanca Independiente de herramienta Pequeo y fcil aprender 51. Paginas y documentos 2014gemafuentesanchez@gmail.com 51 Navegables / no navegables Pagina html / pdf 52. Conectores 2014gemafuentesanchez@gmail.com 52 Representan relaciones entre elementos 53. Flechas 2014gemafuentesanchez@gmail.com 53 Indican el movimiento posible y probable Listado productos &gt; Detalle producto Pasarela pago &gt; Pago realizado Listado productos / ofertas &gt; detalle producto 54. Conjuntos concurrentes 2014gemafuentesanchez@gmail.com 54 Una accin del usuario genera resultados mltiples simultneos Pagina de descargas &gt; Instalador / Instrucciones 55. Puntos de continuacin 2014gemafuentesanchez@gmail.com 55 Para dividir el diagrame en varias paginas 56. reas 2014gemafuentesanchez@gmail.com 56 Grupo de paginas que comparten uno o ms atributos comunes Pop-up de ayuda 57. reas iterativas 2014gemafuentesanchez@gmail.com 57 Repetir la misma estructura bsica tal como es aplicada a un nmero de elementos de informacin funcionalmente idnticos Paginas de producto 58. reas de flujo y referencia 2014gemafuentesanchez@gmail.com 58 Pasos comunes en varios procesos del sitio Proceso de login 59. Puntos de decisin 2014gemafuentesanchez@gmail.com 59 El sistema decide que contenido mostrar tras una accin del usuario Login &gt; Error // rea privada 60. Conectores y flechas condicionales 2014gemafuentesanchez@gmail.com 60 El sistema decide un camino puede ser o no ser presentado al usuario dependiendo de si una o ms condiciones son cumplidas Contenidos personales de una aplicacin en la nube 61. Ramas condicionales 2014gemafuentesanchez@gmail.com 61 El sistema decide cul camino ser presentado al usuario entre varios mutuamente excluyentes Roles de un gestor de contenidos 62. Selectores condicionales 2014gemafuentesanchez@gmail.com 62 El sistema decide varios caminos ser presentado al usuario no excluyentes entre si Resultados de bsqueda 63. reas condicionales 2014gemafuentesanchez@gmail.com 63 Cuando una o ms condiciones aplican a un grupo de pginas. Conexin segura 64. Software 2014gemafuentesanchez@gmail.com 64 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/ 65. gemafuentesanchez@gmail.com 2014 65 Bibliografa L I B R O S W W W 66. Libros 2014gemafuentesanchez@gmail.com 66 The Elements of User Experience: User-Centered Design for the Web - Jesse James Garrett Designing for the digital age Kim Goodwin 67. www 2014gemafuentesanchez@gmail.com 67 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 mtodos pago http://www.jjg.net/ia/visvocab/spanish.html Vocabulario de Garret traducido </p>