Cada vez que hablamos del diseño web pensamos en la estructura, componentes y funcionalidad relacionadas a la interfaz visual de un sitio web. Inmediatamente se nos viene a la cabeza visualizaciones sobre formas, colores, imágenes, letras, efectos, contenido y navegación.

Sin embargo, un buen número de personas con pocos conocimientos de diseño o que recién empiezan en este ámbito, bosquejan el sitio rápidamente, usan un tema y comienzan a colocar todos los elementos que consideran deberían incluirse para que dicho sitio se vea, sobre todo, agradable (según su gusto claro está). El resultado de esta práctica simplista y poco estudiada se traduce en dificultades de navegabilidad, problemas con la velocidad de carga, alta tasa de rebote y, por lo tanto, una baja tasa de conversión

Diseñar un sitio web va más allá de publicar contenido de forma indiscriminada y de colocarlo dónde y cómo se nos ocurra. No es cuestión de aplicar cuanto efecto visual se nos venga a la cabeza o estar a la moda con los últimos plugins y widgets. Debemos considerar, sobre todo, qué repercusiones sicológicas, positivas o negativas sobre los visitantes, tendrán estos elementos, su disposición conjunta y la forma en que intervienen e interactúan en el sitio web.

Lo que te damos a continuación, son 4 aspectos que debes enriquecer para aplicar un diseño pensando en cómo cada esquema y elemento afecta el estado de ánimo, la actitud y la experiencia que el visitante experimentará al navegar en tu sitio.

Contenido

Ya es bastante sonado el hecho de que el contenido ha cobrado bastante importancia para el mundo de la web. Los visitantes quieren acceder a información que necesitan y el primer paso es que la encuentren, pero una vez hallada, su estado de ánimo se mantendrá positivo si pueden acceder a ella de forma simple y rápida.

Uno de los temas claves en cuanto al despliegue de la información para el visitante, es en cuanto a su longitud o tamaño (cantidad de caracteres del artículo por ejemplo) y en cuanto al número de módulos de información mostrados a la vez (número de artículos por ejemplo).

Las páginas con contenido voluminoso son de lectura difícil y agotadora. Si por ejemplo un artículo es muy largo, se hace difícil extraer las ideas principales y conduce a un aburrimiento progresivo del lector. Claro que si el post es muy bien estructurado y tiene mucha información valiosa, el lector puede experimentar algo contrario al aburrimiento, como lo habíamos mencionado en este post sobre la extensión de los artículos para un blog.  Además, si se tienen muchos artículos desplegados a la vez causa una primera impresión de confusión y tedio. No hay duda que esto provocará ansiedad y sentimientos desagradables generales a los visitantes.

El objetivo es encontrar el término medio entre mostrar la información necesaria pero sin que el visitante sea abrumado por la información que queremos transmitirle. Por ello, debemos editar y organizar de forma adecuada el contenido para que la lectura y navegabilidad provoquen un sentimiento de confort y, por lo tanto, bienestar en el visitante.

Es muy importante que la temática del contenido guarde relación con el lugar en el que es mostrado. Si la disposición y navegabilidad no conducen a un orden lógico, el usuario comenzará a divagar, se le hará difícil seguir un hilo conductor o se desviará de la información importante. De seguro se harán una misma imagen divagadora de ti y muy pronto estarán abandonando el lugar.

Intenta siempre tener un contenido sustancial pero depurado, breve pero preciso, abundante pero organizado. No hay duda que impactarás en la sicología de los visitantes y promoverás su mayor permanencia, retorno y recomendaciones.

Espacio

La disposición adecuada del contenido y elementos adicionales, como por ejemplo los widgets, afectan la percepción sicológica que el visitante tiene sobre la página. Organizarlos de una forma que, aunque tengamos la intención de transmitir todo lo que ofrecemos, no saturen y estresen al invitado.

Es un error por lo tanto intentar llenar, cuanto espacio tengamos disponible en una página, con imágenes, texto, cosas flotantes, artefactos deslizables, efectos visuales y más. Esta falta de espacio libre para que la vista tome un descanso, crea un sentimiento de complejidad e incomodidad.

El “espacio en blanco” juega un papel muy importante en el “concepto minimalista” que actualmente es muy popular. Este concepto se basa en utilizar la menor cantidad de elementos visuales buscando concentrar la atención de usuario y reducir la distracción, además de aligerar la visualización en un sentido biológico y sicológico.

