Апрель 5, 2016

Что выбрать — лендинг, сайт или?…

Стильный товар...

для не стильного сайта

В последнее время к нам на разбор практически каждый день поступает новый лендинг, сайт, а то и что-нибудь еще. В итоге даже образовалась небольшая очередь… Но я очень стараюсь поскорее их все разобрать. Так что в ближайшее время наша рубрика «Анализируем Landing Page» будет частенько приветствовать Вас в нашем блоге!

Итак, сегодня мы будем разбирать сайт, посвященный необычному продукту. Вернее, даже целому комплекту необычных продуктов — различным средствам для роста бороды. Познакомиться с ним Вы можете по адресу http://borodach812.com/. Познакомились? Тогда давайте переходить к разбору!

Общее впечатление

Оформление сайта мне не очень понравилось. На мой взгляд, шрифт слишком крупный, а междустрочные интервалы, напротив, слишком маленькие. В итоге тексты «слипаются», читать их тяжело…

Иллюстрации крупные, «читаются» легко… А вот с тестированием сайта в различных браузерах есть проблемы. Причем проблемы, скажем так, «плавающие». В моем Firefox’е в карточках товаров иногда изображения бывают нормального размера, а иногда — разом на весь экран (как, например, на иллюстрации ниже).

От чего это зависит — я так и не понял. После нескольких обновлений страницы изображение может прийти в норму… А может и не прийти. В Google Chrome таких неприятностей я не заметил. Хотя, возможно, я просто плохо искал…

На сайте установлен онлайн-консультант от jivosite. Правда, вести диалог он предлагает не напрямую, а с использование электронной почты. На мой взгляд, это не самый лучший вариант.

Есть еще виджет от «ВКонтакте», а также рейтинги сайтов от Rambler’а и Mail’а. Да, еще есть Яндекс.Метрика с открытым доступом, но корректно показывать данные она у меня отказалась. Причем независимо от использованного мною браузера… Довольно оригинальный набор, признаться честно. Давно такого не встречал, и смысл его мне не особо понятен. Впрочем, хозяин — барин.

Первый экран

На мой взгляд, то, что я попал по адресу — на страницу, каким-то образом связанную с бородой, — понятно сразу же. Тут и бородатый логотип, и адрес крупным шрифтом, и текст заголовка (тоже крупным шрифтом)… В общем, элементов, позволяющих быстро идентифицировать свое местоположение, предостаточно. Взгляните сами!

Давайте теперь разберем отдельные элементы первого экрана по отдельности. И начнем мы, как и всегда, с шапки. Правда, на этом сайте довольно сложно отделить шапку от остального содержимого… Поэтому я решил включить в нее как можно больше элементов. Что получилось — смотрите на иллюстрации ниже.

Начнем с общих слов. Чего в шапке не хватает? В первую очередь — телефона для связи. Забегая вперед, скажу, что в подвале телефон есть. А вот почему его нет на первом экране — для меня загадка… Под него даже место свободное в правом верхнем углу осталось… А самого его нет. В общем, странная ситуация.

Почему телефон желательно разместить именно на первом экране? Потому, что это основной способ связи Ваших клиентов с Вами. И чем он будет заметнее — тем лучше для Вас. Кроме того, пользователи давно привыкли, что телефон находится в этом самом месте. И искать его они, в первую очередь, будут именно здесь, а вовсе не на странице с контактами. Так не усложняйте им поиски!

Второй недостающий элемент — это пояснение сферы деятельности, которой посвящен сайт (например, «интернет-магазин средств для роста бороды»). Если на главной странице это, благодаря заголовку, более-менее понятно и без пояснений, то что делать, если посетитель зашел на сайт, например, через страницу «Контакты»?

В общем, небольшое пояснение здесь нужно обязательно. Оно уж точно будет поважнее, чем адрес сайта крупным шрифтом, — то есть надпись, которая, по большому счету, никакой смысловой нагрузки не несет.

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

Я даже не буду ругать авторов сайта за слова, написанные заглавными буквами. Хотя те, кто внимательно следит за этой рубрикой, уверен, прекрасно знают, как я их «люблю». Но здесь их можно отнести к элементам дизайна. Правда, какой от них смысл, мне не очень понятно. Почему всего два слова и только в одном из пунктов? Где логика?

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

