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

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

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

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

IT-конференция МТС True Tech Day 17 мая

Что будет:

• 5 тематических треков: Main, Development, AI/ML, Cloud, Science;
• 50 спикеров с докладами про архитектуру, облачные платформы, NLP4Code, вероятностное программирование, безопасность контейнеров и другое;
• 10 часов нетворкинга;
• Цифровые зоны и digital-интеграции;
• А ещё вечеринка со звездой.

Все спикеры и темы уже на сайте. Регистрируйся на True Tech Day. Участие бесплатное.

Реклама. ПАО «МТС». ИНН 7740000076. ОГРН 1027700149124

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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