SeedProd и шаблоны страниц 404 позволяют легко создавать страницы 404, которые увеличивают количество потенциальных клиентов и коэффициент конверсии.

Так чего же вы ждете?

И если вам понравилась эта статья, подпишитесь на нас в Twitter и Facebook, чтобы получить больше полезного контента, который поможет вам в развитии вашего бизнеса.

20 лучших примеров страниц 404, когда-либо существовавших (+ советы, как сделать вашу страницу крутой)

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

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

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

Что такое страница 404?

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

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

• Протокол
• Доменное имя
• Путь

Например, примите во внимание URL нашего блога: https: // www.bluleadz.com/blog. Протокол — https: //, домен — bluleadz.com, а / blog — путь.

Страница 404 появляется, когда пользователи случайно вводят что-то вроде https://www.bluleadz.com/bling. Домен правильный, но путь / шик никуда не ведет.

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

Таким образом, ваш URL-адрес будет https: // www.pretendbiz.com/products/shirt-1, со ссылкой на этот товар на главной странице. Если вы решите удалить этот продукт, но забудете удалить ссылку, пользователь будет перенаправлен на страницу 404, что позволит им узнать, что страница не может быть найдена.

6 основных компонентов Cool 404 Pages

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

Юмор

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

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

Четкая тема бренда

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

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

Использование графики

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

Хорошая практика — сделать так, чтобы ваша графика каким-то образом соответствовала вашей копии.

Ссылки на другие популярные страницы

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

Текст, который направляет пользователей в нужное место

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

Не бойтесь придавать тексту свое собственное восприятие вместо использования стандартной строки «Вы попали не на ту страницу» или «Страница не найдена».

Ссылки верхнего и нижнего колонтитулов

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

Это означает, что они с меньшей вероятностью откажутся от вашего сайта.

20 лучших примеров страниц 404

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

1. Amazon

Amazon может одновременно держать в воздухе много шаров. Их страница с ошибками — это та область, о которой им не нужно беспокоиться.Это замечательно! Это отчасти инструмент для подбора персонала, отчасти идентификатор бренда и много веселья!

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

2. Чудо

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

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

3. Pixar

Pixar есть Печаль из журнала Inside Out 2015 года, а также сообщение «Оууу … Не горюй, это просто ошибка 404».

Довольно простой и понятный, и он выполняет свою работу.Это также действительно симпатичный визуальный идентификатор бренда Pixar!

4. Произвольная форма

Freeform является представителем одного из популярных шоу Freeform, Siren . Их изображение бухты в ночное время привлекает внимание, а их копия проста и умна.

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

5. Bitly

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

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

6. Huda Beauty

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

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

7. Австралийский

Национальная газета Австралии, принадлежащая News Corp, The Australian имеет уникальную страницу с ошибками, которая идеально соответствует их обширному освещению правительства и политики. Он высмеивает политический язык и публичные ошибки политиков.

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

8.Codecademy

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

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

9. Восточный рынок

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

Eastern Market в Детройте есть страница с ошибкой, на которой изображена игра «Flappy Spud», в которой вы летите картофелем сквозь стены. Когда вы сталкиваетесь с препятствием, оно превращается в груду картошки фри. Приятное прикосновение.

10. Индекс бесполезной сети

Индекс бесполезных веб-сайтов — это крупнейший индекс совершенно бесполезных веб-сайтов в Интернете.Даже у них есть выходные.

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

11. Penguin Random House

Penguin Random House есть отличная страница 404 с забавной иллюстрацией книги, спящей на работе. Их копия умна, потому что она остается на бренде и перенаправляет пользователей на домашнюю страницу.

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

12. IMDb

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

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

13. Мемориальная библиотека Фалви

Мемориальная библиотека Фалви расположена в кампусе Виллановы в Пенсильвании.Хотя это не библиотека мирового класса, ее страница 404 довольно забавна.

В нем есть заголовок «Осторожно — вместо того, чтобы найти то, что вы искали, вы, кажется, наткнулись на каких-то драконов». Тогда вам будет предоставлена ​​возможность уйти от этих прекрасных иллюстрированных чудовищ.

14. Эмирейтс

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

