Создание сайтов
Шрифт:
Тестирование прототипов
Если мы говорим об интерактивных прототипах, то следует помнить о том, что одна из их главных функций – обеспечить тестирование ключевых механизмов сайта.
• Альфа-тестирование. Проводится с привлечением команды проекта. В той или иной форме оно неизбежно. Помните только, что у разработчиков, сколь бы талантливы они ни были, замыливается глаз, поэтому в их устах утверждение «Все в порядке!» не означает, что все действительно исправно.
• A/B-тестирование, или сплит-тестирование.
• Тепловые карты. Самый популярный в Рунете инструмент для составления тепловых карт сайта входит в сервис «Яндекс. Метрика». Наглядно, цветовым выделением с плавной градацией (интуитивно понятное «горячо – холодно») показывается, насколько часто посетители страницы щелкают мышью по различным элементам интерфейса или переходят по тем или иным ссылкам, охотно ли прокручивают страницу вниз и т. д. Учтите, что на страницах, где вы хотите увидеть тепловые карты, должен быть установлен счетчик «Яндекс. Метрики».
Яркость и величина «теплового облака» вокруг детали интерфейса необязательно прямо коррелирует с ее уместностью и удобством. Так, огромное красное пятно в районе ползунка на ценовой шкале может сигнализировать о том, что сортировка организована из рук вон плохо, поэтому посетитель вынужден «пасти мышь» и перетаскивать ползунок вправо-влево в попытке понять, в чем проблема.
Кто должен создавать прототипы
Схематичную «раскадровку» сайта должен выполнять отдельный специалист, например эксперт по юзабилити (см. далее подраздел «Юзабилити и здравый смысл») или аналитик. Распространено ошибочное мнение, что прототипирование – исключительно дело менеджера проекта или дизайнера. Тем не менее куда правильнее делать прототип, ориентируясь на представителя целевой аудитории. Между тем менеджер проекта прежде всего озабочен тем, чтобы состыковать желания заказчика с представлениями разработчиков, а дизайнер лишь при огромном опыте в сайтостроительстве способен примирить свою тягу к красоте с удобством навигации и совершенством архитектуры.
Будем отталкиваться от того, что в идеале создание прототипа не дополнительный, а обязательный этап разработки сайта. Прототип не заменяет техническое задание, а иллюстрирует его или служит его логическим развитием, будучи еще одной ступенькой к готовому сайту. Часто дизайнер, особенно с опытом в UX [4] , клянется и божится, что прототип ему без надобности и все промежуточные процессы у него проистекают «в голове». Не верьте. В абсолютном большинстве
4
UX (аббревиатура от англ. user experience) – здесь: комплекс знаний о принципах психологического и информационного взаимодействия между пользователем и программной средой.
Как делать прототипы
Точка отсчета в прототипировании
Прежде всего необходимо определиться, какие требования предъявляются к сайту (этап техзадания), какие проблемы он решает и для кого предназначен. Попутно скрупулезно анализируем, как организованы популярные сайты выбранного типа: какие решения в области интерфейсов здесь распространены, есть ли что-то общее между интернет-ресурсами ваших конкурентов. Если вы нуждаетесь в сайте-визитке, то, допустим, какой формат портфолио у отраслевых компаний. Если продаете бытовую технику онлайн, то как рубрицировано меню на топовых торговых площадках той же специализации и т. д.
Когда аудитория охарактеризована с предельно достижимой четкостью, гораздо легче будет составить портрет среднего пользователя (подчас целую галерею портретов), а далее наметить сценарии его взаимодействия с сайтом: что именно с наибольшей степенью вероятности станет искать в вашем интернет-магазине средств защиты от насекомых 19-летний студент-домосед из Кирова, а что 26-летняя директор по кадрам турагентства и как тот и другая могут отреагировать на важнейшие звенья интерфейса. Звучит утрированно, но общий вектор очевиден: опирайтесь не только на усредненные потребности своей целевой аудитории, но и на нужды отдельных персонажей, которые могли бы быть ее типичными представителями. Придумайте таких характерных героев и мысленно гоняйте их по навигационным лабиринтам. Это и увлекательно, и полезно.
Подлинное мастерство в том, чтобы не только продумать гладкие выходы из стандартных, усредненных ситуаций, но и предугадать экстремумы. Задача – сделать «калькулятор заказа» на сайте поставщика пластиковых окон? Разрешите посетителю подсчитать цену на изготовление произвольного количества одинаковых окон, а не выбирать число от единицы до десяти, иначе вы рискуете отсечь потенциального покупателя, курирующего капремонт в целом офисном центре.
Рабочий процесс
Резонно, чтобы перед глазами у проектировщиков всегда была общая картина сайта. Вне зависимости от того, какой инструмент используется для прототипирования, очень удобно начинать с функциональной структуры сайта в mind maps, или ассоциативных картах (см. главу 1 «Техзадание: последний раз себя спрашиваю!» и рис. 2). Полезно, чтобы файл с mind map был на «Рабочем столе» (или, например, в онлайн-сервисе типа Mindmeister.com) у вас и всех, кто занят в проекте. Как-никак дельно составленная ассоциативная карта отражает всю структуру и функциональность сайта.