5 consejos de usabilidad web y diseño para no diseñadores

5 consejos de usabilidad web y diseño para no diseñadores


¡Sayonara! ¿Cómo va eso? Después de unas merecidas vacaciones en Japón, vuelvo a proponerme retomar esta sana rutina que es ofreceros contenido de calidad, único y práctico con la intención de que llevéis adelante vuestros proyectos, sean propios o ajenos.

Además, estoy orgulloso de poderos anunciar que este blog acaba de cumplir… 3 años. Son ya 125 artículos publicados (hace poco hablaba de lo que había aprendido escribiendo 100 artículos), más de 2.200 suscriptores (¿aún no estás suscrito?), >12.000 fans en redes sociales y tantos shares que no puedo ni recordarlos. A todos: ¡Muchas gracias!

Sigo adelante con este proyecto de marca personal que tiene un único objetivo: acercar el marketing digital a todos aquellos que no tienen el conocimiento o el tiempo necesario para ello.

Usabilidad web para los que no saben qué es la usabilidad web

Wikipedia define la usabilidad web como:

La usabilidad web es la disciplina que estudia la forma de diseñar sitios web para que los usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva posible.

Sin duda, es un concepto clave en el desarrollo de experiencias de usuario enfocadas a la conversión y a la recurrencia de usuarios, por lo que no es excusa no ser conocedor de sus intríngulis para estar familiarizados con algunas de sus características básicas.

Referido a esto y para que podáis tener un buen soft landing a la vuelta del mes de agosto, he preparado un contenido suave y entretenido que seguro que os gusta: 5 consejos de usabilidad web y diseño para todos aquellos que no os dedicáis a ello. ¿Empezamos?

Ante la duda, la más… simple.

Sé que muchos de vosotros estabais locos porque la frase terminara de forma diferente… pero hoy no aplica. Si algo tienen en común los sitios de éxito actuales es que buscan la simplicidad por encima de todo.

Utilizar un diseño web simple tiene muchísimas ventajas, algunas incluso van más allá del simple impacto visual:

  • Al tener menos elementos, las páginas se cargan antes. Lo cual mejora y ayuda en el rendimiento general y el posicionamiento.
  • Si haces un diseño simple, tendrás menos cosas a revisar, actualizar, redactar, diseñar…
  • Una usabilidad sencilla es más fácil de convertir en responsive.

En resumen: muestra solo aquello que sea imprescindible y deja que sea el usuario el que te diga a través de sus interacciones qué te falta (o qué te sigue sobrando).

¿Te gusta respirar? Pues a las webs también.

Las páginas web se dividen en áreas que podemos imaginar como habitaciones de un hotel. Cada una de esas habitaciones tiene un propio tamaño, su decoración particular, su función… y también su contenido. Este contenido es el número de personas que metemos en esas habitaciones.

De entre todo aquello que no deberíamos desear para nuestra presencia digital, una de las peores cosas sería que cada habitación sección de nuestra web tuviera este aspecto:

Camarote de los Hermanos Marx

Camarote de los Hermanos Marx

Siempre que te sea posible, deja espacios vacíos entre:

  • Las secciones de una página (cabecera, pie, contenido central, sidebars…).
  • Márgenes laterales y el texto.
  • Imágenes (a no ser que el diseño lo requiera).
  • El último de los contenidos y el final de la página real.

La técnica Matroska.

Como la famosa muñeca rusa que contiene réplicas más pequeñas dentro de cada una, nuestra web también debe ser capaz de transmitir la importancia de los elementos al usuario (y a los buscadores).

Si nuestro texto base está escrito a un tamaño de 14px y nuestros títulos importantes en 32px, todo lo que se encuentre a medio camino debería estar, necesariamente, en ese rango. De lo contrario, podemos llevar al usuario a una confusión razonable de no saber qué es lo más importante y por lo tanto, a dónde debe dirigir su mirada para ganar ese tiempo tan preciado que seguro le falta. En términos de código, podríamos verlo de la siguiente forma:

La técnica matroska para mejorar tu usabilidad web

La técnica matroska para mejorar tu usabilidad web

Además de la mejora en la usabilidad web, utilizar tamaños de letra acordes al nivel de importancia, es una de las consideradas “buenas prácticas” que muchos de los sites de referencia recomiendan para que los buscadores ordenen e indexen nuestro contenido de acuerdo a nuestros objetivos. ¿Aún dudas de su importancia?

Tres colores para describir nuestra realidad.

Somos de un color. Nuestro negocio es de un color. Seguro que podrías definir a muchas personas como “verdes”, “rojas”… o “negras”.

Nuestra página web debería poder transmitir todo lo que queremos que transmita en solo 3 colores:

  • Un color predominante.
  • Un color secundario, que ayude al entendimiento de la estructura y la jerarquía de la información.
  • Un color de contraste para las llamadas a la acción y elementos críticos.

Existen muchísimas herramientas que te ayudarán a crear paletas cromáticas o patrones de color para tu web. Algunas de las que yo considero más destacadas son Adobe Kuler, Palettab (plugin para Chrome) o Coolors.

Tu web debe poderse usar sin brújula

Por último (aunque no menos importante) en este análisis de diseño y usabilidad web, es obligatorio hablar de la estructura de la información, su acceso y profundidad.

Pese a no ser un experto diseñador ni un crack de la usabilidad web, debes tener muy presentes las siguientes características en lo que a navegación se refiere:

  • Tu web no debería contener más de 3 o 4 niveles de profundidad. Es decir, para llegar a cualquier página de tu sitio, no deberían hacer falta más de 2 o 3 clics.
  • Es importante que el usuario pueda volver de una forma natural a la página donde estuvo previamente o a la Home. Un camino de migas o breadcrumb puede ayudarle. Evita en la medida de lo posible que tenga que usar el botón volver por si tu sitio requiere autentificación por inicio de sesión.
  • Todas las páginas deben estar conectadas de alguna forma. Si una parte concreta de tu sitio no está vinculada directamente, asegúrate de añadir un atributo “noindex” para no confundir a los principales buscadores, que se preguntarán: “Si esta página es tan importante, ¿por qué no se puede acceder desde un enlace interno?”.

Os dejo, como siempre, con una infografía resumen de lo visto aquí. Si os gusta, compartid/comentad/criticad lo que queráis! =)

Infografía con consejos sobre usabilidad web y diseño

Infografía con consejos sobre usabilidad web y diseño

Y vosotros, ¿conocéis algún consejo para no diseñadores que permita mejorar la usabilidad de un sitio web?

Salud.

Hay 4 comentarios

Add yours
  1. 1
    Bitacoras.com

    Información Bitacoras.com

    Valora en Bitacoras.com: ¡Sayonara! ¿Cómo va eso? Después de unas merecidas vacaciones en Japón, vuelvo a proponerme retomar esta sana rutina que es ofreceros contenido de calidad, único y práctico con la intención de que llevéis adelante vu…

¿Tienes algo que decir? Coméntalo aquí