Evaluación heurística de la Web del ADEL Sierra Norte

Acabo de finalizar el rediseño de la Web de la Asociación para el desarrollo local de la Sierra Norte de Guadalajara. La primera tarea fue una evaluación heurística.

Una evaluación heurística es la comprobación sistemática que un pequeño grupo de personas realiza a un interfaz, en nuestro caso un portal Web, contra un grupo de principios en usabilidad.

Aquí os pongo algunos de los problemas más graves detectados en mi evaluación. También desvelo algunas de las soluciones tomadas en el rediseño.

Mala optimización para búscadores

En primer lugar la búsqueda en Google del nombre completo de la asociación nos devuelve la Web en octava posición. Esto es un indicativo claro que la optimización para buscadores está muy descuidada ya que no logramos aparecer en primer lugar ni cuando alguién busca el nombre completo de la asociación. Éste es un nombre largo y muy concreto lo que debería facilitarnos las cosas de cara a posicionarnos del mejor modo.

Mala descripción del portal para buscadores

La asociación usa la abreviación ADEL Sierra norte para auto nombrarse de un modo más conciso y sencillo. Si buscamos adel sierra norte la Web aparece en primer lugar. Aquí el problema reside en que no se aporta una descripción del portal Web. Peor aún, se usa la descripción que proporciona el gestor de Contenidos Joomla por defecto. El resultado es que la descripción de nuestro portal es Joomla – el motor de portales dinámicos y sistema de administración de contenidos. Es decir, estamos dando una descripción terrible a todos los usuarios que nos buscan a través de motores de búsqueda. Y el tráfico que vamos a recibir a través de motores de búsqueda puede ser el 75 %.

Portal Web Hackeado

Si usamos el prefijo site: y la url del portal Web que deseemos, Google nos muestra todos los resultados de búsqueda de dicho portal que existen en su índice.
¡Las sorpresas continuan si buscamos en Google site:adelsierranorte.org!.
Observar los últimos resultados de la siguiente imagen y descubriréis unas líneas en ruso. Nuestro portal ha sido hackeado y aunque nuestros visitantes no vean textos de SPAM en ruso, ese código malicioso se integra en el código de nuestra Web, se ofrece a los motores de búsqueda y a los usuarios sin que estos se percaten.

Resultados de búsqueda de páginas del portal en Google, con SPAM

Si usamos la opción ver código este grave problema se hace más evidente:

Icono de Favoritos

El icono de favoritos (Ver imagen más abajo) es el icono por defecto de Joomla. Esto da mala imagen ya que denota una falta de atención al detalle o de conocimiento. Hemos perdido una oportunidad de potenciar nuestra marca mostrando nuestro logo en el icono de favorito.

Captura de Pantalla del Icono de Favoritos de la Web del ADEL Sierra Norte Guadalajara

Elementos que dan mala imagen y tiene una mala usabilidad

Observen la siguiente imagen:

  • 1) Hay un símbolo < en mitad de la cabecera. Cuando esto ocurre es normalmente sinónimo que hemos olvidado cerrar una etiqueta de HTML. Sencillamente, da mala imagen sobre nuestra Web. Es un descuido muy visible del programador.
  • 2) El histórico noticias es una buena idea si tenemos mucho volumen de noticias. Sin embargo, si nos encontramos un histórico de noticias vacío, como en nuestro caso, damos sensación de abandono a nuestros visitantes.
  • 3) Las imagenes de las publicaciones transforman el puntero del ratón a una mano dando percepción de que podemos pulsarlas. Sin embargo, si clickamos no sucede nada. Esto refleja mal en la usabilidad de la página ya que añade un elemento de frustración para el visitante.

Mala arquitectura de la información


Una de las consideraciones más importantes a la hora de construir un portal Web es como posicionar la información para que la navegación sea para el usuario rápida e intuitiva. Observar el menú en la imagen de la derecha. Hay 19 opciones. Las opciones Estrategias y Objetivos, Documentos y Solicitud, Manual del procedimiento de Gestión, Normativa, Perfil del Contratante, Proyectos aprobados Eje Leader, anualidad 2010 y Memoria Final de Inversiones del Programa Leader Plus son simplemente enlaces a páginas donde hay uno o varios PDFs para descargar. Es decir, obligamos al usuario a pulsar en un enlace y volver a cargar toda la página para llegar a una página interior donde simplement ofrece la descarga de un PDF. Por esto es mejor ofrecerle la posibilidad de descargar el PDF directamente. Si continuamos el análisis de las opciones de menú. Los enlaces Leader II y Leader + llevan a dos páginas idénticas. Por lo tanto al menos una sobra. Las opciones Cooperación, Publicaciones llevan a dos páginas donde hay unos formularios aparentemente vacíos (ver imagen más abajo). Estos formularios no parecen devolver ningún resultado y son por lo tanto confusos y prescindibles.

Captura de pantalla de un formulario sin funcionalidad en la Web de ADEL

Mezcla de Personas

Cuando construyo un portal Web siempre creo personas para ayudarme a tomar decisiones. Por personas me refiero a módelos ficticios de usuarios representativos que interactúan con un portal Web. A menudo un portal Web tiene diferentes tipos de personas que tienen diferentes necesidades a cubrir. Por ejemplo, en la Web de una universidad podríamos tener varios tipos de personas. Por ejemplo un estudiante, un profesor y un becado Erasmus. Estos intentarían realizar tareas diferentes cuando visitan nuestra Web (consultar noticias sobre el rectorado, consultar horarios y descripción de cursos, o consultar información sobre las posibilidades de alojamiento en el Campus).

