Как сделать эффективный баннер
Что такое баннер?
Это небольшой по размеру и объему файла объект обычно прямоугольной формы, который внедряется, подобно рекламному макету в газете, в вашу веб-страничку. Фактически баннер - это картинка в растровом формате Gif (чаще всего, потому что поддерживает анимацию) или Flash (новый векторный формат, также поддерживающий движение: про этот формат подробно читайте в следующих "Издательских системах"). Баннер предназначен для ссылки на сайт рекламодателя. За количество ссылок с вашего сайта к рекламодателю последний платит вам деньги (или начисляются очки, а за них - деньги). Иногда баннерами обмениваются близкие по тематике сайты. От качества выполнения баннера и от его расположения на странице зависит прирост денег и посетителей. Баннер легко сделать самому. К примеру, в Photoshop.
Если Вы решили сделать баннер самостоятельно, предлагаю вашему вниманию советы по созданию баннера с высоким откликом. Данная информация является плодом моих собственных экспериментов, а также выжимкой из некоторых статей, найденных на специализированных сайтах.
Сразу хочу заметить, что большинство приведенных ниже советов направлены исключительно на увеличение отклика (CTR) баннера. Если Вам нужны "правильные посетители" (действительно заинтересованные в товарах/услугах Вашего сервера) или, например, Вы делаете ставку на имиджевую рекламу, то простого следования нижеприведенным советам явно недостаточно, а иногда это просто противопоказано.
Итак:
1. Волшебная фраза - "Click Here"
Самый простой способ увеличить количество щелчков на Ваш баннер - попросить об этом пользователя. По статистике баннеры, содержащие слова типа "click here", "жми сюда", "visit now", "enter", имеют отклик на 30% больше, чем без оных. С рекламной точки зрения они побуждают к действию.
Хорошей идеей будет поместить на баннере псевдокнопки или полосы прокрутки.
2. Ничто человеческое пользователю сети не чуждо.
Сделайте баннер загадочным, пусть пользователь будет заинтригован:
- Что они этим хотели сказать?
- Куда ведет сей баннер?
Сексуально-эротические мотивы драматическим образом увеличивают отклик баннера, однако ориентированы на молодежь (мужчин) и едва ли могут рекламировать что-то серьезное.
3. Площадь баннера (измеряется пикселами, а никак не миллиметрами).
Баннеры большего размера имеют значительно больший отклик, чем баннеры меньшего размера. Хотя, разумеется, часто за помещение большего баннера приходится больше платить.
4. Размер баннера (в байтах; чаще, и оттого хуже, в килобайтах).
Вероятность того, что баннер быстро загрузится на текущую страницу и пользователь увидит его до того, как перейдет к другой странице, напрямую зависит от размера баннера. Если пользователь уйдет, а баннер еще не успеет загрузиться, будет уже совершенно неважно, насколько красочен и круто анимирован был баннер.
Помимо этого, многие службы по обмену баннерами лимитируют его размер. Например, не более 15 килобайт.
5. Использование анимации.
Движение приковывает взгляд. То же касается анимированных баннеров. По статистике отклик у них на 25% выше, чем у их статичных собратьев. Самое сложное здесь - добиться максимальной эффектности при небольшом размере файла изображения. Опять же: зависит от рекламируемого продукта.
6. Изображения.
Старайтесь (если это не противоречит основной концепции данного баннера) использовать изображения, а не только игру текста и цветов. Изображения приковывают внимание пользователя и могут дополнять смысл рекламного слогана. При прочих равных условиях следует отдавать предпочтения изображениям людей (лучше женщин, т.к. основная масса пользователей сети - мужчины:). Старайтесь органично встроить изображение, а не просто поместить его как прямоугольную часть баннера.
7. Цвета.
Используйте яркие цвета - они привлекают к себе взгляд пользователя. Как пишут некоторые специализированные издания, голубой, зеленый и желтый цвета предпочтительней, чем белый, красный и черный. Хотя, по моему мнению, это вопрос спорный - ведь речь идет не о дизайне как таковом, а о web-дизайне.
Подберите оптимальное цветовое сочетание для баннера. Ниже приведен список некоторых распространенных цветовых сочетаний в порядке постепенного ухудшения восприятия их пользователем:
- синий на белом;
- черный на желтом;
- зеленый на белом;
- черный на белом;
- зеленый на красном;
- красный на желтом;
- красный на белом;
- оранжевый на черном;
- черный на пурпурном;
- оранжевый на черном;
- черный на пурпурном;
- оранжевый на белом;
- красный на зеленом.
Хотя мое личное мнение: от белого по возможности надо избавляться, ведь он и так постоянно "мозолит глаза" в реальной жизни и в программах. Правилом "хорошего тона" в дизайне является умеренное использование количества цветов: не более 3. При этом есть смысл посмотреть, как цвета вашего баннера стыкуются с цветовым решением того сайта, в котором баннеры "будут жить".
8. Тестирование баннеров.
Попытайтесь запустить в показ сразу несколько однотипных баннеров, незначительно изменяйте текст, добавляйте/убирайте какие-либо черты. Иногда даже незначительные изменения текста или композиции баннера дают значительное изменение CTR. Протестируйте эти баннеры некоторое время, после этого можно убрать те, которые имеют более низкий CTR по сравнению с остальными.
Помимо самого дизайна баннера, на его отклик имеет сильное влияние расположение на странице.
Как выгодно расположить баннер на странице и некоторые другие хитрости!
Многие советы из приведенных ниже будут Вам полезны, когда Вы обмениваетесь показами напрямую с другим сайтом или, в некоторых случаях, когда Вы покупаете показы у конкретного сайта (иногда Вы будете иметь возможность диктовать свои условия). А вот если Вы просто пользуетесь системой обмена баннерами, указывать, где и каким образом будут висеть Ваши баннеры, редко представляется возможным.
Данные советы также будут полезны веб-издателям, размещающим чужие баннеры у себя на страницах за деньги (например, если Вам платят за клики на баннеры рекламодателя, и, следовательно, Вы заинтересованы в их высоком CTR).
1. Сверху или снизу!
Обычно баннеры вешаются в самом верху и в самом низу страницы. Если у Вас есть выбор места для Вашего баннера, отдайте предпочтение верху (отклик здесь выше). Хотя самый верх тоже не является оптимальным положением для баннера. Более высокий CTR наблюдается у баннеров, помещенных в середину какого-либо текста, при этом старайтесь, чтобы баннер был размещен в первом экране (пользователь не должен скроллировать страницу, чтобы увидеть баннер).
www.webreference.com проводил исследование по зависимости CTR баннера от расположения его на странице. Вкратце результаты следующие:
- баннер, расположенный ниже на 1/3 от верха экрана, дает CTR на 70% больше, чем баннер, расположенный в самом верху;
- баннер нестандартного размера (квадратный 125х125 пикселов), расположенный в нижнем правом углу первого экрана страницы (пользователь не должен скроллировать страницу, чтобы увидеть баннер), дает CTR на 228% больше, чем стандартный баннер (468х60 пикселов), расположенный в самом верху;
- при использовании одного и того же баннера одновременно сверху и в самом низу страницы (со скроллированием страницы) не наблюдается значительного увеличения CTR;
2. На какой странице размещать?
Согласно статистике, CTR баннера, помещенного на главной странице сайта, будет выше, чем на второстепенных.
3. Обязательно используйте ALT!
По статистике 10% пользователей путешествуют по сети с отключенной опцией "автоматической загрузкой графики". Поэтому важно использовать alt - описание внутри тега img (см. пример ниже).kg02413b.br>
4. Не уводите посетителей со своей страницы!
В стандартном случае, если пользователь щелкает на чужой баннер, размещенный на Вашей странице, то в этом же окне браузера начинает загружаться страница, на которую ссылается сей баннер. Возможно, новая страница так заинтересует пользователя, что про Вашу он забудет и Вы его потеряете.
Чтобы избежать столь неприятной ситуации, используйте внутри тега href ключ target=new, например, так:
<CENTER>
<a target=new href="http://www. promotion.aha.ru">
<img src="http://www.promotion.aha.ru/ promot.gif" border=0 alt="Сделайте свой web-сайт популярным"> </a>
</CENTER>
В этом случае страница, на которую имеет ссылку баннер, откроется в новом окне браузера.
5. Использовать ли рамку вокруг баннера?
Наличие рамки (внутри тега img поставить border=1 см. пример выше), совпадающей по цвету с цветом гиперссылки, будет подсказывать пользователю, что данный графический объект является кликабельным. С другой стороны, иногда такая рамка портит баннер с точки зрения дизайна, так что решать Вам (чтобы избавиться от рамки, внутри тега img поставить border=0).kg02413d.br>
6. Помещение баннера в отдельный фрейм и refresh!
Если поместить баннер в отдельный фрейм, расположенный, например, вверху или внизу экрана, то для такого баннера скроллирование не будет страшно. Перемещаясь по документу, пользователь все равно будет видеть баннер, что должно увеличить его отклик.
Помимо этого использование фрейма необходимо, если Вы решили прокручивать пользователю баннеры, пользуясь мета-тегом refresh. Помещая в HTTP код фрейма с баннером следующую строку:
, вы заставляете страницу перегружаться и, соответственно, показывать новый баннер. 10 в данном случае - время в секундах, через которое страница будет перегружаться, name.htm - http документ, который будет загружен вместо текущего.
Если Вы пользуетесь системой обмена баннеров, Вы можете использовать одно и то же имя html файла, и каждый раз при перезагрузке фрейма система будет показывать новый баннер и, соответственно, начислять кредиты. Настоятельно не рекомендую пользоваться refresh, если подобное запрещено данной баннерной системой (встречается довольно часто), Вас могут выгнать за нарушение правил.
Другой вариант - если Вы будете крутить баннеры, например, нескольких дружественных сайтов. В этом случае name.htm будет каждый раз указывать на следующий кадр во фрейме, и так по кругу. А каждый кадр будет загружать свой, установленный Вами баннер.
7. Текст над и под баннером!
Если это возможно, используйте текст над и/или под баннером:
- текст может призывать нажать на баннер (этакая типичная "click here", вынесенная за пределы самого баннера);
- текст может выражать мнение или рекламировать страницы/услуги, на которые ссылается этот баннер;
- текст может информационно дополнять баннер (для самого баннера слишком много текста противопоказано).
Тут остановимся с советами по применению баннеров: все равно универсальных советов дать нельзя. Ведь баннер - это не только размер и цвет, это еще и рекламный продукт, который, подчиняясь дизайну, при этом должен выполнять возложенные на него маркетингом и менеджментом правила.
А это уже тема для другой статьи...
Тимофей Бокарев
Это небольшой по размеру и объему файла объект обычно прямоугольной формы, который внедряется, подобно рекламному макету в газете, в вашу веб-страничку. Фактически баннер - это картинка в растровом формате Gif (чаще всего, потому что поддерживает анимацию) или Flash (новый векторный формат, также поддерживающий движение: про этот формат подробно читайте в следующих "Издательских системах"). Баннер предназначен для ссылки на сайт рекламодателя. За количество ссылок с вашего сайта к рекламодателю последний платит вам деньги (или начисляются очки, а за них - деньги). Иногда баннерами обмениваются близкие по тематике сайты. От качества выполнения баннера и от его расположения на странице зависит прирост денег и посетителей. Баннер легко сделать самому. К примеру, в Photoshop.
Если Вы решили сделать баннер самостоятельно, предлагаю вашему вниманию советы по созданию баннера с высоким откликом. Данная информация является плодом моих собственных экспериментов, а также выжимкой из некоторых статей, найденных на специализированных сайтах.
Сразу хочу заметить, что большинство приведенных ниже советов направлены исключительно на увеличение отклика (CTR) баннера. Если Вам нужны "правильные посетители" (действительно заинтересованные в товарах/услугах Вашего сервера) или, например, Вы делаете ставку на имиджевую рекламу, то простого следования нижеприведенным советам явно недостаточно, а иногда это просто противопоказано.
Итак:
1. Волшебная фраза - "Click Here"
Самый простой способ увеличить количество щелчков на Ваш баннер - попросить об этом пользователя. По статистике баннеры, содержащие слова типа "click here", "жми сюда", "visit now", "enter", имеют отклик на 30% больше, чем без оных. С рекламной точки зрения они побуждают к действию.
Хорошей идеей будет поместить на баннере псевдокнопки или полосы прокрутки.
2. Ничто человеческое пользователю сети не чуждо.
Сделайте баннер загадочным, пусть пользователь будет заинтригован:
- Что они этим хотели сказать?
- Куда ведет сей баннер?
Сексуально-эротические мотивы драматическим образом увеличивают отклик баннера, однако ориентированы на молодежь (мужчин) и едва ли могут рекламировать что-то серьезное.
3. Площадь баннера (измеряется пикселами, а никак не миллиметрами).
Баннеры большего размера имеют значительно больший отклик, чем баннеры меньшего размера. Хотя, разумеется, часто за помещение большего баннера приходится больше платить.
4. Размер баннера (в байтах; чаще, и оттого хуже, в килобайтах).
Вероятность того, что баннер быстро загрузится на текущую страницу и пользователь увидит его до того, как перейдет к другой странице, напрямую зависит от размера баннера. Если пользователь уйдет, а баннер еще не успеет загрузиться, будет уже совершенно неважно, насколько красочен и круто анимирован был баннер.
Помимо этого, многие службы по обмену баннерами лимитируют его размер. Например, не более 15 килобайт.
5. Использование анимации.
Движение приковывает взгляд. То же касается анимированных баннеров. По статистике отклик у них на 25% выше, чем у их статичных собратьев. Самое сложное здесь - добиться максимальной эффектности при небольшом размере файла изображения. Опять же: зависит от рекламируемого продукта.
6. Изображения.
Старайтесь (если это не противоречит основной концепции данного баннера) использовать изображения, а не только игру текста и цветов. Изображения приковывают внимание пользователя и могут дополнять смысл рекламного слогана. При прочих равных условиях следует отдавать предпочтения изображениям людей (лучше женщин, т.к. основная масса пользователей сети - мужчины:). Старайтесь органично встроить изображение, а не просто поместить его как прямоугольную часть баннера.
7. Цвета.
Используйте яркие цвета - они привлекают к себе взгляд пользователя. Как пишут некоторые специализированные издания, голубой, зеленый и желтый цвета предпочтительней, чем белый, красный и черный. Хотя, по моему мнению, это вопрос спорный - ведь речь идет не о дизайне как таковом, а о web-дизайне.
Подберите оптимальное цветовое сочетание для баннера. Ниже приведен список некоторых распространенных цветовых сочетаний в порядке постепенного ухудшения восприятия их пользователем:
- синий на белом;
- черный на желтом;
- зеленый на белом;
- черный на белом;
- зеленый на красном;
- красный на желтом;
- красный на белом;
- оранжевый на черном;
- черный на пурпурном;
- оранжевый на черном;
- черный на пурпурном;
- оранжевый на белом;
- красный на зеленом.
Хотя мое личное мнение: от белого по возможности надо избавляться, ведь он и так постоянно "мозолит глаза" в реальной жизни и в программах. Правилом "хорошего тона" в дизайне является умеренное использование количества цветов: не более 3. При этом есть смысл посмотреть, как цвета вашего баннера стыкуются с цветовым решением того сайта, в котором баннеры "будут жить".
8. Тестирование баннеров.
Попытайтесь запустить в показ сразу несколько однотипных баннеров, незначительно изменяйте текст, добавляйте/убирайте какие-либо черты. Иногда даже незначительные изменения текста или композиции баннера дают значительное изменение CTR. Протестируйте эти баннеры некоторое время, после этого можно убрать те, которые имеют более низкий CTR по сравнению с остальными.
Помимо самого дизайна баннера, на его отклик имеет сильное влияние расположение на странице.
Как выгодно расположить баннер на странице и некоторые другие хитрости!
Многие советы из приведенных ниже будут Вам полезны, когда Вы обмениваетесь показами напрямую с другим сайтом или, в некоторых случаях, когда Вы покупаете показы у конкретного сайта (иногда Вы будете иметь возможность диктовать свои условия). А вот если Вы просто пользуетесь системой обмена баннерами, указывать, где и каким образом будут висеть Ваши баннеры, редко представляется возможным.
Данные советы также будут полезны веб-издателям, размещающим чужие баннеры у себя на страницах за деньги (например, если Вам платят за клики на баннеры рекламодателя, и, следовательно, Вы заинтересованы в их высоком CTR).
1. Сверху или снизу!
Обычно баннеры вешаются в самом верху и в самом низу страницы. Если у Вас есть выбор места для Вашего баннера, отдайте предпочтение верху (отклик здесь выше). Хотя самый верх тоже не является оптимальным положением для баннера. Более высокий CTR наблюдается у баннеров, помещенных в середину какого-либо текста, при этом старайтесь, чтобы баннер был размещен в первом экране (пользователь не должен скроллировать страницу, чтобы увидеть баннер).
www.webreference.com проводил исследование по зависимости CTR баннера от расположения его на странице. Вкратце результаты следующие:
- баннер, расположенный ниже на 1/3 от верха экрана, дает CTR на 70% больше, чем баннер, расположенный в самом верху;
- баннер нестандартного размера (квадратный 125х125 пикселов), расположенный в нижнем правом углу первого экрана страницы (пользователь не должен скроллировать страницу, чтобы увидеть баннер), дает CTR на 228% больше, чем стандартный баннер (468х60 пикселов), расположенный в самом верху;
- при использовании одного и того же баннера одновременно сверху и в самом низу страницы (со скроллированием страницы) не наблюдается значительного увеличения CTR;
2. На какой странице размещать?
Согласно статистике, CTR баннера, помещенного на главной странице сайта, будет выше, чем на второстепенных.
3. Обязательно используйте ALT!
По статистике 10% пользователей путешествуют по сети с отключенной опцией "автоматической загрузкой графики". Поэтому важно использовать alt - описание внутри тега img (см. пример ниже).kg02413b.br>
4. Не уводите посетителей со своей страницы!
В стандартном случае, если пользователь щелкает на чужой баннер, размещенный на Вашей странице, то в этом же окне браузера начинает загружаться страница, на которую ссылается сей баннер. Возможно, новая страница так заинтересует пользователя, что про Вашу он забудет и Вы его потеряете.
Чтобы избежать столь неприятной ситуации, используйте внутри тега href ключ target=new, например, так:
<CENTER>
<a target=new href="http://www. promotion.aha.ru">
<img src="http://www.promotion.aha.ru/ promot.gif" border=0 alt="Сделайте свой web-сайт популярным"> </a>
</CENTER>
В этом случае страница, на которую имеет ссылку баннер, откроется в новом окне браузера.
5. Использовать ли рамку вокруг баннера?
Наличие рамки (внутри тега img поставить border=1 см. пример выше), совпадающей по цвету с цветом гиперссылки, будет подсказывать пользователю, что данный графический объект является кликабельным. С другой стороны, иногда такая рамка портит баннер с точки зрения дизайна, так что решать Вам (чтобы избавиться от рамки, внутри тега img поставить border=0).kg02413d.br>
6. Помещение баннера в отдельный фрейм и refresh!
Если поместить баннер в отдельный фрейм, расположенный, например, вверху или внизу экрана, то для такого баннера скроллирование не будет страшно. Перемещаясь по документу, пользователь все равно будет видеть баннер, что должно увеличить его отклик.
Помимо этого использование фрейма необходимо, если Вы решили прокручивать пользователю баннеры, пользуясь мета-тегом refresh. Помещая в HTTP код фрейма с баннером следующую строку:
, вы заставляете страницу перегружаться и, соответственно, показывать новый баннер. 10 в данном случае - время в секундах, через которое страница будет перегружаться, name.htm - http документ, который будет загружен вместо текущего.
Если Вы пользуетесь системой обмена баннеров, Вы можете использовать одно и то же имя html файла, и каждый раз при перезагрузке фрейма система будет показывать новый баннер и, соответственно, начислять кредиты. Настоятельно не рекомендую пользоваться refresh, если подобное запрещено данной баннерной системой (встречается довольно часто), Вас могут выгнать за нарушение правил.
Другой вариант - если Вы будете крутить баннеры, например, нескольких дружественных сайтов. В этом случае name.htm будет каждый раз указывать на следующий кадр во фрейме, и так по кругу. А каждый кадр будет загружать свой, установленный Вами баннер.
7. Текст над и под баннером!
Если это возможно, используйте текст над и/или под баннером:
- текст может призывать нажать на баннер (этакая типичная "click here", вынесенная за пределы самого баннера);
- текст может выражать мнение или рекламировать страницы/услуги, на которые ссылается этот баннер;
- текст может информационно дополнять баннер (для самого баннера слишком много текста противопоказано).
Тут остановимся с советами по применению баннеров: все равно универсальных советов дать нельзя. Ведь баннер - это не только размер и цвет, это еще и рекламный продукт, который, подчиняясь дизайну, при этом должен выполнять возложенные на него маркетингом и менеджментом правила.
А это уже тема для другой статьи...
Тимофей Бокарев
Компьютерная газета. Статья была опубликована в номере 24 за 2000 год в рубрике интернет :: вебмастеру
