Cuando se trata de diseñar o rediseñar un sitio web, es fácil quedarse atascado en la estética.

Ese tono de verde no luce muy bien...

¿No sería genial tener el logo en el lado derecho de la pantalla?

¿Qué tal si ponemos un GIF animado gigante en el medio de la página?

Sin embargo, si realmente estás tratando de lograr algo con tu negocio online (por ejemplo, conciencia de marca, generación de clientes potenciales, entre otros), tendrás que centrarte en algo más que en el aspecto del sitio web. Tienes que enfocarte en la usabilidad y experiencia de usuario.

En un mundo en el que la gente tiene más de mil millones de sitios web en los que pueden aterrizar potencialmente, necesitas asegurarte de que el tuyo está diseñado para la usabilidad, que significa que tan fácil es usar tu sitio web, y la experiencia de usuario (UX), la cual se enfoca en que tan agradable es interactuar con tu sitio web.

Ahora, podrías pasar años estudiando los detalles de la usabilidad y la UX. Pero para darte un punto de partida, hemos reunido una lista de las pautas fundamentales que puedes aplicar en tu próximo rediseño o lanzamiento de un sitio web. 

Luego, revisaremos 10 características que necesitarás en tu sitio para poner en práctica estas recomendaciones. Vamos a empezar.

Usabilidad y experiencia de usuario: Recomendaciones para el diseño de sitios web

1. Simplicidad

Aunque la apariencia de tu sitio web es ciertamente importante, la mayoría de la gente no llega al sitio para evaluar cuán ingenioso es el diseño. Quieren completar alguna acción, o encontrar alguna información específica.

Por lo tanto, los elementos de diseño innecesarios (es decir, los que no tienen un propósito funcional) solo abrumarán y harán más difícil que los visitantes logren lo que están tratando de lograr.

Desde una perspectiva de usabilidad y experiencia de usuario, la simplicidad es tu mejor amiga. Si tienes todos los elementos necesarios para la página, es difícil que sea demasiado simple. Puedes emplear este principio en una variedad de formas diferentes, tales como:

• Colores: Básicamente, no uses mucho. Es recomendable hacer uso de un máximo de cinco (más o menos dos) colores diferentes en tu diseño.
• Tipos de letra: Los tipos de letra que elijas deben ser altamente legibles, por lo que nada demasiado artístico y fuentes de escritura muy mínimas, si las hay. Para el color del texto, de nuevo, mantenlo al mínimo y asegúrate siempre de que contraste con el color de fondo. 

Una recomendación común es usar un máximo de tres tipos de letra diferentes, en un máximo de tres tamaños diferentes.

• Gráficos: Solo usa gráficos si ayudan al usuario a completar una tarea o a realizar una función específica (no añadas gráficos a la ligera).

2. Jerarquía visual

Estrechamente ligada al principio de simplicidad, la jerarquía visual significa disponer y organizar los elementos del sitio web, de manera que los visitantes se dirijan naturalmente hacia los elementos más importantes en primer lugar.

Recuerda, cuando se trata de optimizar la usabilidad y experiencia de usuario, el objetivo es llevar a los visitantes a completar una acción deseada, pero de una manera que se sienta natural y agradable. 

Ajustando la posición, el color o el tamaño de ciertos elementos, puedes estructurar tu sitio de tal manera que los espectadores se sientan atraídos por esos elementos primero.

En el siguiente ejemplo de Spotify, puedes ver que el encabezado principal "Escuchar es todo" se encuentra en la parte superior de la jerarquía visual con su tamaño y posición de página. Atrae tu atención a su misión antes que nada. 

A esto le sigue el CTA "Obtén Spotify free", que incita a la acción. Los usuarios pueden hacer clic en este CTA, o revisar los elementos del menú de arriba para más acciones.

3. Navegabilidad

Planificar una navegación intuitiva en tu sitio es crucial para ayudar a los visitantes a encontrar lo que están buscando. Idealmente, un visitante debería aterrizar en el sitio y no tener que pensar extensamente sobre dónde hacer clic a continuación. Moverse del punto A al punto B debería ser lo menos friccionante posible.

Aquí hay algunos consejos para optimizar la navegación de su sitio:

