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

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

  • Опечатка в URL. Ну, бывает, мы все люди, ошибаемся иногда. И если человек неправильно набрал адрес страницы или перешел по неверной ссылке, то 404-ая ошибка его наверняка ожидает.
  • Страницу переместили в другой раздел и в итоге у нее изменился URL-адрес. Тут, собственно, все понятно – если админ сайта что-то перетаскивает из одного места в другое, то и адрес у страницы меняется, и по старой ссылке она уже недоступна.
  • Если разделы переименовываются, то, конечно же, и URL-адрес тоже меняется, и старые ссылки становятся бесполезными.
  • Бывает, что сервер платформы недоступен или просто не отвечает. В этом случае тоже выскакивает страница 404.
  • И, наконец, страницу по указанной ссылке уже удалили. Это часто происходит со спецпредложениями, распродажами и сезонными товарами – они появляются, радуют нас какое-то время, а потом исчезают без следа, и по старым ссылкам мы уже ничего не найдем.


Так вот, именно это и стоит объяснить посетителю сайта, когда он видит 404. Объясни пользователю, что произошло и почему он попал на 404. Неплохо добавить нотку утешения, чтобы пользователь не расстроился. Ведь когда видишь вот такую надпись "404 Page Not Found" без всяких пояснений, можно почувствовать дискомфорт и начать нервничать.

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

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

Зачем нужна отдельная страница

Как хороший дизайнер, ты должен реализовать эту страницу нормально, а не “чтоб было”. 

Нам нужна страница, которая продумана тщательно и выглядит стильно. Зачем?

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

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


Вот так решает вопрос Airbnb

Варианты контента

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

Ищи пути для вовлечения. Кроме стандартного перехода на Main Page можно сделать вот еще что:

  • меню, разделы, товары – с активными ссылками и превью;
  • полезные материалы – гайд, мастер-класс, нестандартная инструкция, лайфхак, каталог;
  • реклама – но не прямо в лоб, а в качестве извинения за неудобства. Не нашел тот самый товар по акции? Вот ссылка на другие горящие предложения. Или даже промокод.
  • афиша/анонс – пусть будет информация о событиях, которые ожидаются в ближайшем будущем. Опять же, с возможностью записаться или купить участие.
  • строка поиска – особенно эффективно для крупных сайтов. Если искать по категориям долго, то пусть посетитель введет соответствующие ключевые слова и сразу отыщет то, что искал. 
  • частые вопросы – если что-то пошло не так, то, возможно, посетителю нужна помощь. Размести раздел FAQ на странице 404, если это целесообразно.
  • анимация или видео – мы уже говорили о том, что ролик вместо статики хорошо работает на странице Success. Это уместно и на 404. Живой контент увлекает. Но и должен приносить пользу. Пусть там будет нужная информация.
  • интерактив – более сложное решение в плане реализации, но очень вовлекающее. Тесты, онлайн-игры, вопросники и подобные штуки заставляют не только не упустить посетителя, но и задержать его на странице. 
  • обратная связь – размести форму для сообщения о проблеме или стандартную с обратной связью. Может быть кнопку заказа звонка. Это может помочь, если посетитель запутался. Также это демонстрация заботы, так что сработает для повышения лояльности к бренду.
  • выдача других товаров/услуг – уместно, если посетитель ввел URL, в котором есть адрес категории/подкатегории, а самого товара уже нет. Тогда стоит сказать, что данной страницы не существует, но есть подобные из этого же раздела. Может там найдется что-то подходящее. Или просто посетитель увидит правильный путь и перейдет по другой ссылке. 


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

 

Пара советов и условий

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

  1. Общая концепция для всего сайта – выдерживай единый стиль, твоя 404 не должна отличаться от других страниц ни дизайном, ни подачей. Это важно в первую очередь для восприятия – посетитель должен видеть, что он все еще на том же сайте. Во-вторых, это просто удобно, если использовать уже готовые элементы. Например, сделать 404 на основе первого экрана главной страницы. 
  2. Юмор – соревнование на самую остроумную страницу ошибки объявляется открытым. Разрядить обстановку и обыграть неудачу весело действительно важно. Особенно если сделать это с использованием тематики сайта. Иллюстрации, забавные подписи и анимации будут уместны. Конечно, если это не противоречит Tone of voice самого бренда.
  3. Индивидуальный подход – обыгрывай специфику направления. Если это строительный сайт – пусть на 404 будет показан поломанный кран и недоумевающий работник в каске. На сайте зоомагазина грустный котик. Ты понимаешь концепт.
  4. Цепляй. Кроме пользы важна эстетика. Страница имеет свои функции – не только информировать, но и заставить посетителя выполнить нужное нам действие. Поэтому важно зацепить его внимание интересной подачей. Юзер не должен закрыть окно, как только увидит надпись “Ошибка 404”. Так что креативность приветствуется.