MediaWiki

Читання/Веб/Стаціонарні покращення/П'яте випробування прототипу

< Reading‎ | Web‎ | Desktop Improvements
This page is a translated version of the page Reading/Web/Desktop Improvements/Fifth prototype testing and the translation is 87% complete.
Outdated translations are marked like this.
Languages:

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

Інструкції

  1. Для розуміння контексту перегляньте цю сторінку
  2. Створіть новий розділ на цій сторінці використовуючи форму нижче (її буде попередньо заповнено із запитаннями, на які треба відповісти).
  3. Заповніть Ваші відгуки у своєму новоствореному розділі.

Будь ласка, майте на увазі:

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

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

  1. Меню — відкрийте прототип у новій вкладці: https://di-visual-design-menus.web.app/%D0%92%D0%B5%D0%B4%D0%BC%D0%B5%D0%B4%D0%B5%D0%B2%D1%96?uk Якій опції ви віддаєте перевагу і чому? Будь ласка, уважно перевірте меню пошуку, меню користувача, меню мови й меню інструментів.
  2. Рамки і тло — відкрийте прототип у новій вкладці: https://di-visual-design-borders-bgs.web.app/%D0%9F%D1%82%D0%B0%D1%85%D0%B8?uk Якій опції ви віддаєте перевагу і чому?
  3. Активний розділ у змісті — відкрийте прототип у новій вкладці: https://di-visual-design-toc-active.web.app/%D0%A2%D0%B8%D0%B3%D1%80?uk Якій опції ви віддаєте перевагу і чому?
  4. Лого в шапці — відкрийте прототип у новій вкладці: https://di-visual-design-header-logo.web.app/%D0%90%D0%BB%D1%8C%D0%B1%D0%B0%D1%82%D1%80%D0%BE%D1%81%D0%BE%D0%B2%D1%96?uk Якій опції ви віддаєте перевагу і чому?
  5. Кольори посилань — відкрийте прототип у новій вкладці: https://di-visual-design-link-colors.web.app/%D0%9C%D0%BE%D0%BB%D1%8E%D1%81%D0%BA%D0%B8?uk Чи треба, на вашу думку, зробити якусь додаткову роботу, менш ніж ми зробимо цю зміну?
  6. Розмір шрифту — відкрийте прототип у новій вкладці: https://di-visual-design-font-size.web.app/%D0%9F%D1%82%D0%B0%D1%85%D0%B8?uk Чи є у вас застереження щодо пропонованого розміру шрифту?

Передумови й історія

За минулі два роки ми внесли в інтерфейс різні структурні зміни. Ми перемістили поле пошуку, перемикач мов і зміст. Ми зібрали певні посилання та інструменти у меню. Ми обмежили ширину вмісту, додали фіксовану шапку і перемістили назву сторінки над панель інструментів сторінки. Тепер, коли всі ці різні елементи розташовані в оновленому інтерфейсі, ми звернули свою увагу на загальний вигляд. Деякі вихідні питання нашої команди звучать так:

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

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

Порівняння інтерфейсів
 
Скріншот Вікіпедії гінді в оформленні Монокнига
 
Скріншот японської Вікіпедії в оформленні старого Вектора

Розглянуті зміни

Меню

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

Посилання на прототип з варіантами: https://di-visual-design-menus.web.app/%D0%92%D0%B5%D0%B4%D0%BC%D0%B5%D0%B4%D0%B5%D0%B2%D1%96?uk

1) синя кнопка, сині елементи

 

2) синя кнопка, чорні елементи

 

3) чорна кнопка, сині елементи

 

4) чорна кнопка, чорні елементи

 

Рамки й тло

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

Посилання на прототип з варіантами: https://di-visual-design-borders-bgs.web.app/%D0%9F%D1%82%D0%B0%D1%85%D0%B8?uk

1) мінімалістично

 

2) рамка статті

 

3) рамка статті + підкреслена шапка

 

4) лінія змісту + підкреслена шапка

 

5) лінія змісту + підкреслена назва статті

 

6) рамка статті + тло шапки (суцільне)

 

7) рамка статті + тло шапки (градієнт)

 

8) тло простору поза статтею (градієнт)

 

9) тло простору поза статтею (суцільне)

 

Активний розділ у змісті сторінки

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

Посилання на прототип з варіантами: https://di-visual-design-toc-active.web.app/%D0%A2%D0%B8%D0%B3%D1%80?uk

1) мінімалістично

 

2) жирний

 

3) тло

 

4) лінія з рамкою

 

5) лінія з рамкою (2)

 

Логотип у шапці

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

Посилання на прототип з варіантами: https://di-visual-design-header-logo.web.app/%D0%90%D0%BB%D1%8C%D0%B1%D0%B0%D1%82%D1%80%D0%BE%D1%81%D0%BE%D0%B2%D1%96?uk

1) прямокутне лого ліворуч

 

2) квадратне лого ліворуч

 

3) квадратне лого ліворуч (градієнт)

 

1) прямокутне лого по центру

 

Кольори посилань

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

Поточні кольори посилань
Колір Контраст з тілом тексту #202122 Результат тесту Посилання на результат тесту
сині посилання #0645ad 1,89:1 ❌ Провал посилання на результати
відвідані посилання #0b0080 1,01:1 ❌ Провал посилання на результати
Пропоновані кольори посилань
Колір Контраст з тілом тексту #202122 Результат тесту Посилання на результат тесту
сині посилання #3366cc 3:1 ✅ Успіх посилання на результати
відвідані посилання #795cb2 3,06:1 ✅ Успіх посилання на результати

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