• Mantén la estructura de navegación principal simple (y cerca de la parte superior de tu página).

• Incluye navegación en el pie de tu sitio.

• Considera la posibilidad de utilizar “migas de pan” (breadcrumbs) en cada página (excepto en la página principal) para que los usuarios recuerden su ruta de navegación.

• Incluye una barra de búsqueda cerca de la parte superior de tu sitio, para que los visitantes puedan buscar por palabras clave.

• No ofrezcas demasiadas opciones de navegación por página. De nuevo, ¡simplicidad!

• Incluye enlaces dentro de tu página, y deja claro a dónde van esos enlaces.

• No hagas que los usuarios profundicen demasiado. Intenta hacer un mapa básico de todas las páginas de tu sitio, ordenado como una pirámide: 

La página de inicio debe estar en la parte superior, y cada página enlazada de la anterior forma la siguiente capa. En la mayoría de los casos, es mejor que el mapa no tenga más de tres niveles de profundidad. 

Un consejo más: Una vez que hayas decidido cuál será la navegación principal (superior) de tu sitio, mantenlo consistente. Las etiquetas y la ubicación de tu navegación deben ser las mismas en todas las páginas.

Esto nos lleva muy bien a nuestro siguiente principio...

4. Consistencia

Además de mantener una navegación consistente, la apariencia general del sitio debe ser similar en todas las páginas. Los fondos, los esquemas de color, los tipos de letra e incluso el tono de tu escritura, son áreas en las que la coherencia tiene un impacto positivo en la usabilidad y experiencia de usuario.

Eso no quiere decir que todas las páginas deban seguir el mismo diseño. En su lugar, crea diferentes diseños para tipos específicos de páginas (por ejemplo, páginas de aterrizaje, páginas informativas, entre otras). 

Al usar esos diseños de manera consistente, facilitarás que los visitantes entiendan qué tipo de información es probable que encuentren en una página determinada.

5. Adaptabilidad

Según Statista, el 48% de las páginas vistas a nivel mundial fueron de dispositivos móviles como teléfonos inteligentes y tabletas. Y por otro lado, el 93% de las personas han dejado un sitio web porque no se mostró correctamente en su dispositivo.

Para proporcionar una experiencia de usuario verdaderamente grandiosa, tu sitio tiene que ser compatible con los muchos dispositivos diferentes que sus visitantes están usando. En el mundo de la tecnología, esto se conoce como diseño web adaptable o responsivo.

El diseño adaptable significa invertir en una estructura de sitio web altamente flexible. En un sitio receptivo, el contenido es automáticamente redimensionado y reajustado para que se ajuste a las dimensiones de cualquier dispositivo que el visitante esté usando. Esto se puede lograr con plantillas HTML aptas para móviles, o creando un sitio móvil especial.

En última instancia, es más importante proporcionar una gran experiencia a través de diferentes dispositivos que parecer idéntico a través de esos dispositivos.

Además de la compatibilidad con los móviles, vale la pena probar la compatibilidad de tu sitio web con los navegadores. Lo más probable es que sólo hayas visto tu sitio en un navegador, ya sea Google Chrome, Safari, Firefox o cualquier otro.

Ahora es el momento de abrir tus páginas en cada uno de estos navegadores y evaluar cómo aparecen sus elementos. Lo ideal sería que no hubiera mucha diferencia en la presentación, pero no puedes estar seguro hasta que lo veas por ti mismo.

6. Accesibilidad

El objetivo de la accesibilidad a la web es crear un sitio web que pueda ser utilizado por cualquier persona, incluidas las personas con discapacidades o limitaciones que afecten a su experiencia de navegación. 

Como diseñador de un sitio web, es tu trabajo pensar en estos usuarios en tu plan de usabilidad y experiencia de usuario (UX).

Al igual que la adaptabilidad, la accesibilidad se aplica a todo el sitio: estructura, formato de página, imágenes y contenido tanto escrito como visual. Las Pautas de Accesibilidad al Contenido en la Web (WCAG), desarrolladas por la Iniciativa de Accesibilidad en la Web y el Consorcio de la World Wide Web, establecen las pautas para la accesibilidad en la web. 

