buenas prácticas de usabilidad para el desarrollo web

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

Cómo usamos realmente 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 realmente no hace la diferenciaProbar es más divertido

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árquica

MUY IMPORTANTEMedianamente importante

Poco importante

Categoría 1Categoría 2Categoría 3Categoría 4

Organización visual jerárquica

Categorí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ño

Disposición de contenido

Uso de convenciones o patrones de diseño

Navegación

Uso de convenciones o patrones de diseño

Selección

Delimitación de áreas

Organización visual jerárquica

Resaltado de alternativas

Resaltado de alternativas

Eliminación del ruido

No llenarnos de contenido

o

Usar demasiadas distracciones

Trabajo grupal de casos

Actividad: Diseñar un sitio web usando Wireframes

Caso 1: Colaboración

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

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

Caso 2: Comunicaciones

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

Caso 2: Comunicaciones

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

Caso 3: Entretenimiento

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)

Caso 3: Entretenimiento

Secciones:InicioConoce a los personajesJuegosActividades y descargasVideosComprarPadresPolítica de privacidad

Caso 4: Educación

Caso 4: Educación

Sistema de aulas virtuales para cursos universitarios.Público: Alumnos y docentes universitariosRoles:

AlumnosDocentesAdministradores

Caso 4: Educación

Secciones:Mis cursos

Curso: Sílabo, Lecciones, Ejercicios, Videoconferencia, Documentos, Enlaces, Anuncios ...

Mi perfilMi agendaManual de usuario

Caso 5: Gobierno

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)

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

Cierre del taller

Presentación de casos y debate

Conclusiones finales

Bibliografía

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

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

Más información (2)

Yahoo! Design Pattern Libraryhttp://developer.yahoo.com/ypatterns/

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