Legibilidad, Apuntes de Comunicación Audiovisual. Escola Superior de Disseny i d'Arts Plàstiques de Catalunya - ESDAP
marcvendrell
marcvendrell

Legibilidad, Apuntes de Comunicación Audiovisual. Escola Superior de Disseny i d'Arts Plàstiques de Catalunya - ESDAP

14 páginas
5Número de visitas
Descripción
Asignatura: Di, Profesor: Tipografia Tipografia, Carrera: Animació Audiovisual, Universidad: art-disseny
20 Puntos
Puntos necesarios para descargar
este documento
Descarga el documento
Vista previa3 páginas / 14
Esta solo es una vista previa
3 páginas mostradas de 14 páginas totales
Descarga el documento
Esta solo es una vista previa
3 páginas mostradas de 14 páginas totales
Descarga el documento
Esta solo es una vista previa
3 páginas mostradas de 14 páginas totales
Descarga el documento
Esta solo es una vista previa
3 páginas mostradas de 14 páginas totales
Descarga el documento
Legibilidad y Comprensión en la web

Legibilidad y comprensión en la World Wide Web

Un trabajo de investigación de Tomás García Ferrari & Carolina Short http://bigital.org/tipo2-venancio/ Buenos Aires, Argentina, 2002

Legibilidad y comprensión en la World Wide Web

Introducción Un trabajo de investigación de Tomás García Ferrari & Carolina Short

En la actualidad, leer un texto en una pantalla se ha convertido en algo habitual. Hemos experimentando un cambio de paradigmas: de la impresión en papel a la pantalla de la computadora (o parafraseando a Nicholas Negroponte ‘de los átomos a los bits’). Esta transición afecta la manera en que leemos y comprendemos un texto. Los medios digitales tienen un ritmo rápido y dinámico; los usuarios al navegar por internet pasan de una página a otra en segundos. Podríamos informalmente decir que la mayoría de ellos realiza un barrido de los textos. Si bien a partir de esto podría entenderse que la lectura es más veloz, estudios realizados por terceros sugieren que la misma es aproximadamente un 30% más lenta con respecto a la lectura en papel, y que la comprensión del texto se reduce en un 50%.[1]

El diseño digital posee problemas que son propios del medio, y específica- mente el diseño para la web, en el cual es muy complicado (o casi imposible) controlar el entorno en el cual se mueven los usuarios: diferentes platafor- mas, navegadores y hardware. La tipografía, por ser un elemento esencial en el diseño de un medio de lectura, presenta nuevas problemáticas. A pesar de que se pueden utilizar reglas provenientes del medio impreso, hay una cierta cantidad de características peculiares que exigen una definición de reglas específicas. Hasta el momento, la mayoría de las mismas provienen de un sistema de ensayo/error.

Esta investigación es un acercamiento experimental a este problema, realiza- da con la colaboración de la cátedra de Tipografía II, Prof. Carlos Venancio, Facultad de Arquitectura, Diseño y Urbanismo, de la Universidad de Buenos Aires.

Objetivos Establecer con qué tipografías y bajo qué condiciones se obtienen mejores resultados en términos de legibilidad y comprensión de textos en la pantalla.

Antecedentes Pruebas de investigación realizadas por el «Software Usability Research Laboratory», Wichita State University, Estados Unidos.

Participantes La prueba aquí documentada se realizó con 124 estudiantes de la cátedra de Tipografía II, Prof. Carlos Venancio, Facultad de Arquitectura, Diseño y Urbanismo, de la Universidad de Buenos Aires. El entorno de la realización de las pruebas no estuvo acotado (tamaño de monitor, resolución, profundi- dad de color, navegador o sistema operativo) ya que los estudiantes lo realizaron desde sus computadoras. El promedio de edad fue de 23 años, y la mayoría había cursado la mitad de la carrera de diseño gráfico. Todos los participantes tenían la posibilidad de entrar al website y realizar la prueba a su propio ritmo.

[1] Jacob Nielsen «Why Web Users Scan Instead of Read» http://www.useit.com/alertbox/whyscanning.html

Legibilidad y comprensión en la World Wide Web

Descripción Un trabajo de investigación de Tomás García Ferrari & Carolina Short

