Конспект лекції з інтенсиву «Інклюзивний вебдизайн» у школі Projector.
Є два головні способи оцінювання доступності (англ. accessibility) цифрового продукту: аудит і тестування.
Аудит не залучає кінцевих користувачів, а полягає в порівнянні дизайну з вимогами стандартів чи законів. Аудит проводять як із живим продуктом, так і з дизайн-прототипом, але пам’ятайте: у прототипі можна перевірити лише візуальні засоби доступності, які не відіграють жодної ролі для зручності незрячого користувача, але мають сенс для людей з іншими порушеннями.
Аналіз інтерфейсу «Дії» за допомогою сервісу WAVE.
Тестування, на відміну від аудиту, засноване на роботі з кінцевими користувачами — людьми з інвалідністю — та передбачає серію фасилітованих сесій сам на сам. Фасилітатор ставить перед кожним користувачем певне реалістичне завдання, слідкує за тим, як людина його виконує, ставить додаткові запитання та документує результати.
Тестування сайту «Sinoptik.ua» під час інтенсиву «Інклюзивний вебдизайн». Користувач, який майже втратив зір, демонструє свій екран і намагається зрозуміти, яка буде погода найближчими днями. До сайту застосовано режим підвищеної контрастності.
Що ж ліпше: аудит чи тестування? Обидва! Кожен метод має переваги та недоліки, які компенсуються в поєднанні. Варто зазначити, що тестування зараз дуже недооцінене та його практикують значно рідше за аудит. Дизайнери й інші ІТ-фахівці соромляться запрошувати людей з інвалідністю, бояться їх образити в ході сесії або і взагалі не знають, де їх шукати.
Сила аудиту — в системності, бо він охоплює всі сторінки й функції, а не обмежується головним сценарієм. А тестування перевіряє цифровий продукт у природному середовищі: користувач самостійно вирішує, яким шляхом іти до мети, і часто обирає зовсім не той «ідеальний» шлях, який закладав у продукт дизайнер.
Аудит покладається на стандарти, які ніколи не бувають ідеальними, а тестування допомагає зрозуміти, як люди поводяться насправді. Формальна відповідність стандартам захищає компанію від судових позовів у країнах із жорстким законодавством, але не гарантує високої зручності користування для людей.
Що ж, ми з’ясували відмінності між аудитом і тестуванням, але є ще один популярний метод, з яким плутають тестування доступності. Порівняймо ж їх.
До речі, раптом ви шукали, ось дбайливо скомпоновані шаблони для юзабіліті-тестування англійською та українською мовами.
Отже, ми з’ясували, що для тестування доступності треба залучати людей з інвалідністю. І хоча цей метод фокусує увагу на вебдоступності, це не заважає дослідникові знайти на додачу ще низку юзабіліті-проблем.
У світі існує низка типів неспроможностей, і, мабуть, саме так варто перекладати англійський термін «disability», хоча в українській літературі часто звучить слово «інвалідність». У деяких ситуаціях це справді те, що ми звемо інвалідністю, тобто постійний діагностований лікарем стан людини. Але згідно з ВООЗ, неспроможності також бувають тимчасові (наприклад, перелом вказівного пальця) та ситуативні (скажімо, отримані через гучну музику в приміщенні чи важкі сумки в обох руках). Залежно від впливу на органи чуття і системи організму неспроможності поділяють на візуальні, аудіальні, когнітивні, фізичні тощо.
Інтернет і цифрові технології — це переважно інформація на екранах, отже, сприйняття покладається передусім на зір. Звідси доходимо логічного висновку, що найвразливіша аудиторія для будь-якого цифрового продукту — це незрячі люди. Вивчення проблем незрячих користувачів допоможе виявити до 80% всіх можливих проблем із вебдоступністю.
Хоча у професійній спільноті ніколи не закінчуються дебати, кого варто запрошувати для тестування, є три категорії людей, з якими ви навряд помилитеся, особливо якщо хочете протестувати доступність уперше.
Знайти людей з інвалідністю не так важко, як здається, і часто вони більш охоче погоджуються на сесію тестування, ніж люди без інвалідності. Є три джерела, де можна знайти потрібних користувачів.
Люди з інвалідністю, безперечно, зацікавлені в тому, щоб інтернет ставав зручнішим та інклюзивнішим, але вони витрачають на тестування свій час. У виняткових ситуаціях люди готові допомогти безплатно, але найчастіше участь треба оплатити. Якщо люди є учасниками соціального підприємства чи працюють через спеціалізовану платформу, там зазвичай діє стандартна погодинна ставка. Якщо ні — ви можете домовитися про справедливий гонорар індивідуально.
Куратори курсу «Інклюзивний вебдизайн» Слава Шестопалов і Женя Шикірявий залюбки сконтактують вас із потрібними людьми і проконсультують щодо тестування.
Якщо проаналізувати обидва формати, то виходить, що віддалене тестування має більше переваг, ніж очне.
Переваги онлайн-тестування:
Особливості офлайн-тестування
Офлайн-тестування допомагає бачити не лише екран людини, але і її емоційну реакцію на все, що відбувається. Крім того, ви витратите менше часу, щоб тестувальник налаштував демонстрацію екрану та відео. А ще офлайн-сесія навряд може буде зіпсована через низьку якість онлайн-зв’язку, коли хтось раптово «відвалиться» або чутиме аудіоперешкоди.
Як уже згадано вище, інструментів для віддаленого тестування багато. Вони всі підтримують відео та демонстрацію екрану, а деякі навіть роблять автоматичну транскрипцію розмови й дають змогу робити нотатки у процесі тестування. Майже всі спеціалізовані програми платні та потребують налаштування.
Тестування доступності на курсі «Інклюзивний вебдизайн» в Українському католицькому університеті. Студентка проводить мініінтерв’ю з незрячим користувачем через Skype перед тим, як почати власне тестування цифрового продукту.
Проте можна проводити успішні сесії (особливо вперше) і за допомогою звичних програм для відеоконференцій: Skype, Zoom, Google Meet, Microsoft Teams. У них теж є функції демонстрації екрану та відеозапису, а для нотаток згодяться старі добрі блокнот і ручка. Але головна перевага цих неспеціалізованих програм у тому, що користувачі імовірно ними добре володіють і використовують для спілкування з колегами чи родичами. Отже, ви зекономите час на початку сесії, поки людина з інвалідністю зрозуміє, як увімкнути демонстрацію та відео. Тому серед усіх можливих інструментів краще надати перевагу не тому, який подобається дослідникові, а тому, яким найліпше володіє кожен тестувальник.
На відміну від юзабіліті-тестування, тестування доступності зазвичай потребує більше підготовки та довшої вступної частини. Наприклад, незрячі люди налаштовують відео довше, ніж зрячі користувачі, і це варто враховувати у тривалості сесії.
На відміну від юзабіліті-тестування, тестування доступності передбачає, що ви маєте робочий продукт, а не лише макети чи дизайн-прототипи з перелінкованими картинками. У живому продукті необмежені функції та справжній контент, і ви зможете формулювати практичніші завдання для тестування.
Найкраще завдання — це реалістичне завдання, тобто таке, яке б могло спасти на думку людині й без вашого втручання. Люди майже ніколи не мислять функціями інтерфейсу: користувач хоче орендувати дешеву квартиру, а не застосувати фільтрування за ціною, або, скажімо, позбутися головного болю, а не додати таблетки у кошик.
Рекомендовано: широкі реалістичні завдання
Варто уникати: дрібні завдання з підказками
Коли ви даєте простір для вибору, то бачите, як людина мислить насправді і чи дизайн, який очевидний для вас, так само зрозумілий для неї. Часта помилка під час тестування — це дрібні завдання. Може, користувач не помітив би чогось без підказки і пішов би іншим шляхом, але ви цього вже не дізнаєтеся.
Типові помилки у формулюваннях
Коректно складені завдання та запитання забезпечують половину успіху сесії. Якщо ви надто сильно вплинете на поведінку людини, це спотворить результати і, скажімо, ви переконаєтеся, що якась функція працює добре, хоча насправді самі людину до неї підштовхнули.
Між іншим, ось тут описано 12 хибних типів запитань, що зашкодять вашому дослідженню, а також як їх переформулювати (англійською мовою).
У розділі 1.2 було посилання на шаблони для юзабіліті-тестування, які з мінімальними змінами пасують також і до тестування доступності. Можете переглянути їх детально пізніше, а поки розглянемо загальну схему.
Немає жодного особливого способу звертатися до учасників тестування. Найліпше кликати їх на ім’я, як і будь-яких інших співрозмовників. Перш за все, перед вами людина: Дмитро, Ганна, Василь чи, наприклад, Вікторія. Інвалідність суттєво впливає на життя, але аж ніяк не визначає характер того, хто перед вами.
Якщо потрібно описати людей з інвалідністю в документації, вживайте слова, які чітко описують стан здоров’я, але не принижують гідності та не пришпилюють ярлики. Не потрібно вигадувати, «на якій козі під’їхати» до людини чи який евфемізм вжити, щоби завуалювати правду життя.
Образливо:
Рекомендовано:
Вебдоступність — ціла наука, в якій люди практикуються та вчаться роками, але почати можна з двох найважливіших тем: як працюють екранні читачі та навігація за допомогою клавіатури. Без їхнього розуміння ви ризикуєте провести сесію з незрячою людиною недолуго та малоефективно.
Екранні читачі — це програми, які конвертують інформацію, що показана на екрані, у мовлення, яке незряча чи слабозора людина чує через навушники або динаміки. Екранний читач бере інформацію з вихідного коду сайту та орієнтується на структуру HTML, ігноруючи код, який описує декоративні елементи, наприклад, тінь, заливку фону чи контури блоків. Якщо код сайту написано коректно, то скрінрідер буде впізнавати тип інтерактивних елементів і додавати корисні підказки.
Руслан, незрячий програміст і просвітник у сфері інклюзивного дизайну, демонструє роботу екранного читача NVDA. Ліворуч — сайт, а праворуч — текст, який йому зачитує допоміжна технологія.
Наприклад, якщо на сайті є кнопка «Купити», зрячий користувач упізнає її за прямокутною формою та яскравим кольором і здогадається, що її треба натиснути, щоби придбати товар. А для незрячої людини слова «Купити» забракне. Бо це може бути і кнопка, і заголовок сторінки, і назва розділу, і частина рекламного банера. Але якщо в HTML-коді кнопку оформлено за допомогою відповідного тегу <button>, екранний читач озвучить не лише слово «Купити», але і дасть підказку на зразок: «Кнопка, натисніть Enter, щоб активувати». Подібні підказки будуть і до чекбоксів, і радіокнопок (перемикачі — ред.), і полів введення тексту, і випадайок. Елементи, які зряча людина розрізняє візуально, незрячим людям треба озвучувати.
Проблема багатьох сайтів — недбало написаний код; у такому разі незряча людина має здогадуватися, що який напис означає, а деякі елементи не помітить узагалі. Якщо дизайнер і веброзробник не подбали про зручну структуру HTML, коректні теги для елементів, а також спеціальні підказки для екранних читачів (ARIA), сайт стає недоступним для частини аудиторії.
Зразок шкідливої дизайн-практики — це ставити посилання «Читати більше…» (англ. «Read more…»). Для незрячої людини фраза «Читати більше…» буде відірваною від заголовка, і буде незрозуміло, яка саме стаття відкриється після натискання.
Перед тестуванням потрібно обов’язково ознайомитися з принципом роботи скрінрідера, а також спробувати його на своєму пристрої (оптимально, на смартфоні). Звісно, це лише віддалено подібне до того, як екранним читачем послуговуються люди з інвалідністю, але дасть яскравіше уявлення, ніж якщо почитати про це у статті.
Стандартні вбудовані читачі, які є в усіх відомих операційних системах, і які можна увімкнути в налаштуваннях у розділі «Доступність» (англ. Accessibility):
Сторонні професійні читачі, які треба встановлювати на пристрій і налаштовувати окремо. Незрячі люди часто мають портативну версію свого скрінрідера на флешці та не витрачають час на налаштування програми з нуля на чужому комп’ютері. Ось два найпопулярніші екранні читачі для Windows:
Трапляються курйозні випадки, коли незряча людина сидить біля під’їзду і переписується з друзями на смартфоні, слухаючи через навушники голос екранного читача. А сусіди, які проходять повз, інколи думають, що людина несповна розуму, бо тицяє пальцем у вимкнений екран. А ви ж тепер розумієте, що насправді відбувається?
Ми вже з’ясували, що екранні читачі покладаються на HTML-розмітку сторінки і не зачитують те ж саме, що бачать на екрані зрячі користувачі. Крім того, люди із зором у межах медичної норми можуть швидко просканувати сторінку поглядом і перескочити з одного місця на інше за допомогою мишки. А от люди з порушеннями зору зосереджені лише на одному елементі одночасно — кнопці, текстовому полі чи заголовку — і не можуть просто пропустити шматок контенту.
Відповідно, коли виникає потреба щось пояснити користувачеві скрінрідера, деякі поняття просто не мають сенсу. От ви, наприклад, почали фасилітувати сесію через Skype, а хтось із тестувальників не може знайти, як увімкнути демонстрацію екрану. Поради на зразок «там унизу по центру є кругла кнопка з іконкою комп’ютера» допоможуть як мертвому кадило.
Недоречні підказки
Корисні підказки
Коли людина не бачить екран, то існує лише чотири варіанти руху — вперед, назад, на рівень вище за ієрархією та на рівень нижче за ієрархією. Також, багато скрінрідерів мають клавіатурні скорочення, аби, наприклад, швидко перемикатися між всіма кнопками на сторінці чи перестрибнути до навігації. Але це працює за умови коректно скомпонованого сайту чи застосунку.
Коли сесії відбулися, треба якнайшвидше впорядкувати і розтлумачити зібрану інформацію, поки вона свіжа, і ось як це зробити.
Відфільтрувати «сигнал» від «шуму»
Не все, що каже вам користувач, варто сприймати за чисту монету. Люди інколи говорять неправду з добрих міркувань, наприклад, щоб не образити вас як творця дизайну. Або інколи вони вмикають «режим художника» і висловлюють забаганки, які їм суб’єктивно здаються корисними, але в реальному житті не знадобляться.
Аби відсіяти ненадійну інформацію, уважно спостерігайте за діями. Якщо людина не може знайти щось на сайті вже третю хвилину, це вагоміший аргумент, ніж коли людина швидко все знайшла і каже: «Мені здається, що ця кнопка далеко розміщена». Обіцянки у стилі «я би користувався чимось» менш точні, ніж розповідь людини про справжню ситуацію в минулому, коли подібна функція допомогла досягти мети.
Об’єднати подібне
Коли ви випишете в документ усі відфільтровані проблеми, радше за все виявиться, що їх так багато, що команда все не виправить одним махом. Крім того, після сесій буває складно визначити, на чому сконцентруватися спочатку, а що відкласти на потім. Тож варто об’єднати або позначити тегами схожі скарги та ідеї користувачів. Чи є проблеми, які стосуються того самого модуля чи функції? Скільки проблем зачіпають один і той же аспект доступності (наприклад, альтернативний текст до картинок, загальна навігація)? Може, є знахідки, які стосуються того самого сценарію (приміром, купівлі, фільтрації, режиму порівняння)
Пріоритезувати
Як зрозуміти, що якісь проблеми більш серйозні за інші? Не так складно, як здається. Ось дві майже безпрограшні ознаки.
І порада наостанок: у тестуванні доступності необхідно звертати увагу на ширший контекст, ніж цифровий продукт. На загальний успіх сервісу впливає не лише сайт чи застосунок, а й бізнес-модель і бізнес-процеси. Наприклад, якщо не передбачено жодних альтернатив скануванню QR-коду для підтвердження реєстрації, сервіс буде дискримінувати незрячих людей. Або якщо єдиний спосіб підтвердити замовлення — це телефонний дзвінок оператора, сервіс виявиться недоступним для клієнтів із порушенням слуху.
Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.
Користувацький досвід для всіх і кожного особисто
Ліки від нудних дзвінків
Неоморфізм: український внесок у світовий UI-дизайн
Як ставити цілі та досягати їх
Шпаргалка: перевірте, чи не використовуєте ви російські шрифти у своїй роботі
Киньте 10 гривень: як закривати збори з невеликою аудиторією в соцмережах