Skip to content

Mejorando el Dise√Īo de Sitios Web con UX Writing

Como escritor de UX, es mi trabajo saber cómo crear textos web que convenzan a los lectores a tomar acción. Dicho esto, no importa cuán atractiva sea la historia que escriba para las páginas web o blogs de mis clientes. Si lo que he escrito se ve terrible en la página, nadie se molestará en leerlo.

Este es el problema: Los escritores de UX no son dise√Īadores. No importa cu√°ntas frases cortas escribamos para comunicar sucintamente un punto o una copia sin jerga que elaboramos para atraer a una audiencia m√°s amplia, las malas elecciones de dise√Īo negar√°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, usted necesita estar c√≥modo trabajando con la copia as√≠ como con la pieza visual.

1. No se meta con el color

Hay un mont√≥n de formas muy interesantes de utilizar el color y crear un aspecto 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 del restaurante Red Lantern en Boston:

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

Ahora, veamos el Hotel Intercontinental:

Hay tantas malas elecciones hechas con la fuente en esta p√°gina.

Para empezar, es una fuente demasiado delgada con ese tama√Īo. Adem√°s, la fuente negra sobre el fondo crudo tampoco funciona bien (de nuevo, probablemente se deba a la escasez de la cara 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 exagerado. Un fondo blanco, una fuente negra y un color de hiperv√≠nculo de marca ser√≠an suficientes.

2. Mantener simetría

En muchos casos, no hay realmente una necesidad de simetr√≠a en la redacci√≥n. Los p√°rrafos y las p√°ginas tendr√°n el tiempo que sea necesario, dentro de lo razonable. Sin embargo, hay una parte particular de un sitio web donde la simetr√≠a importa mucho y es, desafortunadamente, 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 características de lado a lado en el sitio web de WordStream:

Est√°s familiarizado con esto, ¬Ņverdad? Usted 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 plano alineado verticalmente. Eso es aburrido y ocupa demasiado espacio. As√≠ que, piensa, convertir√© esto en un elemento multicolumna con gr√°ficos entretejidos.

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

  • Ilustraciones
  • Texto de cabecera
  • Subt√≠tulos
  • Texto explicativo
  • CTAs

Ahora, echa un vistazo a Pixability:

Sigue el mismo concepto básico. Sin embargo, el primer punto es demasiado largo. Esto no sólo crea una distracción, sino que también conduce a un montón de espacio en blanco antiestético.

3. Separar p√°rrafos

En general, nunca se desea que un párrafo tenga más de cinco líneas en una página web. Cualquier cosa más larga, y es seguro decir que sus lectores perderán el enfoque. Lo mismo sucede cuando se colocan demasiados párrafos uno tras otro.

Sus lectores necesitan un descanso.

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

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

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

Contraste eso con el sitio web de Bright Horizons.

Por lo general, estoy a favor de las vi√Īetas, ya que ayudan a romper trozos gruesos de texto. En este caso, sin embargo, no est√°n muy bien hechas. Para empezar, cada punto es demasiado largo. Adem√°s, la fuente en negrita es abrumadora.

Para arreglar esto, el dise√Īador podr√≠a seguir una ruta similar a Consigli Construcci√≥n y dar 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:

  • Un cuidador principal asignado;
  • Planes de atenci√≥n personalizada;
  • Espacios ricos en sensores y lugares blandos;
  • 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 cada p√°gina de un sitio web, desde la p√°gina de inicio hasta las entradas de blog.

Estructuralmente, ayudan a crear una jerarqu√≠a de temas, mejorando la capacidad de los lectores para escanear una p√°gina y hacerse una idea de lo que se trata sin tener que leerla. Adem√°s, los robots de Google utilizan etiquetas de encabezado para recoger los puntos clave de una p√°gina y clasificarla seg√ļn su adecuaci√≥n a las consultas de b√ļsqueda de los usuarios.

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

Tome este ejemplo de Audley Travel:

Hay dos etiquetas de encabezado aquí y ambas se mantienen a una longitud razonable, mientras que todavía con precisión de obtener el punto a través de.

Luego, tienes este ejemplo del blog de Bevi:

Este es un claro ejemplo de cómo las etiquetas de encabezado se convierten en demasiado.

Pero el problema no es s√≥lo el tama√Īo del texto del encabezado. Es la extensi√≥n de la declaraci√≥n en s√≠ misma. En lugar de dar a conocer lo que el texto siguiente va a decir al lector, esto simplemente podr√≠a 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”.

Lo que los dise√Īadores web pueden hacer para mejorar la copia del sitio web

Aunque me encantar√≠a decir que es 100% responsabilidad del escritor de UX escribir textos que se conviertan, hay ejemplos claros de c√≥mo el dise√Īo puede interferir para que eso suceda. Raz√≥n de m√°s para que un sitio web sea 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 tu jefe de proyecto. Sus ojos frescos podr√≠an ser capaces de captar algo que t√ļ no puedes.

Imagen destacada a través de Unsplash