En un sentido amplio, estas pautas establecen que los sitios web deben ser:

• Percibibles: Los visitantes son conscientes del contenido de tu sitio.
• Operables: La funcionalidad del sitio web debe ser posible de diferentes maneras.
• Comprensible: Todo el contenido y las alertas pueden ser fácilmente comprensibles.
• Robusto: Tu sitio web es utilizable a través de diferentes tecnologías de asistencia, dispositivos y navegadores.

7. Convencionalidad

Un gran desafío en el diseño web es equilibrar la originalidad con tus expectativas. La mayoría de nosotros somos usuarios expertos de Internet, y hay convenciones específicas a las que nos hemos acostumbrado con el tiempo. Tales convenciones incluyen:

• Colocar la navegación principal en la parte superior (o izquierda) de una página.
• Colocar un logo en la parte superior izquierda (o centro) de una página.
• Hacer que el logo sea cliqueable, para que siempre lleve a un visitante de vuelta a la página principal.
• Tener enlaces y botones que cambian de color/apariencia al pasar el cursor sobre ellos.
• Usar un icono de carrito de compras en un sitio de comercio electrónico. El ícono también tiene una insignia numérica que significa el número de artículos en el carrito.
• Asegurarse de que los deslizadores de imágenes tengan botones, que los usuarios puedan hacer clic para rotar las diapositivas manualmente.

Mientras que algunos podrían optar por tirarlas por la ventana en aras de la singularidad, esto es un error. Todavía hay mucho espacio para la creatividad dentro de las limitaciones de la convencionalidad de la web.

Consideremos brevemente otro campo del diseño, la arquitectura. Los códigos de construcción se establecen para que la gente pueda habitar los espacios fácilmente y con seguridad. 

Un arquitecto no se queja de estos códigos o los viola porque, aparte de las repercusiones legales, aseguran la seguridad y la comodidad de los huéspedes. No importa lo deslumbrante que parezca el edificio , si tropiezas con escaleras desiguales o no puedes salir en un incendio, tal vez prefieras quedarte fuera.

De la misma manera, puedes crear una experiencia memorable y al mismo tiempo cumplir con las expectativas del usuario. Si no cumples con las expectativas que los usuarios anticipan, pueden sentirse incómodos o incluso frustrados con tu sitio.

8. Credibilidad

Ceñirse a las convenciones de la web le da credibilidad a tu sitio. En otras palabras, aumenta el nivel de confianza que el sitio transmite. Y si te esfuerzas por construir un sitio que proporcione la mejor experiencia posible al usuario, la credibilidad llega muy lejos.

Uno de los mejores métodos para mejorar tu credibilidad es ser claro y honesto sobre el producto o servicio que estás vendiendo. No hagas que los visitantes escarben en docenas de páginas, para encontrar lo que haces. Se franco en tu página de inicio, y dedica algunas palabras para explicar el valor detrás de lo que hace.

Otro consejo de credibilidad: Ten una página de precios, también enlazada en la página principal. En lugar de obligar a la gente a contactarte para saber más sobre los precios, haz una lista de los precios claramente en tu sitio. Esto hace que tu negocio parezca más confiable y legítimo.

9. Enfocado en el usuario

Al final del día, la usabilidad y experiencia del usuario dependen de las preferencias de los usuarios finales. Después de todo, si no diseñas para ellos, ¿para quién diseñas?

Así que, aunque los principios detallados en esta lista son un gran punto de partida, la clave final para mejorar el diseño de tu sitio es realizar pruebas de usuario, recoger comentarios e implementar cambios basados en lo que has aprendido.

Y no te molestes en probar la usabilidad por ti mismo. Ya has invertido mucho tiempo en tu diseño, lo cual trae tus propios sesgos a la ecuación. Consigue testers que nunca hayan visto tu sitio antes, igual que cualquier visitante por primera vez.

Aquí hay algunas herramientas de prueba de usuario para que empieces:

