Никто не посмеет отправиться в поход, не прихватив с собой компас или карту: все знают, что многочасовые прогулки по глухим лесам или безлюдным горам без понимания, где ты находишься и куда следует держать путь, до добра не доводят. Пожалуй, та же перспектива ожидает и тех пользователей, которым «посчастливилось» попасть на веб-ресурс, чья система навигации находится в крайне плачевном состоянии.
Если интерфейс вашего сайта понятен, то он задержится на вашем ресурсе, по достоинству оценит предлагаемый вами опыт и обязательно вернется еще раз, что, как вы понимаете, скажется на вашем бизнесе исключительно положительным образом. Если же сайт недружелюбен к пользователю, он ответит вам тем же.
Цель данного материала — обозначить те принципы, которыми следует руководствоваться при разработке удобной навигации на сайте и качественного онбординга.
Содержание статьи
Что делает навигацию по веб-сайту хорошей?
Точка конверсии
Призыв к действию
Структура меню
Контент сайта
Правило 3-х секунд
Что такое онбординг и как его организовать?
Зачем использовать интерактивные подсказки (tooltips)?
Как не засорить свой интерфейс?
1. Демонстрируйте только одну подсказку за раз
2. Используйте индикаторы прогресса
3. Следуйте правилу «одна подсказка — одно действие»
4. Предоставьте пользователю возможность пропустить онбординг, если он того пожелает
Что делает навигацию по веб-сайту хорошей?
Во-первых, сразу приготовьтесь к тому, что работать по готовым шаблонам не получится: нет такой стратегии, которая одновременно подошла бы всем и каждому. В ходе разработке вам нужно будет отталкиваться от того, к какой отрасли принадлежит ваш бизнес, каких целей вы планируете достичь и на какую аудиторию таргетируетесь.
Эти нюансы и определят облик вашей стратегии: того, как вы вы будете убеждать людей начать взаимодействовать с вами. К примеру, если ваша целевая аудитория — пожилые люди, крайне маловероятно, что регистрация через Facebook или Вконтакте — лучший способ взаимодействия с ними.
Спросите себя: «Каким опытом вы хотите обеспечить пользователя?». Ответ на этот вопрос поможет вашей системе обрести правильную форму. Не стоит строго придерживаться каких-то устоявшихся правил и норм, кроме, пожалуй, одного: чем проще навигация, тем лучше. Менее разветвленная структура меню, «хлебные крошки», короткие формы, понятные призывы к действию и дружелюбный к пользователю интерфейс помогут каждому легко и быстро найти интересующую его информацию.
Еще одним важным элементом любой удобной навигации является ее постоянство.
Постоянство, логичность в навигации обуславливает неизменность пользовательского опыта на всем сайте — если навигация не меняется от странице к странице, то человек легко найдет дорогу туда, куда ему нужно, и без проблем сможет вернуться обратно. Четкая, понятная и простая навигация заметно сократит продолжительность поиска пользователем, и к тому же, скорее всего, сделает его постоянным клиентом, ведь вашим сайтом так удобно пользоваться.
Точка конверсии
Главная цель вашего сайта — конверсия в продажу, или преобразование посетителей в покупателей, а trial-пользователей — в платящих клиентов. От количества конверсий зависит ваш успех. Потенциальный клиент должен иметь возможность быстро совершить покупку, оплатить тариф и т.д.
Ваши шансы на преобразование значительно возрастают, когда человек попадает на сайт, «готовый к конверсии», ведущий пользователя к сделке. Когда и как происходит конверсия, зависит от организации. Но достигается она всегда с помощью призывов к действию и структуры меню, а также качественного онбординга.
Призыв к действию
Призыв к действию (call to action, CTA) — это то, что побуждает ваших посетителей и подписчиков совершить некое действие, важное для вас. Примеры CTA, известные каждому: «Купить», «Скачать файл», «Получить скидку», «Зарегистрироваться», «Подписаться на рассылку», «Выбрать тариф» и т.д.
Хороший призыв к действию создает ощущение срочности, мысль о том, что действие нельзя откладывать на потом, а принять решение нужно максимально быстро («Успейте до конца акции») и, следовательно, побуждает людей к конверсии в максимально короткие сроки. Размещение CTA по всему сайту позволит вам стойко и последовательно провести пользователей на страницу регистрации или покупки.
Структура меню
Структура меню помогает людям найти то, что им необходимо, и то, что бы вы хотели показать им. Как правило, меню располагают в верхней или левой части сайта, с логотипом в верхнем левом углу и второстепенными навигационными элементами, если они необходимы. Это не строгие правила, а скорее рекомендации.
F-паттерн — проверенный, доминирующий шаблон чтения веб-страниц, который примерно напоминает букву F. Исследования показали, что поведение пользователей при изучении страниц разных сайтов примерно одинаковое.
Шаблон включает в себя следующие три особенности:
- Сначала пользователи пробегают глазами по странице горизонтально, как правило, изучая верхнюю ее часть.
- Затем они перемещаются немного вниз и снова пробегают по странице в горизонтальном направлении, как правило, охватывая меньшую область, чем в первый раз.
- Наконец, пользователи сканируют левую часть сайта по вертикали.
Прекрасным примером применения F-паттерна в дизайне интерфейса является сайт Booking. Разработчики остановили свой выбор на сложной структуре меню, которая, между тем, позволяет посетителям максимально точно сформулировать свой запрос:
Контент сайта
Создавать контент для бизнес-сайтов совсем не то же самое, что писать статьи в блог, газету или журнал. Убедитесь, что ключевые слова (слова или фразы, которые использует целевая аудитория при поиске ваших товаров и услуг) появляются в тексте с достаточной частотой. Постарайтесь сделать так, чтобы на каждой странице сайта был один или несколько заголовков и подзаголовков, потому что пользователи не имеют привычки вчитываться в каждое слово на странице, а пробегают по ней глазами, «сканируя» ее. Текст должен быть изложен понятным языком, вдохновлять пользователей на дальнейшее изучение сайта и мотивировать совершить целевое действие. При этом избегайте многословности: пусть каждое слово борется за место на странице. Помните о рассеянном внимании современных людей и старайтесь свести к минимуму ссылки и прочие отвлекающие факторы.
Правило 3-х секунд
Три секунды — это именно то время, которое в среднем тратит каждый посетитель на то, чтобы узнать, о чем ваш сайт и как им пользоваться. Не сможете уложиться в этот промежуток, и человек уйдет. Ниже — несколько рекомендаций, как удержать внимание посетителей: чтобы пользователям было проще «просканировать» ваш сайт и они смогли быстрее понять, стоит ли им тратить время на дальнейшее взаимодействие и более внимательное его изучение, придерживайтесь следующих правил:
- используйте больше белого (пустого) пространства, выделенные жирным шрифтом и цветом заголовки и маркированные списки;
- используйте интересные и содержательные изображения, дополняющие текстовый материал;
- закажите графическое оформление у профессионала (либо используйте те варианты, которые выглядят профессионально).
Однако порой одной лишь интуитивной навигации бывает недостаточно. Чтобы человек сходу смог разобраться в вашем сайте или приложении, оказывается необходим этап онбординга.
Что такое онбординг и как его организовать?
Представьте улицу, на которой бы не было ни одного указательного или предупредительного знака. Огромное число автомобилей, людей, велосипедистов, но ни одного уличного знака. Пешеходы и водители без устали кричат друг на друга, все возмущены до предела. Вокруг царит хаос.
А теперь представьте себе интернет-магазин или веб-приложение с множеством интересных функций, но в котором полностью отсутствует онбординг, то есть этап ознакомления нового пользователями с механизмом его работы. Никаких подсказок, никаких советов — ничего. Похоже на улицу без знаков, не так ли?
Приложение — та же улица, а пользователи выступают в роли пешеходов и водителей. Если поведение всех этих участников дорожного движения никак не будет регламентировано, обязательно образуется затор. Люди начнут выходить из себя, а кто-то обязательно позвонит в полицию, которая и поможет навести порядок.
Но главное отличие вашей ситуации в том, что посетители вашего сайта или приложения в полицию звонить не станут. Они просто закроют страницу и удалят себя из вашей базы.
Если вы считаете, что люди влюбятся в ваш продукт с первого взгляда, вы ошибаетесь. Если вы думаете, что он им понравится при любом раскладе, вы ошибаетесь. А если вы всерьез думаете, что люди смогут самостоятельно разобраться в вашем сайте или приложении, интуитивно понять, куда и когда следует нажимать… что ж, вы снова ошибаетесь.
Даже если вы гений, вы не сможете придумать на 100% интуитивно понятный интерфейс.
Вот почему наиболее продвинутые компании используют разного рода тактики адаптации, интерактивные подсказки, индикаторы прогресса, гайды и множество других вещей — лишь бы помочь пользователям понять, как работает их сайт или приложение.
Когда вы покупаете сборную мебель или технику, в коробке с продуктом вы всегда находите инструкцию по сборке и/или использованию. Сейчас, когда разработчики владеют методами создания интуитивно понятных продуктов, прилагать толстую книжку с инструкциями уже нет необходимости (по крайне мере не для всех продуктов). Но несколько советов и рекомендаций дать все же нужно, чтобы быть уверенным, что пользователь не потеряется на вашем сайте.
Наиболее эффективным инструментом представления таких инструкций по праву считаются интерактивные подсказки (tooltips), которые, по сути, являются частью онбординг-процесса и помогают направить внимание пользователя на конкретный элемент или действие и представить по его поводу исчерпывающее пояснение.
Зачем использовать интерактивные подсказки (tooltips)?
Основная причина, почему вы должны имплементировать в свой продукт систему подсказок — это возможность в быстрой и доступной форме рассказать пользователю о ключевых функциях продукта.
С помощью визуальных интерактивных подсказок вы помогаете посетителю взаимодействовать с вашим сайтом, сервисом, продуктом, объясняя:
- что означает та или иная кнопка;
- зачем нужен конкретный элемент навигации;
- куда нажимать, чтобы получить желаемый результат.
К сожалению, всегда найдутся те, кто будет злоупотреблять использованием подсказок и тем самым сделают свой продукт непривлекательным и отталкивающим.
Как не засорить свой интерфейс?
Есть несколько вещей, которые вы можете сделать, чтобы не засорить свой продукт тултипами. Итак:
1. Демонстрируйте только одну подсказку за раз
Иначе вы мгновенно перегрузите пользователей тонной новой информации. Так делать не нужно. Взгляните на пример Hotjar. Согласно их сценарию, вы сможете увидеть следующую подсказку только после того, как вы подтвердите свое намерение нажатием кнопки «Next» на текущей.
2. Используйте индикаторы прогресса
В примере Hotjar прогресс демонстрируется через последовательность точек. Это довольно мило, особенно с точки зрения нового пользователя. Пользователь должен знать, где он находится и сколько еще осталось до конца ознакомительного тура.
3. Следуйте правилу «одна подсказка — одно действие»
Ничего страшного в том, что текст подсказок будет объемнее, а самих их — больше. Просто убедитесь, что в каждой из подсказок дано объяснение только одного действия. В противном случае людям придется запоминать, что и в каком порядке делать, чрезмерно напрягаться. Через какое-то время это их запутает и начнет раздражать.
4. Предоставьте пользователю возможность пропустить онбординг, если он того пожелает
Как вы можете видеть в примере с Hotjar, у пользователя нет такой опции, и это огорчает. Пользователи должны иметь возможность пропустить туториал в любой момент, когда захотят. Этот этап не должен быть принудительным.
5. Реализуйте возможность вернуться обратно
Некоторые вещи бывает трудно понять с первого раза. В этом случае люди должны иметь под рукой механизм, который позволил бы им заново изучить интересующую их информацию.
Рядом с кнопкой Exit (выход) расположена кнопка Back (назад)
Заключение
Удобная и понятная навигация, равно как и продуманный онбординг, являются важными факторами в достижении вашим веб-приложением или сайтом коммерческого успеха. От навигации зависит, как скоро посетитель сможет найти необходимую ему информацию, а удобство перемещения по ресурсу и онбординга — насколько хорошо продукт будет воспринят конечным потребителем. Очевидно, что навигация должна быть интуитивно понятной, но порой не всегда удается донести до пользователя смысл чего-либо исключительно средствами дизайна. Нужно ткнуть пальцем и объяснить. Зачастую такой подход наиболее эффективен. В этом деле вам помогут интерактивные подсказки. Тем более, что Experrto представляет собой простое расширение для Google Chrome, позволяющий управлять подсказками через браузер с помощью простого редактора (виджета) без программиста и дизайнера.
Подписывайтесь на нашу группу в фейсбуке и канал в телеграм, чтобы следить за обновлениями.
Прокачайте свой онбординг!
Изображение: freepik.com
