Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción
•
1 recomendación•2,271 vistas
Nociones básicas sobre diseño de interfaz e interacción, considerando usabilidad y las distintas formas de interacción con un producto web.
Recomendados
Más contenido relacionado
Destacado
Similar a Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción
Similar a Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción (20)
Más de Daniel Carranza
Más de Daniel Carranza (20)
Último
Último (20)
Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción
- 1. Medios Digitales Interfaz de usuario, usabilidad y diseño de interacción 1 Clase 7/16 Escuela de Creativos Publicitarios de Uruguay Docente: Chino Carranza
- 2. Tareas de la clase pasada 2
- 3. ¿Cómo navegamos en Internet? 3
- 4. 4 Depende...
- 5. Factores cualitativos • Momento • Contexto • Humor • Atención 5
- 6. Factores cuantitativos • Navegador • Tamaño y tipo de pantalla • Tamaño y tipo de dispositivo • Manos en uso • Actividades paralelas • Cantidad de tiempo 6
- 7. 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
- 8. Las decisiones están impregnadas de elementos no racionales 8 ■ Emocionales ■ Psicológicos ■ Culturales ■ Morales ■ Ideológicos
- 9. Antes de diseñar nada 9
- 10. ¿Cuál es el objetivo? 10 ■ Quién lo va a usar ■ Para qué ■ Dónde ■ Cuándo ■ Cómo
- 11. ¿Cuales son las motivaciones? 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?
- 12. La interfaz de usuario 12
- 13. Sólo algunos elementos a tomar en cuenta 13 ■ Botones ■ Animación ■ Menúes ■ Contenido ■ Comentarios ■ Disposición ■ Vínculos ■ Colores ■ Paginación ■ Retroalimentación ■ Formularios ■ Largo, largo, etc.
- 14. Principios para guiarse 14 ■ Consistencia ■ Sensación de control ■ Tiempo para lograr una tarea/atajos ■ No sobreexigir a la memoria ■ Retroalimentar con información ■ Intuitivo ■ Clausura de diálogos ■ Metáforas ■ Manejo de errores ■ Ordenar según necesidades del usuario (no según cómo nosotros ■ Posibilidad de revertir procesamos esa información)
- 15. Usabilidad 15
- 16. Aspectos a atender 16 ■ Legibilidad ■ Visibilidad/ocultación ■ Obviedad ■ Orden y jerarquía ■ Claridad ■ Qué, cuándo y cómo se muestra la información ■ Ruido/saturación ■ Accesibilidad ■ Espacio en blanco ■ Convenciones
- 17. Diseño de interacción 17
- 18. Aspectos a atender 18 ■ Tiempo ■ Lo que queremos que el usuario haga ■ Cantidad de información ■ Lo que el usuario sabe hacer ■ Estímulos ■ Contexto ■ Reconocimiento de patrones ■ Cantidad de clicks ■ Ventana/s
- 19. Herramientas 19
- 20. 20 Caso de uso
- 21. 21 Wireframe
- 24. 24 Heatmaps (clicks y ojos)
- 25. Veamos algún caso y lo charlamos 25
- 26. Tareas para la próxima clase 26
- 27. 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.
- 28. Algunas herramientas para wireframes 28 ■ http://www.mockflow.com/ ■ http://www.lumzy.com/ ■ http://www.hotgloo.com/ ■ http://lovelycharts.com/ ■ http://dub.washington.edu:2007/ ■ http://www.gliffy.com/wireframe- denim/ software/ ■ https://gomockingbird.com/ ■ http://www.fluidia.org/ ■ http://cacoo.com/
- 29. Hasta la próxima 29