La empresa Riegos y Tecnología (Ritec), fabricante de equipos de riego y control de clima y de proyectos llave en mano contaba con un sitio web que le servía exclusivamente para mostrar sus datos de contacto e información de la empresa y los productos pero de una forma poco adaptada al medio Internet. La web ofrecía contenidos «poco escaneables», textos excesivos, navegabilidad poco intuitiva, un flash de entrada a la página un tanto irritante para el usuario y, en definitiva, una web pasiva y muy corporativa, no centrada en el usuario.
Ritec encargó un análisis y un plan de mejoras de su web para conseguir una herramienta que permitiera a su equipo comercial ofrecer información clara y convincente de los productos y servicios, que les apoyase en la promoción de las ventas y que el sitio se dirigiera tanto al cliente final como al distribuidor comercial de sus productos en todo el mundo.
En las imágenes siguientes se muestra la página de inicio de la empresa y la propuesta de rediseño para mejorar tanto la imagen como la usabilidad del sitio.
Ejemplo de la página de inicio de Ritec antes y después del rediseño para mejora de su usabilidad
(Imagen disponible en el libro en PDF)
En la ilustración siguiente se exponen los principales cambios propuestos en la página de inicio y en la ficha de producto para conseguir un diseño más atractivo y eficaz del sitio y una mayor usabilidad.
Veamos las diez claves para ofrecer una buena usabilidad y cómo se intentaron alcanzar en el rediseño de la web de la empresa Riegos y Tecnología.
1. Agrupar los contenidos en cápsulas de información
En la página de inicio se han agrupado los contenidos centrándose en las diferentes líneas de producto, que se presentan con un título y una imagen identificativa. Esto es lo que el usuario busca y no tanto lo que se mostraba en la web antigua que era información corporativa de la empresa. Otros contenidos que se destacan son vídeos sobre proyectos realizados, testimonios de clientes y «preguntas al experto».
2. Jerarquizar los contenidos
En la parte superior central se muestra el menú de navegación principal y una foto rotativa identificativa de los productos con un tagline que destaca las ventajas competitivas de la oferta de RITEC. Otra «zona caliente», la del lateral izquierdo, se muestra el menú que contiene las diferentes líneas de producto.
3. Ofrecer navegación clara y autoexplicativa
Los menús de navegación muestran los contenidos que ofrece la web al usuario. Por este motivo se puso mucho cuidado en la elección del nombre de cada pestaña, para utilizar una palabra o palabras concisas, breves y que con un golpe de vista le sugieran al usuario que puede encontrar al hacer clic en las pestañas. Son palabras como: empresa, productos, proyectos, asistencia técnica, red comercial, preguntar al experto, contacto y también el nombre de las líneas de producto principales.
4. Familiaridad-Convencionalismos
Hay una serie de elementos que el usuario espera que estén ubicados o que se muestren de determinada forma. El logo se ubica en la parte superior izquierda en todas las páginas del sitio.
El menú lateral izquierdo incluye el símbolo de una flecha en cada línea de producto, un «icono» que al usuario le indica que hay más productos dentro de cada línea.
Para facilitar la navegación también se incluye breadcrumb o migas de pan, como se puede observar en la ficha de producto propuesta en el rediseño, para que el usuario se ubique dentro de la web. También cada página importante del sitio tiene su título.
En el menú inferior se incluyen los enlaces a Aviso legal, Política de privacidad y Mapa web, otra práctica también bastante extendida.
Ejemplo de la ficha de producto de Ritec antes y después del rediseño para la mejora de su usabilidad
(Imagen disponible en el libro en PDF)
5. Consistencia
El diseño es consistente en todas las páginas del sitio. Se mantiene la línea de colores y la tipografía, así como el menú principal superior que aparece en tolas las páginas y el lateral que aparece en la página de inicio y en todas las relativas a línea y fichas de producto.
6. Descarga rápida
Se propone eliminar el flash pesado de entrada al sitio web de la versión antigua para acceder directamente a la página de inicio. Se optimizan imágenes para cargarse con el menor peso posible sin perder sustancialmente la calidad y el programador reducirá el peso del código de programación todo lo posible.
7. Accesos múltiples a la información
Para obtener información de los productos desde la página de inicio hay 4 accesos posibles: Menú lateral izquierdo, buscador, imágenes centrales identificativas de los productos y el e-catálogo.
Opciones de búsqueda de los productos de la empresa
(Imagen disponible en el libro en PDF)
8. Optimización para navegadores y tamaños de pantalla
Se propone que la nueva web pueda verse correctamente en la diferentes versiones de los navegadores Internet Explorer y Mozilla Firefox que son los que tienen la gran mayoría de los ordenadores personales y otros dispositivos de acceso a Internet. También se propone la optimización para Safari (es el navegador de los PC y otros dispositivos de Apple) y Chrome (el navegador de Google).
También es importante la optimización para la navegación por dispositivos móviles.
En cuanto al tamaño de pantalla se propone la optimización a 1024 x 758 píxeles, por ser el tamaño más habitual entre los usuarios.
9. Cumplimiento de estándares y accesibilidad
La nueva web deberá cumplir los estándares sobre programación y accesibilidad al nivel mínimo «A» del W3C (World Wide Web Consortium).
Una vez programada la web se puede comprobar el cumplimiento de estas recomendaciones y cuáles deben ser las correcciones tecleando el dominio en: validator.w3.org (para los estándares) y www.tawdis.net (para la accesibilidad). No es necesario exigir al programador «0» errores. Para una web de tamaño medio (20 a 50 páginas) podemos exigir un número de errores sobre estándares inferior a más o menos 50 y sobre accesibilidad del nivel «A» un número inferior aproximadamente a 10 en automático y 30 en manual.
10. Testar la usabilidad
Una vez rediseñada la web se realizará un test de usabilidad muy sencillo pero que seguro aportará mejoras a la nueva web. Se propondrá a un grupo de clientes y usuarios tipo de RITEC (tres clientes finales y tres distribuidores) participar en el test en el que se le propondrá realizar las siguientes tareas:
• Buscar información sobre un determinado producto
• Buscar información sobre proyectos realizados para ese producto
• Buscar respuesta a una pregunta frecuente
• Plantear una consulta a la empresa
El test se hará de forma individual con cada una de las seis personas del grupo. Una persona de la empresa irá anotando los comentarios, dudas de navegación y propuestas de cada persona.
Una vez recogida la información, se analizará y anotarán las conclusiones. Probablemente aporten buenas ideas para mejorar, en muchos casos con pequeños retoques, la navegación por la web.