Как сегодня выбирается дизайн для большинства сайтов когда начинается создание сайта? Методом подбора: нравится ли дизайн заказчику или не нравится. И в большинстве случаем заказчик – это конкретное лицо, со своими взглядами и вкусами и пристрастиями. Это изначально неверная концепция, которая еще до появления сайта в сети отсекает в некоторых случаях до половины потенциальных покупателей. Не верите? Посмотрите на сайты рядовых фирм и компаний – иногда встречаются настоящие кошмары! А ведь эти фирмы в большинстве случаев платят за сайт минимум 800-1000$, то есть дизайн индивидуальный и делает его профессионал. А почему так происходит? Да потому что есть одно большое препятствие для красивого сайта – мнение директора фирмы-заказчика. Которое может не соответствовать эстетическим пристрастиям посетителей сайта.
Вот поэтому умные зарубежные компании создали специальную науку – проектирование интерфейсов (usability – русская калька произносится как Юзабилити). И когда проектируется серьезный сайт или программа, то принимаются в расчет не только технические детали, но удобство пользования и интуитивность разрабатываемого интерфейса.
Понимать принципы правильного строения сайта очень важно для веб-аналитика. Ведь когда решается вопрос о редизайне старого сайта для уменьшения показателя отказа, то при проектировании нового дизайна лучше полагаться не на свой опыт, а на конкретные знания, которые с большей вероятностью увеличат конверсию сайта, а значит будет получен должный эффект от работы веб-аналитика.
Особенно интересно стало изучению юзабилити при появлении на рынке Website Optimizer и аналогичных ему инструментов. Теперь каждый сам может проводить тесты, когда одной половине посетителей показывается один (старый) дизайн, а другая половина видит другой (новый) дизайн сайта. Если у второй половины посетителей показатель отказов меньше и конверсий ими совершено большей, то результат от смены дизайна налицо.
Хочу привести небольшой простой пример, относящийся к теме юзабилити.
Рисунок 1. Вот простой белый лист, расположенный ниже. Взгляд человека не сфокусирован ни в какой точке этого листа, потому что ему не за что «зацепиться». Запоминание и восприятие информации минимально.
Рисунок 2. Оп! На рисунке появляется небольшая точка, и она целиком завоевывает внимание зрителя. Она называется фокусной точкой, поскольку взгляд человека сразу фокусируется на ней.
Рисунок 3.Появляет вторая точка, более крупная. Она отбирает внимание зрителя/посетителя у маленькой точки сверху. Когда человек видит такую картину, он смотрит сначала на большую точку, а потом его взгляд перемещается на маленькую. На этом рисунке уже две фокусных точки. Схема взгляда показана стрелками.
Рисунок 4. И вот появляется огромная точка, и перетягивает внимание на себя с первых двух. Человек смотрит сначала на огромную, потом на большую, а уже потом на маленькую точку. И у нас уже целых три фокусных точки. Схема взгляда показана красными стрелками.
Фокусными могут быть не только точки, это могут быть и рисунки, и текс, и что угодно. Поскольку наша тема близка к веб-аналитике, то будем рассматривать сайт, а на сайте у нас будут фокусные блоки.
Рисунок 5. Фокусные блоки на сайте.
Как всю эту информацию мы можем использовать в практических целях? Элементарно! Для построения правильной последовательности подачи информацию потенциальному заказчику/покупателю. Схема может работать примерно так:
- Привлечение внимания (крупный блок 1)
- Дополнительная информация (блок 2)
- Конкретное предложение товара или услуги (блок 3)
Нужно понимать, что три блока взяты просто для наглядности. На самом деле их может быть два или десять, все зависит от целей и тематики сайтов. Но стоит заметить, что оптимальный вариант — это от трех до пяти блоков. Двублочная схема может быть недостаточно информативной (тут только два шага: привлечение внимания и предложение), а схема из пяти блоков уже сложна для восприятия.
Вот небольшой рекламная страница, построенная по принципу описанного выше примера юзабилити. Здесь взгляд посетителя падает сначала на девушку, потом получает дополнительную информацию, и затем посетитель видит готовое решение проблемы.
