Прототипування та дизайн: огляд онлайн курсу

Курс «Прототипування та дизайн» Міннесотського університету пропонує серію навчальних відео, які допоможуть зрозуміти, як розробляти інтерфейси для вирішення проблем користувачів. 

Він розрахований на 4 тижні і один з тижнів повністю присвячений універсальному дизайну та доступності веб-простору.

Ділимось з вами основними знахідками блоку «Універсальний дизайн та доступність», який складається з 9 відео:

• Вступ до універсального дизайну (29 хвилин)
• Універсальний дизайн: Сенсорні порушення (40 хвилин)
• Універсальний дизайн: Когнітивні порушенні (12 хвилин)
• Універсальний дизайн: Фізичні порушення (15 хвилин)
• Універсальний дизайн: Стандарти та інструменти (28 хвилин)
• Дизайн для людей старшого віку (інтерв’ю з Анною Марією Пайпер – 10 хвилин)
• Дизайн для дітей
• Дизайн та соціо-економічні відмінності (18 хвилин)
• Самодопомога для осіб з низькою грамотністю (інтерв’ю з Апалою Чаван - 25 хвилин)

Вступ до універсального дизайну

Спікери:

• Джозеф А. Констан, професор комп'ютерних наук і техніки університету МакНайт та Міннесотського університету,
• Філ Крагнес, cпеціаліст з допоміжних технологій в Міннесотському університеті.

Більшість людей вважає, що зробити веб-простір доступним для людини з інвалідністю – це створити спеціальну адаптовану версію. Але якщо дизайн розробляється з урахуванням принципів універсального дизайну, то створювати адаптовані версії немає потреби.

З юридичної точки зору різні країни мають різне законодавство стосовно доступності веб-простору. Та з моральної точки зору, так само як і фізичний простір, веб-простір має бути доступним для всіх. Цікаво, що часто дизайн, доступний для людей з інвалідністю, стає зручним для більшості людей. Ось декілька прикладів.

В багатьох країнах сьогодні бордюри на пішохідних переходах знижені. Так було не завжди. Але зараз вони використовуються не тільки людьми інвалідністю, а й велосипедистами, батьками з візочками, тощо.

Інший приклад – текстові субтитри. Вони роблять відео-контент доступним для людей з порушеннями слуху та субтитри також використовують люди, які вивчають іноземну мову або переглядають відео в місці, де не можна увімкнути звук і читати зміст стає дуже зручним.

В екстрених ситуаціях сповіщення про небезпеку включає не тільки голосний звук, а ще яскраве світло. Це дозволяє привернути увагу, наприклад, людей в навушниках.

Інші приклади того, як дизайн для окремих категорій людей став комфортним для всіх наводимо далі. 

Сенсорні порушення (порушення зору та слуху)

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

Когнітивні порушення

Напевно, багато хто чув про поняття «складнощі з навчанням». На жаль, це часто прирівнюють до низького IQ, тоді як складнощі з навчанням - це труднощі отримання, зберігання та пошуку інформації. Для того, щоб полегшити роботу з інформацією її важливо подавати в простій формі, як, наприклад, замість довгого речення з комами та перерахуванням використати перелік пунктів у стовпчик. Це допоможе швидко отримувати інформацію всім. Щодо зберігання інформації – необхідно її робити різноманітною, бо так її легше запам’ятовувати. 

Маломобільність

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

Висновки

Основна мета застосування принципів універсального дизайну - покращити користувацький досвід для всіх людей. Деякі з рекомендацій щодо доступності, що будуть розглянуті є комерційними інструментами та стандартами юзабіліті для різних платформ (наприклад, Android, або iOS). Важливим є усвідомлення того, що мова йде про комфортне використання веб-простору для кожного_ї, а не для окремої категорії людей.

 

Універсальний дизайн: сенсорні порушення (порушення слуху і зору)

Спікери:

·         Джозеф А. Констан, професор комп'ютерних наук і техніки університету МакНайт та Міннесотського університету,

·         Філ Крагнес, cпеціаліст з допоміжних технологій в Міннесотському університеті.

 

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

Візуальний контент. Якщо ви надаєте візуальний матеріал без альтернативного способу сприйняття, деякі люди не зможуть отримати цю інформацію. Люди з порушеннями зору використовують програми екранного доступу, так звані “екранні читачі” або “скрін рідери”, що зчитують лише текстову інформацію з екрану. Вони конвертують текст у звукову мову.

Тому важливо, щоб до всіх зображень та відео був текст заміщення або альтернативний текст (атрибут alt тегу image). Цей опис повинен бути дуже лаконічний. Наприклад, текст заміщення для логотипу  - це просто назва компанії. Але для піктограм та кнопок текст заміщення повинен пояснювати функцію елемента (не просто "кнопка" чи "іконка", а їх дія). Варто зазначити, що тексти заміщення можуть бути у нагоді тим, хто використовує голосові помічники (Google Assistant для Android, Siri для IOS, Alexa від Amazon, Cortana для Windows та інші). Користувач за допомогою свого голосу керує інтерфейсом. І якщо піктограма, яку необхідно обрати, не має тексту заміщення , голосовий помічник не зможе ідентифікувати її.

Текстовий опис покращує сприйняття візуальної інформації для всіх. Якщо ви покажете на лекції в університеті смішне зображення і опишите його словами, це приверне увагу студентів, які відволіклись. Їм буде легше швидко зрозуміти жарт. А також зображення можна буде знайти в інтернеті, тому що саме текст робить візуальну інформацію зручною для пошуку.

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

Елементи checkbox та radiobutton. Неправильне їх кодування спричиняє багато проблем для програм екранного доступу. Необхідно, щоб у коді лейбл (підпис) був прикріплений до області натискання. Також гарне рішення - лейбли, що є частиною області натискання, тому що багатьом користувачам складно влучити в маленьку кнопку.

Екранні лупи для збільшення масштабу. Щоб збільшити сторінку можна натиснути ctrl+, або іншу комбінацію, в залежності від браузера. Часто цю функцію використовують люди з порушеннями зору.  Уявімо, ви заповнюєте довгу форму. Натискаєте на кнопку "надіслати" - і нічого не відбувається. Це стається через те, що в одному з перших заповнених полів є помилка. Але її неможливо побачити, тому що вона залишилась далеко угорі сторінки. А тепер уявіть, що масштаб сторінки з цією формою було збільшено в 16-20 разів через малий розмір екрану. Поле з помилкою буде знайти ще складніше. Тож такі ситуації необхідно передбачати заздалегідь. Наприклад, довгу форму для заповнення можна розділити на декілька етапів.

Існує багато платформ, що підтримують користувачів з порушеннями зору. Операційні системи Android та iOS мають вбудовані функції доступності на базі WCAG (web content accessibility guidelines - стандарти веб-доступності). Гарна новина полягає в тому, що часто забезпечення доступності в загальному не впливає на візуальний дизайн, часто це стосується тільки кодування.

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

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

Висновки

Ідея універсальності полягає в тому, що якщо людина має труднощі з тим, щоб почути, вона може побачити інформацію. І навпаки, люди з порушеннями зору можуть прослухати текст. Це допомагає багатьом користувачам в різних випадках: людям в навушниках, тим, хто вивчає іноземну мову, тим, хто одночасно робить декілька справ.  

А ще, коли ви робите інтерфейс доступним, це найчастіше не впливає на візуальний дизайн, а більше стосується кодування!

 

 

Авторка матеріалу та ілюстрацій - Тетяна Ковтун. Редакторка матеріалу - Марина Лебідь.