Страницы ошибок: анализируем лучшие примеры

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

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

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

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

От юмора до креативного дизайна — продуманная страница ошибки способна преобразовать тупик в возможность.

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

1. Ahrefs

«Упс, этой страницы не существует. Ссылка, которая привела вас сюда называется “битой”. Вы можете проверить, сколько таких ссылок имеется на вашем сайте при помощи нашего бесплатного инструмента [ссылка]».

Страница ошибки Ahrefs получилась привлекательной и функциональной, ее дизайн и тон соответствуют характеру бренда.

Иллюстрация отражает ощущение потерянности, которое возникает, когда человек попадает на страницу 404, а четкое сообщение объясняет проблему и предлагает решение. Полезный CTA (Broken Link Checker) подсказывает следующий шаг, поддерживая вовлеченность пользователей.

Что можно улучшить:

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

2. Airbnb

«Упс! Кажется, мы не можем найти страницу, которую вы ищете. Вот несколько полезных ссылок в качестве альтернативы: [...]».

Страница ошибки Airbnb отличается минималистичным дизайном и обилием негативного пространства.

‍Дружелюбная иллюстрация изображает разочарование в забавной и доступной форме. Список ссылок (Главная, Поиск, Помощь и т.д.) помогает пользователям быстро сориентироваться и переместиться в нужный раздел.

‍Что можно улучшить:

Сделать призыв к действию более четким, чтобы заинтересовать пользователей.
Добавить функцию поиска, чтобы сделать навигацию более гибкой.

3. Asana

«Этой страницы не существует. Но вы существуете. Это знак, что пора сделать перерыв. И глубокий вдох. И еще раз. Когда вы будете готовы, возвращайтесь к работе».

Asana выбирает осмысленный подход, который выделяется на фоне других.

Уникальное сообщение делает опыт более человечным и демонстрирует заботу о пользователях. Это креативный способ минимизировать их разочарование. Полезные ссылки (Вернуться к задачам, Изучить руководство, Читать блог, Проверить статус) располагаются на видном месте в нижней части экрана.

‍Что можно улучшить:

Выбрать менее абстрактную графику, которая имеет непосредственное отношение к бренду или контексту.

4. Atlassian

«Извините, страница, которую вы искали, не найдена. Перейдите на главную страницу, обратитесь за помощью или воспользуйтесь полем поиска».

Страница ошибки Atlassian эффективно помогает пользователям вернуться к решению своих задач.

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

‍Что можно улучшить:

Добавить несколько привлекательных визуальных элементов, чтобы нивелировать разочарование пользователей.

5. Awwwards

Страница ошибки Awwwards выглядит впечатляюще и соответствует специфике бренда.

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

Что можно улучшить:

Сделать сообщение более понятным и полезным для пользователей.

6. Behance

*«Упс! Мы не можем найти эту страницу. Почему бы не посмотреть наши лучшие проекты и курируемые подборки?».*

Лаконичная страница ошибки Behance сводит к минимуму негативные эмоции пользователей, предлагая им альтернативные опции.

Попав сюда, люди видят четкое понятное сообщение и ссылки на различные категории проектов (3D, UI/UX, Архитектура и т.д.). Чистый профессиональный дизайн вызывает доверие и вписывается в общий стиль.

‍Что можно улучшить:

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

7. Canva

«Извините, страницы, которую вы ищете, не существует. Пожалуйста, посетите раздел [Помощь], чтобы получить больше информации. [Вернуться на главную страницу]».

Страница ошибки Canva отличается простотой, но при этом содержит все необходимые ссылки.

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

‍Что можно улучшить:

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

8. Cards Against Humanity

*«Упс! Этой страницы не существует. А пока вы можете посмотреть эти карточки, сгенерированные нашим AI».*

Страница ошибки Cards Against Humanity (карточной игры) наполнена юмором и отлично сочетается с дерзкой индивидуальностью бренда.

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

Что можно улучшить:

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

9. Clickup

*«Упс! Что-то не так. Страница, которую вы ищете, отсутствует. Мы создали задачу, чтобы это исправить».*

Страница ошибки ClickUp — пример более функционального подхода.

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

Что можно улучшить:

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

10. Dashthis

