La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012

  • 421 views
Uploaded on

Conocemos algunos de los elementos a tener en cuenta al diseñar un sitio web o aplicación teniendo en cuenta al usuario para lograr la mejor usabilidad mediante el entendimiento de las motivaciones, …

Conocemos algunos de los elementos a tener en cuenta al diseñar un sitio web o aplicación teniendo en cuenta al usuario para lograr la mejor usabilidad mediante el entendimiento de las motivaciones, situación de uso y contexto, así como del uso de herramientas.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
421
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Clase 7/16MEDIOS DIGITALES Interfaz de usuario, usabilidad y diseño de interacción ESCUELA DE CREATIVOS PUBLICITARIOS DE URUGUAY Docente: Chino Carranza
  • 2. ¿CÓMONAVEGAMOSENINTERNET?
  • 3. Depende
  • 4. 4 FACTORES CUALITATIVOS • Momento • Contexto • Humor • Atención
  • 5. 5
  • 6. 6 FACTORES CUANTITATIVOS • Navegador • Tamaño y tipo de pantalla • Tamaño y tipo de dispositivo • Manos en uso • Actividades paralelas • Cantidad de tiempo
  • 7. 7
  • 8. 8 NO SOMOS ROBOTS, NO LEEMOS TODO, NI OBSERVAMOS CADA DETALLE. • “Escaneo” de las páginas • Impaciencia • Decisiones rápidas e impulsivas • Intuición + experiencias previas • Enorme competencia por nuestra atención
  • 9. 9 LAS DECISIONES ESTÁN IMPREGNADAS DE ELEMENTOS NO RACIONALES • Emocionales • Psicológicos • Culturales • Morales • Ideológicos
  • 10. ANTES DEDISEÑARNADA
  • 11. 11 ¿CUÁL ES EL OBJETIVO? • Quién lo va a usar • Para qué • Dónde • Cuándo • Cómo
  • 12. 12 ¿CUÁLES SON LAS MOTIVACIONES? • 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?
  • 13. LAINTERFAZDEUSUARIO
  • 14. 14 SÓLO ALGUNOS ELEMENTOS A TOMAR EN CUENTA • Botones • Animación • Menúes • Contenido • Comentarios • Disposición • Vínculos • Colores • Paginación • Retroalimentación • Formularios • Largo, largo, etc.
  • 15. 15 PRINCIPIOS PARA GUIARSE • Consistencia • Sensación de control • Tiempo para lograr una tarea/ • No sobreexigir a la memoria atajos • Intuitivo • Retroalimentar con • Metáforas (skeumorfismo) información • Ordenar según necesidades del • Clausura de diálogos usuario (no según cómo • Manejo de errores nosotros procesamos esa información) • Posibilidad de revertir
  • 16. USABILIDAD
  • 17. 17 ASPECTOS A ATENDER • Legibilidad • Convenciones • Obviedad • Visibilidad/ocultación • Claridad • Orden y jerarquía • Ruido/saturación • Qué, cuándo y cómo se muestra la información • Espacio en blanco • Accesibilidad
  • 18. DISEÑO DEINTERACCIÓN
  • 19. 19 ASPECTOS A ATENDER • Tiempo • Ventana/s • Cantidad de información • Lo que queremos que el usuario haga • Estímulos • Reconocimiento de • Lo que el usuario sabe hacer patrones • Cantidad de clicks • Contexto
  • 20. HERRAMIENTAS
  • 21. Caso de uso
  • 22. Wireframe
  • 23. Usability testing (pruebas)
  • 24. Tracking de ojos
  • 25. Heatmaps
  • 26. 26 TAREAS PARA LA PRÓXIMA CLASE
  • 27. • Juntarse en equipos de a dos o tres.• Pensar una idea (publicitaria o no) para un sitio o aplicación que entre en la definición de web 2.0.• Armar una presentación para contar y vender la idea (incluyendo un wireframe del sitio) y subirla (o hacerla en) un servicio online (slideshare, scribd, Prezi, 280slides, sliderocket, etc.).• En ella van a contar de qué se trata la acción o sitio y porqué creen que un grupo de público (no necesariamente masivo) la usaría.• Sean originales en el encare creativo, si la función es parecida a otros sitios, expliquen porqué los eligirían.• Suben el link o embed al Facebook de La Escuelita
  • 28. ALGUNASHERRAMIENTASPARA WIREFRAMES • http:// • http://www.fluidia.org/ www.mockflow.com/ • http://cacoo.com/ • http://www.hotgloo.com/ • http://www.lumzy.com/ • http://dub.washington.edu: • http://lovelycharts.com/ 2007/denim/ • http://www.gliffy.com/ • https:// wireframe-software/ gomockingbird.com/
  • 29. HASTA LAPRÓXIMA