SlideShare uma empresa Scribd logo
1 de 39
Baixar para ler offline
Роль бизнес-аналитика при
разработке доступного веб-контента
Евгения Лученок,
Екатерина Кичкайло,
Coherent Solutions Inc./ISsoft
План
1. Что такое доступность?
2. Первые шаги. Успехи и неудачи
3. Задачи и роль бизнес-аналитика
В широком смысле доступность (accessibility) - это
совокупность условий и требований к создаваемой человеком
окружающей и информационной среде, позволяющая
беспрепятственно передвигаться и воспринимать жизненно
важную информацию.
Доступность означает возможность
понимать, использовать и
взаимодействовать с веб-контентом
людям с ограниченными
возможностями.
Роль аналитика при создании доступного веб-контента
• АктоРеабилитацииИнвалидов(Section508ofthe
Rehabilitation Act,1998)
o 16правил,которымдолженсоответствоватьвеб-сайт
• Руководство по обеспечению доступности веб-
контента 2.0, 2008 (Web Content Accessibility
Guidelines - WCAG)
o 12рекомендаций.Каждаяимеет рядкритериеввыполненияс
приоритетами«обязательно»,«желательно»или
«опционально»
Воспринимаемость Управляемость
Понятность Надежность
Наш проект
Фаза 1 Цель
Доступный портал,
соответствующий
стандарту США
Проверка разметки с помощью
Comply First
Критерии приемки:
• Отсутствие ошибок в отчете
2015
Пример отчета
Наш проект – Фаза 1
• Позволяет выявить несоответствия
требованиям стандарта
НО
• Не учитывает поведение и потребности
пользователя
• Пропускает динамически подгружаемый
контент
• Заимствованные элементы интерфейса не
соответствуют стандартам доступности
Наш проект
Фаза 2 Цель
Доступный портал,
соответствующий
стандарту США
Критерии приемки:
• Можно управлять контентом с помощью клавиатуры
• Контент страниц воспринимаем для пользователей
2016
Трудности
• Отсутствие коммуникации с конечными
пользователями
• Недостаточное понимание некоторыми ЗЛ
важности веб-доступности
• Сложности в согласовании изменений
существующего интерфейса
• Новая терминология
БА активности
Анализ
пользователей
Анализ
поведения
пользователей
Понимание
проблем
доступности
Документиро-
вание
Используемые БА техники
Интервью
Анализ
докумен-
тации
Анализ
интер-
фейсов
Мозговой
штурм
Глоссарий
Сквозной
структурный
контроль
Интервью
•Кто наши пользователи, в чем их особенности,
ограничения?
•Самостоятельно ли наши пользователи будут
пользоваться порталом?
•Кто или что им помогает использовать
интернет/портал?
•Знают ли терминологию?
•Какие действия они хотят выполнять на портале?
Категории ограничений
ЗРИТЕЛЬНЫЕ
СЛУХОВЫЕ
МОТОРНЫЕ
КОГНИТИВНЫЕ
Доступ к веб-контенту
Программа
экранного доступа
(скринридер)
Устройство Брайля
Распознавание
голоса
Touch-скрин +
стилус
Веб-браузер +
специальная
программа,
увеличивающая часть
экрана
Текстовый браузер
(отображает только
текстовое содержание
веб-сайта)
Группы пользователей
- IE 11, Firefox
- Уверенные
пользователи
компьютера
- Используют горячие
клавиши
Те, кто
использует
клавиатуру - IE 11, Firefox
- Используют
скринридеры, чтобы
слушать содержимое
страниц
- Используют shortcuts
(однобуквенная
навигация)
- Известна используемая
терминология
- Хорошее владение
скринридером
Слабовидя
щие/
Слепые
Персоны
• Режимчтенияспомощью
скринридера
• Однобуквенная навигация с
помощью скринридера (shortcut)
• Режим фокуса со скринридером и
без
Результаты анализа поведения
Разработка решения
Анализ Согласование Решение
Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
Механизм для пропуска
блоков навигации
Позволяет мне пропустить горизонтальную
и вертикальную навигацию и перейти сразу
к полям для ввода данных
Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
Названия гиперссылок
Дополнительная информация
об услуге
Перенаправляет на другую
страницу для выбора
приложения
Перенаправляет на другую страницу с
остальными транзакциями
Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
Использование карусели
Возможность остановить автоматическую ротацию
Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
Атрибуты элементов на форме
Что
необходимо
заполнить?
Подсказки при
заполнении
Валидация формы
Группировка ошибок
помогает сразу понять, что я
неверно заполнила
Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
Всплывающие подсказки
Подсказки, принимая фокус,
автоматически раскрываются и я
могу их прочесть
Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
Описание картинок
Предыдущий
слайд
Следующий
слайд
Понимаю, как управлять
слайдами
Основные проблемы
доступности
Как перейти к
основному
контенту?
Что можно понять,
если скринридер
читает
«Подробнее»?
Как использовать
двигающиеся
объекты?
Как понять, что за
ошибка на
странице?
Как прочитать
всплывающие
подсказки без
мыши?
Как осуществить
действие при
помощи
клавиатуры?
Как понять что
изображено на
картинке?
Пользователь на
нужной странице?
Как понять состав
всего контента?
Выводы
• Конечно лучше всего сразу задуматься о
принципах доступности
• Изменения будут не заметны для
существующих пользователей
• Простые изменения помогут улучшить
usability вашего сайта
• Старайтесь привлекать реальных конечных
пользователей
Невозможно сделать содержимое веб-
сайта одинаково доступным для всех, но
можно попытаться сделать это для
большего количества людей.
Спасибо за внимание
Евгения Лученок,
Екатерина Кичкайло,
Coherent Solutions Inc./ISsoft
www.facebook.com/evgeniya.luchenok
www.facebook.com/katya.kichkailo
Полезные ссылки
• https://www.w3.org/TR/WCAG20/ -
руководство по обеспечению доступности
веб-контента
• http://www.section508.gov/ - раздел 508
• http://webaim.org/ - примеры и практики
реализации
Роль аналитика при создании доступного веб-контента