*«Нельзя просто так взять и зайти на страницу 404… Потому что, ну вы понимаете, кольцо всевластия и всё такое».*

DashThis может похвастаться по-настоящему креативной тематической страницей 404.

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

Что можно улучшить:

Сделать доступные опции более заметными.
Добавить силуэту Мордора анимированное свечение или эффект мерцания, чтобы еще больше подогреть интерес аудитории.

11. Headspace

«Упс! Что-то изменилось. Прежде чем продолжить, давайте немного подышим. Вы готовы? Глубокий вдох. А теперь выдох».

Спокойный, дружелюбный тон страницы ошибки Headspace соответствует характеру бренда (приложение для медитаций).

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

Что можно улучшить:

Добавить поле поиска, чтобы пользователи могли найти нужный контент.

12. Lego

«О чертовы кирпичи! Мы не можем найти эту страницу. Мы постараемся не терять голову, но если и потеряем… вернем ее на место».

Страница ошибки LEGO с вымышленным ругательством «Oh Bricks!» и встревоженной фигуркой отражает игривый стиль бренда.

Остроумный текст вызывает у пользователей улыбку, а заметная кнопка «Вернуться на главную страницу» позволяет быстро сориентироваться в интерфейсе. Узнаваемые элементы фирменного стиля LEGO — яркий желтый фон и знакомый шрифт — делают дизайн согласованным и последовательным.

Что можно улучшить:

Добавить ссылку для обращения в службу поддержки или опцию «Сообщить о проблеме».

13. Magnt

*«Упс… Кажется, вы потерялись в пространстве».*

Страница ошибки Magnt сочетает в себе фирменный стиль бренда, юмор и хороший UX, что делает ее запоминающейся и эффективной.

Справа размещена шуточная диаграмма Венна (либо мы что-то сломали, либо вы не умеете печатать), которая делает опыт менее серьезным и негативным. Яркий красный фон соответствует фирменному стилю и притягивает взгляд, а большая кнопка «Назад на главную» позволяет пользователям в один клик вернуться к отправной точке.

Что можно улучшить:

Добавить поле поиска или ссылки на популярные разделы.

14. Marvel

«Даже глаз Уату не видит то, что вы запрашиваете… Проверьте, правильно ли вы напечатали URL-адрес, вернитесь на предыдущую страницу или воспользуйтесь поиском».

Страница 404 Marvel — пример погружения во вселенную бренда, юмора и функциональности.

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

Что можно улучшить:

Добавить встроенную строку поиска прямо на страницу (сейчас она располагается в правом верхнем углу).

15. Medium

«Нечто из ничего. Вы можете найти на Medium (практически) всё — даже страницу, которой не существует. Возможно, эти истории откроют для вас что-то новое?»

Эффективная страница ошибки Medium — сочетание голоса бренда и функциональных элементов.

Минималистичный дизайн делает страницу визуально привлекательной и последовательной. Заголовок «Нечто из ничего» согласуется с литературным стилем Medium и добавляет поэтическую нотку, смягчая разочарование от ошибки. Показывая рекомендованные статьи, платформа превращает проблему в возможность и побуждает пользователей изучать новый контент.

Что можно улучшить:

Показывать рекомендованные статьи на основе предыдущей активности (для авторизованных пользователей), чтобы повысить вовлеченность.
Деликатная графика могла бы сделать страницу визуально интерактивной.

16. Netflix

*«Заблудились? Извините, мы не можем найти эту страницу. Вас ждет множество интересных материалов на главной».*

Страница 404 Netflix вписывается в единую концепцию бренда благодаря тематическому, кинематографическому подходу.

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

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

Что можно улучшить:

Добавить ссылки на популярные категории или персонализированные рекомендации.
Не показывать код ошибки в таком формате.

17. Pixar

«Ошибка 404! Не волнуйся, никто не знает, что означает “404”. Но не бойся, всё будет хорошо. Просто нажми на стрелку «Назад», она должна быть где-то сверху».

‍Восхитительная страница ошибки Pixar с персонажем в главной роли полностью отражает ценности бренда — веселье и простоту.

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

Что можно улучшить:

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

18. Reddit

*«Страница не найдена. Страницы, которую вы ищете, не существует».*

