Прототип: бумажный или интерактивный?

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

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

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

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

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

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

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

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

Рис. 2 UI Stencils — линейки. Все помнят офицерские линейки. Вот такая специальная линейка с трафаретами основных интерфейсов сайта поможет быстро и, главное, четко изобразить каркас страницы на бумаге.

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

Рис. 4 Behance Dot Grid Book — блокнот с точечной разметкой. Совсем привычный блокнот, только разметка на страницах сделана в виде точек. Точки значительно удобнее, чем, например клетки, ведь дополнительные линии будут отвлекать пользователей от сути прототипа.

Интерактивные прототипы

Веб-сайты обычно состоят из сложных связей, осуществляемых с помощью интерактивных форм, баз данных, навигационных интерфейсов, фреймворков. Этот факт определяет выбор системы проектирования сайта в пользу использования инструментов позволяющих создавать динамические интерактивные прототипы, например как Axure RP Pro. Axure RP Pro был создан и предназначается для быстрой разработки прототипов сайтов, которые в дальнейшем могут быть использованы заинтересованными в разработке сайта сторонами для визуализации будущего сайта, а также пользователями для тестирования сайта.

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

Основные преимущества интерактивного прототипа сайта:

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

Наряду с преимуществами существуют и некоторые недостатки:

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

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