no solo usabilidad: revista sobre personas, diseño y tecnología
Abierta nueva convocatoria:
Máster Universitario Online en Diseño de Experiencia de Usuario de UNIR

1 de Diciembre de 2002

Escritura Hipertextual

Hassan Montero, Yusef
Martín Fernández, Francisco J.

Resumen: Consejos para escritura hipertextual: enlaces, tipografía, colores, redacción, alineación...

Introducción

La escritura hipertextual, que tiene como unidad básica el enlace y como soporte lógico el electrónico, se debe realizar de forma diferente a la escritura convencional. A los usuarios no les gusta leer en pantalla, por lo que agradecerán cuanto más les facilitemos dicha tarea. En este artículo se tratará la correcta presentación de contenidos y elementos de interacción (enlaces) en los documentos hipertextuales.

El enlace

El enlace normal

Cuando introduzcamos enlaces en nuestra web, debemos asegurarnos de que el usuario va a reconocer claramente que se trata de un enlace. La forma más correcta y sencilla es utilizar el enlace normal o estándar:

Esto es un enlace normal, fácilmente identificable y reconocible por el usuario.

El título o rótulo del enlace debe ser significativo, el usuario debe poder predecir hacia dónde va a ir o qué va a suceder cuando haga clic sobre él. El uso de globos de texto puede ayudarnos en este sentido. Evite en la medida de lo posible títulos del tipo "Haga clic aquí", el usuario no desea recibir ordenes, desea saber con qué vincula el enlace.

El número de palabras que debe contener el título del enlace no debería superar las 4, y el enlace debería estar integrado en una única línea de texto, pues si se parte en dos o más el usuario puede pensar que son varios enlaces diferentes. En caso de que el mismo enlace ocupe varias líneas, que éste tome una tonalidad diferente cuando el usuario lo sobrevuele con el puntero, ayudará al usuario a reconocerlo como un único enlace.

Imágenes como enlaces

Utilizar imágenes como enlaces en ciertas ocasiones puede resultar más intuitivo para el usuario. Aún así, puede conllevar varios problemas: que el usuario no reconozca la imagen como un enlace, sobrecarga del sitio (mayor lentitud de navegación), desaprovechamiento de espacio visual, que el usuario no entienda la relación imagen-significado, etc...

Con la inclusión de cualquier tipo de imágenes en nuestro diseño web es imprescindible que describamos su contenido a través del atributo 'alt' de la etiqueta '<img .../>'. Aunque no es recomendable utilizar imágenes para representar enlaces únicamente textuales (atenta contra la accesibilidad), si lo hacemos deberíamos utilizar además el atributo 'title' de la etiqueta de enlace <a>, como técnica para ampliar información sobre el destino del enlace, tal y como se puede ver en el siguiente ejemplo:

Texto dinámico o pasivo

Entenderemos por texto dinámico aquel que contenga enlaces embebidos que encaminen al usuario hacia otra página relacionada temáticamente con el texto, ya sea interna o externa. Un texto rico en enlaces tiene un valor añadido, ya que no solo ofrece la información en él contenida, sino el mecanismo para encontrar más información relacionada. Un gran error en la escritura hipertextual es redirigir al usuario a páginas web verdaderamente no relacionadas temáticamente con el texto, lo que conlleva que esta "riqueza" hipertextual pierda toda su utilidad.

Tampoco hay que sobresaturar el texto de enlaces, ya que generarían demasiado ruido visual, harían la lectura más incómoda y desorientarían al usuario. El número máximo de enlaces por párrafo es uno, o como mucho, dos.

Cuando sea posible, intente colocar al final de cada párrafo los enlaces que tenga el texto incrustados. Así no interrumpirán la lectura del usuario.

Cómo escribir

Síntesis

Por todos es sabido que leer en la pantalla del ordenador es mucho más incómodo que leer sobre papel. Por ello, si va a escribir un texto para la Web, debería tomar como norma general que tenga una extensión de entre un 25% y un 33% de la que tendría si lo escribiera en papel. Sintetice.

Igualmente es más cómodo leer un texto con varios párrafos y cortos, que uno con pocos párrafos y largos. Fraccione.

Resumen

Por la misma razón que hemos mencionado antes, por la incomodidad de leer en pantalla, una buena práctica en la escritura hipertextual es incluir al principio de los textos un pequeño resumen de su contenido, lo que ayudará al usuario a decidir si le interesa o no la información contenida en el texto.

Indicar al principio del texto sus palabras clave (términos más significativos y representativos del contenido), también ayuda al usuario en este sentido.

Glosario

Algo que puede enriquecer sus textos en gran medida es incluir un pequeño glosario con breves explicaciones de los términos más importantes al final del texto y con enlaces locales a éstos desde el propio texto.

Facilite la lectura

Ancho del texto

Muchos de los que dieron por muerta la resolución 640x480px para el diseño web, en cierta forma se equivocaron. Es más fácil, cómodo y rápido leer texto con un ancho moderado, que leer aquellos textos con líneas que van de lado a lado de la pantalla o del papel. Por lo tanto, si reducimos el ancho del texto no solo conseguiremos facilitar la lectura al usuario, sino también que el contenido sea accesible desde resoluciones inferiores como 640x480px (aprox. 4% de los internautas).

