Примеры 404 страницы: The Ultimate Guide (with 50+ Examples)

0

Разделы сайта

Статьи

Отправить запросОбновленияVIP-ЗаботаУсловияВыбор хостингаСтатьи

Закажите сайт по телефону 8-800-5555-864

Всё не так уж плохо

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

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

Примеры креативного оформления 404 страницы

404 Mailchimp

Лошадь отчаянно ищет нужную страницу, но ее нигде нет. На анимации креатив не заканчивается: если кликнуть по лошадке, то запустится игра по принципу «Змейки».

404 Dribbble

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

404 Точка.ru

Стыковка не состоялась, но это не повод расстраиваться. Просто перейдите на другую страницу сайта.

404 Figma

Сайт позволяет вдоволь поиздеваться на 404 ошибкой. Растяните её, как вашей душе угодно. Это решение стопроцентно понравится дизайнерам.

404 Coursera

Вариант для поклонников супрематизма. Анимация складывает фигуры в число 404.

404 Freepik

Страница находится за пределами Вселенной. Оставьте поиски астронавтам и посетите другие страницы сайта.

404 Font Awesome

Использование мемов — действующий и ультрамодный способ донести информацию до пользователей.

Итого

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








Твитнуть

Комментарии ВКонтакте

Лучший UX для страницы с ошибкой 404 [Практики + примеры]

Упс! Страница не найдена!

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

Посетители не должны попадать сюда. Но это происходит, когда на этих страницах указан неверный URL-адрес, когда сервер не работает или контент отсутствует.

Страница с ошибкой 404 должна иметь хороший UX

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

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

Начнем.

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

Страница 404 также известна как «страница ошибки» или «Страница не найдена».

К сожалению, страница не найдена

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

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

Когда с вашей страницей все в порядке, сервер отправляет код состояния 200 OK, но когда возникают некоторые из указанных ситуаций, то будет отправлен код состояния 404.

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

Эту информацию делают поисковые роботы, а также Googlebot, и вы должны исправить это как можно скорее.

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

Если у вас плохая страница 404, эта страница может стать концом пути посетителя.

Итак, ваш дизайн страницы 404 должен удерживать пользователей от ухода.

Что должна содержать страница 404?

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

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

404-страничная инфографика

Лучшие практики для 404-страниц с отличным UX следующие:

• 404 уведомление об ошибке
• Дизайн страницы в соответствии с вашим брендом
• Ссылки на ваши лучшие страницы
• Кнопка призыва к действию
• Будь простым и полезным

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

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

Создайте страницу в соответствии с вашим брендом

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

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

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

Брендинг — это сложно, но важно

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

Ссылки на ваши лучшие страницы

Ссылки могут помочь вам удержать посетителей на вашем сайте и помочь им продолжить свое путешествие.

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

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

Добавляйте ссылки, помните, что

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

Кнопка призыва к действию

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

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

CTA-кнопки

Будьте простыми и полезными

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

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

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

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

10 лучших примеров для страницы 404

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

Вот почему страница ошибки 404 стала такой важной частью каждого веб-сайта.

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

1. E-Bay

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

Страница 404 — пример Ebay

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

2. LinkedIn

Иногда ключом является простота.

Минимализм — это здорово

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

3. Lego

Это лучший пример хорошего дизайна страницы с ошибкой.

404 страница – Lego

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

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

4.

Blue Path

Это страница 404 в очень креативном виде.

Страница Blue Path 404

У Bleue Path отличная страница ошибок с юмором и простой графикой. Есть карта, показывающая, что пользователь отклонился от нее.

5. MailChimp

MailChimp создал симпатичную страницу ошибки с юмористическими иллюстрациями и информативными подписями.

Страница сумасшедшей ошибки от MailChimp

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

6. HBO

Еще одна отличная идея для оформления страницы 404 — HBO.

404 страница от HBO – креатив с отличными призывами к действию

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

7. Amazon

Страница ошибки 404 на Amazon необычна и инновационна.

Страница Amazon 404 — действительно милый щенок

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

Конечно, есть и сообщение с извинениями, где Amazon берет на себя ответственность за ошибку, даже если это не их вина.

8. Spotify

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

Страница Spotify 404

Также есть все остальное, что должно быть на каждой странице 404, например ссылка, кнопка и простое сообщение.

9. Michelin

Отличительный дизайн логотипа Michelin — лучшее, что есть на этой странице ошибок.

Michelin 404 страница

Эта страница создает впечатление, что они здесь, чтобы помочь вам найти то, что вы ищете.

10. Ikea

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

