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”. Так что креативность приветствуется. 


Легендарный Pixar использует персонажа из своего же мультфильма

Чего НЕ НУЖНО делать

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

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

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

Пример страницы 404 украинской геймдев компании https://www.playtika.com – предлагают сразу поиграть или выбрать нужный раздел в футере

Узнай, как сделать классно

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

Страница 404 обычно становится плацдармом для самых смелых идей, так что не упускай шанс для самореализации в творческом плане. Хотя стоит понимать, что без базовых навыков UX/UI ничего годного сделать не выйдет. Поэтому оттачивай навыки, штудируй теорию, тренируй насмотренность. И учись у профессионалов. Приходи на онлайн-курс «UX/UI легенда», там будут все фишки и секреты.