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

Ми б хотіли почути ваші відгуки щодо деяких візуальних дизайнових рішень у Векторному оформленні 2022. Під візуальним дизайном ми маємо на увазі стиль тексту, кнопок, рамок, тла і відступів.

Інструкції
Будь ласка, майте на увазі:
 * 1) Для розуміння контексту перегляньте цю сторінку
 * 2) Створіть новий розділ на цій сторінці використовуючи форму нижче (її буде попередньо заповнено із запитаннями, на які треба відповісти).
 * 3) Заповніть Ваші відгуки у своєму новоствореному розділі.
 * Це прототипи; більшість функцій не працюють, і ви можете натрапити на інші баги чи вибрики.
 * «Форма нового розділу», на жаль, не сумісна з візуальним редактором (VE). Якщо ви використовуєте візуальний редактор, будь ласка, створіть новий розділ вручну і скопіюйте-вставте туди запитання відгуку (перелічені нижче).
 * Вам не треба відгукуватися по геть всьому; зосередьтеся на тому, що вас найбільше цікавить.
 * Дизайн, і особливо візуальний дизайн, може бути суб'єктивним. Звичайно, усі ми маємо право на власну думку, і ми просимо вас докласти зусиль і пояснити свою, і як вона пов'язана з нашими цілями простоти і зручності дизайну.
 * Можуть існувати гарні варіанти, яких тут немає. Не вагайтеся пропонувати щось іще, якщо ви вважаєте, що воно б спрацювало краще, ніж те, що вже є. Якщо ви розбираєтеся в дизайні і/або коді, будь ласка, не вагайтеся додати макети чи прототипи своїх ідей (це необов'язково). Файли дизайну: Figma, Sketch, Google Drawing. Прототип: GitHub.
 * Якщо ви подаєте власні ідеї, будь ласка, не редагуйте цю сторінку; додайте їх у своїй формі відгуку.
 * Ми цінуємо дизайнерів-аматорів і поважаємо дизайнерів-профі. Ми переглянемо усі відгуки й ідеї і зрештою покладатимемося на судження досвідчених дизайнерів при прийнятті фінальних рішень.
 * Якщо ви надаєте перевагу надіслати відгуки поштою, будь ласка, надішліть їх на пошту [mailto:Olga@wikimedia.org olga@wikimedia.org].

Попередній перегляд запитань для відгуку

 * 1) Меню — відкрийте прототип у новій вкладці: https://di-visual-design-menus.web.app/Brown_bear. Якій опції ви віддаєте перевагу і чому? Будь ласка, уважно перевірте меню пошуку, меню користувача, меню мови й меню інструментів.
 * 2) Рамки і тло — відкрийте прототип у новій вкладці: https://di-visual-design-borders-bgs.web.app/Zebra. Якій опції ви віддаєте перевагу і чому?
 * 3) Активний розділ у змісті — відкрийте прототип у новій вкладці: https://di-visual-design-toc-active.web.app/Otter. Якій опції ви віддаєте перевагу і чому?
 * 4) Лого в шапці — відкрийте прототип у новій вкладці: https://di-visual-design-header-logo.web.app/Panda. Якій опції ви віддаєте перевагу і чому?
 * 5) Кольори посилань — відкрийте прототип у новій вкладці: https://di-visual-design-link-colors.web.app/Salmon. Чи треба, на вашу думку, зробити якусь додаткову роботу, менш ніж ми зробимо цю зміну?
 * 6) Розмір шрифту — відкрийте прототип у новій вкладці: https://di-visual-design-font-size.web.app/Hummingbird. Чи є у вас застереження щодо пропонованого розміру шрифту?

Передумови й історія
За минулі два роки ми внесли в інтерфейс різні структурні зміни. Ми перемістили поле пошуку, перемикач мов і зміст. Ми зібрали певні посилання та інструменти у меню. Ми обмежили ширину вмісту, додали фіксовану шапку і перемістили назву сторінки над панель інструментів сторінки. Тепер, коли всі ці різні елементи розташовані в оновленому інтерфейсі, ми звернули свою увагу на загальний вигляд. Деякі вихідні питання нашої команди звучать так:
 * Як ми можемо використати візуальний дизайн для того, щоб покращити інтерфейс?
 * Чи вважаємо ми цінним, щоб в оформлення була своя особливість (як-то блакитні лінії й градієнти у старому векторі)?
 * В який момент її стає забагато, настільки, що це може почати відволікати чи зробити інтерфейс незрозумілим?
 * Що якщо ми зробимо якомога менше, і підемо супермінімалістичним шляхом, подібним до оригінального інтерфейсу Вікіпедії?

Історично наш підхід був простим і функціональним. HTML-елементи мають мінімальний стиль (якщо взагалі), що спрощує інтерфейс як для людей, які ним користуються, так і для людей, які його творять і розробляють. Це також означає, що наш візуальний дизайн доволі позачасовий. Ми не женемося за трендами і не потребуємо вносити зміни кожні кілька років. Дивлячись на знімки екрану нижче, можна побачити, як Монокнига й старий Вектор скромно використовують візуальний дизайн (здебільшого рамки й кольори тла).

Меню
У нашому інтерфейсі ми використовуємо кілька меню. Поки що наш підхід до стилю всіх меню не був послідовним. We have an opportunity, with Vector 2022, to develop a more accessible and consistent approach to the styling of our menus. In their most simple form menus have two elements: a menu trigger, and menu items. We're considering blue vs. black (for both the menu trigger, and the menu options), and bold vs. non-bold (for the menu trigger).

Link to prototype with options: https://di-visual-design-menus.web.app/Brown_bear

Borders and backgrounds
Should we add borders and backgrounds to help divide up the regions of the interface, and if so how should they look? As we mentioned in the Background and context section above, both Monobook and Vector use backgrounds and borders to separate the interface from the content. Backgrounds and borders can also add personality to the interface. However, it is difficult to know how functional or necessary they are. We've created several options with progressively more/darker borders and backgrounds.

Link to prototype with options: 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