Посилання на прототип з пропонованими кольорами: https://di-visual-design-link-colors.web.app/%D0%9C%D0%BE%D0%BB%D1%8E%D1%81%D0%BA%D0%B8?uk

Поточні кольори посилань

 

Пропоновані кольори посилань

 


Розмір шрифту

Місія нашого руху в тому, щоб надавати усі знання світу якомога більшій кількості людей. Наразі більшість знань, які ми пропонуємо, існують у формі тексту. Дослідження показують, що типографічні налаштування (такі як розмір шрифту, довжина рядків і висота рядків) впливають на якість читання, як в плані загального комфорту (тобто напруження і втоми очей), так і розуміння й утримання.[2][3][4][5] Тому для нас важливо використовувати в нашому інтерфейсі оптимальні типографічні налаштування. Важливим фактором, на який необхідно зважати при визначенні того, що є оптимальним, є те, що люди займаються різним читанням наших проєктів — як уважним, так і побіжним.[6][7]

На попередньому етапі проєкту ми читали дослідження науковців щодо довжини рядків і визначили, що для наших проєктів оптимальними є 90—140 символів на рядок (посилання на докладне пояснення). Останнім часом ми займалися вивченням досліджень щодо розміру шрифту. Найбільш переконливим і прямо застосовним дослідженням із тих, які ми знайшли, є дослідження 2016 року, яке використовувало стеження за рухом очей для оцінки впливу розміру шрифту і проміжку між рядками на людей, які читають Вікіпедію:

Використовуючи метод гібридних вимірювань, ми порівняли об'єктивну й суб'єктивну зручність читання й розуміння статей за розмірів шрифту від 10 до 26 одиниць і проміжків між рядками від 0,8 до 1,8 (шрифт: Arial). Наші результати доводять, що зручність читання, виміряна через середню тривалість фіксації, значно зростає з розміром шрифту. Далі, питання на розуміння отримали значно більшу кількість правильних відповідей для 18 і 26 розмірів шрифту. Ці результати доводять, що вебсайти зі значними обсягами тексту мають використовувати 18 чи більший розмір шрифту та проміжки між рядками за замовчуванням, якщо ціллю є легка для читання й розуміння вебсторінка. Наші результати значно відрізняються від попередніх рекомендацій, ймовірно, через те, що це перша робота, в якій вивчаються розміри шрифту більші ніж 14 пунктів.[8]

Перш за все, нам треба перевести розміри, які використовують дослідники (пункти) у розмір, який зрештою виводять браузери (пкс). Формула виглядає так: 1px = 72pt / 96.[9][10] Отже діапазон, розглянутий у дослідженні (10—26 пунктів) відповідає 13,3—34 px. Їхній висновок, 18 пунктів, дорівнює 24 px.

Тож чи не треба нам збільшити розмір шрифту до 24 px? Дослідження вивчало уважне читання, однак люди часто поверхово сканують сторінку, щоб знайти потрібний шматок інформації. Це інша читацька поведінка, для якої, можливо, зручнішим є менший розмір шрифту, ніж той, що годиться для уважного читання. Наша консервативна пропозиція, що бере до уваги поверхове сканування тексту, збільшити для початку розмір шрифту до 16 px. (Ми також розширили б максимальну ширину сторінки, з 960 px до 1050 px.) Наступним кроком ми плануємо провести власне дослідження для подальшого вивчення розміру шрифту у вікі Вікімедіа.

Анотована бібліографія досліджень типографії та зручності читання

Посилання на прототип з пропонованим розміром шрифту: https://di-visual-design-font-size.web.app/%D0%9F%D1%82%D0%B0%D1%85%D0%B8?uk

Feedback

Примітки

  1. ↑ Контраст і кольорова доступність, Розуміння вимог WCAG 2 до контрасту й кольору: «Ідентифікація посилань лише кольором».
  2. ↑ Hussain, Sohaib, Ahmed, Qasim Khan, (2011-11-01). "Web readability factors affecting users of all ages". Australian Journal of Basic and Applied Sciences, 2011, 5 (11), pp. 972 - 977.
  3. ↑ Nanavati, Bias (2005). "Optimal Line Length in Reading--A Literature Review". Visible Language, v39 n2 p121-145 2005.
  4. ↑ Banerjee, Majumdar, Majumdar (2011-01). "Readability, Subjective Preference and Mental Workload Studies on Young Indian Adults for Selection of Optimum Font Type and Size during Onscreen Reading". Al Ameen Journal of Medical Sciences.
  5. ↑ Patterson, Tinker (1940). "How to make type readable; a manual for typographers, printers and advertisers, based on twelve years of research involving speed of reading tests given to 33,031 persons". Harper & Brothers Publishers.
  6. ↑ TeBlunthuis, Bayer, Vasileva (2019-08). "Dwelling on Wikipedia: investigating time spent by global encyclopedia readers". OpenSym '19: Proceedings of the 15th International Symposium on Open Collaboration.
  7. ↑ Moran (2020-04-05). "How People Read Online: New and Old Findings". Nielsen Norman Group.
  8. ↑ Rello, Pielot, Marcos (05-2016). "Make It Big! The Effect of Font Size and Line Spacing on Online Readability". Conference on Human Factors in Computing Systems.
  9. ↑ Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent"
  10. ↑ Конвертер PT → PX
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Fifth_prototype_testing/uk&oldid=6403723"