Юзабилити сайта — как перестать терять посетителей и начать получать лиды

Уголок оптимизатора

1. Главная страница

Это сайт спортзала. Нет, это сайт интернет-магазина спортивных товаров. Лучше показать сам продукт, а не человека, который им пользуется. С точки зрения посетителя, на этом снимке какой-то парень накачивает «мои»; штанга (т.е. товар, который я хочу купить). Давайте просто покажем штангу, и заодно поместим правильный логотип в шапку (на исходном сайте он почему-то только посередине страницы):

 

Добавление однозначности дизайну

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

2. Навигация

Есть меню (главное вверху, дополнительное слева и подвал) и панировочные сухари. Навигация показывает, что есть на сайте & ndash; какие продукты / услуги предлагает компания и что вы можете узнать о ней. Оптимально использовать 1-2 уровня вложенности. Если их будет больше, будет сложно сориентироваться.

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

Старайтесь не размещать более 6-8 пунктов на одном уровне меню. Помните, что средний объем внимания человека — 5-7 пунктов.

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

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

Вернемся к примерам. На сайте строительной компании было два меню (верхнее и левое), поэтому мы можем объединить их в одно. Объединим «Сервисы» и «Цены» товары в один раздел «Услуги и цены» — глупо говорить об услугах на одной странице, а их цены с другой. Пункт «Маршрут путешествия» удаляем вообще, схема будет в разделе «Контакты». Разделы «Вакансии», «Партнеры», «Карта сайта»; также удаляются, так как основной целевой аудитории сайта они не нужны. Пункт «Калькулятор» убрать из меню, сделав его отдельным блоком и поместить в правой части сайта.

Работа с меню сайта

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

Новый дизайн меню интернет-магазина

Теперь главное меню содержит самую необходимую информацию для покупки товара & ndash; сам каталог, возможные способы оплаты и доставки, а также новости (чтобы узнать, насколько «жив» магазин) и акции (при наличии скидок прямо сейчас).

3. шапка сайта

Это верхняя часть сайта-шаблона, которая остается неизменной на всех его страницах. Может содержать: логотип, слоган (2-3 слова о том, чем занимается компания), телефон, адрес, режим работы, обратная ссылка, ссылки на группы в социальных сетях, ссылки для входа или регистрации личного кабинета, корзина, панель поиска. Заголовок страницы обычно также включает меню.

Работа с заголовком для сайта строительной компании добавить слоган, полное название компании, ее адрес. Чтобы не путать людей, оставим только один номер телефона (и возьмем городской, а не сотовый). Добавим режим работы, чтобы люди знали, в какое время они могут позвонить:

Улучшение заголовка сайта

Теперь посетитель видит, что пришел на сайт компании, которая строит бревенчатые дома и дома под ключ, эта компания называется «МС»; И это компания с офисом, а не команда студентов. Переходим к интернет-магазину. Мы сделаем логотип меньше, чтобы освободить место для других элементов, и добавим к нему короткий слоган. Мы добавим слоган, чтобы упомянуть регион, в котором работает компания. Здесь аналогично оставьте номер телефона и добавьте режим работы. Дополнительно ставьте ссылки на группы ВКонтакте и Instagram. И самое главное в случае с интернет-магазином — корзина, она тоже будет помещена в заголовок справа (это ее место по умолчанию).

 

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

4. Подвал

Нижний колонтитул — внизу шаблона сайта, который также остается неизменным на всех страницах. Здесь мы традиционно помещаем авторские права — год и ее полное название. Здесь же мы дублируем ссылки и контакты из шапки, ссылки на группы в социальных сетях. Мы можем добавлять ссылки, которые не помещаются в главное меню. Не забивай его слишком сильно, это все-таки не балкон.

Текущий нижний колонтитул сайта из первого примера не имеет смысла:

Бесполезный нижний колонтитул на сайте

Давайте добавим ему полезности:

Нижний колонтитул с полезными ссылками и номерами телефонов

Помимо информации из шапки мы добавили ссылки на разделы «Партнеры»; и «Вакансии» — они могут быть полезны примерно 2-5% посетителей этого сайта, поэтому находятся в нижнем колонтитуле. Также здесь указаны дополнительные телефоны менеджеров (но их необходимо продублировать в разделе «Контакты»).

Нижний колонтитул второго примера немного информативнее первого:

