Your SlideShare is downloading. ×
0
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
La Escuelita - Medios Digitales - Clase 7 - Interfaz de usuario, usabilidad y diseño de interacción - 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

458

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, …

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
458
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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. ¿CÓMONAVEGAMOSENINTERNET?
  3. Depende
  4. 4 FACTORES CUALITATIVOS • Momento • Contexto • Humor • Atención
  5. 5
  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
  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 LAS DECISIONES ESTÁN IMPREGNADAS DE ELEMENTOS NO RACIONALES • Emocionales • Psicológicos • Culturales • Morales • Ideológicos
  10. ANTES DEDISEÑARNADA
  11. 11 ¿CUÁL ES EL OBJETIVO? • Quién lo va a usar • Para qué • Dónde • Cuándo • Cómo
  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. LAINTERFAZDEUSUARIO
  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 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. USABILIDAD
  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. DISEÑO DEINTERACCIÓN
  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. HERRAMIENTAS
  21. Caso de uso
  22. Wireframe
  23. Usability testing (pruebas)
  24. Tracking de ojos
  25. Heatmaps
  26. 26 TAREAS PARA LA PRÓXIMA CLASE
  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. 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. HASTA LAPRÓXIMA

×