ЧЕЛОВЕКО-МАШИННОЕ ВЗАИМОДЕСТВИЕ Лекция 7 преподаватель кафедры ТМСИ Губин Максим Владимирович ПРОЕКТИРОВАНИЕ ИНТЕРФЕЙСА ПОЛЬЗОВАТЕЛЯ

Этапы проектирования программного обеспечения 1. Предпроектное обследование 2. Разработка детальное проектирование системы; написание машинных кодов для всех исходных компонентов, создание регистров учета, настройка пользовательского интерфейса, администрирование системы; выверка параметров системы в условиях, моделирующих реальную структуру учета. 3. Внедрение и опытно- промышленная эксплуатация системы. Этапы проектирования интерфейсов 1. Предпроектный анализ 2. Сбор требований 3. Проектирование интерфейса 4. Дизайн интерфейса 5. Подготовка спецификации 6. Приемка 2

UI Modeling Company профессиональная команда в области проектирования пользовательских интерфейсов и юзабилити- консалтинга. Мы работаем над интернет-проектами создаем и улучшаем веб-сервисы и порталы, веб-приложения, интранет- системы. Процесс работы идет следующим образом: 3

Процесс проектирования интерфейсов Проектирование и дизайн интерфейсов Пять этапов, в ходе которых происходит сбор требований к продукту, проектирование и дизайн его интерфейса: видение проекта, описание целевой аудитории, описание сценариев взаимодействия, перечень функциональности, спецификация. Интерактивный прототип Этап, в ходе которого создается интерактивный прототип продукта и его презентационный ролик. Юзабилити-консалтинг Существующий продукт анализируется и готовятся рекомендации по улучшению его интерфейса. 4

Документы Итогом каждого этапа работы над проектом является набор документов, описывающих проект. Выделяют пять этапов работ: сбор требований; проектирование интерфейса; дизайн; создание интерактивного прототипа; редизайн существующего проекта. 5

Сбор требований Видение проекта (vision) Краткое описание сути будущего продукта. Короткое описание того, что это за продукт, каковы цели и задачи его создания, кто пользователи и каковы основные возможности будущей системы. Описание целевой аудитории (персонажи) Серия документов, которые дают представление о ключевых типах пользователей системы. Каждый персонаж характеризуется контекстом и целями использования системы, ожиданиями от нее, а также общим описанием. Сценарии взаимодействия, краткие и подробные Описание того как должны работать функции системы. Они могут рассказывать о сути и особенностях работы функций как в общем виде, так и в подробном алгоритмическом. Перечень функциональности (user stories) Подробный список того что пользователь может делать в системе. Вся функциональность будущего продукта разбивается на простейшие возможности в виде « ». Каждая из функций имеет приоритет, определяющий важность для общего успеха продукта. Спецификация Свод требований к будущей системе. Этот документ описывает функциональные, архитектурные, эксплуатационные, контентные и бизнес-требования к продукту. Спецификация включает в себя большинство документов, полученных на других этапах проектирования. 6

Проектирование интерфейса Карта проекта (схема навигации) Структура системы. На ней в виде дерева показаны все разделы, подразделы и страницы системы. Такая карта позволяет выстроить удобную информационную архитектуру продукта. Диаграммы взаимодействия Схемы работы пользователя с функциональностью системы. Такая диаграмма показывает, как пользователь выполняет одну из своих задач, переходя от страницы к странице. Структурные схемы страниц (wireframes) Основной результат работ по проектированию. Они в деталях показывают, какая информация и элементы управления должны выводиться на каждой странице системы. А также описывают поведение динамических страниц. 7

Карта сайта 8

9

Диаграммы переходов между страницами 10

Структура страницы 11

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

Интерактивный прототип Действующая модель пользовательского интерфейса. Он имитирует работу системы, так что ее можно оценить в действии еще до того, как начата разработка. Хотя прототип не сохраняет данные и не работает с базой данных, в остальном он может быть максимально приближен к будущему продукту. Презентация продукта Видео-ролик, рассказывающий о сути продукта, бизнес-плане и содержащий демонстрацию интерактивного прототипа. Презентация строится по четкому сценарию, который выстроен так чтобы сжато рассказать о будущей системе и при этом не утомить аудиторию. 13

Редизайн существующего проекта Отчет об экспертной оценке юзабилити Отчет об экспертной оценке один из главных результатов экспертной оценки юзабилити системы. В отчете перечислены все выявленные недочеты в эргономике продукта и даны рекомендации о том, как их устранить. Отчет также перечисляет и положительные стороны в интерфейсе системы. В идеальном варианте отчет об экспертной оценке должен идти вместе со структурными схемами страниц (wireframes), на которых уже отражены рекомендованные исправления. Назначение Улучшить эргономику интерфейса. Отчет об экспертной оценке юзабилити говорит о том, какие изменения в интерфейсе помогут улучшить его удобство и эффективность. 14