En el caso de la Web del ADEL Sierra Norte, he definido tres tipos de personas.

  • Miembros de la asociación que quieren estar al día de las noticias y de estado de la misma.
  • Gente con iniciativas emprendedoras que quieren poner en marcha una negocio y que quieren estudiar si la asociación les puede financiar de algún modo su proyecto.
  • Gente que quiere descubrir la oferta turística de la Sierra Norte de Guadalajara.

La Web anterior mezcla la información destinada a estas personas. La asociación ha realizado diversas publicaciones, tiene una revista periódica y ofrece información sobre
casas rurales, restaurantes y los municipios de la zona. Esta información se presenta de un modo poco consistente a lo largo de la página. Pero sobre todo se presenta sin una clara separación del contenido dedicado a los miembros de la asociación o a emprendedores que quieren conocer si su idea podría entrar en el marco de la asociación.

Agrupar la información por persona mediante elementos de diseño

A continuación se muestra una captura de pantalla de la página de Inicio de la nueva Web del ADEL de la Sierra Norte. Las diferentes zonas visuales agrupan información que sirve a los diferentes tipos de personas.

Captura de Pantalla de la Nueva Web del ADEL Sierra Norte con diferentes zonas para cada persona

  • Zona 1. Tiene como objetivo transmitir al visitante que llega al portal del ADEL Sierra norte de un modo claro y conciso que es y cuales son los objetivos de la asociación.
  • Zona 2. Intenta guiar de un modo sencillo al emprendedor en su proceso de puesta a punto de la idea. Usando cabeceras y separadores se marcan los pasos que debe seguir. Le permite descargar los PDFs sin tener que ir a páginas interiores. Esta barra lateral sustituye completamente la barra lateral de navegación del portal anterior.
  • Zona 3. Agrupa toda la información interna de la asociación, noticias, listado de socios etc.
  • Zona 4. Zona turística. Agrupa información sobre la oferta turística y los diferentes agentes turísticos de la zona.

Datos de contacto siempre visibles

Soy un evangelizador incansable acerca de posicionar siempre muy visibles los datos de contacto. No hay que menospreciar todas las visitas que tienen como único objetivo obtener un número de teléfono o una dirección postal que cargar en el GPS. Esta información debe estar siempre visible y en todas las páginas de cualquier portal. En especial en los portales Webs de instituciones públicas. En la antigua Web los datos de contacto sólo se mostraban en la página de inicio en una tabla que contenía diversos datos de la asociación y en un página denominada Grupo. En la nueva Web los datos están siempre visibles en la parte superior del portal (En la imagen anterior entre las zonas 1 y 2).

Diseño rígido que se rompe

La antigua Web tenía un diseño rígido con una columna central que en ocasiones no tenía el ancho suficiente para presentar algunos datos. En la imagen más abajo se observa como unos números de teléfono se cortan. Esto sucedía en diversas páginas como la del Listado de Socios,

Captura de pantalla de la antigua Web del ADEL Sierra Norte donde se cortan algunos números de teléfono

Falta de consitencia en el diseño

Uno de los mayores problemas en algunos portales Webs es la falta de consistencia en el diseño. Esto se traduce en que presentamos al usuario la información de modos muy diferentes obligando al mismo a investigar y entender diferentes interfaces aunque se trate de la misma tipología de contenidos. Por ejemplo, en la antigua Web del ADEL Sierra Norte se encontraban diferentes interfaces para mostrar una galería de fotos.

Captura de Pantalla de una galería de fotos en la Web de ADEL Sierra Norte
Captura de pantalla de una galería de fotos en la Web de ADEL Sierra Norte

Dejando las consideraciones de la belleza del diseño a un lado, la segundo galería usa una galería en Flash poco accesible con una barra de desplazamiento interna y con fotos de un tamaño miniatura sin posibilidad de ampliarlas.

Las noticias y las entradas sobre la oferta formativa que realiza la asociación también se realizan de un modo diferente. Esto deja al usuario con la sensación que la página es un collage de elementos de diseño sin cohesión entre ellos.

Captura de pantalla de la presentación de Noticias en la WEb del ADEL Sierra Norte

Los cursos se presentan, sin embargo, en formato ya extendido en orden cronológico inverso.

Captura de pantalla de la presentación de los cursos en la Web del Adel Sierra Norte

Presentación de instituciones colaboradoras

El la antigua Web había un banner en movimiento horizontal que mostraba los patrocinadores y colaboradores de la asociación.

Captura de pantalla del Bannner Pie de Página de la antigua Web del ADEL Sierra Norte

En la nueva se muestran las entidades colaboradoras sin movimiento, con imágenes estáticas enlazadas a las Webs de las instituciones, con la intención de lograr una presentación más seria y usable de los colaboradores.

Captura de pantalla del pie de página de la nueva Web del ADEL de la Sierra Norte

Conclusión

Espero haber transmitido en este artículo los defectos detectados en la antigua Web y las soluciones empleadas en la nueva Web que se basan en el uso de un diseño más cohesionado, elegante y donde la arquitectura de la información se realiza de acuerdo a los modelos de visitantes potenciales de la Web. ¿Quieres que realice un análisis de tu página Web? No dudes en contactar conmigo. Escribe un email a sergio.delamo@softamo.com o llámame al 630 44 29 73

Leave a Reply

Your email address will not be published. Required fields are marked *