Страница ошибки 404: зачем она нужна и как ее оформить

Зачем продумывать дизайн страницы 404

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

Хорошая страница 404 решает сразу две задачи:

• понятно объясняет пользователю, что произошло;
• удерживает внимание пользователя и помогает ему продолжить путь, — например, перейти на главную страницу, воспользоваться поиском или открыть популярные разделы сайта.

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

Что писать на странице 404

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

Избегайте фраз, которые полностью перекладывают ответственность на пользователя, например: «Вы ввели неправильный адрес». Даже если это действительно так, подобные формулировки могут вызывать раздражение.

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

Можно добавить юмора, если это соответствует tone of voice бренда. Шутка помогает сгладить негатив от ошибки и сделать страницу запоминающейся. 

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

Формулировки могут различаться в зависимости от типа сайта. Для медиа подойдет вариант: «Похоже, эта статья уже недоступна. Вернитесь на главную страницу и почитайте другие наши материалы».  А интернет-магазин может написать: «Товар или страница не найдены. Вернитесь в каталог и продолжите покупки». 

ЧИТАЙТЕ ТАКЖЕ:

Что такое интерфейс: виды и основные принципы

Идеи дизайна страницы 404: от маскотов до игр

Фирменные иллюстрации

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

Например, студия Pixar использует на странице персонажей из мультфильмов, чтобы сохранить связь с ее вселенной и эмоциональным языком бренда.

404 с маскотом

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

Например, маскот Octocat (кото-осьминог) у репозитория Github грустно сообщает, что такой страницы не существует, в виде отсылки на знаменитую фразу Оби-Ван Кеноби «Это не те дроиды, которых вы ищете». Дизайнеры добавили на страницу поисковую строку, чтобы пользователь не расстраивался, а мог тут же найти нужный проект или код.

Шутки и анимация

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

Интерактив и игры

Игра помогает удержать внимание пользователя и сделать страницу более запоминающейся. Один из самых известных примеров —  динозаврик Дино от Google, который появляется, когда у пользователя пропадает интернет.

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

Предложение товаров и услуг

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

Например, строительный магазин Лемана Про предлагает пользователю поискать другие товары или купить изоленту.

Статьи и другие полезные материалы

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

ПСЖР — медиа сервиса Aviasales — сообщает пользователю, что страница уехала на соревнования по вуду-рестлингу. И советует прочитать статью о путешествии в Конго.

А Т-Ж, медиа Т-Банка, предлагает почитать другие статьи в журнале.

Чек-лист хорошей 404-страницы

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

• С первого взгляда понятно, что страница не найдена.
• Сообщение написано простым и дружелюбным языком без технических терминов и обвинений пользователя в том, что он сделал что-то не так.
• Есть понятный следующий шаг: кнопка перехода на главную страницу, в каталог, блог или личный кабинет.
• Пользователь не теряет доступ к навигации, поиску и важным разделам сайта.
• Текст и визуальный стиль соответствуют tone of voice бренда.
• Иллюстрации, анимация или юмор помогают коммуникации, а не отвлекают от нее.