Блог AMEA-Marketing

Гайд по страницам 404: как создать и улучшить

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

Что такое страница 404

Страница 404, также известная как 404 not found page, представляет собой веб‑страницу, которую сервер отображает в случае, когда пользователь пытается зайти на несуществующий URL‑адрес или когда запрошенная страница не может быть найдена.
Код ошибки 404 — это одно из стандартных сообщений об ошибках в системе кодов состояния HTTP. Этот номер указывает на конкретную проблему, с которой столкнулся пользователь.
Владельцы сайтов обычно надеются, что их пользователи никогда не увидят страницу с ошибкой 404. Однако жизнь полна неожиданностей, и всё может пойти не так, как планировалось. Поэтому стоит подготовить профессиональную страницу с ошибкой 404 на всякий случай.

Почему пользователи попадают на страницу с ошибкой 404

Обычно это происходит случайно, если только кто‑то не ищет страницы с ошибками, чтобы использовать их в качестве примера в продвинутом руководстве по страницам ошибок 😉

Опечатка в URL‑адресе

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

Неработающие ссылки

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

Попытки попасть на несуществующую страницу

Если посетители вашего сайта пытаются найти страницу, которая больше не существует (например, страницу сезонной кампании, которую вы удалили, как только она стала неактуальной), ваш веб‑сервер должен отобразить сообщение об ошибке 404, чтобы уведомить их и перенаправить на другую страницу.

Почему страницы 404 так важны для сайтов

Страницы 404 нужны, чтобы помочь посетителям, которые заблудились на сайте, вернуться на главную или альтернативную страницу, где они смогут найти нужную информацию.
Однако функции и значение страницы 404 выходят далеко за эти рамки, обеспечивая сайту множество других преимуществ. Вот некоторые из них.
1.Управление недовольством пользователей
Люди хотят легко переходить на нужные сайты, и, если они попадают на неработающие или несуществующие URL‑адреса, это может вызвать у них серьёзное разочарование.
Это разочарование может перерасти в недовольство вашим брендом и его присутствием в интернете, что, в свою очередь, может привести к тому, что в будущем посетители будут выбирать сайты ваших конкурентов.
2.Перенаправление пользователей обратно на ваш сайт
Неважно, куда именно — на главную страницу или куда‑то ещё, ваша цель — удержать пользователей на вашем сайте, а не заставить их уйти.
В контексте электронной коммерции и даже омниканального бизнеса это особенно важно. Пользователи не будут конвертироваться, если они не смогут найти страницы, на которых смогут сравнить товары, узнать о вашем бизнесе и нажать на важную кнопку «Добавить в корзину».
3.Повышение коэффициента удержания клиентов
Хорошее впечатление от вашего сайта имеет огромное значение для удержания клиентов и формирования лояльности к вашему бренду среди целевой аудитории. Если люди сталкиваются с медленной загрузкой или сообщениями об ошибках, это может привести к разочарованию и, как следствие, к снижению продаж.
Это не просто домыслы. Улучшение основных показателей вашего сайта — это один из ключевых элементов успешной стратегии поисковой оптимизации.

Лучшие примеры 404‑страниц

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

Mailchimp

Многие считают 404‑ю страницу Mailchimp образцом простого и энергичного дизайна.
404 MailChimp
Она сочетает в себе простоту и эффективность: на ней изображена лошадь, которая пытается найти выход из норы, что символизирует поиск потерянной страницы. Оригинально, что текст напрямую обращается к посетителям, которые сбились с пути, и обещает им, что они смогут вернуться на главную страницу всего лишь одним щелчком мыши.
Совет по улучшению:
Чтобы усилить соответствие бренду, было бы неплохо заменить лошадь на обезьяну (Chimp — Chimpanzee, шимпанзе).

Tripadvisor

На сайте Tripadvisor страница с ошибкой 404 произвела фурор. Она простая и в то же время убедительная. Эта страница объясняет пользователям, что страница, которую они искали, потеряна, но это не их багаж, и это нормально!
404 Tripadvisor
С точки зрения пользовательской навигации эта страница соответствует всем требованиям. На ней есть ссылки на целевые страницы основных категорий и строка поиска, что позволяет посетителям легко перейти от страницы с ошибкой к пункту назначения своей мечты.
Совет по улучшению:
Не сразу понятно, что эта страница — это ошибка 404. Небольшая деталь на чемодане могла бы помочь пользователям понять, о чём идёт речь.

Vans

Компания Vans отлично справилась со своей страницей с ошибкой 404, не упустив ни одного нюанса.
Дизайнеры веб‑страницы Vans учли стиль бренда и интересы его целевой аудитории. Они создали несколько забавных каламбуров, связанных со скейтбордингом, сохраняя при этом остроумие.
404 Vans
Навигация на этой странице продумана до мелочей. Пользователи могут легко вернуться на главную страницу, перейти к основным линейкам продукции, нажав на стилизованные иконки, и даже подписаться на рассылку новостей Vans по электронной почте, чтобы получать специальные предложения.
Совет по улучшению:
Чтобы добавить на страницу немного динамики, можно анимировать скейтбордиста, который пытается выполнить олли или кикфлип (трюки в скейтбординге), но терпит неудачу.

