Krypton Solid

Mejora del diseño de sitios web con escritura UX

Mejora del diseño de sitios web con escritura UX

Como escritor de UX, mi trabajo es saber cómo crear una copia web que convenza a los lectores a tomar medidas. Dicho esto, no importa qué tan atractiva sea una historia que elabore para las páginas web o publicaciones de blogs de mis clientes. Si lo que he escrito se ve terrible en la página, nadie se molestará en leerlo.

Sin embargo, aquí está el problema: los escritores de UX no son diseñadores. No importa cuántas oraciones cortas escribamos para comunicar de manera sucinta un punto o una copia sin jerga que elaboramos para atraer a una audiencia más amplia, las malas elecciones de diseño anularán todo eso.

Los diseñadores web son los que mejor saben cómo diseñar para el compromiso y la conversión. Como tal, debe sentirse cómodo trabajando con la copia, así como con la pieza visual.

1. No te metas con el color

Hay muchas formas realmente interesantes de usar el color y crear una apariencia memorable para un sitio web. ¿Pero tipografía? Ese no es el lugar para jugar con el color.

Déjame mostrarte algo:

Este es el sitio web de Linterna roja restaurante en Boston:

Este sitio web hace un gran uso de amplios espacios abiertos para llamar la atención sobre la copia en la página. Y, si bien el logotipo está en una fuente decorativa roja, la copia que realmente importa es en blanco y negro. En general, esta es una página web bellamente estructurada y también fácil de leer.

Ahora, veamos el Hotel intercontinental:

Intercontinental Boston

Hay tantas malas decisiones tomadas con la fuente en esta página.

Para empezar, es una fuente demasiado fina en ese tamaño. Además, la fuente negra en la parte superior del fondo crudo tampoco funciona bien (nuevamente, eso probablemente se deba a la escasez de la fuente). Y el color del hipervínculo contra el fondo de color similar es una opción aún peor.

Entiendo que el diseñador quería incorporar el color de la marca en la página, pero el fondo es excesivo. Un fondo blanco, una fuente negra y un color de hipervínculo de marca serían suficientes.

2. Mantener la simetría

En muchos casos, no existe realmente una necesidad de simetría en la redacción de textos publicitarios. Los párrafos y las páginas se publicarán todo el tiempo que sea necesario, dentro de lo razonable. Sin embargo, hay una parte particular de un sitio web donde la simetría es muy importante y, desafortunadamente, es algo que no muchos escritores tienen en cuenta. Peor aún, hay diseñadores que están demasiado asustados para hacer algo al respecto.

Esto es lo que quiero decir:

Este es un bloque de featurettes uno al lado del otro en el WordStream sitio web:

WordStream

Estás familiarizado con esto, ¿verdad? Tiene una serie de características, servicios o beneficios que desea incluir en una página web. Sin embargo, preferiría no enumerarlos como texto sin formato alineado verticalmente. Eso es aburrido y ocupa demasiado espacio. Entonces, piensas, convertiré esto en un elemento de varias columnas con gráficos entretejidos.

En el caso de WordStream, habría tenido éxito. Todo está equilibrado:

  • Ilustraciones
  • Texto de cabecera
  • Subencabezados
  • Texto explicativo
  • CTA

Ahora, eche un vistazo a Pixabilidad:

Pixabilidad

Sigue el mismo concepto básico. Sin embargo, el primer punto es demasiado largo. Esto no solo crea una distracción, sino que también genera una gran cantidad de espacios en blanco antiestéticos.

3. Separar párrafos

En general, nunca querrá que un párrafo tenga más de cinco líneas en una página web. Algo más, y es seguro decir que sus lectores perderán el enfoque. Lo mismo ocurre cuando coloca demasiados párrafos uno tras otro.

Tus lectores necesitan un descanso.

Si bien los escritores deben ser los que determinen dónde debe caer una pausa dentro del texto, hay otras cosas que puede hacer para romper la monotonía de párrafo tras párrafo.

Tomemos, por ejemplo, lo que Construcción Consigli hace para contar la historia de su negocio:

Construcción Consigli

Nunca hay más de dos párrafos juntos, antes de que un elemento creativo los divida. En este caso, la historia de la empresa se divide en partes lógicas y los hitos clave obtienen sus propias cajas dedicadas. Esto luce genial.

Contrasta eso con el Horizontes brillantes sitio web.

Horizontes brillantes

Por lo general, estoy a favor de las viñetas, ya que ayudan a dividir grandes trozos de texto. En este caso, sin embargo, no están muy bien hechos. Para empezar, cada viñeta es demasiado larga. Además, la fuente en negrita es abrumadora.

Para solucionar esto, el diseñador podría seguir una ruta similar a Consigli Construction y darle a cada bala su propio bloque dedicado. O el diseñador y el escritor podrían trabajar juntos para eliminar el exceso. Por ejemplo, la lista podría acortarse de manera realista a:

  • Un cuidador principal asignado;
  • Planes de atención personalizados;
  • Espacios ricos sensorialmente y lugares suaves;
  • Prácticas de seguridad, protección y limpieza.

4. Sea consciente del espacio con las etiquetas de encabezado

Las etiquetas de encabezado son una parte esencial de todas las páginas de un sitio web, desde la página de inicio hasta las publicaciones del blog.

Estructuralmente, ayudan a crear una jerarquía de temas, mejorando la capacidad de los lectores para escanear una página y tener una idea de qué trata sin tener que leerla. Además, los bots de Google usan etiquetas de encabezado para seleccionar los puntos clave de una página y clasificarla de acuerdo con qué tan bien coincide con las consultas de búsqueda de los usuarios.

Dicho esto, debe tener cuidado con la cantidad de espacio que ocupan sus encabezados. Como regla general, no deben tener más de una línea.

Toma este ejemplo de Viaje a Audley:

Viaje a Audley

Aquí hay dos etiquetas de encabezado y ambas se mantienen en una longitud razonable sin dejar de transmitir con precisión el punto.

Entonces, tienes este ejemplo de Beviblog de:

Bevi

Este es un claro ejemplo de dónde las etiquetas de encabezado se vuelven demasiado.

Pero el problema no es solo el tamaño del texto del encabezado. Es la longitud de la declaración en sí. En lugar de revelar lo que el siguiente texto le dirá al lector, esto podría simplemente dejarse como: “Gestionar proyectos y entregables con una herramienta de gestión de tareas” o, mejor aún, “Utilizar una herramienta de gestión de tareas”.

Qué pueden hacer los diseñadores web para mejorar la copia del sitio web

Si bien me encantaría decir que es 100% responsabilidad del escritor de UX escribir un texto que convierta, hay ejemplos claros de cómo el diseño puede obstaculizar que eso suceda. Razón de más por qué un sitio web debe ser una colaboración entre todas las partes involucradas en él.

Si alguna vez no está seguro de cómo sus elecciones de diseño afectarán la calidad de la copia, busque la opinión del escritor de UX. O el de su jefe de proyecto. Sus ojos frescos podrían captar algo que tú no puedes.

Foto principal vía Unsplash

Deja un comentario