Nueve detalles de usabilidad para redactar entradas de blog

Los blogs, tanto los personales como los corporativos, siguen de moda. A la hornada de blogs que comenzaron su andadura antes del auge de las –mal llamadas– redes sociales, ahora se unen personas y empresas que llegan a los blogs tras llevar años usando Facebook y otras plataformas. A las finales, en estas plataformas uno no deja de ser un inquilino a la merced de un casero lejano que no conoce bien. Son plataformas de terceros. Ni míos ni tuyos. La madurez en la web, tanto para personas como para empresas, viene de la mano del dominio propio y del desarrollo de la identidad personal y corporativa en propiedades de uno mismo. La siguiente gráfica Venn de Avinash Kaushik explica el peso que deberían ocupar los sitios propios frente a los ajenos en la estrategia de comunicación y la de desarrollo de comunidad de las empresas.

Una de las diferencias entre publicar en Facebook y publicar en un blog propio es que en el primer caso las cosas vienen mucho más precocinadas que en el segundo. Un ejemplo: en las plataformas de terceros uno puede subir cualquier tipo y tamaño de imagen, la plataforma se ocupa de recortar y redimensionarla para que quede perfecta. Esto no pasa en nuestro blog donde por lo general necesitamos preparar las imágenes antes de subirlas. De la mano de más libertad y control, viene más responsabilidad. ¡Como en la vida real!

A continuación comentaré nueve detalles a los que interesa prestar especial atención si venimos al mundo blogger desde Facebook u otras plataformas de terceros. Requieren algo de esfuerzo adicional pero hay recompensa: convierten nuestro blog en un blog mucho más usable y por tanto querido y adorado por los usuarios.

Texto

Los primeros tres están relacionados con cómo tratar el texto en los posts.

1. Usar texto

A veces se quiere reusar en el blog contenido preparado no específicamente para el blog. Por ejemplo, un artículo de prensa que menciona la empresa y del que tenemos una versión escaneada, un folleto que preparamos para imprimir y colgar en la tienda o un montaje de cabecera de Facebook con nuestras últimas ofertas. Bien, estos formatos no funcionan bien en un blog y es mejor evitar subirlos como contenido de posts tal cual, es decir, como imagen. Respecto al artículo de prensa escaneado, hay grandes probabilidades de que lo encontremos en la web y lo podamos enlazar desde un párrafo –que redactemos nosotros mismos– dando contexto. El folleto y el montaje de cabecera de Facebook los podemos tomar como base para diseñar un post para el blog, con su título optimizado, sus encabezados, sus párrafos y sus imágenes.

2. Usar encabezados

Los encabezados estructuran el post y ayudan así al usuario a comprenderlo de forma más fácil. En este post que estás leyendo, el título del mismo es un encabezado de primer nivel –un h1 en lenguaje HTML, viniendo la h de headline–, los encabezados «Texto», «Imágenes» y «Enlaces» son de segundo nivel y el resto de tercer nivel.

¿Cómo se ponen los encabezados? En cualquier editor visual, tendremos algo parecido a la siguiente imagen para marcar las palabras como encabezado.

3. Sobre colores, fuentes, tamaños y alineaciones

Los colores, fuentes, tamaños y alineaciones son elementos del diseño global del blog y no deberían editarse a nivel de post salvo razones muy convincentes. El diseñador del blog ya definió estos parámetros cuando diseñó la plantilla. Si los párrafos salen alineados a la izquierda y en color gris 80% es porque el diseñador lo quiso así. Alineando al centro algunos posts, coloreando palabras o poniendo entradas enteras en cursiva –para poner prácticas que veo a veces– empeoramos la experiencia del usuario que navega por nuestras páginas porque estamos rompiendo una de las reglas básicas de usabilidad: la consistencia. Una forma de asegurarnos de mantener la línea gráfica del blog en los posts es desactivar el editor visual. Requiere que aprendamos a poner encabezados en lenguaje HTML pero es un coste muy pequeño a cambio de un blog más usable.

Imágenes