Работа с нижним колонтитулом веб-сайта

Давайте сделаем его более «твердым»:

Результат уточнения нижнего колонтитула

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

5. Контент

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

Помните, что содержание — это не просто текст. Это также фото и видео. Они должны быть хорошего качества, сейчас для этого достаточно камеры планшета (по крайней мере, для приемлемых фото). В идеале, если бы картинки и видео были сделаны «живыми». не взято с других сайтов.

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

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

Приведу несколько примеров. На сайте строительной компании есть страница о ленточный фундамент:

Пример неинформативного текста

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

Полезная статья для посетителей сайта

В статье обязательно стоит использовать фото — потому что 50% людей плевать, но позволяют им смотреть фото, и даже неважно, какие фото они делают)

В статье мы должны использовать фотографии.

В примере со спортивным магазином рассмотрим страницу о доставке:

Старый текст доставки

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

Старайтесь использовать короткие фразы и простые предложения. Сэкономьте время посетителей и позвольте им потратить его на просмотр еще нескольких товаров.

Мы стараемся использовать короткие фразы и простые предложения.

6. Тексты

Еще пара слов о текстах. Есть три важных момента:

Специфика.

Здесь все просто. Мы пишем не «в нашей парикмахерской самые низкие цены», а «мужские стрижки от 300 руб. Представьте, что вы рекомендуете компанию лучшему другу. Вы не подскажете ему личный подход и доходчиво объясните — Закрепит вас специалист, он сопроводит все этапы работы и согласует с вами». Не стесняйтесь разговаривать со своими посетителями на одном понятном языке. «Получишь». Опишите не то, что вы будете делать, а то, как это будетсделать так, чтобы клиент чувствовал себя хорошо. Не «мы подберем для вас лучшую поездку». но «вы проведете 10 дней в месте своей мечты. Целенаправленное действие. С энтузиазмом относитесь к написанию правильного текста, не забудьте включить призыв к действию — Позвоните, Напишите, Оставьте заявку, Зайдите в каталог и т. д.

Взгляните на страницу описания услуги в нашем первом примере:

Описание службы веб-сайта

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

Добавить выгоду для клиента в текст

И даже добавил сюда гарантию сроков (слишком больное место, и не только в строительстве).

В примере с интернет-магазином перейдем на главную страницу:

Текст не содержит полезной информации

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

Текст с особенностями и преимуществами

Здесь целевое действие — нажать на карточку товара, чтобы не было отдельных кнопок.

7. Обзоры и тематические исследования

Продолжите содержание.

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

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

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

Приведу вам пример. Портфолио от строительной компании. Один сайт — всего одно фото.

Мало фото в портфолио

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

Примеры работы с описаниями и фотографиями

В наши дни для интернет-магазина это уже пусто:

Описание товара без отзывов

Взгляд обычно ищет отзывы:

Обзоры товаров в магазине

8. Первый экран

Это часть страницы, которую вы видите в браузере без необходимости прокручивать страницу. Итак, вы открываете сайт & ndash; все в окне занимает первый экран.

Когда пользователь открывает в поиске 5–7 сайтов, а затем просматривает их один за другим, это первыйэкран, который оценивается. Из этой быстрой оценки сразу закрываются 3-4 сайта, а остальные изучаются более тщательно.

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

Возьмем пример. Вспомните первый экран веб-сайта строительной компании:

Первый экран веб-сайта

Это не прижилось. Попробуем вовлечься, ударив по желанию пользователя:

Редизайн первого экрана сайта

Какой человек ищет строительство дома под ключ — это примерно тот дом, который они хотят видеть на картинке. Для более сильного эффекта с правой стороны размещаем форму с заголовком «Я хочу дом»; где можно выбрать параметры будущего дома и отправить заявку на расчет стоимости. Здесь же на первом экране мы указываем стоимость услуги.

Теперь первый экран магазина спорттоваров:

Первый экран интернет-магазина

Здесь пользователь решит, что попал не на тот сайт. Он искал спортивные товары, но обнаружил сайт спортзала. Мы привлечем их, предложив невысокую цену и индивидуальный призыв к действию:

Повторное использование первого экрана

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

9. Формы

Самая распространенная форма — обратная связь, «напишите нам». Для интернет-магазинов — форма отправки заказа.

