Buenas prácticas deusabilidad para eldesarrollo web          Juan Eladio Sánchez Rosas                          jesanchez(...
Cómo usamosrealmente la web
No leemos, “escaneamos”
¿Porqué “escaneamos”?No tenemos tiempoSabemos que no necesitamos leer todoSomos buenos “escaneando” en el Mundo Real
Elegimos lo que nos "parece" bien,      NO la “mejor” opción
¿Porqué no elegimos la mejor opción, sólo la primera?Estamos apuradosNo hay castigo por una equivocaciónComparar opciones ...
No seguimos instrucciones
¿Porqué no seguimos instrucciones?No nos importa muchoSi encontramos algo que funciona, lo reusamos
Buenas prácticas de    usabilidad
Organización visual jerárquica
Organización visual jerárquicaMUY IMPORTANTE           Categoría 1 Medianamente            Categoría 2 importante         ...
Organización visual jerárquicaCategoría  Sección    Elemento    Elemento
Uso de convenciones
¿Porqué usar convenciones?Realmente son útilesNo necesitamos reinventar la rueda siempre
Uso de convenciones o patrones de diseñoDisposición de contenido
Uso de convenciones o patrones de diseñoNavegación
Uso de convenciones o patrones de diseñoSelección
Delimitación de áreas
Organización visual jerárquica
Resaltado de alternativas
Resaltado de alternativas
Eliminación del ruido
No llenarnos de contenido             oUsar demasiadas distracciones
Trabajo grupal de     casos
Actividad: Diseñar un sitio web usando Wireframes
Caso 1: Colaboración
Caso 1: ColaboraciónUn sistema web para registro de actividades deequipos de interés.Público: Estudiantes y docentes unive...
Caso 1: ColaboraciónSecciones del sitio web:  Inicio  Acerca (del sistema organizacional)  Equipos (listado, búsqueda, ver...
Caso 2: Comunicaciones
Caso 2: ComunicacionesUn sistema web para el envío de SMSs con elcontenido de mensajes de correo electrónico.Público: Cual...
Caso 2: ComunicacionesSecciones del sitio web:  Registro (datos personales)  Inicio de sesión (actualizar datos, agregar c...
Caso 3: Entretenimiento
Caso 3: EntretenimientoPágina web promocional de un personaje paraniños.Público: Niños entre 6 y 10 años.Roles:  Ninguno (...
Caso 3: EntretenimientoSecciones:  Inicio  Conoce a los personajes  Juegos  Actividades y descargas  Videos  Comprar  Padr...
Caso 4: Educación
Caso 4: EducaciónSistema de aulas virtuales para cursosuniversitarios.Público: Alumnos y docentes universitariosRoles:  Al...
Caso 4: EducaciónSecciones:  Mis cursos    Curso: Sílabo, Lecciones, Ejercicios, Videoconferencia,    Documentos, Enlaces,...
Caso 5: Gobierno
Caso 5: GobiernoSitio web de orientación al ciudadano en temas deelectricidad y gas naturalPúblico: Usuarios de la red elé...
Caso 5: GobiernoSecciones:  ¿Cómo usar esta página?  Consultas frecuentes sobre servicio de luz  Buzón de sugerencias  Can...
Cierre del taller
Presentación de casos y debate
Conclusiones finales
BibliografíaKRUG, STEVE.Dont make me think. Acommon senseapproach to WebUsability. SecondEdition. 2005
Más informaciónINFANTE, Sergio. Usabilidad Web y los niveles debuena voluntad.http://www.slideshare.net/neosergio/usabilid...
Más información (2)Yahoo! Design Pattern Libraryhttp://developer.yahoo.com/ypatterns/
Buenas prácticas deusabilidad para eldesarrollo web          Juan Eladio Sánchez Rosas                          jesanchez(...
Buenas prácticas de usabilidad para el desarrollo web
Buenas prácticas de usabilidad para el desarrollo web
Buenas prácticas de usabilidad para el desarrollo web
Upcoming SlideShare
Loading in …5
×

Buenas prácticas de usabilidad para el desarrollo web

4,206 views

Published on

El taller presentará una introducción a las buenas prácticas para la formulación, diseño, implementación y despliegue de sitios web, con especial énfasis en usabilidad e interfaces de usuario. Luego, los participantes resolverán casos prácticos relacionacionados con diversas áreas: colaboración, comunicaciones, entretenimiento, educación y gobierno. Estos casos serán presentados, debatidos y contrastados con todos los participantes.

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

No Downloads
Views
Total views
4,206
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
76
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Buenas prácticas de usabilidad para el desarrollo web

  1. 1. Buenas prácticas deusabilidad para eldesarrollo web Juan Eladio Sánchez Rosas jesanchez(a)mozilla.pe http://www.slideshare.net/juaneladio
  2. 2. Cómo usamosrealmente la web
  3. 3. No leemos, “escaneamos”
  4. 4. ¿Porqué “escaneamos”?No tenemos tiempoSabemos que no necesitamos leer todoSomos buenos “escaneando” en el Mundo Real
  5. 5. Elegimos lo que nos "parece" bien, NO la “mejor” opción
  6. 6. ¿Porqué no elegimos la mejor opción, sólo la primera?Estamos apuradosNo hay castigo por una equivocaciónComparar opciones realmente no hace ladiferenciaProbar es más divertido
  7. 7. No seguimos instrucciones
  8. 8. ¿Porqué no seguimos instrucciones?No nos importa muchoSi encontramos algo que funciona, lo reusamos
  9. 9. Buenas prácticas de usabilidad
  10. 10. Organización visual jerárquica
  11. 11. Organización visual jerárquicaMUY IMPORTANTE Categoría 1 Medianamente Categoría 2 importante Categoría 3 Poco importante Categoría 4
  12. 12. Organización visual jerárquicaCategoría Sección Elemento Elemento
  13. 13. Uso de convenciones
  14. 14. ¿Porqué usar convenciones?Realmente son útilesNo necesitamos reinventar la rueda siempre
  15. 15. Uso de convenciones o patrones de diseñoDisposición de contenido
  16. 16. Uso de convenciones o patrones de diseñoNavegación
  17. 17. Uso de convenciones o patrones de diseñoSelección
  18. 18. Delimitación de áreas
  19. 19. Organización visual jerárquica
  20. 20. Resaltado de alternativas
  21. 21. Resaltado de alternativas
  22. 22. Eliminación del ruido
  23. 23. No llenarnos de contenido oUsar demasiadas distracciones
  24. 24. Trabajo grupal de casos
  25. 25. Actividad: Diseñar un sitio web usando Wireframes
  26. 26. Caso 1: Colaboración
  27. 27. Caso 1: ColaboraciónUn sistema web para registro de actividades deequipos de interés.Público: Estudiantes y docentes universitarios.Roles: Usuarios no registrados Usuarios administradores del sistema Usuarios de los equipos de interés Coordinadores Integrantes ordinarios
  28. 28. Caso 1: ColaboraciónSecciones del sitio web: Inicio Acerca (del sistema organizacional) Equipos (listado, búsqueda, ver detalle de equipos, administración de integrantes) Noticias (listado, búsqueda, ver detalle) Eventos (listado, búsqueda, ver detalle
  29. 29. Caso 2: Comunicaciones
  30. 30. Caso 2: ComunicacionesUn sistema web para el envío de SMSs con elcontenido de mensajes de correo electrónico.Público: Cualquiera con una cuenta de correo.Roles: Usuario del servicio
  31. 31. Caso 2: ComunicacionesSecciones del sitio web: Registro (datos personales) Inicio de sesión (actualizar datos, agregar contactos, invitar a amigos)
  32. 32. Caso 3: Entretenimiento
  33. 33. Caso 3: EntretenimientoPágina web promocional de un personaje paraniños.Público: Niños entre 6 y 10 años.Roles: Ninguno (No necesita iniciar sesión)
  34. 34. Caso 3: EntretenimientoSecciones: Inicio Conoce a los personajes Juegos Actividades y descargas Videos Comprar Padres Política de privacidad
  35. 35. Caso 4: Educación
  36. 36. Caso 4: EducaciónSistema de aulas virtuales para cursosuniversitarios.Público: Alumnos y docentes universitariosRoles: Alumnos Docentes Administradores
  37. 37. Caso 4: EducaciónSecciones: Mis cursos Curso: Sílabo, Lecciones, Ejercicios, Videoconferencia, Documentos, Enlaces, Anuncios ... Mi perfil Mi agenda Manual de usuario
  38. 38. Caso 5: Gobierno
  39. 39. Caso 5: GobiernoSitio web de orientación al ciudadano en temas deelectricidad y gas naturalPúblico: Usuarios de la red eléctricaRoles Ninguno (No necesita iniciar sesión)
  40. 40. Caso 5: GobiernoSecciones: ¿Cómo usar esta página? Consultas frecuentes sobre servicio de luz Buzón de sugerencias Canales de orientación (oficinas, teléfonos, e-mails) Problemas frecuentes del servicio de luz
  41. 41. Cierre del taller
  42. 42. Presentación de casos y debate
  43. 43. Conclusiones finales
  44. 44. BibliografíaKRUG, STEVE.Dont make me think. Acommon senseapproach to WebUsability. SecondEdition. 2005
  45. 45. Más informaciónINFANTE, Sergio. Usabilidad Web y los niveles debuena voluntad.http://www.slideshare.net/neosergio/usabilidad-web-y-los-niveles-de-buena-voluntadDEL CARPIO, Jesús. Programación con azúcar.http://www.slideshare.net/jjdelc/programacion-con-azucar
  46. 46. Más información (2)Yahoo! Design Pattern Libraryhttp://developer.yahoo.com/ypatterns/
  47. 47. Buenas prácticas deusabilidad para eldesarrollo web Juan Eladio Sánchez Rosas jesanchez(a)mozilla.pe http://www.slideshare.net/juaneladio

×