Декабрь 24, 2015

Как сделать сайт, за который не будет мучительно больно?

Работать, работать и еще раз работать!

Все очень плохо...

Итак, Вы поняли, что Вам просто необходимо сделать сайт. С чего же начать? Можно сразу обратиться к профессионалам. А можно попробовать создать сайт, используя конструктор сайтов. Хороший ли это вариант? Сегодня будем разбираться в этом в нашей традиционной рубрике «Анализируем Landing Page». И поможет нам в этом сайт http://destaff.ru/!

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

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

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

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

Никаких виджетов, увеличивающих конверсию, на сайте не установлено. Это, безусловно, минус. Впрочем, нет — значит, нет. И говорить не о чем. Так что переходим к разбору первого экрана.

Первый экран

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

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

За себя могу ответить точно: «Нет!» Скажу даже больше. Когда я в начале этой статьи описывал тематику разбираемого сайта, мне пришлось изрядно постараться, чтобы эту тематику определить. Какие уж тут первые 6 секунд…

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

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

Впрочем, хватит про общее впечатление. Давайте переходить к конкретике!

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

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

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

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

«Напишите нам». Щелкаем… И видим вот такое довольно страшненькое всплывающее окно…

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

К счастью, хотя бы поля для ввода телефона необязательно для заполнения… Лично я посоветовал бы вообще убрать все, кроме полей «E-mail» и «Сообщение». Да и в поле для ввода адреса — уточнить, что ответ придет именно на него. Это объяснит посетителям, зачем им нужно оставлять какие-то координаты.

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

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

Переходим к пункту «Обратный звонок». Некоторый диссонанс наблюдается в названиях пунктов, не находите? Если «Напишите нам» — это призыв и с ним все отлично, то что такое «Обратный звонок»?

Безусловно, я, как человек, по своему роду занятий много времени проводящий в сети, прекрасно понимаю, что именно означает этот пункт. Но поймет ли его назначение человек, не слишком знакомый с сайтами и их особенностями?

А ведь сайт, судя по наличию на нем курса «Иностранный язык для тех кому за 50» (запятая в названии курса пропущена не мною, а его авторами), предназначен, в том числе, и для таких людей…

В общем, если уж один пункт назван «Напишите нам», то и второй логично назвать, к примеру, «Закажите звонок». Будьте последовательны! Впрочем, давайте уже нажмем на пресловутый «Обратный звонок». И вновь перед нами столь же ужасное, как и прежде, окно!

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

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

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

Как видите, не прошло… И это, как Вы понимаете, очень и очень печально. Особенно если учесть, что подсказки при вводе телефона отсутствуют. И, соответственно, заявка отправится, даже если номер телефона введен некорректно, отсутствует код или просто не проставлена одна из цифр (или, напротив, по ошибке проставлена лишняя).

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

Итак, «заявка» отправлена. Что мы видим дальше?

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

В целом, оно мне понравилось. Оригинально выглядит «бикфордов шнур», после «сгорания» которого окошко исчезает. Вот только текст… Текст все портит.

Давайте выстроим логическую цепочку. Человек нажимает на кнопку «Обратный звонок». Что он хочет сделать? Правильно — заказать обратный звонок. Человек заполняет форму. Зачем? Чтобы получить обратный звонок.

Значит, о чем ему нужно сообщить после отправки формы? Правильно! Вовсе не о том, что форма отправлена. А о том, что он получит свой заветный обратный звонок! То есть текст должен быть, к примеру, вот таким: «Форма отправлена. Мы перезвоним Вам в течение 2 минут». И только тогда полученная им информация совпадет с его ожиданиями!

Ладно, хватит про формы. Переходим к центральному тексту первого экрана.

По идее, центральный текст первого экрана должен продавать. Он должен увлечь посетителя, заставить его продолжить изучение сайта… Здесь же перед нами набор фраз, смысл которых от меня, если честно, ускользает.

Давайте разберем их по порядку. «Знания=Бесконечность» (текст сделан кликабельным, курсор мышки при наведении на него изменяет вид; но при этом клик никуда не ведет). Что должен сказать этот текст? Какое значение вложили в него авторы? Что знаний бесконечно много? Что знания ведут к бесконечности? Я не знаю… И не понимаю, зачем вообще нужна эта фраза.

Кстати, обратите внимание, две следующие фразы обращаются к посетителю на «Ты». Это вообще беда сайта — обращения на «Ты» и на «Вы» постоянно чередуются, нет единого стиля. Это плохо и это нужно исправлять. Тем более что сайт направлен, в том числе, и на аудиторию 50+, и обращаться к ней на «Ты» уж точно не совсем корректно.

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

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

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

Итак, сам призыв вполне оправдан. Но, представим, что меня этот призыв убедил. Осталось понять, что имеется в виду под «успешным мной». И как именно «успешного себя» я должен создавать вместе с DEstaff? А вот на это ответов уже нет, так как дальше нас ждет меню. Меню — и все…

Но, возможно, именно меню даст нам ответы на все вопросы? Давайте же на него посмотрим!

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

Быть может, раз уж меню все равно оформлено в 2 строки (что смотрится не очень хорошо), стоило как-то разделить их по смыслу? Например, на первую строчку вынести пункты, касающиеся обучения («Иностранные языки», «Школа Лидера» и т.д.)? А во вторую поставить те, что касаются непосредственно компании…

Но это, конечно, только вариант. Я бы вообще переделал пункты меню, сменив и названия, и содержание.

