SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса проектирования и разработки

Контроль качества интерфейсных решений на всех этапах

проектирования и разработкиЮрий Ветров. UI Modeling Company

2

Цели мастер-класса

• Понять, на каких этапах, чем и как проектировщик может помочь продукту и команде разработки.

• Узнать о конкретных методах и подходах, которые помогут работать и проверять качество на каждом из этапов.

• Опробовать эти методы на практике на примере небольшого тестового проекта.

1. Обзор процесса проектированияиз чего складывается User Experience, как можно влиять на него, метрики юзабилити, путаница в терминах, продукт и этапы проектирования

2. Встраивание проектирования в общий процесс

3. Разбор кейса4. Выводы и наблюдения

4

Из чего складывается User Experience

Взаимодействие пользователя с продуктом происходит на разных «слоях»:

• Возможность выполнения задач с помощью продукта.• Эффективность выполнения задач.• Скорость и качество решения возникающих проблем.• Внешняя эстетика продукта.• Встроенность в экосистему – взаимодействие с

другими продуктами и сервисами.

5

Как можно влиять на User Experience

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

• Качество исполнения самого продукта – функциональность, интерфейс, дизайн.

• Сопутствующие процессы – покупка, поддержка, модернизация.

• Интеграция с другими продуктами – возможность импорта/экспорта данных, подключения надстроек.

6

Измерение качества интерфейса

Не всегда можно говорить об абстрактном «удобстве», его нужно измерить. Некоторые метрики:

• Скорость выполнения операций:– каждой операции в отдельности;– серии действий, необходимых для выполнения

задачи.• Легкость и скорость обучения.• Надежность и безопасность работы.• Общая удовлетворенность пользователя.

7

Как побороть путаницу в терминах

• За последние несколько лет в обиход вошла целая серия терминов, касающихся процесса проектирования:– юзабилити, информационная архитектура, user experience,

interaction design, accessibility и т.п..

• Все они имеют право на жизнь, но обозначают разные вещи – подходы, методики, процессы, наборы качеств.

• Главное понимать, каков конечный результат – названия вторичны, хотя и облегчают общение.

8

Конечный продукт проектирования

• Улучшение качества продукта – достижение определенных показателей метрик.

• Документация на интерфейс – набор wireframes, дизайн-макетов и сопроводительных документов, интерактивный прототип.– Важны также полнота, понятность, читабельность,

непротиворечивость документации, ее своевременная поставка и корректировка

• Ранняя проверка концепции продукта, создание материалов для презентаций инвесторам и другим заинтересованным лицам.

1. Обзор процесса проектирования2. Встраивание проектирования в

общий процессэтапы, форматы работы, команда проектирования, методы проверки качества интерфейса

3. Разбор кейса4. Выводы и наблюдения

10

Этапы проектирования

Можно проверять соответствие концепции, качество документации и самого продукта на каждом из них:

• Исследование предметной области и рынка.• Сбор и формирование требований.• Концепция интерфейса и дизайна.• Детализация концепции интерфейса.• Поддержка процесса разработки.

11

Возможные форматы работы

Проектирование должно предварять разработку, но не оттягивать ее начало:

• Полная предварительная проработка интерфейса – сначала полная документация, затем разработка.

• Предварительный этап проработки интерфейса, затем – поддержка с проектированием оставшегося.

• Создание функционального прототипа, затем его «причесывание» – в конце или по ходу разработки.

• Консультации в конце или по ходу разработки.

12

Команда проектирования

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

• Аналитик – исследование предметной области, сбор и формирование требований.

• Проектировщик – отрисовка wireframes, проверка и тестирование решений.

• Дизайнер – создание дизайн-макетов и сопроводительной графики.

• HTML-разработчик – верстка и интеграция дизайна.

13

Методы проверки качества интерфейса

На каждом из этапов проектирования можно применять серию методов:

• Юзабилити-тестирование – наблюдение за пользователями, работающими с продуктом.

• Бета-тестирование – запуск предварительной версии и сбор обратной связи от пользователей.

• Экспертная оценка – юзабилити-специалист или тестировщик оценивают продукт по чек-листу.

• Peer reviews – рекомендации и замечания коллег.• Предварительные исследования.


общий процесс3. Разбор кейса

