La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de...
-
Upload
daniel-carranza -
Category
Education
-
view
427 -
download
2
description
Transcript of La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de...
![Page 1: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/1.jpg)
Clase 7/16
MEDIOS DIGITALESInterfaz de usuario, usabilidad y diseño de interacción
ESCUELA DE CREATIVOS PUBLICITARIOS DE URUGUAYDocente: Chino Carranza
![Page 2: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/2.jpg)
¿CÓMO NAVEGAMOS EN INTERNET?
![Page 3: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/3.jpg)
Depende
![Page 4: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/4.jpg)
FACTORES CUALITATIVOS
4
•Momento
•Contexto
•Humor
•Atención
![Page 5: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/5.jpg)
5
![Page 6: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/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: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/7.jpg)
7
![Page 8: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/8.jpg)
NO SOMOS ROBOTS, NO LEEMOS TODO, NI OBSERVAMOS CADA DETALLE.
8
• “Escaneo” de las páginas
• Impaciencia
• Decisiones rápidas e impulsivas
• Intuición + experiencias previas
• Enorme competencia por nuestra atención
![Page 9: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/9.jpg)
LAS DECISIONES ESTÁN IMPREGNADAS DE ELEMENTOS NO RACIONALES
• Emocionales
• Psicológicos
• Culturales
• Morales
• Ideológicos
9
![Page 10: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/10.jpg)
ANTES DE DISEÑAR NADA
![Page 11: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/11.jpg)
11
• Quién lo va a usar
• Para qué
• Dónde
• Cuándo
• Cómo
¿CUÁL ES EL OBJETIVO?
![Page 12: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/12.jpg)
12
• 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?
¿CUÁLESSON LAS MOTIVACIONES?
![Page 13: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/13.jpg)
LA INTERFAZ DE USUARIO
![Page 14: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/14.jpg)
SÓLO ALGUNOS ELEMENTOS A TOMAR EN CUENTA
14
• Botones
• Menúes
• Comentarios
• Vínculos
• Paginación
• Formularios
• Animación
• Contenido
• Disposición
• Colores
• Retroalimentación
• Largo, largo, etc.
![Page 15: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/15.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 (skeumorfismo)
• Ordenar según necesidades del
usuario (no según cómo nosotros procesamos esa información)
15
![Page 16: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/16.jpg)
USABILIDAD
![Page 17: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/17.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
17
![Page 18: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/18.jpg)
DISEÑO DE INTERACCIÓN
![Page 19: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/19.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
19
![Page 20: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/20.jpg)
HERRAMIENTAS
![Page 21: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/21.jpg)
Caso de uso
![Page 22: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/22.jpg)
Wireframe
![Page 23: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/23.jpg)
Usability testing (pruebas)
![Page 24: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/24.jpg)
Tracking de ojos
![Page 25: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/25.jpg)
Heatmaps
![Page 26: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/26.jpg)
TAREAS PARA LA PRÓXIMA CLASE
26
![Page 27: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/27.jpg)
• 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
![Page 28: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/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/
ALGUNAS HERRAMIENTAS PARA WIREFRAMES
![Page 29: La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012](https://reader034.fdocument.pub/reader034/viewer/2022042521/549ecbe5b47959b4608b46b4/html5/thumbnails/29.jpg)
HASTA LA PRÓXIMA