UI/UX дизайн для пользователей с дислексией

Опубликовано: 2019-04-05

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

Цифровые услуги также пытаются охватить инклюзивность, и в этой гонке лидируют отрасли веб-разработки и разработки мобильных устройств. Instagram недавно запустил обновление своего приложения с двумя функциями специальных возможностей: автоматическим альтернативным текстом и настраиваемым альтернативным текстом.

Эти функции позволяют пользователям с нарушениями зрения получить наилучшие впечатления от использования приложения.

В настоящее время индустрия все еще учится создавать инклюзивные дизайны UX/UI, которые были бы одинаково удобны для разных людей. В этом тексте вы найдете информацию о дизайне UI/UX для пользователей с дислексией.

Если вам интересно, почему это важно, вот один факт: на основе своих исследований Йельский центр дислексии и творчества пришел к выводу, что до двадцати процентов населения мира могут страдать от дислексии в той или иной степени. То есть двое из десяти пользователей вашего приложения или веб-сайта могут не получить приличного пользовательского опыта при его использовании.

Осведомленность о дислексии

Дислексия — это состояние, которое вызывает трудности с письмом, правописанием и чтением у детей и взрослых всех возрастных групп, национальностей, социальных статусов и уровней интеллекта. Дислексия — распространенная неврологическая неспособность к обучению, которая не поддается полному излечению. Это не заразно и не передается по наследству. Это состояние никак не связано с ленью и нежеланием учиться. Хотя эта языковая неспособность к обучению неизлечима, она автоматически не мешает людям с этим заболеванием преуспевать в учебе, профессиональном и личном плане. При надлежащем вмешательстве и технологической помощи дислексики могут вести успешную жизнь, как и все остальные.

Некоторые известные и успешные люди страдают дислексией. У Альберта Эйнштейна, Ричарда Брэнсона, Тома Круза, Джима Керри, Уолта Диснея и Вупи Голдберг была диагностирована дислексия. Это условие не помешало Джону Ф. Кеннеди, Джорджу Вашингтону и Джорджу Бушу-младшему стать президентами США. Если дислексия не диагностирована и не лечится должным образом, она может вызвать неуспеваемость в учебе, сильное беспокойство, разочарование и низкую самооценку.

Существуют также юридические аспекты обеспечения доступности Интернета для всех. Вы можете ознакомиться с ресурсами политики веб-доступности WAI, чтобы просмотреть статьи о правовой политике в отношении доступности.

Дизайн для дислексии

Современное образование сильно цифровизировано. Довольно часто дети учатся основам чтения и письма со своих iPad. Однако они не единственная группа, нуждающаяся в доступных решениях. Разные люди во всем мире нуждаются в доступных веб- и мобильных инструментах, которые они могут использовать и извлекать выгоду, независимо от своих ограничений.

Некоторые довольно успешные цифровые образовательные решения для дислексиков уже существуют. Среди них такие приложения, как Leo, Teen and Adults Phonics Library, Knoword, Reading Machine и Draw Something. Ознакомьтесь с ними для вдохновения при работе над дизайном вашего продукта, удобным для людей с дислексией.

Разработка UX и UI для дислексии может быть сложнее, чем создание обычного веб-приложения или мобильного приложения. В этом случае дизайнер должен делать больше, чем просто следовать лучшим практикам отрасли. Чтобы спроектировать UX/UI, удобный для людей с дислексией, нужно идти в ногу с последними разработками в этом секторе и следовать рекомендациям, которые уже доказали свою эффективность. Делая свой веб-сайт или приложение удобным для дислексиков, лучше всего работать с дизайнерами, которые имеют соответствующий успешный опыт и могут показать вам свое портфолио или тематические исследования.

Когда вы делаете свой продукт доступным для определенной группы людей, недостаточно следовать лучшим практикам. Вы всегда должны позволять целевой аудитории тестировать продукт, чтобы увидеть, как они взаимодействуют с ним. Даже после тщательного контроля качества может возникнуть проблема, которую заметит только дислектик. Независимо от того, какой цифровой продукт вы разрабатываете, вам нужно постоянно следить за его пользователями. Решение, которое кажется вам лучшим, может сбивать с толку и неблагоприятно для людей, которые его используют.

