404 ошибка примеры страниц: 27 примеров проработанной страницы 404 — Дизайн на vc.ru

Ошибка 404 означает, что страница не найдена (Not Found). Хорошо это или плохо для SEO? Если рассматривать в общем, то это нормально. Google рассматривает появление ошибок 404 как естественный процесс работы сайта. Вот, что говорит справка:

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

В любом случае, лучшим решением с точки зрения SEO будет разобраться, почему возникла ошибка 404 Not Found. Выявление причины подскажет наиболее верный путь устранения ошибки.

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

Почему так происходит:

• Ошибка в URL. Пользователь неправильно ввел ссылку или в нее были внесены изменения на стороне сайта.  
• Страница переехала или удалена. Это следствие изменения структуры сайта, технических работ или банально «факап» контент-менеджера.

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

• Google вебмастер. Бесплатный и простой в использовании инструмент. Аудит сайта доступен в отчете “Сканирование”, вкладка “Ошибки сканирования”.
• Seoto.me. Мощный сервис, способный проанализировать даже самые крупные сайты. Но платный.
• Serpstat.com. Инструмент отличается широким функционалом. Кроме битых ссылок, показывает качество оптимизации домена и график глубины проверки. Позволяет проанализировать сайты конкурентов. Все платно.
• Check My Links. Это бесплатный плагин для Google Chrome. Его минус в том, что он работает постранично, проверить весь сайт сразу нельзя.  

Ольга Ильюхина, SEO-специалист Webpromo:

«Все инструменты для проверки сайта можно разделить на онлайн и офлайн, которые в свою очередь делятся на массовые и постраничные. Для массовой проверки страниц можно использовать Screaming Frog SEO Spider, Netpeak Spider, Xenu, а также такие сервисы, как Serpstat. В случае проверки только одной страницы можно выбрать наиболее подходящих вариант среди букмарклетов (например, проверка кода ответа в bertal.ru), расширений для Chrome (Redirect path), плагинов для многих CMS и т.д.»

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

Читайте также: Как написать текст о компании и оформить страницу «О нас». От рекомендаций до вдохновляющих идей

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

Шаблон информативной страницы 404 зависит от специфики сайта. Однако есть несколько правил, обязательных для всех:

1. Дайте пользователю понять, что он попал на тот сайт, который искал. Важную роль в этом играют хедер (шапка сайта) и футер (подвал сайта).
2. Объясните, почему пользователь видит на странице ошибку, а не контент, за которым пришел. Желательно, простыми и понятными словами.
3. Разместите в видимой зоне контактные данные (телефоны, e-mail и т.д.), чтобы пользователь знал, куда ему обращаться со своим запросом.
4. Добавьте кнопку возврата на главную страницу, чтобы пользователь мог повторить свой сеанс и вновь попробовать найти то, что ему нужно.
5. Не стоит настраивать 301 редирект на главную страницу. Пользователь не поймет, почему он попал не туда, куда хотел. Возможно, он предпримет несколько повторных попыток, но потом уйдет.
6. Интернет-магазинам полезно добавлять на страницу 404 поисковую строку, чтобы пользователь, столкнувшись с ошибкой, мог сразу найти альтернативный товар. Если в URL прописаны категории ― добавьте в шаблон ссылки на похожие товары или тематические статьи.
7. Помните, что любая ошибка вызывает негатив со стороны пользователя. Отвлеките его анимацией или мини-играми. Это повысит шанс, что разочарованный посетитель задержится на сайте.
8. А еще люди обожают жаловаться. Дайте им такую возможность! Добавьте строку обратной связи с предложением сообщить вам о проблеме. Это проявление заботы о пользователе и дополнительная возможность сгладить негатив.

Совет! Если ваша страница с ошибкой 404 Not Found будет не просто информативной и полезной, но и визуально красивой ― пользователь получит приятный опыт взаимодействия с сайтом и уровень его стресса существенно снизится.

Читайте также: Что нужно знать о поведении потребителей в 2021 году

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

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

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

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

Ссылки на социальные сети, переходы на функциональные станицы сайта, информативная шапка и приятный дизайн ― все это будет полезной информацией для пользователей.

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

И напоследок мы собрали просто эстетичные страницы с ошибкой 404, в оформлении которых сплелись и креатив, в которых сплелись креатив и информативность.

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

• карусель товаров;
• кнопка “На Главную”;
• кнопки категорий услуг;
• строка поиска;
• кнопка вызова онлайн-чата.

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

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

Также читайте другие статьи в блоге Webpromo:

• Офлайн-конверсии Facebook Ads и Google Ads. Как повысить качество лидов?;
• Что такое SEO-тексты и как их правильно писать? Научитесь, чтобы оказаться в Топе Google;
• Performance Marketing в диджитал – тренды 2021, которые нужно внедрить;

