Agrupar los contenidos en «cápsulas de información»
Cuando el visitante «aterriza» en una página web lo primero que intenta es escanear la información dividendo el área de contenidos en cápsulas de información «digeribles». Cada idea, mensaje o funcionalidad debe destacarse con un protagonismo propio.
Cuanto más simples y claras sean las cápsulas de información, mejor. Hay que aligerar las páginas sin atosigar con contenidos innecesarios.
El uso de espacios en blanco separando párrafos de texto, imágenes, botones, banners, etc., hace que se incremente la compresión de los mensajes y mejore la experiencia del usuario permitiéndole un respiro en sus «saltos de vista» de unos contenidos a otros.
Para organizar bien los contenidos de una web hay que ponerse en la posición del usuario. Se trata de agrupar contenidos, funcionalidades y tareas de forma lógica, sencilla e intuitiva para el usuario. Hay que agrupar los contenidos en base a sus necesidades y no al organigrama de la empresa.
En el ejemplo que se muestra a continuación se observa la web de la empresa Driscoll´s productora y comercializadora de fresas y frutas del tipo berry (frambuesas, arándanos, moras, etc.). A la izquierda se muestra la web antigua, con mucha densidad de textos, en los que el usuario debía hacer un esfuerzo de lectura detallada para encontrar la información de su interés. A la derecha se muestra la nueva web tras un rediseño en el que se han agrupado los temas de interés de forma muy visual en «cápsulas de información» tales como: imágenes de los productos con un tagline que destaca un beneficio, recetas de cocina, testimonios de clientes e información sobre su cultivo ecológico. Con un golpe de vista, el usuario sabe qué puede encontrar, elegir lo que le interesa y hacer clic para obtener más información.
Card Sorting
Esta técnica de tarjetas resulta útil cuando se quiere construir una estructura de contenidos basándose en el punto de vista del usuario. Consiste en observar y analizar la forma en que los usuarios agrupan y asocian los contenidos que pueda ofrecer una web, a través de unas tarjetas etiquetadas con diferentes temas. Cada tema o contenido se etiqueta y se escribe en una tarjeta. Hay dos tipos de card sorting:
1. Abierto: los usuarios pueden agrupar las diferentes categorías temáticas con total libertad, eligiendo las tarjetas que irían dentro de cada categoría.
2. Cerrado: se establece un número limitado de conjuntos, de forma que el usuario debe ubicar cada tema en uno de esos grupos. Por ejemplo, se establecen desde el principio los grupos «quiénes somos», «productos» y «servicios» y el usuario debe incluir cada tema en una de esas 3 categorías.
Jerarquizar los contenidos: diseño de páginas escaneables
El diseñador debe mostrar los contenidos de forma que permita al usuario escanear la web, facilitando la identificación de los contenidos de mayor interés, la interactividad y la navegación por las diferentes páginas con la máxima fluidez.
Jerarquizar los contenidos ayuda a seleccionar lo más relevante. La importancia de los contenidos viene determinada en buena medida por su ubicación. Se trata de situar los contenidos más relevantes en las «zonas calientes» que retienen más la atención del visitante.
Por otra parte, los usuarios del mundo occidental leen de izquierda a derecha y de arriba abajo. Cuanto más cerca de la parte superior izquierda estén los contenidos, mayor importancia o nivel jerárquico tendrán y, menos, cuanto más cerca se sitúen del lado inferior derecho. Para los usuarios cuyos idiomas se lea de derecha a izquierda (por ejemplo el japonés o el árabe), el mayor nivel jerárquico estará en la parte superior derecha y el inferior, en la parte inferior izquierda.
En el ejemplo siguiente se muestra cómo la multinacional IKEA tiene una web en dos idiomas para el mercado de Arabia Saudita, en inglés y en árabe. Para el segundo idioma cambia la orientación.
Ofrecer una navegación clara y autoexplicativa: los menús de navegación
El viaje por la web debe transcurrir de forma lógica, e intuitiva. Es la forma de no exigir esfuerzo alguno al usuario para que éste navegue como y hacia dónde quiera. Las herramientas clave para ayudar a una buena navegación son los menús.
Los menús de navegación son el equivalente a los letreros indicadores de las diferentes secciones de un centro comercial. Cada pestaña de un menú de navegación es la puerta de entrada a un grupo de contenidos homogéneo.
El etiquetado de los menús debe ser claro, simple y familiar para el usuario. Hay que evitar la jerga corporativa. Es importante utilizar frases y palabras muy descriptivas, breves, claras y que entienda el usuario. Para ello es muy práctico hacer un thesaurus o compendio de vocablos utilizados por los usuarios. En las etiquetas o títulos descriptivos hay que hablar la lengua del usuario y utilizar su «nomenclatura».
A continuación se muestran las webs de dos bodegas de Estados Unidos, como ejemplos, en un caso de web confusa (Dolce Wine) y en otro de web clara (Edna Valley Vineyard). En la primera, las etiquetas del menú de navegación son: pedigree, artistry, belong, acquire y enjoy. No transmiten lo que contienen, habrá que hacer un esfuerzo de imaginación y hacer clic para saber que pedrigree (pedrigí) habla de la bodega y su filosofía, artistry del proceso de elaboración del vino, belong de sus viñedos y enjoy son sugerencia de con qué tomar el vino.
En el ejemplo siguiente, de la página de inicio de la bodega Edna Valley, el etiquetado del menú principal es muy claro para el usuario, identifica al instante su contenido. About us (Quiénes somos), informa sobre la empresa, wines (vinos), sobre sus vinos, club Edina, sobre el club de vino, events (eventos) sobre eventos y acontecimientos en torno a la bodega y visit us (visítanos), sobre visitas a la bodega.
En los menús se debe utilizar siempre texto, excepto cuando se incluyan símbolos universalmente identificados como puede ser el carrito de compra. En todo caso, si se utilizan símbolos, conviene que al situarse sobre ellos con el ratón aparezca un texto que explique lo que representan. Es importante que cuando el usuario haga clic en un enlace o una pestaña del menú, se destaque visualmente de alguna forma, por ejemplo con un cambio de color o tamaño del texto.
En el mundo real es relativamente más fácil ubicarse que en el virtual. Cuando leemos un libro sabemos en qué capítulo estamos, el número de páginas que hemos leído y las que faltan por terminar. Si vamos de viaje, sabemos cuántos kilómetros hemos recorrido y los que quedan para llegar a nuestro destino. En una web, esta perspectiva no existe de forma natural, hay que crearla explícitamente. El usuario que se encuentra navegando en una determinada página no sabe si esa tiene diez o cien páginas, ni dónde está ubicado dentro de todo el contexto. Dos formas de darle pistas de dónde está es: poner título a todas las páginas e incorporar el denominado breadcrumb o «migas de pan», que indican al usuario donde está y la relación jerárquica de esta página respecto a la estructura de la web. Se trata de reflejar el itinerario que ha seguido hasta llegar allí.
Familiaridad-Convencionalismos
El usuario está acostumbrado a ver los menús de navegación, los cuadros de búsqueda, los carritos de compra y otras muchas funcionalidades como iconos o imágenes, en lugares concretos dentro del «espacio» de la web y con formatos que le resultan familiares. También es importante la familiaridad en los títulos de las pestañas del menú principal, tales como: quiénes somos, nuestros clientes, productos, FAQs (preguntas más frecuentes), contacto, mapa web, etc.
Otro motivo para aplicar criterios estandarizados es que los convencionalismos han llegado a serlo porque han demostrado que funcionan. La predicción puede ser aburrida en el mundo real pero en el mundo virtual es, simplemente, efectiva. Los usos y costumbres del diseño gráfico de webs permiten al usuario visitar la web sin sorpresas y sin tener que hacer el esfuerzo de adivinar qué representa o cómo funciona cada cosa.
Algunos apartados en los que es especialmente importante guardar esta familiaridad en el diseño son los siguientes:
• El logotipo de la empresa: debe ubicarse en la parte superior izquierda de cada una de las páginas del sitio, o al menos las principales; al hacer clic en el logo debe abrirse la página de inicio.
• Los enlaces: deben aparecer subrayados, en color azul preferentemente, cambiando el color cuando ha sido ya visitado por el usuario.
• El buscador debe aparecer bien visible en la página de inicio, en la parte superior, preferiblemente a la derecha.
• Ubicar el carrito de compras (view cart) —también se usa la expresión «mi cuenta» (my account) —en la página de inicio.
• Ubicar también en la página de inicio, el área de acceso restringido, incluyendo los recuadros de nombre de usuario y contraseña.
Consistencia
Para que el usuario sea consciente de que está navegando dentro del mismo sitio web hay que mantener una coherencia de diseño, es decir, una uniformidad en la estructura de las páginas que forman el sitio, y también en los colores empleados. Los menús de navegación, el logotipo, y en general los elementos que se repiten en cada página del sitio deben ser iguales y su ubicación la misma. De nuevo el objetivo es que el usuario no tenga que hacer el esfuerzo de buscar en cada página estos elementos.
Descarga rápida
Acceder a una web no debe llevar más de cuatro segundos, de lo contrario, la probabilidad de que los usuarios abandonen la página es elevada. El tiempo de descarga dependerá del tipo de conexión telefónica (ADSL, módem, etc.) utilizada.
Entrando en la página web www.alexa.com se puede conocer el tiempo de descarga de un determinado sitio web. Así, por ejemplo, la web del fabricante de zapatos Camper tarda en cargarse 5,359 segundos (lo cual se considera «muy lento»), mientras que un 83% de las webs lo hacen más rápido, según Alexa. Para conocer la velocidad de carga de una página, en la página de Alexa hay que insertar la dirección web de esa página en la ventanilla que aparece en la página de inicio, luego hacer clic en Alexa traffic rank y, a continuación, hacer clic sobre Traffic Stats.
Hay que vigilar los tiempos de descarga no sólo de la página principal, sino de todas las demás, así como los tiempos al hacer clic en cualquier enlace, en interactuar con la web o el tiempo de descarga de documentos, formularios, etc.
Cómo reducir la velocidad de carga de una web
• Optimizar las fotografías, imágenes, audio y vídeo en formatos poco «pesados».
• Minimizar o comprimir código de programación en lenguajes como JavaScript o CSS.
• Evitar páginas de bienvenida que deban descargarse antes de entrar propiamente en la página de inicio.
• Hacer copias «caché» de las páginas del sitio que no se modifican para usuarios que vuelven a entrar en la web.
• Ver indicaciones sobre cómo reducir velocidad de carga en: http://code.google.com
• Solicitar al consultor informático que utilice la herramienta para webmaster de Google, Page Speed (http://code.google.com/intl/es/speed/page-speed/) para reducir la velocidad de carga.
Accesos múltiples a la información
La web debe proveer múltiples formas de acceso a los contenidos. En la siguiente ilustración, se muestran las diferentes opciones de búsqueda de la web de la empresa juguetera Imaginarium, uno de los sitios con más opciones de búsqueda de productos. Aunque no es necesario ofrecer un abanico tan amplio de posibilidades, sí es deseable al menos ofrecer varias alternativas para llegar a la misma información: a través del menú principal, mediante el menú lateral de productos o servicios y con un buscador, o las secciones en la parte central donde se destaquen los productos principales o las líneas de producto.
Optimización para navegadores y tamaños de pantalla
La web debe estar diseñada de forma que se vea correctamente en los diferentes navegadores que utilizan los usuarios; sobre todo tiene que estar optimizada para el Navegador Internet Explorer y para Mozilla Firefox que son, con diferencia, los más utilizados, con unos porcentajes en Europa del 62% y del 28% en 2010.
Las webs se tienen que optimizar a un determinado tamaño de pantalla. Los usuarios utilizarán diferentes tamaños de pantalla. Se trata de optimizar al tamaño más usual. Se puede optimizar la web a muchos tamaños, tantos como formatos de pantallas existentes (800 x 600, 1024 x 758, 1280 x 1024, etc.). Actualmente el tamaño más utilizado es 1024 X 758 píxeles.
Cómo saber el tamaño de pantalla más utilizado por los usuarios
A través de Google Analytics, la herramienta de análisis de visitas a la web de Google, se pueden conocer los tamaños de pantalla que utilizan los visitantes de una web. Esta información está disponible en la pestaña: usuarios-resolución de pantalla.
En el ejemplo siguiente se muestra cómo un 35% de los usuarios que visitaron la web en un periodo de tiempo determinado tenían una resolución de pantalla de 1024 X 768 píxeles, un 26% de 1280 x 800 y otros tamaños de pantalla y sus porcentajes, menores todos al 10%.
Debido a la gran variedad de dispositivos, incluidos los soportes móviles, hay una polémica entre los diseñadores gráficos de webs sobre utilizar lo que se denomina diseño fijo o líquido. El primero supone que la web tiene siempre el mismo tamaño independientemente del tamaño de pantalla en la que se visualice, mientras que el segundo se adapta a la pantalla. El inconveniente de este último es que esa adaptación no es perfecta ya que puede distorsionar el texto y los elementos dificultando la visión y lectura. La controversia está hoy en día a favor del diseño fijo; existe una variación del diseño líquido, llamado diseño flexible, que permite una adaptación al tamaño de la pantalla hasta ciertos límites, mínimo y máximo.
Cumplimiento de estándares y accesibilidad
Dos aspectos importantes para mejorar la usabilidad de una web son el cumplimiento de estándares y la accesibilidad. Ambos aspectos tienen que ver con las recomendaciones que indica el organismo W3C (World Wide Web Consortium).
• Cumplimiento de estándares: de la misma forma que las personas utilizan los idiomas para comunicarse por escrito y para ello existen una normas de ortografía, los estándares web son las recomendaciones y normas sobre cómo se debe escribir el código de programación acordado por la comunidad de programadores y diseñadores. Esta comunidad está representada por el W3C que es el organismo encargado de normalizar los códigos de programación para el desarrollo de webs, tales como HTML, XHTML y CSS, entre otros. Los buenos programadores siguen los estándares recomendados por el W3C, que viene a ser como la «Real Academia de la Lengua Universal de los Programadores».
Test de cumplimiento de estándares
En http://validator.w3.org se puede ver fácilmente si una web tiene errores de programación respecto a los estándares del W3C y cuáles son éstos. En el ejemplo siguiente insertamos el dominio de una empresa y vemos que nos indica que tiene 24 errores en el lenguaje de programación XHTML. También, bajando con el scroll, veríamos cuáles son esos errores y cómo corregirlos. Aunque esto último es trabajo para el consultor informático que es el que sabe cómo cambiar el código de programación.
• Accesibilidad: es otra cuestión que el programador de la web debe tener en cuenta. No es un requisito imprescindible, de hecho un 90% de las webs de empresa no son accesibles, según las recomendaciones del W3C. La accesibilidad se define como la posibilidad de que una web pueda ser visitada y utilizada por el mayor número posible de personas, independientemente de las limitaciones técnicas, intelectuales o físicas del usuario o de las derivadas del contexto de uso. Según el Instituto Nacional de Estadística un 9% de la población española tiene algún tipo de discapacidad. En Estados Unidos este colectivo totaliza ya el 20% de la población. El envejecimiento de la población incrementará progresivamente el número de personas con algún tipo de discapacidad. Programar una web accesible no es sólo una cuestión de «hacer las cosas de forma correcta y cívica», es también cuestión de llegar a un mayor número de usuarios.
El W3C ha definido 3 niveles de accesibilidad: A (nivel mínimo), AA (nivel medio) y AAA (nivel superior). Los organismos públicos en España están obligados a cumplir el nivel AA, las empresas no están obligadas por ley a cumplir ningún nivel pero lo más aconsejable es que cumplan al menos los requisitos del nivel A. Para una web de nueva creación el cumplimiento de este nivel mínimo no debe suponer prácticamente coste adicional y a cambio esto supondrá que la información sea encontrada y asimilada de forma más rápida y fácil por todos los usuarios, incluidos aquellos que tengan algún tipo de discapacidad. Por si fuera poco, también lo agradecen los motores de búsqueda (como Google) por lo que repercute en un mayor posicionamiento.
Test de accesibilidad
Existen herramientas que permiten medir el grado de cumplimiento de los estándares de accesibilidad, como la que facilita la web: www.tawdis.net.
En el ejemplo siguiente se observa el resultado de realizar el test de accesibilidad de la página principal de la empresa italiana de cerámica Isolaceramics.com con 19 errores automáticos y 99 manuales. Es habitual este número de errores en una página web de empresa, sobre todo si el sitio tiene mucho contenido. Es difícil no tener ningún error, especialmente los «manuales». Estos últimos son aquellos cuya validación para el cumplimiento de las normas de accesibilidad no la puede realizar automáticamente una máquina, sino el programador. Un número inferior a 50 errores manuales para nivel de exigencia A se puede considerar más que correcto.
Testar la usabilidad
El test de usabilidad mide cómo navega e interactúa el usuario realmente y no cómo cree la empresa que navega. Es la vía más efectiva e inmediata de conocer si un sitio web está cumpliendo con las necesidades de los usuarios. La mayoría de las webs de empresa son difíciles de usar. El objetivo prioritario de una web debe centrarse en facilitar al máximo al usuario la búsqueda de información o las diferentes formas de interactuar.
El método empleado se basa en la observación y el análisis de cómo un grupo objetivo de usuarios utiliza el sitio web. Lo habitual es que el grupo sea de cuatro a seis personas. El proceso de observación es individual. Un moderador observa a un usuario al que se le ha indicado previamente realizar varias tareas dentro de un sitio web. A través de este análisis se conoce qué funciona y qué no, qué acción lleva demasiado tiempo, en qué paso se puede perder, si necesita determinada ayuda, etc.
El tiempo de duración del test viene a ser de uno o dos días en sesiones individuales de una hora. El moderador junto con la empresa, definen previamente las áreas y tareas que serán objeto de observación.
La labor del moderador es fundamental para la eficacia de un test de usabilidad y, por ello, se necesita una persona con conocimiento y experiencia en el mundo Internet. El informe final del test debe identificar los problemas de usabilidad detectados, priorizarlos y proponer soluciones y recomendaciones. Las etapas de un test de usabilidad son:
1º Preparación y planificación
2º Selección de usuarios
3º Desarrollo de la prueba
4º Informe final: análisis de datos
Las empresas que llevan a cabo un test de usabilidad se sorprenden del resultado. Primero, por la diferencia sustancial entre la idea que se tiene sobre cómo navegan los usuarios y cómo lo hacen realmente; segundo, por los resultados directos que una buena usabilidad aporta al negocio online.
Según Steve Krug, uno de los grandes expertos en usabilidad, testar con un solo usuario es un 100% mejor que no hacerlo con ninguno y hacerlo tras el diseño y antes de la programación es 50 veces mejor que testar una vez desarrollada la web. Hacerlo después será más costoso ya que habrá que volver a programar lo que resulte «defectuoso» en el test de usabilidad.