View
429
Download
2
Category
Preview:
DESCRIPTION
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.
Citation preview
Clase 7/16
MEDIOS DIGITALESInterfaz de usuario, usabilidad y diseño de interacción
ESCUELA DE CREATIVOS PUBLICITARIOS DE URUGUAYDocente: Chino Carranza
¿CÓMO NAVEGAMOS EN INTERNET?
Depende
FACTORES CUALITATIVOS
4
•Momento
•Contexto
•Humor
•Atención
5
FACTORES CUANTITATIVOS
6
•Navegador
•Tamaño y tipo de pantalla
•Tamaño y tipo de dispositivo
•Manos en uso
•Actividades paralelas
•Cantidad de tiempo
7
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
LAS DECISIONES ESTÁN IMPREGNADAS DE ELEMENTOS NO RACIONALES
• Emocionales
• Psicológicos
• Culturales
• Morales
• Ideológicos
9
ANTES DE DISEÑAR NADA
11
• Quién lo va a usar
• Para qué
• Dónde
• Cuándo
• Cómo
¿CUÁL ES EL OBJETIVO?
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?
LA INTERFAZ DE USUARIO
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.
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
USABILIDAD
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
DISEÑO DE INTERACCIÓN
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
HERRAMIENTAS
Caso de uso
Wireframe
Usability testing (pruebas)
Tracking de ojos
Heatmaps
TAREAS PARA LA PRÓXIMA CLASE
26
• 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
• 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
HASTA LA PRÓXIMA
Recommended