Guía de buenas prácticas de usabilidad en Diseño Web

En esta guía te hablaremos sobre las mejores prácticas de usabilidad en Diseño web para que tus sitios cumplan con las reglas mínimas de usabilidad web.

La usabilidad es una característica dentro de la UX o experiencia de usuario. Muchas veces esta es dejada de lado, sobre todo si trabajamos en WordPress, en Divi, con plantillas, tendemos a pensar que todo está, en cierto modo, “hecho”.

Sin embargo, siempre pueden aplicarse mejoras de usabilidad que pueden garantizar la navegación y acceso a más usuarios, además de facilitarles las tareas en tu web y aumentar la conversión. Veamos algunas buenas prácticas de usabilidad que debemos tener en cuenta en el diseño web.

Índice

Accesibilidad

Últimamente ha tomado mucha relevancia. Cada vez son más las cosas que se hacen a través de internet y se necesita que cada tarea se lleve a cabo de la manera más fácil y rápida posible, además de que un grueso cada vez más grande de los usuarios pueda navegar correctamente en las páginas y plataformas que necesita.

Tiempo de carga

No es un tema solo de navegación ni de posicionamiento en Google, es sobre experiencia de usuario. Es muy probable que te haya pasado que si una web tarda mucho en cargar, dejas la página. ¿Cómo mejorar el tiempo de carga? Las primeras acciones a tomar comienzan por optimizar imágenes, el sitio web, estar en un buen servidor, ajustar el tiempo de vencimiento de las cachés, usar CDN, etc. Sin embargo, el otro extremo tampoco es favorecedor. Una web que cargue muy rápido, pero que sacrifique el contenido, por ejemplo, seguiría dejando de lado la usabilidad.

Contraste con el color de fondo

El sitio web no solo lo veremos nosotros, debemos pensar en las características y necesidades de la audiencia. El texto tiene que ser totalmente perceptible y limpio.

Tamaño, jerarquía en el texto y espaciado entre caracteres

Una letra demasiado pequeña o junta produce frustración y abandono, lo mismo sucede con el interlineado. La jerarquía le muestra al usuario las “instrucciones” o recorrido que debe seguir al percibir la información de tu sitio web.

Etiquetas ALT

No se usan solo para efectos de SEO, de hecho, no son para Google. El buscador la lee, pero su principal función es ayudar a que usuarios invidentes tengan referencias y puedan saber qué hay en las imágenes. Como siempre decimos: hay que recordar que diseñamos para los usuarios, de eso se trata la usabilidad.

Página 404 personalizada

Normalmente olvidamos esta página porque los temas de WordPress tienden a usar una página 404 por defecto. Personalizarla no solo permite seguir mostrando un diseño atractivo, sino también enlaces de navegación que redirijan al usuario a lo que podría necesitar (esto podrías lograrlo con un menú, por ejemplo) o una buena barra de búsqueda para que continúe en la página y consumiendo el contenido. Al final lo que todos queremos y lo que la usabilidad busca es que el usuario no deba salir de la web para encontrar lo que necesita.

Identidad

Las decisiones de diseño que tomemos respecto a una página web pueden derivar en algunos errores de usabilidad que tenemos que evitar.

Logo

La gente siempre espera que el logo esté arriba y a la izquierda, enlazada con la página de inicio. No es un tema de ser rígido en cuanto al diseño, pero es algo muy habitual para las personas y de eso también se trata la usabilidad. No podemos cambiar cómo navega la gente, aprendemos cómo lo hacen y diseñamos en función de eso.

¿Qué hacemos?

El usuario debe tener claro qué hace la marca desde que lee la página principal, no debemos asumir que lo sabe. Es muy importante que junto con tu cliente trabajes el copy para que sea óptimo y se garantice la usabilidad.

Digerir la home page en pocos segundos

Cuando hacemos una página de inicio que es muy larga o tiene muchos elementos, en ocasiones el usuario no llega hasta el final. Cada información de la página de inicio debe estar justificada, tiene que tener una razón de ser, y el usuario debe poner realizar alguna acción en cada una de las secciones. La regla es que se pueda navegar en 7 segundos o menos, para evitar la fatiga visual y que el usuario no abandone la página web.

Navegación

Tenemos que pensar en cómo el usuario va a usar, valga la redundancia, el sitio web. Si es hermoso, pero difícil de navegar, es muy probable que el porcentaje de rebote sea muy alto, ya que la usabilidad no es la mejor.

Menos es más

El minimalismo en el diseño web es fundamental. La claridad y la simplicidad en los contenidos es uno de los apoyos más importantes que tiene la usabilidad. Por supuesto, no siempre fue así, pero la evolución del UX/UI ha permitido optimizar los procesos en pro de la facilidad de navegación.

Navegación coherente

Siempre debe haber una navegación principal que nos lleve a diferentes áreas de la web, no solo para guiarlo, sino para dejar clara la estructura de la página. Concéntrate en construir un menú que sea completamente usable y que funcione de manera óptima en la versión móvil de tu web.

Enlaces legibles e identificables

La estructura de enlaces siempre debe ser legible para los usuarios y fácil de identificar. Bien sea con botones, links marcados con color o subrayados, apoyados por el copy, la usabilidad dicta que se identifique a primera vista lo que es un enlace y para qué sirve.

Búsqueda

El formulario o barra de búsqueda no solo debe ser visible, sino también debe proveer resultados relevantes para el usuario. La página de resultados debe estar igual de cuidada que el resto de contenido de la web. Debemos proveer todo el valor posible a ese usuario que demuestra interés y confianza nuestro contenido.

Contenido

El contenido y la forma en la que está estructurado en la web puede determinar el éxito de la misma. Atento(a) a estas recomendaciones.

Mantén la información importante antes del scroll

Considera que la mayoría de los usuarios tienen monitores de 1024×768. Diseña y organiza la información crítica antes del scroll, de manera que el usuario la perciba inmediatamente.

Coherencia entre los estilos

Define un estilo y cíñete a él. Usa la misma paleta de colores, fuentes y estilo para toda la página web, usa una sola plantilla, un solo estilo de mostrar los enlaces, botones y más. Es importante no confundir al usuario mientras navega por la web. Afortunadamente, en Divi puedes copiar el estilo de un módulo o sección en todos los elementos similares, facilitando esta uniformidad.

Anuncios y pop-ups

Evita los anuncios por encima del contenido, pop-ups intrusivas y acciones similares cuando apenas llega a la página. Disgusta al usuario y además rompe su atención hacia lo que vino a hacer a tu web. Si necesitas mostrar un pop-up o anuncio, deja que consuma contenido primero, que no sea eso lo primero que ve en tu web.

Encabezados

Usa las etiquetas H para organizar el contenido. En las páginas corporativas, la lectura no es de arriba a abajo sino diagonal, De manera que el usuario se fija en encabezados, inicios de párrafo, listas y negritas, es una lectura de búsqueda, como un escaneo del contenido.

¿Tienes algún tip de usabilidad o UX que quieras añadir? ¡Nos leemos en la próxima!