Блог Вдохновение
20 минут на чтение
787
0

Работа над ошибками или красивые страницы 404

20 минут на чтение
787
0

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

Пользователи часто видят ошибку 404, либо Error 404 Not Found [ошибка 404, не найдено, англ.]. Это происходит, если браузер не обнаружил на сервере указанный URL.

В целом, это классический код ответа по протоколу HTTP. Он означает, что связь с сервером установлена, но информации по заданному запросу нет.

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

Бренды идут дальше, и подстраивают дизайн страницы 404 под оформление сайта. Они наполняют её полезной информацией, или, по крайней мере, пытаются повеселить заблудившегося пользователя, иногда удивляя своей креативностью.

И мы как раз собрали несколько интересных примеров.

Figma

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

Просто, если хочется навести суету.

Netflix

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

Marvel

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

Ещё одна интересная фишка: страница ошибки меняется при каждом новом открытии:

Pixar

Оооуу! Очаровательный персонаж улыбает и на даёт расстроиться даже тем, кто не нашёл того, что искал.

20th Century Studios

Кинокомпания на даёт заскучать даже на странице ошибки: тематическое ч/б с упоминанием Франкенштейна только поднимает настроение. Суперлайк.

А если страничку прокрутить чуть ниже, можно сразу увидеть рекомендованные фильмы. И искать ничего не нужно:

LEGO

Ну что ж, мы и не переживаем 🙂 А отлично подобранная минифигурка добавляет странице антуража.

Krakatau

Интересный приём — закинуть на 404 страницу четыре новинки. Стильно, одобряем.

GYM BOX

404, на которую можно смотреть бесконечно.

S7

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

Turkish Airlines

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

Tripadvisor

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

А вот на русском сайте почему-то потерялся не только URL, но и смысл… А жаль:

Skyscanner

Минималистично, но очень в тему — ведь именно на Skyscanner пользователи ищут пути побега из реального мира прямиком в отпуск. 

Airbnb

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

McDonalds

На наш взгляд, как-то ну слишком просто. Хотя, английская версия сайта тоже не может похвастаться каким-то интересным креативом — может, у бренда такой стиль?

Burger King

А вот у ребят из Burger King страница ошибки выглядит симпатичнее: цифра 404, выложенная помидором и картошкой фри. Кнопка на меню прилагается.

SETTERS

Здесь всё довольно банально — симпатичное привидение и подсказка о том, что такой страницы не существует или пользователь ввёл неверный адрес.

А вот у Setters Education страница об ошибке выдаёт кое-что поинтересней:

Что-то на диджитально-хаосном.

Bang Bang Education

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

Slack

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

Mailchimp

Мы всё потеряли. Конечно, есть вопросики: почему потерянную страничку ищет лошадь, а не маскот бренда — обезьяна в шляпе почтальона, но всё равно классно.

Mailfit Agency

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

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

ПОЛУЧИЛОСЬ!
Скоро вы начнете получать нашу рассылку