Это идеальное отражение имиджа их бренда и дает вам множество возможностей легко найти на сайте именно то, что вы ищете.

15. Одинокая планета

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

16. Bluleadz

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

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

17. Студия 20-го века

20th Century Studios есть потрясающая фирменная страница 404 с большим черно-белым кадром из одного из их знаменитых старых фильмов. Они обыгрывают изображение забавным текстом под заголовком.

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

18. Дисней

Disney — это высшее качество, и их страница 404 — не исключение. У них есть анимированный Wreck it, Ральф просовывает голову через 0 в 404, чтобы отразить замешательство пользователя. Ниже большого 404 — отчетливая и остроумная копия, которая ссылается на один из их фильмов.

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

19. Лиса

Эта страница 404 — одна из наших любимых.Fox предлагает юмористический призыв к действию, который высмеивает пользователя за то, что он попал на страницу, которой не существует. В разделе «Глупый человек» написано: «Соберись». Этой страницы не существует.

И, конечно же, там есть саркастический Стьюи из Family Guy со скрещенными руками. Помимо классного изображения и CTA, у Fox есть полное меню вверху, которое помогает людям перемещаться по сайту оттуда.

20. HelpScout

HelpScout есть отличная страница 404, которая соответствует их бренду.Он отображает восхитительную иллюстрацию, относящуюся к их копии. Они не используют стандарт: «Эта страница не существует». Вместо этого у них есть заголовок, который гласит: «Рух-ро!»

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

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

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

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

Дизайн страницы 404: лучшие практики и замечательные примеры

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

Вы знаете это чувство. Вы нажимаете интересную ссылку на сообщение в блоге, которое хотите прочитать, и БАМ! 404 Страница не найдена. Это автоматически раздражающий и негативный опыт. Но как эта страница 404 говорит с вами? Это полезно? Даже восхитительно?

Начните создавать запоминающиеся интерактивные страницы 404 с помощью Justinmind

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

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

Коды состояния HTTP: краткая история страницы 404

Так почему же она вообще называется страницей 404? Как обычно, объяснение довольно загадочно и возвращает нас в темные века Интернета (где-то около 1990 года). Несмотря на популярные мифы о 404, относящиеся к древней серверной комнате или к офису изобретателя в Интернете Тима Бернерса-Ли, оказывается, что 400 — это произвольный ярлык, прикрепленный к ошибкам клиента, который включает 404: Страница не найдена.

Ошибка 404 — это ошибка на стороне клиента, поскольку считается, что клиент (ваш веб-браузер) запрашивает ресурс (URL-адрес, который вы щелкнули или ввели), который не существует или не может быть найден.Итак, теперь вы знаете.

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

Конкурирующие философии страницы с ошибкой 404

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

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

Что должна включать страница 404?

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

• Сообщение об ошибке
  Вам нужно, чтобы ваш пользователь немедленно распознал, что он попал на страницу с ошибкой.
• Внешний вид бренда
  Точно так же убедитесь, что ваша страница 404 соответствует внешнему виду вашего сайта.Представьте свой логотип, сделайте его своим.

Присмотритесь: ключевые аспекты вашей 404-страницы

Превратите ошибку пользователя в возможность UX

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

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

Избегайте беспорядка для более высоких показателей успеха пользователей

Перегрузка пользователя страницей 404, заполненной ссылками на каждый уголок вашего сайта, — верный способ когнитивно перегрузить и без того разочарованного пользователя. И, как ясно дает понять гуру NN Group Кэтрин Уитентон, когнитивная перегрузка и удобство использования несовместимы.

Лучше всего создать страницу 404 с несколькими ключевыми ссылками, включая ссылку на домашнюю страницу, как простой выход для пользователей, которые еще не уверены, что они ищут.Другие варианты включения могут быть в блоге, функциях продукта или на странице «О нас».

В целом, стремление включить до 4 ссылок на страницу 404 является хорошей практикой. Airbnb включает больше, но это Airbnb.

Лучшие страницы 404 — это возможности для брендинга

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

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

Великолепный дизайн страниц 404 для вдохновения

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

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

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

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

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

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

