Este tema ya se mencionó en alguna de las unidades anteriores, cuando hablábamos de la maquetación web. Hablábamos entonces de coherencia en el uso de los elementos gráficos y vimos algunos ejemplos de páginas que usaban un código de colores en las secciones del menú de navegación que se empleaban después en las páginas de estas secciones.
DIW03.- Usabilidad en la Web.
2.2.- Consistencia.
Cuando hablamos de consistencia en un sistema de navegación hacemos referencia a que sus elementos son coherentes en todas las páginas que componen un sitio web.
La navegación en un sitio Web debe de ser predecible para los usuarios. Las barras de navegación deben ser coherentes en su diseño manteniendo el mismo tema visual en las diferentes páginas de un sitio.
En la imagen que ilustra este apartado se muestran tres ejemplos de barras de navegación consistentes en su diseño que mantienen su aspecto y comportamiento en todas sus páginas:
- El primer ejemplo (apuntado por una flecha con el número 1) pertenece al sitio de Libros Web. En las páginas de este sitio, el sistema de navegación está formado por unos enlaces (Home, Consejos, Contactos, Noticias, Redes Sociales, Usabilidad, etcétera) con la letra de color blanco sobre un fondo de color negro. Los enlaces se ponen de color rojo cuando el ratón pasa por encima. En la imagen aparece en rojo el enlace Usabilidad.
- El segundo ejemplo (apuntado por una flecha con el número 2) pertenece al sitio de Jamendo. En las páginas de este sitio, el sistema de navegación está formado por unos enlaces (Música, Selección, Jamendo Pro, etcétera) con letra de color blanco sobre un fondo de color morado que actúan como un menú desplegable cuando el ratón pasa por encima. En la imagen el ratón está situado sobre el enlace Música cuyas letras pasan a ser de color anaranjado con una sombra añadida y con un fondo de color blanco que se repite en todas las opciones del menú desplegado.
- El tercer ejemplo (apuntado por una flecha con el número 3) pertenece al sitio del Ministerio de Educación y Ciencia. En las páginas de este sitio, el sistema de navegación está formado por unos enlaces (Ministerio, Prensa, Iniciativas, etcétera) con la letra de color blanco con un fondo con dos tonos de color azul. Cuando el ratón se sitúa sobre el enlace el texto aparece subrayado y cuando se visita un enlace éste cambia su color de fondo por dos tonos de grises.
Además, si vas a incorporar a tu página un sistema de búsqueda para que el usuario pueda encontrar la información que busca, este sistema debe ser igualmente consistente con su diseño. Se suele emplear la palabra "Buscar" dentro de un recuadro de color blanco, el cual puede ir acompañado, o no, de otros elementos adicionales:
- En el primer ejemplo no existe una herramienta buscar como tal. En su lugar, emplea un diseño en dos columnas en el que una parte de la segunda columna contiene un conjunto de palabras de distinto tamaño, ordenadas alfabéticamente y agrupadas bajo el título "Términos" que actúa como filtro de los contenidos que muestra en la primera columna. Estas palabras cambian de color cuando el ratón pasa por encima.
- En el segundo ejemplo el sistema de búsqueda consta de un único rectángulo de color blanco que contiene la palabra "Buscar" seguido de tres puntos. En este rectángulo el usuario tendrá que escribir y pulsar la tecla de entrada (intro, return o enter).
- En el tercer ejemplo el sistema de búsqueda está formado por una palabra "Buscar" seguida del carácter de dos puntos, un rectángulo blanco con el icono de una lupa seguido de la palabra buscar y tres puntos, y la palabra "Buscar" en negrita sobre un fondo de color azul que al pulsarse con el ratón inicia la búsqueda.
A la vista de los tres ejemplos anteriores, podemos decir que el sistema de búsqueda es una parte del diseño Web que todavía no está muy estandarizado y que puede presentar problemas a los usuarios con un nivel de experiencia bajo:
- Los términos del primer ejemplo no forman parte de un sistema de búsqueda sino que se emplean como una forma de estructurar los contenidos y enlazarlos entre sí.
- En el segundo ejemplo un usuario acostumbrado a realizar búsquedas en Google, con la predicción de palabras activado, en el que se le van mostrando automáticamente enlaces que concuerdan con lo tecleado hasta el momento, puede llegar a pensar que la herramienta de búsqueda de Jamendo no funciona.
- Es, quizás, el tercer ejemplo el que no deja lugar a dudas sobre su funcionamiento y con el que los usuarios tendrán menos problemas.