• Website Grader: La herramienta gratuita de Hubspot evalúa tu sitio web basado en varios factores: móvil, diseño, rendimiento, SEO y seguridad. Luego ofrece sugerencias de mejora a medida. 
• Crazy Egg: Rastrea varios dominios bajo una cuenta y descubre el rendimiento de tu sitio, utilizando cuatro herramientas de inteligencia diferentes: mapa de calor, mapa de desplazamiento, superposición y confeti.

• Loop11: Utiliza esta herramienta para crear fácilmente pruebas de usabilidad, incluso si no tienes experiencia en HTML.

Esperamos que estas pautas sean útiles para informar la estructura de tus páginas web y el sitio web en su conjunto. Pero, ¿cómo se ponen en práctica estas pautas? En la siguiente sección, vamos a repasar los elementos esenciales de la página que deberías considerar seriamente incluir en tu plan de diseño.

Requisitos de diseño del sitio web

1. Encabezado y pie de página

El encabezado y el pie de página son un elemento básico de casi todos los sitios web modernos. Intenta incluirlos en la mayoría de tus páginas, desde tu página de inicio, hasta las entradas de tu blog, e incluso en la página de "No se encontraron resultados".

El encabezado debe contener tu marca en la forma de un logo y nombre de la organización, navegación de menú, y tal vez un CTA, y/o una barra de búsqueda si está bien espaciada y es mínima. En el otro extremo, el pie de página es donde muchos usuarios se desplazarán instintivamente para obtener información esencial. 

En tu pie de página, coloca la información de contacto, un formulario de inscripción, enlaces a tus páginas comunes, políticas legales y de privacidad, enlaces a versiones traducidas de tu sitio y enlaces a redes sociales.

2. Navegación por el menú

Ya sea una lista de enlaces en el encabezado o un botón en la esquina, cada sitio web necesita una guía de navegación posicionada en la parte superior, de al menos tu página principal y otras páginas importantes. Un buen menú limita el número de clics para llegar a cualquier parte del sitio web a sólo unos pocos.

Para reducir el desorden, podrías considerar hacer de algunas o todas las opciones del menú un menú desplegable con enlaces dentro de él.

3. Barra de búsqueda

Además de la navegación por el menú, considera seriamente la posibilidad de colocar una barra de búsqueda en la parte superior de tus páginas, para que los usuarios puedan buscar en el sitio el contenido por palabra clave. 

Si incorporas esta funcionalidad, asegúrate de que tus resultados sean relevantes, sin errores de escritura, y capaces de aproximarse a las palabras clave. 

La mayoría de nosotros usamos un motor de búsqueda de alta calidad todos los días, ya sea Google, Amazon, YouTube, o en cualquier otro lugar. Todos ellos establecen el estándar para la búsqueda de tu propio sitio.

4. Marca

¿Recuerdas las convenciones que hemos discutido? Una que se ve prácticamente en todas partes es un logo en la esquina superior izquierda. En el primer aterrizaje, los ojos de muchos visitantes se dirigirán instintivamente a esta región para comprobar que están en el lugar correcto. No los dejen colgados.

Para reforzar esta noción, incorpora la marca de tu empresa en cada elemento que añadas, en el contenido que publiques y en la combinación de colores que crees. Por eso recomendamos establecer pautas de marca.

5. Paleta de colores

La elección del color juega un papel importante en la usabilidad y experiencia de usuario de tu sitio. Esta decisión tiende a ser más subjetiva que otros requisitos de esta lista. Pero, como todo lo demás que hemos discutido, trata de simplificar - limita tu selección de colores a 3-4 colores prominentes como máximo.

Comenzar una paleta de colores desde cero puede ser sorprendentemente difícil la primera vez. Parece que intuitivamente captamos qué colores funcionan bien juntos y cuáles no, pero nos tropezamos al tratar de elegir entre las infinitas combinaciones disponibles.

¿La solución? Intentar una paleta de colores que se ha demostrado que funciona en otros sitios web. Puedes tomar ideas de tus sitios favoritos.

6. Encabezados

Los encabezados son clave para establecer la jerarquía visual de la que hablamos antes, especialmente en páginas con mucho texto. A medida que los usuarios hojean tus páginas buscando lo que necesitan, un encabezado claro y al punto, alerta a los lectores para que dejen de desplazarse después de encontrar lo que quieren. 