Hacer que la página sea autoadaptable al ancho del navegador proporciona ventajas en cuanto Accesibilidad, ya que usuarios con resoluciones distintas visualizarían correctamente el total de la página, pero si el texto a leer también se adapta al ancho del navegador, usuarios con resoluciones altas tendrían problemas para la lectura ya que las líneas serían demasiado largas. No espere que estos usuarios redimensionen la ventana de su navegador para leer cómodamente el texto, no lo harán. Los textos deben tener un ancho fijo.

Colores fuente - fondo

Hace bastantes años, con la aparición de los entornos gráficos (MS Windows 3.0), expertos aseguraban que era más saludable para la vista leer texto negro sobre fondo blanco que texto blanco sobre fondo negro (MS-DOS). Desde entonces, todas las aplicaciones, todos los GUI, usan colores claros para el fondo, y colores más oscuros para la fuente. Parece que la tendencia actualmente sigue estando en esa dirección, por lo que a la hora de escribir textos para la web, se debe hacer uso de esta "norma" para el color fuente-fondo.

Anexo:
El artículo "Malos hábitos en el puesto de trabajo: cómo evitar los problemas derivados del uso del PC" (Rita Piquer; PC-Actual, n.135) dice lo siguiente:"En cuanto a la polaridad de la imagen, la negativa (caracteres claros sobre fondo oscuro) reduce la percepción del parpadeo y resulta más legible para personas con menor agudeza visual, mientras que la positiva (caracteres oscuros sobre fondo claro) minimiza los reflejos y aporta mayor equilibrio de luminancias entre la pantalla y los documentos impresos."
Además, según Lillo Jover, 'la utilización de fondos oscuros incrementa el riesgo de reflejo procedente de fuente lumínicas externas al ordenador'

Fondos gráficos

Por lo general estos fondos dificultan la lectura, por lo que si se incluyen deben tener una tonalidad muy similar al color de fondo y un color que ofrezca el suficiente contraste con el de la fuente como para no molestar ni distraer al usuario en su lectura.

Antes de incluir fondos gráficos, pregúntese: Si los medios impresos (monografías, publicaciones periódicas...) no suelen incluir casi nunca fondos gráficos en sus textos para no dificultar la lectura, a pesar de que la resolución del papel es mucho mayor que la de un monitor, ¿porqué debería hacer uso yo de estos fondos en mi sitio web?.

Fuente, Efectos tipográficos y Alineación

Los tipos de fuente que más cómodamente se leen en pantalla son las 'sans-serif' y no-monospaced, como la Arial o la Verdana. Las fuentes 'serif', como Times New Roman, son recomendables sólo en documentos para impresión.

El tamaño de la fuente debería ser definido de forma relativa (porcentajes), no absoluta (pixels). De esta forma, un usuario con cierta discapacidad visual o con una alta resolución de pantalla podría aumentar (o disminuir) el tamaño de la fuente de la página desde su navegador.

Para enfatizar términos en una oración no use nunca el subrayado. Aunque en el mundo impreso es muy utilizado, en la web normalmente identifica a los enlaces y el usuario puede sentirse confundido. El efecto cursiva tampoco es recomendable, la baja resolución de las pantallas hace que las palabras en cursiva sean menos legibles que el resto.

Lo ideal a la hora de enfatizar sería no usar ningún efecto tipográfico concreto (negrita, cursiva, etc.), sino usar etiquetas <em> .... </em>, para que cada navegador concreto enfatizara los términos como estime necesario. Por ejemplo, un navegador para invidentes que utilice audio para comunicar al usuario el contenido del hiperdocumento, podría enfatizar estos términos pronunciándolos más alto que el resto de términos de la oración.

Respecto a la alineación, para facilitar la lectura, lo más apropiado es usar una alineación a la izquierda. Pero un texto web no solamente debe ser fácil de leer, también tiene que atraer al usuario. En múltiples pruebas con usuarios hemos podido comprobar cómo la gran mayoría prefiere el texto con alineación justificada. Proporciona una estética ampliamente valorada, a pesar de los problemas que pueda conllevar debido a la baja resolución de las actuales pantallas y a las diferencias de render (ajuste y distribución de elementos dentro de la interfaz) de los diferentes navegadores. Si se decide finalmente por una alineación justificada, recuerde que el ancho de su texto deberá ser de al menos 500 pixels, de lo contrario la distribución de las palabras en cada línea será demasiado desproporcionada y acabará con la estética simétrica que se persigue con este tipo de alineación.

Artículos relacionados:

Compartir:

Facebook Twitter Google LinkedIn

Yusef Hassan Montero

Consultor sobre Experiencia de Usuario y Visualización de Información. Diseñador de interacción en Scimago Lab, Doctor en Documentación (2010) por la Universidad de Granada y editor de la revista No Solo Usabilidad. Escribe habitualmente en su blog sobre diseño de información.

Más información: yusef.es

Francisco Jesús Martín Fernández es Licenciado en Documentación e investigador sobre Usabilidad y Accesibilidad del Centro de Enseñanzas Virtuales de la Universidad de Granada, y editor de NoSoloUsabilidad.
Web Personal: http://www.ugr.es/~chesco

Citación recomendada:

Hassan Montero, Yusef; Martín Fernández, Francisco J. (2002). Escritura Hipertextual. En: No Solo Usabilidad, nš 1, 2002. <nosolousabilidad.com>. ISSN 1886-8592

No Solo Usabilidad - ISSN 1886-8592. Todos los derechos reservados, 2003-2023
email: info (arroba) nosolousabilidad.com