Что такое инклюзивный дизайн интерфейсов и как его делать: советы, главные принципы, мифы
Дизайн интерфейсов — не только гармония цветов, качественная типографика и красивые картинки. Профессиональный специалист должен создать проекты под разные категории пользователей с учётом их потребностей.
В этой статье поговорим о малоизвестном в российском сегменте интернета понятии, которое пригодится всем дизайнерам.
Концепция предполагает создание максимально доступного интерфейса. Люди разных возрастных групп с индивидуальными особенностями взаимодействуют с приложениями и сайтами по определённым шаблонам. Задача дизайнера — разработать сбалансированный проект и удовлетворить потребности разных групп пользователей.
Понятие универсального дизайна впервые озвучил архитектор Рональд Л. Мейс из США. Он сформулировал 7 основных принципов, которые позволяют специалистам создавать идеальные условия для разных пользователей. Главная мысль концепции — не делать отдельные версии проектов для людей с ограниченными возможностями, а изначально ориентироваться на всех. Это поможет сделать жизнь проще всей целевой аудитории, а не только людям с физическими особенностями.
Инклюзивный дизайн предполагает максимальную доступность. Это один из главных принципов концепции. Доступный дизайн — простое взаимодействие между интерфейсом и пользователем. Когда человек после установки приложения или первого посещения сайта знает, что надо делать и заранее знает результат. В меню будут категории постов, а форма поиска покажет результаты до перехода на соответствующую страницу. Доступность входит в инклюзивную дизайн-стратегию, но эти понятия отличаются.
Дизайнерам-новичкам стоит обратить внимание на inslusive design. В 2020 году всё больше коммерческих компаний делают ставку на доступность. Они больше не гонятся за красивыми интерфейсами, а стараются охватить как можно больше процентов аудитории. Чтобы воспользоваться приложением мог и дальтоник, и люди с другими нарушениями зрения.
На картинке выше представлен идеальный пример, который описывает суть проблемы. Стандартное меню на сайте или в приложении решает одну задачу — даёт пользователям возможность перемещаться между разными страницами или экранами. В первом случае навигация адаптирована под молодых людей с хорошим зрением. Они легко смогут увидеть затемнённые надписи на белом фоне.
Второй пример попадает под определение инклюзивной дизайн-системы. Тёмные надписи на светлом бэкграунде идеально читаются. Главная страница выделена чёрным цветом для акцентирования внимания. Воспользоваться навигацией смогут и подростки, и люди преклонного возраста.
С января 2015 года в России вступил закон, который гарантирует людям с физическими особенностями беспрепятственный доступ к информации. Государственные структуры обязали сделать дополнительные версии сайтов для слабовидящих. Остальные категории людей с особыми потребностями закон не затрагивает.
В 2020 году инклюзивный дизайн ещё не стал основной концепцией, но положительные изменения есть. Компании, которые обращаются к дизайнерам за разработкой интерфейсов, всё чаще спрашивают о возможности адаптации проектов под разные категории пользователей. Важно запомнить, что одна из задач концепции — обеспечить доступ к информации и дать максимум инструментов для удобного взаимодействия с интерфейсом.
Чтобы лучше понять практическое применение понятия, рассмотрим пример, не касающийся веб-дизайна. Умные часы Apple Watch 4 автоматически вызывают службу спасения, если обнаруживают, что человек упал и не встаёт. Функция полезна всем людям, гаджет постоянно спасает жизни. Часы помогли альпинисту, который сорвался со скалы, получил 3 перелома и нуждался в экстренной медицинской помощи. Гаджет отправил сообщение с координатами в службу спасения и молодого человека доставили в больницу.
Часы Apple — идеальный пример устройства, которое будет полезно всем людям. От маленьких детей до подростков, студентов и пожилых людей. Таким должен быть и дизайн интерфейсов. Отдельная версия сайта для тех, кто не различает цвета — шаг вперед, но не стоит забывать, что в мире много людей с другими нарушениями зрения.
Инклюзивный дизайн учитывает особенности разных людей и оставляет в прошлом «проблему среднего человека». Это метод проектирования, который повсеместно используется для создания разных продуктов. Архитектор, дизайнер и люди других творческих профессий составляют образ пользователя, который идеально отражает целевую аудиторию. Только многие из них забывают, что у людей есть уникальные особенности. Так появляются дозаторы мыла, которые реагируют только на светлую кожу.
Современный дизайнер должен по умолчанию делать проекты под все категории пользователей. Без учёта возрастных, языковых и географических особенностей. Это не значит, что надо продвигать идею одинаковых интерфейсов, которые будут понятны каждому. Продукты без индивидуальных особенностей ничего не стоят. Цветовая гамма, типографика и другие базовые элементы дизайн-системы остаются на своих местах.
Концепция inclusive design не такая сложная, как кажется на первый взгляд. Специалистам придётся потратить время на получение новых знаний и адаптацию, но результат окупит все усилия.
У пользователей должна быть возможность воспринимать информацию любыми доступными способами. Незрячих людей сильно выручают голосовые помощники, озвучивающие информацию на экране. Искусственный интеллект помогает решать любые задачи: от чтения новостей до заказа товаров на Amazon.
Люди с нарушением слуха не могут посмотреть видеоролик без сурдопереводчика или текстовой дорожки. На видеохостингах, вроде Youtube, встроен автоматический перевод субтитров на разные языки. Этого недостаточно для комфортного ознакомления с контентом. Некоторые блогеры заказывают субтитры у профессиональных переводчиков. По такому пути должны идти и компании, которые хотят сделать продукт доступным для максимального количества пользователей.
Информация в интерфейсе должна быть понятна всем. Если проект создаётся под нишу финансов, необязательно общаться с аудиторией исключительно на языке профессиональных терминов. Чем проще текст, тем лучше. По этой теме написано немало книг и есть даже специальное понятие «инфостиль». Рассказать о продуктах, компаниях и услугах можно по-разному. Продающего текста не существует, секрет успеха в простоте, доступности и фактуре.
В Соединённых Штатах есть тест F-K, который помогает определить уровень образования для понимания текста. Эталоном считается контент на уровне 5-го класса. Когда информацию может понять и учащийся школы, и бизнесмен с Уолл-стрит.
Дизайнеры обычно размещают в макетах текст-рыбу и не отвечают за качество контента. Задачу решает автор или редактор. После разработки в макет интегрируют блоки текста и медиаконтент для создания завершённого визуального образа. Специалист по графике может разработать структуру документа и повлиять на первое знакомство пользователя с контентом.
Кроме воспринимаемости и понятности важную роль играет надёжность. Это свойство подразумевает стабильность продукта. Обновление операционной системы или изменение продукта не должно влиять на важные функции. Люди с физическими особенностями часто не обновляют приложения, потому что боятся потерять доступ к полезным настройкам. Они жертвуют возможностями, чтобы продолжать использовать приложение.
Сайты редко обновляются в глобальных масштабах, а вот приложения постоянно улучшаются. Публикуйте новые версии продуктов только после тщательного тестирования. Не торопитесь с релизом продукта, если не хотите потерять часть аудитории.
Без доступа к функциям приложения оно становится бесполезным. Дайте людям возможность управлять интерфейсом любыми доступными способами. Голосовых помощников придумали не только, чтобы быстро узнать прогноз погоды. Они также решают задачи людей, которые не могут управлять своим телом. Пользователи с помощью Алексы, Сири и Алисы ищут контент, запускают фильмы и решают другие задачи.
Дизайнер должен разработать проект с максимальным охватом аудитории, потратить время на изучение особенностей восприятия информации, посмотреть кейсы и добавить в список инструментов новые сервисы и приложения.
Проверка дизайна на инклюзивность — сложная задача. Без интернета дизайнер вряд ли смог бы решить её. Сейчас можно опубликовать пост в социальных сетях, получить обратную связь и внести изменения в проект. Пользователи с нарушениями зрения или слуха с радостью придут на помощь. Они понимают, что от их сотрудничества зависит судьба ещё одного продукта, который будет спроектирован с учётом физиологических особенностей.
Откажитесь от стандартного образа пользователя, который повсеместно используется при разработке интерфейсов. Среднестатистический представитель целевой аудитории не отражает особенности всех групп пользователей. Смотрите глубже, сотрудничайте с разными людьми и создавайте проекты с упором на социальную ответственность.
Краткая формулировка принципов инклюзивного дизайна:
Для работы с инклюзивным дизайном понадобится много времени и усилий. Дизайнер сможет гордиться своим проектом, а заказчики получат охват сегментов аудитории, которые раньше не могли взаимодействовать с продуктом.
Мы собрали полезные рекомендации, которые пригодятся тем, кто хочет вывести проекты на новый уровень. Ознакомьтесь с ними и внесите изменения в рабочий процесс.
Не все дизайнеры по-настоящему знают аудиторию. Если заказчик предоставил мало информации о характеристиках клиентов — проведите своё расследование. Временные затраты не всегда окупаются, но деньги в этом случае должны уйти с первого места.
Одна из главных ошибок дизайнеров заключается в том, что они создают продукт исходя из своих привычек и особенностей. Большинство специалистов по графике работают на Retina-дисплеях Apple с высоким разрешением. Не забывайте, что есть люди с маленькими мониторами, айпадами и смартфонами.
В сети много сервисов и эмуляторов, которые показывают, как контент отображается на разных устройствах. Без погрешности не обойтись, но общее представление получить можно. Охватить все девайсы трудно, если только их нет под рукой.
Хорошая цветовая схема — 50% успеха любого интерфейса. Многочисленные исследования доказывают, что цвет влияет на конверсию, лояльность и другие важные критерии оценки удовлетворённости аудитории.
В рамках инклюзивного дизайна надо создавать продукт с заботой о пользователях, а не желанием создать визуальный шедевр. Поставьте доступность и логичность на первое место. Спецификация WCAG 2.0 даст максимум полезной информации по этому вопросу.
С точки зрения типографики, контрастность — разница между цветом бэкграунда и цветом текста. Фон должен быть таким, чтобы контент можно было прочитать без особых усилий. Блоки с визуальным рядом играют важную роль для пользователей — они помогают лучше понять продукт и проникнуться его эмоциями.
Легко догадаться, что выделять сообщения с ошибкой красным цветом при работе с инклюзивным дизайном нельзя. Люди с дальтонизмом не поймут, что произошло, если в блоке нет подсказки.
Посмотрите на разные части интерфейса, проверьте сценарии взаимодействия, выделите слабые места и сделайте механизм работы доступным. Если результат работы проекта сильно зависит от заполнения формы, она должна быть идеальной.
Чтобы лучше понять, как люди с нарушением зрения или слуха воспринимают интерфейс, посмотрите на него их глазами. В этом помогают специальные приложения, которые создаются с учётом физиологических особенностей людей. Установите программу для озвучивания текста с экрана и поработайте с приложениями или сайтами конкурентов. Подсмотрите удачные решения и постарайтесь сделать больше.
Аналогичным образом попробуйте управлять навигацией без мыши или клавиатуры. В первом случае спасают сочетания клавиш, во втором — голосовое управление и виртуальная клавиатура.
Видео, изображения и аудиофайлы влияют на знакомство пользователя с продуктом. Человеку с нарушением зрения сложно определить, что изображено на картинке без посторонней помощи. Если добавить подпись или заполнить атрибут alt, решить задачу будет легко. Голосовой ассистент распознает текст и даст подсказку.
При использовании видеороликов отключите автоматическое воспроизведение и звуковую дорожку. Если посетители заходят прослушать ролик — они воспользуются соответствующей кнопкой. Непродуманные сценарии работы могут уничтожить пользовательский опыт и создадут негативные впечатления о продуктах, услугах и компаниях.
Людям с неврологическими нарушениями трудно воспринимать мерцающие анимационные изображения, карусель, паллакс и другую анимацию. В некоторых случаях мигающая гифка может стать причиной ухудшения самочувствия.
Доступность, понятность, надёжность и управляемость влияют на пользовательский опыт, но на этом забота не заканчивается. Хотите получить персональные данные человека — объясните, зачем ему это, и какие преимущества будут доступны после заполнения анкеты. Снижаете нагрузку на приложение за счёт тайм-аута сессии — заранее предупредите человека и предоставьте варианты решения.
Забота о пользователях — залог успеха проекта в любой нише. Приложение для юристов, сайт о домашних животных и портал о закупках посещают люди и у каждого из них свои особенности восприятия информации.
Не все дизайн-системы получают широкое распространение. Инклюзивный дизайн не является исключением. Если посмотреть список проектов на биржах фриланса, в технических заданиях редко есть требования о максимальной доступности. Главная проблема низкой популярности инклюзивного дизайна — ряд мифов. Люди думают, что это нецелесообразно, сложно и неоправданно дорого. Постараемся разрушить каждый стереотип, чтобы посмотреть на задачу с другой стороны.
Главный аргумент скептиков заключается в том, что интерфейс, созданный по концепции инклюзивного дизайна предназначен только для определенных групп людей с нестандартными механизмами восприятия информации. На самом деле в основах метода лежит обеспечение доступа к контенту как можно большей аудиторией.
Не забывайте, что вспомогательными средствами пользуются не только люди с ограничениями. Голосовые помощники облегчают жизнь людей с нарушением зрения и водителей, которые не могут набирать текст на телефоне за рулем.
Инклюзивный дизайн — это не адаптация продукта под нужды конкретного сегмента аудитории. Концепция помогает решать проблемы, которые могут возникнуть у разнообразного «населения» интернета.
Инклюзивный дизайн в идеале создаётся под пристальным вниманием экспертов в этой области и периодической проверкой результата фокус-группами. Если переместиться в реальность и взять среднестатистического дизайнера, который решил попробовать свои силы в этом направлении, он максимум сможет найти людей с различными особенностями для консультаций.
Пользователи охотно дадут обратную связь и укажут на критичные ошибки, если правильно подойти к презентации проекта. В некоторых случаях они даже не возьмут за это денег.
Без изменений в рабочем процессе обойтись не получится, но переучиваться с нуля не надо. В сети много полезных инструментов, которые показывают, как видят картинку люди с нарушением зрения. Кроме них существуют обучающие материалы, готовые UI-киты, кейсы и других решения, которые ускоряют процесс обучения.
Многие люди из-за физиологических особенностей не могут взаимодействовать с продуктами, которые давно стали повседневными явлениями. По этой причине Сбербанк адаптировал 20 тысяч банкоматов по всей России под голосовое обслуживание. Незрячий человек подходит к устройству, вставляет наушники и может голосовыми командами проверить баланс, снять деньги и выполнить другие операции.
Дизайнеры должны понять, что несут ответственность за любой проект. Они определяют, как дизайн будет влиять на людей, даже если клиент не даёт выйти за рамки дозволенного. Инклюзивный дизайн меняет мир к лучшему.
Посмотрите на вдохновляющие примеры:
Вывод очевиден — сделайте инклюзивный дизайн приоритетом. Без прогресса не может существовать ни одна ниша. Поначалу будет тяжело, но со временем создание продукта под максимальную аудиторию станет повседневной частью творческого процесса.
Дизайнеры веб-студии IDBI знают, как разрабатывать проекты для пользователей с разными особенностями. Мы создадим интерфейс для вашего продукта, который поможет людям решать важные задачи.