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-елементи мають мінімальний стиль (якщо взагалі), що спрощує інтерфейс як для людей, які ним користуються, так і для людей, які його творять і розробляють. Це також означає, що наш візуальний дизайн доволі позачасовий. Ми не женемося за трендами і не потребуємо вносити зміни кожні кілька років. Дивлячись на знімки екрану нижче, можна побачити, як Монокнига й старий Вектор скромно використовують візуальний дизайн (здебільшого рамки й кольори тла).

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

Посилання на прототип з варіантами: https://di-visual-design-menus.web.app/Brown_bear

Рамки й тло
Чи треба нам додати рамок і заливки, щоб розділяти частини інтерфейсу, і якщо так, то як вони мають виглядати? Як ми вже згадували у розділі «Передумови й історія» вище, і Монокнига, й Вектор використовують заливки й рамки, щоб відділяти інтерфейс від вмісту. Тло і рамки також можуть додавати інтерфейсові індивідуальності. Однак важко визначити, настільки вони функціональні чи необхідні. Ми створили кілька варіацій з прогресивно більшими/темнішими рамками і заливками.

Посилання на прототип з варіантами: https://di-visual-design-borders-bgs.web.app/Zebra

Активний розділ у змісті сторінки
Зміст тепер (зліва) збоку від статті і зафіксований на місці, тож залишається видимим, коли ви прокручуєте сторінку вниз. Нова функція: зміст вказує, який розділ статті ви зараз читаєте (ми називаємо це «активним розділом»). Наразі, подібно до того, як працюють вкладки Стаття/Обговорення, активний розділ у змісті чорний, а неактивні розділи сині. Нам подобається така схема, бо вона проста, не відволікає, і використовується в інших місцях. Ми також могли б використовувати додатковий стиль для вказівки на активний розділ.

Посилання на прототип з варіантами: https://di-visual-design-toc-active.web.app/Otter

Логотип у шапці
Монокнига й старий Вектор обидва мають квадратне лого Вікіпедії з великою кулею. Зважаючи на різні зміни у Векторі 2022, прямокутне лого в кутку може краще пасувати його макетові. Однак ми таки хочемо перепробувати різні варіанти. Не забудьте, будь ласка, спробувати ці варіанти з різним розміром екрану, оскільки баланс макету, залежно від розміру вашого екрану, змінюється.

Посилання на прототип з варіантами: https://di-visual-design-header-logo.web.app/Panda

Кольори посилань
World Wide Web Consortium (W3C) має Настанови щодо доступності вебконтенту. Ці настанови визначають мінімальний рівень контрасту для посилань: «Для зручності й доступності посилання мають бути за замовчуванням підресленими. В іншому разі, текст посилання має мати контраст із навколишнім текстом щонайменше 3:1 і мусить мати неколірний індикатор (зазвичай підкреслення) при наведенні вказівником мишею чи клавіатурному фокусі». Оскільки ми не підкреслюємо посилання за замовчуванням, наш вибір кольору мусить відповідати вимозі контрасту 3:1. Щоб перевірити контрастність наших посилань з тілом текстом, ми можемо скористатися перевіркою контрасту від WebAIM.

Окрім цього, пропонований синій колір посилань уже входить до Посібника стилю дизайну Вікімедіа і використовується у мобільній версії сайтів, а також в логотипах різних проєктів, тож це додасть нам послідовності.

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

Розмір шрифту
Місія нашого руху в тому, щоб надавати усі знання світу якомога більшій кількості людей. Наразі більшість знань, які ми пропонуємо, існують у формі тексту. Дослідження показують, що типографічні налаштування (такі як розмір шрифту, довжина рядків і висота рядків) впливають на якість читання, як в плані загального комфорту (тобто напруження і втоми очей), так і розуміння й утримання. 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