Лучшие практики проектирования UX/UI для людей с дислексией

Доступный UX/UI, удобный для дислексиков, можно разработать следующим образом:

Высокая контрастность и дислексия плохо сочетаются . Людям с дислексией часто сложно читать тексты на экранах с высоким уровнем контрастности. С их точки зрения, кажется, что буквы, слова и строки «танцуют», меняя свое место и доставляя читателю неприятности. Чтобы пользователям было проще, выбирайте пастельные фоны вместо высококонтрастных цветов. Выбирайте темно-серый текст вместо черного при работе с белым фоном. Это не повлияет на ясность и читабельность для обычных пользователей, но значительно улучшит ее для дислексиков.
Будьте осторожны со шрифтами . Шрифты, подходящие для людей с дислексией, имеют увеличенный межстрочный интервал и четкие типографские элементы для букв, которые обычно их сбивают с толку. Существуют шрифты для дислексиков, такие как Dyslexie или Open Dyslexic. Часто высмеиваемый шрифт Comic Sans на удивление хорошо работает и для этой аудитории. Причина этого довольно проста — буквы в этом шрифте имеют большие промежутки между ними и имеют уникальные элементы типографики, которые помогают пользователям легче различать похожие буквы. Если ваш выбор шрифтов ограничен обычными вариантами, выберите Arial, Century Gothic, Tahoma, Trebuchet или Verdana.
Держите текст коротким . Этот совет касается строк текста в частности и экранов в целом. Исследования показывают, что строка на экране не должна быть длиннее 45 символов для лучшего понимания. Также не рекомендуется выбирать шрифты меньше двенадцати-четырнадцати пунктов.
Не перегружайте стиль текста . Хотя буквы, как правило, танцуют в глазах дислектиков, оформление их причудливым курсивом и подчеркиванием не улучшит ситуацию. Чтобы ключевые моменты текста были понятны дислектикам, используйте жирный шрифт. Вы можете выделить важные блоки текста с помощью рамок и строчных букв более крупного шрифта.
Включите инструменты для повышения удобочитаемости . Предоставьте своим пользователям больше возможностей для понимания текстов в вашем продукте, включив инструменты удобочитаемости. Пользователи с дислексией и слабовидящие получат большую пользу от функции преобразования текста в аудио. Вы можете реализовать эту функцию одним из двух способов: использовать сторонний автоматизированный инструмент или включить в продукт аудиоклипы, в которых кто-то читает текстовые области.
Разделение функциональности . Если на одном экране слишком много функций, попробуйте либо уменьшить количество функций, либо разделить экран на две части. Лучше иметь несколько дополнительных четких экранов приложений, чем несколько перегруженных, которые могут вызвать трудности у пользователей при адаптации к ним.
Отдайте предпочтение гибкости . При разработке для пользователей с дислексией сделайте своим приоритетом создание гибкого продукта. Не мешало бы построить несколько путей, чтобы добраться до одного и того же места назначения для ваших пользователей. Избегайте создания слепых углов, которые заставят ваших пользователей повторять длинные сложные шаги и снова вводить строки текста. Ни один пользователь не хотел бы этого делать.
Разрешить настройку . Дизайнер может выбрать наилучшее сочетание цветов, контрастов, шрифтов и стилей. Однако для некоторых пользователей вашего цифрового продукта предопределенный выбор может оказаться неблагоприятным. Не мешало бы разрешить разумный уровень настройки дизайна. Позвольте пользователям выбирать шрифты, увеличение текста, цвет текста и фона.
Дополните текст графикой . По возможности используйте значки для поддержки текста или используйте их вместо текста для лучшего понимания. Изображения и видео должны помогать текстам, делать дизайн более понятным и улучшать его доступность. Сопровождайте видео субтитрами для слабовидящих пользователей.
Используйте автозаполнение, напоминания и подсказки . Не заставляйте пользователей вашего приложения запоминать все, что они когда-либо вводили и искали в вашем приложении. Включение поля поиска, похожего на Google, с предложениями из истории пользователя будет очень полезным. По возможности давайте советы своим пользователям.
Включите автокоррекцию . Раздражает, когда приложение не понимает вас только потому, что вы неправильно написали одну букву. Такие сервисы, как Pinterest, угадывают, что имеет в виду пользователь, и дают ему варианты на выбор. Такая функция может быть ценна для пользователей с дислексией. Также он будет полезен младшей аудитории и не носителям языка.
Чем проще, тем лучше . Не перегружайте свой дизайн ненужными элементами, которые потенциально могут отвлекать и озадачивать ваших пользователей. Дизайн UX/UI для дислексии должен снижать когнитивную нагрузку на пользователя. Оно должно быть максимально четким и не отвлекающим внимание.

