Пользовательская доступность как залог высокой конверсии и социальной ответственности ресурса

Posted on by riasevastopol

Для начала проясним смысловое поле. Пользовательская доступность (от англ. — form accessibility) довольно часто описывается как принцип построения UX и UI сайта, разрешающий людям с ограниченными возможностями полноценно изучать интернет-ресурс: как посредством программ чтения с экрана, клавиатуры и других аналогичных устройств, так и благодаря эргономичной организации самого сайта.

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

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

  • в Англии из-за недостаточной доступности сайтов бронирования в течение года 2,500,000 билетов на концерты остаются не реализованными.
  • в Соединенных Штатах совокупные утраты от недостаточной работы с потребителями, имеющими неприятности со зрением, оцениваются в $175,000,000,000.
  • агентство AbilityNet информирует, что интернет-ритейлеры Англии из-за неудовлетворительной доступности их сайтов за год теряют порядка ?50,000,000,000.

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

А итог значительно ответственнее высокомерных заявлений. Желаете узнать, из-за чего и ваш интернет-ресурс будет дешёвым?

Просматривайте ниже.

  • Создание адаптивной среды для улучшения пользовательского опыта

5 обстоятельств позаботиться о формах доступности на вашем лендинге

Разумеется, что одна из обстоятельств, из-за чего обладатели сайтов должны имплементировать в них формы доступности, — чуткое отношение и здравый смысл к людям, имеющим неприятности со здоровьем. Помимо этого, в соответствии с заявлению Рабочей группы по дополнительным расходам Англии (The Extra Costs Commission), калеки вынуждены тратить до ?550 каждый месяц, потому, что применять онлайн-сервисы, разрешающие сравнивать цены в различных магазинах, они не в состоянии.

Ян Макрае (Ian Macrae), первый слепой редактор издания «Disability Now» (с англ. — «Инвалидность сейчас»), приравнивает онлайн-шоппинг к обладанию свободой, а классические походы по магазинам вычисляет обременительным и времязатратным занятием. Из этого направляться, что в случае если ваш вебмагазин будет создан с учетом требований данной категории клиентов, то своим вниманием они вас не обделят.

Следующая обстоятельство — требования законодательства. В РФ развитие юридической базы разглядываемой области идет с заметным отставанием, но в Англии и США вы обязаны сделать ваш сайт дешёвым для всех групп населения.

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

Не это ли ведет к высокой посещаемости интернет-ресурса и к понижению затрат на контекстную рекламу?

В-четвертых — дешёвый дизайн понятен каждому. Делая лендинг дешёвым для людей с ограниченными возможностями, вы оптимизируете его и для всех остальных.

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

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

1. Обеспечьте эргономичную навигацию по сайту при помощи клавиши Tab

Tabbing Order — способ разметки страницы, благодаря которому вы определяете тот порядок интерактивных элементов и ссылок, по которому и будет перемещаться пользователь, нажимая на клавишу Tab. Оптимизация маршрута продвижения визитёра подразумевает диагностику этого пути на доступность всех элементов и необходимых форм. Поведение совокупности должно быть предсказуемо и ясно.

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

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

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

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

Достаточно щелкнуть по полю, и оно возрастает

Как настроить tabbing order?

Последовательность HTML-ссылок, полей и интерактивных элементов подписных форм задается в исходном коде страницы. Исходя из этого уже на этапе программирования стоитзадуматься над тем, как соотнести его отображение и код на экране.
Не всегда удается все правильно подсчитать и предугадать. Для таких обстановок предусмотрен особый инструмент tabindex. Он окажет помощь вам или поменять порядок элементов, или отметить элемент, что не есть по умолчанию интерактивным (к примеру, блок

), или добавить новый.

Дабы задействовать tabindex, достаточно всего лишь добавить в код еще одно свойство с порядковым номером (к примеру, ).
Так возможно разметить всю страницу. В случае если же ваш исходный код безукоризнен и вы не желаете вносить трансформаций в существующую разметку, а вам необходимо как-то обозначить новый элемент, сделайте следующее: добавьте tabindex=”0”. Новый элемент будет следовать за ближайшим к нему на странице.

  • Остерегайтесь горизонтальной имитации и прокрутки управления жестами для десктопов

2. Значения полей должны быть предельно понятны

Назначение каждого из полей подписной либо каждый формы должно быть максимально ясно. Исследовательский центр The Baymard Institute постановил, что 92% всех вебмагазинов не следуют этому правилу и предлагают своим визитёрам совсем абсурдные заглавия полей форм. Для пользователей, каковые будут заполнять эти формы при помощи скрин-ридеров и которым недоступен контекст, заглавия этих полей являются кроме того серьёзнее всего остального.

Посмотрите на дизайн формы SaaS-агентства Modo (форма для оплаты одолжений картой). Ясно и ясно. Указано наименование поля, а в скобках дано пояснение.