El objetivo debe ser mostrar cosas de una forma sencilla sin sacrificar el buen gusto y la navegabilidad. Simplificar no sólo trae los beneficios antes mencionados, sino que también puede conducir a una optimización en la velocidad de carga ya que se debe ser más analítico respecto a buscar los componentes más sencillos para mostrar la información y proporcionar la navegabilidad requerida.

Color

No por el hecho que los colores distintivos de nuestra marca sean el rojo y amarillo, vamos a rellenar cada espacio y poner el tinte a cada componente con dichos colores, a menos que nuestro diseñador sea un pequeñín que aprende a rellenar objetos en una computadora. De hacerlo, produciremos una percepción de demasiada informalidad y saturación visual que se traducirá en un sentimiento de incomodidad.

Por ello para usar los colores de forma adecuada, así como el espacio libre juega un papel muy importante, pueden usarse colores neutrales como el blanco y negro, así como tonalidades de los colores principales, para los componentes y fondos de las páginas.

Por cultura general sabemos que los colores generan sensaciones de temperatura y estas pueden estar relacionadas a sentimientos de mayor o menor confort así como a la percepción sobre la identidad de algo o alguien. Así por ejemplo, colores como los azules, verdes y morados dan mayor atractivo, imagen profesional y relajada pero pueden provocar cierta timidez del visitante. Colores cálidos como los amarillos, naranjas, rojos dan una sensación de mayor apertura, calidez de trato e imagen de versatilidad pero pueden generar informalidad.

En cuanto a los colores neutros, usarlos en demasía puede conducir a una imagen de poco sustancial y generar aburrimiento, a pesar de proporcionar un sentimiento de apertura. Los grises generan percepciones de seriedad, formalidad y modernidad pero pueden ser muy fríos y poco atractivos. El negro se asocia a una imagen profesional, depurada y elegante pero usado inadecuadamente puede saturar y hacer monótona la visualización.

Debes considerar esencialmente el tipo, la luminosidad y la sombra del color así como la cantidad de color a utilizar. Por ejemplo para lograr percepciones de ser atractivo, abierto y creativo, una combinación de azules y verdes, con toques de color amarillo o naranja sobre un fondo blanco o gris claro, permitirán generar esos sentimientos en tus visitantes.

Tipografía

Los tipos de letra o fuentes juegan también un papel importante en la generación de sensaciones sicológicas en los visitantes. Gracias a la adición de fuentes básicas en CSS y la proliferación de fuentes gratuitas y de paga, se ha incrementado un mayor uso de diversos tipos de letra pero que traen consigo un cuidado mayor al utilizarlos.

Fuentes como las Serif (las que tienen “patitas”) se relacionan generalmente con la formalidad, la profesionalidad y lo académico (Times New Roman por ejemplo). Mientras tanto, las fuentes San-serif se relacionan a lo moderno, simple y más informal (Calibri por ejemplo).

Para dar una sensación de autoridad y relevancia del contenido, muchos diarios en línea utilizan fuentes Serif para así generar en el visitante un sentimiento de estar involucrados en algo de importancia y credibilidad. Otros sitios, tales como los tecnológicos, usan las fuentes San-serif porque transmiten modernidad y sofisticación, buscando generar en el usuario una sensación de que están actualizados y que están a la vanguardia en la tecnología.

Es importante también considerar el “leading” (espacio entre líneas) y el “kerning” (espacio entre caracteres). Por ejemplo, un mayor leading da una sensación de poca saturación y proporciona una mejor lectura.

También se debe tener en cuenta los espacios entre párrafos, márgenes entre los bloques de texto y otros elementos de la página, así como el tamaño de la fuente y su relación con el leading. Debemos evitar los párrafos muy pegados ya que no lucen bien y son más difíciles para la lectura y comprensión. Tener las imágenes muy pegadas al texto también es un error ya que satura la visualización. Utilizar tamaños de letra inapropiados con respecto a otros puede generar una sensación de imposición al visitante (quieren ganar su atención gritándole) o pueden producir una percepción de insignificancia o poca transparencia (susurros)

Concluyendo

Mientras los diseñadores web y sus superiores contemplen el aspecto sicológico en la planificación del sitio, podrán crear, esquematizar y organizar mejor contenido y formas más apropiadas y eficientes de mostrarlo al visitante, lo que se traducirá finalmente en una mayor conversión.