Buenas prácticas de usabilidad para el desarrollo web
-
Upload
juan-eladio-sanchez-rosas -
Category
Technology
-
view
4.095 -
download
2
description
Transcript of Buenas prácticas de usabilidad para el desarrollo web
![Page 1: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/1.jpg)
Juan Eladio Sánchez RosasJuan Eladio Sánchez Rosas
jesanchez(a)mozilla.pejesanchez(a)mozilla.pehttp://www.slideshare.net/juaneladiohttp://www.slideshare.net/juaneladio
Buenas prácticas de Buenas prácticas de usabilidad para el usabilidad para el desarrollo webdesarrollo web
![Page 2: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/2.jpg)
Cómo usamos realmente la web
![Page 3: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/3.jpg)
No leemos, “escaneamos”
![Page 4: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/4.jpg)
![Page 5: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/5.jpg)
¿Porqué “escaneamos”?
No tenemos tiempoSabemos que no necesitamos leer todoSomos buenos “escaneando” en el Mundo Real
![Page 6: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/6.jpg)
Elegimos lo que nos "parece" bien,NO la “mejor” opción
![Page 7: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/7.jpg)
![Page 8: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/8.jpg)
¿Porqué no elegimos la mejor opción, sólo la primera?
Estamos apuradosNo hay castigo por una equivocaciónComparar opciones realmente no hace la diferenciaProbar es más divertido
![Page 9: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/9.jpg)
No seguimos instrucciones
![Page 10: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/10.jpg)
![Page 11: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/11.jpg)
¿Porqué no seguimos instrucciones?
No nos importa muchoSi encontramos algo que funciona, lo reusamos
![Page 12: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/12.jpg)
Buenas prácticas de usabilidad
![Page 13: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/13.jpg)
Organización visual jerárquica
![Page 14: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/14.jpg)
Organización visual jerárquica
MUY IMPORTANTEMedianamente importante
Poco importante
Categoría 1Categoría 2Categoría 3Categoría 4
![Page 15: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/15.jpg)
Organización visual jerárquica
Categoría
Sección
Elemento
Elemento
![Page 16: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/16.jpg)
Uso de convenciones
![Page 17: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/17.jpg)
¿Porqué usar convenciones?
Realmente son útilesNo necesitamos reinventar la rueda siempre
![Page 18: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/18.jpg)
Uso de convenciones o patrones de diseño
Disposición de contenido
![Page 19: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/19.jpg)
Uso de convenciones o patrones de diseño
Navegación
![Page 20: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/20.jpg)
Uso de convenciones o patrones de diseño
Selección
![Page 21: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/21.jpg)
Delimitación de áreas
![Page 22: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/22.jpg)
Organización visual jerárquica
![Page 23: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/23.jpg)
Resaltado de alternativas
![Page 24: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/24.jpg)
Resaltado de alternativas
![Page 25: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/25.jpg)
Eliminación del ruido
![Page 26: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/26.jpg)
No llenarnos de contenido
o
Usar demasiadas distracciones
![Page 27: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/27.jpg)
Trabajo grupal de casos
![Page 28: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/28.jpg)
Actividad: Diseñar un sitio web usando Wireframes
![Page 29: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/29.jpg)
Caso 1: Colaboración
![Page 30: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/30.jpg)
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 registradosUsuarios administradores del sistemaUsuarios de los equipos de interés
CoordinadoresIntegrantes ordinarios
![Page 31: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/31.jpg)
Caso 1: Colaboración
Secciones del sitio web:InicioAcerca (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
![Page 32: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/32.jpg)
Caso 2: Comunicaciones
![Page 33: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/33.jpg)
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
![Page 34: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/34.jpg)
Caso 2: Comunicaciones
Secciones del sitio web:Registro (datos personales)Inicio de sesión (actualizar datos, agregar contactos, invitar a amigos)
![Page 35: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/35.jpg)
Caso 3: Entretenimiento
![Page 36: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/36.jpg)
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)
![Page 37: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/37.jpg)
Caso 3: Entretenimiento
Secciones:InicioConoce a los personajesJuegosActividades y descargasVideosComprarPadresPolítica de privacidad
![Page 38: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/38.jpg)
Caso 4: Educación
![Page 39: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/39.jpg)
Caso 4: Educación
Sistema de aulas virtuales para cursos universitarios.Público: Alumnos y docentes universitariosRoles:
AlumnosDocentesAdministradores
![Page 40: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/40.jpg)
Caso 4: Educación
Secciones:Mis cursos
Curso: Sílabo, Lecciones, Ejercicios, Videoconferencia, Documentos, Enlaces, Anuncios ...
Mi perfilMi agendaManual de usuario
![Page 41: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/41.jpg)
Caso 5: Gobierno
![Page 42: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/42.jpg)
Caso 5: Gobierno
Sitio web de orientación al ciudadano en temas de electricidad y gas naturalPúblico: Usuarios de la red eléctricaRoles
Ninguno (No necesita iniciar sesión)
![Page 43: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/43.jpg)
Caso 5: Gobierno
Secciones:¿Cómo usar esta página?Consultas frecuentes sobre servicio de luzBuzón de sugerenciasCanales de orientación (oficinas, teléfonos, e-mails)Problemas frecuentes del servicio de luz
![Page 44: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/44.jpg)
Cierre del taller
![Page 45: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/45.jpg)
Presentación de casos y debate
![Page 46: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/46.jpg)
Conclusiones finales
![Page 47: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/47.jpg)
Bibliografía
KRUG, STEVE.Don't make me think. A common sense approach to Web Usability. Second Edition. 2005
![Page 48: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/48.jpg)
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
![Page 49: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/49.jpg)
Más información (2)
Yahoo! Design Pattern Libraryhttp://developer.yahoo.com/ypatterns/
![Page 50: Buenas prácticas de usabilidad para el desarrollo web](https://reader034.fdocuments.mx/reader034/viewer/2022051817/5482be19b47959dd0c8b48d5/html5/thumbnails/50.jpg)
Juan Eladio Sánchez RosasJuan Eladio Sánchez Rosas
jesanchez(a)mozilla.pejesanchez(a)mozilla.pehttp://www.slideshare.net/juaneladiohttp://www.slideshare.net/juaneladio
Buenas prácticas de Buenas prácticas de usabilidad para el usabilidad para el desarrollo webdesarrollo web