Clase 7/16

MEDIOS DIGITALESInterfaz de usuario, usabilidad y diseño de interacción

ESCUELA DE CREATIVOS PUBLICITARIOS DE URUGUAYDocente: Chino Carranza

¿CÓMO NAVEGAMOS EN INTERNET?

Depende

FACTORES CUALITATIVOS

4

•Momento

•Contexto

•Humor

•Atención

5

FACTORES CUANTITATIVOS

6

•Navegador

•Tamaño y tipo de pantalla

•Tamaño y tipo de dispositivo

•Manos en uso

•Actividades paralelas

•Cantidad de tiempo

7

NO SOMOS ROBOTS, NO LEEMOS TODO, NI OBSERVAMOS CADA DETALLE.

8

• “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

9

ANTES DE DISEÑAR NADA

11

• Quién lo va a usar

• Para qué

• Dónde

• Cuándo

• Cómo

¿CUÁL ES EL OBJETIVO?

12

• 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ÁLESSON LAS MOTIVACIONES?

LA INTERFAZ DE USUARIO

SÓLO ALGUNOS ELEMENTOS A TOMAR EN CUENTA

14

• 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

• 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)

15

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

17

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

19

HERRAMIENTAS

Caso de uso

Wireframe

Usability testing (pruebas)

Tracking de ojos

Heatmaps

TAREAS PARA LA PRÓXIMA CLASE

26

• 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

• http://

www.mockflow.com/

• http://www.hotgloo.com/

• http://dub.washington.edu:

2007/denim/

• https://

gomockingbird.com/

• http://www.fluidia.org/

• http://cacoo.com/

• http://www.lumzy.com/

• http://lovelycharts.com/

• http://www.gliffy.com/

wireframe-software/

ALGUNAS HERRAMIENTAS PARA WIREFRAMES

HASTA LA PRÓXIMA