Mais conteúdo relacionado

Semelhante a Роль аналитика при создании доступного веб-контента

Основы юзабилити
Основы юзабилитиОсновы юзабилити
Основы юзабилитиVladyslava Rykova
 
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...Yuri Vedenin
 
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...Darya Kosilo
 
Композиционно-графический анализ сайтов органов власти
Композиционно-графический анализ сайтов органов властиКомпозиционно-графический анализ сайтов органов власти
Композиционно-графический анализ сайтов органов властиAnna Milyukova
 
Особенности сбора и анализа требований для мобильных приложений
Особенности сбора и анализа требований для мобильных приложенийОсобенности сбора и анализа требований для мобильных приложений
Особенности сбора и анализа требований для мобильных приложенийSQALab
 
Дизайн пользовательских интерфейсов для разработчиков
Дизайн пользовательских интерфейсов для разработчиковДизайн пользовательских интерфейсов для разработчиков
Дизайн пользовательских интерфейсов для разработчиковIgor Malinovskiy
 
Ux meetup: online media, new interfaces, new approaches
Ux meetup: online media, new interfaces, new approachesUx meetup: online media, new interfaces, new approaches
Ux meetup: online media, new interfaces, new approachesGleb K
 
Что такое адаптивный сайт и кому он нужен
Что такое адаптивный сайт и кому он нуженЧто такое адаптивный сайт и кому он нужен
Что такое адаптивный сайт и кому он нуженADN Digital Studio
 
чмв лекция №3
чмв   лекция №3чмв   лекция №3
чмв лекция №3student_kai
 
чмв лекция №3
чмв   лекция №3чмв   лекция №3
чмв лекция №3student_kai
 
Денисова Юлия, РОСБАНК
Денисова Юлия, РОСБАНКДенисова Юлия, РОСБАНК
Денисова Юлия, РОСБАНКАКМР Corpmedia.ru
 
Как разработать эффективный сайт финансовой организации в 2015 году
Как разработать эффективный сайт финансовой организации в 2015 годуКак разработать эффективный сайт финансовой организации в 2015 году
Как разработать эффективный сайт финансовой организации в 2015 годуborovoystudio
 
