Usabilidad

Según la Organización Internacional para la Estandarización (International Organization for Standardization – ISO) la usabilidad es “la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso”, por lo anterior es importante incluirla en un producto web ya que puede significar un factor de éxito o fracaso del mismo.

En seguida se mencionan algunas acciones importantes a considerar en la construcción, actualización o mantenimiento periódico de los sitios web y repositorios institucionales, las cuales las toman como base el trabajo de Jakob Nielsen “10 Heurísticas de Usabilidad para el Diseño de Interfaces de Usuario” para mejorar la usabilidad en los sitios institucionales. También se recomienda revisar las secciones de Visibilidad y Accesibilidad en este mismo sitio.

1. Ubicación y estado del sistema

Significa mantener informado al usuario de lo que está pasando en el sitio web y ofrecerle una respuesta sobre ello en el menor tiempo posible.

  • Ubicación en el sitio: Mantener visible la ruta de navegación (migas de pan o línea de Ariadna) usada para indicar el recorrido y mantener el acceso al menú principal desde las páginas internas.
  • Estado del sistema: Integrar barras de progreso para recursos cuyo tiempo de respuesta no es inmediato
  • Notificaciones: Incluir notificaciones después de cada acción realizada con éxito como páginas de páginas confirmación de envío de información, suscripción o pago.

2. Relación entre el sistema y el mundo real

Usar un lenguaje familiar y apropiado para los usuarios a los que se dirige el sitio y organizar la información con un orden natural y lógico.

  • Interacción con el usuario: Usar textos orientados al usuario a quien va dirigido el sitio, con los cuales esté familiarizado y sean cercanos a su realidad.
  • Jerarquía del contenido: Distribuir el contenido de forma jerárquica, es decir, destacando los elementos más importantes sobre los que no son tan relevantes.
  • Uso de tablas para maquetación: Evitar el uso de tablas para la maquetación del sitio. Se sugiere separar la capa de contenido de la capa de diseño mediante las hojas de estilo y utilizar división de la página <div>. Se recomienda también revisar el apartado de Tablas accesibles en la sección de Accesibilidad.

3. Control y libertad de usuario

Ofrecer a los usuarios del sitio elementos para cancelar o modificar funciones y que éstas se encuentren claramente marcadas para salir del estado no deseado.

  • Funciones para rehacer y deshacer: Integrar funciones que permitan al usuario tener el control de sus acciones, por ejemplo: cancelar una suscripción, el envío de comentarios o la edición de su perfil.

4. Consistencia y estándares

Los usuarios no deben tener dudas respecto al uso de diferentes palabras, situaciones o acciones que tengan un mismo significado dentro del sitio.

  • Lenguaje: Establecer convenciones (mantén el mismo lenguaje o terminología hacia el usuario en todos los textos del sitio que ayuden a potenciar una comunicación efectiva).
  • Flujo de navegación: Ofrecer una navegación simple (caminos claros desde el origen al destino y sin terminología compleja). La navegación de un sitio web es importante debido a que ayuda a los usuarios a encontrar rápidamente el contenido que desean.
  • Diseño responsivo: Integrar el diseño adaptativo para que el contenido del sitio web sea visible en diferentes dispositivos móviles. Se recomienda hacer pruebas del sitio con las herramientas: Resposinator o bien con Device Mode en Chrome DevTools. Se recomienda revisar el apartado sobre Optimización para móviles en la sección de buenas prácticas de Visibilidad, en este sitio.
  • Revisión con validadores: Revisar periódicamente el sitio con los validadores que proporciona la W3C de HTML, CSS con el propósito de obtener información que permita mejorar continuamente el sitio. Consultar los Servicios de validación de la W3C.

5. Prevención de errores

Pensar que errores podría cometer el usuario y ayudarle a evitarlos.

  • Mensajes de ayuda en caso de error: Diseñar el sitio pensando en los posibles errores que el usuario puede cometer. Incluir mensajes de ayuda para guiar al usuario.
  • Opción “confirmar”: Incluir por ejemplo la opción de confirmar antes de que el usuario pueda comprometerse con alguna acción.
  • Enlaces rotos (ligas rotas): Revisar periódicamente la disponibilidad de los enlaces de las páginas del sitio para evitar proyectar una imagen negativa a los usuarios que buscan información en vínculos a páginas inexistentes o reubicadas dentro del mismo sitio. Se recomienda revisar el apartado de Revisión de enlaces rotos en la sección de buenas prácticas de Visibilidad. 

