Бумажные прототипы - Разработка - Webmascon

WEBMASCON - журнал для веб-мастеров обновление: 2004.09.26
» Разработка

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

Usability.Net - Methods and tools
автор: 2003 UsabilityNet
перевод: 2004.09.23 Александр Качанов

Note: данная статья является составной частью цикла статей "Методы веб-дизайна и юзабилити", посвященных методам веб-дизайна.

#### Вкратце

Бумажные или какие-либо другие прототипы (paper and machine prototypes) используются для того, чтобы уточнить требованяи к дизайну и получить первые варианты дизайна, которые могут быть быстро созданы и протестированы.

#### Плюсы

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

### Метод

#### Планирование

Обычно в тесте участвуют:

- Пользователь / пользователи
- Разработчик / разработчики

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

Метод разбивается на четыре этапа:

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

#### 1. Концептуальынй дизайн

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

#### 2. Дизайн взаимодействия

С помощью диаграмм сходства организуйте структуру пользовательского интерфейса:

- Напишите название каждой предполагаемой страницу или функции на карточке-липучке
- Приклейте карточку на стену. Располодите карточки с близкими понятиями ближе друг к другу.
- Сгруппируйте карточки в группы, которые понятны пользователям
- Объедините карточки-дубликаты и карточки-синонимы
- Дайте название каждой группе карточек
- Определите последовательность, в которой при выполнении той или иной задачи, пользователи будут пользоваться той или иной страницей или функцией из той или иной группы
- Подумайте, как лучше организовать страницы, чтобы облегчить пользователям выполнение задач.

#### 3. Дизайн страниц

- Сядьте вокруг стола, проведите мозговой штурм и сделайте несколько вариантов набросков.
- Наброски используйте для создания эскизов каждой страницы
- Если окончательное решение по ссылкам между страницами еще не принято, прикрепите эскизы страниц на стену так, как было описано в пердыдущем этапе.
- Попросите пользователя выполнить реальную задачу (основываясь на контексте использования и сценариях).
- По мере того, как пользователь выбират ту или иную ссылку/кнопку на эскизе, разработчик объясняет пользователю, что в ответ происходит, и либо указывает на следуюший эскиз, либо просто показывает следующий эскиз (без объяснения, как пользователь на него попал).

#### 4. Тестирование страниц

- С помощью программного пакета для рисования или инструмента для создания прототипов нарисуйте приблизительный дизайн каждой страницы
- Если окончательное решение по ссылкам между страницами еще не принято, прикрепите эскизы страниц на стену так, как было описано в пердыдущем этапе.
- Попросите пользователя выполнить реальную задачу (основываясь на контексте использования и сценариях)
- По мере того, как пользователь выбират ту или иную ссылку/кнопку на эскизе, разработчик объясняет пользователю, что в ответ происходит, и либо указывает на следуюший эскиз, либо просто показывает следующий эскиз (без объяснения, как пользователь на него попал).
- Для того, чтобы протестировать интерфейс более детально, подготовьте страницы, где уже присуствуют меню, списки, диалоговые окна и прочие элменты интерфейса. Пользователь прост оуказывает пальцем или карандашом на нужный элемент, и вписывает текст, где требуется, и таким образом эмулирует работу с системой.

Детальный дизайн должен непременно придерживаться согласованного стиля.

### Дополнительная информация

Дополнительную информацию о бумажных прототипах можно найти на сайте INUSE Handbook

### Варианты метода

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

### Следующие шаги

Проверка соответствия дизайна согласованному стилю.

### Примеры

- Inland Revenue
- Israel Aircraft Industries

### Внеклассное чтение

Hix, D and Hartso, H R. Developing User Interfaces

Dumas, JS, and Redish, Janice, A. (1999) Practical Guide to Usability Testing, Intellect Books.

Rubin, Jeffrey (1994) Handbook of Usability Testing. John Wiley and Sons, New York, NY

Snyder, Carolyn, Using Paper Prototypes to Manage Risk, October 1996, Software Design and Publisher Magazine

Обсудить (5)

Ссылки по теме

- Эта статья на английском языке | англ.

« назад к списку статей

#### Указатель категорий

- Информационная архитектура (7)
- (X)HTML (12)
- Юзабилити (24)
- Якоб Нильсен (45)
- CSS (24)
- Навигация (14)
- Графика (4)
- A List Apart (14)
- Дизайн (11)
- Инструменты (8)
- Цвет (8)
- Бизнес (19)
- Менеджмент проектов (9)
- Тестирование (7)
- Программирование (9)
- Реклама и продвижение (12)
- Технологии (10)
- Проектирование (6)
- Поддержка (3)
- Текст и контент (9)
- Книги (2)
- Мысли вслух (4)
- Flash (6)

что такое система Орфус?
подробнее
Удобный хостинг $6/мес.
- Поддержка PHP/Perl
- 500MB места на диске
- 15GB трафик в месяц
- Тестовые аккаунты
- Статистика
- MySQL база данных
- Панель управления
- SSH/FTP доступ
- 24x7x365 поддержка на русском
- Регистрация доменов
- Бесплатные поддомены.
- 100+ PHP скриптов
www.a1-hoster.com