Diseño de información, navegación e interfaces

8,163 views

Published on

Puntos principales del diseño de interfaces, navegación e información y relación entre ellos

Published in: Design, Technology

Diseño de información, navegación e interfaces

  1. 1. diseño de interfaces + navegación + información Luis Carlos Aceves G.
  2. 2. <ul><li>Diseño de interfaces </li></ul><ul><ul><li>Las cosas que el usuario podrá hacer </li></ul></ul><ul><li>Diseño de navegación </li></ul><ul><ul><li>Los lugares a los que el usuario podrá ir </li></ul></ul><ul><li>Diseño de información </li></ul><ul><ul><li>Las ideas que se desean comunicar al usuario </li></ul></ul>
  3. 3. diseño de interfaces
  4. 4. diseño de interfaces <ul><li>Representación gráfica </li></ul><ul><li>de las especificaciones funcionales </li></ul><ul><li>Conjunto de </li></ul><ul><li>objetos que son relevantes para la interacción del usuario </li></ul><ul><li>El enfoque del diseño es hacia </li></ul><ul><li>las cosas que el usuario podrá hacer dentro del sitio web </li></ul>
  5. 5. <ul><li>Principios para el diseño de interfaces: </li></ul><ul><ul><li>Simplicidad y elegancia </li></ul></ul><ul><ul><li>Proximidad y relevancia </li></ul></ul><ul><ul><li>Enfoque y retroalimentación </li></ul></ul><ul><ul><li>Una jerarquía de importancia y una jerarquía de tareas </li></ul></ul><ul><ul><li>La herramienta correcta para el trabajo correcto </li></ul></ul>diseño de interfaces
  6. 6. <ul><li>Un buen diseño de interfaces es aquel donde…. </li></ul><ul><li>el usuario inmediatamente identifica lo que es importante </li></ul>diseño de interfaces
  7. 7. <ul><li>Un buen diseño de interfaces es aquel donde…. </li></ul><ul><li>se reconocen las acciones que el usuario tomará, haciéndolas accesibles y fáciles de utilizar </li></ul>diseño de interfaces
  8. 8. <ul><li>Un buen diseño de interfaces es aquel donde… </li></ul><ul><li>lo más importante no es poner un botón grande para que el usuario lo vea, sino: </li></ul><ul><ul><ul><li>Dejar alguna opción preseleccionada </li></ul></ul></ul><ul><ul><ul><li>Utilizar rótulos “ver más…” </li></ul></ul></ul><ul><ul><ul><li>Dar énfasis a lo que el usuario hará dentro del sitio web </li></ul></ul></ul>diseño de interfaces
  9. 9. <ul><li>Elementos principales a considerar para la interacción: </li></ul><ul><ul><li>botones de acciones </li></ul></ul><ul><ul><li>cajas de selección (checkboxes) </li></ul></ul><ul><ul><li>botones de selección (radio buttons) </li></ul></ul><ul><ul><li>cajas de texto (text fields) </li></ul></ul><ul><ul><li>listas desplegables (dropdown lists) </li></ul></ul><ul><ul><li>cajas de listas (list boxes) </li></ul></ul>diseño de interfaces
  10. 10. diseño de navegación
  11. 11. diseño de navegación <ul><li>Forma especializada de diseño de interfaces dirigida a </li></ul><ul><li>presentar espacios de información </li></ul><ul><li>Es la manera en la que el usuario puede ver la arquitectura de información </li></ul><ul><li>y moverse a través de ella </li></ul><ul><li>El enfoque del diseño es hacia </li></ul><ul><li>los lugares a los que el usuario irá </li></ul><ul><li>dentro del sitio web </li></ul>
  12. 12. <ul><li>Un buen diseño de navegación es aquel que… </li></ul><ul><li>proporciona al usuario al menos un medio de llegar de un lugar a otro </li></ul>diseño de navegación
  13. 13. <ul><li>Un buen diseño de navegación es aquel donde… </li></ul><ul><li>no necesariamente habrá ligas en cada página hacia todas las otras páginas </li></ul>diseño de navegación
  14. 14. <ul><li>Un buen diseño de navegación es aquel donde… </li></ul><ul><li>las ligas funcionan </li></ul>diseño de navegación
  15. 15. <ul><li>Un buen diseño de navegación es aquel que… </li></ul><ul><li>comunica la relación entre los elementos que están enlazados </li></ul>diseño de navegación
  16. 16. <ul><li>Un buen diseño de navegación es aquel que: </li></ul><ul><li>permite al usuario conocer qué opciones hay disponibles </li></ul>diseño de navegación
  17. 17. <ul><li>Un buen diseño de navegación es aquel que: </li></ul><ul><li>comunica coherentemente la relación entre el contenido que el usuario ve y el resto de la página </li></ul>diseño de navegación
  18. 18. diseño de información
  19. 19. diseño de información <ul><li>Cómo </li></ul><ul><li>representar información de forma que el usuario la pueda entender </li></ul><ul><li>Implica la </li></ul><ul><li>unión del diseño de interfaces y el diseño de navegación </li></ul><ul><li>El enfoque del diseño es hacia </li></ul><ul><li>comunicar al usuario las ideas representadas en el sitio web </li></ul>
  20. 20. diseño de información <ul><li>Esqueleto de una página del sitio web </li></ul><ul><li>Debe representar: </li></ul><ul><li>Las cosas que el usuario podrá hacer </li></ul><ul><li>Los lugares a los que el usuario podrá ir </li></ul><ul><li>Las ideas que se desean comunicar al usuario </li></ul>
  21. 21. <ul><li>Uso de prototipos y borradores </li></ul>diseño de información
  22. 22. diseño de información <ul><li>Uso de wireframes: </li></ul><ul><li>representan una página de la arquitectura de información </li></ul>
  23. 23. diseño de información <ul><li>Del wireframe a la realidad </li></ul>1
  24. 24. diseño de información <ul><li>Del wireframe a la realidad </li></ul>2
  25. 25. diseño de información <ul><li>Del wireframe a la realidad </li></ul>3

×