Для пользователя, работающего с формами — не самый приятный момент, приходится отвлекаться на клавиатуру (не у всех высокая скорость набора, а кто-то тоже с телефона). Так что чем меньше полей в форме, тем лучше. Хотя правильно сказать, чем меньше обязательных полей, тем лучше. Вы можете оставить форму и 5-6 полей, при необходимости заполнить только 2 поля. Кто не поленился и заполнил все поля — хорошо, остальную необходимую информацию запросит менеджер.

Все поля формы должны быть подписаны (в 2-3 слова). Вы можете добавить небольшое пояснение или пример того, как его заполнить. Все обязательные поля должны быть отмечены звездочками — это давно стандарт.

В качестве примера рассмотрим форму оценки стоимости:

Форма заказа

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

10. Поиск

Необходим, если у вас много товаров или услуг (чаще, конечно, товаров). Если в вашем интернет-магазине более сотни наименований, можно добавить поиск.

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

Поиск по сайту

11. онлайн-консультант

Полезно, если соблюдены 2 условия: консультант не навязывает, а консультант действительно работает.

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

И не настраивайте «всплывающее окно»; окно «Чем я могу вам помочь» через 5 секунд после того, как пользователь зайдет на ваш сайт. Он только знакомится с вашим сайтом, и у него еще нет вопросов.

Местоположение по умолчанию для кнопки «Интернет» — в правой части окна (или в правом нижнем углу).

В качестве примера — провокационный вопрос консультанта по Мосигре:

Юзабилити сайта - как перестать терять посетителей и начать получать лиды

Всплывает самостоятельно после просмотра 3-4 страниц сайта и через 20-30 секунд на странице — то есть, когда кажется, что человек в тупике — с выбором игры.

12. Виджеты социальных сетей

Если ваша компания активно присутствует в социальных сетях, используйте это на сайте.

Например, показать отзывы из ВКонтакте:

Комментарии ВК на сайте

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

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

Улучшение UX

Теперь перейдем к скрытой части — взаимодействие. Это UX (опыт пользователя) — опыт взаимодействия с пользователем.

Посмотрите:

1. Скорость загрузки

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

2. Наличие ошибок

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

3. Увеличивайте изображения, щелкая

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

Картинки в модальном окне

4. Проверка формы

Это проверка правильности заполнения формы. Если посетитель не заполнил ни одно обязательное поле, выделите это поле и укажите, что это то, что вы не заполнили:

Пример проверки формы

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

5. Сообщения после отправки форм

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

Не делайте этого

Ответ после отправки запроса

6. Сообщения о статусе и диалоговые окна

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

Перепишите свои сообщения на естественном языке:

Ответить после отправки заказа

7. Уведомления по электронной почте

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

8. Динамический контент

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

Например, если человек пришел на ваш сайт только из поиска, мы покажем ему вид по умолчанию:

Интернет-магазин спортивных товаров

А если бы оно пришло из рекламы «Детские спортивные комплексы»; затем в слайдер мы сначала поместим один из слайдов, который имеет отношение к детям, а ниже мы разместим блок с детскими товарами.

Изменение содержания под конкретного посетителя

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

9. Полезные инструменты

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

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

Расчет длины лыж в режиме онлайн

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

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

Вы можете быстро и легко найти подходящие лыжи.

Мастер выбора продукта

Общая информация

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

Вот некоторые из наиболее распространенных:

Посетителям не всегда ясно, могут ли они увидеть на странице полноразмерное (интерактивное) изображение. Просто добавив «лупу» значок к изображениям решает эту проблему:

Цикл значков для картинок

2. адреса изображений и файлов

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

Неудобные имена файлов

Небольшой, но минус по карме заработал. («Человек» имена файлов не вызывают никакого негатива:

Понятные имена файлов

3. Кнопка «Вверх»

Актуально для очень длинных страниц (например, в этой статье). Стандартное место — справа внизу, а можно и слева (ВКонтакте, Хабр). Кнопка изначально невидима, но появляется, если человек уже пролистал 1-2 экрана. Я использую «Домой». кнопку на клавиатуре по старинке, но статистика показывает «верх»; Кнопка тоже имеет своих последователей.

4. «Липкое» меню

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

Пример верхней кнопки

Вот пример как «склеенных» — шляпу и кнопку «Сверху» одновременно.

Вывод

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

Любая небрежность или ошибка на сайте будет рассматриваться как неуважение к клиентам компании.

Оцените статью