Сім найкращих практик для дизайну інклюзивного продукту

Лонг Ченг | Провідний дизайнер Pinterest, основний досвід

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

1. Збільшити кольорові контрасти

Команда дизайнерів продуктів Pinterest кидає виклик загальному припущенню, що доступні кольори не такі красиві. Ми створили палітру кольорів для нашого продукту, яка доступна з контрастністю 3,00: 1 і вище.

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

2. Використовуйте сильну типографічну ієрархію

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

3. Мати чіткі показники фокусування

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

4. Не покладайтеся на кольори

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

5. Використовуйте SVG

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

6. Розгляньте підтримку зчитування з екрана

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

7. Створіть доступність для митців та дизайнерів

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

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

Подяки: Скотт Андреа, Джулія Кокран, Кріс Ллойд, Рахул Малік, Шира Неттер, Маліка Поттер, Мара Сон, Крістіан Вурінгс, Еліс Юань, Джої Зінгареллі, Ліннея Зулч та решта Робочої групи з питань доступності в Pinterest.