Смелое использование цвета добавляет бликов, в то время как меню навигации достаточно интегрировано на страницу, поэтому не требует дополнительных ссылок. Кроме того, есть замечательная копия, которая привлекает и удивляет пользователя.Мы это любим!

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

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

20th Century Studios также разместили ссылку на фильм на своей странице 404, а также сделали отличный брендинг.Он включает в себя фон с культовой сценой из одного из их фильмов, а также цитату. Нам нравится, что большой белый шрифт производит впечатление и сохраняет читаемость, поскольку цвета фона меняются вместе с видео.

Spotify не нуждается в представлении. Страница 404 является прямым отражением их бренда и их целевого рынка, создавая отличное сочетание брендинга и UX.

Красивый розовый фон в сочетании с иллюстрацией вызывает чувство ностальгии и попадает в самую точку, когда дело касается копии.На этой странице хорошо спланировано все, от надписей на кнопке до того, что помещаемый виниловый диск называется «404»!

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

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

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

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

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

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

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

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

12. Музей науки и промышленности Чикаго

Музей науки и промышленности Чикаго также предлагает пользователям великолепный опыт 404.Нам нравится, что они также предлагают несколько ссылок, которые предоставляются в организованном виде, который никогда не перегружает пользователя.

Мы также ценим забавную информацию о старой школе 1902 года. Весь алфавит на одном циферблате доступен потребителям! Это заставляет вас оценить, как долго мы прошли, и в каком-то смысле это уже не может быть более репрезентативным для музея.

Дэн Вуджер — иллюстратор и графический дизайнер, работавший в таких крупных компаниях, как McDonald’s, Bloomberg’s и New York Times.Нам нравится, что дизайн его страницы 404 забавный и непринужденный, с некоторыми вещами, кроме иллюстрации гамбургера, в котором он сожалеет о пропавшей странице. Иногда это все, что вам нужно.

Дэн взял то, что побуждает большинство пользователей покинуть веб-сайт, и превратил это в возможность со ссылкой на свое портфолио. Это умный UX-дизайн!

Mashable — новостная платформа, охватывающая все, от технологий до публикаций в Game of Thrones. Их контент разнообразен и пытается охватить широкую группу пользователей.Их страница 404 — победитель, потому что она проста и приятна.

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

Blue Path — это консалтинговая компания по науке о данных, которая предлагает пользователям отличную страницу 404. Эта страница хороша своим юмором и простой графикой, которая представляет собой текст и график.Юмор размещать карту слева и сигнализировать пользователю, что он будет далеко от этой карты, справа? Отличная аналогия!

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

Это момент, когда вы выбираете момент, который обычно наполнен разочарованием и негативом, и превращаете его во что-то хорошее.Сделайте его незабываемым по правильным причинам!

10 лучших дизайнов страниц с ошибкой 404 на 2019 год | AGENTE

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

Что такое страница 404?

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

Эта страница появляется по нескольким распространенным причинам:

• Удаление страницы
• Сайт оффлайн
• Ссылка не работает
• Устаревшая ссылка из поисковой системы
• URL-адрес, введенный посетителем с ошибкой

Почему стоит выбрать индивидуальный дизайн страницы 404?

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

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

Источник: Amazon

• Он может создать сильный имидж бренда, поддерживая одну и ту же тему на всех страницах, тем самым создавая единый образ.

Источник: Магазин Disney

• Увеличьте количество конверсий, указав полезную информацию, например самые популярные страницы сайта.

Источник: Nintendo

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

Источник: ModCloth

Как создать 404 страницы

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

Убедитесь, что вы включили строку поиска

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

Источник: CNN

Добавьте ссылки на популярные сообщения или на домашнюю страницу

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

Источник: Hoppermagic

Источник: Shopify

Говорите простым языком

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

Источник: Campbells

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

Источник: Blue Sky Studios

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

Источник: BBC

Еще один совет: добавьте к дизайну страниц 404 немного юмора, например, Adobe, Lucasfilm и Lonely Planet.

Источник: Adobe

Источник: Lucasfilm

Источник: Lonely Planet

Упростите для пользователей возможность связи с вами

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

Источник: Forbes

Источник: GOG

Разрешить пользователям присоединяться к вашему списку рассылки

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

Источник: Overstock

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