6. Preferir reconocimiento antes que recordar

Es importante disminuir el uso de la memoria de los usuarios durante la visita al sitio web haciendo visibles los objetos, acciones y opciones. 

  • Información del sitio: Incluir elementos como autocompletar las palabras escritas con anterioridad en los campos de los formularios o bien mostrar las opciones listadas para selección del usuario.

7. Flexibilidad y eficiencia de uso

Se refiere a dar opciones para cada tipo de usuario y los usos que puede darle al sitio.

  • Flexibilidad de uso: Incluir elementos que permitan que el sistema pueda adaptarse a los usuarios frecuentes, diseñando la realización de tareas avanzadas de manera fluida y eficiente.
  • Multimedia: Ejecutar audios y videos bajo demanda (evitando el auto-play).

8. Estética y diseño minimalista

Todo lo que aparezca en el sitio debe tener fundamento y justificación.
  • Información relevante: Mostrar sólo la información relevante o necesaria para el usuario en cada situación. 
  • Ventanas Emergentes: Cuidar el uso excesivo de ventanas emergentes (pop-up).
  • Legibilidad visual: Considerar la existencia de contraste entre el texto y el fondo que no impida su visualización. Se recomienda usar la Herramienta para revisar el contraste (Color Contrast Checker).

9. Reconocimiento y recuperación de errores

Consiste en proporcionar ayuda a los usuarios para reconocer y corregir sus errores, indicando siempre el problema concreto que está ocurriendo y sugerir soluciones.

  • Personalización de páginas de error: Crear una página personalizada que se muestre cuando el usuario ingrese a una página inexistente o el contenido no se encuentre disponible (error 404).

10. Ayuda y documentación

La información de ayuda debe ser breve, concisa, fácil de buscar y enfocada a las tareas del usuario en el sitio.

 

  • Atención al usuario: Incluir en el sitio mecanismos de comunicación con el responsable del sitio web (correo electrónico, formulario de sugerencias, entre otros) y que éste se encuentre visible en la página principal.
  • Ayuda en caso de error: Proporcionar información al usuario sobre problemas concretos que estén ocurriendo en el sitio, así como sugerir soluciones al respecto.
  • Etiquetas de ayuda visual (Tooltips): Agregar textos que estén relacionados con el contenido mostrado. Por ejemplo, en imágenes, botones, cajas de texto, entre otros elementos del sitio. 

 

Recursos UNAM

Descripción: Artículo que aborda los criterios para lograr la usabilidad en sistemas web educativos.
Fecha de publicación: 02 de octubre 2007
Autor: Rebeca Valenzuela Argüelles
Enlace: Ver el artículo

 

Descripción: Artículo que presenta la relación entre accesibilidad y la usabilidad en el contexto actual de la Web.
Fecha de publicación: 05 de agosto 2009
Autor: Esmeralda Serrano Mascaraque
Enlace: http://www.ejournal.unam.mx/ibi/vol23-48/IBI002304804.pdf

 

Recursos externos

Descripción: Verifica hojas de estilo en cascada (CSS) y documentos HTML con hojas de estilo mediante URI, carga del archivo o entrada directa.
Autor: World Wide Web Consortium (W3C)
Enlace: http://jigsaw.w3.org/css-validator/

 

Descripción: Documento donde se definen un conjunto elementos para marcar contenidos de semántica semejante.
Autor: World Wide Web Consortium (W3C)
Enlace: http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/

 

Descripción: Compilado de recursos para mejorar la experiencia del usuario (UX) en sitios web.
Autor: U.S. Department of Health & Human Services
Enlace: http://www.usability.gov/what-and-why/index.html

 

Sitios de Interés

Manual de Responsive Web Design
URL: https://desarrolloweb.com/manuales/responsive-web-design.html

 

Referencias

 

Imagen que representa la posibilidad de acceder a un mismo sitio desde diferentes dispositivos móviles