Поле «Имя» (то, что на карте), номер карты (без пробелов и тире), код безопасности (3 последних цифры на задней стороне карты).

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

HTML-разметка

Заглавия полей (метки) не всегда обозначаются особом тегом. Благодаря возможностям CSS они смогут смотреться как метки, но будут неактивными, потому как текст не будет иметь связи с соответствующим полем формы.

Пример кода без тега:

Пример кода с тегом:

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

Размещение метки

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

  • Маттео Пензо (Matteo Penzo), автор и основатель онлайн-издания, разбирающего вопросы UX-дизайна, Flashability, разделяет точку зрения, что самое удачное положение для метки поля формы — над самим полем, потому, что это требует мельчайших упрочнений при фиксации глаз.
  • консалтинговое агентство CX Partners солидарно с мнением Маттео, но только в том случае, в то время, когда поля в форме расположены вертикально;
  • кроме этого CX Partners уверен в том, что выравнивание метки по левому краю более действенно;
  • авторы блога UX Movement высказываются пара в противном случае. На их взор, действеннее всего размещать метку в самого поля и сглаживать его по верхней границе.

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

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

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

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

  • Навигация с клавиатуры как оптимизация юзабилити сайта

3. Заостряйте внимание визитёров на том формате данных, что вам нужен

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

Надпись в блоке справа: «Ваш пароль обязан: быть не меньше 8 знаков длиной, включать цифру» и т. д.

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

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

На сайте Geico, во-первых, указан формат даты, что нужно ввести, а во-вторых, обозначено, как необходимо ввести номер полиса (без пробелов).

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

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

  • Как повысить конверсию посадочной страницы посредством email-маркетинга?

4. Создайте адекватное оповещение об неточностях

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

Исходя из этого вам направляться позаботиться о благовидных, понятных и, самое основное, дешёвых сообщениях об неточностях.

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

В чем секрет действенного сообщения об неточности?

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

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

Еще одна обстоятельство, из-за чего необходимо выводить как раз текстовое сообщение об неточности, — необходимость растолковать пользователю, что он сделал неправильно, дабы человек смог ее исправить. Но маленькое слово «email» над полем «Email» не позволит визитёру ничего, не считая удивление.

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

При введении таких данных, как, к примеру, адрес электронной почты, вовремя сообщите пользователю о отысканных опечатках — раньше, чем он постарается надавить «Enter». Или, в случае если введенный номер кредитной карты через чур мал, избегайте пространных сообщений типа «Введите верный номер»: напишите, что не достаточно чисел.

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

«Маленький пароль легко взломать. Придумайте пароль длиной не меньше 8 знаков».

Если бы вы применяли, кроме цифр и букв, еще и особые символы (?%*%), то Гугл ответил бы так:

«В пароле дано использовать цифры и буквы алфавита от 0 до 9 и простые знаки препинания».

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

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

Упростите доступ к исправлению неточностей

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

Это особенно полезно тем людям, каковые трудятся с ресурсом только с клавиатуры или применяют особое ПО (в таких случаях, дабы возвратиться к полю с неточностью, необходимо совершить с дюжина дополнительных действий).

Прошу вас, введите email-адрес правильно.

Люк Вроблевски (Luke Wroblewski), директор по продукту в Гугл и сооснователь сервиса опросов Polar, совершил маленькой опыт, касающийся совокупности проверки орфографии, и взял следующие результаты:

  • их применение повышает показатели успешности на 22%;
  • число неточностей значительно уменьшается на 22%;
  • повышает удовлетворенность пользователей сервисом на 31%;
  • время заполнения формы уменьшается на 42%;
  • значительно уменьшается число зрительных фиксаций на 41%.

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

Это комфортно и незрячим людям, и всем остальным пользователям.

5. Будьте осмотрительны с применением иконок (icon fonts)

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

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

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

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

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

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

Сэрен Дэвис (Seren Davies), начинающая веб-разработчик, в собственной презентации «Смерть иконкам» (Death to Icon Fonts) демонстрирует пример страницы, в котором использованы эти элементы. В том месте кроме этого применен системный шрифт, что преобразует текст совершает его более удобным для чтения. При переводе на системный шрифт все иконки приняли форму ничего не говорящих прямоугольников.

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

Альтернативы иконкам

SVG (масштабируемая векторная графика) — это формат графики, выполненный в XML. Они являются красивой заменой icon fonts, по причине того, что весят значительно меньше, масштабируемы и не будут искажаться, в случае если перевести текст на системный шрифт. И уж совершенно верно они не будут тормозить вашу страницу.

  • Как оптимизировать

Случайные статьи:

Залог — Дмитрий Дождев


Подборка похожих статей:

riasevastopol

More Posts