И подписывайтесь на наш Telegram-канал про маркетинг.

Страница 404 — классные примеры реальных сайтов

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

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

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

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

Как это возможно? Ответ читайте в нашей статье. 

Страница с ошибкой 404 – что это? 

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

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

Как сделать страницу 404 – основные правила

1. Дизайн страницы должен соответствовать оформлению сайта. Страница с ошибкой 404 не должна выделяться на фоне остальных страниц.
2. Сделайте страницу удобной в навигации. Добавьте ссылки на главную страницу и основные разделы сайта.
3. Следует поработать над формулировкой текста. По понятным причинам здесь не может быть много текстовой информации – это не продуктовая страница и не статья блога. Абсолютный минимум – объяснить, что это за страница, почему пользователь попал на нее и что делать, чтобы выйти оттуда.
4. Добавьте прямую ссылку для контакта с командой техподдержки – предоставьте пользователю возможность сообщить об ошибке. Так вы покажете, что голос и мнение аудитории для вас очень важны.

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

Потому что это препятствие, о которое «спотыкается» лид, и если страница не оптимизирована, то она становится источником утечки трафика. Пользователь просто закрывает сайт и уходит на другие ресурсы. Ваша задача – всеми силами удержать его и направить на другие полезные страницы.

Зачем оптимизировать страницу 404?

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

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

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

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

СОЗДАТЬ САЙТ БЕСПЛАТНО

1. Ultimate Guitar

Фоновый видеоряд страницы 404 идеально подходит под тематику сайта.  

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

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

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

Хабиб Курди, старший копирайтер в GetResponse

Главные выводы: 

• Вовлеченность поддерживается даже без особого текста. Споткнувшийся гитарист или гитарист, потерявший гитару, находят отклик в душе музыкантов, передают вайб, который перекликается с содержанием сайта. 
• Чудаковатые видео говорят посетителям “эй, нет ничего страшного в том, что вы попали на несуществующую страницу”.
• Что насчет текста? Да, он предельно прост и по существу. “Упс” – это стандартное восклицание, которое означает досаду от неудачи. Чуть ниже ссылка на главную страницу (простота навигации), а также ссылка “сообщить о проблеме”. Наконец, 2 cta-кнопки, которые дублируют ссылки выше, но делают их более удобными для клика. 

Обычно страницы 404 выбиваются из общей тональности сайта. Страница 404 Wizarding World является исключением. 

Вы видите кадр, где Гарри Поттер впервые использует каминную сеть для трансгрессии. В этот раз он вместо Косого переулка оказался внутри мрачной лавки волшебника “Горбин и Бэркес” на малоизвестной улочке. 

Изображение полно загадок, которые под силу разгадать истинным фанатам Гарри Поттера. Похожие ребусы можно найти на страницах сайта Wizarding World. 

Чуть ниже вопрос-обращение “Бедный, ты заблудился?” Это в духе миссис Уизли: она часто задается похожими вопросами, когда встревожена чем-то. Здесь мы видим ее в центре фотографии в кругу семьи. 

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

Чуть ниже размещена кнопка с призывом “Вернуться в Wizarding World” (“Вернуться в мир волшебства”), что дает двусмысленность: вернуться на основной сайт или вернуться в мир волшебства? 

Никола Роза, владелец бизнеса Nikola Roza – SEO for the Poor and Determined

Главные выводы: 

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

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

На странице у вас 3 опции: открыть меню Wendy’s, просмотреть доступные вакансии или поиграть в милую игру, стилизованную под Wendy’s, в процессе которой, признаемся, у нас разыгрался аппетит и захотелось отведать наггетсов и картошки фри.

Это далеко не скучная страница 404 – вы ее точно запомните. Она олицетворяет образ компании Wendy’s, которая любит веселье и бургеры.

Ада Дужиньска, эксперт по контент-маркетингу в GetResponse  

Главные выводы: 

• Постарайтесь персонализировать страницу 404, добавив индивидуальности бренда.
• Появление страницы 404 – это не самое приятное событие, но вам под силу добавить позитива.  

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

Страница загружается анимацией разбивающегося яйца. Кричаще-красный цвет сообщения привлекает внимание, а игра слов (eggstinct => extinct – “не существует”) делает отсылку к теме яйца (egg – “яйцо”) – обратите внимание на название агентства – Omelet (омлет). 

Это слово активно используется в кампаниях контент-маркетинга, где услуги Omelet скромно описываются как eggstinctly brilliant. Сайт Omelet заявляет: “Иногда вам приходится вскрыть (crack open – аналогия с “разбить яйцо”) плохую идею, зажарить ее и подать на блюде с толикой сарказма”. 