Utiliza sólo tantos encabezados como secciones distintas tenga tu página, ya que demasiado texto hinchado y en negrita amortiguará este efecto.

7. Etiquetas claras

Cada vez que un usuario realiza una acción en tu sitio web, debe estar obvio lo que está haciendo y/o a dónde va. Todos los botones deben tener un texto claro o un icono para señalar de forma precisa y concisa su propósito. Lo mismo ocurre con los enlaces de texto y los widgets (elementos interactivos simples, como desplegables y formularios de texto).

Por ejemplo, un botón que enlaza con una página de precios debería decir simplemente "Precios" - cualquier otra cosa que vaya más allá (por ejemplo, "Vea nuestros precios", "Vea la página de precios para una oferta") es superflua. 

Un botón/barra de búsqueda sólo necesita un icono de cristal de búsqueda (), y quizás también la palabra "Buscar", para denotar su propósito.

Las pruebas de usuario pueden ser de gran ayuda aquí. Aunque entiendas lo que hacen todos los elementos de tu página interactiva, no se puede decir lo mismo de un nuevo usuario. Las pruebas darán una valiosa visión de lo que los usuarios piensan sobre que significan tus etiquetas, más allá de tu propia perspectiva.

8. Visuales y medios de comunicación

Cuando incorpores imágenes estáticas, gifs, videos y otros medios en tus páginas, recuerda ser consistente e intencional en tus elecciones. Estos elementos llamarán la atención sobre la mayoría de los demás textos y probablemente se quedarán en la mente de los usuarios, así que elige sabiamente.

Además, todas las imágenes y vídeos deben ser optimizados para los motores de búsqueda e incluir texto alternativo descriptivo para su accesibilidad.

9. Llamamientos a la acción

Tener un sitio web agradable es genial, pero ¿cómo sabes si tus visitantes están haciendo lo que quieres? ¿Están comprometidos con tu contenido? Aquí es donde los CTA entran en juego.

Un CTA es cualquier elemento de la página que incita a la acción del usuario. La acción puede ser añadir un producto a una tarjeta, descargar una oferta de contenido o inscribirse en una lista de correo electrónico. 

Haz que tus elementos de CTA destaquen en la jerarquía visual (recuerda nuestro ejemplo de Spotify), pero sin ser intrusivos ni distraer como suelen ser muchos anuncios de clicks.

10. Espacio en blanco

Así es, a veces se trata de los elementos que no se incluyen. Después de leer estas recomendaciones y requisitos, puede que te sientas tentado a llenar tus páginas con todos los elementos necesarios para una usabilidad y experiencia de usuario impecables. 

No olvides que tus espectadores necesitan espacio para digerir toda esta nueva información, así que dale a tus elementos espacio para respirar.

Pero, ¿cuánto espacio en blanco deberías tener? Esa es otra llamada personal, y varía de un sitio a otro. Por lo tanto, la prueba de usuario es útil aquí también. ¿En qué se está centrando la gente? ¿Se sienten abrumados con la densidad del contenido? Una vez más, todo se relaciona con nuestra primera directriz, la simplicidad.

Diseño que pone a los usuarios primero

De hecho, el diseño web es en gran parte subjetivo - el aspecto y la experiencia de tu sitio web no va a gustar a todo el mundo. Sin embargo, también hay principios de UX probados que, cuando se consideran e incorporan cuidadosamente, ayudan a los visitantes a sentirse más a gusto.

Según Amazon Web Services, el 88% de los visitantes de un sitio web tienen menos probabilidades de volver a un sitio web después de una mala experiencia. ¿Y cómo se les puede culpar? Seguramente todos hemos estado allí.

Así que, como un poco de sabiduría de usabilidad y experiencia de usuario final, ¡empieza a preocuparte más! Imagínate en los zapatos (o, más exactamente, en las ventanas de los navegadores) de tus visitantes, y tenlos en cuenta en cada paso del proceso de diseño.

Por último, te recordamos que en Signos somos expertos en la creación de sitios web profesionales, de alto impacto. No olvides que la primera impresión es la que vale, por eso estamos aquí para ayudarte a marcar la diferencia con tu sitio web. ¡Juntos podemos lograrlo!