ASTY.PRO - full service digital agency.

Создание креативных интернет-проектов
и их последующее продвижение в Интернете

09
Январь

Обеспечение доступности сайтов с помощью лучших практик веб-дизайна

[ Мета-теги ] #веб дизайн

Большинство людей, недолго думая, смогут вспомнить хотя бы одно учреждение, которое недоступно для маломобильной группы граждан. Прежде всего, это связано с тем, что в них не предусмотрены пандусы для инвалидов-колясочников. А вот аналогичных недочетов своего пользовательского интерфейса (UI-UserInterfaces) мы упорно не хотим видеть. При наличии неудобного для визуального восприятия дизайна гораздо сложнее получить положительный пользовательский опыт (UserExperience-UX).

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

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

  • 4% от всего населения планеты относится к категории слабовидящих людей;
  • 4% мирового населения обладают плохим зрением;
  • 0,6% людей относится к абсолютно незрячим.

Общая численность людей, имеющих данные проблемы со зрением, превышает полмиллиарда человек. А это значит, что они не могут воспользоваться вашим продуктом в связи с его ограничениями по степени доступности. Год 2017-й стал переломным годом для специалистов по веб-дизайну с точки зрения доступности сайтов. Связано это с многочисленными судебными рассмотрениями: за пару предшествующих лет свыше 240 компаний в Америке получили иски за то, что их сайты не обладают достаточной доступностью. Причем большинством крупнейших компаний приоритет при разработке сайта отдавался разнообразию и степени включенности в процессы различных групп населения. Вы должны быть уверены на 100% в том, что ваша компания доступна как можно большему количеству людей. Вы должны проявлять заботу по отношении к своей аудитории.

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

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

Доступность оказывает влияние на каждого пользователя

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

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

Как, исходя из зрительных расстройств, может меняться UX?

Создание доступного дизайна возможно только в том случае, если специалист по веб-дизайну имеет представление о том, как воспринимают окружающий мир люди с дефектами зрения. Согласно данным ВОЗ примерно 43% населения с аномалиями зрения страдают дальнозоркостью (в том числе и старческой), близорукостью или астигматизмом, у 33% диагностирована катаракта, а 2% страдают от глаукомы. Приблизительно 4,5% людей являются дальтониками, а дальтонизм оказывает огромное влияние на восприятие пользователем дизайна.

Различают дальтонизм трех основных видов:

 

Монохроматичность

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

 

Дихромия

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

 

Аномальная трихроматичность

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

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

индивидуальный подход в веб дизайне

Эффективное использование цвета в веб-дизайне

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

Ниже мы приведем перечень основных правил, которые необходимо соблюдать специалисту по веб-дизайну:

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

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

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

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

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

Дальтоники не способны распознавать некоторые цвета:

  • 6% населения не способны воспринимать зеленый цвет. Обозначается подобная аномалия термином дейтенаропия;
  • 2% населения не могут различать красный цвет, и называется такое нарушение зрения протанопией;
  • Тританопия встречается примерно у 1% населения и означает отсутствие способности к распознаванию зеленого, синего и фиолетового цветов.

определение дальтонизма

Для подчеркивания контраста можно воспользоваться узорами и текстурой. Для дальтоников восприятие диаграмм и графиков – довольно непростая задача. Поэтому рекомендуется использование при создании дизайна контрастных узоров и текстовой информации.

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

Разработка доступного пользовательского интерфейса

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

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

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

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

Word Wide Web Consortium, W3CКонсорциумом Всемирной паутины – Word Wide Web Consortium, W3C – было выпущено специальное Руководство, в котором содержится подробное описание перечня рекомендаций, как повысить доступность Интернета.

Различают три уровня доступности:

  • Уровень А – содержит минимальное количество требований;
  • Уровень АА – содержит аудиозаписи и видеоролики;
  • Уровень ААА – обозначение высшей степени доступности.

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

И портфолио должно быть доступным для всех пользователей!

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

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

Оставьте комментарий

Комментарии (0)

Предложить проект

Категории

Свежие записи