Diseño de interfaces web: cómo crear una buena usabilidad

Diseño de interfaces web: cómo crear una buena usabilidad

Carlos Yañez

18-04-2018

Diseño de interfaces web: cómo crear una buena usabilidad

 

En post anteriores hemos visto diferentes aspectos importantes para el correcto diseño de interfaces, temas relacionados con aspectos a tener presentes cuando hacemos un diseño web.

Hemos dado consejos para un buen diseño web en general, para realizar un diseño responsive adecuado e incluso hemos dado pautas para poder agilizar la carga de una web.

También hemos visto cómo crear componentes visuales o consejos sobre cómo crear una web efectiva. Confío que todos estos consejos os hayan sido de utilidad.

En el post de hoy nos centraremos más concretamente en la usabilidad de una web, que, aunque relacionado con los temas anteriores, hay aspectos de los que todavía no hemos hablado.

¿Qué es la usabilidad de una web?

Una definición de usabilidad ampliamente aceptada es la que nos ofrece el World Wide Web Consortium que la define como el diseño de productos eficaces, eficientes y satisfactorios.

Esta breve definición puede no aclararnos mucho el concepto, así que yo la reformularía como la facilidad que vamos a dar a nuestros usuarios para encontrar de forma fácil lo que buscan en nuestra web.

Esta definición abarca diversos aspectos que son el diseño, la estructura de la web, su funcionalidad y la arquitectura de la misma, por ejemplo si es o no responsive.

Qué persigue un diseño usable

Los objetivos que debe perseguir un diseño web usable son agrupables en dos grandes áreas.

Una gran área es lo referente a la facilidad de navegación y la estructura de la web. Esta debe cumplir lo siguiente para considerarse usable:

  • Debe ser clara y bien estructurada
  • Debe ser poco compleja y no tener muchos niveles de profundidad que dificulten el ubicarse
  • Debe incitar a llamadas a la acción para que se continúe navegando
  • Debe incitar a seguir navegando

La otra gran área es todo lo referente a la facilidad de lectura de la web y debe cumplir:

  • Debe ser fácilmente legible y comprensible
  • Debe ser sencilla y agradable a la vista
  • Debe tener elementos que permitan una rápida lectura, como listas, titulares, etc.

Cómo conseguir los objetivos de usabilidad

Con el fin de conseguir los objetivos de usabilidad descritos, veamos mediante qué técnicas o consejos podemos conseguir el objetivo propuesto.

La navegación y el mapa de la web

Dos de las cosas que van a ayudar a mejorar notablemente la usabilidad de la web es el uso de un mapa de la web que, de un vistazo, nos permita ver todas las opciones de navegación de esta, y por otro lado el diseñar un menú de navegación óptimo.

Un menú de navegación óptimo implica optimizar el número de elementos que ponemos en el menú de navegación principal. Lo ideal es sólo incluir enlaces a las páginas más importantes de la web y que mejorarán nuestro posicionamiento SEO.

Igualmente, dentro de cada página, es muy conveniente indicar en todo momento en qué lugar de la web nos encontramos, sobre todo si la web tiene varios niveles de profundidad.

Patrón uniforme en todas las páginas

Con este punto queremos referirnos a varios aspectos importantes de la web. Por un lado, todo lo que son botones, logos y menús, deben estar siempre ubicados en la misma posición dentro de todas las páginas con el fin de evitar confusión.

Es fundamental seguir un mismo patrón de diseño en toda la web y evitar así el rechazo del usuario. Todas las partes importantes del diseño de una web se deben regir por uno patrón único.

Dentro del diseño elegido, es necesario diferenciar claramente con estilos o aspectos diferentes la diversa funcionalidad de los botones que incorporemos para diferenciar por ejemplo un botón de descarga de uno de confirmación.

El contenido

Con el fin de facilitar la lectura de nuestras páginas, hay varias técnicas recomendables a seguir para ganar en usabilidad como es:

  • Usar un contenido conciso, para ello usemos frases cortas, evitaremos párrafos largos, usaremos negrita de vez en cuando y en definitiva eliminaremos información no relevante
  • Dividiremos el contenido en párrafos y con encabezados que además ayudan al posicionamiento. El uso de párrafos permite airear las páginas y ser mucho más agradables a la lectura.
  • Usaremos listas y formateo de texto para enfatizar lo que consideremos más importante, de esta forma el usuario centrará su atención en ello y facilitará la lectura de la página
Adaptación a cualquier dispositivo

Como ya tratamos en un post anterior, los nuevos dispositivos móviles son cada vez más usados para consultar la web. Si nuestra web no usa un diseño responsive, estaremos perdiendo gran usabilidad de esta y por lo tanto visitas.

Pensemos en cualquier tipo de dispositivo, ya sea un smartphone, una tablet o una smartTV

Procesos claros

Si dentro de tu web existe algún proceso ya sea de compra o para darse de alta, es fundamental que se resalte en que parte del proceso se encuentra el usuario con el fin de que en todo momento sepa lo que le falta para finalizar el mismo y no lo abandone antes de tiempo por no saber ubicarse.

Ayuda al usuario

A menudo el usuario puede tener dudas en relación a nuestra web o al propósito de esta. Si no queremos que abandone nuestra web, debemos disponer de FAQs y/o soporte y que sean apartados fácilmente localizables para ganar confianza del usuario

Todos estos consejos que os he dado y que son de sentido común, se pasan por alto en muchos diseños lo que puede provocar que, pese a que el producto que vendas o el contenido que publiques sea muy bueno, el usuario no sienta atracción por la web y la abandone.

Es fundamental escuchar siempre al usuario y seguramente tú nos puedas indicar qué errores consideras que muchas webs cometne y la hacen poco usable.

Curso relacionado: Sistemas microinformaticos y redes 

Profile picture for user Carlos Yañez
Carlos Yañez

Ingeniero Superior de Telecomunicaciones por la UPC. Director de Informática en un Laboratorio de Análisis con implantación nacional. Profesor de los cursos de Electrónica y Técnico en Sistemas Microinformaticos y Redes.