Игривая и запоминающаяся страница 404 Reddit согласуется с непринужденным шутливым тоном бренда.

Маскот платформы, инопланетянин Сну, парящий среди звезд и планет, добавляет дизайну юмора и индивидуальности. Иллюстрация создает впечатление, что страница «затерялась в космосе» и делает опыт более увлекательным. В футере располагаются ссылки на другие разделы сайта — «О Reddit», «Помощь», «Приложения и инструменты».

Что можно улучшить:

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

19. Semrush

«Мы потерялись. Кажется, этой страницы не существует. Попытайтесь вернуться назад или кликнуть по кнопке ниже, и мы перенесем вас домой [ссылка на домашнюю страницу]».

Страница 404 SEMrush отличается юмором, удобством и понятной навигацией.

Забавное изображение коровы, которую похищает НЛО, делает страницу запоминающейся и креативной. Четкое лаконичное сообщение смягчает разочарование от столкновения с ошибкой, а яркая CTA-кнопка предлагает простое и очевидное решение проблемы.

Что можно улучшить:

Добавить поле поиска или ссылки на помощь/поддержку.
Показывать авторизованным пользователям недавно просмотренные или рекомендованные страницы.

20. Slack

«Произошел сбой… Мы не знаем, что именно пошло не так. Вы можете вернуться назад или попытаться найти ответ на свой вопрос в нашем Справочном центре».

Основа страницы ошибки Slack — эффектный визуал и правильный тон голоса.

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

Что можно улучшить:

Добавить на страницу поле поиска.

21. Spotify

«Мы не нашли страницу, которую вы искали. Может быть, вам стоит обратиться за помощью в раздел FAQ или Сообщество?»

Страница ошибки Spotify удерживает внимание пользователей с помощью интересного дизайна и юмора.

Виниловая пластинка и заголовок «404s and heartbreaks» (отсылка к названию альбома Канье Уэста «808s & Heartbreak») показывают, что мы имеем дело с музыкальной стриминговой платформой. Они добавляют в дизайн юмора и индивидуальности. Мягкий розовый оттенок фона и обилие негативного пространства делают страницу чистой и эстетичной. Ссылки на разделы FAQ и Сообщество предоставляют пользователям прямой доступ к справочным материалам.

Что можно улучшить:

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

22. Uber

«Извините, мы не смогли найти эту страницу. Мы кое-что изменили, и, возможно, ваша страница потерялась. Попытайтесь заново набрать нужный URL-адрес или вернитесь на главную страницу».

Страница 404 Uber — минималистичная и функциональная с четкими инструкциями.

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

Что можно улучшить:

Добавить акцентную кнопку «Перейти на главную».
Добавить анимацию (например, мигающий красный или едва заметное изменение цвета), чтобы сделать страницу более интересной.

23. WhatsApp

*«Вы попали на страницу 404. Не волнуйтесь! Мы поможем найти то, что вам нужно».*

Эффективная и привлекательная страница ошибки WhatsApp использует привычный лейаут чата и дружелюбный тон.

Пузырьки сообщений и эмодзи делают опыт знакомым и комфортным. Мультяшное лицо справа добавляет в дизайн нотку юмора. Кнопка Return Home позволяет быстро исправить ошибку и переместиться на главную страницу.

Что можно улучшить:

Добавить интересные взаимодействия, например анимировать эмодзи или пузырьки сообщений, чтобы повысить вовлеченность.

24. Zoom

*«Ой! Кажется, мы не можем найти страницу, которую вы искали. Позвольте нам помочь вам вернуться к работе».*

Полезная и профессиональная страница ошибки Zoom помогает пользователям двигаться дальше.

Страница приветствует посетителей дружелюбным междометием «Ой!», что сразу разряжает обстановку и задает неформальный тон. Ниже размещаются ссылки на важные разделы и функции — «Присоединиться к встрече», «Загрузить приложение Zoom» и «Читать блог». Изображение человека, работающего за ноутбуком, обеспечивает нужный контекст, подчеркивая цели компании — развитие виртуальной коммуникации и повышение продуктивности.

Что можно улучшить:

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

Спасибо за внимание!

Больше классных проектов в uprock.design

Источник

Medium