Как сделать сайт максимально удобным для посетителя

Приветствую!

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

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

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

Итак, поехали.

Про шрифты я как раз упоминал в прошлой статье. В чем суть:

1 – Один-два шрифта на сайт. И их разные вариации (жирнее/тоньше). Я в большинстве случаев использую один. Допускаю два (например, второй чисто для заголовков или для кнопок). Так проще усваивается информация.

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

3 – Адекватное сочетание фона и цвета. Белые буквы на ярком розовом фоне – не катит. Если фон или кнопки темные – то буквы светлые. Фон или кнопки светлые – буквы темные. Впрочем, этот пункт продолжение предыдущего: тексты должны быть легкочитаемы. И если у вас сверхтонкий шрифт на белом фоне, – то, пожалуйста, не делайте его серым, сделайте черным (очень часто с этим сталкиваюсь, – аж глаза болят).

По шрифтам – все.

И про это упоминал в предыдущей статье.

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

1 – Линии между блоками.

2 – Цветовой контраст (блок «О компании» одного цвета, а «Примеры работ» – другого).

3 – Сочетание простого фона одного блока и фоновой картинки у следующего блока.

4 – Просто пустое пространство между концом предыдущего блока и заголовком следующего блока.

5 – Или любые другие варианты, которые будут четко обозначать конец предыдущего блока и начало следующего.

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

Разумеется, там мы располагаем кнопки, ведущие на основные и важные разделы/блоки/страницы сайта. Например, на каталог услуг, на блок о компании, блок с контактами и т.д. Также я считаю обязательным содержать в Меню:

1 – Телефон (чтобы можно было сразу, в любой момент звонить, у кого есть такая потребность).

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

3 – Логотип (сразу даем понять, что вы солидная контора, а не сосед по гаражу). Можно настроить, чтобы при нажатии на логотип перематывало на самый верх страницы.

4 – Кнопка заказа звонка или кнопка с иной всплывающей формой отправки заявки. Исключение: если у вас уже есть какой-то виджет заказа звонка, который, например, всегда висит в углу экрана, – то кнопку в Меню делать не нужно.

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

А как же оно будет выглядеть в закрытом виде?

Многие предпочитают делать «аккордеон-меню» (кружок или квадратик в верхнем углу с тремя полосками) или вообще обходиться без закрепленного Меню (крайне не рекомендую).

Я в большинстве случаев делаю в виде закрепленной полосы. Где в правой части будет кнопка раскрытия Меню. А в левой – на выбор:

1 – Телефон. Отлично подходит для регионального бизнеса (в каком-то конкретном городе), где люди нередко звонят вместо отправки заявки. Особенно хорошо подойдёт для сферы срочных услуг (вскрытие замков без взлома, вызов эвакуатора, срочный ремонт чего-либо и т.д.).

2 – Какая-нибудь важная кнопка с вызовом важной лид-формы. Например, кнопка «Бронировать» на сайте отеля.

3 – Ну либо просто логотип, проматывающий к началу страницы, если другие варианты вам не подходят.

4 – А при желании можно что-то из этого совместить.

Альтернативное мобильное Меню

Также Меню можно сделать и закрепить внизу. В стиле мобильного приложения. И разместить на нем кнопки для 3х-5ти самых важных разделов сайта. Следите, чтобы оно не перекрывалось кнопками вызова чата или мессенджеров.

Сам я никогда не делаю чаты на сайте, т.к. не считаю нужным для своих проектов. Я думаю, что чат или чат-бот на сайте – вещь полезная, но только для проектов определенного вида. Где действительно нужна какая-то техподдержка или реальная онлайн-консультация по какому-то вопросу.

Но если у вас мелкий бизнес вы продаете услуги/товары в каком-то регионе, то вполне достаточно будет сделать кнопку заказа обратного звонка или консультации.

В мобильной версии сайта я предлагаю использовать кнопку связи (Ватсап/Телеграм). Суть в том, что иконка должна быть именно Ватсап/Телеграм. При нажатии на которую будет сразу перекидывать на диалог в мессенджере. Или открываться выбор между мессенджерами, и уже далее перекидывать на диалог в выбранном мессенджере. И это важный момент. Т.к. если иконка будет другая, то многие люди могут решить, что там просто какой-то очередной чат с роботом, и даже не будут на неё нажимать. Рекомендую использовать именно иконки мессенджеров.

Выберите более подходящий по вам вариант (Ватсап или Телеграм). И сделайте. А если можете, – используйте сразу оба (иконки могут поочередно меняться).

Можете использовать и Вайбер, если он популярен в вашем регионе, – суть не меняется.

Если хотите бесплатно получить такой виджет – пишите в ЛС, – подскажу, где взять.

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

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

1 – Уберите навязчивые всплывающие окна. Сидишь, изучаешь сайт – выпрыгивает окно: «СКИДКА!!! На какую-то ненужную ерунду». Хочешь переключиться на другую вкладку, – выпрыгивает окно: «НЕ УХОДИ!!! У нас АКЦИЯ!!!». Зачем? Неужели это работает? Неужели кого-то это остановит? Убедит остаться, оставить заявку или позвонить?

2 – Уберите навязчивый всплывающий чат. Стоит зайти на какой-нибудь сайт, – из правого или левого угла тебе начинают выпрыгивать сообщения: «Здравствуйте!», «Что-то интересует?», «Давайте помогу!». Воу-воу! Я же только сайт открыл. Если вы все-таки установили на сайт чат, – пусть он будет свернут, пока на него не нажмешь. Или, в крайнем случае, пусть выпрыгивает, но только после 3-5 минут на сайте.

3 – «Плавная анимация элементов». Это появление всех элементов сайта (текстов, картинок, иконок) с задержкой, в процессе изучения сайта. Скроллишь – ждешь секунду, скроллишь – ждешь секунду… Пока появится контент. Не надо так. Очень раздражает. Цените время людей, даже если это секунды.

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

Здесь очевидные вещи.

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

2 – Обратите внимание на скорость загрузки сайта (особенно мобильной версии). Например, часто сталкиваюсь с тем, что на сайт закидывают огромные фотографии в высочайшем качестве. И потом они грузятся по три часа. Ужимайте размеры фотографий. Потом ужимайте их «вес» (рекомендую сервис «Оптимизилла»). И только потом грузите на сайт.

На этом об «удобстве» сайта – у меня все. Хотя остается ощущение, что тему я раскрыл не до конца. Можете дополнить в комментариях. Или написать, что в современных сайтах вас раздражает.

А ниже, как обещал, свежие материалы на тему продающих сайтов. Это тоже статьи на VC.

Почему одни сайты продают, а другие – нет? Принцип «Резюме»

Как сегодня должен выглядеть первый экран вашего сайта

Блок «О компании» на сайте: что писать, как оформлять, чтобы конверсия сайта взлетела

Отзывы на вашем сайте, которым поверят. ТОП 7 вариантов оформления

Как делать захватывающие формы отправки заявки на сайте

Квиз-опросы на сайтах: авторский метод

О дизайне сайта. «Очень красиво, но позвоню другим»

Спасибо за внимание и успехов вашему бизнесу!