Юзабилити сайта
Юзабилити сайтаЮзабилити сайта
Юзабилити сайтаDmitry Satin
 
Юзабилити Сайта
Юзабилити СайтаЮзабилити Сайта
Юзабилити СайтаDmitry Satin
 
Юрий Грановский - Юзабилити в Seo
Юрий Грановский - Юзабилити в SeoЮрий Грановский - Юзабилити в Seo
Юрий Грановский - Юзабилити в SeoUX Ukraine
 
Юзабилити в SEO
Юзабилити в SEOЮзабилити в SEO
Юзабилити в SEOYuryy Granovsky
 
Хитрости и грабли iOS разработки
Хитрости и грабли iOS разработкиХитрости и грабли iOS разработки
Хитрости и грабли iOS разработкиAny Void
 

Semelhante a Роль аналитика при создании доступного веб-контента (20)

Основы юзабилити
Основы юзабилитиОсновы юзабилити
Основы юзабилити
 
UX Design Рrocess
UX Design РrocessUX Design Рrocess
UX Design Рrocess
 
Gov Sites Access2
Gov Sites Access2Gov Sites Access2
Gov Sites Access2
 
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
 
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
 
Композиционно-графический анализ сайтов органов власти
Композиционно-графический анализ сайтов органов властиКомпозиционно-графический анализ сайтов органов власти
Композиционно-графический анализ сайтов органов власти
 
Особенности сбора и анализа требований для мобильных приложений
Особенности сбора и анализа требований для мобильных приложенийОсобенности сбора и анализа требований для мобильных приложений
Особенности сбора и анализа требований для мобильных приложений
 
Дизайн пользовательских интерфейсов для разработчиков
Дизайн пользовательских интерфейсов для разработчиковДизайн пользовательских интерфейсов для разработчиков
Дизайн пользовательских интерфейсов для разработчиков
 
Ux meetup: online media, new interfaces, new approaches
Ux meetup: online media, new interfaces, new approachesUx meetup: online media, new interfaces, new approaches
Ux meetup: online media, new interfaces, new approaches
 
Что такое адаптивный сайт и кому он нужен
Что такое адаптивный сайт и кому он нуженЧто такое адаптивный сайт и кому он нужен
Что такое адаптивный сайт и кому он нужен
 
чмв лекция №3
чмв   лекция №3чмв   лекция №3
чмв лекция №3
 
чмв лекция №3
чмв   лекция №3чмв   лекция №3
чмв лекция №3
 
Денисова Юлия, РОСБАНК
Денисова Юлия, РОСБАНКДенисова Юлия, РОСБАНК
Денисова Юлия, РОСБАНК
 
Как разработать эффективный сайт финансовой организации в 2015 году
Как разработать эффективный сайт финансовой организации в 2015 годуКак разработать эффективный сайт финансовой организации в 2015 году
Как разработать эффективный сайт финансовой организации в 2015 году
 
Юзабилити сайта
Юзабилити сайтаЮзабилити сайта
Юзабилити сайта
 
Юзабилити Сайта
Юзабилити СайтаЮзабилити Сайта
Юзабилити Сайта
 
Usability barcamp
Usability barcampUsability barcamp
Usability barcamp
 
Юрий Грановский - Юзабилити в Seo
Юрий Грановский - Юзабилити в SeoЮрий Грановский - Юзабилити в Seo
Юрий Грановский - Юзабилити в Seo
 
Юзабилити в SEO
Юзабилити в SEOЮзабилити в SEO
Юзабилити в SEO
 
Хитрости и грабли iOS разработки
Хитрости и грабли iOS разработкиХитрости и грабли iOS разработки
Хитрости и грабли iOS разработки
 

Mais de SQALab

Готовим стажировку
Готовим стажировкуГотовим стажировку
Готовим стажировкуSQALab
 
Куда приводят мечты? или Искусство развития тестировщика
Куда приводят мечты? или Искусство развития тестировщикаКуда приводят мечты? или Искусство развития тестировщика
Куда приводят мечты? или Искусство развития тестировщикаSQALab
 
Оптимизация Selenium тестов и ускорение их поддержки
Оптимизация Selenium тестов и ускорение их поддержкиОптимизация Selenium тестов и ускорение их поддержки
Оптимизация Selenium тестов и ускорение их поддержкиSQALab
 
