Mittwoch, 30. April 2008

Поведение Глаза Юзера на Странице

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


Знать, как ведет себя глаз посетителя на сайте – очень важно. Эту информацию можно применять по разному:



  • проектировать эффективный со всех сторон дизайн, удовлетворяющий посетителей на все 100%

  • вставлять рекламу «куда-надо» и увеличивать ее CTR. А соответственно – и прибыль

  • исправить недочеты в своем дизайне, которые лишают вас дополнительного заработка


Поэтому я перевел полезную статью дизайнера по имени Andy Rutledge, где он провел анализ нескольких сайтов. Поехали (все картинки, ессно, увеличиваются).


1) Сразу после того, как посетитель увидит лого, он немедленно обратит свое внимание на разноцветные блоки справа. Там же размещаются ссылки на страницы, куда мы хотим отправить посетителя.


color1.jpg


2) Отличный пример использования цветов, заставляющих пройти посетителя по определенному пути.


color2.jpg


Обратите внимание на контраст черного и зеленого и черного/зеленого/белого. Путь глаза: Лого (1) – общий текст (2) - второстепенный текст (3). Важно отметить, что такому пути дополнительно способствует белая стрелка.


color2_fade.jpg


3) Еще один хороший пример того, как провести посетители из одной точки в другую.


path1.jpg


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


path1_fade.jpg


Но здесь есть и недостатки. Скрин слева, показывающий продукт в действии. Слишком кричаще выглядит. Это как будто вы сосредоточенно работаете за компьютеров, а ваш 4летный сын подходит к вам и, дергая за рукав, кричит «Эй, посмотри! Эй, посмотри! Эй, посмотри!». Гораздо разумнее было бы сделать небольшую призывающую к действию кнопку для демонстрации продукта.


4) Из-за слишком высокой контрастности, этот дизайн будет похуже.


chaos1.jpg


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


5) Из-за высокого контраста, наиболее бросающимся элементом на странице является небольшая текстовая аннотация в самом верху.


wasp.jpg


Это наиболее важная информационная составляющая часть и этот дизайн обеспечивает ей должное внимание. Следующий же элемент, куда перескакивает взор посетителя – это белая часть.


6) Картинка и текст в центре бросается в глаза и раскрывает главную идею, а три дополнительных блока доносят остальную информация, с которой хотят ознакомить пользователя.


limitchoice1sm.jpg


7) Здесь можно увидеть довольно неудобную навигацию в верху страницы.


chunk2.jpg


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


А теперь идите и убедитесь, что дизайн ваших ресурсов позволяет вам получать максимальную выгоду и прибыль.


Спонсоры блога:



Ох уже эти бесплатные консультации по SEO, кучу подареных RU-доменов и халявный хостинг... Если все перечислю, просто не поверите.



Traffic Converter - антиспайваре партнерка 2008 года. Здесь ЕСТЬ деньги.



P.S. А еще у меня есть под-блог - News.WebMoon.Ru. Если вы хотите быть в курсе ВСЕГО интересного из мира SEO, SMO, Манимейкинга - он вам несомненно поможет. Заглядывайте.




© Дмитрий S.M.A.R.T. for WebMoon, 2008. |
Permalink |
No comment