Lectura/Web/Mejoras de Escritorio/Test del quinto prototipo

This page is a translated version of the page Reading/Web/Desktop Improvements/Fifth prototype testing and the translation is 90% complete.
Outdated translations are marked like this.

Nos gustaría recibir tu feedback sobre algunas de las decisiones de diseño de Vector 2022. Por diseño visual entendemos el estilo del texto, los botones, los bordes, los fondos y el espaciado.

Instrucciones

  1. Revisa esta página para obtener contexto
  2. Crea una nueva sección en esta página utilizando el formulario que aparece a continuación (se rellenará previamente con las preguntas para que las respondas).
  3. Rellena tus comentarios en la sección que acabas de crear.

Por favor, ten en cuenta:

  • Estos son prototipos, la mayoría de las características no funcionan, y puede haber otros errores o peculiaridades que te encontrarás.
  • El "formulario de nueva sección" lamentablemente no es compatible con el Editor Visual (VE). Si utilizas el Editor Visual, crea manualmente una nueva sección y copia y pega las preguntas (enumeradas a continuación).
  • No es necesario que revises todas las secciones; céntrate en las que te resulten más interesantes.
  • El diseño, y en concreto el diseño visual, puede ser subjetivo. Todos tenemos opiniones propias, así que nos gustaría que nos expliques las tuyas y cómo se relacionan con nuestros objetivos de diseño de simplicidad y usabilidad.
  • Podría haber buenas opciones que no se presentan aquí. No dudes en sugerir otra cosa si crees que puede funcionar mejor que las opciones presentadas. Si te sientes cómodo/a con el diseño y/o la codificación, no dudes en incluir maquetas o prototipos de tus ideas (esto no es obligatorio). Archivos de diseño: Figma, Sketch, Google Drawing. Prototipo: GitHub.
  • Si presentas tus propias ideas, no edites esta página; inclúyelas en tu formulario de comentarios.
  • Apreciamos a los diseñadores aficionados y respetamos a los experimentados. Revisaremos todos los comentarios e ideas y, en última instancia, confiaremos en el criterio de diseñadores profesionales para tomar las decisiones finales.
  • Si prefieres compartir tus comentarios por correo electrónico, envíalos a [$1 olga@wikimedia.org].

Vista previa de las preguntas

  1. Menús - abre el prototipo en una nueva pestaña: https://di-visual-design-menus.web.app/Brown_bear. ¿Qué opción prefieres y por qué? Asegúrate de comprobar el menú de búsqueda, el menú de usuario, el menú de idioma y el menú de herramientas.
  2. Bordes y fondos - abrir prototipo en una nueva pestaña: https://di-visual-design-borders-bgs.web.app/Zebra. ¿Qué opción prefieres y por qué?
  3. Sección activa en el índice - abrir prototipo en una nueva pestaña: https://di-visual-design-toc-active.web.app/Otter. ¿Qué opción prefiere y por qué?
  4. Logotipo en la cabecera - abrir prototipo en una nueva pestaña: https://di-visual-design-header-logo.web.app/Panda. ¿Qué opción prefieres y por qué?
  5. Colores de los enlaces - abre el prototipo en una nueva pestaña: https://di-visual-design-link-colors.web.app/Salmon. ¿Hay algún aspecto adicional que consideres que es necesario tener en cuenta antes de realizar este cambio?
  6. Tamaño de fuente - abrir prototipo en una nueva pestaña: https://di-visual-design-font-size.web.app/Hummingbird. ¿Tienes algún problema con el tamaño de letra propuesto?

Antecedentes y contexto

En los últimos dos años hemos realizado varios cambios estructurales en la interfaz. Hemos desplazado el cuadro de búsqueda, el selector de idioma, y el índice de contenidos. Hemos organizado ciertos enlaces y herramientas en menús. Y hemos limitado el ancho del contenido, añadido una cabecera fija, y movido el título de la página por encima de la barra de herramientas de la página. Ahora, con todos estos elementos situados en la interfaz actualizada, nos centramos en el aspecto general. Algunas de las preguntas iniciales que nuestro equipo ha considerado son:

  • ¿Cómo podemos utilizar el diseño visual para mejorar la interfaz?
  • ¿Creemos que hay valor en que la apariencia tenga alguna personalidad adicional (como las líneas azules y los gradientes en Legacy Vector)?
  • ¿En qué momento hay demasiado, de manera que pueda distraer o hacer confusa la interfaz?
  • ¿Y si incorporamos lo menos posible y aportamos un enfoque súper minimalista similar al de la interfaz de la Wikipedia original?

Históricamente nuestro enfoque ha sido sencillo y funcional. Los elementos HTML tienen poco estilo (si es que tienen alguno), lo que simplifica la interfaz tanto para quienes la usan como para quienes la diseñan y construyen. También significa que nuestro diseño visual es bastante atemporal. No perseguimos las tendencias y no necesitamos hacer cambios cada dos años. Observando las capturas de pantalla de abajo podemos ver cómo Monobook y Legacy Vector utilizan el diseño visual con moderación (principalmente bordes y colores de fondo).

Comparativa de las interfaces
 
