1. Coherencia  

2. Fácil de usar 

3. Elige una paleta de 4 colores 

4. Patrones de lectura Web

4.1 Patrón en F

4.2 Patrón en Z 

5. Utiliza contenidos multimedia de calidad

Analizar, interpretar y generar un juicio o una opinión sobre algo o alguien es un aspecto que tiene que ver con la evolución de nuestra especie, hablamos de un recurso adaptativo. Algunos psicólogos dicen que, en ocasiones, podemos hacerlo en milésimas de segundo.

Suponiendo que esa afirmación sea verdad, tenemos muy poco tiempo para transmitir una buena impresión y captar la atención de los visitantes a nuestra página Web. Después vendrá la delicada tarea de comunicar los beneficios y cualidades de nuestros productos/servicios.

En este artículo vamos a ofrecerte cinco conceptos que te ayudarán a primero, ampliar tu criterio; y segundo, definir de una forma más precisa y profesional el diseño de tu nueva página Web.

Comencemos con una idea ligada al sentido común. La coherencia es uno de los aspectos fundamentales en el diseño de tu página Web. Esto significa que todas las páginas/secciones tengan una misma línea gráfica y mantengan una armonía y similitud. No hablamos de que todas las secciones tienen que ser iguales, nos referimos a que debe existir un equilibrio y continuidad en cómo se disponen sus elementos: cajas de texto, colores, tamaños, tipografías y elementos visuales (fotos/vídeos). Para conseguirlo debemos trabajar con cuidado y atención desde el principio, y sobre todo, confiar en las recomendaciones y asesoramiento del equipo de especialistas que están trabajando contigo.

Visitar y usar una página Web es una experiencia. Esta puede ser positiva o negativa, dicha valoración dependerá de lo agradable o fastidioso que resulte. La experiencia se produce con la interacción de los elementos que incluimos, estos pueden ser de cuatro tipos:

• Conductores (menús/enlaces)
• Informativos (texto/ilustraciones)
• Decorativos (fotos, vídeos, animaciones, etc.)
• De conversión (botones de acción, CTA).

(Fuente de la imagen: Interaction Design Foundation)

Aquí el objetivo es garantizar a nuestros usuarios una experiencia y navegación cómoda y positiva. Algo que hoy se conoce en el mundillo del marketing digital como User Experience. Para conseguirlo, debemos asegurarnos de que se cumplan estas tres premisas:

• Estructurar de forma sencilla y clara los menús y la categorización del contenido
• Garantizar que un proceso sencillo de conversión/venta
• Ponerse en el lugar del usuario para detectar secciones, servicios o acciones que puedan confundirlo

Cuando vemos un color nuestros ojos se comunican con el hipotálamo, una región del cerebro que envía olas de señales a nuestra glándula pituitaria (sistema endocrino) y luego a las glándulas tiroides. ¿Qué tiene que ver esto con mi Web? Más de lo que imaginas, porque todas estas glándulas liberan hormonas, y estas hormonas causan variaciones en nuestro estado de ánimo, emociones y lo más importante, en nuestro comportamiento.

Algunos especialistas señalan, ojo porque la cifra es altísima, que el 90% delas evaluaciones de productos/servicios están 

relacionadas con su color. De manera que el color no es un tema menor, ni se puede dejar al azar o tomar a la ligera. Primera conclusión: la elección de tus colores en el diseño de tu web es un factor decisivo para conseguir tus objetivos de conversión y, por tanto, para mejorar tus ventas.

Volviendo a la relación entre comportamiento y color, existe una rama de la psicología que estudia cómo afecta el color al comportamiento humano. A pesar de que existen múltiples estudios sobre la psicología del color (así se le conoce a la rama), sus resultados, conclusiones y teorías resultan complicadas de comprobar por su carácter subjetivo.

Sin embargo, existen artículos donde podemos encontrar hechos y experimentos que demuestran el factor decisorio del color. Por ejemplo, tenemos el artículo publicado por Satyendra Singh, miembro del Departamento de Estudios Administrativos de la Universidad de Winnipeg, Canadá, donde concluye que un cliente tarda 90 segundos en generar una opinión sobre un producto. Lo interesante aparece cuando revela que entre el 62% y 90% de ese proceso está condicionado por el color del producto.

Teniendo en cuenta su relevancia, necesitamos tener en cuenta cuatro variables para utilizar la psicología del color a nuestro favor:

• Usarlo de manera correcta ¿Qué emociones quieres transmitir?
• Que aparezca en el tiempo oportuno ¿Dónde vas a colocar esos colores?
• Elegirlo para el público adecuado ¿Afecta igual el color a hombres que a mujeres? ¿Quién es mi público objetivo principal, quién compra más mis productos?
• Destinarlo al propósito perfecto ¿Qué quiero hacer: vender, Impresionar, llamar la atención, generar confianza, generar una acción?