Pruebas La mecánica de los ejercicios –básicamente– consiste en leer tres textos distintos de similares características. Después de cada lectura se mide el tiempo que demandó, y se pide a los participantes que contesten un cuestionario que ayudará, más tarde, a evaluar los resultados. Todos los artículos fueron extraídos de La Nacionline –la versión electrónica del periódico La Nación–, seleccionados de la sección «Información gene- ral», con un largo de 500 a 600 palabras, y equilibrados utilizando un cuadrado latino[2].

Se trabaja sobre 4 ejes diferentes (un ejercicio por cada uno): - familia tipográfica - cuerpo/interlínea - ancho de columna - color

Procedimiento Los usuarios entran a un sitio especialmente desarrollado para realizar la prueba. La primera página cuenta con la opción de seleccionar uno de los cuatro ejercicios. Al ingresar a la página específica del ejercicio en sí, se presentan tres opciones para lectura. A fin de balancear todas las posi- bilidades, se realizó una distribución de los artículos/posibilidades de modo que cada participante obtenía tres ejemplos, cada uno de ellos con una opción particular.

Al final del texto hay un vínculo que tiene dos funciones: detener el reloj que calcula el tiempo utilizado para leer y redireccionar al usuario al se- gundo paso del ejercicio, que consiste en una evaluación. Esta última está armada sobre dos bases, una objetiva, que denominamos «de presi- ción» y otra, subjetiva, «de preferencia». La fase de evaluación objetiva consiste en responder algunas preguntas relacionadas con el contenido del artículo, utilizando un formulario de multiple choice; además, algu- nas palabras dentro de la nota han sido sutilmente cambiadas y el usuario debe contestar cuántos de estos errores ha encontrado. En cuan- to a la fase de evaluación subjetiva, las preguntas están relacionadas con la preferencia del participante y referidas al estilo de texto que le ha tocado leer. En este caso las respuestas se miden mediante un sistema de escala Likert [3] que va de 1 (= «muy malo») a 6 (= «excelente»).

Una vez completados los cuestionarios, los participantes pueden pasar al siguiente artículo.

[2] Cuadrado latino: es un arreglo usado para remover la heterogeneidad del material experimental en dos direcciones. En nuestros ejercicios, fue utilizado para distribuir los textos de modo que se repitieran las opciones de lectura/estilo en forma pareja.

[3] Escala Likert: método de evaluación que consiste en un conjunto de ítems presentados en forma de afirma- ciones o juicios ante los cuales se pide la reacción de los encuestados. El usuario califica la afirmación con uno de los cinco puntos de la escala. A cada punto se le asigna un valor numérico. Así se obtiene una pun- tuación respecto a la afirmación, y al final se obtiene una puntuación total sumando las puntuaciones obtenidas en relación a todas las afirmaciones.

Legibilidad y comprensión en la World Wide Web

Prueba 1: familia tipográfica Un trabajo de investigación de Tomás García Ferrari & Carolina Short

Prueba 1: Familia tipográfica Para esta prueba, el cuerpo y la interlínea de los textos es de 12/15 pixeles y 14 pixeles para los títulos; texto negro sobre fondo blanco.

Las tipografías seleccionadas son: - Verdana - Helvetica/Arial - Georgia - Times/Times New Roman - Trebuchet MS - Courier/Courier New - Comic Sans MS

A fin de balancear los distintos ejemplos, se realiza una distribución de los conjuntos texto/familia tipográfica de manera tal que a cada participante le tocan 3 ejemplos, cada uno de ellos con una familia particular.

A los participantes se le pide opinión acerca de la «legibilidad»[4], la «personalidad»[5] y la «elegancia»[6] de la tipografía que acababan de leer.

[4] Legibilidad: la calidad que tiene un escrito de ser legible (extraído del «Manual de diseño editorial» de Jorge de Buen Unna). || Legible: que se puede leer.

[5] Personalidad: conjunto de cualidades, que constituyen –en este caso– a la familia tipográfica. [6] Elegancia: calidad de elegante, bien proporcionado, de buen gusto.

188 seg.

194 seg.

189 seg.

204 seg.

191 seg.

195 seg.

189 seg.

0 seg. 50 seg. 100 seg. 150 seg. 200 seg. 250 seg.

Comic Sans MS

Courier / Courier New

Trebuchet MS

Times / Times New Roman

Georgia

Helvetica / Arial

Verdana

Familia tipografía: tiempo de lectura promedio en segundos

Legibilidad y comprensión en la World Wide Web

Prueba 1: familia tipográfica Un trabajo de investigación de Tomás García Ferrari & Carolina Short

