Учебный курс «Проектирование интерфейса пользователя» Преподаватель: к. т. н. Пескова Ольга Вадимовна

Лекция 5 Моделирование пользователей и контекстов использования (продолжение)

Место в общем плане проектирования Проектирование интерфейса пользователя. Лекция 5. 3

Сценарии 4 Определение сценария (в общем виде) Описание взаимодействия персонажа с проектируемым продуктом. Виды сценариев 1)Контекстный (уровень анализа); 2)Ключевого пути (уровень дизайна); 3)Проверочный (уровень оценки). Ценность сценариев проектирование идеального взаимодействия пользователя с продуктом (проектирование в терминах пользователя с учётом его целей и мотивов); систематизация знаний о пользователе и продукте; коммуникация команды проектировщиков; фокус на задачах разного уровня; быстрое и экономичное прототипирование и оценка задач пользователя.

Общая формула сценария Проектирование интерфейса пользователя. Лекция 5.5 Сценарий = задача + контекст + «демография» Последовательность действий: 1)Для каждого персонажа выбрать его задачи: a)Для каждой задачи сформулировать: что хочет сделать; почему хочет получить (мотивация); что ожидает получить (ожидания). b)В результате описать ситуацию: цель; потребность; поведение; условия.

Разновидность сценариев Проектирование интерфейса пользователя. Лекция 5. 6

Контекстные сценарии 1)Считать интерфейс «волшебным». 2)Ответить на вопросы: В какой обстановке будет использоваться продукт? Будет ли он использоваться в течение долгого времени? Часты ли прерывания в работе персонажа? Работает ли с компьютером/устройством более одного пользователя? Какие ещё продукты используются вместе с проектируемым? Какие основные действия выполняет персонаж, чтобы достичь своих целей? Каков ожидаемый конечный результат? Какова допустимая сложность продукта, исходя из частоты его использования и навыков персонажа? Проектирование интерфейса пользователя. Лекция 5.7

Пример «ЭБ Яуза». Контекстные сценарии. Персонаж студент Андрей (1) Проектирование интерфейса пользователя. Лекция 5.8 Сценарий 1. Типовой расчёт на тему «Матрицы» (загрузка методического указания). На семинаре по линейной алгебре преподаватель выдал задание для выполнения типового расчёта на тему «Матрицы» и отметил, что методические указания доступны в библиотеке МГТУ. Все сценарии можно найти по адресу YauzaUXResearchCase.zip 1)Андрей из дома зашёл на сайт библиотеки МГТУ, просмотрел рекомендации литературы для первого курса, выбрал раздел «Математика» и в полученном списке выбрал методические указания – Агеев О.Н., Гласко А.В., Покровский И.Л. Матрицы и определители: Методические указания к выполнению типового расчета/МГТУ им. Н.Э. Баумана. – М.: Изд- во МГТУ им. Н.Э. Баумана, – 67 с. – Библиогр.:с.66. – ISBN )Андрей прочитал подробное описание методички, увидел фотографию обложки и убедился, что это именно то, что он искал. 3)Получил информацию, где и как это издание можно получить на руки, что для этого нужно заполнить (распечатать) требование и с ним отправиться в библиотеку. 4)Андрей обратил внимание, что данная методичка также доступна в электронном виде, и решил этим воспользоваться, загрузил её на свой компьютер.