Screaming Frog

Screaming Frog — это инструмент, который SEO‑специалисты и владельцы сайтов используют для поиска и устранения неработающих ссылок (и который можно заменить Анализом сайта 😉). Поэтому довольно иронично, что он попал в подборку лучших 404‑страниц в интернете.
404 Screaming Frog SEO Spider
Однако этот сайт использует иронию в своих интересах, признавая, что иногда не может справиться с той самой проблемой, которую призван решать! Наряду с юмористическими элементами, дизайн страницы соответствует бренду: на ней изображён пруд с кувшинками, по воде которого идёт рябь. Бонусные очки за анимированный фон!
Совет по улучшению:
С точки зрения удобства использования (UX), текст на этой странице может быть немного трудно читать из‑за синего и зелёного фона. Screaming Frog мог бы улучшить свою страницу 404, изменив расположение центральной лилии и используя более крупный шрифт, чтобы сделать текст более читабельным.

Lego

Дизайнеры страницы 404 Lego превзошли себя, создав идеальное сочетание юмора и актуальности бренда. Создаётся впечатление, что маленький строитель тянется к экрану компьютера!
404 Lego
Один из лучших элементов — надпись под заголовком:
«Мы не можем найти эту страницу. Мы постараемся не потерять голову из‑за этого, но если это произойдёт... мы вернём её на место».
Это забавно, легкомысленно и полностью соответствует духу бренда Lego.
Совет по улучшению:
Эта страница превосходна, но её можно было бы сделать ещё лучше, добавив анимированного персонажа в тему выхода бренда в кино. Было бы круто увидеть, как эта фигурка бегает!

Pixar

Как и в случае с Lego, на странице 404 от Pixar мы встречаем персонажа из блокбастера «Головоломка» — Печаль. Этот персонаж олицетворяет чувство растерянности, которое может возникнуть у посетителя, когда он попадает на страницу с ошибкой.
404 Pixar
Несмотря на комичность страницы, она остаётся ясной и информативной. Чёрный текст с засечками остаётся очень чётким на белом фоне, что делает его ещё более привлекательным для глаз.
Совет по улучшению:
На странице отсутствуют ссылки, что лишает пользователей возможности вернуться на сайт. Кнопка на главную страницу или строка поиска могли бы действительно помочь пользователю справиться с этими чувствами.
Кроме того, Pixar могли бы менять персонажей на странице, чтобы выделить разные фильмы или прорекламировать новые релизы.

Christmas Tree World

Страница ошибки Christmas Tree World действительно превосходна.
404 Christmas Tree World
Каламбуры, изображение, извиняющийся, но в то же время непринуждённый тон текста и ссылки на другие страницы сайта — всё это помогает посетителям, которые заблудились, вернуться на Северный полюс в поисках идеальных рождественских украшений.
Совет по улучшению:
Текст мог бы быть немного крупнее, чтобы сделать его более доступным.

Tim Hortons

Когда речь заходит о понятных сообщениях, Tim Hortons занимает первое место (и в списке пончиков, конечно). Сообщение об ошибке 404 абсолютно ясно, а забавный штрих в виде пончика для цифры 0 поддерживает атмосферу веселья.
404 Tim Hortons
Совет по улучшению:
Хотя остроумный каламбур в тексте под заголовком неплох, сам текст мог бы лучше контрастировать с белым фоном. Кроме того, ссылка на главную страницу помогла бы пользователям вернуться на сайт.

Sandals

Второй туристический бренд в этой линейке — Sandals.
404 Sandals
Как и Tripadvisor, Sandals решил использовать забавную шутку о путешествиях, чтобы сделать свою страницу 404 более весёлой и развеять разочарование пользователей.
Фоновое изображение расслабляет и пробуждает вдохновение для путешествий.
Совет по улучшению:
Хотя ссылка на карту сайта, вероятно, была введена из лучших побуждений, она может перегрузить пользователей, предлагая им слишком много информации. Не стоит поддаваться парадоксу выбора, предоставляя посетителям слишком много вариантов для выбора.

Waterstones

Если бы существовал приз за самую полезную страницу 404, Waterstones, безусловно, был бы одним из главных претендентов на него.
404 Waterstones
Открытая книга с двумя страницами, на которых указаны номера 404 и 405, — это отличный способ привлечь внимание к основному ассортименту бренда и добавить немного веселья в дизайн страницы.
Особенно приятно, что дизайнеры Waterstones включили в страницу цитаты из книг, связанные с темой потери или одиночества. Это прекрасный способ продвигать тематические издания и создавать контент, который будет особенно близок посетителям сайта, увлечённым чтением.
Совет по улучшению:
Хотя это может потребовать некоторой доработки, интерактивный элемент на этой странице 404 мог бы вывести её на новый уровень. Пользователь мог бы листать страницы книги, чтобы прочитать больше цитат и изучить названия, что добавило бы уникальности и позволило бы ему оставаться вовлечённым.