Pantallazo de la Wikipedia en hindi con Monobook
 
Pantallazo de la Wikipedia en japonés con Legacy Vector

Cambios previstos

Menús

Usamos varios menús en nuestra interface. Hasta ahora, el enfoque sobre el estilo de los menús no había sido coherente. Tenemos la oportunidad, con Vector 2022, de desarrollar un enfoque más accesible y coherente en el estilo de nuestros menús. En su forma más simple, los menús tienen dos elementos: un activador del menú y los elementos del menú. Estamos considerando el azul frente al negro (tanto para el activador del menú como para las opciones del menú), y la negrita frente a la no negrita (para el activador del menú).

1) activador azul, elementos azules

 

2) activador azul, elementos negros

 

3) activador negro, elementos azules

 

4) activador negro, elementos negros

 

Bordes y fondos

¿Deberíamos añadir bordes y fondos para ayudar a dividir las regiones de la interfaz, y si es así, cómo deberían ser? Como ya hemos mencionado en la sección de Fondo y contexto, tanto Monobook como Vector utilizan fondos y bordes para separar la interfaz del contenido. Los fondos y bordes también pueden proporcionar personalidad a la interfaz. Sin embargo, es difícil saber hasta qué punto son funcionales o necesarios. Hemos creado varias opciones con bordes y fondos progresivamente más oscuros.

1) minimalista

 

2) bordes del artículo

 

3) bordes del artículo + subrayado de la cabecera

 

4) línea de contenido + subrayado de cabecera

 

5) línea índice de contenidos + subrayado del título de la página

 

6) bordes del artículo + fondo de la cabecera (sólido)

 

7) bordes del artículo + fondo de la cabecera (degradado)

 

8) fondo del artículo exterior (degradado)

 

9) fondo del artículo exterior (sólido)

 

Sección activa en el índice

El índice de contenidos está ahora en el lado (izquierdo) del artículo, y está fijado para que permanezca visible a medida que se desplaza por la página. Una novedad es que el índice de contenidos indica qué sección del artículo está leyendo en ese momento (lo llamamos "sección activa"). Actualmente, siguiendo un patrón utilizado en las pestañas de Artículo/Conversación, la sección activa del índice es negra, y las secciones no activas son azules. Nos gusta este patrón porque es sencillo, no distrae y se utiliza en otros lugares. También podríamos utilizar un estilo adicional para indicar la sección activa.

1) minimalista

 

2) negrita

 

3) fondo

 

4) línea con borde

 

5) línea con borde (2)

 

Logo en la cabecera

Tanto Monobook como Legacy Vector presentan un logotipo cuadrado de Wikipedia con un gran globo terráqueo. Teniendo en cuenta los diversos cambios en Vector 2022, un logotipo más pequeño y rectangular en la esquina podría encajar mejor en el diseño. Sin embargo, queríamos asegurarnos de probar varias opciones. Recuerda probar estas opciones en varios tamaños de pantalla, ya que el equilibrio del diseño cambia según el tamaño de tu pantalla.

1) Logotipo rectangular izquierdo

 

2) Logotipo cuadrado a la izquierda

 

3) Logotipo cuadrado a la izquierda (degradado)

 

4) Logotipo rectangular en el centro

 

Colores de los enlaces

El World Wide Web Consortium (W3C) tiene Web Content Accessibility Guidelines. Estas directrices definen un nivel mínimo de contraste para los enlaces: "Por razones de usabilidad y accesibilidad, los enlaces deben estar subrayados por defecto. De lo contrario, el texto del enlace debe tener un contraste de al menos 3:1 con el texto del cuerpo que lo rodea, y debe presentar un indicador sin color (típicamente subrayado) al pasar el ratón y al enfocar el teclado."[1] Como no subrayamos los enlaces por defecto, nuestra elección del color del enlace debe cumplir el requisito de contraste de 3:1. Para comprobar el contraste de nuestros enlaces con nuestro cuerpo de texto podemos utilizar el contrast checker proporcionado por WebAIM.

Colores enlaces actuales
Color Contraste con el texto del cuerpo #202122 Resultado del test Enlace al resultado de la prueba
enlaces azules #0645ad 1.89:1 Error enlace a resultados
enlaces visitados #0b0080 1.01:1 Error enlace a resultados
Colores de enlace propuestos
Color Contraste con el texto del cuerpo #202122 Resultado del test Enlace al resultado del test
enlaces azules #3366cc 3:1 Pase enlace a resultados
enlaces visitados #795cb2 3.06:1 Pase enlace a resultados

Además, el color azul propuesto para los enlaces ya forma parte de la Guía de estilo de diseño de Wikimedia, y se utiliza en nuestros sitios web para móviles, así como en varios logotipos de proyectos, por lo que ganaríamos en coherencia.

Enlace al prototipo con los colores propuestos: https://di-visual-design-link-colors.web.app/Salmon

Colores actuales de los enlaces

 

Colores propuestos

 


Tamaño de fuente

