Обучение ui/ux дизайну

Как «Яндекс» создает интерфейсы

Менеджер отдела создания поисковых интерфейсов в «Яндексе», Денис Кузнецов, рассказал о том, как разрабатываются интерфейсы для людей, у которых ограниченные возможности: что следует учитывать в ходе проектирования, какие проводить проверки, а также что означает доступность сервиса.

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

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

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

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

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

Как «Яндекс» создает доступные интерфейсы

Катарактой:

Как «Яндекс» создает доступные интерфейсы

Глаукомой:

Как «Яндекс» создает доступные интерфейсы

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

С чего начать

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

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

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

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

Графическая составляющая Accessibility

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

Для графической составляющей Accessibility у нас работают три ключевых правила:

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

С опасным сочетанием цветов мы столкнулись при создании интерфейса «Яндекс.Пробок». Команда сервиса потратила немало сил и времени, чтобы подобрать такие цвета зеленого и красного:

Как «Яндекс» создает доступные интерфейсы

Их уже можно легко различить между собой при различных нарушениях цветовосприятия (оно встречается у 0,8% женщин и 8% мужчин):

Как «Яндекс» создает доступные интерфейсы

Технические аспекты и невизуальный дизайн

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

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

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

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

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

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

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

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

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

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

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

О доступности «Яндекса»

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

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

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

Сегодня наше общение стало уже регулярным. Совсем недавно мы проводили очередной опрос слепых и слабовидящих пользователей, ставший ежегодным, в котором охватили 549 респондентов, что приблизительно составляет от 1,7% до 3,9% всей нашей аудитории (согласно сведениям о количестве незрячих, либо людей на грани слепоты в Российской Федерации) и позволяет экстраполировать итоги опроса на всю нашу целевую аудиторию. Регулярные опросы, анкетирования, разговоры, ux-тестирования и взаимодействия — все это помогает нам в работе по адаптации наших сервисов.

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

  • При помощи тестировщиков нашей команды мы выполняем первичный аудит сервиса и выявляем самые проблемные места.
  • Разработчики делают доработки интерфейса.
  • Выполняем повторное тестирование и смотрим на доработанный интерфейс. Проверяем уровень изменений и выявляем любые новые проблемы.
  • Повторяем этапы 2-3, пока все проблемы доступности не будут ликвидированы (зависит от трудности работ).
  • Выкатываем все изменения, а также рассказываем о доступности очередного нового сервиса Яндекса.

Здесь следует заметить, что продукты «Яндекса» могут выходить и без статуса доступного. Тем не менее, если об Accessibility заявляется в официальном порядке, то это означает, что доступность проверялась не один раз и этому предшествовал очень серьезный объем работ по специальной схеме. Мы крайне ответственно относимся к присвоению такого статуса продукту.

В «Яндексе» для пользователей с ограниченными возможностями сейчас доступны главная страничка в доменах .ua, .kz, .ru, .by, «Почта» (ее легкая версия), а также «Яндекс.Браузер». Работа над полной адаптацией многих сервисов идет, часть из них уже поддерживает базовую доступность.

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

Что впереди

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

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

Источник

Понравилось? Расскажите друзьям:






Комментарии:

(напишите, что вы думаете об этом)