Omelet – это креативное агентство, которое отличается от других. Они берут обычную идею и переворачивают ее с ног на голову, создавая искрометные кампании, заставляющие людей думать (и смеяться).  

Рональд Самсон, аналитик-исследователь в CreditDonkey

Главные выводы: 

• Подгоняйте страницу под оформление и атмосферу сайта. 
• Добавьте немножко юмора.

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

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

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

Ада Дужиньска, эксперт по контент-маркетингу в GetResponse   

Главные выводы: 

• Простота – залог успеха. Но не забывайте про навигацию.
• Не бойтесь показать здесь свои самые лучшие стороны (например, дизайн в Canva). 
• Регулярно обновляйте страницу 404. 

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

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

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

Ада Дужиньска, эксперт по контент-маркетингу в GetResponse  

Главные выводы: 

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

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

Мне нравится, что Airtable не стали изобретать велосипед и выбрали навигацию, знакомую посетителям сайта. Они предлагают связаться со службой поддержки, а это очень важно для “потеряшек”. Этот прием устраняет неприятный осадок от попадания на несуществующую страницу. 

Том Баррагри, менеджер по продуктовому маркетингу в GetResponse  

Главные выводы: 

• Не забывайте про навигацию в футере сайта.
• Добавляйте четкие CTA-кнопки.
• Совет: можно делать персонализированные предложения на основе посещенных ранее страниц. 

Кто еще мог придумать изобразить бегущий хот-дог, чтобы вызвать у вас удивление и смех? Только Ueno.

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

Брукс Конкл, владелец BrooksConkle

Главные выводы: 

• Несуществующая страница расстраивает, поэтому ваша задача – исправить это.
• Смех продлевает жизнь – добавьте юмора. 

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

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

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

Ада Дужиньска, эксперт по контент-маркетингу в GetResponse  

Главные выводы: 

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

 Мы считаем, что это отличный пример качественной страницы 404. 

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

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

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

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

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

Михал Лешчиньски, глава отдела контент-маркетинга и партнерств в GetResponse  

Главные выводы: 

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

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

Lego идут другим путем: они убеждают, что переживать не стоит, жизнь по-прежнему прекрасна. Ниже четкий призыв к действию “Приступить к покупкам”.

Ирек Климчак, старший менеджер проектов в отделе контент-маркетинга GetResponse

Главные выводы: 

• Проявляйте эмпатию. 
• Помогите посетителю сохранить спокойствие. 
• Предложите четкое решение. 

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

Здесь два призыва к действию:

1) вернуться на главную страницу

2) стать опекуном гориллы при посредничестве Всемирного фонда дикой природы.

Второй призыв визуально более заметный и указывает на приоритеты компании (шутка!).

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

Эта страница соответствует общей тональности сайта.

Радек Качиньски, директор Bouncer.

Главные выводы: 

• Добавляйте четкие призывы к действию.
• Мыслите нестандартно, например, предлагайте поддержку для благородной цели.
• Используйте символ компании, чтобы «очеловечить» страницу.
• Создавайте страницу 404 в соответствии с философией компании.
• Добавляйте в нижней части страницы ссылки на полезный контент (например, на посты блога).

У NASA очень красивая профессионально выполненная страница 404. Текст «Космический объект, который вы искали, исчез за горизонтом событий» и фоновое изображение загадочной галактики очень подходят космическому агентству.

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

Ада Дужиньска, эксперт по контент-маркетингу в GetResponse.

Главные выводы:

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

Время создать страницу 404

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

Одни пытаются изменить негативное восприятие этой страницы на положительное – оставляя забавное сообщение или добавляя интерактив.  

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

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

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

Если вы в самом начале пути и еще не обзавелись сайтом, советуем прочитать нашу статью.

Там мы пошагово объясняем, какие аспекты вам нужно учесть, если вы хотите иметь собственный сайт – это может быть сайт на базе WordPress, требующий продвинутых ручных настроек, или сайт на базе интуитивного блочного редактора вроде конструктора GetResponse. 

Если вы еще не слышали об этом новом инструменте GetResponse, посмотрите краткую видеоинструкцию.

СОЗДАТЬ САЙТ БЕСПЛАТНО

Error 404 Not Found, или как удержать пользователя на сайте

Когда мы вводим на сайте неверный адрес или щёлкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP — Not Found или «Ошибка 404». Но хорошо оформленная страница (с точки зрения дизайна и юзабилити) может не только поднять настроение пользователю, но и понять, что делать дальше. 

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

Что значит ошибка 404?

У этой ошибки много имён:

