Работа над ошибками или красивые страницы 404
Что делают пользователи, когда видят на сайте ошибку 404? Недоумевают и покидают ресурс. Но этого можно избежать, сгладив негатив — нужно лишь добавить изюминку в страницу ошибки, сделав её красивой и интересной. Показываем, как.
Автор: Ксения Прялухина. Младший редактор Mailfit
Пользователи часто видят ошибку 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 страница об ошибке выдаёт кое-что поинтересней:
Что-то на диджитально-хаосном.
Slack
Когда попал не на ту страницу и не разочаровался. Симпатичный пейзаж, согласитесь.
Mailchimp
Мы всё потеряли. Конечно, есть вопросики: почему потерянную страничку ищет лошадь, а не маскот бренда — обезьяна в шляпе почтальона, но всё равно классно.
Mailfit Agency
У нас — тоже история со ссылкой на главную страницу сайта. Ведь нам важно, чтобы пользователи никуда не терялись 😉