Usabilidad, interfaz y experiencia de usuario.

1. TENDENCIAS Y
HERRAMIENTAS
DIGITALES DE
COMUNICACIÓN
Parte 2/6 - Interfaces y usabilidad - 5 de junio de 2013

2. PROGRAMA - CLASE 2/6
Interfaces y usabilidad
• Usabilidad
• Interfaz y experiencia de usuario
• Diseño de interacción
• Herramientas para pruebas de usabilidad

3. ¿CÓMO
NAVEGAMOS
EN INTERNET?

4. DEPENDE...

5. DEPENDE...

6. DEPENDE...

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)

9. 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

12. 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

13. LAS DECISIONES ESTÁN IMPREGNADAS
DE ELEMENTOS NO RACIONALES
• Emocionales
• Psicológicos
• Culturales
• Morales
• Ideológicos

14. ANTES DE
DISEÑAR NADA
ESCUELA SUPERIOR DE CREATIVOS PUBLICITARIOS
sede e-Learning

15. • 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?

16. • 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 LAS
MOTIVACIONES?

17. LA INTERFAZ DE
USUARIO

18. SÓLO ALGUNOS ELEMENTOS
A TOMAR EN CUENTA
• Botones
• Menúes
• Comentarios
• Vínculos
• Paginación
• Formularios
• Animación
• Contenido
• Disposición
• Colores
• Retroalimentación
• Largo, largo, etc.

19. 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 (no
según cómo nosotros procesamos esa
información)

20. USABILIDAD

21. 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 la
información
• Accesibilidad

22. DISEÑO DE
INTERACCIÓN

23. 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

24. ¿Y SI NO HAY
INTERACCIÓN?
• Sensores ingresan la información
• El sistema interpreta el resto

26. HERRAMIENTAS

27. CASO DE USO

28. WIREFRAME

29. USABILITY TESTING (PRUEBAS)

30. TRACKING DE OJOS

31. HEATMAPS

32. GRACIAS