¿Por dónde empiezo? Lo primero que te aconsejamos es tener un límite. Entre menos colores utilices mucho mejor. Eso hará que tu imagen de marca sea más fácil de recordar ya que tendrá una asociación más sencilla. Sin embargo. Sabemos que en el diseño de una Web existen múltiples elementos como texto, títulos, subtítulos, bordes, menús, fondos o botones (los famosos CTA) que necesitan ser destacados y diferenciados.

Por esta razón, te recomendamos elegir una paleta con máximo cuatro colores, a su vez conformada por: un color principal; un color opuesto (que aporte contraste); un color análogo que mantenga el equilibrio cromático y un color neutro que aporte limpieza.

Estas son tres herramientas que pueden ayudarte en la definición de tu paleta de colores:

• Adobe Color
• Color Hunt
• Oto255
• BrandColors

Si necesitas inspiración, te recomendamos visitar este artículo donde encontrarás 20 paletas de colores utilizadas en páginas Webs. (Fuente: LanceTalent, enlace)

No podemos olvidar que cuando un visitante aterriza en una página Web, lo hace porque está buscando algo, tiene un objetivo concreto. Nuestro trabajo aquí consiste en anticiparnos y disponer todos los elementos indispensables para que el usuario encuentre lo que busca. Contrario a lo que se podría imaginar, no se trata de amontonar información y/o botones, al revés, lo que necesitamos es que la información sea clara, sencilla, destacada, bien organizada y con el apoyo visual suficiente para que el visitante la vea y la use.

El patrón de lectura de la cultura occidental (la nuestra) es de izquierda a derecha y de arriba a abajo, así que debemos ceñirnos a él siempre y sacarle el mayor provecho posible. Respetarlo nos permitirá que toda la información que el usuario busca, y que nosotros queremos darle, llegue de forma directa.

Instintivo e imperceptible, esa es la forma principal que nuestro cerebro ordena a nuestros ojos para leer la información de nuestra página Web. Al ser el patrón de lectura dominante, pero qué significa este orden de lectura. Vamos a explicarlo en tres movimientos:

1. El usuario lee de forma horizontal, a partir de la primera línea u objeto que encuentra
2. Dirige su vista hacia abajo de la página y hace otro recorrido breve horizontal a la derecha
3. Lee el resto de contenido que se encuentra al lado izquierdo de forma vertical hacia abajo

Aún no sabemos con exactitud el porqué leemos con este patrón en una pantalla, sin embargo, habría que tener en cuenta tres pautas para respetarlo:

1. Es poco probable que el usuario lea un texto completo palabra por palabra. Esto significa que el usuario más que leer, está «escaneando» la página en busca del contenido que le interesa. De ahí la sencillez y claridad de la información.
2. Las primeras secciones deben contener información fundamental, atractiva y relevante. De nuevo, no tenemos tiempo para que el usuario se pierda en un mar de palabras, debemos darle la información que pide.
3. Usa títulos, subtítulos, párrafos y viñetas. Estos recursos nos ayudan a destacar información relevante, al estar separadas hacen que el usuario dirija su atención hacía ellas con mayor facilidad.

El especialista en UX Nick Babich publicó un interesante artículo en su blog donde explica otro patrón de lectura que muchos utilizamos para escanear información en una Web que ofrece productos/servicios. Los movimientos que seguimos serían los siguientes:

1. El usuario recorre la parte superior de izquierda a derecha
2. Escanea en diagonal, de derecha a izquierda, la parte central, existe la posibilidad de que el usuario se detenga si algo les llama la atención
3. Termina recorriendo la parte inferior de izquierda a derecha, de nuevo

Babich señala que el patrón Z tiene sentido en páginas centradas en imágenes y con poco texto, para páginas con más texto, como artículos o resultados de búsqueda -Google-, es mejor usar el patrón «F». Sin embargo, el patrón «Z» es muy recomendable en páginas donde tenemos dos botones de acción en la misma pantalla, que bien, pueden estar allí para reforzar una llamada a la acción u ofrecer dos servicios distintos, este es el caso de Facebook:

«Lo cortés no quita lo valiente», reza el refrán. Un mensaje que se adapta a la perfección en lo que a contenidos visuales para nuestra Web. Nos referimos de forma principal a las fotos y los vídeos que necesitemos para «vestir» nuestra página Web. Vivimos en la era de la imagen, así que, a menos que se trate de una Web muy conceptual, dirigida a un público o nicho muy específico, será imprescindible que nuestra página contenga este tipo de elementos.

Bajo esta premisa, nosotros creemos que es mejor calidad que cantidad. Puede ser un topicazo, pero es preferible tener cinco buenas fotografías a diez regulares tirando a malas. Utilizando buen material comunicamos dos atributos de nuestra marca y negocio: profesionalidad y dedicación.

¿Te han resultado útiles estos consejos?, ¿hay algo que eches en falta?, ¿existe algún tema que te gustaría que abordáramos en el blog? Compártelo todo en los comentarios. Si quieres que veamos cómo ha quedado el diseño de tu Web, déjanos la url también en los comentarios :-)

Nos leemos pronto.