Reading/Web/Desktop Improvements/Fifth prototype testing/es

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
Por favor, ten en cuenta:
 * 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.
 * 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 [mailto:Olga@wikimedia.org 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).

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ú).

Enlace a los prototipos: https://di-visual-design-menus.web.app/Brown_bear

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.

Enlace a los prototipos: https://di-visual-design-borders-bgs.web.app/Zebra

Active section in the table of contents
The table of contents is now on the (left) side of the article, and is fixed in place so it remains visible as you scroll down the page. A new feature is that the table of contents indicates which section of the article you are currently reading (we call this the "active section"). Currently, following from a pattern used on the Article/Talk tabs, the active section in the table of contents is black, and the non-active sections are blue. We like this pattern because it is simple, not distracting, and used elsewhere. We could also use additional styling to indicate the active section.

Link to prototype with options: https://di-visual-design-toc-active.web.app/Otter

Logo in the header
Monobook and Legacy Vector both feature a square Wikipedia logo with a large globe. Given the various changes to Vector 2022 a smaller, rectangular logo in the corner may fit the layout better. However, we wanted to make sure to try various options. Please remember to try these options at various screen sizes, as the balance of the layout shifts depending on your screen size.

Link to prototype with options: https://di-visual-design-header-logo.web.app/Panda

Link colors
The World Wide Web Consortium (W3C) have Web Content Accessibility Guidelines. These guidelines define a minimum contrast level for links: "For usability and accessibility, links should be underlined by default. Otherwise, link text must have at least 3:1 contrast with surrounding body text, and must present a non-color indicator (typically underline) on mouse hover and keyboard focus." Since we do not underline links by default, our link color choice must meet the 3:1 contrast requirement. In order to check the contrast of our links with our body text we can use the contrast checker provided by WebAIM.

Additionally, the proposed blue link color is already part of the Wikimedia Design Style Guide, and is used on our mobile websites as well as in various project logos, so we would be gaining consistency.

Link to prototype with proposed colors: https://di-visual-design-link-colors.web.app/Salmon

Font size
The mission of our movement is to provide all of the world's knowledge to as many people as possible. Currently the majority of the knowledge we offer is in the form of text. Research has shown that typographic settings (such as font size, line length, and line height) influence the experience of reading, both in terms of general comfort (i.e. eye strain and fatigue), and comprehension and retention. Therefore it is important for us to use optimal typographic settings in our interface. An important factor to keep in mind when determining what is optimal for our projects is that people engage both in in-depth reading, as well as scanning of text.

In a previous phase of the project we read research studies regarding the line length and concluded that between 90–140 characters per line is optimal for our projects (link to writeup). Recently we have spent time reading research studies about font size. The most convincing, and directly applicable, research we have found thus far is a 2016 study that used eye-tracking to evaluate the affects of font size and line spacing for people reading Wikipedia:

Using a hybrid-measures design, we compared objective and subjective readability and comprehension of the articles for font sizes ranging from 10 to 26 points, and line spacings ranging from 0.8 to 1.8 (font: Arial). Our findings provide evidence that readability, measured via mean fixation duration, increased significantly with font size. Further, comprehension questions had significantly more correct responses for font sizes 18 and 26. These findings provide evidence that text-heavy websites should use fonts of size 18 or larger and use default line spacing when the goal is to make a web page easy to read and comprehend. Our results significantly differ from previous recommendations, presumably, because this is the first work to cover font sizes beyond 14 points.

Firstly, we need to convert the measure used by the researchers (points) into the measure that browsers ultimately render (px). The conversion is: 1px = 72pt / 96. So the range studied in the research (10–26 points) is equivalent to 13.3–34px. Their conclusion, 18 points, is equal to 24px.

''' So should we increase the font size to 24px? ''' The research studied in-depth reading, however people often scan the page in order to find a certain piece of information. This is a different reading behavior, that arguably benefits from a smaller font size than in-depth reading does. Our conservative proposal, taking into account scanning, is to increase the font size to 16px to begin with. (We would be increasing the maximum width of the article as well, from 960px to 1050px.) As a next step, we will plan to conduct our own research to further study font size on Wikimedia wikis.

Annotated bibliography of typography and readability research

Link to prototype with proposed font size: https://di-visual-design-font-size.web.app/Hummingbird