А вот то, что кнопка «Корзина» практически незаметна — это минус. Я бы рекомендовал как-то ее выделить — вынести на более видное место, добавить заметную иконку… Вариантов может быть много.

Кстати, есть проблема и с оформлением самой корзины. Сейчас пустая корзина выглядит вот так:

Как Вы думаете, может ли такая корзина продавать? Возможно, Вы скажете, что пустая корзина продавать вообще не может. Но, на самом деле, это не так. Добавьте в нее, например, блок «Самые популярные товары» — и Ваши продажи уже пусть ненамного, но вырастут.

В общем, и с кнопкой «Корзина», и с самой пустой корзиной нужно что-то делать. Сейчас ни то, ни другое не выглядят оптимальными.

Вот мы и дошли до центрального элемента первого экрана. Помните, я говорил про «слипшиеся» тексты? Перед Вами их яркий представитель. А еще перед нами «заголовок». Да-да, именно так — это не заголовок. Это «заголовок». Потому что продавать он не способен совершенно.

О том, что представляет из себя хороший заголовок, читайте в статье «Как правильно написать заголовок»

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

Вообще, и заголовок, и текст под ним больше всего напоминают неудачную попытку SEO-продвижения. Почему неудачную? Да просто потому, что в ТОП поисковиков таким образов Вы, возможно, и попадете. А вот покупателей распугаете. И что для Вас важнее?

Так что — полностью переписать. Без вариантов.

Последний элемент первого экрана наводит на мысли о проблеме с дизайном сайта. Почему? Посмотрите как он выглядит:

Посмотрели? Запомните его хорошенько. Вернемся к немы мы в следующем разделе анализа.

Содержание сайта

Итак, возвращаемся к блоку, который мы видели на первом экране. Как же он выглядит на самом деле?

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

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

Впрочем, хватит о первом экране! Ему и так целый раздел был посвящен (и даже больше). Давайте посмотрим на то, что еще можно увидеть на сайте. И, естественно, начнем с блока, который изображен выше.

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

Давайте попробуем приобрести какой-нибудь из товаров. При наведении на него курсора мыши возникает голубая подложка, которую вы можете видеть на иллюстрации ниже.

Кнопка «Подробнее» ведет на страницу товара, подробно (извините за каламбур) разбирать которую я в этом обзоре не буду. А вот кнопка «Добавить в корзину» — что не удивительно — добавляет товар в корзину.

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

Вот только хорошо, если это действительно первый товар в корзине. Тогда посетитель, если уж разберется с тем, где именно смотреть, добавлен товар в корзину или нет, то точно поймет, что что-то у него в корзине есть.

Но что делать, если это товар, например, пятый? Или, того хуже, седьмой? Постоянно держать в голове, сколько товаров было добавлено в корзину? Регулярно проверять — добавился ли новый товар в эту самую корзину? Записывать все нужные товары на бумажку, чтобы потом свериться с ней и понять — все ли в этого в корзине оказалось?

Согласитесь, ни один из этих вариантов удобным не назовешь. А ведь решить эту — согласитесь, не такую и большую! — проблему могла бы банальная анимация, демонстрирующая процесс добавления выбранного продукта в корзину. Так что рекомендую ее добавить!

Пустую корзину мы уже видели. Давайте теперь посмотрим, как будет она выглядеть с товарами внутри.

Для начала отмечу, что корзина ведет себя как-то нестабильно. Например, не всегда в ней появляется первый добавленный товар. То есть товар добавлен — у кнопки корзины единичка появилась… А потом заходишь в корзину, а там пусто. Вот это сюрприз — так сюрприз… Нужно с этой проблемой разобраться.

По тому элементу корзины, который вы видите на иллюстрации выше, вопросов никаких нет — есть возможность и добавить новые единицы продукта, и удалить, и удалить все и сразу… В общем, все необходимое есть.

А вот следующий элемент (смотрите картинку ниже) вопросы у меня вызывает.

Вернее сказать, не сам элемент — он-то как раз очень даже нужный — а то, что при покупке большинства продуктов он не появляется. Обязательно добавьте его ко всем продуктам! Допродажи — это очень важно!

