Учебно-методические материалы для студентов кафедры АСОИУ

Учебные программы » Проектирование человеко-машинных интерфейсов » Лабораторный практикум

Разработка пользовательского интерфейса: прототипирование

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

Задания к работе

I. Разработка бумажного прототипа

  1. Создание прототипов для следующих страниц:
    • Стартовая (начальная) страница сайта.
    • Страница раздела/категории.
    • Целевая страница (3-й уровень).
  2. Прототипирование одного из перечисленных сценариев (на выбор):
    • регистрация нового пользователя;
    • вход в систему зарегистрированного пользователя;
    • поиск информации по заданному критерию (условия поиска определить самостоятельно, в соответствии с темой разработки);
    • процедура добавления комментария к статье/заметке;
    • добавление новой статьи/заметки зарегистрированным пользователем;
    • собственный сценарий, разработанный на первом этапе разработки.

II. Создание интерактивного прототипа низкой достоверности на основе бумажных прототипов.

Указания к работе

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

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

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

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

Для создания интерактивного прототипа вы можете использовать LibreOffice Impress, PowerPoint или другую программу для создания презентаций, главное, чтобы она представляла возможность связывать отдельные элементы, размещаемые на слайдах, с другими слайдами.

Создайте новую презентацию, добавьте такое количество слайдов, которое соответствует количеству экранов в моделируемом сценарии. Разместите на слайдах отсканированные бумажные прототипы вашей системы. Поверх тех навигационных элементов, которые были нарисованы вами в бумажном прототипе, расположите графические элементы, такие как прямоугольники или окружности, доступные в панели инструментов "Рисование". Затем определите для добавленных вами фигур действия по щелчку мыши, задавая перемещения между слайдами в соответствии со сценарием. Подобным же образом вы можете моделировать динамические эффекты, такие как выпадающее меню, слайдеры, popup-блоки и т.п. Готовая презентация будет ничем иным, как прототипом низкой достоверности, наделенным интерактивными возможностями. Используйте его для тестирования, оценки и дальнейшего совершенствования пользовательского интерфейса вашей системы.

Дополнительно: Та процедура создания прототипа, которая была рассмотрена выше, не является догмой. Ничто не мешает вам самостоятельно освоить и использовать специализированные приложения для прототипирования. Вы можете попробовать выполнить задания к этой работе с помощью, например, Pencil Project. Это свободно распространяемое приложение доступно для всех популярных платформ, скачать его можно с официальной страницы проекта. Там же приведена подробная документация по использованию и большая подборка шаблонов и элементов пользовательского интерфейса.

Анатольев А.Г., 08.12.2014

Постоянный адрес этой страницы:

↑ В начало страницы