Автоматизация 0.0: 0 - бюджет, 0 - опыт программирования
Автоматизация 0.0: 0 - бюджет, 0 - опыт программированияАвтоматизация 0.0: 0 - бюджет, 0 - опыт программирования
Автоматизация 0.0: 0 - бюджет, 0 - опыт программированияSQALab
 
Нагрузочное тестирование нестандартных протоколов с использованием Citrix и J...
Нагрузочное тестирование нестандартных протоколов с использованием Citrix и J...Нагрузочное тестирование нестандартных протоколов с использованием Citrix и J...
Нагрузочное тестирование нестандартных протоколов с использованием Citrix и J...SQALab
 
Continuous performance testing
Continuous performance testingContinuous performance testing
Continuous performance testingSQALab
 
Конфиги вместо костылей. Pytestconfig и зачем он нужен
Конфиги вместо костылей. Pytestconfig и зачем он нуженКонфиги вместо костылей. Pytestconfig и зачем он нужен
Конфиги вместо костылей. Pytestconfig и зачем он нуженSQALab
 
Команда чемпионов в ИТ стихии
Команда чемпионов в ИТ стихииКоманда чемпионов в ИТ стихии
Команда чемпионов в ИТ стихииSQALab
 
API. Серебряная пуля в магазине советов
API. Серебряная пуля в магазине советовAPI. Серебряная пуля в магазине советов
API. Серебряная пуля в магазине советовSQALab
 
Добиваемся эффективности каждого из 9000+ UI-тестов
Добиваемся эффективности каждого из 9000+ UI-тестовДобиваемся эффективности каждого из 9000+ UI-тестов
Добиваемся эффективности каждого из 9000+ UI-тестовSQALab
 
Делаем автоматизацию проектных KPIs
Делаем автоматизацию проектных KPIsДелаем автоматизацию проектных KPIs
Делаем автоматизацию проектных KPIsSQALab
 
Вредные привычки в тест-менеджменте
Вредные привычки в тест-менеджментеВредные привычки в тест-менеджменте
Вредные привычки в тест-менеджментеSQALab
 
Мощь переполняет с JDI 2.0 - новая эра UI автоматизации
Мощь переполняет с JDI 2.0 - новая эра UI автоматизацииМощь переполняет с JDI 2.0 - новая эра UI автоматизации
Мощь переполняет с JDI 2.0 - новая эра UI автоматизацииSQALab
 
Как hh.ru дошли до 500 релизов в квартал без потери в качестве
Как hh.ru дошли до 500 релизов в квартал без потери в качествеКак hh.ru дошли до 500 релизов в квартал без потери в качестве
Как hh.ru дошли до 500 релизов в квартал без потери в качествеSQALab
 
Стили лидерства и тестирование
Стили лидерства и тестированиеСтили лидерства и тестирование
Стили лидерства и тестированиеSQALab
 
"Давайте не будем про качество"
"Давайте не будем про качество""Давайте не будем про качество"
"Давайте не будем про качество"SQALab
 
Apache.JMeter для .NET-проектов
Apache.JMeter для .NET-проектовApache.JMeter для .NET-проектов
Apache.JMeter для .NET-проектовSQALab
 
Тестирование геолокационных систем
Тестирование геолокационных системТестирование геолокационных систем
Тестирование геолокационных системSQALab
 
Лидер или босс? Вот в чем вопрос
Лидер или босс? Вот в чем вопросЛидер или босс? Вот в чем вопрос
Лидер или босс? Вот в чем вопросSQALab
 
От Зефира в коробке к Structure Zephyr или как тест-менеджеру перекроить внут...
От Зефира в коробке к Structure Zephyr или как тест-менеджеру перекроить внут...От Зефира в коробке к Structure Zephyr или как тест-менеджеру перекроить внут...
От Зефира в коробке к Structure Zephyr или как тест-менеджеру перекроить внут...SQALab
 

Mais de SQALab (20)

Готовим стажировку
Готовим стажировкуГотовим стажировку
Готовим стажировку
 
