Escritura Hipertextual

Hassan Montero, Yusef; (2002). Cómo leen los usuarios en la Web. En: No Solo Usabilidad, nº 1,
2002. <nosolousabilidad.com>. ISSN 1886-8592
Cómo leen los usuarios en la Web
Resumen:
Explicación del comportamiento del usuario al explorar visualmente una página web, y
cómo jerarquizar contenidos para facilitarle la tarea.
Los usuarios en la Web no leen, o por lo menos no lo hacen de la misma forma secuencial que
cuando tienen entre manos un periódico, un libro, un artículo o un cómic. Los usuarios tienen
necesidades y objetivos, metas que alcanzar, y saben que la forma de conseguir dichas metas no
suele ser dedicando largos ratos a cada nodo web que visitan, leyendo de principio a fin sus
contenidos y enlaces. El usuario, en una página, hará clic sobre el primer enlace que crea puede
llevarle a lo que busca, necesita o pudiera interesar. Eso quiere decir que muchos de los contenidos
y enlaces de ese nodo ni siquiera serán vistos por el usuario.
Perdón, Cómo ojean los usuarios
El usuario, ante una página, ojea a saltos la información contenida. No podemos predecir con
exactitud cuál será el camino que el usuario seguirá durante su exploración visual de la página, pero
sí a qué zonas le presta mayor atención en su búsqueda:
Hay zonas del interfaz de la página que confieren una mayor jerarquía a la información que
contienen, como la zona 1. La Jerarquía Visual[1] proporciona relaciones jerárquicas del tipo 'esto
es parte de esto' y 'esto va a continuación de esto' entre los objetos informativos de la página,
mientras que la Jerarquía de Información o Contenidos establece relaciones del tipo 'esto es más
importante que esto'.
Para enfatizar la importancia de unos objetos informativos de la página sobre otros, es decir, para
definir la Jerarquía de la información, se pueden utilizar diversas técnicas:
 Colocar la información más importante en zonas del interfaz más relevantes (ver figura
anterior)
 Enfatizar mediante efectos tipográficos
 Aumentar el tamaño de los textos de mayor importancia
 Utilizar el contraste del color para distribuir y discriminar objetos informativos
 Agrupar objetos informativos relacionados entre sí