Страница 404 — стиль Ikea

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

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

Заключение

Мы представили вам все, что вам нужно знать о странице ошибки 404.

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

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

Будьте уникальными и творческими, и создайте лучшую страницу с ошибкой 404!

404 примера страниц, которые вы должны увидеть, прежде чем писать свои собственные.

Выводы

• Включите моменты удивления и восторга для посетителей вашего веб-сайта
• Дайте посетителям указания на другие страницы, которые могут им помочь0004
• Используйте интересный фирменный дизайн, чтобы развлечь посетителей

Почему так важно, как выглядит моя страница 404?

Когда для посетителей вашего веб-сайта появляется сообщение «404 Страница не найдена», это признак того, что что-то пошло не так.

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

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

Источник

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

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

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

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

Очевидно, я не нашел то, что искал.

Источник

Будьте эмоциональны

Все мы в тот или иной момент переходили по неработающей ссылке.

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

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

• Разочарование (Эта ссылка должна была вести на бесплатную загрузку, что звучит потрясающе. Теперь этой страницы больше не существует?)
• Раздражение (У меня нет целого дня, чтобы найти этот пост в блоге. Я прочитал его только на прошлой неделе, и теперь нигде не могу его найти!)
• Нетерпение (Это мой третья попытка купить этот продукт.Я уверен, что смогу найти его где-нибудь еще, а не тратить свое время на этом сайте.)

Что касается всего копирайтинга, проникните в образ мышления вашего клиента.

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

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

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

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

Дайте вашим посетителям направление

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

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

Который может быть на другом сайте.

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

Для страницы 404 копихакеров предлагается простая кнопка с копией «Вернуться на главную».

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

(Можете заметить?)

Копихакеры

Когда посетители попадают на страницу 404 Airbnb, у них есть много вариантов.

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

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

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

Airbnb

Для страницы 404 HubSpot они добавили 3 различных варианта на выбор посетителя.

HubSpot знает, что основные причины, по которым люди посещают их веб-сайты, — это получение инструмента CRM (управление взаимоотношениями с клиентами), чтение их блога или прохождение курса в их академии.

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

HubSpot

Продемонстрируйте индивидуальность вашего бренда

Ваша страница 404 – идеальное место для демонстрации индивидуальности вашего бренда.

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

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

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

В этом уроке Джоанна просматривает веб-сайт с заметным голосом бренда.

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

Вы привлечете нужных клиентов и оттолкнете не тех, если будете уверенно говорить.

В следующих 404-страничных примерах копия полна голоса бренда.

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

В этом примере от Джоэла из Business Casual Copywriting посетителю предлагается пройти безумную игру в стиле libs.

О вспышке зомби.

Хотя направления обратно на главную страницу нет, я уверен, что посетители будут рады заполнить эту историю.

И вернуться к тому, что они делали после того, как остановили апокалипсис.

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

Деловой повседневный копирайтинг

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

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

И знаете что?

Помогает.

У меня перехватило дыхание даже при поиске 404-страничных примеров.

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

Headspace

Чтобы не отставать, Disney обыгрывает страницу 404 со ссылкой на соответствующий фильм.

Страница анимирована (как и следовало ожидать от Disney), поэтому изображение не соответствует действительности.

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

Disney

Дизайн имеет значение

Как мы видели в первом примере с 404 страницами, простая белая страница с черным текстом не очень привлекательна.

В глаза или мозг.

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

Примерно так выглядят страницы 404.

Просто сообщаю вам фактическую информацию об ошибке и оставляю вас наедине с собой.

Как сделать страницу 404 более привлекательной?

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

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

Джоанна Вибе, основатель Copyhackers

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

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

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

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

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

Источник

Удержание посетителей на вашем веб-сайте — основная цель страницы 404

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

Если посетители остаются на вашем сайте, это увеличивает шансы на конверсию, что всегда хорошо.

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

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

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

Amazon

В этом примере на 404 страницы Blizzard включает анимацию персонажа из World of Warcraft.

Если вы не играете в WoW, вы не обязательно получите его, но Blizzard знает свою аудиторию.

А знание своей аудитории — это то, что определенно может принести вам баллы на странице 404.

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

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

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

Blizzard

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

Единственное направление на этой странице — перейти в Справочный центр, но вы можете посмотреть, как поросенок и цыпленок идут на прогулку.

Тоже неплохо, правда?

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

Slack

Время взглянуть на вашу собственную страницу 404

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

Возможно, из-за недосмотра или из-за мысли, что ни один посетитель никогда не попадет на эти страницы.

No related posts.