изучение задачи и аудитории, выбор и проработка концепции, проектирование страниц, дизайн и интерактивный прототип, поддержка разработки

4. Выводы и наблюдения

Кейс

Сайт компании – производителя компьютерной техники с интернет-магазином и службой поддержки:

• Простой, зато понятный и наглядный пример.• Каждый сталкивался с аналогичным и:

– понимает, что обычно требуется от них;– помнит, что в них неудобно и чего не хватает;– возможно, участвовал в разработке.

15

Как будет разбираться кейс?

1. Проводим этап проектирования.2. Проверяем, насколько правильно

он прошел.3. Вносим изменения в результаты

этапа.

16

A. Изучение задачи и аудиторииB. Выбор концепции и ее проработкаC. Проектирование страницD. Дизайн и интерактивный прототипE. Поддержка разработки

Цели компании

Чего хочет добиться компания созданием сайта:

• Доступность информации о компании и продукции в интернете.

• Новый канал продажи продукции.• Дополнительный сервис поддержки владельцев

продукции.• Упрощение работы с партнерами.

18

Показатели эффективности по каждой задаче

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

• Объем продаж через сайт – $7млн в месяц.• Количество нерешенных и просроченных обращений

в службу поддержки снизить на 20%.• Не менее 5 000 посещений в день с глубиной

просмотра страниц не менее 2,5.

19

Целевая аудитория

Нужно понимать, для каких задач каких людей в первую очередь используется сайт:

• Владелец продукции. Обращается в поддержку несколько раз в год – починить [принтер], найти аксессуар или понять, почему не работает функция.

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

• Просто интересующийся. Ищет информацию о компании – общие сведения, структуру или новости.

20

Ограничения проекта

Ограничения проекта необходимо учитывать при проектировании и выборе подходящего процесса работы:

• Бюджет и сроки выполнения проекта. На какое участие проектировщика хватает ресурсов.

• Back-Office сайта. Какие ресурсы может выделить клиент для его поддержки и сопровождения.

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

21

Итоговые документы этапа

• Модель предметной области.• Видение проекта.• Описание целевой аудитории (персонажи).• Отчет о конкурентном анализе.

22

Проверка решений этапа

• Консультации и предварительное общение:– представители клиента;– эксперты в предметной области;– потенциальные пользователи.

• Предварительные исследования:– маркетинговые исследования;– конкурентный анализ;– проведение фокус-групп с пользователями.

• Утверждение собранной информации клиентом.

23


Общая концепция интерфейса

Необходимо определить основные принципы, по которым будет строиться интерфейс:

• Какая группа пользователей будет ключевой – чьи задачи должны решаться в первую очередь?

• Будет ли это единый сайт или группа сайтов, каждый из которых решает свою задачу?

• Используем ли мы технологическое решение с ограниченными интерфейсными возможностями?

• Какие задачи будет решать пользователь, а какие – система?

25

Функциональность

Требуется описать всю функциональность, которая будет доступна пользователю:

• Что пользователь может делать на сайте – какими функциями он может пользоваться для решения своих задач?

• По каким сценариям проходит работа с функциональностью и каковы их особенности?

26

Структура и навигация

Необходимо описать структуру сайта и то, как пользователь перемещается по нему:

• Какие страницы будут на сайте и какова их иерархия?– Какие из них нужно будет подготовить в процессе

проектирования, дизайна и создания интерактивного прототипа?

• Какие типы навигации будут использоваться для переходов между страницами сайта – меню, «хлебные крошки», теги, еще что-то?

27

Первые наброски интерфейса

Нужно показать общий вид важнейших страниц сайта:

• Какова общая сетка страницы?• Где будут располагаться общие для всех страниц

элементы?• Где будут расположены навигационные блоки?• Какие элементы и в каком порядке будут

присутствовать на «сайтообразующих» страницах?

28

Пример чернового wireframe

29


• Описание функциональности:– Формализованные или неформализованные Use

Cases.– User Stories.

• Структура страниц.• Схемы навигации.• Черновые wireframes (структурные схемы страниц).• Перечень создаваемых wireframes, дизайн-макетов и

страниц интерактивного прототипа.

30


• Исследования с привлечением пользователей:– карточная сортировка при проектировании

структуры сайта и навигации.• Консультации с коллегами и другими специалистами:

– peer reviews;– технические консультации по поводу

