La aparición de nuevas pantallas y mejores herramientas para diseñar los sitios web hacen que muchos profesionales se enfrenten a problemas que parecen nuevos, pero que en realidad ya han sido resueltos decenas de años antes.
La reflexión anterior llega debido a una pregunta que no es menor ni poco frecuente: ¿Cuál debe ser el ancho del sitio web? ¿800 x 600 pixeles o más grande? ¿Debe ser diseño fijo o líquido?
La respuesta, invariablemente, es: depende de los usuarios del sitio. Hay que conocerlos y saber desde qué tipo de dispositivos están accediendo al sitio web y para ello es vital conocer lo que va almacenando el “log” del servidor. De esa manera, si la mayoría usa pantallas nuevas, de las que despliegan sin problemas 1.024 pixeles de ancho, es posible considerar ampliar el ancho del sitio.
No obstante, de tanto responder de la misma manera a quienes hacían la pregunta, comencé a pensar de nuevo en la respuesta y, por supuesto, a investigar. Sin saber a dónde iba a llegar, me fui primero a la historia, tratando de encontrar una salida razonable a la interrogante.
El Maestro Amster
Uno de los hallazgos más interesantes en este trabajo fue el libro del maestro Mauricio Amster, titulado “Técnica Grafica, Evolución, procedimientos y aplicaciones” (de cuya tapa tomé el grabado que ilustra esta crónica). Escrito en el año 1954, recoge toda la enseñanza de un tipógrafo y artista gráfico que llegó a Chile en el año 1939, huyendo de la Guerra Civil Española, a bordo del Winnipeg. Recomendado por Pablo Neruda, comenzó a trabajar al día siguiente de su llegada, como recoge la interesante biografía escrita por dos profesores de la UC.
De ese libro, que es de cabecera para quienes se interesan por la tipografía, se destaca la siguiente frase: «Las letras sirven para formar palabras que, arregladas en frases u oraciones, deben transmitir un pensamiento. Para cumplir esta función han de ser legibles…».
Y a eso se agrega otra reflexión que viene de perillas para el tema de mi preocupación sobre cómo diagramar, teniendo en mente la adecuada legibilidad de lo que se está escribiendo:
«Una línea larga se hace poco legible en su conjunto cuando su separación de la próxima no es suficiente. El ojo, al llegar al final, ha perdido contacto con el comienzo, y cuando vuelve a la izquierda, se confunde durante un instante buscando la continuación. Tal experiencia es enojosa, nos distrae y resulta en la deficiente legibilidad de un texto. Para obviarla se recurre a la interlínea. Un espacio blanco entre las líneas ayuda a encontrar la línea nueva. A mayor interlínea, dentro de límites razonables, mejor legibilidad y también una página más bella.»
La lectura atenta deja sobre la mesa los elementos clave para trabajar en el concepto de la legibilidad: buena elección de la tipografía, del interlineado y del largo de la línea escrita.
Cómo definir el despliegue del contenido
La línea de investigación abierta con estos elementos me llevó a descubrir, con un poco de vergüenza por no haber atendido antes a esos importantes temas, a las investigaciones que se han realizado en los últimos diez años acerca del uso de la tipografía y la diagramación de las páginas de lectura en el web.
Dichos temas son los siguientes:
– Tipo de letras: sobre las letras hay bastantes investigaciones, comenzando por aquellas que llevaron al desarrollo de tipografías especiales para pantalla (Verdana, Trebuchet y Georgia, por nombrar algunas).
Ralph Wilson en un artículo sobre el tema plantea que en sus encuestas descubrió que los usuarios “claramente prefieren letras sans-serif a las que tienen serif, para el caso del texto plano”.
[ El origen del serif: http://re-type.com/notaweblog/?p=56 ]
[ Tipos de letra: http://tpgbuenosaires.tipografica.com/workshops/apuntes/tipografia_para_pantalla.html ]
Esta idea es apoyada por otros autores que ofrecen explicaciones más técnicas derivadas de la forma que tienen las tipografías. Es el caso de Tomás García Ferrari y Carolina Short, profesores de la Universidad de Buenos Aires, quienes plantean que “las fuentes para pantalla tienen en común algunas características como formas más abiertas, ojos más grandes, letras más anchas, mayor altura de x e interletra más generosa. Encajan perfectamente en la grilla de pixeles sin distorsionarse”.
– Una o más columnas: la preferencia siempre será que el texto se muestre en una sola columna. Nielsen apoya esta elección, indicando que “los contenidos importantes se deben poner en una columna principal única, de tal manera que los usuarios no tengan que revisar visualmente la página y elegir elementos en un diseño de dos dimensiones; esto también ayuda a quienes tienen problemas de visión y a los usuarios de aparatos portátiles (como los nuevos teléfonos inteligentes) que tienen un campo de visión estrecho”.
Un hallazgo similar hizo el estudio Eyetrack III del Poynter Institute, al indicar que “cerca de tres cuartos o 72 por ciento del texto de la noticia presentada en el formato de una columna fue leído. Esto fue notablemente más alto que el 56% del texto leído cuando fue presentado en un formato de tres columnas”.
-Interlineado del texto: una investigación de campo realizada por profesores de la Wichita University en Estados Unidos, muestra que el uso de espacio blanco “promedio” entre párrafos “produce mayores niveles de satisfacción y mayor preferencia que los textos muy densos o aquellos que usan mucho espacio entre ellos”.
– Márgenes del texto: otra investigación de los mismos autores anteriores, demostró además que la legibilidad de un texto aumenta cuando hay espacios adecuados en los márgenes de las líneas, respecto de si éstas están ajustadas a los bordes de la página. Su trabajo señala que si bien con márgenes amplios la lectura es más lenta, la comprensión aumenta.
El ancho de la columna
Con todo lo revisado en los párrafos anteriores, queda entonces por revisar la última parte de este trabajo, que es responder la pregunta que da origen a este artículo: ¿Cuál debe ser el ancho del sitio web?
Sobre el tema debemos volver a plantear que si bien el ancho puede ser el que se desee en términos de diseño, pero, lo que no podrá variar será el ancho máximo de los textos que incluya.
En ese sentido, el trabajo práctico realizado por los profesores García Ferrari y Short con usuarios con los cuales probaron velocidad de lectura y comprensión señala que no hay una única respuesta aunque hay cierta claridad en el sentido que un ancho de columna en torno 80 – 100 caracteres por línea es el más adecuado en términos de rapidez de lectura. No obstante, la comprensión no es la mejor a este tamaño.
Sin embargo, ellos introducen el concepto subjetivo de cuál es el mejor para los usuarios, en términos de la mejor diagramación que presenta cada caso y en ese sentido, sí ganan los a 80 – 100 caracteres por línea.
Una conclusión subjetiva similar es la que plantea Dawn Shaikh en su estudio del tema, al señalar que “los usuarios indican que leyendo párrafos de 95 caracteres por línea tenían la sensación de obtener más información de una página de manera más rápida”, si se le comparaba con párrafos más angostos. Y eso mismo fue refrendado en la medición hecha a quienes leían.
Como conclusión, este autor indica que “más allá del hecho que no hubo diferencias en mediciones de satisfacción, un largo de línea que permita una lectura más rápida podría impactar en la experiencia general de los usuarios”.
Finalmente se debe volver al principio –es decir, los maestros tipógrafos como Amster- para nuevamente insistir en que “en la composición de texto continuo habrá de prestarse especial atención en lo referente a la longitud de la línea a que la medida de esta no cause fatiga en el lector y que no le presente dificultades para posicionarse en el inicio de la siguiente línea”, como se indica en el excelente sitio de “Unos tipos duros”.
Lo mismo es apoyado por Juan Carlos García al indicar que “aunque los estudios empíricos no son unánimes al respecto, es preferible usar renglones de tamaño medio (60-80 cpl) antes que los de tamaño largo o corto. Además, éstos son los preferidos de los usuarios”.
Palabras al cierre
Finalmente debemos decir que desde la experiencia ganada en estudios y en la teoría, se denota que el ancho máximo del texto en pantalla deberá ir desde 60 cpl a 100 cpl. Menos que esa medida causará molestia y distracción en el usuario y más, atentará contra la legibilidad de lo escrito. Por lo mismo, aunque la diagramación ocupe el ancho total de la ventana o pantalla, el texto deberá tener límites concretos en su ancho y no “estirarse” junto con el sitio.
Y hasta aquí llega el recorrido por este tema, que partió desde la historia y terminó, en ella misma. Como quien olvida los errores del pasado corre el riesgo de repetirlos, lo mejor es tomar la medida de trabajar con tamaño de línea adecuados para la lectura de las personas, más que adecuados o dirigidos exclusivamente por cómo se va a ver la página que se construye.