Checklist de usabilidad

Todos queremos que nuestra web sea fácil de usar, tanto para un experto como para alguien mas novato, pero muchas veces hacer que las cosas sean simples requiere mas tiempo y esfuerzo del que imaginamos.

La usabilidad de una web depende de muchos factores, pero sobretodo depende de que el responsable de la web entienda bien el enorme impacto que puede tener mejorar la usabilidad de su sitio.

Leo en un blog de usabilidad la traducción de una lista de cuestiones a comprobar respecto a la usabilidad de un sitio web.

Repasa la lista y seguro que encuentras varias mejoras que poder hacer en tu web.

Técnicos

1.- Validar el código (X)HTML usando el validador de etiquetas del W3C.
2.- Validar el código CSS usando el validador de CSS del W3C.
3.- Comprobar el sitio web al menos en los navegadores IE, Firefox, Opera y Safari.

Imágenes

4.- Añadir los atributos ALT y TITLE a todas las imágenes importantes.
5.- Añadir el atributo LONGDESC a las imágenes que necesiten una descripción.
6.- Escribir un texto alternativo eficiente para las imágenes.
7.- Realizar tus páginas con un tamaño menor a 50KB.
8.- Elegir el tipo de fichero apropiado para tus imágenes.
9.- Añadir una descripción a imágenes que soportan el contenido.
10.- Usar texto plano en vez de imágenes para el contenido importante.

Contenido

11.- Usar tipo de letra sans-serif con un tamaño de texto decente para el texto del body.
12.- Ajustar el contenido principal y secundario, si es necesario para aumentar la legibilidad.
13.- Alinear el texto del body a la izquierda (dependiendo de las lenguas).
14.- Usar EM o porcentaje en lugar d ePX.
15.- Asegurarte que no hay grandes sentencias en mayúscula.
16.- Usar menos de 78 caracteres, incluidos espacios, por linea.
17.- Usar párrafos sencillos y precisos con títulos explicativos.
18.- Usar listas cuando es necesario.
19.- Escribir primero la conclusión y luego la explicación.
20.- Crear suficiente contraste entre el texto y el fondo.
21.- Hacer tu sitio web accesible para navegadores sólo texto.
22.- Asegurarte que no hay páginas “en construcción”.
23.- Incluir una función de imprimir en las páginas con gran cantidad de texto.
24.- Incluir una hoja de estilos para imprimir.
25.- Reemplazar todos los caracteres especiales por su código ISO Latin-1.
26.- Revisar la ortografía y gramática del contenido.

Navegación

27.- Asegurarse que todos los links funcionan mediante el uso del comprobador de links del W3C.
28.- Incluir un link a todas tus páginas principales en la página Home.
29.- Incluir la navegación principal en cada página.
30.- Usar menos de 8 items en la navegación principal.
31.- Distinguir las páginas activas y no activas en el menú.
32.- Usar texto explicativo para los links en lugar de “clic aquí”.
33.- Usar texto explicativo para los links en lugar de términos de negocio.
34.- Hacer distinción entre links visitados y no visitados.
35.- Hacer distinción entre links y texto plano.
36.- Añadir el atributo TITLE a todos los links.
37.- Usar breadcrumbs (“migas de pan”) si tienes una gran cantidad de páginas.
38.- Incluir opciones de búsqueda si tienes una gran cantidad de páginas.
39.- Hacer que el link del logotipo nos lleve a la página de inicio.
40.- Hacer un link de saltar al contenido en las páginas.
41.- Hacer un link del salto al menú en las páginas.
42.- Comprobar si es posible navegar por el sitio web usando las teclas SHIFT-TAB y RETURN.
43.- Asegurarte que no usas ningún links de javascript.

Estructura

44.- Hacer una estructura de página consistente.
45.- Colocar el logotipo arriba a la izquierda.
46.- Colocar una línea explicativa junto al logotipo.
47.- Colocar la caja de búsqueda arriba a la derecha.
48.- Colocar el contenido importante arriba en la página.
49.- Hacer el diseño en un sistema de rejilla.
50.- Hacer un diseño fluido usando porcentajes.
51.- Hacer el sitio web visible con baja resolución.
52.- Usar títulos particulares para todas las páginas.

Formularios

53.- Asegurarte que los usuarios no devuelven un formulario alterado después d eun error.
54.- Hacer una página de error amigable e informativa.
55.- Hacer una página de “gracias” amigable y con confirmación por email.
56.- Añadir un único botón de “submit” y ningún botón de “reset”.
57.- Decirle al usuario lo que le espera después de hacer clic en el botón de submit.
58.- Dividir formularios largos en múltiples páginas.
59.- Dar un espacio al usuario para escribir.
60.- Poner un asterisco en los campos obligatorios.
61.- No cambiar el look estándar de lo campos de entrada del texto.
62.- Preguntar información usando un orden lógico.
63.- Usar campos de entrada dobles para passwords.
64.- Permitir al ordenador, no al usuario, formatear información.
65.- Asegurar que el usuario puede rellenar el formulario entero usando la tecla TAB.
66.- Explicar al usuario por qué se pregunta cierta información.
67.- Explicar al usuario que vamos a hacer con la información.
68.- Usar validación en tiempo real usando AJAX.
69.- Usar la etiqueta LABEL.
70.- Colocar la etiqueta LABEL encima de los campos de entrada, en vez de junto a ellos.
71.- Elegir tipos de entrada correctos para diferentes datos.
72.- Colocar automáticamente el cursor en el campo de entrada superior.
73.- Distinguir los campos activos de los no activos.
74.- Usar cuando sea apropiado las entidades FIELDSET y LEGEND.
75.- Comprobar si el formulario también funciona sin javascript.

Multimedia

76.- Asegurarse que la información/navegación principal no está hecha en Flash.
77.- Asegurarse que la música y los videoclips no empiezan automáticamente.
78.- Asegurarse que la música y los videoclips pueden ser apagados.
79.- Informar al usuario sobre el tamaño y longitud de la música y los videoclips.

Características extras

80.- Hacer una página formateada para los errores 404.
81.- Hacer un mapa del sitio.
82.- Usar RSS (si se añade contenido regularmente).
83.- Hacer una versión de alto contraste del sitio web.
84.- Hacer unas URLs con buena apariencia.
85.- Asegurar que no hay frames en el sitio web.
86.- Asegurar que no hay pop-ups en el sitio web.
87.- Hacer un formulario de contacto en vez de sólo un link al email.

Vía: Not usable
Traducido por :Accesibilidad, Usabilidad y Estandares Web

4 comentarios en “Checklist de usabilidad

  1. Pingback: inversiones inmobiliarias » Usabilidad para blogs

  2. Pingback: Pequeño manual de usabilidad - ExeBlog, desarrollo de videojuegos y más

  3. Pere, gracias por compartir esta lista, creo que va a serme muy útil. Visité el sitio original y copié, en un documento word, los vínculos que se mencionan en algunos de los párrafos (como el 1 y el 2), documento que puedo enviarte si lo deseas.

    Saludos.

    Nabor Garrido
    http://www.textovivo.com.mx

  4. Pingback: Test heurístico: primera aproximación | Consultoría en red

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image