реализуемости функций;– юзабилити-экспертиза набросков интерфейса.

• Утверждение концепции и спецификаций клиентом.

31


Отрисовка структурных схем страниц

Ключевой этап работ, определяющий состав и структуру конкретных страниц сайта:

• Какие интерактивные элементы содержит страница?• Какая информация будет содержаться на ней?• Как работают конкретные элементы страницы?• Что на странице является наиболее важным, а что –

второстепенным?

33


• Детальные структурные схемы страниц (wireframes).

34

Пример детального wireframe

35


• Тестирование и экспертиза:– юзабилити-тестирование бумажных или

электронных версий wireframes;– экспертная оценка интерфейса;– peer reviews.

• Консультации:– технические консультации по поводу

реализуемости элементов интерфейса.• Утверждение структурных схем интерфейса клиентом.

36


Отрисовка дизайн-макетов

Необходимо определить, каким будет внешний вид сайта:

• Как будут выглядеть ключевые страницы сайта?• На чем делаются акценты – брендинг, контент,

функциональность?• Нужно ли корректировать структурные схемы страниц

чтобы они вписались в дизайн?• Будут ли технические сложности при интеграции этого

дизайна?

38

Руководство по оформлению интерфейса

Важно показать принципы построения интерфейса в едином справочном документе:

• Перечень и назначение используемых:– пиктограмм, цветов, шрифтов, иллюстраций,

лейаутов.• Внешний вид интерактивных элементов и их

состояний.

39

Создание интерактивного прототипа

Интерактивный прототип (в соответствии с дизайном или схематичный) позволяет «вживую» опробовать работу интерфейса:

• Как происходят переходы между страницами?• Как работают интерактивные элементы?• Какой контент находится на страницах сайта?• Насколько различается удобство работы в различных

средах:– разрешения, браузеры, платформы.

40


• Дизайн-макеты страниц.• Руководство по оформлению интерфейса.• Набор сопроводительной графики:

– иконки, иллюстрации.• Интерактивный прототип.

41


• Тестирование и экспертиза:– юзабилити-тестирование интерактивного

прототипа и дизайн-макетов;– экспертная оценка дизайн-макетов и прототипа;– peer reviews.

• Консультации:– технические консультации по поводу

реализуемости элементов интерфейса.• Утверждение концепции дизайна и дизайн-макетов

клиентом.42


Решение возникающих несоответствий

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

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

• Техническая реализация отдельных решений невозможна или слишком затратна.

• Оказалось, что данные из стороннего источника получить нельзя или их формат отличается от плана.

44

Проработка новой функциональности

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

• Необходимо спроектировать новую функциональность и интегрировать ее в интерфейс.

• Нужно расширить возможности ранее спроектированных функций.

• Требуется допроектировать функциональность, которая была отложена на более поздние этапы.

45

Консультации по внедрению

Необходимо тесное взаимодействие проектировщиков с командой разработки:

• Комментарии и объяснения по поводу подготовленной документации.

• Оперативные ответы на возникающие у разработчиков вопросы.

• Регулярные проверки качества реализации интерфейса и его соответствия задуманному.

• Объяснение решений – почему сделано так, а не иначе.

46


• Поддержка и обновление ранее созданных документов.

• Новые wireframes (структурные схемы страниц).• Новые дизайн-макеты и сопутствующие

иллюстрации.• Новые страницы интерактивного прототипа.

47


• Тестирование и экспертиза:– юзабилити-тестирование работающего сайта;– бета-тестирование:

• сбор и изучение мнений пользователей;• сбор и анализ статистики;

– тестирование QA-специалистами;– экспертная оценка работающего сайта.

48


общий процесс3. Разбор кейса4. Выводы и наблюдения

чем полезен кейс, выводы

Чем полезен кейс

Кейс достаточно простой, но:

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

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

50

Выводы

• Есть множество инструментов и методов для проверки качества интерфейса.

• Эти инструменты должны использоваться комплексно, на всех этапах процесса.

• Использование инструментов от случая к случаю не способно качественно изменить удобство продукта.

51

Спасибо!

Юрий Ветровwww.jvetrau.com

www.uimodeling.ru

http://www.jvetrau.com/

http://www.uimodeling.ru/

http://www.uimodeling.ru/

SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса проектирования и разработки

Design

user experience

peer reviews

www

wireframes