Пример «ЭБ Яуза». Контекстные сценарии. Персонаж студент Андрей (2) Проектирование интерфейса пользователя. Лекция 5.9 1)Товарищи Андрея сказали, что есть другой «большой, коричневый» учебник по информатике. Тогда Андрей из дома заходит на сайт библиотеки, чтобы его найти. В рекомендациях для первого курса видит раздел «Информатика», а в нём учебник – Иванова Г.С. Основы программирования: Учебник для вузов. – 2-е изд., перераб. и доп. – М.: Изд-во МГТУ им. Н.Э. Баумана, – 415 с. – (Информатика в техническом университете). – Библиогр.:с.413. – ISBN (2001 г.; 2004 г.). 2)В этот раз рядом с названием издания отсутствовала информация о доступности в электронном виде, поэтому Андрей решил узнать, как эту книгу можно получить в библиотеке. 3)Просматривая подробную информацию, Андрей увидел фотографию обложки издания, что позволило ему окончательно убедиться, то это тот самый учебник. 4)Андрей решил заказать учебник, чтобы забежать на перемене в библиотеку и не тратить времени на подбор и оформление учебника. Система рассказала, как можно отслеживать состояние его заказа и предложила ввести дополнительные данные для немедленного оповещения об изменении состояния заказа. 5)Андрей поинтересовался, какие учебники есть ещё по той же теме. Сценарий 2. Подготовка к экзамену по информатике (удалённый заказ учебника). Преподаватель информатики выдал экзаменационные билеты. Андрей в списке билетов обнаружил теоретические вопросы, неосвещённые в том задачнике, который он получил в процессе массовой выдачи в начале семестра.

Пример «ЭБ Яуза». Контекстные сценарии. Персонаж Владимир Александрович Проектирование интерфейса пользователя. Лекция )Владимир Александрович заходит на сайт библиотеки МГТУ с рабочего компьютера и первым делом бегло просматривает новости. В этот раз его ничего не заинтересовало. 2)Владимир Александрович переходит к обзору РЖ ВИНИТИ. Указывает тематику, временной интервал, способ сортировки по убыванию даты и тип записи. Система выдаёт список рефератов. 3)Владимир Александрович бегло просматривает полученный список, останавливается на интересном заглавии и читает подробное описание, сам реферат и получает подробную информацию о виде первоисточника и способах его получения. 4)В этот раз Владимир Александрович заинтересовался публикацией из журнала, который есть в наличии в библиотеке МГТУ. Система рассказала, где и как можно получить и ознакомиться с данным выпуском журнала. 5)Владимир Александрович переходит к просмотру реферативной БД EBSCO. Сценарий 1. Регулярная поддержка в актуальном состоянии информированности об интересующей научной отрасли. У Владимира Александровича закончились занятия со студентами, назначенные на сегодня, и есть возможность погрузиться в обзор новостей в мире науки.

Пример «ЭБ Яуза». Контекстные сценарии. Персонаж Павел Проектирование интерфейса пользователя. Лекция 5.11 Сценарий 1. Старт обзора всех трудов, посвящённых ракетным двигателям, в России и в мире за последние 5 лет. Сценарий аналогичен сценарию 4 для Владимира Александровича. Сценарий 2. Ожидание необходимого ресурса библиотеки. Совершая обзор литературы, Павел выписывает описания публикаций, которые, по его мнению, необходимо в дальнейшем прочитать. 1)Павел заходит на сайт библиотеки МГТУ и ищет по названию журнал, в котором опубликована необходимая статья. В этот раз такого журнала не найдено. 2)Павел удалённо обращается к библиотекарям с вопросом, действительно ли такого журнала нет в нашем фонде, и не ожидается ли он в ближайшее время. 3)Павел подписывается на рассылку новостей библиотеки МГТУ, чтобы быть в курсе появления новых ресурсов.

Пример «Школьный веб-сайт». Контекстные сценарии. Персонаж Ершов Петя (1) Проектирование интерфейса пользователя. Лекция 5.12 Сценарий 1. Начало учебного полугодия: 1)Пётр заходит на сайт лицея, просматривает новости и объявления; 2)находит расписание занятий для его класса на текущее полугодие; 3)переходит от расписания к предметам, просматривает тематические планы, графики контрольных и проверочных работ; 4)узнает, какой учитель ведёт рассматриваемый предмет. Сценарий 2. Олимпиада: 1)Пётр среди учебного года заходит на сайт, в разделе новостей узнаёт, что скоро состоится олимпиада по информатике; 2)узнаёт график, требования и примерные задания олимпиады; 3)готовится к олимпиаде и участвует в ней; 4)по окончании олимпиады Пётр показывает на сайте лицея родителям и товарищам её результаты, где он находит личные поздравления как одному из призёров.

