Ошибки в дизайне. Разбор сайта на Тильда по путешествиям

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

Хочу отметить, на странице короткие тексты, которые читаются на одном дыхании. При этом, они раскрывают для клиентов все, что нужно.

Первый и самый большой заголовок «Экскурсии для гостей Белокурихи» нам рассказывает о том, что это экскурсии в Белокурихе. Также мы видим надпись «экскурсионное бюро», она дает нам большой контекст этого сайта, и кто всем этим занимается.

Под заголовком выгода для клиента: он «откроет для себя новые впечатления и зарядится энергией». Все эти слова подтверждаются фотографиями с красивыми видами.

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

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

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

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

Очень хорошо, что не выведены все экскурсии, а сам блок занимает не так много места.

Хорошее решение с кнопкой «показать еще фото». То есть этот блок также занимает мало места. Здесь мы можем ознакомиться с тремя фотографии, а если нам станет интересно, то с кнопкой «показать еще фото» нам откроются дополнительные три фотографии. При желании, можно нажать кнопку «Посмотреть весь альбом».

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

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

Совет. Можно сделать механику, как в блоке «альбом» (кнопка «показать еще статьи», а только потом перекидывать).

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

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

Совет - 1. Их можно перенести в блок выше. Клиент выбирает услуги и сразу читает про их надежность.

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

Совет – 2. Можно здесь сделать блок «О компании», в котором рассказать как вы любите этот край, как создаете приключения, сколько вы уже работаете, количество проведенных экскурсий за все время работы. Вся эта информация добавит для вас экспертности.

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

Написано время работы, можно перейти к мессенджерам - здесь вопросов нет.
Совет – 3. Можно добавить адрес физического офиса, если он есть.

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

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

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

Второе – заголовок. В «Экскурсиях» заголовок зеленого цвета. Далее эта концепция не просматривается на сайте. Главное здесь – соблюдать однообразие, поэтому их лучше выделить черным, как заголовки всего сайта.

Третье – кнопки. Они слабо выделяются.

Совет - 1. Чтобы это исправить, кнопку лучше залить зеленым цветом, а текст – белым. Желательно сделать заметным наведение на кнопку. То есть, при наведении на нее курсора, она становится белой, а текст – зеленым.

Кнопка «Все экскурсии в Белокурихе» смотрится странно из -за ее размера: не по всей ширине, но и немаленькая.

Совет – 2. Здесь лучше сделать кнопку на весь блок, чтобы она закрывала клиента мощным призывом к действию.

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

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

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

Шестое – путеводитель. Здесь у нас стандартные потоки: ширина контейнера текста отличная, текст читаемый. Статьи такие же, к ним вопросов нет.

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

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

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

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

Здесь тоже лучше поменять стандартный тильдовский цвет ссылки.

Восьмое – контакты и реквизиты. Все оформлено в текстовом виде.
Совет – 1. Если вы принимаете клиентов на каком-то адресе, то можно добавить карту, виджет с важной информацией. У Тильды есть стандартные блоки с картой, где можно разместить почту, соцсети и телефон с иконками. Это стоит выделить. А реквизиты – не такая важная информация.

Совет – 2. Здесь лучше сделать поп-ап, при нажатии на который, открывалась бы дополнительная информация (реквизиты) для заинтересованных клиентов. Такое решение позволит не занимать большое место на странице.

Мы прошлись по всем страницам сайта. Я рассказал о тех моментах, которые увидел. Хороший текст, красивые фото, сайт наполнен. Но можно подправить некоторые моменты, чтобы сделать из него конфетку.

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

А теперь покажу вам свой редизайн сайта. Мы перешли в фигму. Расскажу, что я сделал и почему.

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

Я переработал текст. Название, которое раньше было заголовком, я перенес в шапку. Оно всегда будет на виду. А, в плане конверсии, мы сможем сделать акцент на более важных вещах.

Заголовком я выделил текст про функциональную и стильную одежду. А в “преимущество” вынес бесплатную доставку. Поработал с акцентами на кнопках, по той технологии. которую советовал выше.

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

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

Получилось так: слева - описание консультации и преимущества товара, а справа - форма для заполнения, которую я тоже переработал. Здесь имя и почта в одной строчке, ниже - номер телефона, еще ниже - дата рождения. Тут же показал, как должно выглядеть согласие на обработку данных.

Стандартный цвет тильдовских ссылок заменил на фирменный цвет компании.

Четвертый блок
Здесь я решил сильно ничего не менять. Просто добавил кнопку “Купить”.

Пятый блок
В оригинале, после ЛУКБУКа шел блок с заказом, но я решил перенести его вниз, потому что это более системна информация. В моей версии, Пятый блок - Добро пожаловать!

Здесь я вынес текст с историей создания магазина. Внизу можно поставить Инициалы. Это вызовет доверие к вашему магазину у аудитории.

А так, сильно я ничего не менял. Немного поработал над текстом, добавил выделение италиком.

Шестой блок
Здесь я решил разгруппировать информацию. В оригинале она шла полотном. А у себя я разбил ее на смысловые блоки: заказ, доставка, внимание (выделил цветом, чтобы сделать акцент)

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

Всем пока! До новых видео!