Existe un amplio consenso entre los analistas a propósito de la estrecha relación que se da entre la experiencia de usuario o UX (por User eXperience) y la optimización para buscadores o SEO (por Search Experience Optimization).
Se trata de un círculo virtuoso porque un buen SEO atrae más tráfico a un sitio, y una buena UX no solamente retiene a ese tráfico sino que incrementa la posibilidad de que regrese, con lo cual mejoran las señales de usuario que Google y otros buscadores utilizan para determinar la calidad de un sitio.
La razón es que, más tiempo de permanencia y menores tasas de rebote (salir de una página sin hacer ningún clic), mejoran la autoridad de un sitio a ojos de Google, lo que produce que tenga sucesivamente mejores posiciones en sus páginas de resultados.
Se da la circunstancia que periodistas y comunicadores se encuentran entre los profesionales que necesitan crear y mantener sitios web, muchas veces bajo el formato de blogs personales, pero a la vez de carácter profesional.
Estos sitios deben ser creíbles por su contenido sin dejar de aportar una buena experiencia de usuario, primero por razones elementales de prestigio, pero por si hiciera falta otra motivación, por la estrecha relación SEO & UX a la que nos hemos referido.
Tipografía y color: los componentes más básicos de la UX
Si bien la UX tiene dimensiones muy diversas, hay al menos dos componentes de un sitio web en los que es fácil arruinar la experiencia de usuario si no se poseen, al menos, algunas nociones de diseño, nos referimos a:
- Tipografía
- Combinaciones de color
Los sitios vinculados con periodistas y comunicadores pueden contener en realidad una amplia diversidad de contenidos multimedia, pero en casi todos ellos, los contenidos textuales son muy importantes, de aquí, a su vez, la importancia de las tipografías.
La importancia del color, por su parte, reside en que tenemos una cierta tendencia, que podemos señalar como «natural», a utilizar colores en exceso para destacar o diferencias partes de un sitio. Es un síndrome que puede llevar a un sitio a parecer pueril, en lugar de profesional.
En lo que sigue, consideramos ambos aspectos con algo más de detenimiento para pasar a ofrecer recursos en cada uno de ellos.
Uso de la tipografía en sitios web
El problema principal de la tipografía es, en teoría, el más fácil de evitar y, sin embargo, es lastimosamente frecuente. Consiste en ver sitios web, incluso sitios profesionales o de organismos importantes, que contienen problemas de legibilidad.
Estos problemas se producen con sitios que usan tamaños de letra pequeños o colores poco contrastados. Por ejemplo, hemos visto sitios de prestigio utilizar como color de letra un gris perla ¡sobre fondo blanco! La razón debía ser que como «mancha» da un buen aspecto a la página, pero dificulta la lectura.
El buen diseño no atenta contra la función
El contenido formado por texto es un contenido destinado a ser leído, por tanto, el diseño no debe nunca conducir a una tipografía que no priorice la legibilidad, porque entonces se trata de un diseño que atenta contra la función, cuando se supone que el buen diseño realza o ayuda a la función.
La captura anterior nos aporta orientaciones sobre la forma de describir o de analizar una fuente. La cuestión es que, para que una tipografía sea legible, basta con seguir unas reglas elementales:
- contraste entre figura y fondo suficiente, tal como letra de color oscuro sobre fondo claro, e idealmente, algo tan simple como negro sobre blanco;
- asta de la letra estándar, es decir evitar las falsamente elegantes que tienen un asta más fina de lo normal (si se pregunta qué es normal, el asta de la letra que está leyendo lo es);
- cuerpo o tamaño también estándar, por tanto, expresado en términos relativos de hoja de estilo como font size 100%, o 1em, o el tamaño 16px como mínimo si lo expresamos en términos absolutos, aunque esto último depende de la fuente concreta (la de este artículo en concreto es de 19 px y utiliza una fuente de sistema, por tanto es una Segoe UI o Tahoma en Windows y la que corresponda en otros sistemas operativos);
- no más de tres familias de letra diferentes en la misma página.
Como medidas adicionales, se considera conveniente cuidar el interlineado evitando uno excesivamente denso, repartir blancos utilizando párrafos de pocas líneas, así como evitar que el ancho o la longitud de cada línea ocupe la totalidad de la pantalla, para lo cual es conveniente situar también espacios en blanco en los lados de la página mediante la configuración del tema o el CSS de la página.
En todo caso, por si resulta útil, tenemos un glosario en idioma inglés en el sitio web del que hemos tomado la siguiente captura.
Combinaciones tipográficas
Un aspecto algo más complicado es la elección de las familias tipográficas que queremos combinar en caso de que queramos usar más de una. Una distribución típica es la que elegimos para titulares y la que elegimos para el cuerpo. Al igual que hay buenas combinaciones, las puede haber poco acertadas.
Afortunadamente, disponemos de algunos recursos que nos ayudan a seleccionar combinaciones óptimas de tales familias. Los siguientes sitios proporcionan una excelente guía para estos propósitos:
- 10 Great Google Font Combinations You Can Copy
- 20 Perfect Font Pairings
- Canva’s Ultimate Guide to Font Pairing
- Font Pair
Google Fonts
Por su parte, el siguiente sitio, consiste en la página web de Google donde podemos ver de una forma muy gráfica las diferentes fuentes que podemos usar en el caso de que el tema de nuestro CMS (WordPress, p.e.) soporte el uso de Google Fonts:
En esta página, podemos explorar las más 800 fuentes utilizando las opciones de una útil barra de navegación a la derecha, como hemos mostrado en la captura precedente.
Además, si hacemos clic en una de las fuentes, además de información específica sobre la misma, tenemos ejemplos de parejas de fuentes, como podemos ver en la captura que sigue para el caso de Roboto.
Combinar con y sin serif
En general, una combinación muy utilizada consiste en elegir una fuente con y otra sin serif. Típicamente, sin serif (como esta misma), para el contenido, porque tradicionalmente se ha considerado que en pantalla son más legibles. En el caso de la web, podiblemente el uso de fuentes sin serif es más habitual también porque se asocian a una cierta idea de modernidad.
En cambio, para los títulos suele utilizarse una fuente con serif, ya que al ser letras de mayor tamaño la legibilidad no resultaría afectada, a la vez que permiten un buen contraste con el cuerpo.
Resulta curioso observar que, en el caso de textos impresos solía utilizarse la cominación contraria: con serif para el cuerpo, porque se suponía que el serif ayudaba a seguir la lectura, al ser letras más pequeñas, y sin serif para los titulares.
En el caso del siguiente ejemplo tenemos una combinación típica de la web, con una fuente, Merryweather con serif para el título y otra, Open Sans, sin serif, para el contenido (el ejemplo está tomado de Google Fonts):
Otra posibilidad, aún más simple, es utilizar una misma fuente con sus variantes con y sin serif, como muestra el siguiente ejemplos con Roboto, una tipografía enormemente popular en la web:
De todos modos, sobre esta «teoría» que atribuye más legibilidad a las fuentes sin serif en pantalla, cabe señalar su posible inadecuación a la situación actual. Dada la calidad general del parque de pantallas de ordenador actuales, posiblemente esta apreciación ya no tenga mucho sentido y de este modo, lo cierto es que tenemos mucha más libertad de elección.
Un indicador importante es que muchos medios de comunicación utilizan fuentes con serif en el cuerpo de las noticias. Esto puede ser debido a la influencia de la página impresa, así como al hecho de que las fuentes con serif a una cierta idea de solvencia y rigor. En todo caso, no deja de ser significativo que la mayoría de los medios en Internet sigan utilizándolas sin ningún problema especial, al parecer.
En la captura precedente hemos tomado un ejemplo de un medio digital de gran prestigio, The Guardian, donde podemos ver que utilizan una fuente con serif (se trata de un fuente del mismo nombre, Guardian) tanto para el cuerpo como para el título (si el lector tiene curiosidad por la noticia, aquí tiene el enlace a la misma).
¿Qué fuente es esta?
A veces sucede que consideramos atractiva la tipografía una página que estamos visitando y nos gustaría saber de cual se trata. Decimos esto porque existen plugins para el navegador que nos permiten identificar las fuentes de un sitio web pasando el cursor sobre la misma. Es el caso de WhatFont que funciona sobre Chrome.
Uso del color en sitios web
Con los colores nos sucede algo parecido. La norma esencial es absolutamente fácil de observar: se trata de mantener, en general, una buena combinación figura/fondo, es decir, una que favorezca el contraste y que no impida (ni distraiga) la lectura o la visulización de los contenidos.
De aquí, la supremacía del color blanco como fondo que es fácil observar en la mayoría de sitios web profesionales, incluida la mayoría de sitios de medios de comunicación.
En ellos, el blanco (o un color extremadamente suave) es el color de fondo elegido casi siempre. Incluso como parte de la composición general, con frecuencia el blanco resulta ser uno de los colores dominantes (a veces los diseñadores lo denominan espacio negativo en cuanto el blanco se equipara a ausencia de contenido).
Combinaciones de color
Ahora bien, no es ningún secreto que los sitios web suelen necesitar de otros colores, más que nada porque con blanco sobre blanco no iríamos a ningún sitio.
Los colores suelen utilizarse para diferenciar secciones: por ejemplo, la navegación del contenido, o el contenido principal de contenidos destacados, etc., o las diferentes secciones entre ellas. Por la misma razón, es frecuente utilizar en los titulares con un color diferente del que se utiliza para el cuerpo, etc.
Nuevamente, nos encontramos con la posible trampa que puede afectar a quienes no posean nociones de diseño de elegir combinaciones de colores antiestéticas o incluso antifuncionales (ver Anexo 1).
Como en el caso de la tipografía, afortunadamente disponemos de algunos sitios que nos permiten consideran combinaciones de color cuya unión es virtuosa.
Algunos de los sitios donde podemos encontrar consejos sobre combinación de diferentes colores, son los siguientes:
Nuevamente, el consejo si no tenemos nociones de diseño y no queremos correr riesgos es ser parco en el uso del color. Un sitio basado en el blanco, el negro y, como máximo, un tercer color, como el azul o el naranja, siempre será acertado en este aspecto.
¿Qué color es este?
Al igual que nos sucede con loa tipografía, puede suceder que, visitando un sitio web veamos un color que nos parece adecuado o atractivo y deseamos conocer cuál es su código hexadecimal para poder usarlo en nuestra web. Tal como sucedía con las tipografías, hay plugins que, al pasar el cursor sobre un color nos indican su código hexadecimal. Es el caso de ColorPick Eyedropper, una extensión del navegador Chrome.
Implementación
Lógicamente, para poder elegir familias tipográficas y combinaciones de colores necesitamos un CMS que nos permita implementar y modificar tal clase de opciones.
En el caso de WordPress, necesitamos un tema o plantilla (theme) que sea compatible con las fuentes de Google (más de 800 actualmente) y que permita modificar los colores de la misma, es decir, necesitamos poder modificar la hoja de estilo (CSS) del sitio.
Por desgracia, la mayor parte de los temas gratuitos tiene serias limitaciones en estos apartados. Otra cosa es que los precios de los mejores temas de pago (premium) tampoco arruinan a nadie (entre 40 y 90 euros).
La barrera principal más bien está en la necesidad de utilizar versiones de WordPress que, a su vez, requieren un alojamiento web de pago. Pero si ha dado este paso, es absurdo no utilizar un tema que permita hacer modificaciones en estos aspectos tan esenciales de la UX.
Conclusiones
Dos de los principales problemas de la UX de un sitio web se pueden solucionar de forma muy eficiente con la utilización adecuada de las tipografías y las combinaciones de colores.
Visto desde el lado opuesto, son dos componentes del diseño de un sitio que, mal implementados pueden arruinar completamente la experiencia de usuario. Una legibilidad deficiente llevará al abandono prematuro del sitio y disminuirá la probabilidad de que los usuarios regresen en el futuro, lo que afectará al SEO del sitio.
Los mismo puede decirse del uso de las combinaciones de colores. Ni periodistas ni comunicadores en general deberían fallar en estos dos aspectos esenciales puesto que se trata de profesionales para los cuales la información de calidad es esencial, aspecto en el cual no solamente interviene el contenido, sino también los dos aspectos formales ya señalados.
Gracias a recursos como los reseñados aquí, no es necesario tener amplios conocimientos de diseño para evitar las peores trampas de usabilidad que una mala elección en términos de tipografía o de colores podría acarrearnos. Lógicamente, sin recurrir a un diseñador profesional (la mejor opción si hay presupuesto) no será fácil tener, además, un aspecto original, o que sea capaz de transmitir ciertos valores, pero al menos tendremos un sitio usable, accesible y con un diseño digno.
Anexo 1: Accesibilidad y color
Un problema diferente (y complementario) en relación con el color se refiere al tema de la accesibilidad que aquí no hemos considerado, pero del que dejamos constancia aunque sea a través de este anexo. Cuando consideramos temas de accesibilidad nos estamos refiriendo a algún tipo de discapacidad, como visión parcial o daltonismo.
En este sentido, la precaución principal consiste en evitar el uso del color como único medio de transmitir instrucciones o informaciones importantes, tal como señala uno de los criterios de accesibilidad sobre el uso del color:
El color no se usa como único medio visual para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. (Fuente: «Comprender las WCAG 2.0». Criterio 1.4.1 Nivel A)
Anexo 2: colores y tipografías utilizados este sitio
Para posibles interesados: este sitio suele utilizar fuentes como PT Sans o bien Oxygen para el cuerpo y los títulos. En ocasiones he utilizado también las fuentes Merryweather, Montserrat, Open Sans, todas sin serif y de una enorme legibilidad. Últimamente, me he inclinado por utilizar una fuente que en algunos temas de WordPress (como GeneratePress) se denomina System Stack. Signfica que utiliza en cada caso la fuente del sistema operativo.
Por ejemplo, para un navegador instalado en un Windows 10 esta fuente es Segoe UI, pero para otros sistemas será una fuente distinta, en general, sin serif. Para cuando el lector lea esto, no sé cual será la fuente utilizada, pero casi seguramente será una de las mencionadas anteriormente (hago cambios con frecuencia, pero siempre con fuentes sin serif y sobre todo con fuentes que privilegian la legibilidad).
Para los títulos a veces utilizo fuentes como Ubuntu sobre todo porque permite diferenciar bien entre letras que en otras tipografías son ambiguas, como entre las letras i y l que en algunas combinaciones aparecen idénticas.
En concreto, a veces he optado por utilizar solo minúsculas en la cabecera, y entonces, dadas las dos «eles» de mi nombre, otras tipografías sin serif no permitirían saber si las dos primeras letras que aparecen en la cabecera de mi sitio (a veces lo pongo todo en minúsculas) son dos «eles» minúsculas o dos «ies» mayúsculas, o primero una i mayúscula y luego una l minúscula o al revés.
Concretamente, con Helvetica, es imposible de distinguir entre dos «eles» minúsculas , una «i» mayúscula más una «ele» minúscula o dos «ies» mayúsculas:
A continuación, las tres cadenas anteriores, todas distintas, vemos que quedan iguales si se utiliza la fuente Helvetica: ll vs Il vs II |
Si no lo creen, aquí tienen el código fuente de la secuencia de caracteres anterior, vean que ninguno de los tres pares de letras es igual, sin embargo en la fuente Helvetica son idénticas:
Para el color, dada mi inseguridad en la materia, las combinaciones que pueden verse en la cabecera, barra de navegación y títulos están obtenidas de Colorhunt, siendo alguna de estas dos: http://colorhunt.co/c/97912 | http://colorhunt.co/c/79851 las que más suelo utilizar
Por último, el tema utilizado en mi sitio, que me permite utilizar la mayoría de las fuentes de Google así como amplias posibilidades de combinaciones de color, es GeneratePress, en versión Premium (40 dólares).
Para saber más
- Anatomía de una fuente tipográfica
- Daltonismo y accesibilidad
- Font Glossary
- Normas de accesibilidad WCAG 2.0
- Using Webfonts
¿Suscribirse?
Si desea recibir información sobre nuevas publicaciones de este sitio, puede suscribirse (ver formulario al pie) para recibir las novedades por correo.
