Страница 404: Что это такое и зачем она нужна?

404 (или «Not Found») — это HTTP-код ошибки, который сервер возвращает, когда запрашиваемая страница не найдена. Соединение установлено, но контента по этому адресу нет. Страница могла быть удалена, перемещена, или пользователь просто ошибся в адресе.

404-я страница сайта Locomotive

Звучит как техническая мелочь. На деле же, критически важная точка контакта с пользователем. Baymard Institute в своих юзабилити-тестах зафиксировали: когда пользователи сталкивались с ошибками и недоступными страницами, практически все тестируемые прерывали покупку. Для e-commerce это особенно критично: потерянная страница нередко означает потерянную продажу.

Многие дизайнеры упускают этот момент или сознательно игнорируют его, считая второстепенным. Это ошибка. Согласно первой эвристике Якоба Нильсена, система всегда должна информировать пользователя о своём состоянии. Страница 404 — это именно такой случай: пользователь потерялся, и интерфейс обязан показать ему верную дорогу. Проектировать 404-е так же важно, как и страницу каталога, в качестве примера вот 404-я страница из проекта нашей студентки, который она делала в раммках курса UX/UI дизайнер.

404-я страница студентки Академии

Креатив на 404-х страницах

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

Креативная 404-я интерфейса Base

Для дизайнеров это отличный повод проявить креативность. Interaction Design Foundation формулирует это так: удачная 404-страница превращает неудобство в позитивный опыт. Вот что хорошо работает на практике:

Юмор и самоирония. Любой юмор, например, анимированный персонаж, который «не нашёл» страницу вместе с пользователем, сгладит ощущение ошибки. Главное, соответствовать тональности бренда. Про тональность бренда мы рассказывали в одной из наших статей, а так же про UX-writing мы сняли подробное видео. 

404-я страница интерфейса Shopify

Знакомые персонажи и мемы. GitHub исторически использует персонажа Octocat в неожиданных ситуациях прямо на 404, это создаёт мгновенное узнавание у разработчиков. Пользователь переключается с раздражения на улыбку.

Маскот Github на 404-й странице сервиса

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

404-я страница интерфейса LEGO

Смена tone of voice. Переведите страницу с серьёзного на шутливо-иронический регистр. Это создаёт производит впечатление и снижает вероятность, что пользователь закроет вкладку в раздражении.

Hims использует ироничную метафору на своей 404-й

Подсказываем выход

Юмор это хорошо, но недостаточно. Хорошая страница 404 не просто развлекает, она помогает решить проблему. И здесь начинается настоящая UX-работа.

404-я страница интерфейса Zoox

Исправьте ошибку, если это возможно

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

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

Предложите понятный следующий шаг

Кнопка «Вернуться на главную» самое распространённое решение, но далеко не всегда верное. Если пользователь пришёл искать конкретный товар, отправить его на главную, значит потерять его на пути к покупке.

Интерфейс Metalab предлагает несколько вариантов на своей 404-й

Думайте о контексте. Для интернет-магазина логичнее вести в каталог или показать популярные категории. Для блога — предложить три свежих материала. Для сервиса — ссылку на раздел помощи или чат поддержки.

Добавьте навигацию или поиск

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

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

Прежде чем считать работу завершённой, проверьте:

• Страница соответствует общему стилю и тональности сайта
• Есть чёткое, понятное объяснение, что пошло не так
• Предложен минимум один конкретный следующий шаг (кнопка, ссылка, поиск)
• Нет технического жаргона, только человеческий язык
• Визуал поддерживает настроение, а не просто заполняет место
• На мобилках страница выглядит так же хорошо, как на десктопе

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

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