Когда мы вводим на сайте неверный адрес или щёлкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP — Not Found или «Ошибка 404». Но хорошо оформленная страница (с точки зрения дизайна и юзабилити) может не только поднять настроение пользователю, но и понять, что делать дальше.
Сегодня расскажем что это за ошибка, зачем нужна страница 404 и покажем несколько примеров удачных четырестачетвертых страниц, которые вдохновят вас на создание креативной страницы 😏.
У этой ошибки много имён:
Своё название страница 404 получила от кода ответа сервера 404 — он означает, что сервер ничего не нашёл по указанному адресу. Обычно такая ошибка возникает, когда человек вводит некорректный адрес сайта или переходит по несуществующей ссылке (например, когда вы удалили старую ссылку, а в поисковой индексации она осталась).
Страница 404 — та, которая открывается автоматически, если запрашиваемый сайт невозможно найти. Такая страница может возникнуть на любом сайте, потому что её невозможно проконтролировать полностью.
Кажется, что можно и обойтись без собственного дизайна страницы ошибки? Но на самом деле страница 404 нужна всем по нескольким причинам:
На самом деле причин не так много. Вот несколько наиболее распространённых примеров:
Неправильная переадресация тоже может быть причиной появления ошибки, поэтому при установке редиректа всегда необходимо проверять, всё ли работает корректно. Подробнее об этом можете прочитать в статье «Как поменять домен, чтобы сайт не просел в поисковой выдаче».
Хороший дизайн страницы 404 — способ по-человечески поговорить с вашим пользователем и удержать его на сайте. Поэтому при создании страницы с ошибкой держите в голове несколько правил.
Для начала успокойте человека, попавшего на страницу 404. Объясните, что произошло. Например, можно перечислить причины ошибки: ссылка устарела и её убрали с сайта, допущена ошибка в адресной строке, раздел переехал на другую страницу и так далее.
Дизайн такой страницы может быть не только удобным, но и забавным. Поэтому можете постараться отвлечь пользователей юмором и избавить их от чувства потерянности. С этим очень хорошо справляются изображения, видео, анимации (особенно смешные).
Конечно тон сообщения на странице ошибки зависит от позиционирования вашего бренда, но если есть возможность пошутить — почему нет?
Юмор и красивые картинки — это прекрасно. Но не стоит забывать, что вам нужно поскорее вернуть посетителя страницы 404 на сайт. Например, разместите кнопку «Вернуться на главную», чтобы не потерять потенциального клиента. Также можно разместить меню, поиск или раздел «Помощь», чтобы человек сам выбрал и нашёл, куда ему отправиться.
Страница 404 — часть вашего сайта, поэтому она должна быть оформлена в стиле вашего бренда. Это касается цветов, шрифтов, персонажей и другого контента.
Лучший способ сделать так, чтобы пользователь не попал на страницу 404 — постоянно проверять «битые ссылки» на сайте. Если раз в месяц проверять потерянные статьи, видео, картинки и так далее, ваши пользователи будут все меньше попадать на страницу 404.
Кстати, у Google и Яндекс есть бесплатные сервисы для веб-мастеров, которые помогают найти неработающие ссылки.
Теперь давайте рассмотрим удачные на наш взгляд примеры четырестачетвёртых страниц.
Посмотрите на крутую анимацию с сайта «Bench». Это ошибка? Или такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует? Хмм....
Или, к примеру, сервис email-рассылок «MailChimp» не только порадует пользователя прикольной иллюстрацией, но и вернёт на главную страницу.
Сайт игровой компании «Blizzard» ломается в прямом смысле этого слова.
Некоторые компании делают страницы 404 интерактивными. Например, «Canva» предлагает пользователю собрать несложный пазл.
А сайт «Amphibian» — целую мини-игру с лягушками.
А как насчёт не менее известного «Docker», где расстроенный кит смотрит на утонувший корабль. Нравится ли вам такая анимация?
Ещё одну интересную реализацию ошибки 404 можно найти в блоге «Я люблю иконки». Попадая на такую страницу, посетитель увидит светящиеся число 404, по которому пробегает ящерица — очень креативно!
Если продолжать говорить о милых анимациях, то посмотрите на сайт «Airbnb» — при переходе на сломанную ссылку вы увидите не только девочку с упавшим мороженным, но и найдёте полезные ссылки.
На странице ошибке сайта «Pirate Code» вас встретит персонаж с главной страницы. Сейчас он задумчиво прогуливается по 404-й и ждет фикса...
А некоторые сайты предлагают целую блок-схему действий для тех, кто попал на страницу с ошибкой. Отличный пример — сайт «Orangecoat».
Страница «9GAG» обыгрывает ошибку 404, используя популярные мемы.
И ещё один пример — сайт «Discord». Здесь вы не только увидите анимацию с робото-хомяком, который старательно чинит страницу, но и полезные ссылки с очень креативным текстом для поднятия настроения!
⌘⌘⌘
Идеальной формулы для страницы 404, конечно, не существует. Всё индивидуально и зависит от конкретного бизнеса — будьте креативными, но и не забывайте о пользе для посетителя сайта.
Подписывайтесь на рассылку нашего блога — впереди ещё больше интересных статей и вдохновляющих подборок 💙.
Один способ позволяет отслеживать каждую деталь изделия, другой – сфокусироваться на брендинге и маркетинге. Разбираемся…
Рассказываем, как помогли российскому разработчику систем аналитики мигрировать в частное облако и сократить затраты на…
Рассказываем, как создать сайт-визитку и какой должна быть структура. Внутри — инструкция, которая поможет предпринимателям.
Онлайн-карты — хорошая площадка для привлечения аудитории в бизнес. Рассказываем об инструментах продвижения в геосервисах.
Можно стартовать с багажом знаний из найма или практически без опыта. Рассказываем, что нужно делать:…
Что такое наука о данных, чем занимается Data Scientist и можно ли обучиться этой специальности…