El estándar 100% fácil de leer
Siguiendo con la entrada Relativa facilidad de lectura aquí está la traducción del artículo de Oliver Reichenstein The 100% Easy-2-Read Standard
La mayoría de sitios web están repletos de texto pequeño que es un dolor de cabeza leer. ¿Por qué? No hay razón para tener tanta información apretada en la pantalla. Es sólo un estúpido error colectivo que se remonta a un tiempo en que las pantallas eran muy, pero muy pequeñas. Por eso:
No nos digas que ajustemos el tamaño del texto.
¡No queremos cambiar la configuración de nuestro navegador cada vez que visitamos un sitio web!
No nos digas que las paginas que están repletas de cosas se ven mejor.
Las páginas repletas de cosas no se ven bien: se ven horribles. Llenar las páginas nunca ha ayudado a la usabilidad. Es la pereza la que hace que nos arrojes todo tipo de información.
Queremos que pienses, y pre selecciones lo que es importante. No queremos hacer tu trabajo.
No nos digas que hacer scroll está mal
Porque entonces, todos los sitios web están mal. No hay nada malo con hacer scroll, nada, así como no hay nada de malo en pasar las páginas de un libro.
No nos digas que el texto no es importante
El 95% de lo que es referido como diseño web es tipografía.
No nos digas que usemos anteojos
Mejor, deja de lamer la pantalla, recuéstate en tu silla (!) y continúa leyendo en una posición relajada.
5 simples reglas
1. Tamaño de letra estándar para textos largos
El tamaño de letra que estás leyendo en este momento no es grande, es el tamaño de texto que los navegadores muestran por defecto. El tamaño que fue pensado para mostrarse en los navegadores
No queremos hacer click en botones para agrandar o achicar el texto y tampoco queremos cambiar las preferencias de nuestro navegador. Queremos empezar a leer de inmediato. Queremos que tú te ajustes a nuestra configuración, y no al revés.
Inicialmente es más difícil crear un buen layout con una tamaño de letra grande, pero esa dificultad te ayudará a diseñar un sitio más claro y simple. Llenar un sitio de información no es difícil, pero hacerlo simple y fácil de usar sí lo es.
En un comienzo te chocará lo grande que se ve el texto por defecto. Pero luego de un día, no querrás ver nada más pequeño a un font size 100% o 1em para el texto principal. Se ve grande al comienzo, pero una vez que lo uses te darás cuenta al instante por que todos los fabricantes de navegadores escogen ese tamaño de texto por defecto.
2. Espacio en blanco activo
Deja que tu texto respire. Usar espacio en blanco no es simplemente un tema de diseñadores. No se trata de gustos.
El ancho de la columna debe estar en proporción con el tamaño de letra. Las columnas demasiado largas cansan la vista y también tienen un efecto psicológico adverso. Las columnas demasiado cortas también pueden ser alterantes porque interrumpen el flujo de lectura molestando al lector al obligar a sus ojos a cambiar de linea demasiado rápido - Josef Muller-Brockmann, Grid Systems
Tener aire alrededor del texto reduce el nivel de estrés ya que hace mucho más fácil concentrarse en la esencia de la lectura. No hace falta llenar toda la ventana.
Que el espacio en blanco haga que se vea mejor no es un efecto secundario, es la consecuencia lógica del diseño funcional. ¿Quién dijo los sitios web deben estar llenos de cosas?
La cuestión del ancho de la columna no es sólo de diseño o formato; La cuestión de legibilidad es de igual importancia. - Muller-Brockmann
Por favor asegúrate que el ancho de linea (ancho de la columna de texto, también llamado "medida") no sea demasiado, y que estás agregando espacio a la izquierda y derecha para facilitarle al ojo saltar. No queremos ajustar el tamaño del texto ni el de la ventana.
Cuando abrimos un sitio web, sólo queremos empezar a leer. Las columnas que escalan su ancho son lindas; las lineas de texto que se extienden a través de toda la pantalla no lo son.
Buen Nielsen - mal Nielsen. El rey de la usabilidad recientemente agregó espacio en blanco y un ancho máximo a la columna de texto en su artículo principal (izquierda), el antiguo layout escalaba al 100% (derecha). Sólo un poquito más de espacio entre lineas y estará perfecto.
La regla básica es: 10 a 15 palabras por linea. Para layouts líquidos (liquid layouts), a un font-size de 100%, un ancho de columna de 50% (en relación al tamaño de la ventana) es un buen punto de referencia para la mayoría de resoluciones de pantalla.
3. Un interlineado amigable
Esto es lo que dice el especialista en lectura:
Las lineas que están muy juntas reducen la velocidad de lectura porque las lineas superior e inferior son tomadas por el ojo al mismo tiempo. El ojo no puede enfocarse en en lineas excesivamente juntas y... el lector gasta su energía en el lugar equivocado y se cansa más fácilmente. Lo mismo pasa con lineas que estás muy separadas.
El line-height por defecto en HTML es demasiado pequeño. Si lo aumentas el texto se vuelve más fácil de leer. 140% es un buen punto de referencia.
4. Un buen contraste de color
No debería ser necesario decir esto, pero si aún crees que puedes usar una de las siguientes combinaciones...
- Texto gris claro sobre un fondo de gris más claro
- Texto color "plateado" en un fondo blanco
- Texto amarillo sobre un fondo rojo
- Texto verde sobre un fondo rojo, y así sucesivamente...
... entonces no eres un diseñador web sino sólo un diseñador con mala actitud. Si insistes en que eres un diseñador web, entonces tendrás que estar consciente de que nunca nadie lo sabrá, así como nunca nadie podrá leer lo que escibes. Ponle fin a esa tontería y déjanos saber qué es lo que tipeas.
Nota: En pantalla un contraste fuerte (blanco y negro) tampoco es ideal, ya que el texto empieza a parpadear, toma de referencia #333 sobre #FFF
5. No uses imágenes como texto
Queremos ser capaces de buscar un texto, copiarlo, guardarlo, jugar con el cursor y marcarlo mientras leemos, las imágenes de texto se ven lindas, pero la web no se trata de ser lindo, se trata de comunicación e información, y la información necesita ser legible, usable, escalable, citada y enviada.
Si no puedes hacer que tu sitio web se vea bien sin usar imágenes de texto, me temo que tendrás que empezar de nuevo desde el principio.
Corre la voz
Si quieres que más sitios sean legibles, corre la voz. Haz un link a esta página, para que la gente pueda saber de qué se trata el estándar 100% fácil de leer. Sí te unes, estaré feliz de listar tu sitio aquí abajo.
Cómo correr la voz sobre el estándar 100% fácil de leer
Escribe un comentario con una o dos lineas acerca de tu sitio, si es decente lo listaré aquí sin importar si tu diseño me gusta o no. Por supuesto: no pornografía o spam, los sitios de competidores (Usabilidad, diseño...) son bienvenidos.
Miembros del Estándar 100% fácil de leer:
- Felipe Colihueque: Felipe escribe artículos de interés general o sobre datos técnicos de la Construcción.
- El blog de Juan Pablo Scaletti: De Python, JavaScript y aplicaciones Web.
- BarCamp Lima: Organización del BarCamp Lima 2008
- Armatoste, el blog de Luis Roberto José Flores sobre diseño
Etiquetas:
si te gustó esta entrada, tal vez quieras suscribirte via RSS
Hola, soy
Comentarios
deja un comentario
Muy buenos tus articulos, ya mismo te añado a mis feeds favoritos.
Saludos!
Muy buenos puntos a tener en cuenta.
Muchas gracias Gerald y Christian :), y ya lo saben si se animan a usar este estándar en sus blogs estaré encantado de listarlos en este post.
Buen comentario. Además dando ejemplo.
Personalmente considero imprescindible la columna de Jakob Nielsen, pero creo que podía retocar un poquito el diseño del sitio (que conste que el mío no es para "tirar cohetes").
Me gusta tu diseño, muy claro, fácil de leer y atractivo.
Un saludo!
Bruno, sí, la columna de Nielsen es imprescindible, su diseño siempre ha sido tema de discusión, en mi opinión, lo único que le pediría es RSS :)
Saludos.
Excelente articulo... justo que hace poco hice un cambio de diseño en mi blog, aprovecharé de tomar en cuenta todos estos punto... ya que aun me falta algunos puntos a retocar.
Puconino, tu blog es el primero listado aquí, felicidades!
Te recomiendo que uses un font-size menor para el sidebar, así el contenido principal tendrá más fuerza.
Un abrazo.
También tomaré en cuenta estos detalles para poder mejorar la plantilla de mi blog, arreglaré el css y hacer un fix para IE& (lamentablemente).
Saludos...
xploit29, excelente, cuando lo hagas deja un comentario aquí te agregaré como miembro del Estándar 100% fácil de leer.
Bueno. Yo no tengo blog de momento, pero si mi página web, que por cierto ahora estoy justamente rediseñando, ya que se ha quedado muy pero que muy fea. Hablamos de que la diseñé más o menos en el 2003/2004.
Total, que ahora ya estoy intentando terminar la nueva versión, y en cuanto a llegue a casa esta tarde, pruebo el font 100% o si no entiendo mal, también puedo poner 1 em.
Bueno, un saludo.
Hola Germán,
He añadido un enlace a este artículo y a tu página web a mi blog.
No hace falta que me listes en el tuyo, el mío no versa sólo sobre CSS, HTML, etc, es un compendio de cosas que me voy encontrando por la web, mezclado con recetas de cocina propias, y pensamientos puestos "en voz alta".
He de reconocer que tienes un recurso muy interesante, y te aseguro que apareceré más de una vez por él para echarle un vistazo, buscando casi con seguridad algo que tiene que ver con tu trabajo.
Un saludo y gracias por compartir tus conocimientos y esfuerzos.
Mi sitio es para rwcursos webmaster, y cosas similares y tengo algo escrito al respecto,pero los "diseñadores" no se cansan de colocar cosas y llenar las páginas con cosas que no le interesan a nadie y al final uno se va,ya que no encuentra lo que quiere, otro punto que creo que es importante es el ordenamiento de nuestro sitio ya que asi los usuarios navegan por nuestra web sabiendo donde esta cada cosa, y no cambiar los colores y menús una ves a la semana.gracias a todos y los invito a otro sitio que tengo que es de arte http;//www.loocktel.cl ojala les guste y les agradeceria que me dijesen si algo no les gusta y como lo corregirian.
el computador esta bien pero el internet no como ago para que la letra salga de tamañño normal es que sale demasiiado pequeña no es legible
muy buena info ya que mucha gente sobresatura demasiado su paginas web, bueno aun no lanzo mi web por cuestiones de tiempo
Excelente información, ya hice los cambios necesarios para que mi página sea lo mas cómoda y funcional posible para el lector. Gracias a tu sitio he mejorado bastante, últimamente me he vuelto algo estricto con el diseño y tal como lo dices no es necesario saturar las páginas con miles de cosas, y ahora por fin ya no tengo que acercar tanto mi cara a la pantalla, no me había dado cuenta en como afecta el tamaño de la fuente, pero gracias a esto ya solucione ese problema.
Deja un comentario