Бумажный прототип

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

Основное отличие эскизов дизайна (Лабораторная работа №3) от бумажного прототипа — это интерактивность. Бумажный прототип приводиться к жизни участниками проекта, которые изменяют его в соответствии с действиями пользователя, они раскрывают меню, пишут ответ и анонсируют те вещи, которые не возможны одной бумагой. Ввиду интерактивности можно мы можем актуально протестировать его на пользователях - дать им задание и посмотреть, как они с ним справятся.

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

Интерактивный бумажный макет включает следующие пункты:

a) эскизы представления экрана

b) кусочки, показывающие окна, меню, диалоги

К натуральному взаимодействию относят:

a) указание пальцем — клик мышки

b) написание — набор текста

Человек моделирует операции ПК, выполняет следующие действия:

a) перемещает элементы

b) пишет ответы на экране

c) описывает эффекты, которые сложно показать на бумаге

Низкоуровневая верность определяется ощущениями.

Высокоуровневая верность раскрывается в глубине (за счет моделирования бекэнда).

Почему бумага? И почему эскизы от руки, все-таки, лучше, чем из какой либо графической утилиты?

Рисовать от руки быстрее. Можно нарисовать много эскизов в тоже время, за которое будет сделать один эскиз пусть даже с кодом.

Бумагу проще изменять. Можно даже прямо во время тестирования. Если с какой-либо частью есть проблемы ее можно изменить или исправить, до того как покажите следующему тестировщику.

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

Следует обратить внимание:

a) Быстро создаются (рисование быстрее программирования);

b) Быстро изменяются (просто сделать изменения между тестами или даже во время теста, нет пропажи кода);

c) Фокусирование на больших деталях (дизайнер не заморачивается и пользователь не придирается, а делает более конструктивную критику);

d) Непрограммисты могут помочь (детсадовских навыков вполне достаточно).

Инструментами для бумажного прототипа могут послужить следующие наименования:

a. Белый лист бумаги;

b. Индексные карточки (для меню, объектов окна и диалогов);

c. Клей или скотч для закрепления элементов, а можно и так класть на парту;

d. Корректор для упрощения корректировки индексной карточки;

e. Ксерокс для копирования повторяющихся частей;

f. И детсадовские принадлежности: ручка, марке, ножницы...

Советы для проектирования интерфейса следующие:

a. Делайте его больше чем в реальности;

b. Делайте его черно белым;

c. Заменяем визуальную обратную связь аудио описанием (перемещение, анимацию, прогресс бар);

d. Держите куски организовано (конверты и иерархию).

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

Не волнуйтесь о цветах в БП. Используйте один цвет. Это проще и не отвлекает от важных проблем. Ну и естественно не используйте желтый цвет – сложно прочитать что написано. Не нужно визуализировать все эффекты. Достаточно сказать «прогресс бар увеличивается 20 50 70 100?».

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

На картинках есть примеры БП. Должны быть ручными или нарисованными на ПК. Обычно вручную нарисованные лучше в раннем проектировании, но иногда реалистичные картинки (скриншоты) могут быть очень конструктивным дополнением. Например, если интерфейс будет интегрироваться в существующую программу, то проще делать БП на основе скриншотов из нее. Но, опять-таки, они маленькие и издалека плохо видимые. Таким образом, лучше всего гибридные БП.

Если интерфейс будет интегрирован в web-броузер. Актуальные скриншоты web-страниц делают интерфейс более конструктивным и помогают пользователю лучше представлять интерфейс. Если сама страница не является проблемой, решаемой интерфейсом, нет смысла в ручной прорисовке сайта.

Если проектируется интерфейс работы с фотографиями, то не нудно рисовать фотографии — проще использовать настоящие. Так же можно использовать скриншот окна, для статического фона.

Еще раз обратим Ваше снимание, что чем больше интерфейс, тем лучше.

Далее лучше рисовать маркером, а не карандашом. Цвета также влияют, опять-таки, если надо протестировать цвета, то лучше использовать темные цвета. Если цвет не важен — то лучше монохром. А если важен, то большим и темным.

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