muy mala mala regular buena muy buena excelente

Elegancia

Personalidad

Legibilidad

Comic Sans MS

Courier / Courier New

Trebuchet MS

Times / Times New Roman

Georgia

Helvetica / Arial

Verdana

Familia tipografía: análisis subjetivo

0 % 20 % 40 % 60 % 80 % 100 %

Incorrecta

Correcta

Comic Sans MS

Courier / Courier New

Trebuchet MS

Times / Times New Roman

Georgia

Helvetica / Arial

Verdana 57 %

51 %

55 %

54 %

56 %

54 %

57 %

Familia tipografía: comprensión del texto

Legibilidad y comprensión en la World Wide Web

Prueba 2: cuerpo e interlínea Un trabajo de investigación de Tomás García Ferrari & Carolina Short

Prueba 2: Cuerpo e interlínea El cuerpo y la interlínea son dos elementos básicos para determinar la legibilidad de un texto. La propuesta de este ejercicio es verificar cuál es, en pantalla, la relación óptima entre ellos.

Las diferentes opciones son: (expresado en pixeles): - 10/10 - 10/12 - 12/12 - 12/15 - 12/18 - 12/21 - 14/18

En todos los casos la familia utilizada es Verdana; negro sobre blanco.

A los participantes se le pide una opinión subjetiva acerca de la «Legibili- dad»[7], el «Confort»[8] y el «Color tipográfico»[9].

[7] Ibídem nota [4] [8] Confort: comodidad, bienestar de lectura. [9] Color tipográfico: también denominado «mancha tipográfica», hace referencia a la textura formada por el

texto de la página y que será en mayor o menor medida denso o gris dependiendo del estilo dado por la famila tipográfica, el cuerpo, la interlínea, el interletrado, etc.

Legibilidad y comprensión en la World Wide Web

Prueba 2: cuerpo e interlínea Un trabajo de investigación de Tomás García Ferrari & Carolina Short

185 seg.

183 seg.

177 seg.

190 seg.

184 seg.

188 seg.

184 seg.

0 seg. 50 seg. 100 seg. 150 seg. 200 seg.

14/18

12/21

12/18

12/15

12/12

10/12

10/10

Cuerpo e interlínea: tiempo de lectura promedio en segundos

Cuerpo e interlínea: análisis subjetivo(from 332 cases done by 115 people)

Color tipográfico

Confort

Legibilidad

14/18

12/21

12/18

12/15

12/12

10/12

10/10

muy mala mala regular buena muy buena excelente

0 % 20 % 40 % 60 % 80 % 100 %

Incorrecta

Correcta

14/18

12/21

12/18

12/15

12/12

10/12

10/10 69 %

66 %

64%

61 %

70 %

68 %

64 %

Cuerpo e interlínea: comprensión del texto (from 332 cases done by 115 people)

Legibilidad y comprensión en la World Wide Web

Prueba 3: Ancho de columna Un trabajo de investigación de Tomás García Ferrari & Carolina Short

Prueba 3: Ancho de columna El equilibrio entre el cuerpo y la interlínea determina un ancho de columna óptimo para la lectura. Para el medio impreso es de aproxi- madamente 60 caracteres por línea. Sabemos, también, que si ésta cantidad de caracteres crece, es aconsejable aumentar la interlínea a fin de mejorar la legibilidad. ¿Serán estos conceptos aplicables a la lec- tura en pantalla?

Las variables a evaluar son: - 40 caracteres por línea - 60 caracteres por línea - 80 caracteres por línea - 100 caracteres por línea - 120 caracteres por línea

En todos los casos, el tamaño y la interlínea de estos textos es 12/15 pixeles y 14 pixeles para los títulos; texto negro sobre fondo blanco.

En esta prueba, la opinión subjetiva es sobre la «Legibilidad»[10], el «Confort»[11] y el «Equilibrio»[12].

[10] Ibídem nota [4] [11] Ibídem nota [8] [12] Equilibrio: Estabilidad, ecuanimidad, armonía del texto en sus proporciones.

Legibilidad y comprensión en la World Wide Web

Prueba 3: Ancho de columna Un trabajo de investigación de Tomás García Ferrari & Carolina Short

190 seg.

185 seg.

183 seg.

195 seg.

200 seg.

0 seg. 50 seg. 100 seg. 150 seg. 200 seg.

120 caracteres por línea

100 caracteres por línea

80 caracteres por línea

60 caracteres por línea

