Читать книгу Прототипирование. Практическое руководство - Тодд Варфел - Страница 9

Если картинка лучше тысячи слов, то прототип лучше десяти тысяч. Он значительно расширяет возможности показа и рассказа, дает возможность испытать разработку.

Одно дело рассказывать и показывать раскадровки, и совсем другое – видеть в реальности.

Роберт Хокман-младший

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

Стандартные модели документирования

Техническое задание. Обычно это документ, где объяснены технические и функциональные требования к системе.

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

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

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

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

Некоторые технические ограничения, например на размер страницы в 100 КБ, могут быть незаметными в прототипе. Их можно зафиксировать во вспомогательном документе, гораздо меньшем по размерам, чем 60–200 страниц.

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

Сочетание аннотированных каркасных представлений с техническим заданием может представить исходное ви́дение с точностью 70–80%. Остается слишком много возможностей для ошибок.

AJAX и Monkey Wrench

Что произойдет, если добавить AJAX[4] или другое приложение RIA (Rich Internet Applications – многофункциональные интернет-приложения)? Все начнет разваливаться на части, причем быстро. Ни техническое задание, ни аннотированные каркасные представления не могут отразить правила взаимодействий и переходов.

В основе традиционных взаимодействий лежат страницы. В AJAX и RIA часто используются состояния. Страница или экран могут содержать несколько слоев или виджетов, которые работают независимо друг от друга (и в то же время взаимосвязаны). Например, обновление канала RSS на странице не требует обновления всей страницы. Обновляется только виджет RSS, все остальные элементы остаются прежними.

Это дало многим разработчикам повод заявить, что парадигма страницы мертва, а новая парадигма – экран или состояние.

Переходы и анимация – еще одна проблема. Пытались ли вы описать самоисправляющийся переход в AJAX?[5] Мое самое удачное описание, дополненное пассами фокусника и взмахами воображаемой волшебной палочки, вызвало удивление и непонимание у публики.

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

4

AJAX (от англ. Asynchronous JavaScript and XML, асинхронный JavaScript и XML) – использование «фонового» обмена данными браузера с веб-сервером в интерактивных пользовательских интерфейсах веб-приложений (позволяет ускорить и повысить удобство работы). Термин появился в 2005 году. Прим. ред.

5

Подробнее см.: http://developer.yahoo.com/ypatterns/richinteraction/transition/selfhealing.html. Прим. науч. ред.