Medios DigitalesInterfaz de usuario, usabilidad y diseño de interacción

Clase 7/16Escuela de Creativos Publicitarios de UruguayDocente: Chino Carranza

1

Tareas de la clase pasada 2

¿Cómo navegamos en Internet? 3

Depende...

4

Factores cualitativos

5

• Momento

• Contexto

• Humor

• Atención

Factores cuantitativos

6

• Navegador

• Tamaño y tipo de pantalla

• Tamaño y tipo de dispositivo

• Manos en uso

• Actividades paralelas

• Cantidad de tiempo

No somos robots, no leemos todo, ni observamos cada detalle. 7

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

8

Antes de diseñar nada 9

10

■ Quién lo va a usar

■ Para qué

■ Dónde

■ Cuándo

■ Cómo

¿Cuál es el objetivo?

11

■ 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?

¿Cuales son las motivaciones?

La interfaz de usuario 12

Sólo algunos elementos a tomar en cuenta 13

■ 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

■ Ordenar según necesidades del usuario (no según cómo nosotros procesamos esa información)

14

Usabilidad 15

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

16

Diseño de interacción 17

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

18

Herramientas 19

Caso de uso

20

Wireframe

21

Usability testing (pruebas)

22

Tracking de ojos

23

Heatmaps (clicks y ojos)

24

Veamos algún caso y lo charlamos 25

Tareas para la próxima clase 26

27

■ En los mismos equipos que hicieron el trabajo anterior:

■ Armar un wireframe del home/inicio de su aplicación/sitio y dos páginas más.

■ Explicar las interacciones que se dan con los elementos más importantes de ese diseño.

■ Pueden hacerlo con herramientas en línea o usar cualquier aplicación de dibujo.

■ Subir 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/

28Algunas herramientas para wireframes

29Hasta la próxima