Оформление и дизайн 404 страницы

4,225 просмотров всего, 2 просмотров сегодня

Оглавление


Качественный контент, выгодные предложения, продуманное юзабилити… Вы делаете все, чтобы сайт был идеальным с точки зрения маркетинга и конверсионности. А как насчет дизайна страницы «Not Found»? Вы используете второй шанс привлечь пользователя или отправляете его к конкурентам?

Код ошибки «404» или «Error: Not Found» возвращается сервером в том случае, если запрашиваемая страница не существует («Не найдена»).

268c011081

Зачем нужна страница «Ошибка 404»

Иногда, попадая на ваш сайт, посетитель «приземляется» на несуществующую страницу. Причины тому могут быть разными:

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

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

Хороший дизайн страницы “Not Found” поможет превратить ее недостатки в преимущества, показать вашу заботу о пользователе и желание помочь в его поисках. Именно так действовали разработчики Twitter

e54b5a8303

Отсутствие «Ошибки 404» – это ошибка!

К сожалению, многие начинающие программисты и владельцы сайтов не уделяют должному вниманию дизайна страницы “Не найдена”. В результате посетитель испытывает растерянность, не понимая, где именно он находится и что с этим делать.

Это, к примеру, сайт туристической кампании в Беларуси:

eebd345a21

А тут мамы из Казахстана могли бы найти няню для своего ребенка:

fa1d4f83d0

Попадая на подобные страницы, пользователь не знает, как поступить дальше. И попросту покидает сайт. Чтобы этого не произошло, стоит отдельно продумать дизайн «Ошибка 404» и реализовать его на моменте верстки.

Как удержать пользователя

Существует несколько основных несложных требований к оформлению «Not Found».

1. Выдерживайте стиль

Брендовое оформление страницы создаст у посетителя эффект присутствия на сайте. Фирменные цвета, логотип компании, наличие навигационного меню и контактных данных стимулируют доверие пользователя и не позволяют ему «заблудиться». Отличный пример – сайт компании McDonalds.

76d6c76c81

2. Общайтесь с клиентом

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

24d4f6a6ee

Текст: Извините, ребята, парковка закрыта! Вы можете пойти домой или набить морду лосю.

Или:

3ba8212f4f

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

Здесь очень важно выдержать общий стиль подачи контента на сайте. Ведь тексты с креативным или двусмысленным юмором далеко не всегда уместны на ресурсе серьезной солидной компании, такой как банк ВТБ.

f1bc6689ac

3. Мотивируйте к действию

Можно попросить пользователя проверить правильность написания ссылки или попробовать начать поиск заново. Главное – побудите его к совершению какого-либо действия на сайте и не позволяйте закрыть вкладку. Если клиент попал на удаленную страницу интернет-магазина, предложите ему выбрать альтернативный товар, как поступают маркетологи интернет-магазина ADIDAS.

2ff0bee85a

4. Удивляйте

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

7dd6f6d0a9
https://www.tumblr.com/404 (обновите ссылку несколько раз).

5. Добавьте интерактива.

Некоторые не верят, но нестандартное оформление “Not Found” может надолго задержать внимание посетителя. Увлекательные флеш-игры нравятся всем, вне зависимости от возраста и социального положения. С помощью такого приема вы увеличите время пребывания пользователя на сайте, что положительно скажется на ранжировании ресурса поисковыми системами.

http://heyzap.com/404
http://colibris.ua/404/

Как продавать с помощью страницы 404 ошибки?

Каждый элемент на сайте должна мотивировать потенциального клиента к целевому действию. И “Не найдена” – не исключение. Западные маркетологи активно используют приемы получения с них качественных лидов. Чтобы направить пользователя в сторону воронки продаж, можно использовать следующие приемы:

Владельцы интернет-магазинов могут показать покупателю похожий товар или актуальное акционное предложение. Как книжный магазин Лабиринт или онлайн-гипермаркет Ozon:

41858406ce

83d1f44348

Целью вашего сайта является генерация лидов? Предложите посетить одну или несколько посадочных страниц.

843f63f221

Текст: Заблудились в космосе? Возможно, вы искали один из наших последних проектов.

Клиент не может сделать заказ на сайте? Предложите ему сделать покупку в аккаунте в соцсетях

53ee9ecac4

Никто не застрахован

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

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