Eliminar las Distracciones en el Diseño de tu Sitio Web

Diseño web en Chimbote

Algunos elementos de su sitio web van a restar valor al mensaje que intenta transmitir. Las animaciones complicadas, el contenido demasiado extenso y las imágenes de la página web “corpulentas” son sólo algunos ejemplos.

Con un público que sólo tiene una capacidad de atención de ocho segundos, hay que dejar muy claro lo que el usuario va a aprender en la página que está viendo y el diseño no debe restarle valor. Para ello, hay que asegurarse de contar con unas directrices de marca coherentes con las que poder trabajar.

Adquiere ahora el servicio de diseño de webs en Chimbote.

Esto debería detallar los estilos de letra, los colores, las imágenes, la iconografía y el uso del logotipo. Sin esto, es fácil que las marcas tengan problemas al diseñar las páginas. Es probable que empiece a ver colores arbitrarios y diferentes estilos y tamaños de letra, lo que a su vez puede distraer de su mensaje o crear confusión visual para las personas que intentan convertir.

También es importante evitar demasiadas animaciones o interacciones en la página. Si se desplaza por una página y ve cada botón pulsando o una sección de iconos cada uno con su propia animación, puede resultar abrumador y distraerles de la lectura de lo que hay en la página.

Echemos un vistazo a la página web de abajo como ejemplo. Nota, ya que estoy tratando esto como más de una crítica, estoy eliminando el logotipo de la marca de la imagen para que puedan permanecer más anónimo.

Los colores de tu sitio web

Al ver este sitio, lo primero que me llamó la atención fueron los colores.

Por un lado, la forma en que se utilizan hace que el usuario tenga dificultades para decidir a dónde debe dirigirse su mirada. ¿Debe ser uno de los dos botones rojos? ¿Y la barra de bienvenida? ¿O tal vez la parte superior de la navegación?
Tienes que averiguar dónde quieres que vaya la atención de los usuarios cuando lleguen a la página y en qué orden tiene que fluir de forma natural. La disposición actual de los colores crea fricciones para lograrlo.

En segundo lugar, hay algunas zonas con un espaciado incoherente. La percha de la barra de saludo (‘¡tú!’) crea una segunda línea que podría arreglarse fácilmente si se aumentara la anchura del contenedor alrededor del texto. El H1 tampoco está exactamente centrado verticalmente en el área blanca, lo que atrae la atención hacia el “asunto” en lugar de hacia el grueso del mensaje.

En la sección gris debajo de la cabecera, encabezan con un botón (que no tiene mucho contexto) y se siente intercalado encima de una imagen. Como usuario, me queda la duda de si se supone que tiene que haber espacio debajo, o si se supone que se relaciona directamente con la imagen. ¿Acaso el sitio se ha cargado incorrectamente? Este debate interno crea fricción y confusión.

Experiencia de usuario

Veamos una página que ofrece una mejor experiencia para el usuario y que respeta las directrices de la marca.

Arriba tenemos a Communication Square, otra empresa del sector de la informática. A primera vista, este sitio web utiliza un aspecto mucho más limpio con colores menos llamativos y más espacio en blanco.

En cuanto a los colores, me gusta que Communication Square tenga dos colores de botones, uno para las acciones de menor prioridad en la parte superior o media del embudo (azul) y otro para la acción en la parte inferior del embudo (naranja). Como resultado, mi vista se dirige inmediatamente al naranja, la acción más importante que quieren que realice.

También se percibe una mayor cohesión en los tipos de letra: parece que sólo hay una familia de fuentes, con un peso ligero, medio o en negrita. Esto crea uniformidad y hace que todo funcione bien.

Imágenes

La imagen principal ofrece poco espacio para la distracción. El hecho de que la imagen principal no sea demasiado detallada y esté enmascarada con una capa blanca permite que el contenido destaque, en lugar de desaparecer en la imagen.

Este tipo de detalles ayudan a mejorar la experiencia general de tu sitio web y a que los usuarios entiendan mejor lo que quieres que hagan, dejando menos espacio para la confusión.

Leave a Comment

×