Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. 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 – рекомендации и замечания коллег. Предварительные исследования.

1.Обзор процесса проектирования 2.Встраивание проектирования в общий процесс 3.Разбор кейса изучение задачи и аудитории, выбор и проработка концепции, проектирование страниц, дизайн и интерактивный прототип, поддержка разработки 4.Выводы и наблюдения

Кейс Сайт компании – производителя компьютерной техники с интернет- магазином и службой поддержки: Простой, зато понятный и наглядный пример. Каждый сталкивался с аналогичным и: – понимает, что обычно требуется от них; – помнит, что в них неудобно и чего не хватает; – возможно, участвовал в разработке. 15

Как будет разбираться кейс? 1.Проводим этап проектирования. 2.Проверяем, насколько правильно он прошел. 3.Вносим изменения в результаты этапа. 16

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

Цели компании Чего хочет добиться компания созданием сайта: Доступность информации о компании и продукции в интернете. Новый канал продажи продукции. Дополнительный сервис поддержки владельцев продукции. Упрощение работы с партнерами. 18

Показатели эффективности по каждой задаче Чтобы оценивать эффективность выполнения задач, нужно задать им целевые показатели. Например, к концу года: Объем продаж через сайт – $7млн в месяц. Количество нерешенных и просроченных обращений в службу поддержки снизить на 20%. Не менее посещений в день с глубиной просмотра страниц не менее 2,5. 19

Целевая аудитория Нужно понимать, для каких задач каких людей в первую очередь используется сайт: Владелец продукции. Обращается в поддержку несколько раз в год – починить [принтер], найти аксессуар или понять, почему не работает функция. Покупатель. Подбирает подходящий [сканер] для работы с фотографиями. Важно понимать, как обстоит дело с дилерскими и сервисными центрами. Просто интересующийся. Ищет информацию о компании – общие сведения, структуру или новости. 20

Ограничения проекта Ограничения проекта необходимо учитывать при проектировании и выборе подходящего процесса работы: Бюджет и сроки выполнения проекта. На какое участие проектировщика хватает ресурсов. Back-Office сайта. Какие ресурсы может выделить клиент для его поддержки и сопровождения. Технологические решения. Есть ли какие-то ограничения – у команды разработки, клиента, будущих пользователей сайта. 21

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

Проверка решений этапа Консультации и предварительное общение: – представители клиента; – эксперты в предметной области; – потенциальные пользователи. Предварительные исследования: – маркетинговые исследования; – конкурентный анализ; – проведение фокус-групп с пользователями. Утверждение собранной информации клиентом. 23

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

Общая концепция интерфейса Необходимо определить основные принципы, по которым будет строиться интерфейс: Какая группа пользователей будет ключевой – чьи задачи должны решаться в первую очередь? Будет ли это единый сайт или группа сайтов, каждый из которых решает свою задачу? Используем ли мы технологическое решение с ограниченными интерфейсными возможностями? Какие задачи будет решать пользователь, а какие – система? 25

Функциональность Требуется описать всю функциональность, которая будет доступна пользователю: Что пользователь может делать на сайте – какими функциями он может пользоваться для решения своих задач? По каким сценариям проходит работа с функциональностью и каковы их особенности? 26

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

Первые наброски интерфейса Нужно показать общий вид важнейших страниц сайта: Какова общая сетка страницы? Где будут располагаться общие для всех страниц элементы? Где будут расположены навигационные блоки? Какие элементы и в каком порядке будут присутствовать на «сайтообразующих» страницах? 28

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

Итоговые документы этапа Описание функциональности: – Формализованные или неформализованные Use Cases. – User Stories. Структура страниц. Схемы навигации. Черновые wireframes (структурные схемы страниц). Перечень создаваемых wireframes, дизайн-макетов и страниц интерактивного прототипа. 30

Проверка решений этапа Исследования с привлечением пользователей: – карточная сортировка при проектировании структуры сайта и навигации. Консультации с коллегами и другими специалистами: – peer reviews; – технические консультации по поводу реализуемости функций; – юзабилити-экспертиза набросков интерфейса. Утверждение концепции и спецификаций клиентом. 31

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

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

Итоговые документы этапа Детальные структурные схемы страниц (wireframes). 34

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

Проверка решений этапа Тестирование и экспертиза: – юзабилити-тестирование бумажных или электронных версий wireframes; – экспертная оценка интерфейса; – peer reviews. Консультации: – технические консультации по поводу реализуемости элементов интерфейса. Утверждение структурных схем интерфейса клиентом. 36

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

Отрисовка дизайн-макетов Необходимо определить, каким будет внешний вид сайта: Как будут выглядеть ключевые страницы сайта? На чем делаются акценты – брендинг, контент, функциональность? Нужно ли корректировать структурные схемы страниц чтобы они вписались в дизайн? Будут ли технические сложности при интеграции этого дизайна? 38

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

Создание интерактивного прототипа Интерактивный прототип (в соответствии с дизайном или схематичный) позволяет «вживую» опробовать работу интерфейса: Как происходят переходы между страницами? Как работают интерактивные элементы? Какой контент находится на страницах сайта? Насколько различается удобство работы в различных средах: – разрешения, браузеры, платформы. 40

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

Проверка решений этапа Тестирование и экспертиза: – юзабилити-тестирование интерактивного прототипа и дизайн-макетов; – экспертная оценка дизайн-макетов и прототипа; – peer reviews. Консультации: – технические консультации по поводу реализуемости элементов интерфейса. Утверждение концепции дизайна и дизайн-макетов клиентом. 42

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

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

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

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

Итоговые документы этапа Поддержка и обновление ранее созданных документов. Новые wireframes (структурные схемы страниц). Новые дизайн-макеты и сопутствующие иллюстрации. Новые страницы интерактивного прототипа. 47

Проверка решений этапа Тестирование и экспертиза: – юзабилити-тестирование работающего сайта; – бета-тестирование: сбор и изучение мнений пользователей; сбор и анализ статистики; – тестирование QA-специалистами; – экспертная оценка работающего сайта. 48

1.Обзор процесса проектирования 2.Встраивание проектирования в общий процесс 3.Разбор кейса 4.Выводы и наблюдения чем полезен кейс, выводы

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

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

Спасибо! Юрий Ветров