Блог NunDesign

Я уже расказывала о том, что наши дизайнеры кроме прочих задач рисуют эскизы рекламных сайтов, большей частью на наши же программы и сервисы, в том смысле, что разрабатываемые у нас, а не для сторонних заказчиков. Таких рекламных сайтов на каждую тему может быть несколько: организовывается ли акция, или  выпускается версия программы, заточенная под определённые задачи (суть определённых задач заказывает отдел маркетинга, у них там свои исследования) или затеваются продажи на другой рынок (один из примеров – индийский рынок, и рекламная компания, ориентированная на индусов, там и цветовые гаммы использовались другие, не такие, как для американской аудитории, ещё была кое-какая специфика). В принципе постановка задачи для рисующих дизайнеров всегда почти одинакова: чётко (не запрятано среди прочих “элементов дизайна”) видно название программы или сервиса, тексты, которые кратко дают понять, что это за программа и зачем она юзеру – в первой половине экрана, и СамаяГлавнаяКнопка “Download Now” (для программ) или “Join Now” (для сервисов) в правой верхней части экрана, по исследованиям отдела маркетинга эта зона – самая комфортная для клика по главному элементу сайта.

Но не следует преуменьшать роль дизайнера при создании эскиза сайта: визуальными элементами, комбинациями цветов, формами, размерами можно создавать акценты и манипулировать вниманием посетителя, поэтому базовые рекомендации, в том числе и по поводу места размещения СамойГлавнойКнопки – не обязательное руководство к действию, а упрощённая формулировка более расплывчатой задачи: дизайн должен быть таким, чтобы пользователь кликнул на кнопку и скачал программу или присоединился к сервису. Если эта задача дизайнером выполняется, и зона, где размещена главная кнопка, по статистике и в самом деле самая кликабельная, самая “активная зона”, то никакой отдел маркетинга не станет придираться к формальным постановкам задачи.

Замечательная картинка, которая и может быть иллюстрацией тому, как визуальными средствами можно подсказывать пользователю, куда тянуться мышей и на что кликать. Но дизайнеры — публика упёртая, и зачастую, пока не докажешь на практике, что их пречудесный интерфейс “не работает”, ошибку в эскизе не видят. Интересно при этом, что те дизайнеры, которые знакомы с какими-то анализаторами активных зон на веб-страницах, типа той же зоны, в которой должна находиться СамаяГлавнаяКнопка, гораздо более динамично реагируют на замечания, да и при разработке эскиза мыслят немного по-другому, держат на не особенно осознаваемом уровне ту самую будущую карту кликов, сводя весь интерфейс к одной активной зоне.

Анализировать активные зоны на сайте можно только постфактум, когда уже потрачено время на эскиз, вёрстку, интеграцию. У всяких отделов маркетинга, который тестированием и анализом занимается в промышленных масштабах, в работе какие-то платные тулзы, но для бытовых целей обычно достаточно бесплатных или условно-бесплатных. Общую информацию о самых кликабельных, горячих зонах страниц сайта может предоставить тот же Google Analytics (раздел “Содержание”, подраздел “Наложение данных на сайт”):

Ну да, кликните на превьюшки, чтобы увидеть экраны с метками google analytics в полный размер. Метки показывают в прямоугольничках на ссылках, сколько в процентном отношении, относительно общего количества кликов по ссылкам в документе, кликали на конкретные ссылки. На первой превьюшке можно увидеть клики на главной странице этого блога, на второй превьюшке – на одной из внутренних страниц, одной из последних добавленных записей. Это не особенно удобно для анализа:

• во-первых, в интерфейсе аналитики я так и не нашла, как переключить относительные значения в процентах в абсолютные значения в количествах кликов.
• во-вторых визуализация этой статистики… подкачала. да, не наглядно, излишне, по моему мнению, лаконично. Здесь будет уместно (и многим дизайнером полезно) вспомнить о замечательном visualstyle.ru, где в разделе “Визуализация” как раз и публикуются разные оригинальные способы построения инфографиков, любых данных.

Ещё один замечательный сервис, который поможет вам построить карту кликов сайта – http://crazyegg.com/, как раз он и есть “условно бесплатный”, т.е. тестовые карты можно построить бесплатно, но для профессиональной работы стоит завести платный аккаунт. У этих ребят всё в порядке с визуализацией, строятся карты и с зонами, где холодные цвета показывают менее активные зоны, чем горячее цвет, тем активнее зона, и с метками, при клике на которые можно посмотреть точные, абсолютные значения количества кликов (метки тоже цветные, тона ближе к красному – больше кликов, синие – меньше). Так же можно построить карту с зависимостью кликаемых зон с разрешениями экрана, операционными системами, в зоне “konfetti” есть так же интересная статистика количества кликов пользователей, пришедших от конкретных рефереров (вот вам визуальный инструмент оценки полезного траффика и бесполезного).

Очень мне нравится простенький, как в настройках, так и по визуализации результатов тестирования сайта adgreed.com. Показывает статистику по кликам (не только на ссылках, но и случайных кликах по тексту или пустому экрану, это для дизайнера тоже, кстати говоря, важная информация) и по движениям мыши по экрану. Статистика показывается раздельно для разных разрешений экранов пользователя, клики и движения мыши которого учитывались. При этом обнаружилось интересное: если для документа стоит одновременно код google analytics и код adgreed, и во вкладке со статистикой от google analytics была запущена задача “Наложение данных на сайт”, то AdGreed показывает экран с графическим представлением статистики, наложенным на фиксированные по ссылкам данные от гугла (те самые, в процентах относительно общего числа кликов). Получается вполне наглядно:

Здесь на первой превьюшке – визуализация статистики по движениям мыши (зелёные метки), на второй – клики (красные метки), статистика для экрана 1024px, на третьем – клики, статистика для экрана 1600px.

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

Tags: active zone, adgreed, crazyeggs, designer, interface, screen, дизайн

This entry was posted on Tuesday, August 5th, 2008 at 1:08 pm and is filed under дизайн. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.