tendencias y herramientas digitales de comunicación - liccom - prodic - clase 2/6 - 05/06/13

TENDENCIAS Y HERRAMIENTAS DIGITALES DE COMUNICACIÓ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

• Herramientas para pruebas de usabilidad

¿CÓMO NAVEGAMOSEN INTERNET?

DEPENDE...

DEPENDE...

DEPENDE...

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)

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

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

LAS DECISIONES ESTÁN IMPREGNADAS DE ELEMENTOS NO RACIONALES

• Emocionales

• Psicológicos

• Culturales

• Morales

• Ideológicos

ANTES DE DISEÑAR NADA

ESCUELA SUPERIOR DE CREATIVOS PUBLICITARIOS

sede 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é no lo usarían

• ¿Call-to-action?

¿CUÁLES SON LAS MOTIVACIONES?

LA INTERFAZ DE USUARIO

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.

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)

USABILIDAD

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

DISEÑO DE INTERACCIÓN

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

¿Y SI NO HAY INTERACCIÓN?

• Sensores ingresan la información

• El sistema interpreta el resto

HERRAMIENTAS

CASO DE USO

WIREFRAME

USABILITY TESTING (PRUEBAS)

TRACKING DE OJOS

HEATMAPS

GRACIAS