Клики, скролинг и другие препятствия для конверсии сайта / Основы продающего интерфейса. Часть 1

Клики, скролинг и другие препятствия для конверсии сайта / Основы продающего интерфейса. Часть 1

(00:10) Здравствуйте, меня зовут Ткачев Владислав Владимирович, я являюсь основателем веб-агентства Station. Сегодняшнее видео является первым из целой серии мастер-классов, посвященным основам юзабилити на сайтах. Просмотрев данный курс, вы с легкостью сможете модернизировать свои сайты, сделать их более удобными для посетителей и более рентабельными для вашего бизнеса. Первая тема называется «Клики, скроллинг и другие препятствия для конверсии сайта». В нем мы рассмотрим самые основные моменты поведения человека, когда он только попадает на ваш сайт.
(00:41) Первая тема – это сканирование страницы. Соответственно, как выглядит поведение человека, когда он только-только прям попадает на страницу вашего сайта, она открывается в его браузере. Первое – любой человек сканирует страницу слева направо, сверху вниз. Но это не всегда относится к сайтам. Не всегда шапка сайта является самым главным элементом. Если на вашей странице присутствует какой-то более яркий, к примеру, да или более громоздкий, внимание может начинаться с него. После чего также, соответственно, происходит движение слева направо, сверху вниз. И соответственно, по круговой траектории. При всем при этом необходимо учитывать, первый момент скроллинга. Когда вы расставляете весь контент на странице, помните основное золотое правило юзабилити: 60% посетителей не прокручивают страницу вниз. Поэтому основную, наиболее сладкую информацию с точки зрения маркетинга, вам необходимо поднимать как можно выше над уровнем сгиба страницы. Следующий не менее важный момент называется мертвые зоны. Это те зоны, которые человек не обращает за первые 10-15 секунд. Бывают даже такие элементы интерфейса, которые человек видит через минуту после того, как он уже бродит по сайту. К сожалению, выявить мертвые зоны достаточно сложно. А в реальности это фактически только при юзабилити тестировании. Или другой вариант, если вы будете все-таки тестировать ваш сайт на фокус-группе знакомых людей и просто выявлять эти вещи. Но понимание того, что присутствует мертвая зона и самого процесса сканирования страницы даст вам мысли к тому, как можно модернизировать контент и какие блоки, скорее всего, могут попадать как раз таки в эту мертвую зону. Чем она опасна? Тем, если в нее попадают какие-то знаки доверия, которые наиболее важны с точки зрения конверсии, да, и принятия целевой аудитории решения в сторону вас, как исполнителя какой-то услуги либо покупки товара именно в вашем магазине, соответственно надо постоянно работать над внешним видом страниц, проводить АБ-тестирование и так далее.
(02:55) Следующий, еще, тем не менее, важный момент – это зона отдыха для глаз и вообще фон сайта. Наиболее выгодный с точки зрения реализации продающего интерфейса – это все-таки белый фон, потому что это основная ментальная модель, да, фактически 90% сайтов в интернете имеют белый фон. Плюс ко всему, когда у вас соответственно меняется разрешение, да, при адаптации его под различные расширения экранов, при белом фоне вы будете выигрывать место для своего интерфейса. Это даст вам преимущество в том, что вы как можно больше элементов различных брендов, знаков доверия и так далее сможете разместить в первой зоне экран. Следующий не менее важный момент – фон в плане анимации. На малом проценте сайтов, порядка 5% в интернете делают анимированный фон. Это вызывает проблему, притом, когда человек начинает изучение контента, то есть самой информации на страницах сайта. Соответственно, это делает нагрузку для чтения, просмотра каких-то дополнительных файлов им так далее. Поэтому всегда думайте о том, анимация на самом деле это довольно-таки тонкий инструмент, и переизбыток ее на странице приведет наоборот к ухудшению восприятия, соответственно, вашего рекламного послания.
(04:11) Следующий очень важный момент – это клик. Само понятие клика в интерфейсе заключается в том, что если вы прячете какую-либо полезную информацию для целевых посетителей в клик, скрывая их в слоях CSS или в каких-то других, всегда помните о том, что больше половины посетителей данной страницы ее никогда не увидят. К кликам, очень частая ошибка, относят непосредственно различные знаки доверия: благодарственные письма, отзывы и так далее. Вместо того чтобы их размещать на самой посадочной странице, делая послание более продающим, да, с точки зрения психологии продаж, их скрывают в клик. Соответственно, тем самым половина косвенных факторов, которые влияют на конверсию, просто отсекаются. Еще один важный момент – анимация как убийца конверсии. То, о чем я рассказал или все-таки это эмоциональный окрас к действию? Смотрите, соответственно, в чем это убийца конверсии? Человек заходит на ваш сайт, начинает его изучение, смотрит там по нему слева направо, сверху вниз, у него где-то сбоку начинает что-то дрожать. Соответственно, он переводит свое внимание и дальше траекторию глаз уловить довольно-таки тяжело, и при всем при этом вы понимаете, что мертвая зона она довольно-таки сильно расширяется в глазах, то есть какие элементы здесь уже попадут довольно-таки тяжело определить, потому что уже идет нестандартное сканирование. Но, при всем при этом, если есть какие-то элементы на странице, которые вам крайне необходимы, чтобы на них обратили внимание, я рекомендую использовать, кончено анимацию, либо, да там обыгрывать это дизайном, либо легким непосредственным движением, возможно, там как блик и так далее. Специально здесь также отметил Flash. Flash не рекомендуется вообще использовать в анимации на сайтах. Первый момент – это довольно-таки тяжелый язык, да, с точки зрения загрузки страницы, он увеличивает это время. Второй момент – он не безопасен, то есть его довольно-таки легко вскрыть и так далее. На данный момент замены Flash очень много. Есть html5, последняя версия CSS Java script делают вполне сносную, и даже более яркую анимацию, нежели Flash. К тому же, всегда помните про мобильный трафик. Часть, соответственно, такой анимации из устройств Apple просто не будет открываться. Также необходимо помнить про боковое зрение. Ну, здесь, в принципе, основной момент, можно сказать, идет больше к коллегам по цеху – людям, которые занимаются разработкой интерфейса. Чтобы четко понять, насколько вы хорошо разверстали страницу и не давите ли вы на человека, да там, зоной отдыха для глаз, оставили ли вы ему или нет, выведите mockup интерфейса в боковое зрение, то есть, смотрите прямо и обратите внимание, видите ли вы боковым зрением четко все элементы своего интерфейса на главной странице. Если вы их видите – отлично. У вас отличная верстка, ее можно запускать далее. Если они все-таки скомканы воедино, не рекомендуется заниматься дальнейшей версткой, и надо продолжать дальше мозговой штурм и разгружать интерфейс. В принципе, эта практика пришла еще с классического маркетинга. Это техника верстки из глянцевых журналов. Можно взять абсолютно любой сейчас глянцевый журнал. Главная страница, если вы видите ее в боковое зрение, вы четко будете видеть каждый элемент по отдельности, ну, по крайней мере, осознанно очертания.
(07:35) Вот данный пример – сканирование страницы. Здесь показан интересный сервис, Attention Wizzard это называется. В нем есть бесплатная версия, триальная. Что позволяет сделать? Загрузить соответственно PrintScreen вашей страницы туда, и он соответственно математическим расчетом примерно покажет, как будет происходить движение глаз человека на странице. Соответственно, это хотя бы примерно даст понимание, где возможно находится мертвая зона. Данный сервис разработан не в России, это американский аналог Тим Эш, очень известный человек в сфере АБ-тестирования и интернет-маркетинга. Ихняя компания занимается АБ-тестирование и speedy-тестами для различных крупных организаций по всему миру. Они взяли, загрузили всю необходимую информацию соответственно в данный сервис и это вполне дает там понимание того, как будет двигаться движение глаз с математическим расчетом робота. Как говорят сами создатели, примерно +/- там от правды там 30%.
(08:30) Следующий не менее важный элемент, который следует учитывать во время сканирования человеком контентом – это инфографика. Либо еще называют этот элемент пентограмика. Это тот самый кружки логотипа, который вы видите, это значки PNG, которые позволяют разгрузить контент на странице, то есть соответственно, избежать портянок текста и сделать его более приятным с точки зрения дизайна. Соответственно, да, главное в инфографике – это простота и понятность. Ее функция заключается в том, чтобы человек, когда видит этот логотип, он понимал, какой части будет идти контент, то есть там текстовый и так далее. Ну и значок доллара это преимущества, значок щита – это, к примеру, гарантии и так далее. Рекомендации по ее составлению: тратьте не более 10 секунд на поиск образов. Если вы будете тратить немного более длительно время, вы будете находить, на самом деле, те образы, которые будут понятны только вам. Соответственно, как вы понимаете, такая инфографика будет плохо работать именно для целевых посетителей ваших сайтов. Также да вот предлагаю ссылку на довольно-таки интересный сервис, которым была сложена вся данная инфографика в данной презентации. Также самое главное правило, для чего вообще в принципе тестировать инфографику на своих страницах – люди в интернете не читают. И при быстром сканировании страницы инфографика позволяет вашему целевому посетителю забирать именно ту часть информации, которая ему наиболее важна.
(10:08) Ну и непосредственно поговорим о самом главном элементе сканирования, все-таки, если у вас не яркий образ на посадочной странице, а все начинается обычно с логотипа и шапки сайта. Какие рекомендации есть по шапке сайта, чтобы избежать основных проблем? Первое – логотип всегда должен являться ссылкой на главную страницу. Это ментальная модель поведения в интернете пользователей, которых приучили все крупные поисковые системы Яндекс, Google и так далее, то есть уже все абсолютно люди знают, что кликая на логотип, необходимо проваливаться на главную страницу. Не так часто встречается ошибка, но она все-таки еще присутствует на ряде сайтов. Description – краткое описание деятельности. Будьте внимательны в данном контексте это SEO мета-тег, это краткое описание деятельности вашей компании. Она в первую очередь рассчитана на тот момент, что не всегда удается четко передать дизайном нишу бизнеса, которым вы занимаетесь. То есть бывает так, что по дизайну можно подумать, что компания занимается IT-разработками, а на деле они занимаются продажей пластиковых окон. Чтобы вот не происходило такой сбивки, description дает понять, чем вы занимаетесь, то есть краткое описание деятельности буквально из одного – двух предложений. Например, там, оптовые продажи, не знаю, строительных материалов. То есть человек сразу за первые там буквально две-три секунды будет понимать, к какой тематике относится ваш сайт. И это поможет избежать ряд проблем.
(11:36) Следующий элемент такой же, наверно, не менее важный – это контакты. Как ни удивительно, но эта ошибка повторяется практически на половине сайтов, когда контакты не выводят именно непосредственно всю шапку, а скрывают их опять же в клик, и больше половины людей их просто не видят и не заходят в раздел контакты. Контактная информация важна в том плане, что человек может в любой момент путешествия по вашему сайту захотеть с вами связаться. И обычно вот этот сам эмоциональный позыв к действию, он спонтанен, то есть если соответственно, человек не видит телефонной информации в данный момент, да там, номера телефона он может просто соответственно уйти, потому что звонок - он сопряжен с определенным стрессом для человека. Соответственно здесь рекомендую всегда верхний правый угол именно использовать для контактной информации, как сделано в принципе на 90% всех коммерческих сайтов. Также в шапке необходимо использовать региональную привязку, если вы работаете по нескольким регионам и также это в принципе в связке с контактной информацией позволяет динамически подменять номера, отслеживать проводимые рекламные кампании в интернете и так далее. Возможность добавить сайт в закладки тоже отличный аналог, например, кнопке заказать обратный звонок. Используйте, например, немножко другой функционал. Когда в вашей нише бизнеса довольно-таки отложенный спрос, то есть вы продаете не что-то горячее, там например, не знаю, покупка пицца, заказ пиццы на обед и так далее, когда там человек буквально хочет еду там, в течение часа полутора и так далее. Когда это более отложенный спрос, к примеру, там продажа недвижимости, когда человек может год, полтора и два идти к принятию решения о покупке, возможность добавить сайт в закладки позволяет вам тот трафик, который вы закупаете в интернете, кольцевать, соответственно, на своем сайте уже абсолютно бесплатно, то есть вы один раз купили посетителя, он добавил ваш сайт в закладки впоследствии он может возвращаться к вам на сайт уже абсолютно бесплатно для вас. И соответственно это позволяет удерживать ваш сайт, ваше рекламное послание у него в закладках, что в принципе сыграет не только на конверсии сайта по общему, но также и на SEO-продвижение, потому что поисковые роботы довольно-таки сильно любят так называемый type-in трафик. Трафик, который идет из закладок и напрямую из адресной строки браузера.
(14:05) Также возможный вариант с шапкой – это фиксация ее, когда вы делаете адаптивную верстку под планшеты и так далее ну и в принципе с сайтами, очень часто, как один из вариантов фиксирует ее наверху как раз таки с контактной информацией и горизонтальным меню, в котором располагаются технические страницы. Те страницы, к которым человек может обратиться в любой момент путешествия по вашему сайту. О них мы расскажем уже в последующих мастер-классах. Соответственно, да, это используется, это является плюсом. Также соответственно в верхнем правом углу наиболее привычное расположение для корзины для вашего интернет-магазина.
На этом у меня все по сегодняшнему мастер-классу. Спасибо за внимание! Ставьте лайки, огромная будет благодарность за репосты! Подписывайтесь на наш канал на YouTube. Если будут вопросы, можете писать либо на наш контактный e-mail, либо в комментарии к данному видео. Спасибо!