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.

1. Buenas prácticas de
usabilidad para el
desarrollo web
Juan Eladio Sánchez Rosas
jesanchez(a)mozilla.pe
http://www.slideshare.net/juaneladio

2. Cómo usamos
realmente la web

3. No leemos, “escaneamos”

5. ¿Porqué “escaneamos”?
No tenemos tiempo
Sabemos que no necesitamos leer todo
Somos buenos “escaneando” en el Mundo Real

6. Elegimos lo que nos "parece" bien,
NO la “mejor” opción

8. ¿Porqué no elegimos la mejor opción, sólo la primera?
Estamos apurados
No hay castigo por una equivocación
Comparar opciones realmente no hace la
diferencia
Probar es más divertido

9. No seguimos instrucciones

11. ¿Porqué no seguimos instrucciones?
No nos importa mucho
Si encontramos algo que funciona, lo reusamos

12. Buenas prácticas de
usabilidad

13. Organización visual jerárquica

14. Organización visual jerárquica
MUY IMPORTANTE Categoría 1
Medianamente Categoría 2
importante
Categoría 3
Poco importante
Categoría 4

15. Organización visual jerárquica
Categoría
Sección
Elemento
Elemento

16. Uso de convenciones

17. ¿Porqué usar convenciones?
Realmente son útiles
No necesitamos reinventar la rueda siempre

18. Uso de convenciones o patrones de diseño
Disposición de contenido

19. Uso de convenciones o patrones de diseño
Navegación

20. Uso de convenciones o patrones de diseño
Selección

21. Delimitación de áreas

22. Organización visual jerárquica

23. Resaltado de alternativas

24. Resaltado de alternativas

25. Eliminación del ruido

26. No llenarnos de contenido
o
Usar demasiadas distracciones

27. Trabajo grupal de
casos

28. Actividad: Diseñar un sitio
web usando Wireframes

29. Caso 1: Colaboración

30. Caso 1: Colaboración
Un sistema web para registro de actividades de
equipos 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

31. Caso 1: Colaboración
Secciones 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

32. Caso 2: Comunicaciones

33. Caso 2: Comunicaciones
Un sistema web para el envío de SMSs con el
contenido de mensajes de correo electrónico.
Público: Cualquiera con una cuenta de correo.
Roles:
Usuario del servicio

34. Caso 2: Comunicaciones
Secciones del sitio web:
Registro (datos personales)
Inicio de sesión (actualizar datos, agregar contactos,
invitar a amigos)

35. Caso 3: Entretenimiento

36. Caso 3: Entretenimiento
Página web promocional de un personaje para
niños.
Público: Niños entre 6 y 10 años.
Roles:
Ninguno (No necesita iniciar sesión)

37. Caso 3: Entretenimiento
Secciones:
Inicio
Conoce a los personajes
Juegos
Actividades y descargas
Videos
Comprar
Padres
Política de privacidad

38. Caso 4: Educación

39. Caso 4: Educación
Sistema de aulas virtuales para cursos
universitarios.
Público: Alumnos y docentes universitarios
Roles:
Alumnos
Docentes
Administradores

40. Caso 4: Educación
Secciones:
Mis cursos
Curso: Sílabo, Lecciones, Ejercicios, Videoconferencia,
Documentos, Enlaces, Anuncios ...
Mi perfil
Mi agenda
Manual de usuario

41. Caso 5: Gobierno

42. Caso 5: Gobierno
Sitio web de orientación al ciudadano en temas de
electricidad y gas natural
Público: Usuarios de la red eléctrica
Roles
Ninguno (No necesita iniciar sesión)

43. Caso 5: Gobierno
Secciones:
¿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

44. Cierre del taller

45. Presentación de casos y debate

46. Conclusiones finales

47. Bibliografía
KRUG, STEVE.
Don't make me think. A
common sense
approach to Web
Usability. Second
Edition. 2005

48. Más información
INFANTE, Sergio. Usabilidad Web y los niveles de
buena voluntad.
http://www.slideshare.net/neosergio/usabilidad-
web-y-los-niveles-de-buena-voluntad
DEL CARPIO, Jesús. Programación con azúcar.
http://www.slideshare.net/jjdelc/programacion-con-
azucar

49. Más información (2)
Yahoo! Design Pattern Library
http://developer.yahoo.com/ypatterns/

50. Buenas prácticas de
usabilidad para el
desarrollo web
Juan Eladio Sánchez Rosas
jesanchez(a)mozilla.pe
http://www.slideshare.net/juaneladio