Пример «Школьный веб-сайт». Контекстные сценарии. Персонаж Ершов Петя (2) Проектирование интерфейса пользователя. Лекция 5.13 Сценарий 3. Празднование Нового Года: 1)Пётр участвует в подготовке общелицейского праздничного мероприятия, посвящённого Новому Году; 2)когда праздник проходит, Пётр хочет показать друзьям фотографии; 3)заходит на сайт лицея, в новостях обнаруживает информацию о публикации фотоотчёта о событии; 4)переходит к фотоотчёту, просматривает фотографии; 5)хочет обсудить интересные детали проведения мероприятия с одноклассниками; 6)переходит в форум лицейского сайта, общается. Сценарий 4. Подготовка для поступления в ВУЗ: 1)В начале первого полугодия Пётр заходит на сайт лицея и интересуется, как сдали ЕГЭ его старшие товарищи (результаты), и в какие ВУЗы они поступили; 2)в течение учебного года Пётр следит за новостями о публикациях на сайте материалов для подготовки к ЕГЭ и ГИА.

Пример «Школьный веб-сайт». Контекстные сценарии. Персонаж Колобкова Мария Николаевна Проектирование интерфейса пользователя. Лекция 5.14 Сценарий 1. Выбор образовательного учреждения: 1)от соседей Мария Николаевна узнаёт о лицее 1524 и его сайте; 2)заходит на сайт, просматривает новости с целью понять, насколько актуальную информацию можно здесь найти; 3)переходит в раздел с общим описанием лицея, узнаёт о местоположении и профиле учебного заведения; 4)здесь же узнаёт об успехах деятельности лицея – о результатах сдачи ЕГЭ и поступления выпускников в ВУЗы страны; 5)заходит в раздел, описывающий принципы и методы обучения и воспитания лицеистов; 6)переходит к просмотру учительского и административного состава; складывает впечатление о данном учебном заведении. Сценарий 2. Подготовка к поступлению: 1)Мария Николаевна заходит на сайт лицея; 2)переходит к просмотру информации для желающих поступить в лицей, знакомится с требованиями для поступления; 3)здесь же узнает о наборе на подготовительные курсы, об условиях набора и контактную информацию.

Пример «Школьный веб-сайт». Контекстные сценарии. Персонаж Кузнецова Ирина Проектирование интерфейса пользователя. Лекция 5.15 Сценарий 1. Соскучилась: 1)Мария время от времени грустит о том, что лицейские годы прошли, и желает снова вспомнить своих товарищей и радостные события в стенах лицея; 2)заходит на сайт лицея, переходит в фотогалерею, выбирает в календаре дату особенно запомнившегося события и просматривает фотографии; 3)затем переходит в форум и интересуется, будут ли пускать выпускников на ближайшего праздничное мероприятие в лицее, чтобы созвать бывших одноклассников и навестить любимых учителей; 4)на сайте Мария заходит в раздел с описанием учительского состава, чтобы узнать, кого из её любимых учителей ещё можно встретить в лицее.

Пример «Школьный веб-сайт». Контекстные сценарии. Персонаж Максимов Андрей Проектирование интерфейса пользователя. Лекция 5.16 Сценарий 1. Обновления наполнения сайта: 1)Андрей получил от администратора лицея новые материалы, которые надо разместить на сайте, - отчёт о предметной неделе иностранного языка и соответствующие событию новость и фотоотчёт; 2)Андрей заходит в закрытый раздел сайта лицея, авторизуется; 3)указывает, какие данные он собирается загружать; 4)вводит новые данные и сохраняет изменения.

