Normas básicas de ergonomía web y navegabilidad

En el Marketing online, el Marketing se concentra normalmente el site, y a estas alturas del juego, es ilusorio pensar que basta con generar tráfico para generar ventas (o leads) en un site, aunque por desgracia hay mucha gente aún se sigue centrando en generar tráfico sin preocuparse por al conversión, pero eso es otro cantar y materia para otro post.

Ni soy un especialista en ergonomía web, ni es mi objetivo, ya que la ergonomía web en si, es una profesión y yo soy un simple “amateur” en la materia. Me baso en mi experiencia y formación, que me han hecho ver, que corrigiendo ciertos errores en los websites, podemos mejorar considerablemente las tasas de conversión.

A continuación voy a detallar algunos de los errores más habituales en ergonomía web, que son de sentido común, pero como dijo en muchos artículos, “el sentido común es el menos común de los sentidos”.

Redacción incoherente (incoherent wording)

Y ¿si llamamos a un gato, gato?, la elección de las palabras no es algo trivial o inocente, ya que va a permitir al internauta de darse cuenta y comprender inmediatamente en que universo se encuentra y lo que debe hacer.

Por ello, intentemos ser coherentes: si empleamos imperativos para los botones de llamada a la acción, empleémoslo en todas partes. Lo mismo pasa con el infinitivo o los nombres propios: si por ejemplo, escribimos “Realice pedido ahora”, no escriba “Contáctanos”, sino “Contacte con nosotros” y si elegimos “Ver mi cesta”, ponga “Anular mi pedido”, evitando poner “Anulación de mi pedido”.

De la misma forma, un objeto o acción debe ser siempre denominado o hacerse referencia a él en la misma terminología. Si empleamos el término “descargar”, no poner “download” en otra página, o si hablamos de “modificar la foto del perfil”, evitar poner “avatar” en la guía de ayuda.

Para más información: El wording, una gran olvidada de la usabilidad web.

Botones de acción invisibles

Una página debe responder a un objetivo previamente establecido. Normalmente, suele ser el de lograr la compra, cuando se trata de e-commerce, o validar un formulario, cuando se trata de generar leads. Por lo cual, siempre debemos tener en mente estos dos objetivos a la hora de añadir un botón bien visible de “añadir a la cesta” o “Enviar”, totalmente diferenciado de los botones de “anular” y “volver atrás”.

El “call to action” debe estar muy claro. Los formularios con los tres botones (“añadir a cesta” o “enviar”, “anular” “volver atrás”) con el mismo formato de color y tamaño, es contraproducente. Si queremos que el internauta haga clic en “Validar”, debemos ponérselo fácil, destacándolo del resto de botones.

Si quieres saber más sobre los botones, te invito a leer el post «El arte de colocar los botones en un website«.

Pruebas de ergonomía web

Los internautas son ovejas. Yo el primero. Yo no se vosotros, pero cuando aterrizo en un site en el que me debo identificar previamente, mi primer reflejo es el de deslazar mi ratón hacia el lado superior derecho de la página. Lo mismo sucede cuando debo validar un formulario, tiendo a ir hacia abajo a la derecha.

Los servicios como Google o Facebook, los servicios de correo online, los sites de información, etc. nos han habituado a una forma de navegación. Esta forma de navegar no es siempre la adecuada, pero que con el uso se ha legitimado y se ha convertido en norma.

Por ello, os pido encarecidamente, que cuando concibáis un site, sed innovadores en la selección de las fotos y los vídeos, o en la elaboración de los textos, pero no intentéis enseñar a los internautas una nueva forma de navegar, ¡los perderéis a todos durante el camino!. Un logo (que permite volver a la página de inicio) arriba a la izquierda, el menú de navegación arriba y/o a la izquierda y que no cambie de lugar en función de la página, los botones de clientes “cesta” “mi cuenta”, etc. arriba a la derecha, lo más cerca posible del número de teléfono, etc. En mi post «Haz tu site más usable» indico otros principios básicos de ergonomía.

Errores de los formularios

No hay nada que de más rabia que rellenar un formulario, hacer clic en validar y recibir un mensaje indicándonos que no hemos completado correctamente todos los campos. Ah, si, hay algo peor: que todos los campos se hayan borrado.

El formulario es el punto de fuga más importante en el proceso de conversión. Debemos simplificarlo al máximo (no es el momento de hacer un estudio estadístico de nuestros clientes) centrándonos exclusivamente en los campos obligatorios para poder obtener la venta o lead.

Por cierto, y volviendo al primer párrafo de este punto, se pueden programar los formularios para que vayan mostrando los errores al internauta a medida que los van rellenando: el formato de la fecha de nacimiento no es correcta o que el número de teléfono es obligatorio, etc., antes de que lleguen al punto de “validación”.

Para más informacion sobre los formularios, os invito a leer «los 10 mandamientos para lograr que se complete un formulario» y «como crear un formulario online ergonómico«.

 “La línea de flotación” o límite de visibilidad

Al hablar de línea de flotación o límite de visibilidad o fold en ingles, me estoy refiriendo a la parte del site que puede ver el internauta sin necesidad de hacer scroll para seguir viendo el resto de la página. A pesar de que los monitores son cada vez más grandes y con mayor definición, por mi experiencia, todo aquello que este más bajo de los 700 píxeles respecto a la parte de arriba de la página, no será visible tras la carga de la página. Por ello, es muy importante intentar que el conjunto de elementos principales de navegación estén presentes, al igual que los famosos botones de llamada a la acción. En las propias fichas de producto, elementos como el precio, la disponibilidad del producto, plazo de entrega y el botón de añadir a la cesta deben aparecer imperativamente.

De todas formas, no debemos agobiarnos con este tema, ya que si logramos incitar al usuario a hacer scroll, el límite de visibilidad no supondrá ningún problema (la leyenda urbana del límite de visibilidad).

Related posts:

50 consejos para mejorar la usabilidad de tu website