Теперь мы есть в Telegram! Самое свежее на нашем канале
И знаете что? Это к тому же еще и выгоднее. Если посетитель посмотрит несколько страниц, у вас будет больше шансов понравиться ему. Каждая статья или страница повышает вашу узнаваемость и доверие к вам, а это в конечном счете ведет к увеличению конверсии.
Если я скажу вам, что у вас есть возможность увеличить количество просмотров страниц на каждого посетителя вдвое, и даже больше, вас это заинтересует? Учитывая, что вам не придется тратить много времени, вы можете получить отличные результаты.
Ранее я уже рассказывал про способы улучшения читабельности контента, поэтому сегодня рассмотрю вопрос шире - применительно к удобству и юзабилити сайта целиком.
Опыт взаимодействия – не искусство, а наука
Самая главная сложность на пути вебмастеров, которые боятся залезать в оптимизацию UX и юзабилити, заключается лишь в самом названии этого процесса. Но на самом деле все довольно просто и даже не требует каких-то специальных навыков. Конечно же, дополнительный опыт поможет вам быстрее добиться результатов, но улучшить показатели собственного сайта сможет практически каждый.Прежде всего давайте выясним, что же такое User Experience или «опыт взаимодействия с пользователем»?Это довольно объемная отрасль, в которой вполне реально запутаться. Опыт взаимодействия включает в себя все аспекты влияние вашего контента на каждого посетителя. Для наглядности предлагаю вам познакомиться с инфографикой:
На пути к хорошему опыту взаимодействия придется использовать сразу 5 ключей:
- Полезность: ваш контент должен выполнять какую-то цель
- Ценность: ваш сайт должен предлагать то, что люди посчитают ценным
- Актуальность: пользователям должно быть нужно то, что вы предлагаете
- Доверие: пользователь не станет задерживаться там, где чувствует себя небезопасно
- Доступность: если пользователи не могут добраться до контента (всплывающие окна, медленная скорость загрузки и т. д.), то они вряд ли посчитают такой опыт положительным. Также должна быть хорошо продуманная навигация.
1. Ссылки в статьях не только для SEO
Очень часто вебмастеры вносят различные изменения в статьи, руководствуясь тем, как на это отреагируют поисковые системы. Наверное, каждый из нас так делал. Когда вы помещаете ссылку в статью, это должно быть подкреплено не тем, что таким образом вы пытаетесь продвинуть нужный ключевик. Вместо этого лучше стать полезным для живых посетителей. Обратите внимание на страницы Википедии, сколько там ссылок:
Примерно 1 ссылка на 100 каждые слов, и без всяких сложных схем перелинковки типа сквозная, кольцевая и прочих. Есть подходящий материал - ставиться ссылка, всё просто.
Почему с точки зрения увеличения просмотров на сайте ссылки – это хорошо?
- Ссылки помогают отвечать на вопросы:
- Ссылки логически подводят читателей к следующему шагу:
- Ссылки формируют доверие:
Ссылки должны быть только внутренними?
Всегда ссылайтесь на наиболее ценный ресурс, вне зависимости от того, будет эта страница на вашем сайте или где-то еще в интернете.Внешние ссылки на трастовые сайты, только улучшит отношение к вашему сайту поисковых систем, не опасайтесь "потери веса страницы".
А главное преимущество внутренних ссылок в том, что они увеличивают количество просмотров страниц на каждого посетителя, попадающего на ваш сайт. Конечно, на каком-нибудь новом сайте может не быть достаточного количества контента, но если вы ведете свой сайт уже несколько лет, то там точно будет на что сослаться. Наконец, учитывайте, что каждая отдельная ссылка в статье привлекает не так уж и много переходов (в среднем 1-10%). Но все они считаются. Если добавить в статью 10 внутренних ссылок на другие страницы, то вы уже сможете увеличить количество просмотренных страниц каждым пользователем на 15%. А это большая разница. Представьте, что всего одним небольшим изменением можно повысить количество просмотров в месяц с 30 тысяч до 35?2. Некоторые посетители очень медлительны
В моих супердлинных статьях (от 7 тысяч знаков и больше) обычно много картинок. Я использую их по нескольким причинам, но в основном для того, чтобы разбить контент на фрагменты и сделать его более читабельным. Я могу так делать, потому что большинство посетителей моего блога используют настольные ПК или ноутбуки. Ну да, представьте себе человека, который читает 10000 знаков на экране смартфона? Те, кто использует ПК, могут без труда загружать сотни килобайтов контента всего за пару секунд. Нельзя сказать то же самое про мобильных пользователей. Опросы показывают, что скорость мобильного интернет в пределах до 1 мбит/сек. Очевидно, некоторые пользователи смогут быстро просмотреть огромную статью, но большинство вряд ли.Говорят, что половина людей не готовы ждать загрузки страницы более 2 секунд. Но речь здесь идет о пользователях ПК.Мобильные пользователи ждут до 4-5 секунд, так что у нас еще есть шанс. Однако в среднем сайт загружается на смартфоне до 8 секунд, что не очень-то и радует. Проблема с тестированием скорости загрузки страниц Многие вебмастеры уже проверили скорость загрузки своих сайтов, и не обнаружили каких-либо проблем. К сожалению, в этом вопросе допустима серьезная погрешность. По умолчанию практически все известные сервисы используют неограниченное по скорости соединение. То есть, результат получают при помощи математических уравнений. Потом вы как бы думаете, что вас эта проблема не коснулась ;) Сегодня я не буду разводить полемику на тему того, как оптимизировать скорость загрузки страниц, но отмечу самые эффективные способы оптимизации вашего сайта под мобильных пользователей:
Фактор 1 – HTTP-запросы
Одна из наиболее важных метрик, о которой вам сообщит любой тестер скорости загрузки. Количество HTTP-запросов существенно влияет на работу сайта. HTTP-запрос делается для получения информации для каждого скрипта, изображения, CSS-файла и всего, что используется в HTML-документе. На обработку каждого запроса требуется время. Вы можете ускорить работу сайта, сократив количество HTTP-запросов, которые нужно сделать браузеру. Как это сделать? Самый простой способ –сократить объемы изображений и CSS-файлов насколько это будет возможно. Плохо оптимизированные темы для WordPress нередко включают в себя сразу несколько css-файлов на одной странице. Попробуйте соединить все эти файлы в один, а также минимизируйте их размер, исключив весь мусор. Многие владельцы сайтов сокращают количество запросов за счет использования CSS-спрайтов вместо небольших изображений. Спрайты – это файл изображений, состоящий из нескольких небольших элементов. CSS-код сообщает браузеру, какой именно фрагмент изображения нужно отобразить. Спрайты желательно использовать для всех изображений, которые встречаются на всех страницах сайта – например, табуляция в меню навигации или логотип компании. Например у меня, спрайты используют в блоке подписки, который вы видите справа, где идут иконки социальных сетей Чтобы облегчить себе задачу, можно воспользоваться инструментом Spritepad. Просто перетащите в него все изображения. CSS-файл с указанием расположения определенных фрагментов будет создан автоматически.
После того как добавите все нужные изображения, можно скачать CSS-спрайт (ссылка сверху), а затем обращаться со страниц к нему, а не загружать сразу несколько картинок.
И это уже целых два способа избавиться от нескольких лишних HTTP-запросов, от которых до сих пор страдают многочисленные сайты. Но это ведь далеко не все варианты, и поэтому рекомендую вам ознакомиться с этим руководством.
Фактор 2 – Вес страницы
Еще один важный метрик, который определяется инструментами – это вес страницы в байтах. В идеале страница не должна весить больше нескольких сотен килобайт (однако, иногда превышение этого лимита просто неизбежно). Если вы столкнулись с проблемой тяжелых страниц, то можно попробовать сократить количество используемых картинок, но перед этим можно сделать кое-что еще. Во-первых, сожмите изображения. Во многих картинках используется множество ненужных мета-данных. Воспользуйтесь инструментами вроде Optimizilla или WordPress-плагина WP Smush, которые позволят вам уменьшить вес файлов изображений. Во-вторых, используйте HTTP-компрессию для сжатия размера файлов. Самая популярная разновидность HTTP-компрессии – это GZIP. Чтобы включить GZIP-сжатие в WordPress, нужно поставить отметку рядом с опцией GZIP в плагине W3 Total Cache.
Наконец, постарайтесь сделать ваш сайт максимально простым. Не используйте лишние боковые панели или картинки в заголовочной части страницы.
Фактор 3 – Хостинг
Даже если вы решили все технические проблемы на своем сайте, пользователи все равно могут испытывать сложности с загрузкой страниц из-за плохого хостинга или обслуживания. С хостингом все понятно. Если вы хотите платить 200Р в месяц, и ваш сайт размещается на одном сервере со множеством других сайтов, то он никогда не будет быстро работать. Конечно же, это допустимо, если вы только начали вести собственный сайт, но по мере развития серьезно задумайтесь о том, чтобы перейти на выделенный сервер. В этом плане могу порекомендовать MCP у них выделенные VPS-сервера стоят почти как обычный хостинг, свои наиболее посещаемые сайты я держу там.На заметку: Была история, когда жители одного дома были очень недовольны скоростью лифтов, а домовладельцы вместо того, чтобы заменить лифты, предложили жильцам то, чем они могут себя занять в лифте. Так, в лифтах появились зеркала, в которые жители и гости дома могли рассматривать себя. На этом жалобы прекратились ;)
Может быть, это не очень подходящая аналогия, но ожидание загрузки страницы также может наскучить. Вам следует сделать так, чтобы посетители сразу видели заголовок статьи и самые важные элементы, не дожидаясь загрузки всей страницы полностью.3. Не отвлекайте посетителей без надобности
Вы должны четко и заметно обозначить свой посыл, будь то одностраничник или запись в блоге. Именно для этого ваши посетители пришли сюда. Это правило подпадает сразу под несколько категорий UX, но главным образом – в категорию доступности. Если контент будет доступным, читатели продолжат его потреблять. Если же он будет сложным, многие сразу же закроют страницу, и вряд ли просмотрит другие страницами вашего сайта. И хотя сайты могут отличаться дизайном, существует 3 основных компонента, которые могут отвлечь внимание посетителей. Позвольте рассказать вам, как от них избавиться.1) уменьшите или исключите боковую панель
Зачастую многие владельцы блогов не придают боковой панели нужное значение. Нужно серьезно подумать о том, что будет представлено в сайдбаре, или нужно ли вообще оставлять боковую панель на той или иной странице. На данный момент Medium является одной из самых популярных платформ для ведения блога на западе, и в ней, например, вообще отсутствует боковая панель:
Это позволяет полностью сосредоточить внимание на контенте. Кстати, недавно я как раз поднимал тему того нужен ли сайдбар на блоге, в комментариях голоса были в пользу наличия боковой панели.
Если вы оставляйте боковую панель, постарайтесь включить в нее:
- форма подписки на рассылку
- биография
- ссылки на самые популярные записи
- ссылки на продукты и/или сервисы
2) попробуйте зафиксировать некоторые элементы
Это достаточно сложная задача, но если зафиксировать несколько важных элементов на странице, и сделать так, чтобы они оставались на виду даже при прокрутке страницы, это может положительно сказаться на просмотрах. Но если переборщить, это, безусловно, даст обратный эффект. Рекомендую вам тестировать каждый элемент, который вы добавляете на страницу. Сравнивайте показатели до и после. У меня есть несколько таких элементов, на Great-World боковой сайдбар прокручивается вместе со страницей:
Обратите внимание, что в обоих случаях элементы не особо отвлекают внимание посетителей.
Но если начать фиксировать и шапку сайта, и подвал, и добавлять при этом различные формы подписки и кнопки репоста в соцсети, то можно быстро отпугнуть всех посетителей.
3) избавьтесь от всплывающих окон или устанавливайте их с небольшой задержкой
Еще один щепетильный момент – всплывающие окна. Безусловно, это отличный способ привлечь внимание в вашей email-рассылке, но и очень эффективный способ отвлечь посетителей от основного контента, уменьшить количество и время просмотров. Если вы планируете использовать всплывающие элементы, постарайтесь ограничить пагубное влияние, которое они могут оказать на ваш опыт взаимодействия. Используйте небольшие (10-60 секунд) задержки, чтобы пользователь успел прочитать хотя бы часть контента, и уже потом наткнулся на всплывающие окно. Чем больше времени проходит до появления всплывающего окна, тем менее оно раздражает пользователей. Если читатель уже полминуты читает вашу статью, то ему не составит большого труда отключить всплывающее окно.4. Универсальность важнее креативности
Чтобы внушать доверие, бренд должен быть понятным. Чтобы быть удобным, ваш шаблон и контент также должны соответствовать друг другу. Когда пользователь несколько раз возвращается на ваш сайт, он должен знать, чего от вас ожидать. Если посетителям интересны ваши публикации в блоге, дайте им возможность без труда находить их. Если они желают написать вам, то же самое: предоставьте доступную форму контакта. Вот 2 основных фактора, которые следует учитывать, чтобы добиться хорошего пользовательского опыта и соответственно увеличить просмотры.Фактор 1 – Брендинг и символика
Когда я говорю о символике, я имею в виду нечто вроде всем известного значка меню от Google:
Этот символ используется для меню во всех продуктах Гугла включая Chrome и практически во всех Android-приложениях. Когда пользователь ищет настройки, он первым делом пытается отыскать глазами этот “гамбургер”.
Каким бы ни был ваш продукт, следует придерживаться одинакового набора символов и терминов по всем каналам взаимодействия: блог, посадочные страницы, email-рассылка, а также сам продукт и его оформление. Все записи блога и весь контент должны быть оформлены согласованно.
Наконец, интерфейс ваших продуктов будет более понятен читателю, а продуманная навигация заставит просмотреть больше разделов.
Иконки могут быть отдельными либо встроенными в картинки/ссылки. К примеру, если в блоге используется ссылка “читать далее…”, можно взять знакомую стрелку справа сразу же после ссылки.
Фактор 2 – Стилизация
Стилизация включает в себя цветовую схему, но это нечто большее, чем просто цвет страниц. Также следует хорошенько подумать о типе и размере шрифтов, о разметке, слоге и так далее. Если искать примеры, то мне тут же приходит на ум Wildo. Он использует единый стиль для публикаций в блоге и для электронных писем:
Согласованное оформление помогает читателям понимать, чего ожидать, а это положительно сказывается на опыте взаимодействия, независимо от платформы, которую вы используете.
Что случится, если в некоторых письмах я буду размещать только верхнюю ссылку, а в других только нижнюю? Читатель не будет знать, чего ждать. Конечно же, большинство все равно тут же найдут нужную ссылку, но некоторые привыкли сразу перелистывать страницу в самый низ, и нажимать по ссылке там.
5. Важные элементы должны быть БОЛЬШИМИ
И сейчас я говорю не только о формах подписки. Когда я говорю «БОЛЬШИМИ», я имею в виду видимость. Чтобы ваш контент был максимально применимым и полезным, читатели должны иметь возможность определить его самые важные фрагменты. Вот что я имею в виду: взгляните на любой сайт с хорошим UX, и на каждом из них вы заметите важнейшую точку внимания:
В данном примере речь идет о форме подписки на email-рассылку.
Вот еще один пример:
LPgenerator хорошенько постарались сделать кнопку регистрации заметной.
В обоих представленных примерах используется эффект контраста. Если вам нужно выделить что-нибудь на странице, используйте контрастирующий цвет.
Но стоит отметить, что иногда внимание нужно привлечь не только к формам подписки.
Обратите внимание на ссылки. Они тоже должны быть видны, выделяться в тексте. Некоторые сайты используют серые цвета для ссылок или забывают подчеркивать их, опасаясь того, что читатель перейдет по ссылке и не вернется на сайт.
К примеру, на partneroff.pro ссылки выделены ярким оранжевым цветом. Вдобавок я использую подчеркивание. Даже на мобильных устройствах их будет легко распознать:
Если учесть, что многие из этих ссылок ведут на другие страницы на моем же сайте, то даже хорошо, если люди интересуются ими и переходят по ним. Зачем же их скрывать?
К элементам также можно привлечь внимание, выделив их на фоне всего остального. Это можно сделать, отделив их от других элементов (добавить больше пространства), используя уникальный шрифт или применив полужирную или курсивную стилизацию.
Например, можно использовать специальные блоки:
Возможность быстро определить важные фрагменты контента страницы – это также ключ к хорошему юзабилити и долгим просмотрам.
В завершение
Вы уже достаточно много времени выделили на привлечение трафика, и теперь пришло время подумать об увеличении просмотров. Однако учтите, что нельзя добиться успешной оптимизации UX за одну ночь. Это продолжительный процесс, который требует множества тестов.
0 комментариев
Добавить комментарий
