васильев дмитрий. wcag как инструмент повышения ...

WCAG как инструмент повышения конверсии

Дмитрий Васильев

Заблуждения

«Пользователей с ограниченными возможностями мало»

Заблуждения

«Пользователей с ограниченными возможностями мало»

На самом деле это:

- слабовидящие

- слепые

- люди с психическими расстройствами

- пожилые

- люди, для которых язык контента не родной

- пользователи мобильных устройств

Заблуждения

«Пользователей с ограниченными возможностями мало»

В процентах:

- слабовидящие и слепые ~ 9% населения (ВОЗ)

- старше 55 лет ~ 10% аудитории Рунета (TNS)

- пользователи мобильных устройств ~ 35% аудитории (Liveinternet)

Заблуждения

«Пользователей с ограниченными возможностями мало»

На самом деле это:

От 15% до 30% посетителей вашего сайта.

Заблуждения

«Адаптация сайта для пользователей с ограниченными возможностями неоправданно дорога»

Заблуждения

«Адаптация сайта для пользователей с ограниченными возможностями неоправданно дорога»

WCAG 2.0 говорит о том, что это не так.

Текст — лучшая форма подачи контента

Текст можно увеличить, послушать и даже почувствовать.

Что делать, если текст не применим?

Что делать, если текст не применим?

Нужно: краткое текстовое пояснение / title, label / альтернатива

Мультимедиа-контент

Мультимедиа-контент

субтитры / текстовая расшифровка / аудио-версия видео

пауза / отключение

Сенсорные характеристики

Выберите цвет:

Ваш результат:

Результат заполнения полей:

Имя

E-mail

Сенсорные характеристики

Выберите цвет:

Красный Зеленый Синий

Ваш результат:

плохой

хороший

Результат заполнения полей:

Поле e-mail не соответствует формату

Имя

E-mail

Типографика. Скажи нет:

Тексту, выровненному по обоим краям. Такой текст неимовернейшим образом затрудняет чтение.

Длинным строкам. В строке должно быть не больше 60 символов, иначе она будет плохо читаться и напрягать читателя.

Тексту, недостаточно контрастному по отношению к фону.

Управление с клавиатуры

Ограниченный во времени контент

Поддержка в навигации и поиске

- несколько видов навигации

- заголовок страницы как можно выше

- правильные тексты ссылок (а это неправильный)

- нет второстепенному контенту в шапке

Предсказуемость контента

Это ссылка

Это открытие слоя

Это поле ввода и кнопка отправки

Это иконки к стандартным действиям

Избыточная поддержка пользователя

- исчерпывающие объяснения

- отмена действий

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

Методика

Составление Customer Journey Map — карты путей покупателя.

Формируем задачу

Цикл обработки посетителя сайта:

Приход Магия Результат

Придумываем персонажей

Не обобщенные, а максимально конкретизированные.

Составляем карту путей

Составление карты

Составление карты

Составление карты

Составление карты

Составление карты

Персонажи

Николай ПетровичПредприниматель

Руководит небольшой клининговой компанией, живет в Новоульяновске

34 года, женат, 2 детей 3 и 5 лет

Активный, «продажник», максимум времени уделяет работе, любит отдыхать в Египте и Европе, увлекается дайвингом, живет в коттедже в пригороде.

Ищет новый ноутбук для работы. Далек от IT.

Персонажи

Антонина СергеевнаДомохозяйка

Растит внуков

57 лет, замужем, две дочки, внучка и внук 6 лет

Живет с мужем и дочкой (та в разводе), тратит все время на внуков и дом, любит смотреть телевизор, немного ворчливая.

Ищет мультиварку по совету подруг.

Персонажи

ТимурСтудент 1 курса УлГУ

17 лет. Живет с родителями, средний достаток.

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

Ищет наушники для айфона.

Николай Петрович

Структурирование контента

Отделение второстепенного контента

Избыточная поддержка пользователя

Тимур

Облегченная версия контента

Предсказуемость управляющих элементов

Альтернативное представление нетекстового контента

Отделение второстепенного контента

Антонина Сергеевна

Избыточная поддержка пользователя

Альтернативная навигация (поиск)

Избыточное время на принятие решения

Линейное представление информации

Линейное представление

Карточка товара

Линейное представление

Карточка товара Карточка товара

Сопроводительные товары

Доставка, гарантии

Купить

Карта

Всё!

Спасибо за внимание

Дмитрий Васильев

Twitter: @dimatwork

Facebook: dimatwork

Сайт: netcat.ru