Источник: BuzzFeed

Используйте анимацию для удержания интереса

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

Источник: Dribbble

Добавить форму входа

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

Источник: GitHub

Включить обмен в социальных сетях

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

Источник: The Huffington Post

Вы также можете добавить ссылки на свои учетные записи в социальных сетях.

Источник: Pixar Animation Studios

Использовать геймификацию

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

Источник: Восточный рынок

Лучшие примеры дизайна страниц 404

Их больше 1.5 миллиардов веб-сайтов в Интернете сегодня, и многие из них имеют страницы с ошибками 404.

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

1. IMDb

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

2. ЗНАЧОК

Этот дизайн страницы 404 содержит анимированные элементы, которые делают его намного интереснее, чем статические страницы в Интернете.И нам также нравится, как страница описывает причину, по которой посетитель ее видит.

3. Dropbox

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

4. Дисней

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

5. Blizzard Entertainment

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

6. Imgur

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

7. Цифровые тенденции

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

8. MailChimp

Это один из наших любимых лучших дизайнов страниц 404. MailChimp сообщает посетителям, что их запрос не найден. Лошадь на изображении напоминает пользователям новых персонажей в их обновленной визуальной идентичности. Нет необходимости возвращаться на предыдущую страницу, чтобы продолжить поиск, поскольку доступна кнопка «Домой» Mailchimp.

9. eHarmony

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

10. GoDaddy

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

Заключение

Хорошее взаимодействие с пользователем — это то, что современные посетители ожидают от любого веб-сайта.Чтобы обеспечить это и оставить конкурентов в тени, владельцы сайтов должны использовать уникальный дизайн для всех страниц. Пользовательская страница 404 может помочь увеличить конверсию и увеличить продажи. В этой статье мы обсудили, как создать отличный дизайн. Мы надеемся, что советы и примеры страниц с ошибками 404, подготовленные командой AGENTE, послужат вам источником вдохновения.

Какая, по вашему мнению, самая лучшая страница 404? Поделитесь с нами через Facebook или Twitter.

Читайте также: Как сделать сайт в стиле Udemy?

24 умных страницы ошибок 404 с реальных сайтов

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

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

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

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

Что такое ошибка 404?

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

По большей части вы можете настроить свой веб-сервер для создания настраиваемой страницы ошибки 404. (Если вы являетесь клиентом HubSpot, нажмите здесь, чтобы узнать, как настроить страницу 404 в HubSpot.)

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

Страница не найдена: 24 страницы ошибок Creative 404

1) Блюгг

Если смех — лучшее лекарство, то исправлением может стать страница с ошибкой 404 Блугга.Он включает в себя — при автовоспроизведении и со звуком — встроенное видео одного из тех козлов, который кричит как человек. (Вы, наверное, узнаете их по этим вирусным видео.) Давайте будем честными … он никогда не устареет.

2) Spotify

Каждый год Spotify выпускает свой микросайт «Год в музыке». Сайт позволяет посетителям просматривать самую популярную музыку года со всего мира. Но там есть отличное пасхальное яйцо: 404-я страница микросайта является отсылкой к хитовой песне Джастина Бибера 2015 года «Sorry», что делает ее одновременно своевременной и веселой.

3) Облако сигма

Проверьте это: Cloud Sigma позволяет нам участвовать в некоторых закулисных действиях. Их страница с ошибкой 404 ловко притворяется «домашней страницей младшего разработчика» — этот младший разработчик является, ну … котом.

Кредит изображения: Crayon

4) Уловки CSS

Когда-нибудь срывали обертку веб-сайта, чтобы посмотреть, что под ней? Это концепция CSS Tricks на своей странице с ошибкой 404. Это и умно, и напоминает о том, чем занимается их бренд: CSS.

5) Старые добрые игры (GOG)

Для других веб-сайтов вы разворачиваете и там … галактика. На самом деле это умная ссылка на GOG Galaxy, который является собственным клиентом видеоигр GOG. К счастью, здесь есть маленький персонаж видеоигры, чтобы дать посетителям возможность сообщить об ошибке, если они захотят.

6) Магнт

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

7) Битли

