Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción

3,384 views

Published on

Nociones básicas sobre diseño de interfaz e interacción, considerando usabilidad y las distintas formas de interacción con un producto web.

Published in: Education
  • Be the first to comment

Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción

  1. 1. Medios DigitalesInterfaz de usuario, usabilidad ydiseño de interacción 1Clase 7/16Escuela de Creativos Publicitarios de UruguayDocente: Chino Carranza
  2. 2. Tareas de la clase pasada 2
  3. 3. ¿Cómo navegamos en Internet? 3
  4. 4. 4Depende...
  5. 5. Factorescualitativos• Momento• Contexto• Humor• Atención 5
  6. 6. Factorescuantitativos• Navegador• Tamaño y tipo de pantalla• Tamaño y tipo de dispositivo• Manos en uso• Actividades paralelas• Cantidad de tiempo 6
  7. 7. No somos robots, no leemos todo, niobservamos cada detalle. 7 ■ “Escaneo” de las páginas ■ Impaciencia ■ Decisiones rápidas e impulsivas ■ Intuición + experiencias previas ■ Enorme competencia por nuestra atención
  8. 8. Las decisiones están impregnadas deelementos no racionales 8 ■ Emocionales ■ Psicológicos ■ Culturales ■ Morales ■ Ideológicos
  9. 9. Antes de diseñar nada 9
  10. 10. ¿Cuál es el objetivo? 10 ■ Quién lo va a usar ■ Para qué ■ Dónde ■ Cuándo ■ Cómo
  11. 11. ¿Cuales son las motivaciones? 11 ■ Porqué lo van a usar ■ Qué cosas queremos que hagan y cómo los motivamos a hacerlas ■ ¿Alguien lo quiere/necesita? ■ Porqué no lo usarían ■ ¿Call-to-action?
  12. 12. La interfaz de usuario 12
  13. 13. Sólo algunos elementos a tomar en cuenta 13 ■ Botones ■ Animación ■ Menúes ■ Contenido ■ Comentarios ■ Disposición ■ Vínculos ■ Colores ■ Paginación ■ Retroalimentación ■ Formularios ■ Largo, largo, etc.
  14. 14. Principios para guiarse 14 ■ Consistencia ■ Sensación de control ■ Tiempo para lograr una tarea/atajos ■ No sobreexigir a la memoria ■ Retroalimentar con información ■ Intuitivo ■ Clausura de diálogos ■ Metáforas ■ Manejo de errores ■ Ordenar según necesidades del usuario (no según cómo nosotros ■ Posibilidad de revertir procesamos esa información)
  15. 15. Usabilidad 15
  16. 16. Aspectos a atender 16 ■ Legibilidad ■ Visibilidad/ocultación ■ Obviedad ■ Orden y jerarquía ■ Claridad ■ Qué, cuándo y cómo se muestra la información ■ Ruido/saturación ■ Accesibilidad ■ Espacio en blanco ■ Convenciones
  17. 17. Diseño de interacción 17
  18. 18. Aspectos a atender 18 ■ Tiempo ■ Lo que queremos que el usuario haga ■ Cantidad de información ■ Lo que el usuario sabe hacer ■ Estímulos ■ Contexto ■ Reconocimiento de patrones ■ Cantidad de clicks ■ Ventana/s
  19. 19. Herramientas 19
  20. 20. 20Caso de uso
  21. 21. 21Wireframe
  22. 22. 22Usability testing (pruebas)
  23. 23. 23Tracking de ojos
  24. 24. 24Heatmaps (clicks y ojos)
  25. 25. Veamos algún caso y lo charlamos 25
  26. 26. Tareas para la próxima clase 26
  27. 27. 27■ En los mismos equipos que hicieron el trabajo anterior: ■ Armar un wireframe del home/inicio de su aplicación/sitio y dos páginas más. ■ Explicar las interacciones que se dan con los elementos más importantes de ese diseño. ■ Pueden hacerlo con herramientas en línea o usar cualquier aplicación de dibujo. ■ Subir el link o embed al Facebook de La Escuelita.
  28. 28. Algunas herramientas para wireframes 28 ■ http://www.mockflow.com/ ■ http://www.lumzy.com/ ■ http://www.hotgloo.com/ ■ http://lovelycharts.com/ ■ http://dub.washington.edu:2007/ ■ http://www.gliffy.com/wireframe- denim/ software/ ■ https://gomockingbird.com/ ■ http://www.fluidia.org/ ■ http://cacoo.com/
  29. 29. Hasta la próxima 29

×