Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción
-
Upload
daniel-carranza -
Category
Education
-
view
2.667 -
download
0
description
Transcript of Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción
![Page 1: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/1.jpg)
Medios DigitalesInterfaz de usuario, usabilidad y diseño de interacción
Clase 7/16Escuela de Creativos Publicitarios de UruguayDocente: Chino Carranza
1
![Page 2: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/2.jpg)
Tareas de la clase pasada 2
![Page 3: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/3.jpg)
¿Cómo navegamos en Internet? 3
![Page 4: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/4.jpg)
Depende...
4
![Page 5: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/5.jpg)
Factores cualitativos
5
• Momento
• Contexto
• Humor
• Atención
![Page 6: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/6.jpg)
Factores cuantitativos
6
• Navegador
• Tamaño y tipo de pantalla
• Tamaño y tipo de dispositivo
• Manos en uso
• Actividades paralelas
• Cantidad de tiempo
![Page 7: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/7.jpg)
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
![Page 8: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/8.jpg)
Las decisiones están impregnadas de elementos no racionales
■ Emocionales
■ Psicológicos
■ Culturales
■ Morales
■ Ideológicos
8
![Page 9: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/9.jpg)
Antes de diseñar nada 9
![Page 10: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/10.jpg)
10
■ Quién lo va a usar
■ Para qué
■ Dónde
■ Cuándo
■ Cómo
¿Cuál es el objetivo?
![Page 11: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/11.jpg)
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?
![Page 12: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/12.jpg)
La interfaz de usuario 12
![Page 13: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/13.jpg)
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.
![Page 14: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/14.jpg)
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
![Page 15: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/15.jpg)
Usabilidad 15
![Page 16: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/16.jpg)
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
![Page 17: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/17.jpg)
Diseño de interacción 17
![Page 18: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/18.jpg)
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
![Page 19: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/19.jpg)
Herramientas 19
![Page 20: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/20.jpg)
Caso de uso
20
![Page 21: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/21.jpg)
Wireframe
21
![Page 22: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/22.jpg)
Usability testing (pruebas)
22
![Page 23: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/23.jpg)
Tracking de ojos
23
![Page 24: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/24.jpg)
Heatmaps (clicks y ojos)
24
![Page 25: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/25.jpg)
Veamos algún caso y lo charlamos 25
![Page 26: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/26.jpg)
Tareas para la próxima clase 26
![Page 27: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/27.jpg)
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.
![Page 28: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/28.jpg)
■ 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
![Page 29: Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción](https://reader033.fdocument.pub/reader033/viewer/2022051208/546dc1a5b4af9f702c8b554e/html5/thumbnails/29.jpg)
29Hasta la próxima