Помните провального кита Твиттера? Точно так же Bitly интегрирует своего талисмана — рыбку-иглобрюху — в сообщение об ошибке. Бедный паренек остался плавать животом вверх.

8) Студия дизайна фильмов Дэниела Карчера

Если ваш бизнес — кинематограф, почему бы не превратить страницу с ошибкой 404 в нечто похожее на короткометражный фильм? Сотрудники Daniel Karcher отлично поработали с анимацией на этой странице, включая умные отсылки к таким вещам, как телесериал LOST. Тикер вверху переворачивается, чтобы сказать «Пожалуйста, перейдите на основной уровень», и когда вы щелкаете по нему, вы возвращаетесь на главную страницу.

9) НПР

Стилистически на странице ошибок NPR нет ничего особенного. Но продолжайте читать, и вы увидите, как они умело связывают некоторые из своих замечательных историй о потерянных людях, местах и ​​вещах, например, рассказ об Амелии Эрхарт и рассказ об Уолдо. Надеюсь, это заставит потерявшихся пользователей чувствовать себя менее одинокими.

10) Blizzard Entertainment

Вот простая идея, которая в итоге выглядит очень круто: страница 404 Blizzard Entertainment — это «сломанная» версия их обычной домашней страницы.Копия подшучивает над пользователем: «Grats. Вы ее сломали», за которым следует «Эта страница не существует или произошла какая-то другая ужасная ошибка».

11) Оловянный разум

Мы не могли перестать хихикать над анимацией на странице 404 Tin Sanity, где изображена анимированная чашка с налитыми кровью глазами, кричащими и «бегающими» взад и вперед по экрану. Все это настроено на интенсивный басовый трек, что делает его еще смешнее. Как и многие другие страницы 404 в этом списке, этот бренд высмеивает тот факт, что ошибка 404 — не такая уж большая проблема.

12) Оранжевое покрытие

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

13) Astuteo

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

14) BrandCrowd

На этой странице с ошибкой не только классная иллюстрация, но и умная копия. Нам нравится ссылка на песню Semisonic «Closing Time»: «Вы можете щелкнуть где угодно, но не можете щелкнуть здесь».

15) Кулинария

Cooklet проста и приятна как по дизайну, так и по тексту. Блин, я хотел кусок!

16) GitHub

Строка «Это не те дроиды, которых вы ищете» относится к уловке Джедая Оби-Вана Кеноби над штурмовиками в Звездных войнах, эпизод IV — и эта фраза стала широко известной, чтобы сказать кому-то, что они следуете неправильному образу действий.GitHub использует эту знаменитую строчку в своем сообщении об ошибке 404.

17) Грант Берк

Графический дизайнер Грант Берк демонстрирует свои дизайнерские способности даже на своей странице 404. Графика проста, а концепция — недостающее звено на упаковке молока — забавна и умна.

18) Мовелин

Как будто изображение на странице ошибки 404 Moveline было недостаточно симпатичным, мы любим текст под ним еще больше. Они сочувствуют пользователям, которые могут быть обеспокоены сообщением об ошибке, когда они уже переживают из-за переезда.Чтобы облегчить их опасения, Moveline включает их контактную информацию.

Кредит изображения: Crayon

19) LEGO

На странице ошибки 404 LEGO копия не требуется: они позволяют своим персонажам говорить. Давай, приятель, подключи его снова!

20) Хоппермагия

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

21) IconFinder

Разве вы не ненавидите, когда веб-страницы теряются в космосе? Страница ошибок IconFinder проста, но восхитительна. Анимированный смайлик в скафандре, кажется, катапультируется все дальше и дальше в космос, чем дольше вы остаетесь на странице.

22) Hot Dot Productions

Hot Dot остается верной своему девизу: «пересечение новых технологий и дизайна». Страница анимирована сотнями крошечных точек, которые меняют направление в зависимости от того, куда вы перемещаете курсор.Это завораживает, круто и великолепно демонстрирует их дизайнерские возможности.

23) HomeStarRunner.com