Бизнес-цели продукта 1)В течение года занять пустую нишу туристических навигаторов среди «организованных» туристов; 2)Набрать большое количество партнеров – туристических агентств (3 крупных и 10 средних); 3)Получать прибыль от аренды навигаторов и окупить проект (в течение 2х лет); 4)Заработать первый миллион через 3 года; Маркетинговые цели 1)Использовать туристические агентства как канал сбыта; 2)Использовать навигатор в качестве рекламной площадки; 3)Пользовательский интерфейс должен быть простым даже для пенсионеров и должен «продавать» услугу; Технические ограничения 1)Вес устройства не большее 300 грамм; 2)Возможно использование аппаратных кнопок; 3)Экран сенсорный, допускающий управление пальцами; 4)Возможно WiFi соединение с интернет. Пример «Проектирование устройства для путешественников» Проектирование интерфейса пользователя. Лекция 5.17 © Копылов А., Design Act, 2009

Личные цели Найти тихий и спокойный отдых; Повидать мир; Посетить исторические объекты; Отведать блюда экзотической кухни; Постараться потратить в отпуске минимум денег; Быть понятым местными жителями; Не иметь проблем с современной техникой. Сценарии Заказать в ресторане интересную еду, но не слишком острую и из знакомых продуктов Посетить исторический объект с применением электронного гида Пример «Проектирование устройства для путешественников» (1) Проектирование интерфейса пользователя. Лекция 5.18 © Копылов А., Design Act, 2009 Чета пенсионеров Евгений Петрович и Людмила Алексеевна вместе уже много лет. Они вырастили прекрасных детей и дождались внука и внучку. Евгений и Людмила любят путешествовать, хотя это удается не слишком часто. Обычно они любят посещать интересные и романтические города имеющую богатую историю. В этот раз дети помогли купить путевку в Китай. В Китае они больше всего боятся, что в ресторане им подадут блюдо из собаки или кошки.

Личные цели Классно провести время с интересными людьми; Познакомиться с местными жителями; Найти самое интересное событие, которое только можно найти; Найти общий язык с теми, кто не знает английский. Сценарии Попасть на афтепати после кинопремьеры. … Пример «Проектирование устройства для путешественников» (2) Проектирование интерфейса пользователя. Лекция 5.19 © Копылов А., Design Act, 2009 Тусовщик Петру 25 лет, он завсегдатай ночных клубов и дискотек. Также Петр часто ездит в модные европейские города, чтобы весело провести время. В этот раз Петр поехал в Канны на кинофестиваль.

Личные цели Отдохнуть максимально за минимальные деньги; Загореть, как следует, на море; Посетить исторические объекты; Отведать блюда экзотической кухни; Информация типа «куда деть ребёнка?»; Запастись впечатлениями до следующего лета. Сценарии Сориентироваться в новом месте (узнать все о стране; в том числе найти, где поесть вечером); Выбрать экскурсию (формирование собственной экскурсии; выбрать готовый маршрут); Планирование шопинга и сам шопинг; Поиск интересных событий и посещение; Поиск интересных объектов; Пример «Проектирование устройства для путешественников» (3) Проектирование интерфейса пользователя. Лекция 5.20 © Копылов А., Design Act, 2009 Семья с детьми Семье Шестаковых 8 лет, живут они в Тюмени. Раньше они ездили на море каждый год, но в прошлом году и них родился сын, и пришлось отдыхать дома. Эта семья ездила только в Турцию, но в этом в году им хозяин семьи, Василий, решил, что пора съездить в Арабские Эмираты. У Шестаковых есть дома компьютер, но пользуется им пока только дочь. Василий и Лена хотят также освоить компьютер, чтобы не отставать от дочери.

Пример «Проектирование устройства для путешественников» (4) Проектирование интерфейса пользователя. Лекция 5.21 © Копылов А., Design Act, 2009 Абориген Чон Ван Тин работает в небольшом шанхайском ресторанчике. Он говорит только по китайски. Личные цели Обслужить клиента так, чтобы получить хорошие чаевые; Сценарии Попытаться понять, что хочет клиент и заказать именно эту еду; Попытаться объяснить клиенту, что блюдо нельзя заказать в данный момент времени;

