Conocemos algunos de los elementos a tener en cuenta al diseñar un sitio web o aplicación teniendo en cuenta al usuario para lograr la mejor usabilidad mediante el entendimiento de las motivaciones, situación de uso y contexto, así como del uso de herramientas.

1. Clase 7/16
MEDIOS DIGITALES
Interfaz de usuario, usabilidad y diseño de interacción
ESCUELA DE CREATIVOS PUBLICITARIOS DE URUGUAY
Docente: Chino Carranza

2. ¿CÓMO
NAVEGAMOS
EN
INTERNET?

3. Depende

4. 4
FACTORES
CUALITATIVOS
• Momento
• Contexto
• Humor
• Atención

5. 5

6. 6
FACTORES
CUANTITATIVOS
• Navegador
• Tamaño y tipo de pantalla
• Tamaño y tipo de dispositivo
• Manos en uso
• Actividades paralelas
• Cantidad de tiempo

7. 7

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

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

10. ANTES DE
DISEÑAR
NADA

11. 11
¿CUÁL ES EL
OBJETIVO?
• Quién lo va a usar
• Para qué
• Dónde
• Cuándo
• Cómo

12. 12
¿CUÁLES
SON LAS
MOTIVACIONES?
• 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?

13. LA
INTERFAZ
DE
USUARIO

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

15. 15
PRINCIPIOS
PARA GUIARSE
• Consistencia • Sensación de control
• Tiempo para lograr una tarea/ • No sobreexigir a la memoria
atajos
• Intuitivo
• Retroalimentar con
• Metáforas (skeumorfismo)
información
• Ordenar según necesidades del
• Clausura de diálogos
usuario (no según cómo
• Manejo de errores nosotros procesamos esa
información)
• Posibilidad de revertir

16. USABILIDAD

17. 17
ASPECTOS A
ATENDER
• Legibilidad • Convenciones
• Obviedad • Visibilidad/ocultación
• Claridad • Orden y jerarquía
• Ruido/saturación • Qué, cuándo y cómo se
muestra la información
• Espacio en blanco
• Accesibilidad

18. DISEÑO DE
INTERACCIÓN

19. 19
ASPECTOS A
ATENDER
• Tiempo • Ventana/s
• Cantidad de información • Lo que queremos que el
usuario haga
• Estímulos
• Reconocimiento de • Lo que el usuario sabe
hacer
patrones
• Cantidad de clicks • Contexto

20. HERRAMIENTAS

21. Caso de uso

22. Wireframe

23. Usability testing
(pruebas)

24. Tracking de ojos

25. Heatmaps

26. 26
TAREAS
PARA LA
PRÓXIMA
CLASE

27. • 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

28. ALGUNAS
HERRAMIENTAS
PARA WIREFRAMES
• http:// • http://www.fluidia.org/
www.mockflow.com/
• http://cacoo.com/
• http://www.hotgloo.com/
• http://www.lumzy.com/
• http://dub.washington.edu:
• http://lovelycharts.com/
2007/denim/
• http://www.gliffy.com/
• https://
wireframe-software/
gomockingbird.com/

29. HASTA LA
PRÓXIMA