Если нет идей, с чем сочетать различные продукты — переименуйте его, в конце концов, из «Вас также может заинтересовать…» в «Популярные товары». И разместите там все, что душе угодно! Но только пусть этот блок, в обязательном порядке, присутствует в корзине при любом сочетании находящихся в ней продуктов!

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

Тут вопросов никаких нет — все на месте, все по делу. Возможно, есть смысл как-то поработать над выбором способа доставки. Сейчас, например, курьерская доставка что по Петербургу, что по РФ, выглядит абсолютно одинаково. А это может привести к ошибкам при оформлении заказа.

А вот так, как на иллюстрации выше, выглядит следующий этап оформления заказа в Firifox’е. Страшновато, правда? Вот и мне так показалось — и я даже полез проверять, как это же меню смотрится в Google Chrome. Оказалось, что вполне нормально — можете убедиться в этом, посмотрев на следующую иллюстрацию.

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

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

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

Интересно было бы узнать статистику — как много посетителей оставляет свои попытки оформить заказ на этом этапе?

Кстати, чуть ниже есть еще один блок, содержащий описание заказа. Вот он, на иллюстрации:

Обратите внимание, что тут пункт «Доставка» показывается полностью. В результате никакой путаницы с вариантами быть не может. Мне понравилось, как оформлен выбор способа оплаты с автоматическими скрываемыми подсказками. Вот только название банка («Сбербанк») пишется с заглавной буквы в любом случае.

Впрочем, давайте вернемся на главную страницу и посмотрим на оставшиеся ее элементы.

Следом нас ждет вот такая небольшая менюшка. Особых вопросов к ней нет, даже написанный заглавными буквами текст меня в данном случае не напряг. Можно, конечно, подумать о тексте на кнопках… Например, я ведь уже в интернет-магазине — так зачем мне в него переходить? Или зачем мне узнавать подробнее обо всех товарах сразу? Но тут все должна решить практика. Если кликают — значит, работает.

А вот этот блок мне совершенно не понравился. Много текста, мало свободного места. Ошибки, различное оформление, абсолютно не отражающие содержание пунктов иллюстрации…

В общем, о недостатках этого блока нужно либо писать еще один материал такого же размера, как получается нынешний… Либо не писать вовсе. И я выберу второй вариант. Тут проще все сделать с ноля, чем переделывать.

И последний оставшийся блок — это подвал. На мой взгляд, он тоже излишне перегружен текстом. А сам текст при этом усердно сливается в общую массу.

Из плюсов — большое количество различных способов связи и виджет «ВКонтакте». Из минусов — пожалуй, все остальное. В общем, тут тоже сделать все заново проще, чем переделать.

Кстати, на дворе уже 4-й месяц как 2016 год, а в подвале все еще 2014 прописан. Непорядок.

Лендинг, сайт… Главное — продажи!

Да-да, главное — продажи! Скажите, Ваш сайт продает? Если и продает, то, мне кажется, не слишком хорошо. Уж очень много недостатков нашлось даже без глубокого и тщательного изучения.

Причем начать переделку я бы рекомендовал с работы над дизайном. То, что я увидел сейчас, стильным сайтом назвать никак не поворачивается. А ведь продавать он должен именно товары для стиля. Но разве способен он вызвать доверие своими сливающимися текстами и корявой версткой?

Кстати, верстка — это замечание номер два. Если будете сайт переделывать, а не создавать с нуля, то обязательно протестируйте его в разных браузерах и системах. То, что сейчас с ним творится в Firefox’е — не лезет ни в какие ворота.

В этом разборе я практически не говорил про продающие тексты. Просто потому, что таких текстов на сайте практически и нет. И вот это третий недостаток, который нужно исправлять. Продавать без продающих текстов невозможно, а тут их попросту нет…

В общем, переработка сайту нужна очень и очень глобальная.

Остались вопросы? Задавайте их в комментариях, и я на них обязательно отвечу.

Если Вам понравился мой разбор — делитесь ссылкой на него с друзьями и коллегами. Для меня это будет лучшей наградой!

И, конечно, присылайте ссылки на свои лэндинги и сайты — мы обязательно проверим их на способность продавать.

Федор Бондаренко,руководитель отдела маркетинга и копирайтинга