![Page 1: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/1.jpg)
WCAG как инструмент повышения конверсии
Дмитрий Васильев
![Page 2: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/2.jpg)
Заблуждения
«Пользователей с ограниченными возможностями мало»
![Page 3: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/3.jpg)
Заблуждения
«Пользователей с ограниченными возможностями мало»
На самом деле это:
- слабовидящие
- слепые
- люди с психическими расстройствами
- пожилые
- люди, для которых язык контента не родной
- пользователи мобильных устройств
![Page 4: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/4.jpg)
Заблуждения
«Пользователей с ограниченными возможностями мало»
В процентах:
- слабовидящие и слепые ~ 9% населения (ВОЗ)
- старше 55 лет ~ 10% аудитории Рунета (TNS)
- пользователи мобильных устройств ~ 35% аудитории (Liveinternet)
![Page 5: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/5.jpg)
Заблуждения
«Пользователей с ограниченными возможностями мало»
На самом деле это:
От 15% до 30% посетителей вашего сайта.
![Page 6: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/6.jpg)
Заблуждения
«Адаптация сайта для пользователей с ограниченными возможностями неоправданно дорога»
![Page 7: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/7.jpg)
Заблуждения
«Адаптация сайта для пользователей с ограниченными возможностями неоправданно дорога»
WCAG 2.0 говорит о том, что это не так.
![Page 8: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/8.jpg)
Текст — лучшая форма подачи контента
Текст можно увеличить, послушать и даже почувствовать.
![Page 9: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/9.jpg)
Что делать, если текст не применим?
![Page 10: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/10.jpg)
Что делать, если текст не применим?
Нужно: краткое текстовое пояснение / title, label / альтернатива
![Page 11: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/11.jpg)
Мультимедиа-контент
![Page 12: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/12.jpg)
Мультимедиа-контент
субтитры / текстовая расшифровка / аудио-версия видео
пауза / отключение
![Page 13: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/13.jpg)
Сенсорные характеристики
Выберите цвет:
Ваш результат:
Результат заполнения полей:
Имя
![Page 14: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/14.jpg)
Сенсорные характеристики
Выберите цвет:
Красный Зеленый Синий
Ваш результат:
плохой
хороший
Результат заполнения полей:
Поле e-mail не соответствует формату
Имя
![Page 15: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/15.jpg)
Типографика. Скажи нет:
Тексту, выровненному по обоим краям. Такой текст неимовернейшим образом затрудняет чтение.
Длинным строкам. В строке должно быть не больше 60 символов, иначе она будет плохо читаться и напрягать читателя.
Тексту, недостаточно контрастному по отношению к фону.
![Page 16: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/16.jpg)
Управление с клавиатуры
![Page 17: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/17.jpg)
Ограниченный во времени контент
![Page 18: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/18.jpg)
Поддержка в навигации и поиске
- несколько видов навигации
- заголовок страницы как можно выше
- правильные тексты ссылок (а это неправильный)
- нет второстепенному контенту в шапке
![Page 19: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/19.jpg)
Предсказуемость контента
Это ссылка
Это открытие слоя
Это поле ввода и кнопка отправки
Это иконки к стандартным действиям
![Page 20: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/20.jpg)
Избыточная поддержка пользователя
- исчерпывающие объяснения
- отмена действий
Встаньте на место пользователя, у которого потенциальные проблемы с вашим контентом.
![Page 21: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/21.jpg)
Методика
Составление Customer Journey Map — карты путей покупателя.
![Page 22: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/22.jpg)
Формируем задачу
Цикл обработки посетителя сайта:
Приход Магия Результат
![Page 23: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/23.jpg)
Придумываем персонажей
Не обобщенные, а максимально конкретизированные.
![Page 24: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/24.jpg)
Составляем карту путей
![Page 25: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/25.jpg)
Составление карты
![Page 26: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/26.jpg)
Составление карты
![Page 27: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/27.jpg)
Составление карты
![Page 28: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/28.jpg)
Составление карты
![Page 29: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/29.jpg)
Составление карты
![Page 30: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/30.jpg)
Персонажи
Николай ПетровичПредприниматель
Руководит небольшой клининговой компанией, живет в Новоульяновске
34 года, женат, 2 детей 3 и 5 лет
Активный, «продажник», максимум времени уделяет работе, любит отдыхать в Египте и Европе, увлекается дайвингом, живет в коттедже в пригороде.
Ищет новый ноутбук для работы. Далек от IT.
![Page 31: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/31.jpg)
Персонажи
Антонина СергеевнаДомохозяйка
Растит внуков
57 лет, замужем, две дочки, внучка и внук 6 лет
Живет с мужем и дочкой (та в разводе), тратит все время на внуков и дом, любит смотреть телевизор, немного ворчливая.
Ищет мультиварку по совету подруг.
![Page 32: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/32.jpg)
Персонажи
ТимурСтудент 1 курса УлГУ
17 лет. Живет с родителями, средний достаток.
Раздолбай и двоечник, любит активное времяпровождение и выпить, есть девушка. Социален в меру, любит тяжелую музыку, играет в футбол.
Ищет наушники для айфона.
![Page 33: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/33.jpg)
Николай Петрович
Структурирование контента
Отделение второстепенного контента
Избыточная поддержка пользователя
![Page 34: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/34.jpg)
Тимур
Облегченная версия контента
Предсказуемость управляющих элементов
Альтернативное представление нетекстового контента
Отделение второстепенного контента
![Page 35: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/35.jpg)
Антонина Сергеевна
Избыточная поддержка пользователя
Альтернативная навигация (поиск)
Избыточное время на принятие решения
Линейное представление информации
![Page 36: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/36.jpg)
Линейное представление
Карточка товара
![Page 37: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/37.jpg)
Линейное представление
Карточка товара Карточка товара
Сопроводительные товары
Доставка, гарантии
Купить
![Page 38: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/38.jpg)
Карта
![Page 39: васильев дмитрий. Wcag как инструмент повышения конверсии](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549e747ab379596d4b8b45aa/html5/thumbnails/39.jpg)
Всё!
Спасибо за внимание
Дмитрий Васильев
Twitter: @dimatwork
Facebook: dimatwork
Сайт: netcat.ru