Выработка требований к проекту

Место в общем плане проектирования Проектирование интерфейса пользователя. Лекция 5. 23

Выработка требований к проекту Проектирование интерфейса пользователя. Лекция Требования: объекты; действия; контексты. Персонажи Сценарии Стратегия дизайна

Объектная модель Проектирование интерфейса пользователя. Лекция Назначениепонимание интерфейса через объекты ментальной модели пользователя, систематизация всех объектов продукта. Типы объектов объекты-данные (например, почтовое сообщение, документ, заказ, изображение); функциональные объекты (например, поиск, фильтр). Характеристики объектов название; мощность (в обобщённом виде); перечень представлений; перечень действий над объектом; перечень атрибутов (свойств). Выходные документы список объектов продукта (с указанием характеристик) и связей между ними; соответствие объектов персонажам.

Пример «ЭБ Яуза». Объектная модель в терминах проектирования взаимодействия (выборка) Проектирование интерфейса пользователя. Лекция 5.26 ОбъектМощностьПредставленияДействияАтрибуты ДокументТысячи список детальное просмотреть печатать требование заказать искать библиографическое описание: автор; заглавие; вид (книга, статья, журнал, автореферат и др.) и др. аннотация изображение обложки тематика дисциплина (рекомендации) электронная версия доступность для заказа фонды требование подсказка, как получить на абонементе читатель («находится на руках у») др. Электронная версия док-та Тысячи детальноескачать просмотреть формат размер ДисциплинаСотни список детальное просмотретьфакультет кафедра номер курса номер семестра ФондДесяток список детальное просмотретьназвание расположение категория читателей карта способ выдачи («на руки», «в ЧЗ») ЗаказТысячи список детальное создать удалить просмотреть документ читатель статус фонд (где забрать) «извещения» ТематикаТысячи списокпросмотреть искать название код количество документов вид (предметная рубрика, УДК, ГРНТИ, ББК) Поиск в ЭКОдин сокращённое расширенное для специал-тов искать очистить текстовое поле «только электронные версии» тематика тип записи (патент и др.) «искать в найденном» др. «Избранное»Один списокдобавить удалить просмотреть выбрать способ сохранения документы дата добавления Платный ресурс Десятки список детальное анонс просмотреть перейти описание специализация (тематика) «сейчас доступен» дата закрытия доступа адрес инструкция доступа (с компьютера МГТУ, через Athens, открыт для всех)

Пример «ЭБ Яуза». Связь объектов и персонажей (выборка) Проектирование интерфейса пользователя. Лекция 5.27 ОбъектыПерсонажы АндрейПавелВладимир Александрович Документ Учебная литература Научная литература Электронная версия документа Дисциплина (рекомендации) Фонд Тематика Читатель Поиск в ЭК «Избранное» Athens (доступ к платным) Новость Подписка на новости Реферат ВИНИТИ Новое поступление Автореферат диссертации Платный ресурс Ресурс MSDN AA Обратная связь Сведения о библиотеке