Cómo tratamos las imágenes de nuestro blog afecta tanto la accesibilidad y la optimización del blog como su usabilidad.

4. Imágenes destacadas

Muchas plantillas de blog requieren que cada post tenga su imagen destacada. Ésta se muestra en carrousels, listados de posts, como primera imagen de post y a menudo sale como imagen por defecto al compartir la entrada en medios sociales. Como imagen destacada es recomendable escoger imágenes limpias e impactantes al primer vistazo, pues su cometido es enganchar a nivel emocional. Por lo general (y siempre hay excepciones), no querremos usar como imagen destacada montajes, imágenes con texto o imágenes demasiado complejas que pidan un esfuerzo racional del usuario. Para eso tenemos el cuerpo el post al que solo llegará si no le asustamos con una imagen destacada sobrecargada.

5. El tamaño de las imágenes

Las imágenes que pesan mucho ralentizan la carga de la página y esto, a su vez, empeora la experiencia del usuario. Dependiendo de su necesidad, esperará más o menos segundos pero a partir de determinado momento se cansará y cerrará la página sin esperar que se cargue. Como tamaño máximo de imágenes optimizadas para web he leído recomendaciones en torno a 80-100Kb. Me parece una buena referencia con el añadido que la web tiene lectores desde móvil, deberían ser preferiblemente incluso menos. Saber mirar el tamaño de la imagen y saber retocarla hasta reducirla a tamaño optimizado para web es parte de las habilidades requeridas para editar un blog.

6. El nombre del fichero

El nombre del fichero no es algo con el que el usuario se encuentre a menudo pero tiene su importancia para la optimización mediante palabras clave. Poner al fichero nombres para humanos en lugar del nombre que por defecto le pone la cámara sí puede impactar en la usabilidad si el usuario descarga nuestra imagen.

7. Título y título alternativo

Todas las imágenes que subamos a nuestros posts, sean destacadas o intercaladas, deben llevar título y título alternativo. No sólo son, igual que el nombre del fichero, importantes para la optimización por palabras clave sino suponen una ayuda al usuario. Rellenando estos dos campos conseguimos que el título de la imagen aparezca al pararse el cursor sobre la imagen, que el título salga cuando el navegador del usuario no puede cargar imágenes o que el título sea leído por programas que usan personas con deficiencia visual.

Enlaces

Los hiperenlaces son los conectores sin los cuales la web sería un directorio de páginas aisladas las unas de las otras.

8. Ser generosos enlazando

En muchos blogs, los enlaces brillan por su ausencia. Esto priva a los lectores de contexto. Sin contexto es más difícil entender el mensaje que queremos transmitir. Hay buenas razones para ser generosos con los enlaces en marketing de contenidos y la usabilidad solo es una de ellas. Desde aquí animo personalmente a todo blogger a usar enlaces, tanto externos como internos del sitio, de forma abundante en sus entradas.

9. Evitar enlaces tipo «Clic aquí»

El problema de escribir «clic aquí» o «aquí» para poner un enlace es que saca el enlace de su contexto. La palabra o palabras que llevan enlace se llaman el ancla del enlace. Es buena práctica usar anclas contextuales. Si queremos señalar que un PDF es descargable, un ancla genial es un botón o en su defecto un texto que ponga «Descarga el PDF» (en lugar de «Descarga el PDF aquí», con el «aquí» de ancla). Esto es aplicable para todo tipo de enlaces. Busquemos la palabra o las palabras que mejor contexto dan al enlace, enlacémoslas directamente y olvidémonos de los «aquís». Si mis argumentos sobre el «clic aquí» no resultan suficientemente convincentes, recomiendo un post en UXMovement sobre por qué los enlaces nunca deberían decir »clic aquí» que explica también otras cosas, por ejemplo por qué es mejor enlazar sustantivos frente a verbos.

***

Hasta aquí llega mi selección de detalles a los que prestar atención al redactar entradas de blog si queremos que nuestro blog sea y siga siendo usable, o sea, si aspiramos a ser queridos y adorados por los usuarios. Como siempre, agradezco correcciones y sugerencias en comentarios.