Тенденции адаптивного и инклюзивного дизайна: доступность для всех пользователей
Здесь могло бы быть долгое вступление про то, как современные веб-приложения прошли путь от простых макетов, ограниченных технологиями своего времени, до способных подстраиваться даже не под ограничения технологий, а под ограничения самих пользователей. Но сейчас важно совсем другое. Как ни крути, все пользователи разные, и иногда ограничения касаются их физических возможностей. Этими вопросами занимается адаптивный дизайн и, в частности, инклюзивный. Но обо всем по порядку.
Адаптивный дизайн — для чего или для кого?
Адаптивный дизайн в целом — это стилизация макета или дизайна приложения под конкретные нужды и предпочтения пользователя. Сюда можно включить минималистичный дизайн, генеративный дизайн или дизайн для виртуальной и дополненной реальности, инклюзивный дизайн и так далее. Как видно по списку, адаптивность позволяет подстроиться под технологии разработки, пользователей, требования бизнеса и области применения. Тренды определяются временем и наоборот, что находит свое отражение в развитии дизайна.
Сразу стоит оговорить особенности терминологии, которая будет использоваться дальше. Под адаптивным дизайном можно иметь в виду понятие, включающее в себя адаптацию под конкретные нужды пользователя, его цели и возможности. Также под адаптивным дизайном часто имеют в виду дизайн под устройства с различными размерами экрана (мобильные и десктопные устройства, планшеты и т.д.). Далее под «адаптивным дизайном» будем подразумевать именно его первое значение.
Рассмотрим вкратце основные направления адаптивного дизайна:
Упрощенный (минималистичный) дизайн — направление, реализующее простые и понятные интерфейсы с добавлением минимальных стилей. Обычно в таких макетах присутствует не более трех цветов, что отражается в стилизации не только компонентов, но и иконок, картинок и других элементов приложения.
Генеративный (порождающий) дизайн — подход в дизайне, где часть процессов разработки отдается искусственному интеллекту или другим компьютерным технологиям. Например, таким образом можно создать на этапе прототипа несколько возможных вариантов макетов и упростить часть сложных задач или декомпозировать их. На вход системе подаются входные бизнес-параметры, по которым уже создаются модели.
Дизайн VR/AR — относительно новое направление дизайна, которое сильно отличается от классического UX/UI в пользу нового пользовательского опыта. Виртуальная реальность (VR) конструирует полностью новый цифровой мир в отрыве от мира реального, в то же время дополненная реальность (AR) добавляет цифровые элементы к объектам из реального мира, не ограничивая пользователя во взаимодействии с ним. Здесь нет места обычным клавиатуре и мышке, достаточно двигать руками, управлять моделями с помощью взгляда или голоса. Как это выглядит со стороны пользователя? В виде проекций на реальные объекты (дополненная реальность) или в виде полностью созданной псевдо-реальности (виртуальная реальность).
Инклюзивный дизайн — направление, которое направлено на людей с ограниченными возможностями. Это также очень широкое понятие, которое включает в себя не только дизайн для слабослышащих и слабовидящих пользователей, но и людей с нарушением моторики, с когнитивными проблемами, физическими проблемами и так далее. Например, условную функцию автодополнения Т9 можно отнести к инклюзивной функциональности с целью помочь людям со слаборазвитой моторикой.
Как видно из списка, адаптивный дизайн — это очень обширное понятие, которое включает в себя несколько направлений. Охватывать их все сразу не нужно, так как они решают разные задачи. Но можно использовать их комбинации — например, использовать упрощенный дизайн с целью привлечения пользователей с ограниченными возможностями, то есть реализовывать элементы инклюзивного дизайна.
Так для чего или кому это нужно? В первую очередь для пользователей, так как информационная среда еще на этапе дизайна дает им возможность сложить впечатление о продукте. Проще говоря, пользователь сначала видит красивую кнопку, но только потом нажимает на нее, если его «не отпугнул» ее дизайн. Во вторую очередь — для бизнеса, так как использование адаптива помогает привлечь потребителей с самыми разными возможностями или, наоборот, ограничениями. Выгоднее сделать интуитивно понятное, бесплатное и не требовательное к железу приложение, чем сложное, платное и с высокими техническими требованиями. Также и с дизайном — можно привлечь чем-то привычным и удобным или чем-то, что дарит новый пользовательский опыт.
Инклюзивный дизайн — это когда цель оправдывает средства?
На самом деле инклюзивный дизайн — это не всегда дизайн про помощь людям с ограниченными возможностями. Иногда его разрабатывают и для рядовых пользователей с целью получения более приятного опыта пользования приложением. То есть инклюзивность подстраивается под потребности самых разных пользователей, в том числе и имеющих ограничения. Например, наличие темной и светлой темы — пример инклюзивного дизайна.
Откуда черпаются вдохновение и идеи для разработки новых инклюзивных возможностей? В первую очередь — из внутренней эмпатии самих дизайнеров и разработчиков, которая помогает разобраться в том, как ведут себя люди в тех или иных ситуациях или в различных жизненных обстоятельствах, как можно помочь им почувствовать себя лучше и комфортнее при использовании приложения с таким дизайном.
Рассмотрим больше примеров инклюзивного дизайна:
Для глухих пользователей используются подсказки-жесты, специальные анимации-индикаторы, сигнализирующие о новой информации. Одним из самых простых и популярных инструментов для слабослышащих пользователей являются субтитры.
Для слабовидящих разрабатываются особые дизайны с контрастным, ярким шрифтом, с широким междустрочным интервалом и большим межбуквенным расстоянием. Если пользователь является дальтоником, то помимо цветовых решений нужно использовать отдельные текстовые подсказки. Особой популярностью пользуются отдельные панели с гибкими настройками версии для слабовидящих пользователей (рис. 1).
Рис. 1. Панель настроек для слабовидящих пользователей сайта.
Для слепых пользователей активно внедряются голосовые ассистенты (рис. 2), например, Assistant Google или Сири, и другие способы безэкранного взаимодействия.
Рис. 2. Отечественные и зарубежные голосовые помощники: Google Assistant, Маруся, Олег, Сири, Cалют, Алиса.
Для людей с когнитивными расстройствами разрабатывается отдельный упрощенный контент без сложных речевых конструкций, добавляется навигация с минимальной возможностью выбора, акцентируется внимание только на самых важных элементах приложения и так далее. Например, часто панель навигации делают доступной всегда и снизу, а большинство второстепенных функций убирают с главной страницы (рис. 3). Это помогает сконцентрировать внимание пользователя и не дать ему «заблудиться». Безусловно, это облегчает взаимодействие для всех пользователей — в том числе и для людей с когнитивными искажениями.
Рис. 3. Дизайн приложения ВКонтакте с доступной навигацией, выделением самого важного и разделением информации на логические визуальные блоки.
Для пользователей с ограниченной подвижностью важным элементом является управление приложением без помощи мыши, добавление увеличенных кнопок навигации с большим межкомпонентным растоянием (больше примеров есть в документации Apple для создания адаптивного и инклюзивного дизайнов: https://developer.apple.com/design/human-interface-guidelines/layout), автозаполнение элементов форм (рис. 4).
Рис. 4. Менеджер паролей Google с возможностью автозаполнения форм.
Какими же чертами должен обладать правильный инклюзивный дизайн? Рассмотрим самые основные:
Функциональное удобство: наличие голосового управления, навигации с помощью мыши и клавиатуры, возможность использования дополнительного аппаратного ПО, например, специальных клавиатур для незрячих людей или альтернативных мышек с дополнительными кнопками. Также рекомендуется использовать дизайнерские правила задания размеров компонентов и межкомпонентных расстояний. Это позволяет пользователям проще взаимодействовать с интерфейсами и имеющейся функциональностью.
Визуальные ограничения: верно подобранные шрифты, отсутствие сложных синтаксических конструкций, правильно подобранный междустрочный интервал, отсутствие чрезмерно активных анимаций. Также хорошей практикой являются звуковые сигналы об уведомлениях, которые должны быть короткими и нейтральными. Помимо данных ограничений также важно настроить контрастность текста относительно фона. Он не должен сливаться с остальным контентом, важные элементы, например заголовки или особые термины, должны быть выделены.
Адаптивность: контент должен правильно отображаться на всех устройствах — и на десктопных, и на мобильных устройствах. Если на малых экранах присутствует мелкий шрифт, он неверно масштабируется или присутствует, как возможное следствие, горизонтальный скролл, то такой адаптив не является инклюзивным, пользователи будут испытывать трудности в восприятии контента.
Аудиодоступность: наличие электронных дикторов, способных воспроизводить текстовую информацию в аудиоформат. Например, здесь необходимо учесть наличие всплывающих модальных окон, графической информации или описание кнопок, которые необходимо как-либо описать электронному диктору.
Разумеется, это неполный список рекомендаций и возможностей инклюзивного дизайна, всегда можно обратиться к документации с руководством по обеспечению доступности веб-контента (https://www.w3.org/Translations/WCAG20-ru).
Остался последний вопрос — дорого ли внедрять перечисленные инструменты? Согласно статистике на сегодняшний момент в мире живут около миллиарда человек, имеющих ту или иную форму инвалидности, в России — около 12 миллионов человек. Это довольно высокий процент населения, которые потенциально могут быть вашими пользователями или клиентами получаемых услуг. Также, если менеджер на этапе проектирования сможет полным образом обозначить внедряемый инклюзивный дизайн, это может помочь сэкономить на последующей разработке. Помимо этого важно дизайнеру и разработчику поделить зоны ответственности по внедрению такого дизайна и функциональности. Как показывает практика, такой опыт можно переиспользовать уже после первого такого внедрения.
Вместо заключения
Адаптивный дизайн — это очень широкое понятие, которое позволяет учитывать тенденции развития технологий и потребности людей. Дополненная реальность набирает обороты? Значит, в ход идет разработка и дополнение к требованиям по ее дизайну. Каким образом? Собирается статистика и опрашиваются пользователи, чтобы сложить общую картину получаемого опыта. Именно таким незамысловатым образом получается адаптироваться под быстро меняющийся мир.
Инклюзивный дизайн в свою очередь является частью адаптивного, в котором учитываются потребности пользователей с ограниченными возможностями. Элементы такого дизайна не являются какими-то сложными и трудно реализуемыми. По сути инклюзивный дизайн должен учитывать требования, описанные Консорциумом Всемирной Паутины (W3C), а именно рекомендации по его доступности. Они уже описаны, внедрены ведущими компаниями в свои продукты, требуется лишь использовать имеющийся опыт и обмениваться им с другими разработчиками и коллегами по цеху. Ведь самые лучшие практики и весь мировой опыт должны быть доступны всем, не так ли?