• 404 Not Found
• 404 Error
• HTTP 404 Not Found
• The page cannot be found
• The requested URL was not found on this server

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

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

Зачем нужна страница 404?

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

1. Вы не можете предотвратить все случайные ошибки, опечатки. Например, ваш потенциальный клиент может пропустить букву, не найти того, что искал и просто уйти.
2. Если у вас многостраничный сайт, то достаточно сложно отследить все адреса. К примеру, какой-то раздел сайта удалили, а где-то могли заменить адрес для улучшения SEO-показателей.
3. Когда у вас много неоформленных страниц 404, с которых пользователи не могут перейти на главную или другие разделы, у вашего сайта снижаются позиции в органическом поиске. Так что продумать дизайн страницы 404 — полезно для SEO.

В каких случаях возникают ошибки 404

На самом деле причин не так много. Вот несколько наиболее распространённых примеров: 

• удаление страницы с сайта;
• перенос ресурса на другой URL без установки редиректа;
• временная недоступность сайта;
• ввод неправильного URL;
• вирусы на сайте.

Неправильная переадресация тоже может быть причиной появления ошибки, поэтому при установке редиректа всегда необходимо проверять, всё ли работает корректно. Подробнее об этом можете прочитать в статье «Как поменять домен, чтобы сайт не просел в поисковой выдаче».

Памятка о создании страницы 404 — о чем стоит помнить

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

Объясните пользователю, что вообще происходит

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

Развлекайте и веселите

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

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

Верните пользователя на сайт

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

Сохраняйте свой стиль

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

Будьте на шаг впереди

Лучший способ сделать так, чтобы пользователь не попал на страницу 404 — постоянно проверять «битые ссылки» на сайте. Если раз в месяц проверять потерянные статьи, видео, картинки и так далее, ваши пользователи будут все меньше попадать на страницу 404.

Кстати, у Google и Яндекс есть бесплатные сервисы для веб-мастеров, которые помогают найти неработающие ссылки.

12 примеров страниц 404

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

Посмотрите на крутую анимацию с сайта «Bench». Это ошибка? Или такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует? Хмм….

Или, к примеру, сервис email-рассылок «MailChimp» не только порадует пользователя прикольной иллюстрацией, но и вернёт на главную страницу.

Сайт игровой компании «Blizzard» ломается в прямом смысле этого слова. 

Некоторые компании делают страницы 404 интерактивными. Например, «Canva» предлагает пользователю собрать несложный пазл.

А сайт «Amphibian» — целую мини-игру с лягушками. 

А как насчёт не менее известного «Docker», где расстроенный кит смотрит на утонувший корабль. Нравится ли вам такая анимация? 

Ещё одну интересную реализацию ошибки 404 можно найти в блоге «Я люблю иконки». Попадая на такую страницу, посетитель увидит светящиеся число 404, по которому пробегает ящерица — очень креативно!

Если продолжать говорить о милых анимациях, то посмотрите на сайт «Airbnb» — при переходе на сломанную ссылку вы увидите не только девочку с упавшим мороженным, но и найдёте полезные ссылки.

На странице ошибке сайта «Pirate Code» вас встретит персонаж с главной страницы. Сейчас он задумчиво прогуливается по 404-й и ждет фикса…

А некоторые сайты предлагают целую блок-схему действий для тех, кто попал на страницу с ошибкой. Отличный пример — сайт «Orangecoat». 

Страница «9GAG» обыгрывает ошибку 404, используя популярные мемы.  

И ещё один пример — сайт «Discord». Здесь вы не только увидите анимацию с робото-хомяком, который старательно чинит страницу, но и полезные ссылки с очень креативным текстом для поднятия настроения! 

⌘⌘⌘

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

Подписывайтесь на рассылку нашего блога — впереди ещё больше интересных статей и вдохновляющих подборок 💙.

Подписаться на рассылку

Советы по созданию страницы с 404 ошибкой

• 17 декабря 2020
• Создание сайтов
• 50K
• 10 мин.

• Понравилось? Поделись!

  Прочесть позже

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

А что же означают эти до боли знакомые всем цифры? Первая цифра ­4 указывает на ошибку со стороны клиента, например, плохое соединение или неверно введенный адрес в строку поиска. Другие два числа обозначают конкретную категорию ошибок, которая включает такие статусы, как Conflict, Precondition Failed, Bad Request и другие статусы четвертого класса. Возникновение данной ошибки имеет несколько причин:

• плохое соединение;
• ссылка, ведущая на адрес, устарела или была удалена;
• страницу перенесли на новый адрес;
• опечатка при вводе адреса сайта.

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

Как удержать клиента: советы по созданию страницы с 404 ошибкой

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

Существует несколько способов вернуть доверие:

1. Добавить ссылки на существующие разделы сайта. Не заставляйте его снова писать вручную адрес сайта, обновлять страницу, искать опечатки. Достаточно даже одной кнопочки «Вернуться на главную». Продублировать популярные ссылки разделов вашего сайта было бы вообще замечательно.
2. Объясните, что произошло. Не обязательно подробно расписывать о происхождении ошибки, составлять длиннющие инструкции. Достаточно обойтись одной или несколькими фразами. Слово «ОШИБКА» совсем необязательное, зачастую лишь больше вгоняет в ступор. Если сайт носит развлекательный характер, можно юморнуть и покреативить. Заставьте улыбнуться гостя, тогда он охотнее вернется на главную страницу. Но обойдемся без юмора ниже пояса и обидных шуточек, давайте уважать наших пользователей.
3. Не лишним будет добавление строки поиска по сайту, это еще больше упростит действия посетителя. Введя в строку желаемый запрос, он быстро очутится в том разделе сайта, в который должен был попасть до появления ошибки.
4. Не забывайте про фирменный стиль и общие элементы внешнего облика сайта. Слишком сильное различие дизайна ошибки и сайта в целом настораживают. Это наводит пользователя на мысль: а не перешел ли я по какой-то нехорошей ссылке? А не покинул ли я нужный сайт. Наличие логотипа или названия компании обязательны.
5. Внесите креатив в страницу с помощью интересной тематической анимации — динамичные иллюстрации всегда приковывают внимание. А ошибка 404 должна вызывать интерес и желание остаться на сайте с вопросом, что еще интересного есть на этом сайте?
6. Если недавно вы переносили или удаляли достаточно большое количество страниц и точно уверены в том, что многие посетители, перейдя на ваш сайт, не найдут нужной информации, вставьте поисковую строку системы Google или Яндекс. Пользователи вам скажут спасибо за то, что вы сэкономили их время, а это плюсик в карму. 😉

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

404 ошибка: как эта страница выглядит на нашем сайте

Полностью весь внешний вид оставили в том же стиле, что и сам сайт. Не трогали верхнее меню и подвал, чтобы никого не шокировать резкими переходами. Для удобства вставили ссылки на самые популярные услуги (для клиентов) и основные разделы блога (для просто интересующихся). Обязательно добавили ссылку на главную страницу 1PS и призыв к действию «Напишите нам», чтобы уж точно никто не затерялся. Но! Учтя все технические вопросы, мы забыли про креатив. Уже работаем над этим. В скором будущем и мы обзаведемся привлекательной и забавной страничкой.

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

50 примеров крутых страниц с 404 ошибкой

1. Freepik

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

2. Giphy

   Ой! Здесь ничего нет. Яркая надпись в стиле GIF привлекает внимание и дает подсказку перейти на главную.

3. Mailchimp

   Лошадка потеряла эту страницу. Но не расстраивайтесь! Кликните на нее и сыграйте в игру. Ведь все мы с вами в душе дети.

4. Font Awesome

   «Знаешь, о чем я постоянно думаю? Где мой сэндвич?» Хорошая идея удержать внимание за счет популярных мемов.

5. Playstation

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

6. IKEA

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

7. LEGO

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

8. Coursera

   Анимация в стиле супрематизма. Различные фигуры складываются в «404». Смотрится необычно, но в то же время понятно.

9. Marvel

   Что-то не так! Я есть Грут. И я помогу вам не заблудиться в темноте — перейдите на главную.

10. Kinsta

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

11. Coca-Cola

    Здесь больше нет Coca-Cola… Пустые бутылки из-под напитка явно никого не устраивают. Нужно срочно перейти на другую страницу.

12. Onesharedhouse

    Пустая таблица без каких-либо данных показывает, что ничего нет. В конце четко написано: 404.

13. Bubka

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

14. F1 News

    Лаконичная 404 страница от новостного портала. Вместо цифры «0» используется колесо боллида.

15. Blizzard

    Бедный мурлок заблудился. Но ничего страшного! Спасательный отряд уже на подходе. Главное — зовите громче: «Мргрмлмлрлрглмрргл!»

16. Android

    Хорошее применение типографики для 404 страницы. Текст четко дает понять, что произошло.

17. Bluleadz

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

18. Subsign

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

19. Chanceupon

    Потерялись во Вселенной? Теперь можно с легкостью вернуться домой одним нажатием кнопки.

20. Github

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

21. Flywheel

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

22. Amazon

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

23. Логомашина

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

24. 9gag

    Еще один пример использование мемов для страницы. Ничего не нашлось — скачайте приложение и ищите там. Отличное решение для целевого действия.

25. Dribbble

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

26. Canva

    Вроде ничего необычного… но игра слов в надписи добавляет нотку юмора.