40 caracteres por línea

Ancho de columna: tiempo de lectura promedio en segundos

Ancho de columna: análisis subjetivo

Equilibrio

Confort

Legibilidad

120 caracteres por línea

100 caracteres por línea

80 caracteres por línea

60 caracteres por línea

40 caracteres por línea

muy mala mala regular buena muy buena excelente

0 % 20 % 40 % 60 % 80 % 100 %

Incorrecta

Correcta

120 caracteres por línea

100 caracteres por línea

80 caracteres por línea

60 caracteres por línea

40 caracteres por línea 53 %

53%

51 %

53 %

55 %

Ancho de columna: comprensión del texto

Legibilidad y comprensión en la World Wide Web

Prueba 4: color Un trabajo de investigación de Tomás García Ferrari & Carolina Short

Prueba 4: Color El color es uno de los factores principales que intervienen en la legibili- dad de cualquier medio: impresión, pantalla, televisión, etc. Pero en la pantalla parecería ser aún más delicado, ya que el color está generado por la emisión de luz en vez de con la sustracción de la misma como pasa, por ejemplo, en papel.

Hay colores agradables, agresivos, calmos, exitantes. Todos ellos pueden ser utilizados con el objetivo de cambiar el humor del usuario. Pero, ¿qué tan seriamente afectan la legibilidad en un texto?

Las variables a probar son: - amarillo sobre azul - rojo sobre verde - negro sobre blanco - gris sobre blanco - blanco sobre verde - negro sobre gris - verde sobre amarillo

En todos los casos, el tamaño y la interlínea de estos textos es 12/15 pixeles y 14 pixeles para los títulos; la familia utilizada es Verdana.

En este caso, las opiniones solicitadas son sobre la «Legibilidad»[13], el «Confort»[14] y el «Contraste»[15].

[13] Ibídem nota [4] [14] Ibídem nota [8] [15] Contraste: diferencia de intensidades de iluminación entre la tipografía y el fondo; diferencia de densidad

entre las partes más obscuras y las más luminosas de una imagen.

Legibilidad y comprensión en la World Wide Web

Un trabajo de investigación de Tomás García Ferrari & Carolina ShortPrueba 4: color

213 seg.

209 seg.

196 seg.

202 seg.

188 seg.

201 seg.

212 seg.

0 seg. 50 seg. 100 seg. 150 seg. 200 seg. 250 seg.

Color: tiempo de lectura promedio en segundos

verde sobre amarillo

negro sobre gris

blanco sobre verde

gris sobre blanco

negro sobre blanco

rojo sobre verde

amarillo sobre azul

Color: análisis subjetivo

Contraste

Confort

Legibilidad

muy mala mala regular buena muy buena excelente

verde sobre amarillo

negro sobre gris

blanco sobre verde

gris sobre blanco

negro sobre blanco

rojo sobre verde

amarillo sobre azul

0 % 20 % 40 % 60 % 80 % 100 %

Incorrecta

Correcta

verde sobre amarillo

negro sobre gris

blanco sobre verde

gris sobre blanco

negro sobre blanco

rojo sobre verde

amarillo sobre azul 58 %

53%

62 %

57 %

57 %

59 %

55 %

Color: comprensión del texto

Legibilidad y comprensión en la World Wide Web

Conclusión Un trabajo de investigación de Tomás García Ferrari & Carolina Short

A modo de reflexión Con estas pruebas, estamos evaluando la comprensión y la legibilidad de un texto en tres aspectos: tiempo de lectura, comprensión del texto y preferencia subjetiva.

Con respecto a los tiempos de lectura, las diferencias que observamos en los diferentes ejercicios son muy sutiles como para que sean trans- feribles y se pueda establecer una conclusion útil. No obstante, es interesante notar que haciendo un promedio general de todos los ejer- cicios, el tiempo de lectura general es de 192.88 segundos. Teniendo en cuenta que el 72.96% del total de los ejercicios fue realizado uti- lizando la familia Verdana, 12/15 y negro sobre blanco, los resultados de estos ejercicios en particular convalidan el resultado promedio general:

- fuente tipográfica Verdana, 188 segundos; - cuerpo/interlínea 12/15, 190 segundos; - negro sobre blanco, 196 segundos.

Considerando la parte objetiva de comprensión de los textos leídos, las respuestas de los cuatro ejercicios dieron un resultado similar, cercano a un 60% de respuestas correctas. La similitud de estos por- centajes obtenidos en los cuatro ejercicios, nos llevan a pensar que el procedimiento de evaluación objetivo debiera ajustarse a fin de obte- ner un resultado más valioso.

