Clase 7/16MEDIOS DIGITALES Interfaz de usuario, usabilidad y diseño de interacción          ESCUELA DE CREATIVOS PUBLICITA...
¿CÓMONAVEGAMOSENINTERNET?
Depende
4    FACTORES    CUALITATIVOS     • Momento     • Contexto     • Humor     • Atención
5
6    FACTORES    CUANTITATIVOS     • Navegador     • Tamaño y tipo de pantalla     • Tamaño y tipo de dispositivo     • Ma...
7
8    NO SOMOS ROBOTS,    NO LEEMOS TODO,    NI OBSERVAMOS    CADA DETALLE.     •   “Escaneo” de las páginas     •   Impaci...
9    LAS DECISIONES    ESTÁN IMPREGNADAS    DE ELEMENTOS NO    RACIONALES      •   Emocionales      •   Psicológicos      ...
ANTES DEDISEÑARNADA
11     ¿CUÁL ES EL     OBJETIVO?      •   Quién lo va a usar      •   Para qué      •   Dónde      •   Cuándo      •   Cómo
12     ¿CUÁLES     SON LAS     MOTIVACIONES?      •   Porqué lo van a usar      •   Qué cosas queremos que hagan y cómo lo...
LAINTERFAZDEUSUARIO
14     SÓLO ALGUNOS     ELEMENTOS A     TOMAR EN CUENTA      •   Botones       •   Animación      •   Menúes        •   Co...
15     PRINCIPIOS     PARA GUIARSE      •   Consistencia                    •   Sensación de control      •   Tiempo para ...
USABILIDAD
17     ASPECTOS A     ATENDER      •   Legibilidad         •   Convenciones      •   Obviedad            •   Visibilidad/o...
DISEÑO DEINTERACCIÓN
19     ASPECTOS A     ATENDER      •   Tiempo                    •   Ventana/s      •   Cantidad de información   •   Lo q...
HERRAMIENTAS
Caso de uso
Wireframe
Usability testing   (pruebas)
Tracking de ojos
Heatmaps
26     TAREAS     PARA LA     PRÓXIMA     CLASE
•   Juntarse en equipos de a dos o tres.•   Pensar una idea (publicitaria o no) para un sitio o aplicación que    entre en...
ALGUNASHERRAMIENTASPARA WIREFRAMES •   http://                      •   http://www.fluidia.org/     www.mockflow.com/       ...
HASTA LAPRÓXIMA
Upcoming SlideShare
Loading in...5
×

La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012

475

Published on

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.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
475
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012

  1. 1. Clase 7/16MEDIOS DIGITALES Interfaz de usuario, usabilidad y diseño de interacción ESCUELA DE CREATIVOS PUBLICITARIOS DE URUGUAY Docente: Chino Carranza
  2. 2. ¿CÓMONAVEGAMOSENINTERNET?
  3. 3. Depende
  4. 4. 4 FACTORES CUALITATIVOS • Momento • Contexto • Humor • Atención
  5. 5. 5
  6. 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. 7
  8. 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. 9 LAS DECISIONES ESTÁN IMPREGNADAS DE ELEMENTOS NO RACIONALES • Emocionales • Psicológicos • Culturales • Morales • Ideológicos
  10. 10. ANTES DEDISEÑARNADA
  11. 11. 11 ¿CUÁL ES EL OBJETIVO? • Quién lo va a usar • Para qué • Dónde • Cuándo • Cómo
  12. 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. 13. LAINTERFAZDEUSUARIO
  14. 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. 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. 16. USABILIDAD
  17. 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. 18. DISEÑO DEINTERACCIÓN
  19. 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. 20. HERRAMIENTAS
  21. 21. Caso de uso
  22. 22. Wireframe
  23. 23. Usability testing (pruebas)
  24. 24. Tracking de ojos
  25. 25. Heatmaps
  26. 26. 26 TAREAS PARA LA PRÓXIMA CLASE
  27. 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. 28. ALGUNASHERRAMIENTASPARA 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. 29. HASTA LAPRÓXIMA
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×