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

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

on

  • 651 views

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.

Statistics

Views

Total Views
651
Views on SlideShare
651
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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 Presentation Transcript

  • Clase 7/16MEDIOS DIGITALES Interfaz de usuario, usabilidad y diseño de interacción ESCUELA DE CREATIVOS PUBLICITARIOS DE URUGUAY Docente: Chino Carranza
  • ¿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 • Manos en uso • Actividades paralelas • Cantidad de tiempo
  • 7
  • 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 LAS DECISIONES ESTÁN IMPREGNADAS DE ELEMENTOS NO RACIONALES • Emocionales • Psicológicos • Culturales • Morales • Ideoló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 los motivamos a hacerlas • ¿Alguien lo quiere/necesita? • Porqué no lo usarían • ¿Call-to-action?
  • LAINTERFAZDEUSUARIO
  • 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 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
  • USABILIDAD
  • 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
  • DISEÑO DEINTERACCIÓN
  • 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
  • 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 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
  • 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/
  • HASTA LAPRÓXIMA