Как сделать удобную страницу входа и каких ошибок избегать

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

Одно из таких мелких решений — структура страницы входа.

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

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

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

Приступим.

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

1. Сократите время загрузки страниц

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

2. Единый стиль на всех страницах

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

3. Простая навигация

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

4. Призыв к действию (CTA) на каждой странице

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

5. Удобочитаемый контент

Способов много, но главное — чтобы пользователи не видели на странице огромных сплошных абзацев. Разберём несколько приёмов.

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

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

Так же полезно разбивать текст на маркированные списки.

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

6. Используйте мультимедиа

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

7. Используйте плагины

На какой бы платформе ни работал ваш сайт, расширяйте его возможности плагинами. Для примера предположим, что ваш сайт на WordPress.

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

И вам повезло.

Вы находите Bookly — плагин для управления записями. Такие плагины очень ценны для пользователей сайта.

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

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

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

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

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

Разберём их по отдельности, прежде чем набросать дизайн.

1. Потенциальный участник

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

Сделайте эти варианты заметно разными. Хороший приём — два отдельных блока для этих функций, выделенных разными цветами. Подпишите блоки крупным понятным текстом.

Не усложняйте.

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

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

2. Вернувшийся участник

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

Эти опции сделают вход для постоянных пользователей максимально простым и быстрым. Рассмотрим несколько способов упростить процесс.

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

Просто.

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

А теперь о забывчивых пользователях: тех, кто не поставил флажок «Запомнить меня», зашёл с нового устройства или не записал пароль и/или логин.

Эти люди кричат: «Помогите!»

Две простые кнопки снимут все эти тревоги: «Забыли пароль?» и «Забыли логин?». После нажатия отправьте пользователю инструкцию, как восстановить или сбросить пароль и логин и снова войти в аккаунт.

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

Итак, мы обсудили многое. Дальше разберёмся, как отслеживать и оценивать, насколько хорошо работают дизайн и настройка страниц. Дайте сайту хотя бы 90 дней, чтобы накопить данные, а затем настройте A/B-тесты, чтобы продолжать развивать и улучшать сайт.

Прежде чем двигаться дальше, кратко повторим всё, что мы обсудили.

Лучшие практики дизайна сайта

• Следите, чтобы страницы загружались быстро. Пользователи не отличаются терпением.
• Выдерживайте единый стиль и тему на всём сайте.
• Сделайте навигацию удобной для пользователей.
• Размещайте CTA на каждой странице.
• Разбивайте контент на удобные части. Никаких длинных абзацев!
• Оживляйте страницы с помощью мультимедиа.
• Расширяйте возможности страниц с помощью плагинов.

Лучшие практики для страниц входа

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

Теперь перейдём к отслеживанию.

Начнём с главного — и нет, это не реклама Google. На самом деле лучшего инструмента веб-аналитики, чем Google Analytics, просто нет.

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

1. Задайте бизнес-цели и конверсии по целям

Каковы цели вашего сайта? Огромный трафик, который не приносит измеримой пользы бизнесу, не стоит ваших усилий. Определите цели (то есть действия, которые должны совершать посетители на сайте) и настройте их как конверсии по целям в аккаунте аналитики.

2. Следите за поисковыми запросами пользователей

Честно предупреждаем: для этого нужно создать аккаунт Google Search Console и связать его с аналитикой. Это бесплатно и просто, а в справке Google быстро объяснят, как это сделать. После этого смотрите, по каким запросам люди находят ваш сайт. Используйте эти данные, чтобы дорабатывать и уточнять стратегию поисковой оптимизации.

3. Используйте инструмент Page Analytics

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

4. A/B-тестирование

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

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

Вопросы и ответы о Bookly

Каких ошибок стоит избегать на странице входа?

Слишком много полей, когда пользователь ещё даже не понял, с чего начать. Просить аватар, контрольный вопрос и номер телефона сразу, да ещё и добавить скрытую CAPTCHA — верный способ заставить человека уйти. Избегайте нагромождения. Подписи должны быть понятными: «Email», а не «Идентификатор пользователя». Не заставляйте сбрасывать пароль при каждом входе. Требование 16-символьных паролей со спецсимволами, заглавными и строчными буквами и эмодзи звучит надёжно, но раздражает больше, чем защищает. И пожалуйста, не прячьте «Забыли пароль?» мелким серым шрифтом внизу. Если пользователи эту ссылку не увидят, они просто уйдут.

Как сделать страницу входа удобной?

Начните со смелой простоты. Одна форма, два поля — email и пароль — по центру экрана. Крупные кнопки, по которым удобно нажимать на смартфоне. Добавьте переключатель «Показать пароль», чтобы не ошибаться при вводе вслепую. Разместите понятную ссылку «Забыли пароль?» прямо под полем. 

Если вы поддерживаете вход через соцсети или единый вход (SSO), разместите эти кнопки после основной формы, с разделителем и ненавязчивой подписью «или продолжите с помощью». Сообщения об ошибках должны быть вежливыми и точными: «Такого email нет в нашей базе» лучше, чем «Ошибка входа». И наконец, используйте привычные шрифты, фирменную цветовую палитру и достаточно свободного пространства, чтобы ничего не выглядело тесным. В этом и суть лучших практик дизайна страницы входа — это надёжный шаблон для вашей страницы.

Что делает страницу входа безопасной и эффективной?

Шифрование SSL обязательно. Убедитесь, что адрес начинается с HTTPS и значок замка хорошо виден. Ограничьте частоту попыток входа, чтобы боты не могли подбирать пароли сутками. Предложите двухфакторную аутентификацию — через SMS, email или приложение-аутентификатор, — чтобы у пользователей был дополнительный уровень защиты. Храните пароли на сервере в виде хешей с солью. Незаметно для пользователя записывайте неудачные попытки входа для мониторинга. Но не заваливайте пользователей терминами. Говорите о безопасности просто: «Мы защищаем ваши данные с помощью стандартного отраслевого шифрования». Это успокаивает пользователей и соответствует лучшим практикам дизайна страницы входа — безопасность и ясность.

Как неудачный дизайн входа снижает удержание пользователей?

Если люди не могут быстро войти, они уходят. Каждый лишний клик или непонятное сообщение об ошибке отталкивает. Трудности при входе ощущаются как запертая дверь, когда очень нужно попасть внутрь. Раздражённые пользователи бросают корзины, пропускают обновления и уходят к конкурентам, у которых дверь открыта. Email-рассылка, над которой вы так старались? Её никто не увидит. Продажа, которую вы хотели закрыть? Упущена. Короче говоря, неудобная страница входа — дырявое ведро. Беспрепятственный вход — одна из лучших практик дизайна страницы входа, и благодаря ему пользователи возвращаются снова и снова.