Ошибка 404 — это сигнал о неудачной попытке открыть что-то на сайте. Она возникает, когда пользователь вводит некорректный адрес или переходит по ссылке, которая была удалена, но осталась в поисковой индексации.
«Страница не найдена» — явно не то, что хочет увидеть посетитель веб-ресурса при выборе обуви, бытовой техники или фильма. Около 74% пользователей, которые сталкиваются с ошибкой 404, покидают сайт и не возвращаются. А потому важно настроить и оформить Error page так, чтобы удержать человека на веб-ресурсе.
Мы собрали 15 креативных примеров, которые помогут сделать «страницу 404» на вашем сайте интересной.
#1. «Страница 404»: кому и зачем она нужна
Страницу с ошибкой важно оптимизировать — она должна быть нестандартной и полезной для посетителя, чтобы не портить впечатление о компании. При правильном подходе месседж Page not found станет вашим преимуществом.
Вот еще несколько причин создать оригинальный дизайн такой страницы:
- Предотвратить все случайные ошибки невозможно — человек может ввести неправильный адрес, не найти нужной информации и уйти с сайта. Так вы потеряете потенциального клиента.
- Отследить все URL на веб-ресурсе тоже сложно: если на нем много страниц, то где-то могли поменять адрес, чтобы улучшить SEO, какой-то раздел удалить, не закрыв его от индексации в поисковой системе.
Спойлер: если на сайте много «страниц 404», откуда пользователи не могут перейти на главную или в другие разделы, позиции в органическом поиске снизятся. Оптимизированная страница ошибки помогает уменьшить показатель отказов веб-сайта — это важный сигнал для поисковых систем. А потому ее продуманный дизайн полезен для SEO.
Пример «страницы 404» lifestyle-бренда Oak
#2. Основные приемы создания «страницы 404»
1. Чтобы задержать пользователя на сайте, расскажите, почему человек попал на страницу с ошибкой 404. Например, раздел переместили по другому URL-адресу, удалили его или пользователь допустил опечатку в адресной строке.
«Страница 404» российского агентства digital-дизайна Outlane
2. Развлеките или рассмешите. Цель дизайна «страницы 404» — уменьшить растерянность пользователя. С этим хорошо справляются смешные фото, иллюстрации и анимации. ToV на странице зависит от позиционирования компании, но немного юмора точно не помешает.
«Страница 404» графического редактора Crello
3. Интегрируйте мини-игру. Интерактивные «страницы 404» — самые вовлекающие: они дольше всего задерживают пользователя на сайте и повышают вероятность покупки.
«Страница 404» разработчика программ для энергоменеджмента Innotech
4. Верните пользователя на сайт. Вы отвлекли посетителя смешной анимацией с котом или «залипательной» картинкой космоса — что делать дальше? Постарайтесь поскорее вернуть человека на рабочую страницу. Разместите ссылки для перехода на home page и в каталог товаров — или предложите обратиться за помощью в онлайн-чат.
Хотите получать дайджест статей?
Одно письмо с лучшими материалами за неделю. Подписывайтесь, чтобы ничего не упустить.
Спасибо за Вашу подписку!
5. Сохраните свой стиль. «Страница 404» — часть вашего сайта, поэтому она должна быть оформлена в соответствии с дизайном компании. Используйте привычные для клиентов цвета, типографику, графические элементы.
Лучший способ предотвратить попадание пользователя на страницу с ошибкой 404 — регулярно мониторить «битые ссылки». Проверяя раз в месяц статьи, визуальный контент и перемещенные по другому URL-адресу материалы, вы снизите вероятность посещения страницы Error 404. У Google и Яндекс есть бесплатные сервисы для SEO-специалистов, которые помогут найти нерабочие ссылки.
«Страница 404» австралийского дизайнерского агентства Swell Design Group
#3. 15 примеров креативных страниц с ошибкой 404
Мы собрали кейсы компаний, которые подошли к оформлению послания Page not found творчески и с юмором.
1. Spotify
«Страница 404» стримингового сервиса Spotify — отсылка к альбому Канье Уэста 808s and Heartbreak. На сайте пользователям предлагают обратиться в техподдержку, перейти в раздел FAQ или вернуться на страницу, с которой они перешли.
2. LEGO
На странице с ошибкой бренда конструкторов персонаж LEGO испуганно бежит в сторону экрана. Картинка сопровождается позитивным текстом, а также предложением перейти в магазин и продолжить покупки.
3. Pixar
Pixar изобразил мультяшную героиню из анимационного фильма «Головоломка» (Inside Out). На странице с ошибкой персонаж рыдает, а рядом можно увидеть слова «Оу, не плачь. Это всего лишь ошибка 404!», кнопки соцсетей и кликабельные ссылки для перехода в другие разделы сайта.
4. Gymbox
Gymbox — это тренажерный зал в Лондоне. На «странице 404» компании размещено анимированное изображение занятий по фитнесу в стиле 80-х, а также ссылки для перехода на страницу нужного зала или в другой раздел сайта.
5. Tripadvisor
«Страница 404» на сайте Tripadvisor сообщает: «Упс, кажется, мы потеряли эту страницу. Но не ваш багаж!». Месседж сопровождается анимацией катящегося чемодана и предложением выбрать один из разделов сайта: «Отели», «Рестораны», «Чем заняться» и «Аренда на время отпуска».
6. Disney
На странице с ошибкой развлекательного портала Disney изображен популярный персонаж Ральф из одноименного анимационного фильма, снятого Ричем Муром, который режиссировал «Симпсонов» и «Футураму». На странице также фигурирует Всезнайка, еще один персонаж из «Ральфа» (Wreck-It Ralph).
Внизу расположена панель поиска, а выше — доступные разделы сайта.
7. Mantra Labs
Разработчик AI-решений Mantra Labs изобразил космонавта, который удаляется в цифры 404. Картинку сопровождает текст «Упс! У вас закончился кислород. Страница, которую вы ищете, сейчас нам недоступна». Здесь же есть таймер, который ведет обратный отсчет до возвращения на home page.
8. The New Yorker
«Страница 404» американского издания The New Yorker оформлена в корпоративном стиле. На ней изображена мышь в лабиринте и есть кнопка перехода на home page, а также в другие разделы сайта.
9. Distilled
Distilled — маркетинговое онлайн-агентство. Его «страница 404» — это микс удачного копирайтинга, дизайна и уникального пользовательского опыта. Distilled использует изображение, похожее на инфографику. Герои картинки общаются на устаревшем языке, чтобы описать, что вы заблудились. Они также в игровой форме объясняют, что можно сделать дальше.
10. CloudSigma
Страница с ошибкой 404 облачного сервиса с офисами в США, Европе и Азиатско-Тихоокеанском регионе CloudSigma поддерживает пользователя шуткой: «О нет, вы нашли главную страницу junior-разработчика!». Этим «junior-разработчиком» компания сделала кота.
На странице размещена контрастная кнопка для перехода на главную, а также онлайн-чат для отправки запроса, доступный 24/7.
11. Ready To Go Survival
Компания Ready To Go Survival выпускает смарт-рюкзаки с предметами первой необходимости для 5-дневного выживания. Страница сайта с ошибкой 404 отсылает к культовому фильму «Матрица» и предлагает два варианта: нажать на красную кнопку и начать приготовления (выбрать рюкзак по подробному гайду) или нажать на синюю — и вернуться на главную страницу.
12. Lovespace
Страница ошибки 404 украинского секс-шопа — хороший пример использования юмора. Пользователю предлагают вернуться на главную страницу, в верхней части экрана также доступна поисковая строка и ссылки для перехода в главные разделы веб-сайта, личный профиль, корзину или соцсети компании.
13. Планета Кино
Бренды любят космическую тематику, и украинская сеть кинотеатров «Планета Кино» — не исключение. На «странице 404» кроме небольшого изображения космонавта компания использовала известные слова, связанные с аварией «Аполлона-13» по пути к Луне, — «Хьюстон, у нас проблема».
Эту фразу-мем произнесли 13 апреля 1970 года, когда на борту космического корабля лунной миссии произошел взрыв, а троих астронавтов от Земли отделяли сотни тысяч километров — с перспективой потери кислорода и полного отключения электропитания.
На странице пользователю предлагают вернуться на главную, перейти в один из разделов сайта или отправить запрос в онлайн-чате.
14. FLIXESS
Страница ошибки украинского агрегатора активных туров FLIXESS оформлена в минималистичном стиле. На картинке изображена гора — часть туров на сайте связана с восхождениями и трекингами. Кроме того, на странице использовали юмористическую фразу — «Страница не выдержала соблазна и отправилась в путешествие».
Пользователю предлагают перейти в раздел с турами по кнопке «Я тоже хочу!» или выбрать один из разделов: «Главная страница», «Поиск туров», «Акционные туры», «Популярные туры» и «Контакты». Можно отправить сообщение, если вы считаете, что произошла ошибка и страница, которую вы искали, существует.
15. The-Artery
Страница креативной студии The-Artery, которая специализируется на создании контента для художественных фильмов, сериалов и брендов, содержит интерактивное изображение. Оно перемещается при движении курсора мыши и удерживает посетителей сайта на более длительное время. Текст предлагает пользователю кликнуть в любом месте экрана для перехода на главную страницу и продолжить просмотр контента.
Хотите получать дайджест статей?
Одно письмо с лучшими материалами за неделю. Подписывайтесь, чтобы ничего не упустить.
Спасибо за подписку!
Хорошая страница ошибки 404 может быть также важна для сайта как и его содержание. С помощью такой страницы вы сможете направить посетителя к нужной вам домашней странице сайта.
Если на вашем сайте или блоге нет такой страницы, возможно вам стоит задуматься о её создании. А для вашего вдохновения тут собрано 50 прикольных и необычных примеров страниц ошибки 404.
Другие примеры таких страниц вы сможете увидеть в ранее опубликованных подборках Эффективные страницы ошибки 404 и Ошибки 404 — часть вторая.
Сайт Propeller
Иллюстрированная страница ошибки 404 на B3ta
Страница ошибки 404 Cuoma
Забавная страница ошибки 404 на Tinsanity
Сайт latelategifts
Муха на странице ошибки сайта 24-4 Media
Разорванная бумага на CssTricks
Иллюстрации акул на Renkoo
Плачущий ребенок на iFolderLinks
Мусорная корзина на странице ошибки 404 TurboMilk
Страница ошибки 404 на Zivity
Такая страница ошибки на сайте Soocial
Разноцветные кубики на rush68
Страница ошибки на Ook
Забавный котенок на Github
Так изобразили ошибку на сайте RetardZone
Надпись на футболке на Planetgeek
Кривляющийся мужчина на PatternTap
Простая и забавная страница ошибки 404 на Studentmarket
Иллюстрация на странице ошибки 404 на BrightKite
Страница ошибки 404 на сайте ClearSpring
Иллюстрация девушки на Erotica Challenge
Грустная мордашка на kidmondo
Смешная страница ошибки сайта Funned
Необычная страница ошибки 404 на nickciske
Страница ошибки в стиле ретро на сайте Lileks
Сайт lightpostcreative и его страница ошибки
Стройка на странице ошибки сайта tele2
Яркая страница ошибки 404 на DDZ
Кот в компьютере на Catswhocode
Космос на странице ошибки Abduzeedo
Разыскивается странница на сайте Limpfish
Стильная иллюстрация на Ferdaze
И на Expansion Broadcast иллюстрированная страница ошибки
Художественная страница ошибки сайта Chrisglass
Страница ошибки на Fuelly
Облака на Zanami
Страница ошибки на Southpark Studios
Страница ошибки сайта Geeksquad
Милый котенок на Centerd
Марио на странице ошибки сайта Dawdle
Смешной монстр на Cartoon Network
Птерозавры на странице ошибки Amorphia Apparel
Такая страница ошибки на Mozilla
Ещё один забавный пример страницы ошибки 404 Jotsai
Смешная страница ошибки на The Brand Surgery
Страница ошибки Mmo Game Zone
На странице ошибки сайта Acorn Creative разместили носок
Автор – hongkiat
Перевод — Дежурка
- Опубликовано в Веб-дизайн,
февраля 16, 2009 - Метки: ошибки, сайт, страница, юзабилити
Комментарии
- Seostotel
30 июня 2016 в 11:01-7
Комментарий скрыт из-за рейтинга
- Валентин
13 августа 2016 в 10:340
Вот здесь очень тематично с телевизорами televizor-x.ru/wrongaddress/
- Андрей
24 ноября 2016 в 11:10+1
- Илья
20 марта 2017 в 1:37+2
Набросал responsive 404 страницу, для ветклиники. www.vet.zp.ua/404 Ещё дорабатываю, кот будет слегка анимированный =)
- Светлана
21 марта 2017 в 2:53+1
Мило, с котятками: anthony-robbins.ru/404.php
- Глеб
1 мая 2017 в 15:450
Еще одна прикольная страница 404 kramportal.info/p000.html
- Astra
3 июля 2017 в 21:42-1
Для любителей Гарри Потера: privorot.club/404
- Меченый
14 июля 2017 в 22:280
Для фанатов Сталкера:
ffgs.ru/404/
Меченый
Ответ:
июля 14, 2017 at 10:29 пп
0
На ленту кликайте.
- Олег
3 декабря 2017 в 11:100
- Олег
3 декабря 2017 в 11:160
- Денис
17 марта 2018 в 18:480
Вот тоже поставил красивую страницу
vayx.ru
Похожие статьи
- Ошибки 404 — часть вторая
- Эффективные страницы ошибки 404
- Грубейшие ошибки веб-дизайна
- ТОР 10 ошибок юзабилити
- Откуда берутся неудачные дизайнерские решения
Случайные статьи
- Дизайн упаковки на русском языке
- Выразительный дизайн при помощи типографики
- 20 бесплатных декоративных шрифтов
- Рисуем комету в Adobe Illustrator
- Как представить свою команду на сайте
15 Января 2016 года, 16:19
Поговорки утверждают, что можно бесконечно смотреть на то, как горит огонь и течет вода. Мы с ними абсолютно согласны, но хотели бы дополнить этот список, включив в него страницы 404 ошибки. А все потому что находчивость их создателей не знает границ. Смотрите сами, и, возможно, в следующий раз, наткнувшись на страшные 404 not found, вам не захочется убегать без оглядки:
Casetrentine
Made By Shape
Distilled
Daily Design Inspiration
Incore
Random Staging
Hub
Blue Fountain Media
Spotify
Good Old Games (GOG)
Astuteo
Hoppermagic
HomeStarRunner.com
South Park Studios
Rick Santorum
Suspended Animations
Colour Marketing & Design
Dailymotion Cloud
Craigslist
Heinz
Henrik Hedegaard
Shelfworthy
eHarmony
Modcloth
Tobi
Chrisglass
Project Fedena
Eternal Moon
Kochatelier
Thick Moustache
А какие интересные страницы 404 ошибки знаете вы? Делитесь примерами в комментариях.
Страна 404 (Страна четыреста четыре, страна не найдена) — альтернативное хейтерское название Украины, широко используемое в отношении неё российскими пользователями после событий Евромайдана во время «русской весны» 2014—2015 годов; своеобразный политический мем, применяемый российскими пользователями к Украине.
Потом название стали применять и в отношении России по иной причине — началась ползучая цензура Интернета и при попытках открыть сайты показывалась ошибка о цензуре (прямо как ошибка 404, которая отображается при невозможности найти сайт), то есть вместо значимой части Интернета в стране отображается ошибка (начали поступать требования на грани идиотизма — вплоть до блокировки Ютуба).
Появление мема[править]
Во время и после событий Евромайдана Украину охватил хаос, началась полноценная война, в ходе который был отжат Крым и созданы так называемые ЛНР и ДНР. Это дало сторонникам России повод говорить о том, что страны Украины больше нет как таковой, то есть страна «не найдена», как говорит всем известное описание (комментарий, пояснение) к самому популярному HTTP коду ответа 404. В то же время многие украинцы не согласились с тем, что их страны не существует, и стали активно отстаивать свою государственность, под новой властью, которая за 8 лет после восстания неплохо укоренилась.
Стало понятно, что после распада СССР выросло весомое количество людей, которые себя считают именно украинцами и желают независимого государства на определенных принципах (вступление в ЕС, запрет коммунизма, русского языка и т. д.)
Дальнейшее развитие[править]
В последствии начал производиться перефорс и мем «Страна 404» плавно сошёл на нет по мере появления Минских соглашений (когда начат курс на официальное замирение с Украиной). Сами же украинцы стали пропагандировать идею того, что уже Россия стала со временем постепенно превращаться в ту самую «Страну 404» без каких-либо перспектив и будущего. После 2017-го года уже сами украинцы изредка стали употреблять этот мем в отношении России, крах которой они ожидают каждый год из-за разных внутренних проблем, а также отсутствия чёткой программы развития.
В пользу этой теории стали ссылаться на то, что в 2017-ом году в России смертность стала вновь преобладать над рождаемостью, что говорит о том, что население в прямом смысле медленно вымирает и страна буквально превращается в «страну 404». Впрочем резкое снижение рождаемости также характеризует и все развитые западные страны.
После СВО в 2022 году, мем снова вернулся на круги своя уже к Украине. В частности был дан толчок после заявления Путина о том, что Украина искусственное государство, созданное большевиками и о том, что Украину следует называть именем Владимира Ильича Ленина. Также он добавил, что готов показать Украине настоящую «декоммунизацию». Спустя год, Путин так и не смог показать ту самую «декоммунизацию», но при этом успешно показал что он сам является «404» как и его идея СССР 2.0, поскольку за 20 лет его страна могла только казаться, но не быть.
Забавные и креативные страницы ошибки 404 в русскоязычной блогосфере
Все, у кого есть свои блоги и сайты (да и не только), знают про существование ошибки 404, которая возникает, в случае если искомая страница по какой-то причине на сайте отсутствует.
Многие пишут про важность ошибки 404 и правильное оформление страницы ошибки.
Некоторые делают красивые, креативные подборки «буржуйских» страниц с ошибкой 404.
Но, как оказалось, мало кто в русскоязычной блогосфере оформляет эту страницу сам, и еще меньше блогеров подходят к этому делу креативно.
Каюсь, сама такая, но у меня есть веская причина: мой блог находится на платформе blogspot, а тут особо не разгуляешься. Но, если бы эта страничка была, то выглядела бы она примерно так, как на картинке в начале поста. А вот какая отговорка у вас?
Изучив как минимум сотню русскоязычных блогов (и это не шутка), я с трудом откопала десяток (а нет… даже меньше) страниц ошибки 404, которые можно назвать креативными. Ну хоть что-то
Хабрахабр — Страница не найдена (404-я ошибка)
Турбомилк – Кина не будет
Магазета — Ура! Ошибка №404
Pervushin — Опаньки, опатулечки, опатулюшечки, ну нет такой страницы
Shakin.ru — Опс! Такой страницы здесь нет
Terehoff.com — Прошу прощения, но я не нашел такую страницу
Бабло побеждает Зло! — Это денежная страница
Свобода слова вебмастерского — Нет такой страницы, Барин, 404!
В мире позитива – Кажется, вы ошиблись дверью
Кого-то пропустила? У вашего блога тоже забавная и креативная страница 404? Тогда оставляйте ссылки в комментариях и я обязательно добавлю вас в эту подборку
Анна Волкова
Любите интересные и креативные вещи, тогда советую заглянуть на следующий блог: все про интересное и креативное
Читать дальше…
Подпишитесь на нашу рассылку, чтобы не пропустить ничего нового: