Caso práctico: Riesgos y Tecnología

Webempresa20 - Internet orientado a resultados > Libro Online > Caso práctico:
Riesgos y Tecnología

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 herra-
mienta 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 pro-

puesta 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.