Схематичную «раскадровку» сайта должен выполнять отдельный специалист, например эксперт по юзабилити (см. далее подраздел «Юзабилити и здравый смысл») или аналитик. Распространено ошибочное мнение, что прототипирование – исключительно дело менеджера проекта или дизайнера. Тем не менее куда правильнее делать прототип, ориентируясь на представителя целевой аудитории. Между тем менеджер проекта прежде всего озабочен тем, чтобы состыковать желания заказчика с представлениями разработчиков, а дизайнер лишь при огромном опыте в сайтостроительстве способен примирить свою тягу к красоте с удобством навигации и совершенством архитектуры.

Будем отталкиваться от того, что в идеале создание прототипа не дополнительный, а обязательный этап разработки сайта. Прототип не заменяет техническое задание, а иллюстрирует его или служит его логическим развитием, будучи еще одной ступенькой к готовому сайту. Часто дизайнер, особенно с опытом в UX[4], клянется и божится, что прототип ему без надобности и все промежуточные процессы у него проистекают «в голове». Не верьте. В абсолютном большинстве случаев они появляются из ниоткуда и пропадают в никуда. Вместе с вашими деньгами.

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

Когда аудитория охарактеризована с предельно достижимой четкостью, гораздо легче будет составить портрет среднего пользователя (подчас целую галерею портретов), а далее наметить сценарии его взаимодействия с сайтом: что именно с наибольшей степенью вероятности станет искать в вашем интернет-магазине средств защиты от насекомых 19-летний студент-домосед из Кирова, а что 26-летняя директор по кадрам турагентства и как тот и другая могут отреагировать на важнейшие звенья интерфейса. Звучит утрированно, но общий вектор очевиден: опирайтесь не только на усредненные потребности своей целевой аудитории, но и на нужды отдельных персонажей, которые могли бы быть ее типичными представителями. Придумайте таких характерных героев и мысленно гоняйте их по навигационным лабиринтам. Это и увлекательно, и полезно.

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

Резонно, чтобы перед глазами у проектировщиков всегда была общая картина сайта. Вне зависимости от того, какой инструмент используется для прототипирования, очень удобно начинать с функциональной структуры сайта в mind maps, или ассоциативных картах (см. главу 1 «Техзадание: последний раз себя спрашиваю!» и рис. 2). Полезно, чтобы файл с mind map был на «Рабочем столе» (или, например, в онлайн-сервисе типа Mindmeister.com) у вас и всех, кто занят в проекте. Как-никак дельно составленная ассоциативная карта отражает всю структуру и функциональность сайта.

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

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

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

В одном абзаце принципы юзабилити не изложить, и мы подробнее остановились на них в главе 16 «Юзабилити и конверсия: заставляем сайт работать». Приведем для примера несколько фундаментальных принципов. Так, установлено, что люди обычно осматривают экран слева направо и сверху вниз, отсюда и предписание самую важную информацию, включая навигационные блоки, по возможности размещать близко к точке, с которой начинается обзор. Основные элементы меню и ссылки в идеале доступны без прокрутки страницы вниз. До всех мало-мальски значимых страниц посетитель – не всегда, но как правило – должен добираться в худшем случае за три клика. Другие общие рекомендации по юзабилити перечислены, например, в тематическом выпуске рассылки SeoPult (см. блок «Полезно знать»).

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

Тип сайта, конечно, диктует исполнение интерфейса. Вместе с тем многие решения, несмотря на единичные яркие исключения, являются стандартом де-факто в современной веб-разработке, например расположение логотипа и строки поиска. Чтобы не изобрести ненароком велосипед, тем более восьмиколесный с рулем на багажнике, желательно, повторимся, ознакомиться с азами юзабилити (см. блок «Полезно знать»).

Не менее строго, чем к структуре сайта, стоит относиться к тому, как подается в прототипе контент. И безразлично – онлайн-медиа вы открываете или фотохостинг. Категорически противопоказано писать: «Здесь текст и красивые картинки». Обозначьте, где конкретно и в скольких колонках должен располагаться текст, а где картинки и каких они размеров.

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

Нумеруйте страницы в прототипе, и вам зачтется. Так же как, соединяя точки в детской книжке – от первой ко второй, от второй к третьей и т. д., – вы постепенно начинали видеть рисунок, из последовательности страниц вы выстраиваете маршрут посетителя по своему сайту. Что без недвусмысленных маркеров спланировать затруднительно. При «бумажном» прототипировании нумерация и вовсе незаменима.

И, само собой, давайте файлам понятные не только вам имена, желательно на английском языке, а не транслитом.

Границы возможностей прототипа

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