HomeStarRunner.com, где размещается мультсериал с Flash-анимацией, за последние годы появилось несколько забавных страниц с ошибками 404. В самых последних персонажах мультсериала изображена сцена, которая могла бы появиться прямо из одного из их эпизодов. Если вы включите звук при загрузке страницы, вы услышите, как их персонаж Strong Bad, известный тем, что выкрикивает фразы вслух, говорит: «404’d!»

24) HubSpot

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

Ознакомьтесь с 11 лучшими примерами микросайтов.

Лучшие примеры страниц 404 в электронной коммерции

Добрый день всем читателям блога Amasty!

Сегодня мы поговорим на тему, которую часто упускают из виду магазины: как выделить свой 404.

Что мы можем сделать со страницами ошибок 404

Чем больше ваш магазин, тем важнее выглядит проблема 404-й страницы.

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

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

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

страницы с ошибками 404 по-прежнему игнорируются магазинами

Проводя исследование для статьи, я просмотрел сотни лучших сайтов Alexa в Покупках, выбрав самые забавные, самые красивые или креативные примеры страниц с ошибкой 404. И вот что я нашел:

• Многие и многие магазины используют страницу 404 по умолчанию — что не является смертным грехом, но определенно дает возможность сделать здесь немного больше;
• многие магазины перенаправляют с несуществующих страниц на страницы категорий / предыдущие / домашние, что тоже нормально, но все же может сбивать с толку, особенно для неопытных пользователей Интернета.Хорошо показать небольшое уведомление о том, что запрошенная посетителем страница не существует и он был перенаправлен.
• У многих магазинов нет правильной страницы 404 вообще . В этом случае вы видите пустую страницу или страницу со стандартным сообщением об ошибке 404, возвращаемым сервером, без дизайна и вообще без ссылок. Я бы оценил количество магазинов без надлежащей (по крайней мере, по умолчанию) страницы CMS 404 около 40%, что является удивительно большим количеством для топ-листа Alexa!
• другие мелкие проблемы например, отображение текста ошибки 404 на неправильном языке.
• креативных, забавных или по крайней мере замечательных страниц 404 — это не более 3% — на самом деле, я трачу гораздо больше времени, хотя мне может потребоваться составить достойный список из 404 примеров страниц.

Наконец: лучшие примеры страниц с ошибками 404 за 2014 год в электронной коммерции

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

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

1. underarmour.com

Ничего сложного, но яркое изображение и цветовая гамма выделяют эту страницу 404.

2. nespresso.com

Брендируйте все! Всего одно яркое изображение с идеальной чашкой кофе превращает неприятный опыт посещения удаленной или перемещенной страницы во что-то лучшее.

3. Фьючерсный магазин.около

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

4. modcloth.com

Собака в штанах и забавный призыв к действию; хорошее настроение гарантировано.

5. lego.com

Идеальный пример брендинга страницы 404 из Lego:

6. backcountry.com

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

7. bedbathandbeyond.com

Хороший пример сочетания отличного текста и нестандартного изображения. Очень яркая и эмоциональная страница с ошибкой 404.

8. ikea.com

Очень простая, но интересная страница!

9. etsy.com

Вещи случаются, говорит страница 404 для Etsy.

10. munchkin.com

Кто-то выглядит очень расстроенным из-за отсутствия страницы.

11. магазин.lululemon.com

На первый взгляд, эта страница выглядит вполне обыденно: заголовок, немного текста и стоковое изображение. Но если присмотреться…

12. dee.com

Еще один хороший пример использования фотографии с высокой контрастностью и яркими цветами.

13. mlb.mlb.com

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

14. bluenile.com

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

15. karmaloop.com

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

16. duluthtrading.com

Ну… Не знаю, кто первым догнал идею.

17. otterbox.com

Еще одна приятная идея от Otterbox: единороги и креативная формулировка. «Если вы настроены оптимистично» — определенно хит.

18. converse.com

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

19. opticsplanet.com

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

20. stevemadden.com

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

21. patagonia.com

Нравится страница, которая присоединилась к хэви-металлической группе.

Заключение

Итак, что же делает страницу 404 выдающейся, если мы посмотрим на эти примеры? (Без стандартных блоков вроде поиска, ссылок и т. Д.)

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

Вам понравились какие-то конкретные? Или вы можете поделиться другими примерами страниц 404, с которыми вы недавно познакомились?