Прототипирование. Практическое руководство.

Коммуникативные изменения состояния.

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

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

Помните те виджеты графического интерфейса, которые мы создали ранее? Если кто-то из участников хочет установить флажок, просто наложите сверху изображение с флажком (рис. 6.6). Это отразит изменения в состоянии и в то же время позволит легко проделать обратную операцию.

Прототипирование. Практическое руководство

РИС. 6.6. Бумажный прототип с установленным флажком на добавленном сверху интерфейсном виджете

Этот эффект полезен и для других элементов, таких как выбор из меню, переключатели и управление воспроизведением.

Можно было бы использовать его для отображения эффектов наведения курсора на объект или подсветки, но я в этих случаях предпочитаю прозрачные пленки.

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

Прототипирование. Практическое руководство

РИС. 6.7. Прозрачной пленкой отмечена выделенная миниатюра в фотогалерее

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

Чтобы добиться этого, нужно следующее:

• желтая бумажка для «подсветки» и кусок прозрачной пленки или кусок цветной прозрачной пленки;

• кусок каталожной карточки для перекрывающего окна;

• лента или резиновый клей.

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

Когда участник переходит от одного поля формы к другому, вы можете сдвигать пленку вниз, симулируя контекстную подсказку. Если в поле подсказки нет, возьмитесь за отогнутый угол и снимите пленку. Так вы получите то, что нужно: контекстную подсказку в строке.

Прототипирование. Практическое руководство

РИС. 6.8. Подсвечивание выбранного поля и отображение контекстной подсказки в строке