Пример «Инструмент лингвиста». Выдержки из стратегии дизайна Проектирование интерфейса пользователя. Лекция 5.28 Требуется спроектировать программную систему – инструмент для лингвиста, позволяющий неспециалисту в области информационных технологий проводить вычислительные эксперименты по решению широкого класса задач обработки естественного языка. Целевая аудитория Продукта 1) лингвисты, не имеющие специализации в информационных технологиях, алгоритмически решающие лингвистические проблемы; 2) студенты специальности компьютерная лингвистика. Технологические особенности Продукта Тип интерфейса: однопользовательское настольное приложение. Программная платформа: Qt (

Пример «Инструмент лингвиста». Контекстные сценарии Проектирование интерфейса пользователя. Лекция 5.29 Сценарий 1. Первый опыт Елену интересует задача автоматической генерации словаря устойчивых выражений в области биологии. Взаимодействие с системой: Елена указала на коллекцию текстов биологической тематики; настроила поток выполнения задач из имеющихся в системе модулей (схема эксперимента); запустила эксперимент; получила и просмотрела результаты; сохранила результаты во внешний файл (например, в электронную таблицу); отправила результаты коллегам для обсуждения. Сценарий 2. Повторный эксперимент. Новая коллекция Елена получила новую коллекцию текстов, на этот раз физико-математической направленности. Ей интересно, как будет выглядеть словарь устойчивых выражений для данной области. Взаимодействие с системой: Елена выбрала новую коллекцию текстов; выбрала эксперимент для повтора; запустила эксперимент на выполнение; просмотрела результаты; отправила их коллегам для обсуждения.

Пример «Инструмент лингвиста». Контекстные сценарии (2) Проектирование интерфейса пользователя. Лекция 5.30 Сценарий 3. Повторный эксперимент. Старая коллекция, новые правила/новые библиотеки Разработчики системы поставили Елене новую реализацию модуля предобработки русскоязычных текстов. Ей стало любопытно, как изменится словарь устойчивых выражений в области биологии, сгенерированный с применением нового алгоритма. Взаимодействие с системой: Елена выбрала эксперимент для повтора; просмотрела поток выполнения задач (схему эксперимента); заменила в схеме один модуль на новый подходящий; просмотрела и по необходимости отредактировала правила/настройки для компонент нового и оставшихся модулей; запустила эксперимент и просмотрела результаты; сравнила их с результатами предыдущего эксперимента (время обработки, diff словарей устойчивых выражений и др.); записала краткое заключение и идеи для будущих экспериментов.

Пример «Инструмент лингвиста». Контекстные сценарии (3) Проектирование интерфейса пользователя. Лекция 5.31 Сценарий 4. Массовый и отложенный эксперимент. Разные коллекции, разные условия Елена подготовила две разные коллекции текстов в области биологии и хочет сравнить результаты генерации словарей на разных коллекциях и с разными настройками. Взаимодействие с системой: Елена создала несколько экспериментов, отличающихся коллекциями, правилами и компонентами модулей; составила расписание пакетного выполнения этих экспериментов: указала порядок выполнения экспериментов, время общего старта и способ сигнализации об окончании; просмотрела результаты каждого в отдельности эксперимента; сравнила результаты пар экспериментов.

Пример «Инструмент лингвиста». Объектная модель в терминах проектирования взаимодействия (1) Проектирование интерфейса пользователя. Лекция 5.32 ОбъектМощностьПредставленияДействияАтрибуты коллекция текстов десятки список детальное просмотреть описание добавить в эксперимент удалить название версия экспериментдесятки список детальное создать редактировать запустить отложить приостановить удалить название дата схема эксперимента результат коллекция текстов время обработки время старта заключение схема эксперимента десятки диаграмма создать просмотреть редактировать модули взаимосвязи модулей модульдесятки список детальное элемент на диаграмме просмотреть детали добавить на схему удалить со схемы заменять компоненты коммутировать между собой название версия автор описание компоненты компонент модуля сотня список детальное просмотреть описание добавить/удалить из модуля коммутировать между собой название версияавтор описание правила/настройки сотни детальное просмотреть редактировать ключ значение

Пример «Инструмент лингвиста». Объектная модель в терминах проектирования взаимодействия (2) Проектирование интерфейса пользователя. Лекция 5.33 ОбъектМощностьПредставленияДействияАтрибуты результатдесятки детальное просмотреть экспортировать сравнить текст (или таблица с текстом) заключение десятки (одно) детальное создать просмотреть редактировать удалить текст схема эксперимента десятки диаграмма создать просмотреть редактировать модули взаимосвязи модулей сравнениеодин детальное выполнить и просмотреть эксперименты diff (?) расписаниеодин детальное создать удалить редактировать просмотреть запустить эксперименты время старта сигнал о завершении