Al contrario de lo que pueda parecer, los objetos informativos parpadeantes, cambiantes o
deslizantes no serán percibidos por el usuario como importantes. Pueden ser percibidos como
publicidad, ya que es un mecanismo demasiado explícito para atraer la atención del usuario.
Además, al diseñar la información de nuestra página (jerarquía visual y la jerarquía de
información), si definimos demasiados objetos informativos como 'muy importantes', se produciría
en el usuario una sobrecarga de información, con lo que habremos fallado en nuestro objetivo.
Información importante pero, ¿Para Quién?
Estamos hablando de la jerarquía de información como técnica para discriminar entre información
1
importante y menos importante, pero debemos estar seguros de a qué nos referimos con
información importante.
Un objeto de información (párrafo, enlace, dato,...) lo consideraremos importante si lo es para
satisfacer las necesidades perseguidas por el usuario. No porque la empresa, institución o entidad
considere una información cómo importante deberemos enfatizarla como tal. El diseño de
información del sitio web se ha de realizar para satisfacer las necesidades del usuario, en el lenguaje
del usuario y mediante un esquema entendible por el usuario. Diseñar y organizar la información en
lenguaje corporativo, mediante el esquema de la empresa y utilizando valores de importancia de la
empresa sería un error.
El problema es que el usuario en la Web no es único ni uniforme. Cada usuario que visite el sitio
web tendrá necesidades, expectativas y comportamientos diferentes, por lo que el diseño de la
información debe realizarse para satisfacer al mayor número de usuarios posibles.
Si dispone de los conocimientos y tecnología suficiente podría realizar un diseño dinámico que
mediante perfiles se adaptara a las diferentes necesidades de cada grupo de usuarios, o idealmente, a
cada usuario en concreto. La jerarquía de información de cada página sería diferente para un usuario
que visitara el sitio web una media de 3 veces por semana y que ya hubiera comprado un par de
productos, que para el usuario que es la primera vez que visita el sitio web.
Conclusiones
Los usuarios usan las páginas, no las leen. Aún en el caso del usuario, que después de haber
realizado una navegación compulsiva e irreflexiva, se encuentra con un texto o artículo cuyo
contenido en general es de su interés, no empezará a leerlo. Antes lo ojeará, leerá los títulos y
epígrafes, mirará las figuras, gráficos e imágenes, quizás lea algún párrafo en el que se encuentre
algún término de su interés enfatizado, y sólo después de esto, empezará a leer. Una vez que
empiece a leer el texto (no necesariamente desde el principio), puede que incluso lo abandone
haciendo clic sobre algún enlace que tuviera embebido.
La causa de este comportamiento es sencilla: los usuarios odian leer en pantalla, e intentarán por
todos los medios extraer de los textos toda la información que necesiten o interese con el menor
esfuerzo posible.
Hassan Montero, Yusef; Martín Fernández, Francisco J.; (2002). Escritura Hipertextual. En: No
Solo Usabilidad, nº 1, 2002. <nosolousabilidad.com>. ISSN 1886-8592
Escritura Hipertextual
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.
2
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.
Síntesis
Por todos es sabido que leer en la pantalla del ordenador es mucho más incómodo que leer sobre
3
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
4
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.
5
Hassan Montero, Yusef; (2002). El enlace: forma y función. En: No Solo Usabilidad, nº 1,
2002. <nosolousabilidad.com>. ISSN 1886-8592
El enlace: forma y función
Resumen:
Consejos para la correcta definición de rótulo y caracterización en enlaces textuales.
Función
Los enlaces, en la actual Web, tienen la función de representar un vínculo o conexión unidireccional
entre dos nodos web. Son la unidad básica de interacción de los sistemas hipertexto, por lo que la
interacción en la Web comúnmente es conocida como Navegación. En un espacio virtual compuesto
por nodos y vínculos entre dichos nodos, si se entiende que la ubicación del usuario está en el nodo
que se encuentra visualizando, la interacción sobre los enlaces con la posterior visualización de
otros nodos se entiende como un desplazamiento o, en un océano de nodos, como navegación.
Para que el usuario dentro de nuestro sitio web experimente una navegación eficiente, fácil y
satisfactoria, los enlaces no sólo tendrán que conectar nodos con contenidos verdaderamente
relacionados, sino además presentarse de tal forma que el usuario entienda sin ambigüedades que se
trata de un enlace, comprendiendo consecuentemente su función.
Forma
La forma de los enlaces puede ser textual, icónica o mixta. En este artículo se tratará principalmente
el primer grupo.
Los enlaces con forma textual, en una interfaz web, están formados básicamente por dos partes: el
rótulo y su caracterización como enlace.
El rótulo
Estará formado por el término o conjunto de términos que describan el contenido del nodo al que
enlaza. El rótulo del enlace debe ser significativo, y contener el número mínimo de términos
necesarios para cumplir dicha tarea.
¿Cuáles de estos enlaces no tiene un rótulo significativo?
Haga clic aquí
Poemas
Ofertas
El nivel de significación de un rótulo debemos recordar que no solo depende del rótulo en sí, sino
también del contexto informativo en el que se encuentre el enlace.
Además de controlar el número de términos empleados, hay que huir del uso de términos ambiguos
o demasiado técnicos. Hable el lenguaje de sus usuarios.
Anexo:
Recuerde que la elección del rótulo no debe realizarse de forma individual e independiente para
cada enlace, sino que debe estar condicionada a la previa planificación de los diferentes sistemas de
rotulado o etiquetado del sitio web.
6
Caracterización
La caracterización como enlace engloba la fuente y su color, el efecto tipográfico empleado, la
localización del enlace en la interfaz web y los eventos visuales que produzca interactuar con el
enlace.
El enlace de color azul y subrayado es una caracterización estándar con la que el usuario siempre
reconocerá al enlace como tal. ¿Significa esto que es la única forma correcta que puede tener un
enlace para que el usuario reconozca su función? No.
La única regla aceptada y aprendida por todos los usuarios para reconocer qué es un enlace y qué
no, es sobrevolando el elemento con el puntero para comprobar si éste pasa de ser una flecha a una
mano señalando con el dedo. De hecho, existen multitud de sitios web (como los portales) que
debido a la gran cantidad de enlaces que ofrecen no pueden permitirse usar enlaces azules y
subrayados, a causa del ruido visual que producen. Otros sitios web, que aún conteniendo muchos
enlaces, utilizan la caracterización azul y subrayado, reducen el número de términos de los rótulos
de los enlaces con el objetivo de disminuir este ruido visual, produciendo una pérdida sustancial de
significación en algunos enlaces.
Aún así, esto no significa que podamos caracterizar los enlaces como se nos antoje esperando que el
usuario los 'descubra' sobrevolándolos. Debemos definir una caracterización que enfatice su función
como enlace, que sea reconocible a simple vista, y que por tanto permita una navegación intuitiva
('eso seguro que es clicable') frente a una experimentativa ('¿eso será clicable?').
Cómo caracterizar los enlaces, por tanto, depende del número de enlaces, del número mínimo de
términos necesarios en cada enlace para que este sea significativo y de la localización de estos
enlaces en el nodo: embebidos en un texto, posicionados en zonas de jerarquía visual típicas de
menús de navegación, localizados en menús desplegables, etc...
Si bien no existe una regla de oro para la caracterización de los enlaces, hacer que estos cambien de
tonalidad cuando sean sobrevolados con el puntero no solo ayudará a que el usuario los reconozca
como enlaces, sino también a que reconozca como una unidad enlaces que ocupen más de una línea.
Además, asignar una tonalidad diferente para los enlaces ya visitados ayuda en la orientación del
usuario.
Los menús o barras de navegación son un conjunto de enlaces que representan vínculos con las
'secciones' jerárquicamente más importantes de la estructura del site. Estos enlaces suelen ser
persistentes en todos los nodos del sitio web y semi-memorizados por el usuario debido no solo a
dicha persistencia, sino también al mayor número de veces que son utilizados respecto al resto de
enlaces. No suelen tener una caracterización azul y subrayada a causa de que su localización dentro
de la jerarquía visual los identifica claramente como enlaces. Estos enlaces o elementos del menú de
navegación, no solo no deben superar un número de entre 6-8, sino que además el número de
términos del rótulo de cada enlace debe ser lo más reducido posible (1 ó 2), todo esto para evitar la
sobrecarga memorística en el usuario.
Por último recordar que la caracterización del enlace no solo permite al usuario reconocerlo como
tal, también enfatiza el término o conjunto de términos del enlace. En el ejemplo siguiente podemos
observar un uso no apropiado de enlaces, ya que no solo no aprovecha la capacidad enfatizadora de
la caracterización especial de los enlaces, sino que además genera mucho ruido visual:
Ejemplo
 Haga clic aquí para comprar este producto
 Haga clic aquí para ver otras ofertas relacionadas
 Haga clic aquí para leer las opiniones de los usuarios
7
Los mismos enlaces corregidos:
Ejemplo
 Comprar este producto.
 Ver otras ofertas relacionadas.
 Leer las opiniones de los usuarios.
Además se ha eliminado el texto 'Haga clic aquí para'. Los usuarios ya saben que los enlaces son
clicables.
8