Trivago

И наконец, Trivago. Да, ещё один туристический бренд. Кажется, такие компании действительно знают своё дело, когда речь заходит о страницах с ошибками 404.
404 Trivago
Это сообщение об ошибке не только простое, но и весьма эффективное. Оно сообщает: «Вы попали в отель 404», а затем поясняет: «Этот отель для потерянных страниц, а не для людей. Попробуйте новый запрос, чтобы найти подходящий для вас отель». Таким образом, пользователь сразу понимает, что находится не на той странице сайта Trivago.
Текст соответствует стилю бренда, а кнопка поиска позволяет посетителям продолжить планирование отпуска одним простым нажатием.
Совет по улучшению:
Trivago мог бы добавить больше приколов на эту страницу, например, анимировав фигурку или сделать графику отеля похожей на полуразрушенный мотель с мерцающими огнями. Также можно разместить виджет чата для поддержки клиентов или даже ссылки на страницы направлений.

Русскоязычные примеры страниц 404

Покажем несколько удачных примеров из Рунета.
Лайфхакер отправляет пользователя читать другие статьи на сайте. У страницы сохранены верхнее меню и футер, благодаря чему легко вернуться на главную. Кстати, на 404 странице Лайфхакера всё ещё есть контекстная реклама, так что даже с этой страницы они зарабатывают.
404 Лайфхакера
То же самое у Тинькофф‑Журнала, только без рекламы. Цифры 4, 0 и 4 образуют грустный смайл:
404 Т-Ж
У Топвизора сохранены верхнее меню и футер, а сама страница перенаправляет на главную через 30 секунд, так что если пользователь не закроет 404 страницу, он точно попадёт обратно на сайт.
404 Топвизора

Ключевые элементы лучших страниц 404

Не существует единого подхода к оформлению страницы с ошибкой 404, но есть несколько ключевых элементов, которые способны превратить эту страницу в настоящий шедевр и обеспечить превосходный пользовательский опыт, несмотря на непростую ситуацию.
1.Строка поиска — не стоит принимать всё решения за своих пользователей. Позвольте им самим выбирать, куда двигаться дальше, добавив строку поиска.
2.Ссылки на другие страницы — ошибка 404 не обязательно должна быть концом пути. Включив ссылки на другие страницы вашего сайта, вы можете сделать посещение страницы 404 мимолётным и предотвратить возвращение пользователей в поисковик.
3.Чёткое сообщение об ошибке — если вы знаете, где находитесь и как отсюда выбраться, то стоит ли беспокоиться? Сообщите посетителям, что они попали на страницу, которая исчезла, и дайте им решение, как можно исправить ситуацию.
4.Удобный доступ к основным элементам сайта — старайтесь сохранить как можно больше ключевых компонентов вашего сайта, включая шапку и нижний колонтитул (футер). Они будут знакомы пользователю и помогут ему быстрее сориентироваться на сайте.
5.Контактная информация — укажите, как люди могут связаться с вашей службой поддержки, разместив информацию в футере или предоставив ссылку на специальную страницу контактов.
6.Окно чата поддержки — не обязательной, но приятной функцией является окно чата, в котором пользователи могут задавать вопросы или запрашивать дополнительную информацию о вашем бренде.

Как создать безупречную страницу 404

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

Обратите внимание на юзабилити

Чтобы предотвратить разочарование и сохранить посетителей на сайте, важно задуматься о пользовательском опыте (UX) страницы с ошибкой 404. Убедитесь, что контент доступен, инклюзивен (его могут просмотреть пользователи с ограничениями здоровья) и соответствует остальному сайту.
Сделайте страницу удобной для восприятия и навигации.

Сохраняйте индивидуальность вашего бренда

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

Используйте юмор, но с умом

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

Помните о предзятости негативного опыта

Важность создания эффективных страниц ошибок 404 становится особенно очевидной, если учесть один из ключевых принципов маркетинговой психологии — предвзятость негативного опыта.
Этот принцип гласит, что как хрупкие и эмоциональные существа мы, люди, склонны больше помнить о негативном опыте, чем о позитивном. Применительно к веб‑сайтам это означает, что пользователи будут помнить о разочаровании, которое они испытали на странице, гораздо дольше, чем о приятных моментах. Поэтому крайне важно разрядить любую напряжённость, где это возможно.
___________________
Источник: https://journal.topvisor.com/ru/practice/404-pages-tips-and-examples/
#на_главную Статьи_2