Плохие практики для дизайна дислексии

Есть некоторые практики UX/UI, которые кажутся логичными и полезными разработчикам и обычным пользователям, но несколько неблагоприятны для дислексиков. Вот краткий обзор плохих практик, которых следует избегать:

Большие блоки тяжелого текста . Хотя они кажутся хорошим вариантом для размещения как можно большего количества текста на одном экране, они всегда являются плохим выбором с точки зрения удобочитаемости и удобства для пользователя.
Потрясающие экраны . Не сжимайте все на одном экране. Согласно последним тенденциям разработки и дизайна мобильных и веб-приложений, минимализм — это новый черный цвет. Взгляните на страницу профиля в Instagram. Вы не видите все функции приложения на нем. Нет отвлекающих факторов и визуального шума.
Двойной интервал в конце предложения . Некоторые могут подумать, что двойные пробелы в конце предложений делают текст более понятным. Однако это не относится к пользователям с дислексией. Двойной интервал делает текст размытым, как река в глазах дислектика.
Использование непонятных кнопок . Когда на кнопке написано «Нажмите здесь», ее значение понятно разработчику и создателю приложения, но может быть не столь очевидно для пользователей с дислексией. Сделайте команды на кнопках максимально простыми и однозначными.
Вся информация на одной странице . Хотя было бы логично разместить всю информацию об одном предмете в одном месте, это не очень хорошая идея для пользователей с дислексией. Дайте вашим пользователям возможность получить одни и те же данные, используя несколько разных путей.

Последние мысли

Интернет возник как технология, доступная каждому. Разработчики и дизайнеры должны обеспечивать недискриминацию цифровых технологий для всех типов пользователей, какими бы продвинутыми и сложными они ни были.

Развитие технологии смартфонов привело к тому, что миллионы людей перешли на мобильные устройства как на основной источник онлайн-общения, взаимодействия и развлечений. Создание веб-приложений и мобильных приложений с учетом доступности должно стать второй натурой для разработчиков и дизайнеров.

Вопрос доступности для дислектиков давно изучается, и уже есть несколько хороших практик, которые вы можете использовать в своем проекте. Нет ничего сверхсложного в том, чтобы сделать дизайн вашего цифрового продукта доступным для пользователей с дислексией. Доступность не отнимет у вас стильности и элегантности вашего продукта. В качестве бонуса это сделает его более выразительным и человечным. Ведь информация должна быть доступна каждому, так как это неотъемлемая часть нашей жизни.

Ресурсы для работы с дислексией:

Ниже вы найдете список соответствующих актуальных ресурсов, которые могут помочь вам улучшить дизайн UX/UI для пользователей с дислексией:

20 дизайнерских ресурсов для облегчения обучения детей с дислексией
Британская ассоциация дислексии: Руководство по стилю дислексии
Планета UX: дизайн для людей с дислексией
Dyslexia International i (некоммерческий информационный ресурс)
Центр дислексии Хелен Аркелл (благотворительный и информационный ресурс)
Международная ассоциация дислексии
Usabilla: как создать дизайн для людей с дислексией