И, конечно, пункт «Расписание_скачать». Я даже и не знаю, что про него написать — у меня просто пропадает дар речи. Как можно было так обозвать пункт меню на сайте? Что это за правила русского языка такие? Что помешало просто написать «Скачать расписание»? Нет слов…

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

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

А вот как должна отразить идею сайта самая первая, заглавная картинка? Она, кстати, на иллюстрации чуть ниже.

Если честно, у меня ответа на этот вопрос нет… Безусловно, на ней присутствуют и логотип, и название Центра. Но скажите честно, Вы заметили их с первого взгляда? Лично я не заметил даже со второго.

В общем, в слайдере есть как удачные фотографии (пример — на общем виде первого экрана), так и безусловно слабые, которые необходимо заменить.

Желание поздравить посетителей с праздником понятно… Но ведь и его можно как-то увязать со спецификой Центра. Да и ставить поздравление на первый же слайд, особенно в таком вот виде, уж точно не самое лучшее решение.

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

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

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

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

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

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

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

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

Подробнее об этом — в статье «Из свойств в выгоды»

Переходим к следующему блоку.

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

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

Подробнее об этом — в статье «Как конкретика в текстах помогает продажам»

Дальше следует блок с новостями. Я специально размещаю картинку с ним целиком, чтобы у Вас была возможность оценить, как он смотрится со стороны.

Скажите, зачем нужно такое огромное свободной пространство? Какой в нем смысл? А ведь смотрится оно просто ужасно… Это и есть тот самый «воздух», о котором я говорил в самом начале. И именно его обязательно нужно ликвидировать.

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

Вопрос к сайтовладельцам: признайтесь честно, Вы сами видели, как Ваши новости выглядят на страницах сайта? И, если видели, то неужели Вам за них не стыдно?

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

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

Ну и, как всегда, беда с форматированием… Даже говорить об этом уже, если честно, не хочется.

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

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

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

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

Например, вот так: «Успейте записаться на любое занятие…» и внизу, соответственно, кнопка «Успеть». А сейчас же есть ощущение, что акция сделана просто для галочки. Была возможность прикрутить счетчик — вот и прикрутили. А зачем и для чего — придумывать особо не стали.

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

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

Впрочем, это скорее мелкие придирки, исправить которые будет не очень сложно.

Блок «Контакты» я тоже размещу сразу и целиком.

Как видите, в нем тоже избыток «воздуха». Но, с другой стороны, есть все необходимые контакты. Разве что индекс можно было бы дополнительно указать, раз уже адрес написан практически почтовый.

И не очень понятно, почему под последним телефоном нет подписи. Не очень гармонирует с двумя остальными. Но, в целом, это блок хороший.

Кстати, обратили внимание на кнопочку с лупой в правом верхнем углу блока? Я обратил. Давайте попробуем на нее нажать!

И что мы видим? Фрагмент все той же карты, что и раньше. Возникает логичный вопрос: а зачем? И ответа у меня на этот вопрос, к сожалению, тоже нет…

Впрочем, двигаемся дальше.

Вот такой вот написанный Caps Lock’ом и с ошибками призыв… Вернее, не призыв, а вопрос… Хотя и вопросительного знака нет… И ответа нет… И вообще непонятно, как именно выучить иностранный язык… Зато просят зачем-то на что-то подписаться. И предлагают получить какой-то подарок.

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

А то сейчас понять, что предлагается именно подписка, можно только по тексту на кнопке. Но ведь это совсем не дело. Человек должен четко понимать, зачем он оставляет информацию о себе и что он за это получит.

Давайте заодно посмотрим, как именно работает эта форма.

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

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

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

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

Подробнее об этом — в статье «E-mail рассылка: первые шаги»

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

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

Впрочем, давайте попробуем перейти, например, во «ВКонтакте».

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

Ладно, хватит о грустном. Тем более что на некоторые соц. сети ссылки все же настроены корректно. Смотрим дальше.

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

Больше, собственно, и говорить-то тут не о чем…

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

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

В общем, большие вопросы у меня вызывает наличие именно этого блока именно в этом месте. Хотя, конечно, ответить на вопрос о том, правильно ли он размещен, может только практика. Если на него кликают, если через него покупают — значит, я не прав и все вопросы снимаются.

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

Если в первом обещают перезвонить через 5 минут, то во втором — связаться немедленно. В первом обращаются на «Ты», во втором — на «Вы».

И, во-вторых, к какому из призывов относится кнопка? Первый призывает заказать звонок, второй — оставить заявку. Почему же на кнопке — текст «Перезвоните»?

В общем, опять разброд и шатание… И это очень и очень печально.

Ну и, конечно, три поля в форме — это не дело. Хорошо еще, что e-mail вводить не обязательно. Впрочем, остальные «болезни» прежних форм остались в силе… Лечить, лечить и еще раз лечить!

И, наконец, подвал.

Опять здесь каша… Описание компании объединено с реквизитами. Нет контактов для связи — ни телефона, ни e-mail’а. Нет кнопок социальных сетей (впрочем, о том, что их желательно разместить еще и тут, я уже писал выше).

В общем, тут все тоже не совсем хорошо…

Можно ли на конструкторе сделать сайт, который будет продавать?

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

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

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

Подробнее об этом — в статье «Разработка ТЗ: зачем это нужно?»

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

Если у Вас остались какие-либо вопросы — задавайте их в комментариях, и мы с удовольствием ответим на них! Поделитесь ссылкой на эту статью в социальных сетях: уверены, Ваши друзья и коллеги обязательно найдут в ней что-то полезное для себя!

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

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