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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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