La conclusión que pareciera ser más exitosa y más realista es la de carácter subjetivo. Acá podemos decir que los resultados tienen cierto valor: las diferencias más notorias parecieran estar más en la mente de los lectores que en la efectividad de un ejemplo dado. La belleza está en los ojos del observador; la funcionalidad, quizás no.

Como este experimento no estuvo realizado en un ambiente controla- do, las pruebas fueron hechas en una situación totalmente casual: cada usuario podía elegir en qué condiciones realizarlo, lo hicieron en su lugar habitual, con la computadora y la velocidad de conexión que usan normalmente. Y qué, lógicamente, difieren de un participante a otro. Este factor nos da el beneficio de la realidad, pero agrega más variables que pueden haber derivado en resultados intranferibles y no extrapolables.

Legibilidad y comprensión en la World Wide Web

Bibliografía/Gracias Un trabajo de investigación de Tomás García Ferrari & Carolina Short

Bibliografía

Libros - «Satztechnik Typografie 5- Typografie am Bildschirm»,

Autorenkollektiv: Richard Frick, Christine Graber, Samuel Marty, Martin Sommer, comedia-Verlag Bern

- «Designing Web Usability», Jakob Nielsen, New Riders Publishing

Artículos - «Typography on the web»,

http://www.hypermedic.com/style/typog/typindex.htm - «Usability News», Usability Research Laboratory, The Wichita State

University, http://www.usabilitynews.org/ - «Why Web Users Scan Instead of Read», Jakob Nielsen,

http://www.useit.com/alertbox/whyscanning.html - «How Users Read on the Web», Jakob Nielsen,

http://www.useit.com/alertbox/9710a.html - Stanford-Poynter Project, EyeTracking Online News,

http://www.poynter.org/eyetrack2000/index.htm - «Navigating large bodies of text», by D. Small, IBM Systems Journal,

Vol 35, NOS 3&4, 1996

Gracias a Prof. Martin Krampen Ph.D., Hochschule für Gestaltung FH Schwäbisch Gmünd, Alemania, por compartir con nosotros sus experiencias, que nos dieron el tema de esta investigación;

al Software Usability Research Laboratory, Wichita State University, Estados Unidos y a su boletín online «Usability News» por darnos algunos ejemplos a seguir;

a los participantes del workshop «Legibilidad y comprensión en la web» y a la revista tpG por darnos la posibilidad de realizar una primera experiencia con esta investigación en el marco del simposio tpGbuenosAires, en noviembre 2001;

al Prof. Carlos Venancio, Prof. Carlos Venancio, Facultad de Arquitec- tura, Diseño y Urbanismo, de la Universidad de Buenos Aires, por su amistad y su apoyo;

a los alumnos y docentes de la cátedra de Tipografía II, Prof. Carlos Venancio, Facultad de Arquitectura, Diseño y Urbanismo, de la Universi- dad de Buenos Aires (Mariano Ajamil, Mara Ares, Flavio Burstein, Valeria Castresana, Darío Contreras, Fabián Goya, María Heinberg, Cecilia Kröpfl, Santiago Laje, Carla López, Silvina Rave, Andrea Rodríguez Giménez, Alejandro Romero) por haber sido parte de este experimento.

Legibilidad y comprensión en la World Wide Web

Créditos Un trabajo de investigación de Tomás García Ferrari & Carolina Short

Creditos Tomás García Ferrari & Carolina Short Bigital http://bigital.com/ [email protected]

Copyright © 2002/03 - Bigital

Se permite realizar copias digitales o impresas de todo o parte de este trabajo para uso personal o educativo libre de honorarios, siem- pre que las mismas no se realicen o distribuyan con fin de lucro o ánimo comercial, y que expongan en su totalidad esta nota en la primera página o pantalla inicial. Copyrights de componentes de este trabajo pertenecientes a terceros pueden tener honorarios. Se permiten extracciones siempre que se conserven los créditos. Otro tipo de copias, publicación, publicación en internet, redistribución en listas, o uso de cualquier componente de este trabajo requiere de permiso específico por escrito. Los mismos se pueden solicitar a: <[email protected]>.

No hay comentarios
Esta solo es una vista previa
3 páginas mostradas de 14 páginas totales
Descarga el documento