Читать книгу Создание сайтов - Группа авторов - Страница 17

Точка отсчета в прототипировании

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

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

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

Рабочий процесс

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

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

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

Юзабилити и здравый смысл

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

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

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

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

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

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

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

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

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

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

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

Принцип самодостаточности

Прототип должен быть понятен людям, которые увидят его впервые в жизни. Собственно, в индустрии сайтостроительства по мере достижения ею зрелости увеличивается число компаний и команд, чья компетенция сводится к тому, чтобы в качестве конечного продукта выдавать прототип, по которому другая компания или команда будет писать код и рисовать дизайн сайта (взгляните, например, на Prototype.ru).

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