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