Разработка пользовательского интерфейса: этап проектирования
Первый этап разработки пользовательского интерфейса, проектирование, направлен на выяснение подробной информации о предметной области и целевой аудитории. Это позволяет сформировать "модель пользователя", описывающую его потребности, возможности и ожидания от применения разрабатываемого приложения.
Цель работы: Получить практические навыки разработки пользовательских интерфейсов на этапе проектирования, включая определение цели и исходных требований к программе, анализ пользователей и созданние сценариев поведения пользователей.
Задания к работе
1. Определить предметную область и сферу применения программного продукта.
2. Определить целевую аудиторию.
3. Построить описательную модель пользователя (профиль). При необходимости — выделить группы пользователей.
4. Сформировать множество сценариев поведения пользователей на основании составленной модели.
5. Выделить функциональные блоки приложения и схему навигации между ними (структуру диалога).
Указания к работе
В качестве основы для выполнения всего лабораторного практикума по дисциплине студентам предлагается использовать одно из ранее разработанных ими приложений. Это может быть, например,курсовая работа по программированию на Java
, по технологии программирования или что-то подобное. В этом случае задача сведется к тому, чтобы выполнить редизайн имеющегося приложения, но с учетом новых знаний, формируемых в рамках дисциплины "Проектирование человеко-машинных интерфейсов".Предметная область и сфера применения. Правильное определение этих аспектов является основой для разработки UI в частности и всего приложения в целом. Если, например, речь идет о разработке какой-то утилиты общесистемного назначения, то скорее всего будет достаточно интерфейса командной строки. Иначе, если, к примеру, разрабатывается бухгалтерская система, без графического интерфейса практически не обойтись. Собственно, сфера применения во многом определяет ту аудиторию, на которую ориентировано приложение. Согласитесь, не стоит ожидать какой-либо популярности для специализированной информационно-справочной системы типа "Консультант+" среди школьников до 12 лет.
Следующий шаг, определение целевой аудитории, направлен на выделение из общей массы группы (или групп) потенциальных пользователей разрабатываемой программы. Так, целевая аудитория пользователей развивающих игр должна охватывать не только детей, например от 3 до 5 лет, но и их родителей. Естественно, что цели, задачи, способности и возможности этих двух групп пользователей будут существенно различаться.
Модель пользователя, или профиль, формируется в результате анализа целевых групп. Она отражает наиболее общие черты, характерные для представителей группы и может представлять следующую информацию о пользователе:
- Социальные и демографические характеристики (возраст, пол, основной язык, род занятий, потребности, привычки и т.п.).
- Уровень компьютерной грамотности.
- Цель и задачи, решаемые пользователем.
- Окружение (рабочее место, конфигурация оборудования, используемая операционная система и т.п.)
- Требования, специфичные для конкретной целевой группы.
После выделения одного или нескольких основных профилей пользователей и определения задач, стоящих перед ними, переходят к следующему этапу проектирования. Он связан с составлением пользовательских сценариев. Сценарий — это описание действий, выполняемых пользователем в рамках решения конкретной задачи на пути достижения его цели. Очевидно, что достигнуть некоторой цели можно, решая ряд задач. Каждую их них пользователь может решать несколькими способами, следовательно, должно быть сформировано несколько сценариев. Чем больше их будет, тем ниже вероятность того, что некоторые ключевые объекты и операции будут упущены.
Экспертные методы проектирования
В лабораторной работе выполняется тренинг совместной работы над проектом приложения.
Цель работы: Освоить на практике методы проектирования Affinity Diagramming и Designer Workshop на примере проектирования структуры веб-сайта.
Задания к работе
1. Проанализировать набор карточек, выданных на группу. Определить общую тематику и выбрать критерии сортировки.
2. Придумать названия категорий, которые будут соответствовать выбранным критериям. В пустые карточки вписать придуманные названия (заголовки разделов).
3. Выполнить группировку карточек, размещая их в наиболее подходящие разделы. Карточки, которые не могут быть отнесены ни к одному из разделов поместить в отдельную группу.
4. По завершении сортировки подсчитать количество карточек в каждой группе.
5. Для анализа правильности предположения о выбранном способе сортировки (точнее, о его соответствии интересам пользователей) проверить частотность запросов по тематическим ключевым словам в сервисе wordstat.yandex.ru.
Разработка пользовательского интерфейса: прототипирование
Цель работы: Сформировать навыки создания прототипов разрабатываемой системы на основе ранее полученных начальных требований.
Задания к работе
I. Разработка бумажного прототипа
1. Создание прототипов для следующих страниц:
o Стартовая (начальная) страница сайта.
o Страница раздела/категории.
o Целевая страница (3-й уровень).
2. Прототипирование одного из перечисленных сценариев (на выбор):
o регистрация нового пользователя;
o вход в систему зарегистрированного пользователя;
o поиск информации по заданному критерию (условия поиска определить самостоятельно, в соответствии с темой разработки);
o процедура добавления комментария к статье/заметке;
o добавление новой статьи/заметки зарегистрированным пользователем;
o собственный сценарий, разработанный на первом этапе разработки.
II. Создание интерактивного прототипа низкой достоверности на основе бумажных прототипов.
Указания к работе
Для создания бумажного прототипа вы можете самостоятельно нарисовать необходимые экранные элементы (окно браузера, кнопки, поля ввода и т.п), либо выбрать и распечатать подходящие шаблоны для прототипирования из большого числа доступных в Интернете. В обоих случаях рекомендуется сделать несколько копий шаблонов, а затем вырезать из них нужные элементы по мере необходимости. Может оказаться полезным использование цветной бумаги для визуального выделения связанных блоков или важных элементов.
Не нужно торопиться наклеивать вырезанные элементы на основу для макета. Делайте это только тогда, когда убедитесь, что текущая версия дизайна соответствует идее. Можно вовсе не приклеивать элементы макета, а просто делать фотографии различных вариантов дизайна и оценивать их.
Если у вас есть плотная прозрачная пленка, ее можно использовать следующим образом: наложите ее поверх распечатки браузерного окна, а затем, с помощью фломастера нарисуйте дизайн. В этом случае вы можете использовать цветные фломастеры, главное — прежде чем рисовать, убедиться в том, что нанесенный рисунок можно стереть (т.е. не нужно использовать перманентные маркеры).
Посмотрите этот короткий видеоролик, из которого вы сможете понять, что бумажное прототипирование действительно простой и эффективный способ оценки дизайнерских идей.
Для создания интерактивного прототипа вы можете использовать LibreOffice Impress, PowerPoint или другую программу для создания презентаций, главное, чтобы она представляла возможность связывать отдельные элементы, размещаемые на слайдах, с другими слайдами.
Создайте новую презентацию, добавьте такое количество слайдов, которое соответствует количеству экранов в моделируемом сценарии. Разместите на слайдах отсканированные бумажные прототипы вашей системы. Поверх тех навигационных элементов, которые были нарисованы вами в бумажном прототипе, расположите графические элементы, такие как прямоугольники или окружности, доступные в панели инструментов "Рисование". Затем определите для добавленных вами фигур действия по щелчку мыши, задавая перемещения между слайдами в соответствии со сценарием. Подобным же образом вы можете моделировать динамические эффекты, такие как выпадающее меню, слайдеры, popup-блоки и т.п. Готовая презентация будет ничем иным, как прототипом низкой достоверности, наделенным интерактивными возможностями. Используйте его для тестирования, оценки и дальнейшего совершенствования пользовательского интерфейса вашей системы.
Дополнительно: Та процедура создания прототипа, которая была рассмотрена выше, не является догмой. Ничто не мешает вам самостоятельно освоить и использовать специализированные приложения для прототипирования. Вы можете попробовать выполнить задания к этой работе с помощью, например, Pencil Project. Это свободно распространяемое приложение доступно для всех популярных платформ, скачать его можно с официальной страницы проекта. Там же приведена подробная документация по использованию и большая подборка шаблонов и элементов пользовательского интерфейса.