27. Dropbox

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

28. Hugoware

    Ой-ой! Осторожно! Смотрите не покиньте этот мир, как все элементы на странице. Скорее кликайте на логотип и переходите на главную.

29. Netflix

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

30. Lekhoa

    Кто-то следит за вами. Попытайтесь не попадаться на глаза — возвращайтесь домой.

31. Фокс Pizza

    Лисичка так расстроена: она уронила свою пиццу. =( Но можно перейти в каталог и заказать еще одну.

32. SYDO

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

33. Рив Гош

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

34. Nextpage

    Космические захватчики уничтожили эту страницу! Отомстите им! Как долго вы сможете продержаться под огнем?

35. Brand Crowd

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

36. Dogstudio

    Прекрасная задумка 404 страницы. GIF-анимация меняется каждый раз при перезагрузке.

37. Издательство «МИФ»

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

38. Unsplash

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

39. Purple Bunny

    Упс! Вы попали не в ту кроличью нору. Кролик обеспокоен и просит вас вернуться на домашнюю страницу.

40. Virtual Building

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

41. NVIDIA

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

42. Superrb

    Доска для серфинга балансирует не на волнах, а на цветовом круге. Креативное решение для дизайн-студии.

43. Spotify

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

44. Worrydream

    404 страница в минималистическом стиле. Ой, это же не страница…

45. Jackrabbit

    Посмотрите на этих прекрасных прыгающих кроликов! Все персонажи уникальны по-своему. На такую анимацию можно смотреть бесконечно. А если не бесконечно — перепрыгивайте на главную.

46. Figma

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

47. Mayflower

    Сколько бы вы ни копали, здесь вы точно ничего не найдете. Остановитесь и возвращайтесь назад.

48. Игромания

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

49. YO-YO

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

50. ASOS

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

Заключение

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

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

# дизайн # продвижение сайта # создание сайта # структура сайта # фишки для сайта

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Понравилась статья?

Сожалеем, что не оправдали ваши ожидания ((
Возможно, вам понравятся другие статьи блога.

86 чел. оценили, средняя оценка 4.8

Инфографика «Идеальный дизайн сайта:
что указать в ТЗ для дизайнера, чтобы не возникло недомолвок»

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

Получить бонус

Комментарии для сайта Cackle

Популярные статьи

• 6.3K
• 12 мин.

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

• 12.4K
• 7 мин.

50 примеров потрясающего дизайна лендинга (часть 1)#создание сайта#продающие страницы (landingpage)Лендинг – один из самых эффективных инструментов для продаж в Интернете. И презентовать свой продукт или услугу нужно так, чтобы пользователь к концу просмотра страницы совершил целевое действие. Мы покажем 50 примеров лендингов с потрясающим дизайном, которые вдохновят вас на создание своей высококонверсионной посадочной страницы.

• 18K
• 12 мин.

Форум или комментарии: что лучше для бизнеса?#создание сайта#поведенческие факторы#идеи контентаВ статье разберемся, кому будет полезен форум на сайте, а кому хватит и обычных комментариев. А кому и вовсе всё это не надо (спойлер: таких мало).

Все популярные статьи »

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

Фотография Саадии Минхас

Автор: Саадия Минхас, 25 января 2019 г.
Отмечен в креативность , дизайн , тенденции дизайна

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

Почему?

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

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

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

1.

Привет собакам! Amazon использует страницу 404, чтобы дать вам некоторое представление о культуре их компании (включая обязательные изображения милых щенков). Amazon также немедленно берет на себя ответственность за ошибку (даже если это не их вина) — с помощью слова «SORRY» большими заглавными буквами, уведомляющего пользователя о том, что это не та страница.

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

Простота часто имеет свою силу. Страница Designer News 404 передает сообщение — бонусные баллы за то, что на ее реализацию не требуется месяц времени разработчика.

10.

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

11.

The Interaction Design Foundation дает посетителю возможность отправить электронное сообщение с описанием того, что они делали, когда заблудились, и вопросом, что они ожидали увидеть вместо этого. В этом подходе есть благородное, хотя и ошибочное намерение — если они достаточно заботятся о своих посетителях с ошибкой 404, им действительно следует просматривать журналы ошибок своего веб-сайта (или использовать простые онлайн-инструменты для поиска веб-сайтов) и определять распространенные причины, по которым люди не могут добраться. их предполагаемые пункты назначения.

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

Простое монохромное предложение 404. Одна небольшая критика заключается в том, что основную кнопку действия («Вернуться домой») трудно сразу идентифицировать.

20.

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

Биография автора:
Саадия Минхас — увлеченный UX-дизайнер, обладающий обширным опытом руководства и разработки потрясающих пользовательских интерфейсов, предоставляя высококачественный дизайн для продуктов и проектов по всему миру. Чтобы прочитать больше ее статей, посетите Medium, UXDesignWorld

Читать дальше…

• Роль дизайна в создании бренда
• 10 тенденций дизайна, которые миллениалы примут в 2019 году
• 25+ инструментов для запуска вашего стартапа в 2019 году
• Дизайн бренда 101 для основателей стартапов
• Нужен ли вашему стартапу дизайнер UX или UI?
  

Примеры Genius из 404 страниц

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

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

Лучшие 404 страницы

01. Netflix

У Netflix есть целый ряд контента для страницы 404 (открывается в новой вкладке), и он соответствующим образом включил полную страницу из фильма «Затерянные в космосе». Сайт спрашивает: «Заблудился?» и предоставляет четкую кнопку, чтобы вернуть вас на домашнюю страницу. Единственным улучшением, которое мы могли бы себе представить, было бы предоставление ряда фильмов, как это делает IMDB (см. далее в списке), чтобы вы никогда не знали, какой из них вы собираетесь получить.

02. M&Ms

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

03. KonMari

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

04. Marvel

У Marvel есть несколько версий своих 404 страниц, которые (конечно) посвящены MCU. Мы заметили упоминания о Гидре (одна из них выше) и оке Утау, и это лишь некоторые из них. Посетите страницу Marvel 404 (откроется в новой вкладке), чтобы узнать, какой из них вы получите.

05. LEGO

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

06. Omlet

Игра слов уведет вас далеко, поэтому мы ценим подход Omlet к странице 404. На странице креативной компании написано: «Эта страница — это яйца», когда на экране появляется анимированная трещина в яйце. Ярко-красный цвет показывает, что это «предупреждение», а тема яйца соответствует имени Омлета. Что не нравится?

07. Mantra Labs

Эта страница 404 от Mantra Labs (открывается в новой вкладке) проста, но эффективна. Иллюстрация космического человека, плавающего в «404», сопровождается текстом «Ой! У тебя кончился кислород». Также есть таймер обратного отсчета до того, как вы вернетесь на домашнюю страницу. Если вы моргнули, вы могли бы даже пропустить эту страницу 404, хотя стоит специально ошибиться, чтобы посетить ее.

08. Готов к выживанию

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

09.

Этот сайт сравнения покупок автомобилей поможет вам найти идеальный автомобиль, но если вы отклонитесь от курса, его страница 404 предлагает умный способ удержать вас на сайте. Посетителям предлагается 8-битный игровой экран. Все, что вам нужно сделать, это нажать на кнопку «Пуск», чтобы насладиться простой игрой с горизонтальной прокруткой, где все, что вам нужно сделать, это избегать препятствий и других автомобилей. Попробуйте страницу 404 Carwow (откроется в новой вкладке).

10. Ueno

Ueno — агентство полного цикла с выдающейся страницей 404. То, что вы видите выше, не отражает всех усилий, затраченных на это: хот-дог анимирован, поэтому он движется по бесконечному циклу через сюрреалистический пейзаж, и есть несколько веселых поясняющих сообщений для изучения. Это безумие и совершенно уникально — посетите страницу ошибки Ueno здесь. (открывается в новой вкладке)

11. Gymbox

Gym Box — это компания, занимающаяся тренажерным залом, которая предлагает «самые уникальные и разнообразные занятия в Лондоне». Ограничениями этого утверждения может быть великолепное зрелище фитнеса 80-х, которое появляется на его странице 404 (открывается в новой вкладке). Короткие шорты, укороченные топы и выпячивание таза — чего еще желать от страницы с ошибкой?

12. Slack

Будет лишь небольшим преувеличением сказать, что обновление логотипа Slack в 2019 году было встречено всеобщим ужасом, а его супер-сахаристая страница 404 наверняка найдет немало ненавистников. Если вы ошибетесь в Slack, вы попадете в волшебный пейзаж с пышной листвой, горами и радугами, где свободно бродят бабочки, цыплята и крошечные поросята. Сцена также прокручивается по горизонтали движением мыши (попробуйте страницу 404 Slack здесь (откроется в новой вкладке)).

13. Purée Maison

Purée Maison — креативное агентство, специализирующееся на коммуникационной стратегии, и его характерный веб-сайт полон восхитительных анимаций (рекомендуем осмотреться (откроется в новой вкладке)). Мы особенно любим эту сюрреалистическую страницу 404, которая каким-то образом идеально передает боль от столкновения с цифровой стеной.

14. Pixar

Некоторые люди могут принимать вещи слишком близко к сердцу. Страница Pixar 404 (открывается в новой вкладке), на которой изображена Грусть из чрезвычайно популярного фильма «Головоломка» 2015 года, проста, понятна и выполняет свою работу. Однако, если это отражает вашу реакцию на получение ошибки 404, возможно, вам нужно немного пересмотреть свою жизнь.

15. Студия 20th Century Studios

Не можете найти нужный фильм? Студия 20th Century Studios (ранее 20th Century Fox) после ребрендинга предлагает отличный способ вдохновить вас, когда вы ошибаетесь в URL-адресе; на странице 404 появляется кадр из культового фильма с содержательным заголовком и подборкой других фильмов, которые вы, возможно, захотите посмотреть. Мы заметили отрывки из фильмов «Эдвард руки-ножницы», «Месть ботаников» и «Наполеон Динамит» и других (посмотрите на страницу 404 (откроется в новой вкладке), чтобы узнать, какой из них вы получите).

16.

Cloud Sigma — это облачный сервер и служба облачного хостинга, работающая в США, Европе и Азиатско-Тихоокеанском регионе. Хотя гибкие облачные серверы полезны, они не совсем забавны, поэтому мы предполагаем, что компания приложила дополнительные усилия, чтобы добавить немного юмора на свою насмешливую страницу с ошибкой 404 (откроется в новой вкладке). Мы задаемся вопросом, сколько времени пройдет, прежде чем этот услужливый младший разработчик будет переманен конкурентами.

17. BluePath

Еще один веб-сайт, который использует юмор на своей странице с ошибкой 404, — это базирующаяся в Атланте консалтинговая фирма по стратегии данных BluePath. На странице 404 (открывается в новой вкладке) показана карта Атланты с точкой на другой стороне страницы, указывающей на то, что посетитель «уходит далеко от карты». В чрезвычайно слабой связи карта также включает основанную на данных информацию, показывающую зарегистрированные преступления в этом районе. «Почему? Потому что это преступление, для которого вы нас еще не наняли!» Ох уж эти чокнутые аналитики данных.

18. Куало

(открывается в новой вкладке)

Веб-хостинговая компания Kualo работает уже более 15 лет — вечность в Интернете — и ее страница 404 возвращает нас в прошлое, предлагая посетителям игру Space Invaders на тему Куало. . Это не идеально. Ключевая стратегия, состоящая в том, чтобы отстреливать внешние края флота, чтобы замедлить спуск захватчиков, поначалу не работает. Но это весело, и вы можете получить скидку на хостинг, если вам удастся набрать более 1000 баллов. Сыграйте в игру Куало здесь (откроется в новой вкладке).

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

Как говорит Хлоя Золлингер из Pointe: «Попадание на страницу с ошибкой 404 чаще всего разочаровывает пользователя сайта. Мы понимаем, насколько важен пользовательский опыт на веб-странице. Чтобы улучшить впечатление наших посетителей, наша команда посвятила себя созданию интерактивного игра на нашей странице 404».

19. Стив Ламберт

Нью-йоркский художник Стив Ламберт описывает это как «самую неловкую страницу с кодом 404, которая не найдена в Интернете», и вы знаете, он вполне может быть прав. . В нем есть мучительная часть для камеры (открывается в новой вкладке), которая просто продолжается и продолжается. Мы бросаем вызов вам, чтобы дойти до конца его видео, не сжав ни одной части тела.

Следующая страница: Больше вдохновляющих 404 страниц для изучения

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь, чтобы получить неограниченный доступ

Наслаждайтесь своим первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть учетная запись? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

• 1

Текущая страница: Страница 1

Следующая страница Страница 2

Рут несколько лет работала заместителем редактора Creative Bloq, а также работала или писала почти для всех бывших и нынешних печатных изданий сайта, от Computer Arts до ImagineFX. Теперь она целыми днями пишет обзоры матрасов и походных ботинок в качестве редактора по туризму и оздоровлению на T3.com, но в свободное время продолжает писать о дизайне на внештатной основе.

10 отличных примеров страниц ошибок 404 | by Weekday HQ

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

«СТРАНИЦА НЕ НАЙДЕНА» — это, наверное, самая раздражающая вещь на экране. Это страница, на которую никто не хочет попасть. Долгое время эта страница повторяла слова «разочарование» и всегда печально известна как «последняя страница Интернета».

Идея 404 возникла, как вы уже догадались, в комнате под номером 404, в которой располагались самые первые веб-серверы в ЦЕРНе.

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

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

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

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

1. Flipping Book

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

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

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

2. Behance.net

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

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

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

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

Беги домой — отличный навигационный CTA для веб-сайта на тему ужасов, и я всегда ценю хорошую игру слов. 🙂

3. CSS-трюки