Куда приводят мечты? или Искусство развития тестировщика
Куда приводят мечты? или Искусство развития тестировщикаКуда приводят мечты? или Искусство развития тестировщика
Куда приводят мечты? или Искусство развития тестировщика
 
Оптимизация Selenium тестов и ускорение их поддержки
Оптимизация Selenium тестов и ускорение их поддержкиОптимизация Selenium тестов и ускорение их поддержки
Оптимизация Selenium тестов и ускорение их поддержки
 
Автоматизация 0.0: 0 - бюджет, 0 - опыт программирования
Автоматизация 0.0: 0 - бюджет, 0 - опыт программированияАвтоматизация 0.0: 0 - бюджет, 0 - опыт программирования
Автоматизация 0.0: 0 - бюджет, 0 - опыт программирования
 
Нагрузочное тестирование нестандартных протоколов с использованием Citrix и J...
Нагрузочное тестирование нестандартных протоколов с использованием Citrix и J...Нагрузочное тестирование нестандартных протоколов с использованием Citrix и J...
Нагрузочное тестирование нестандартных протоколов с использованием Citrix и J...
 
Continuous performance testing
Continuous performance testingContinuous performance testing
Continuous performance testing
 
Конфиги вместо костылей. Pytestconfig и зачем он нужен
Конфиги вместо костылей. Pytestconfig и зачем он нуженКонфиги вместо костылей. Pytestconfig и зачем он нужен
Конфиги вместо костылей. Pytestconfig и зачем он нужен
 
Команда чемпионов в ИТ стихии
Команда чемпионов в ИТ стихииКоманда чемпионов в ИТ стихии
Команда чемпионов в ИТ стихии
 
API. Серебряная пуля в магазине советов
API. Серебряная пуля в магазине советовAPI. Серебряная пуля в магазине советов
API. Серебряная пуля в магазине советов
 
Добиваемся эффективности каждого из 9000+ UI-тестов
Добиваемся эффективности каждого из 9000+ UI-тестовДобиваемся эффективности каждого из 9000+ UI-тестов
Добиваемся эффективности каждого из 9000+ UI-тестов
 
Делаем автоматизацию проектных KPIs
Делаем автоматизацию проектных KPIsДелаем автоматизацию проектных KPIs
Делаем автоматизацию проектных KPIs
 
Вредные привычки в тест-менеджменте
Вредные привычки в тест-менеджментеВредные привычки в тест-менеджменте
Вредные привычки в тест-менеджменте
 
Мощь переполняет с JDI 2.0 - новая эра UI автоматизации
Мощь переполняет с JDI 2.0 - новая эра UI автоматизацииМощь переполняет с JDI 2.0 - новая эра UI автоматизации
Мощь переполняет с JDI 2.0 - новая эра UI автоматизации
 
Как hh.ru дошли до 500 релизов в квартал без потери в качестве
Как hh.ru дошли до 500 релизов в квартал без потери в качествеКак hh.ru дошли до 500 релизов в квартал без потери в качестве
Как hh.ru дошли до 500 релизов в квартал без потери в качестве
 
Стили лидерства и тестирование
Стили лидерства и тестированиеСтили лидерства и тестирование
Стили лидерства и тестирование
 
"Давайте не будем про качество"
"Давайте не будем про качество""Давайте не будем про качество"
"Давайте не будем про качество"
 
Apache.JMeter для .NET-проектов
Apache.JMeter для .NET-проектовApache.JMeter для .NET-проектов
Apache.JMeter для .NET-проектов
 
Тестирование геолокационных систем
Тестирование геолокационных системТестирование геолокационных систем
Тестирование геолокационных систем
 
Лидер или босс? Вот в чем вопрос
Лидер или босс? Вот в чем вопросЛидер или босс? Вот в чем вопрос
Лидер или босс? Вот в чем вопрос
 
От Зефира в коробке к Structure Zephyr или как тест-менеджеру перекроить внут...
От Зефира в коробке к Structure Zephyr или как тест-менеджеру перекроить внут...От Зефира в коробке к Structure Zephyr или как тест-менеджеру перекроить внут...
От Зефира в коробке к Structure Zephyr или как тест-менеджеру перекроить внут...
 

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