La misión de nuestro movimiento es proporcionar todo el conocimiento del mundo al mayor número de personas posible. Actualmente, la mayor parte de los conocimientos que ofrecemos están en forma de texto. Las investigaciones han demostrado que los ajustes tipográficos (como el tamaño de la letra, la longitud y la altura de la línea) influyen en la experiencia de la lectura, tanto en lo que respecta a la comodidad general (es decir, la fatiga y el cansancio ocular) como a la comprensión y la retención.[2][3][4][5] Por eso es importante que utilicemos una configuración tipográfica óptima en nuestra interfaz. Un factor importante que hay que tener en cuenta a la hora de determinar lo que es óptimo para nuestros proyectos es que las personas realizan tanto una lectura en profundidad como un escaneo del texto.[6][7]

En una fase anterior del proyecto leímos estudios de investigación sobre la longitud de las líneas y llegamos a la conclusión de que entre 90 y 140 caracteres por línea es lo óptimo para nuestros proyectos (link to writeup). Recientemente hemos dedicado tiempo a leer estudios de investigación sobre el tamaño de la letra. La investigación más convincente, y directamente aplicable, que hemos encontrado hasta ahora es un estudio de 2016 que utilizó el seguimiento ocular para evaluar los efectos del tamaño de la fuente y el espacio entre líneas para las personas que leen Wikipedia:

Utilizando un diseño de medidas híbridas, se comparó la legibilidad y comprensión objetiva y subjetiva de los artículos para tamaños de letra que iban de 10 a 26 puntos, y espacios entre líneas que iban de 0,8 a 1,8 (fuente: Arial). Nuestros resultados demuestran que la legibilidad, medida a través de la duración media de la fijación, aumenta significativamente con el tamaño de la fuente. Además, las preguntas de comprensión tenían significativamente más respuestas correctas para los tamaños de letra 18 y 26. Estos resultados demuestran que los sitios web con mucho texto deben utilizar fuentes de tamaño 18 o superior y emplear un interlineado por defecto cuando el objetivo es que una página web sea fácil de leer y comprender. Nuestros resultados difieren significativamente de las recomendaciones anteriores, presumiblemente, porque este es el primer trabajo que cubre los tamaños de letra más allá de los 14 puntos.[8]

En primer lugar, tenemos que convertir la medida utilizada por los investigadores (puntos) en la medida que los navegadores acaban representando (px). La conversión es: 1px = 72pt / 96.[9][10] Así, el rango estudiado en la investigación (10-26 puntos) equivale a 13,3-34px. Su conclusión, 18 puntos, equivale a 24px.

¿Debemos aumentar el tamaño de la fuente a 24px? La investigación estudió la lectura en profundidad, sin embargo la gente suele escanear la página para encontrar una determinada información. Se trata de un comportamiento de lectura diferente, que podría beneficiarse de un tamaño de letra más pequeño que el de la lectura en profundidad. Nuestra propuesta conservadora, teniendo en cuenta el escaneo, es aumentar el tamaño de la letra a 16px para empezar. (También aumentaríamos el ancho máximo del artículo, de 960px a 1050px). Como siguiente paso, planeamos llevar a cabo nuestra propia investigación para estudiar más a fondo el tamaño de las fuentes en las wikis de Wikimedia.

[1. Bibliografía comentada de investigación sobre tipografía y legibilidad]

Enlace al prototipo con el tamaño de letra propuesto: https://di-visual-design-font-size.web.app/Hummingbird

Feedback

Referencias

  1. Accesibilidad al contraste y al color, Comprender los requisitos de contraste y color de las WCAG 2: "[1 Identificación de enlaces solo en color]".
  2. Hussain, Sohaib, Ahmed, Qasim Khan, (2011-11-01). "[Factores de legibilidad de la web que afectan a los usuarios de todas las edades]". Australian Journal of Basic and Applied Sciences, 2011, 5 (11), pp. 972 - 977.
  3. Nanavati, Bias (2005). "[La longitud óptima de las líneas en la lectura: una revisión de la literatura]". Visible Language, v39 n2 p121-145 2005.
  4. Banerjee, Majumdar, Majumdar (2011-01). "[Estudios de legibilidad, preferencia subjetiva y carga de trabajo mental en jóvenes adultos indios para la selección del tipo y tamaño de letra óptimos durante la lectura en pantalla]". Al Ameen Journal of Medical Sciences.
  5. Patterson, Tinker (1940). "Cómo hacer legible el tipo de letra; un manual para tipógrafos, impresores y publicistas, basado en doce años de investigación con pruebas de velocidad de lectura realizadas a 33.031 personas". Editorial Harper & Brothers.
  6. TeBlunthuis, Bayer, Vasileva (2019-08). "Morando en Wikipedia: investigando el tiempo que pasan los lectores de la enciclopedia global". OpenSym '19: Actas del 15º Simposio Internacional sobre Colaboración Abierta.
  7. Moran (2020-04-05). "Cómo lee la gente en línea: nuevos y viejos hallazgos". Nielsen Norman Group.
  8. Rello, Pielot, Marcos (05-2016). "[¡Que sea grande! El efecto del tamaño de la fuente y el espacio entre líneas en la legibilidad en línea]". Conferencia sobre factores humanos en sistemas informáticos.
  9. Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent".
  10. convertidor de PT a PX