Проектируя сервис для ребят с ментальными особенностями, мы поняли простую вещь: в инклюзивном дизайне важны внимание и эмпатия, а не сложные метафоры, паттерны или креатив ради креатива. В статье рассказываем, какие особенности мы учитывали, какие решения нашли в интерфейсе и какие принципы помогают делать продукты понятными всем пользователям.
Привет! Я Макс Смирнов, дизайн-директор JetStyle, работаю здесь вот уже 15 лет. Много преподаю, выступаю на отраслевых конференциях, являюсь одним из соорганизаторов Уральского дизайн-комьюнити. Эта статья выросла из моего выступления об инклюзивном дизайне интерфейсов — надеюсь, вам будет интересно.
Почему мы об этом говорим
Уже 20 лет JetStyle делает цифровые продукты для разных аудиторий, и за это время мы много работали с инклюзивными проектами. Среди них:
- тифлофлешплеер для слабовидящих и слепых людей — разработали промышленный дизайн физического устройства для воспроизведения аудиокниг;
- каталог инклюзивных инструментов Microsoft — собрали сборник инструкций по использованию программного обеспечения для людей с особенностями и преподавателей;
- приложение для занятий спортом — разработали сервис с элементами геймификации, который помогает детям и подросткам с ментальными особенностями самостоятельно тренироваться дома.
Именно последний проект — «Тренер в кармане» — стал основой этой статьи.
«Тренер в кармане»: контекст
Заказчик
Special Olympics — международное движение, которое проводит спортивные мероприятия для людей с интеллектуальными особенностями и помогает им интегрироваться в общество.
Мы работали с ДИСпО-центром — региональной организацией, представляющей Специальную Олимпиаду в Свердловской области.
Проблема
Весной 2020 года, когда все оказались на самоизоляции, занятия спортом и общение оказались практически недоступны. Для подростков с ментальными особенностями это стало особенно тяжелым: пропала возможность тренироваться с наставниками и поддерживать привычный ритм.
Чтобы помочь ребятам, тренеры начали записывать видео с упражнениями и рассылать их в WhatsApp и во ВКонтакте. Но такой формат быстро стал неудобным — нужен был единый, доступный и понятный всем онлайн-сервис.
Задача
Заказчик изучил международный опыт и отметил успешный пример коллег из Нидерландов — приложение для домашних тренировок. Наша задача звучала так:
Разработать сервис с элементами геймификации, который поможет детям и подросткам с ментальными особенностями, а именно с расстройствами аутического спектра (РАС) и синдромом Дауна, самостоятельно тренироваться дома, поддерживать связь с тренерами в условиях самоизоляции из-за эпидемии коронавируса и сохранять оптимизм.
Как мы подошли к решению
Мы сделали адаптивный веб-сервис с простой и понятной навигацией. В нём можно проходить тренировки, выполнять дополнительные задания, читать материалы про питание и отслеживать прогресс на доске наград. Связаться с тренером можно в один клик — это оказалось важным для мотивации ребят.
Мы выбрали веб-формат, а не мобильное приложение. Анализ аудитории показал, что у многих подопечных центра нет личных смартфонов, но есть доступ к компьютеру. Веб-версия стала самым доступным вариантом для всех пользователей.
Чтобы сделать сервис более дружелюбным, мы придумали маскота — рысь. Персонаж сопровождает спортсмена по интерфейсу: указывает на важные элементы, подсказывает, как выполнять задания, и поддерживает на каждом шаге. Это снижает тревожность и помогает сформировать привычку возвращаться к сервису.
Что важно знать о пользователях с ментальными особенностями
Чтобы спроектировать корректный опыт, важно понимать, как пользователи воспринимают информацию и какие особенности влияют на взаимодействие с интерфейсом.
Расстройства аутического спектра (РАС)
РАС — это группа состояний, которые могут влиять на коммуникацию, внимание, сенсорную чувствительность и реакцию на изменения. У разных людей проявления отличаются, поэтому универсальных сценариев почти не бывает.
По оценкам международных организаций, люди с РАС — около 1% населения.
Синдром Дауна
Синдром Дауна — одно из распространённых генетических состояний, которое влияет на развитие и может сопровождаться особенностями восприятия информации, речи и внимания.
По мировым данным, его распространённость — около 0,1%.
При правильном подходе к обучению с детства люди с РАС и синдромом Дауна могут стать полноценными членами общества, а занятия спортом этому только способствуют.
Что мы понимаем под инклюзивным дизайном
Если не говорить про узкоспецилизированные продукты для конкретной аудитории, то инклюзивный дизайн — это то, что позволяет максимально большому количеству людей пользоваться продуктом.
Это не значит, что при этом сам продукт должен быть суперуниверсальным — это значит, что у каждой из целевых аудиторий, в том числе у людей с особенностями здоровья, должна быть возможность настроить и использовать те каналы взаимодействия с продуктом, которые им удобны.
Чаще всего говорят о доступности для людей с нарушениями зрения, слуха или моторики. Но не менее важны особенности когнитивного и эмоционального восприятия — именно они определяют, насколько комфортно пользователю с ментальными особенностями взаимодействовать с сервисом.
Какие особенности мы учитывали — и как они повлияли на интерфейс (на примере «Тренера в кармане»)
При работе над проектом мы опирались на исследования о восприятии и поведении пользователей с РАС и синдромом Дауна. Ниже — ключевые особенности, которые напрямую влияют на работу с интерфейсами, и решения, которые мы применили.
1. Особенность: избегание прямого зрительного контакта
Пользователям с РАС может быть некомфортно, когда люди и даже персонажи на изображениях «смотрят» напрямую.
Решение в интерфейсе:
мы использовали персонажей с мягкой, непрямой направленностью взгляда. Аватары и маскот всегда смотрят в сторону, не создавая ощущения «давления».
2. Особенность: высокая чувствительность к звукам
Многие воспринимают все звуки сразу — и фоновый шум мешает фокусироваться.
Решение:
в тренировочных видео — только голос тренера и мягкая музыка. Дополнительно есть возможность полностью отключить звук.
3. Особенность: сложности с пониманием последовательности действий
Если показать упражнение один раз, пользователь не повторит его в нужном количестве.
Решение:
видео повторяет движение столько раз, сколько требуется. Плюс мы добавили прогресс-бары:
- сколько осталось повторений;
- сколько осталось отдыха;
- сколько длится тренировка в целом.
4. Особенность: потребность в стабильности
Резкие изменения в интерфейсе могут вызвать стресс.
Решение:
мы не вводили неожиданных апдейтов и обновляли интерфейс постепенно, сохраняя структуру и визуальные якоря.
5. Особенность: сложность в интерпретации запретов
Отрицательные формулировки могут восприниматься буквально или не до конца.
Решение:
мы заменили запреты на позитивные рекомендации.Например, вместо «нельзя ставить на паузу дольше чем на 5 минут» — объяснение почему лучше не прерываться надолго.
6. Особенность: буквальное восприятие изображений и сложность с метафорами
Метафоры, сложные иконки и абстрактные образы могут быть поняты неправильно.
Решение:
мы использовали максимально прямые визуальные образы, проверяли однозначность иллюстраций – в нашем интерфейсе мы буквально визуализируем то, что написано текстом.
Плюс выбрали шрифт IBM Plex Sans, где буквы и цифры легко различимы.
7. Особенность: информация лучше воспринимается, когда голос и действие синхронны
Это важно, например, для пользователей с синдромом Дауна.
Решение:
видео всегда строится по схеме «сначала объяснение → потом демонстрация движения».
Принципы инклюзивного дизайна интерфейсов
Мы собрали основные рекомендации, которые помогли сделать сервис понятным и комфортным для пользователей с ментальными особенностями. Этот чек-лист подходит и для обычных проектов — он улучшает пользовательский опыт в целом.
1. Тексты
- Пишите коротко и однозначно.
- Избегайте метафор, двойных смыслов и эмоционально окрашенных фраз.
- Логика и причинно-следственные связи должны быть прозрачными: пользователь должен понимать, что произойдет после каждого действия.
2. Изображения и иконки
- Поддерживайте текст изображением — и наоборот.
- Проверяйте, чтобы визуальные образы были однозначными.
- Если используете иконки, подписывайте их. Исключение — случаи, когда значение очевидно (например, стрелка «Назад»).
3. Видео
- Не включайте автоплей — запуск только по действию пользователя.
- Следите, чтобы демонстрация полностью совпадала с озвучкой.
- Добавляйте паузу, повтор и понятные элементы управления.
- Субтитры — обязательны: с фоновой подложкой и разными цветами для разных ролей.
4. Аудио
- Используйте только если это добавляет смысл.
- Убирайте шумы и посторонние звуки — они мешают фокусироваться.
- Давайте возможность полностью отключить звук.
5. Цвет и визуальный акцент
- Используйте спокойную палитру без резких и неоновых оттенков.
- Обеспечивайте контраст: важные элементы должны быть легко различимыми.
6. Навигация и структура
- Делайте навигацию простой и последовательной.
- Показывайте, где сейчас находится пользователь (активный пункт, хлебные крошки).
- Используйте индикаторы ожидания: прогресс-бары, таймеры, состояния загрузки.
- Добавляйте онбординг — короткие и понятные шаги для первого входа.
7. Дополнительные рекомендации
- Объясняйте ограничения позитивно, без «запрещающих» формулировок.
- Не меняйте интерфейс резко — обновления должны быть постепенными.
- Проверяйте шрифты: буквы и цифры не должны быть похожи друг на друга.
- Всегда оставляйте возможность получить помощь или подсказку.
Помимо учета особенностей пользователей, мы оптимизировали сервис под реальные условия использования — и это сильно улучшило опыт.
Квадратные видео
Мы остановились на квадратном формате: он одинаково хорошо работает и на мобильных устройствах, и на больших экранах. Такой формат позволяет занимать максимум полезной площади без сложной адаптации.
Прогресс-бары внутри видео
Во время тренировки спортсмен видит сразу три показателя: количество подходов, время отдыха и общий прогресс.
Чтобы снизить нагрузку на разработку и ускорить загрузку, два из этих индикаторов встроены прямо в видео. Это также позволяет скачивать ролики и пересылать их без потери функциональности.
Иконка сервиса на рабочем столе
Мы использовали возможность современных браузеров добавлять веб-страницу как shortcut на домашний экран телефона.
При запуске такой иконки сервис открывается без браузерной оболочки — пользователь получает почти «приложенческий» опыт без установки приложения.
Авторизация по логину и паролю
Тренеры рассказали, что номера телефонов и почтовые адреса у ребят часто меняются. Поэтому мы выбрали авторизацию по логину и паролю — это проще, стабильнее и полностью под контролем наставника. Если возникают сложности, спортсмены связываются с тренерами через удобные для них каналы.
Инклюзивный дизайн — для всех
Работая над «Тренером в кармане», мы убедились, что принципы инклюзивности улучшают интерфейсы в целом. Они делают взаимодействие предсказуемым, понятным и спокойным — независимо от того, есть ли у пользователя особенности восприятия или нет.
Инклюзивный подход помогает проектировать продукты, в которых не потеряется никто. И чем раньше он появляется в процессе, тем лучше итоговый опыт.
Если вам интересно обсудить эту тему или поделиться своими наблюдениями — пишите комментарии, мы будем рады диалогу.
Больше статей и полезностей — в нашем основном телеграм-канале, а внутрянки жизни наших дизайнеров — здесь. Подписывайтесь)
