5 способов улучшить UX дизайн вашего веб-сайта

Вы разработали впечатляющий пользовательский интерфейс, которым вы особенно гордитесь. Однако вы столкнулись только с одной проблемой: она доступна не всем пользователям.

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

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

Размер шрифта, читаемость и разборчивость

Согласно опросу, страницы, переполненные слишком большим количеством контента, возглавляли список проблем для респондентов с ограниченными возможностями.

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

По сути, вам необходимо систематизировать свой бизнес, один из шагов которого — сделать ваши страницы понятными и удобными для чтения.

Вы можете сделать это, используя встроенные функции форматирования. Любая страница с длинными блоками тестов должна быть разделена на подзаголовки с четким и очевидным заголовком – тегом h1.

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

Убедитесь, что ваши подзаголовки правильно помечены как таковые, а не только шрифтом большего размера. Если вы используете список, отметьте его как таковой в HTML тегами ul или li, что обеспечит его отображение в правильном формате.

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

Также было высказано предположение, что шрифты без засечек – и да, это включает (но не ограничивает вас) шрифты без засечек – может быть легче читать людям с дислексией.

Цвет дизайна сайта

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

Здесь краудсорсинговое тестирование может быть полезным инструментом: вы получите несколько разных точек зрения на то, насколько легко различать, особенно если вы тестируете с использованием черного и белого.

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

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

Разделение HTML и CSS

К счастью, теперь мы можем разделить HTML и CSS. Вы можете создать свою страницу с помощью CSS-элементов там, где они вам нужны, например, меню сайта в верхней части страницы, в то время как HTML-код, который удерживает их на месте, работает так же хорошо в нижней части страницы.

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

Описание полей ссылок и форм

Общие CTA (призыв к действию)

Сколько страниц вы просмотрели, где призыв к действию (CTA) является общим ‘нажмите здесь » или «подробнее»? И как вы думаете, насколько легко отличить эти кнопки друг от друга, если все они последовательно считываются устройством чтения с экрана?

Ну, вы уже догадались: совсем не просто.

Удобно, что для этого есть быстрое решение: вы можете либо назвать свои ссылки чем-то более конкретным, что люди без нарушений зрения также смогут увидеть, либо вы можете использовать атрибуты aria-метки.

Это означает, что видимые элементы вашего сайта остаются прежними, но программа чтения с экрана объявит альтернативную метку. Ваша надпись «подробнее» может затем превратиться в «подробнее о доступности веб-сайта» при чтении вслух.

Формы

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

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

Это может быть особенно полезно для вашей стратегии таргетинга и ретаргетинга: кому не нужно больше подписчиков?

Загрузки

Еще одна простая настройка-помечать любые ссылки на скачивание как таковые. Это довольно полезно и для зрячих пользователей, поэтому имеет смысл закодировать его в CSS. Вы даже можете отметить, насколько велик файл, на случай, если люди просматривают его на своих мобильных телефонах и не хотят загружать большие файлы с данными или слабый сигнал Wi-Fi.

Изображения и видео

Еще один элемент, который часто упускается из виду с точки зрения доступности, — это чередование текста и аудио с визуальными элементами. Все ваши основные изображения должны быть помечены альтернативным текстом, кратко описывающим то, что изображено на картинке. В идеале все видео должны сопровождаться стенограммами и/или субтитрами для тех, кто плохо слышит. Вы даже можете добавить звуковое описание к любому видео, если это кажется подходящим.

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

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

Вывод

Кто знает, может быть, вы даже найдете решение, которое станет стандартной практикой, проложив путь к большей доступности и удобству использования. Конечно, это может потребовать небольшой работы, но преимущества – и не только с финансовой точки зрения – бесконечны. Оптимизируйте работу вашего сайта для всех, кто имеет доступ в профессиональном стиле, и потенциал вашего сайта будет безграничным.