TENDENCIAS YHERRAMIENTASDIGITALES DECOMUNICACIÓNParte 2/6 - Interfaces y usabilidad - 5 de junio de 2013
PROGRAMA - CLASE 2/6Interfaces y usabilidad• Usabilidad• Interfaz y experiencia de usuario• Diseño de interacción• Herrami...
¿CÓMONAVEGAMOSEN INTERNET?
DEPENDE...
DEPENDE...
DEPENDE...
FACTORES CUANTITATIVOS• Navegador• Tamaño y tipo de pantalla• Tamaño y tipo de dispositivo• Manos en uso• Velocidad de con...
FACTORES CUALITATIVOS• Contexto• ¿Puedo/quiero escuchar audio?• ¿Puedo atender un video?• ¿Puedo hacer movimientos o gesto...
NO SOMOS ROBOTS, NO LEEMOSTODO, NI OBSERVAMOS CADA DETALLE.• “Escaneo” de las páginas• Impaciencia• Decisiones rápidas e i...
LAS DECISIONES ESTÁN IMPREGNADASDE ELEMENTOS NO RACIONALES• Emocionales• Psicológicos• Culturales• Morales• Ideológicos
ANTES DEDISEÑAR NADAESCUELA SUPERIOR DE CREATIVOS PUBLICITARIOSsede e-Learning
• Quién lo va a usar• Para qué• Dónde• Cuándo• Cómo• Con qué dispositivo• Tiene acceso a conexión¿CUÁL ES EL OBJETIVO?
• Porqué lo van a usar• Qué cosas queremos que hagan y cómo los motivamos a hacerlas• ¿Alguien lo quiere/necesita?• Porqué...
LA INTERFAZ DEUSUARIO
SÓLO ALGUNOS ELEMENTOSA TOMAR EN CUENTA• Botones• Menúes• Comentarios• Vínculos• Paginación• Formularios• Animación• Conte...
PRINCIPIOS PARA GUIARSE• Consistencia• Tiempo para lograr una tarea/atajos• Retroalimentar con información• Visual• Sonora...
USABILIDAD
ASPECTOS A ATENDER• Legibilidad• Obviedad• Claridad• Ruido/saturación• Espacio en blanco• Convenciones• Visibilidad/oculta...
DISEÑO DEINTERACCIÓN
ASPECTOS A ATENDER• Tiempo• Cantidad de información• Estímulos• Reconocimiento de patrones• Cantidad de clicks• Ventana/s•...
¿Y SI NO HAYINTERACCIÓN?• Sensores ingresan la información• El sistema interpreta el resto
HERRAMIENTAS
CASO DE USO
WIREFRAME
USABILITY TESTING (PRUEBAS)
TRACKING DE OJOS
HEATMAPS
GRACIAS
Tendencias y Herramientas Digitales de Comunicación - LICCOM - PRODIC - Clase 2/6 - 05/06/13
Tendencias y Herramientas Digitales de Comunicación - LICCOM - PRODIC - Clase 2/6 - 05/06/13
Tendencias y Herramientas Digitales de Comunicación - LICCOM - PRODIC - Clase 2/6 - 05/06/13
Tendencias y Herramientas Digitales de Comunicación - LICCOM - PRODIC - Clase 2/6 - 05/06/13
Upcoming SlideShare
Loading in …5
×

Tendencias y Herramientas Digitales de Comunicación - LICCOM - PRODIC - Clase 2/6 - 05/06/13

373 views

Published on

Usabilidad, interfaz y experiencia de usuario.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
373
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tendencias y Herramientas Digitales de Comunicación - LICCOM - PRODIC - Clase 2/6 - 05/06/13

  1. 1. TENDENCIAS YHERRAMIENTASDIGITALES DECOMUNICACIÓNParte 2/6 - Interfaces y usabilidad - 5 de junio de 2013
  2. 2. PROGRAMA - CLASE 2/6Interfaces y usabilidad• Usabilidad• Interfaz y experiencia de usuario• Diseño de interacción• Herramientas para pruebas de usabilidad
  3. 3. ¿CÓMONAVEGAMOSEN INTERNET?
  4. 4. DEPENDE...
  5. 5. DEPENDE...
  6. 6. DEPENDE...
  7. 7. FACTORES CUANTITATIVOS• Navegador• Tamaño y tipo de pantalla• Tamaño y tipo de dispositivo• Manos en uso• Velocidad de conexión• Periféricos (teléfono, cámara, sensores)
  8. 8. FACTORES CUALITATIVOS• Contexto• ¿Puedo/quiero escuchar audio?• ¿Puedo atender un video?• ¿Puedo hacer movimientos o gestos?• ¿Puedo hablar o dar comandos?• ¿Puedo mirar?• ¿Puedo tocar la pantalla/teclado?• Momento• Humor• Atención• Idioma• Accesibilidad• Actividades paralelas• Tiempo disponible
  9. 9. NO SOMOS ROBOTS, NO LEEMOSTODO, 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
  10. 10. LAS DECISIONES ESTÁN IMPREGNADASDE ELEMENTOS NO RACIONALES• Emocionales• Psicológicos• Culturales• Morales• Ideológicos
  11. 11. ANTES DEDISEÑAR NADAESCUELA SUPERIOR DE CREATIVOS PUBLICITARIOSsede e-Learning
  12. 12. • Quién lo va a usar• Para qué• Dónde• Cuándo• Cómo• Con qué dispositivo• Tiene acceso a conexión¿CUÁL ES EL OBJETIVO?
  13. 13. • 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?¿CUÁLES SON LASMOTIVACIONES?
  14. 14. LA INTERFAZ DEUSUARIO
  15. 15. SÓLO ALGUNOS ELEMENTOSA TOMAR EN CUENTA• Botones• Menúes• Comentarios• Vínculos• Paginación• Formularios• Animación• Contenido• Disposición• Colores• Retroalimentación• Largo, largo, etc.
  16. 16. PRINCIPIOS PARA GUIARSE• Consistencia• Tiempo para lograr una tarea/atajos• Retroalimentar con información• Visual• Sonora• Táctil• Clausura de diálogos• Manejo de errores• Posibilidad de revertir• Sensación de control• No sobreexigir a la memoria• Intuitivo• Metáforas (skeumorfismo)• Ordenar según necesidades del usuario (nosegún cómo nosotros procesamos esainformación)
  17. 17. USABILIDAD
  18. 18. ASPECTOS A ATENDER• Legibilidad• Obviedad• Claridad• Ruido/saturación• Espacio en blanco• Convenciones• Visibilidad/ocultación• Orden y jerarquía• Qué, cuándo y cómo se muestra lainformación• Accesibilidad
  19. 19. DISEÑO DEINTERACCIÓN
  20. 20. ASPECTOS A ATENDER• Tiempo• Cantidad de información• Estímulos• Reconocimiento de patrones• Cantidad de clicks• Ventana/s• Lo que queremos que el usuario haga• Lo que el usuario sabe hacer• Contexto
  21. 21. ¿Y SI NO HAYINTERACCIÓN?• Sensores ingresan la información• El sistema interpreta el resto
  22. 22. HERRAMIENTAS
  23. 23. CASO DE USO
  24. 24. WIREFRAME
  25. 25. USABILITY TESTING (PRUEBAS)
  26. 26. TRACKING DE OJOS
  27. 27. HEATMAPS
  28. 28. GRACIAS

×