Создание прототипов Сбор требований Видение проекта Описание целевой аудитории (персонажи) Сценарии взаимодействия, краткие и подробные Перечень функциональности (user stories) Проектирование интерфейса Карта сайта и схема навигации Диаграммы взаимодействия Структурные схемы страниц (wireframes) Дизайн Дизайн-макеты страниц Руководство по стилю интерфейса 15

Видение проекта 1. А чем плохо нынешнее положение? если у вас нет сайта, то чем это плохо? если у вас есть сайт, то чем он вас не устраивает? 2. Что хорошо и что плохо в аналогичных сайтах? 3. Какова цель нашего сайта? 4. Для кого мы делаем сайт? 5. Что хотят посетители от нашего сайта? 6. Какую информацию мы будем выкладывать на сайт? 7. Что мы хотели бы увидеть уже в текущей версии сайта? 8. При каких условиях мы признаем наш сайт успешным? 9. При каких условиях сайт будет принят заказчиком? 16

17

О пользе персонажей Использование персонажей (persona) – один из способов сбора и формализации требований к интерфейсу. Персонаж вбирает в себя уникальный набор шаблонов поведения, связанных с использованием определенного продукта, которые выявляются посредством анализа данных и интервью, и, при необходимости, подкрепляются дополнительными количественными данными. Есть ли польза от использования персонажей? 18

Плюсы от использования персонажей Сбор персональных пользовательских требований к интерфейсу Структуризация и ранжирование требований Повышение качества коммуникации с другими участниками проекта Упрощение организации юзабилити-тестирований 19

Статья Платона Днепровского: «О пользе персонажей» Это все действительно работает, хотя в начале нам тоже это казалось игрой 20 В ходе разработки- доработки-оптимизации интерфейса, в режиме «быстрых правок», нам проще встать на место Петра Михалыча.

Как осуществляется переход от персонажей к интерфейсу? После формирования персонажей составляются подробные матрицы: что делают персонажи, чем они при этом пользуются, как часто они это делают и т.д. В описание включаются все данные, а не только непосредственно бизнес-сценарии и артефакты самой системы. Исходя из этих данных, затем можно сделать вывод, как именно реализовывать ту или иную функцию системы. 21

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

Описание персонажа Персонаж определяется целями и поведением Цели Социальное положение Описание рабочего процесса Описание окружения Уровень подготовки Неудовлетворённости и ожидания 23

Персонажи можно разделить на Ключевые персонажи Персонажи второго плана Дополнительные персонажи 24

Персонаж - Анастасия Иванова Возраст: 22 года Место жительства: Киев, Украина Образование: неоконченное высшее Уровень доходов: средний Окружение: друзья и хорошие знакомые, семья, сотрудники Интересы: соц. сети, общение, друзья, путешествия, обучение, блоги, выставки, фитнесс Краткое описание Анастасия следит за последними косметическими новинками, любит рассматривать интернет-каталоги продукции. Часто заказывает товары через интернет- магазины. Настя тщательно отбирает качественную косметику, поэтому ей важно посмотреть полное описание продукта и его состав. Настя большая любительница обсуждений косметики, читает и размещает отзывы о продукции, хочет видеть рейтинг товара. Делится с подругами ссылками на продукцию, любит красивые и яркие фотографии товаров. 25

Сценарии взаимодействия Сценарии взаимодействия это лента событий, которые происходят во время взаимодействия пользователя с компьютером, в среде интерфейса. Иногда сценарии называют на западный манер Use Case. В классическом понимании сценарии описывают действия, которые производит пользователь с интерфейсом на что обращает внимание, на какие кнопки нажимает, на какие страницы переходит и другие подобные действия. 26

Для чего нужны сценарии Сценарии необходимы для формирования требований к будущему проекту со стороны пользователей. Сценарии помогают выявлять паттерны (часто повторяющаяся последовательность действий) и оптимизировать их, чтобы популярные действия пользователей происходили максимально легко и непринужденно. Иногда это цепочки, на которые не обращали пристального внимания ранее, а они оказались весьма важными в интерфейсе проекта. Сценарии стоит детализировать до такой степени, при которой они будут вызывать минимум вопросов даже у постороннего человека, которого поймали в коридоре. 27

Пример разработки сценариев Каждое действие пользователя на проекте мы пишем на отдельном post-it листочке с уникальным номером, а затем все листочки раскладываем на большом столе. После этого, вживаясь в каждого из персонажей, мы описываем маршрут и действия, которые он производит. 28 В результате этого этапа мы получаем набор цифр, который затем расшифровываем и превращаем в красивое описание сценария. Сценарии помогут в дальнейшем оптимизировать интерфейс и избежать узких мест в проекте.

Структура взаимосвязей между страницами и их иерархия 29

Описание страниц проекта Необходимо сделать описание каждой страницы проекта, выделяя функциональные возможности и содержимое сайта Для каждой страницы определяем: функциональность; информацию, которая будет на ней присутствовать; цели, которые она выполняет; точки входа на страницу и выхода из неё. 30