Текст для страницы 404: Копирайтинг для страницы «Ошибка 404» — Студия Дениса Каплунова

Содержание

Копирайтинг для страницы «Ошибка 404» — Студия Дениса Каплунова

Все течет, все изменяется…

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

А ссылки на них со сторонних источников могли остаться. Переходят по ним новые посетители и видят перед собой пустой экран с фразой “404 Not found”.

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

Посетитель снова видит перед собой “404 Not Found”.

Как правило, это по умолчанию совсем невзрачная страница, которая только отталкивает.

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

 

Классические правила оформления страницы «Ошибка 404»

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

  1. Размещение логотипа и имени сайта, компании, проекта – это дает возможность посетителю понимать, что сайт существует. Достаточно лишь кликнуть по лого, и он уже на главной странице.
  2. Наличие сообщения, которое четко говорит посетителю, что произошло и (желательно) что делать ему дальше.
  3. Заметная кнопка, переводящая посетителя на главную страницу сайта.
  4. Допускается наличие контактных данных владельца сайта, чтобы при желании с ним сразу связаться
  5. Иконки социальных сетей – раз уж человек пришел к вам в гости, не лишним будет его пригласить в круг читателей и последователей вашего ресурса в социальных сетях

 

Нужен ли вообще текст на странице «Ошибка 404»?

Конечно, нужен!

Иначе вы потеряете посетителя. И возникает вопрос – нужен текст-то для чего?

Скажу так: на этой страницы у текста есть 3 последовательные функции:

  1. Сообщить, что произошло
  2. Указать причины происшедшего
  3. Подсказать, что делать дальше

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

 

 

Сообщите, что произошло

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

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

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

  • «Извините! Страница, которую Вы ищете, не может быть найдена»
  • «Упс… Мы не можем найти то, что Вы ищете»
  • «Простите, но у нас возникли проблемы с поиском страницы, которую Вы запрашиваете»
  • «Добро пожаловать на страницу 404! Вы находитесь здесь, потому что ввели адрес страницы, которая уже не существует или была перемещена по другому адресу».
  • «Так уж получилось, что из множества страниц нашего сайта Вы оказались как раз на той, которая уже не существует…»
  • «404… Увы, но эта страница где-то затерялась в галактике Интернета»
  • «Дружище, извини, но мы не смогли найти эту страницу…»
  • «Ищете что-то интересное на нашем сайте? К сожалению, страница, которую Вы запрашиваете, не существует…»

 

Укажите причины происшедшего

Очень часто на странице «ошибка 404» этот текстовый блок вообще отсутствует

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

А дальше думайте, как хотите, если вообще хотите думать.

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

Вот несколько примеров формулировок указания возможных причин ошибки 404:

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

 

Подскажите, что нужно делать

Во-первых, не паниковать…

Во-вторых, всегда можно переадресовать человека на главную страницу сайта (или любую внутреннюю – если в этом есть необходимость).

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

Звучит это примерно так:

  • «… Чтобы найти интересующую Вас информацию – воспользуйтесь этой формой поиска»
  • «… Переходите на главную страницу – там Вы также сможете найти много полезной информации»
  • «… Пожалуйста, воспользуйтесь навигацией или формой поиска, чтобы найти интересующую Вас информацию»

 

Выделяем главное

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

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

Поэтому…

Со своей стороны, позвольте поделиться личным мнением и рекомендациями:

  1. Избегайте фразы «Ошибка 404», замените ее на более мягкий вариант – «Страница 404», просто слово «ошибка» способно спугнуть посетителя.
  2. Аналогично – убирайте с дизайна любые предупреждающие знаки («стоп», «внимание») – это также способно спугнуть посетителя
  3. Если у вас бизнес-ресурс и ориентированный на клиентов, рекомендуем придерживаться четкого, строго и понятного стиля изложения.
  4. Если блог и развлекательный портал – можно отходить от «официальностей», подключая юмор и оригинальность – главное, чтобы ваша идея ориентировалась на формат восприятия информации читателей
  5. Не нужно ограничиваться сообщением о том, что произошло, обязательно подскажите посетителю, что ему делать дальше

А если наглядно, вот вам простой пример для сайта компании – строго, четко и понятно:

Здравствуйте!

Добро пожаловать на «страницу 404» нашего сайта.

К сожалению, введенный Вами адрес недоступен. Этому может быть несколько объяснений:

  1. Страница удалена (из-за утраты актуальности информации)
  2. Страница перенесена в другое место
  3. Возможно, при вводе адреса была пропущена какая-то буква (на самом деле, у нас самих так часто получается)

Тем не менее, предлагаем Вам найти нужную информацию с помощью этой простой формы: 

ФОРМА

Или же приглашаем Вас посетить другие разделы нашего сайта:

Главная Услуги О компании Примеры работ Отзывы Блог 

Если у Вас возникли какие-то вопросы – свяжитесь с нами по тел. ______ или же напишите на e-mail ___________.

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

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

Если у вас блог – можете добавить ссылки на последние или самые популярные публикации.

Пока мы готовили этот материал – решили со временем разработать и собственную страницу. Тактика «сапожник без сапог» возникает тогда, когда много делаешь для клиентов, и нет времени на себя.

Хорошо это или плохо – на самом деле, не важно. Это просто факт.

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

Понравилось? Поделитесь с друзьями!

Как сделать из страницы 404 что-то полезное и интересное: 30 примеров

Когда мы вводим на сайте неверный адрес или щелкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP – Not Found или «Ошибка 404». Мы стремимся понять, что же произошло, и скорее покинуть эту страницу.

Повышаем конверсию: поиск по сайту как часть воронки продаж

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

Рассмотрим наиболее удачные примеры.

AliExpress

  • Автоматический редирект на главную страницу сайта через 4 секунды.

Amazon

  • Предложение перейти на главную страницу.
  • Есть ссылка на страницу «Собаки Amazon»:
Занимаемся разработкой фирменного стиля: повышаем узнаваемость бренда. Подробнее

Aviasales

  • Предложение перейти на главную страницу.
  • Ссылки на сервисы компании.

Blizzard

  • Уместный сарказм.
  • Возможности перейти во все разделы со страницы.

Coca-Cola

  • Возможность перейти на главную страницу.
  • Доступ к разделам компании со страницы (круглая красная кнопка в верхнем правом углу).
  • Подписка на новости компании.

Convert Monster

  • Креативное оформление – молодая красивая девушка с призывом в духе sex sells.
  • Доступ ко всем разделам сайта из футера (его видно при прокрутке вниз).
  • Изображение и призыв к действию меняется каждый раз при обновлении страницы 404:
  • Прямое указание на то, что что-то пошло не так. И извинение.
  • Предложение вернуться на главную страницу или воспользоваться техподдержкой.

Evernote

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

Тупичок Гоблина

  • Графическое оформление в духе компьютерных игр конца 90-ых.
  • Анимация на странице – в прорези двери справа появляются красные глаза.
  • Доступ из страницы ко всем разделам сайта.

Студия Дениса Каплунова

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

Студия Артемия Лебедева

  • Оригинальный сопроводительный текст.
  • Доступ к самым интересным разделам сайта студии.

Новолипецкий металлургический комбинат

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

Ozon

  • Оригинальный сопроводительный текст.
  • Доступ к каталогу товаров.
  • Возможность посмотреть все акции и спецпредложения «Озона».

Сотмаркет

  • Нетривиально оформленные ссылки на разделы каталога электроники.
  • Кликабельный логотип «Сотмаркет» для перехода на главную страницу сайта.

Texterra

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

Банк «Тинькофф»

  • Оригинальный текст со смайликом.
  • Ссылки на основные услуги банка «Тинькофф».

Яндекс

  • Возможность воспользоваться поиском 🙂
  • Ссылки на сервисы «Яндекса».
  • Ссылка на установку переключателя раскладки клавиатуры Punto Switcher.
  • Рекламные объявления (!) на странице 404.

Университет «Синергия»

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

Студия аниматоров «Кудесник»

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

Lego

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

«Кинопоиск»

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

Творческая мастерская «Штуки»

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

Playboy Russia

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

Единый визовый центр»

  • Запоминающаяся картинка-мем с Grumpy Cat.
  • В описании страницы способы решения проблемы выполнены гиперссылками.
  • За присланный на почту скриншот страницы 404 обещают подарок.

Udem

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

Pikabu

  • Скажу просто – на этой странице прекрасно ВСЁ!
  • Что за существо сидит рядом с парнем?

Pixar

  • Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить.
  • Заголовок страницы «Оооо… Не плачь». Трудно сдержаться, глядя на изображение.
  • Описание страницы написано будто от лица Радости из того же мультфильма:

«Это всего лишь ошибка 404!

То, что ты ищешь, могло затеряться в долгосрочной памяти».

Какой не должна быть страница 404

  1. Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
  2. Внешний вид страницы
  • с нечитаемыми символами:
  • со стандартной и малоинформативной надписью:
  • дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):

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

18 гениальных страниц ошибки 404

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

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

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

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

Kualo

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

The Australian

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

Dan Woodger

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

Bret Victor

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

Bit.ly

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

Blizzard Entertainment

Битое стекло = битая ссылка, логично, правда? Обвинять пользователя — наверное, не лучший стиль для подписи, но Blizzard Entertainment может себе это позволить. Это хороший пример того, как простая картинка отлично работает в паре с простым текстом.

Magnt

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

CSS- Tricks

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

Kwarter

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

Blue Fountain Media

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

EmailCenterUk.com

А это вообще блеск! Попадая на эту страницу 404, вы получаете выбор уволить кого-то из отдела разработки одним кликом мышки. Ясно, что это часть их шутки «для своих», но какой классный способ вовлечь пользователей! Интересно, что будет, если кого-то выбрать…

Amazon

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

DashThis

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

Huffington Post

Интернет-издание «Huffington post» пошло по неформальному пути, по максимуму использовав всю силу милых пёсиков, против которой просто невозможно устоять. Ну разве можно не улыбнуться, глядя на картинку с этой милой мордахой и простой подписью? С таким комбо не прогадаешь.

9gag

Когда движущей силой твоего бренда становится юмор, нужно удивлять пользователей еще большей порцией юмора. Раньше на странице ошибки 9gag была гифка из «Криминального чтива» с Джоном Траволтой, который в растерянности бродил вокруг, а под гифкой текст: «Здесь ничего нет». Теперь у них на странице какой-то новый мем, который я не могу расшифровать — может, получится у вас.

Daily UI

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

Team Coco

Сайт Конана О’Браена не разочаровывает никогда. Сменяющие друг друга серии гифок показывают лучшие моменты с Энди, так что их страница 404 — настоящая удача. И конечно, вам стоит посмотреть на нее в действии

Distilled

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

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

1. Остроумный, непринужденный текст

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

2. Правильная графика, точно передающая идею

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

3. Безупречный дизайн

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

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

Related Articles

Дайджест блога Depositphotos

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

80+ великолепных страниц ошибки 404

Иногда посетитель сайта видит ошибку 404 потому, что веб-страницы попросту не существует – она удалена или переименована (404 Not Found – страница не найдена). Нередко случается и неправильный ввод адреса. В любом случае, никого не обрадует безликое оформление 404-й или простое сообщение об ошибке. Креативными дизайнерами создаются более полезные для пользователя, эстетически красивые индивидуальные страницы 404.

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

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


Интересно и оригинально оформленные 404 страницы

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

01. Discord App

За работой квантовый хомяк-робот из мира Discord.


02. Beach Park

Плавник акулы, он и в луже 404-й страницы захватывает внимание.


03. Toggl

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


04. Designzillas

Дизайн-зиллы сделали страшилку из своей 404 страницы. Персонаж монстра служит символом существенных результатов креативной студии. Прокрутите – увидите как вылупляется дракон.


05. Bench

Такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует?


06. Pirate Code

Персонаж с главной страницы сайта задумчиво прогуливается по 404-й.


07. Weemss

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


08. Flipping Book

Может кому знакомо? В домашнем хаосе с малышом и котом, вырванные страницы становятся самолетиками.


09. Vebk

Красивая рестро страница 404 ошибки – в тонах и жанровой стилистике самого сайта.


10. De’Nastia

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


11. Slack

В странном месте бродят свинки с курицами, природа буйствует красками. Страница «Not Found» напоминает сказку.


12. Pikabu

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


13. Rabota Gk-Rte

Обратный отсчет в ожидании столкновения ракеты с землей…


14. Lyft

Страница ошибки сайта американского такси-сервиса.


15. Kick Point

Внедорожник 4×4 на странице 404


16. Madwell

Креативное агентство развело анимированный костер на 404-й странице.


17. Clockwise

Перекати-поле подкатывается к надписи 404. Это растение пустынь и степей, а вы на странице ошибки.


18. Matteo Vandelli

Интерактивная анимация цифр 404 на странице с ошибкой.


19. Grainand Mortar

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


20. Rails Ware

Тематическая 404-я сайта разработчиков и дизайнеров.


21. Domenart Studio

Красиво оформленная 404-я страница российской студии дизайна.


22. Love Beets

Английская ферма выращивает овощи для салатов. Интереактивный редис под социальный шаринг на 404-й странице – это оригинально и уникально.


Страница 404 и красивая айдентика

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

23. Sketch

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

24. Puree Maison

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


25. Hungry Boys

Благодаря лого и анимации прелоадера, жест облизывания в перевернутом виде уже понятен.


26. Phive

После эксцентричного поведения при загрузке страниц, значок прелоадера на 404-ой выглядит изможденным: «Не могу согнуться, потеря 404 грамм жира…»


27. Mail Bakery

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


28. Moosend

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


30. A propos du cancer

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


31. Studio Wolf

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


32. Horton Works

В дополнение к логотипу и сам слон.


33. Pointless Corp

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


34. Nagyi Titka

Рекламный персонаж продукта крупным планом на 404-странице.


35. Panoraven

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


36. Waaffle

На странице с ошибкой персонаж сайта начинает плавиться.


37. Avocode

Страница 404 весьма недвусмысленно подчеркивает креативный нейминг (avocode от авокадо).


38. Yelp

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


Тематичные 404 страницы

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


39. E-co

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


40. Slodych

Аппетитная выпечка цифр 404.


41. Codemy Concept

Чашка кофе – символ разработчика.


42. Prob2b

У сервиса по созданию лендингов и повышению бизнес-эффективности лаконичная страница 404 с красивым плоским дизайном.


43. Handy Hat

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


44. Limra Technosys

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


45. Max Style

У агентства по цифровому продвижению компаний эффектная страница 404.

46. Fuse Lab Ceative

Красивый агентский сайт. Страница ошибки эффектно оформлена объемными цифрами 404.


47. 1ps

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


48. Woodst

Анимированная 404-я на сайте агентства, специализирующегося на графике.


Забавные и необычные 404-е

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


47. Tapfiliate

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


48. Пора валить

Анимированная 404-страница агентства «Пора валить»: свинья развлекается на тракторе.


49. Vintage

Забавно анимирована страница 404 украинской студии: чем-то обеспокоен трафаретный олень.


50. Insurance Experiments

Свой забавный промо проект UK-страховщики назвали экспериментальным, а мульти-страницу 404 сделали веселой.


51. Multi Work

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


52. Fromage Abondance

Видео-коуб: французская корова-модница — соответствует тенденциям, также как и сайт.


53. Red Collar

Причудливая фантазия с анимацией на 404 странице цифрового агентства.


404 коты, собаки и разные создания

Смешные и позитивные коты и собачки, которые в какой-то мере выражают назначение сайта, поддерживают общую идею дизайна.


54. Html6

Сделано на шаблоне: интерактивный и сердитый кот.


55. Buzz Feed

Gif-ка слегка анимированного кота на 404-й… а как иначе для развлекательного медиа ресурса?


56. Life Daily

Интересующийся кот-404 с развлекательного веб-ресурса.


57. Kayako

Анимированный котенок рыжими пятнами удачно удачно поддержал акцентный цвет сайта.


58. Idesign

Непонятные создания перед непростым решением. Но надо возвращаться на главную.


59. Help Scout

Собачки рвутся с поводка… впрочем позитивных flat-иллюстраций немало на этом сайте.


60. Marketohttps://www.marketo.com/404

Разве кого-то может рассердить такая мордочка.


61. 99designs

Щенок — терминатор.


Красиво иллюстрированные Not Found страницы


62. Enjoy Kamchatka

Красиво оформленная под 404-ю ошибку фоновая фотография привлекает целевую аудиторию на сайт.


63. Skipio

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


64. Epic

Красивая страница ошибки, выполнена как креативный вариант страницы «О нас».


65. Branded7

Красивая иллюстрация 404 в стиле шапки и футера сайта.


66. Дом со всем

Качественно отрисованная 404-я страница под тематику сайта компании.


67. Bright Scout

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


68. Deep Time

Потерянная во времени, винтажная 404-я страница проекта интерактивной инфографики об истории Земли.


Провальное / непреодолимое. Потерянные на 404-ой

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


69. FSRussia

Страница 404 сайта федерации фигурного катания: «провальное выступление».


70. Sibirix

Видео-коуб 404 новосибиркой дизайн студии с роботом-собакой.


71. Anton & Irene

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


72. Straight North

Кирпичная стена за дверью. Ваш клик привел на несуществующую страницу. Может не все клики засчитываются? Попробуйте еще – тут зачтется (специализируются на  PPC рекламе, SEO).


73. Cloud Cart

Попал на распутье (смысл в том, что нужно выбрать подходящий сервис платформы).


74. Ucraft

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


75. Crello

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


76. Kleo

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


Игровые страницы 404

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

77. Heyzap

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


77. Kualo

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


78. Pointe Pest

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


79. Canva

Сбор пазла – совсем несложная игра.


80. Amphibian

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

Правильная страница 404 ошибки. Примеры

Содержание:

Как правильно оформить страницу 404

Сколько раз на просторах интернета Вы натыкались на страничку с сообщением о том, что запрашиваемая страничка не существует?

И что Вы обычно делали в этой ситуации?

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

Также и на Вашем сайте посетителям периодически встречается ошибка 404:

– Что это такое? – Думают они и впопыхах закрывают вкладку в браузере. И при этом Вы теряете очередного потенциального клиента.

А все потому что обычно ошибка 404 – это плохо оформленная страничка с тем самым сообщением о несуществующем документе или файле.

Почему дизайн 404 страницы так важен

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

Чаще всего причиной этой ошибки становятся:

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

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

Какой должна быть правильная 404 страница

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

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

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

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

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

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

  7. Если Вы не обладаете переизбытком креативного мышления, всегда можно просмотреть примеры страницы ошибки 404 в интернете – Google Вам в помощь!

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

А какой дизайн 404 страницы используете Вы?

 

Идеальная страница 404 ошибки, или как удержать пользователя на сайте? / Хабр

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

В качестве вступления отметим, что страница 404 «Не найдено» (404 Page Not Found) – это один из кодов состояния HTTP, принятых Консорциумом Всемирной паутины (W3C) в 1992 году. Для тех, кому интересно значение цифр 404, вкратце расскажем.

  1. Первая «4» означает, что произошла ошибка со стороны клиента. Такой ошибкой может быть неверно написанный URL или запрос несуществующей страницы. В свою очередь, первая «5» значила бы ошибку со стороны сервера.
  2. Цифры «04» — определяют конкретную ошибку Not Found из группы 4хх. Среди других ошибок из этой группы — 400 Bad Request, 401 Unauthorized, 402 Payment Required, 403 Forbidden и так далее.

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

причинам

:


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

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

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

Принимая это во внимание, приведем
список рекомендаций по созданию кастомной 404-й страницы.
  1. Будьте любезны с посетителями.Они попали на эту страницу не по своей вине. Постарайтесь выразить свое сожаление и готовность помочь.
  2. Не углубляйтесь в технические детали. Термин «ошибка 404» сам по себе уже в достаточной мере техничен и в то же время понятен большинству пользователей. Нет никакой необходимости отпугивать посетителей любой другой специфической информацией о причинах этой ошибки. По сути, необязательно даже использовать цифры «404», достаточно просто объяснить суть проблемы.
  3. Предложите пользователям проверить написание ссылки. Если они вводили адрес ссылки самостоятельно, то вполне вероятно могли допустить ошибку.
  4. Придерживайтесь единого стиля сайта. Дизайн страницы 404 по оформлению и по ощущениям должен быть выдержан в стиле Вашего бренда, чтобы у пользователей не возникло заблуждения, что они попали на какой-то другой сайт.
  5. Страница ошибки 404 не должна выглядеть как обычная страница. Ваши посетители должны ясно видеть, что страница не была найдена и не содержит какого-либо контента. Поэтому не стоит наполнять ее слишком большим количеством текста и ссылок.
  6. Небольшая порция юмора никогда не помешает. Довольно часто 404 страница становится для дизайнеров и разработчиков платформой для выражения своих креативных и юмористических идей. Вместо того чтобы пользователи быстро закрывали ненайденную страницу, лучше удержать их от закрытия сайта, заинтересовав забавно и изобретательно выполненной страницей.
  7. Будьте полезными и предоставьте ссылки на возможные совпадения. Если пользователи оказались на ненайденной странице, они, вероятно, что-то искали. Так помогите же им это найти. Разместите на странице меню или ссылки на недавно перемещенные страницы. Или почему бы не дать ссылки на самые популярные страницы Вашего сайта? Либо на самый новый и актуальный контент. Так или иначе, пользователи должны быть не более чем в одном клике от перехода на какую-либо другую страницу сайта. И, конечно же, всегда давайте ссылку на главную страницу.
  8. Добавьте строку поиска. Чтобы не потерять своих посетителей, позвольте им найти то, что они искали, оказавшись на странице ошибки.
  9. Обеспечьте способ отправить отчет об ошибке. У пользователя всегда должна быть возможность отправить вам сообщение об ошибке, если он пожелает. Это поможет Вам узнать о каких-либо внутренних недочетах сайта. Еще лучшим решением для отслеживания проблем на сайте станет автоматическое уведомление. А если произойдет внезапный всплеск 404-х ошибок, полезным будет мгновенное уведомление. Это позволит исправить проблему в режиме реального времени, пока она еще релевантна.
  10. Позаботьтесь о вопросах SEO. Для оптимизации сайта важно максимально сократить количество внутренних ссылок на 404-е страницы, а еще лучше вовсе исключить возможность формирования некорректных URL адресов, ведущих на страницы 404. Инструменты для вебмастеров помогут Вам отслеживать ошибки на сайте, в том числе и ошибки с кодом 404 Not found. Более того, эти инструменты помогут Вам понять, откуда берутся ошибки и как они формируются – ошибка в URL ссылки на сайте, либо это атака конкурентов.

    Немного отклоняясь от оригинала статьи, добавлю ссылки и скриншоты инструментов, о которых говорится в этом пункте.
    Google:

    Яндекс:


    Также рекомендую ознакомиться с официальной информацией о страницах 404 от поисковых систем: Google — здесь и Яндекс — здесь.

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

Креативные примеры страниц ошибки 404

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

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

Mashable

 

Текст с фото: Плохие новости – мы не смогли найти страницу, которую вы ищете. Хорошие новости – мы наши все ваши потерявшиеся носки.

Template Monster

 

Текст с фото: Снежный человек, НЛО, хорошие актеры в фильмах Майкла Бэя… сущестование их не доказано. Так же, как и страница, которую вы ищете на TemplateMonster. Но нам кажется, что Вы тут оказались не случайно. Так почему же не вернуться на нашу домашнюю страницу или заглянуть на наш блог? А, кстати, вот Вам прощальный подарочек в виде страницы 404, если вы фанат креативных страниц 404, спешите скачать один из бесплатных шаблонов страниц ошибки 404, созданных нами!

Defrozo

 

Текст с фото: Нам жаль, но страница расфокусирована.

Diesel

 

StickerMule

 

Blue Daniel

 

dario brozzi

 

centresource

 

Текст с фото: Ребята, извините, парковка закрыта! Ваши действия – пойти домой или врезать лосю.

agens

 

Текст с фото: Похоже, что Вы потерялись в космосе. Может Вы ищете что-то из наших последних проектов?

Tinsanity

 

 

MailChimp

 

Good Dog Design

 

Текст с фото: Пропала собака! В последний раз видели в желтом кружке заголовка. Черно-белая. Похожа на колли. Отзывается на “good dog”. Отличительные особенности – невероятно быстро разучивает новые трюки и вытаскивает упавших в колодец сирот. Если найдете – вкусно покормите и подкиньте пару ему пару головоломок.

Tripomatic

 

Текст с фото: Извините, эта страница так и не вернулась из путешествия по пустыне Атакама.

Starbucks

 

RSQ

 

Текст с фото: Глубоко скорбим по поводу вашей потери. Ссылка мертва. Соболезнования можно найти на домашней странице RSQ.

Focus Lab

 

Текст с фото: Хватит шуметь. Почему бы не перейти на страницу, которая работает? Вы что, хотите взломать наш сайт? В чем дело? Проходите. Тут не на что смотреть.

Michael Schmid

Текст с фото: Гамбургер! Подождите, что? Да, вот так я отреагировал, когда Вы тут появились. Это страница ошибки 404, тут не на что смотреть. Проходите мимо.

Высоких конверсий!

04-04-2016

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

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

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

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

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

Что такое страница с ошибкой 404 и зачем она вам нужна?

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

Но вот в чем дело…

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

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

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

Например, если ваша страница сообщения об ошибке 404 выглядит так…

… это оттолкнет людей, и они могут никогда не вернуться.

Тем не менее, если вы оптимизируете целевую страницу 404 not found с помощью:

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

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

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

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

1. Lego — Дружественный дизайн страницы 404, вдохновение

Страница

Lego 404 — отличный пример использования юмора и хорошего бренда для привлечения посетителей сайта.

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

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

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

Чтобы создать похожий дизайн страницы 404, удалите все технические термины и замените их чем-то более человечным.Используйте такие слова, как «не беспокойтесь», «ой» и «извините», чтобы убедить пользователей, что страница с ошибкой — не их вина.

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

2. Промедление — прокрутка страницы 404 не найдена, пример

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

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

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

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

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

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

3. Mantra Labs — экран 404 с перенаправлением

Индивидуальный дизайн страницы 404 от Mantra Labs — отличный пример того, как пользователь принимает решение.

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

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

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

4. Студия 20-го века — Страница 404 с идеями фильмов

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

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

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

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

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

Теперь вы можете совершать продажи прямо со своей 404 страницы!

5.Figma — Интерактивная страница 404 Дизайн

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

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

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

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

6. Behance — Пример страницы 404 с предложениями по проектам

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

У страницы простой заголовок «Ой! Мы не можем найти эту страницу »с подзаголовком, предлагающим посетителям проверить галереи своих проектов.

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

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

7. eBay — Страница 404 с трендами сделок

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

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

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

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

8. 9gag — Призыв к действию 404 Страница

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

На этой странице с ошибкой 404 9gag демонстрирует, что они хорошо знают свою аудиторию.

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

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

9. IMDB — 404 Page Design Inspiration

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

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

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

10. Ueno — Пример страницы объявления 404

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

Вы не можете увидеть полный эффект на скриншоте выше.

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

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

11. CloudSigma — Веселый дизайн страницы 404

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

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

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

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

12. Brett Terpstra Simple 404 Страница

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

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

Хотя страница и не броская, она очень полезна.

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

13. Marvel Animated 404, пример

404 страницы

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

В этом примере есть 404-страничная анимация о Железном человеке, которая понравится многим фанатам.

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

14. Уловки CSS 404 Дизайн страницы

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

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

15. Mailchimp 404 Примеры страниц

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

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

16. Разбитое яйцо SeedProd 404 Стр.

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

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

17. SeedProd eCommerce Страница не найдена, шаблон

Эта страница 404 будет полезна

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

18. SeedProd Sunset 404 Примеры страниц

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

19. SeedProd Funny 404 Примеры страниц

Кто устоит перед милой собачкой в ​​костюме ананаса?

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

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

404 Страница FAQ

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

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

Как перенаправить страницу 404?

Вы можете использовать плагин SEO для перенаправления страниц с ошибкой 404 на другую страницу вашего сайта. Мы рекомендуем использовать All in One SEO, так как это самый простой и удобный плагин для WordPress SEO. Ознакомьтесь с их руководством о том, как легко найти и исправить ошибку 404 в WordPress.

Как сделать хорошую страницу 404?

Когда дело доходит до создания собственных страниц 404, есть несколько вариантов.

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

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

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

SeedProd — лучший конструктор целевых страниц для WordPress. Он упрощает создание любой целевой страницы и предоставляет простой конструктор перетаскивания для создания страниц без кода.

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

Конструктор целевой страницы

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

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

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

Дизайн страницы 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 — это возможность продемонстрировать творческий подход и направить пользователя на ваш путь. Что-то пошло не так, но все в порядке. Рассматривайте эту страницу как своего рода целевую страницу, и в конечном итоге она может помочь укрепить ваш бренд и обеспечить конверсию.

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

Что делает страницу с ошибкой 404 большой?

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

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

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

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

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

  • 404 Не найдено
  • HTTP 404 не найден
  • Ошибка 404
  • Страница не найдена
  • Запрошенный URL не найден на этом сервере

Когда дело доходит до общего дизайна страниц 404, есть два варианта — стандартная страница 404 или настраиваемая страница 404.Стандартные страницы просто выплевывают сообщения выше безотносительно к дизайну. Пользовательские страницы — это те страницы, которые вы проектируете и для которых создаете опции. Для этого у вас должен быть доступ к хост-серверу. (Мы не будем здесь вдаваться в подробности, но вы можете узнать больше об этом из A List Apart.)

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

Основная необходимая информация

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

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

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

  • Сильный заголовок или текст, объясняющий пользователю, почему он здесь. Это неприятно, когда вы попадаете на веб-страницу, которая не соответствует вашим намерениям. Убедитесь, что пользователи знают, что они не на правильной странице, а на правильном веб-сайте.
  • Поиск. Убедитесь, что страница ошибки 404 имеет те же функции поиска (и находится в том же месте), что и остальная часть вашего сайта. Таким образом пользователи смогут искать страницу, которую они намеревались посетить.
  • Ссылки на вашу домашнюю страницу и карту сайта. Скорее всего, это произойдет как элемент дизайна, включающий верхний или нижний колонтитул, соответствующий остальной части сайта.
  • Минимальная информация в противном случае. Подумайте о том, чтобы избавиться от сложной навигации. Если пользователь попадает на страницу по ошибке, дайте ему только несколько вариантов, которые приведут к успеху.Слишком много вариантов может еще больше расстроить или запутать пользователя.
  • Включите явный призыв к действию. Сообщите пользователям, что делать дальше.

Сделать 404 страницы пригодными для использования

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

У Google есть список отличных предложений для включения информации на настраиваемую страницу 404 в своих инструментах для веб-мастеров. Эти советы включают:

  • Четко скажите посетителям, что страница, которую они ищут, не может быть найдена.Используйте дружелюбный и привлекательный язык.
  • Убедитесь, что ваша страница 404 выглядит так же, как и остальная часть вашего сайта.
  • Рассмотрите возможность добавления ссылок на свои самые популярные статьи или сообщения.
  • Подумайте о том, чтобы предоставить пользователям возможность сообщить о неработающей ссылке.
  • Убедитесь, что ваш веб-сервер возвращает фактический код состояния HTTP 404 при запросе отсутствующей страницы, чтобы она не отображалась в результатах поиска.
  • Используйте виджет Enhance 404, чтобы встроить поле поиска на свою пользовательскую страницу 404.
  • Используйте инструмент «Изменение адреса», чтобы сообщить Google о перемещении вашего сайта.

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

Дизайн 404 страницы с целью

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

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

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

  • Поддерживайте согласованность дизайна. Используйте тот же цвет, типографику и стили изображений, которые интегрированы на других страницах веб-сайта.
  • Поддерживайте брендинг. Использование одинакового логотипа, верхнего и нижнего колонтитулов поможет пользователям узнать ваш сайт.
  • Сохраняйте простоту визуально. Когда дело доходит до страниц с ошибками, меньше значит больше.
  • Не заставляйте пользователей прокручивать. Это одноэкранный дизайн.
  • Избегайте слишком большого количества уловок. Хотя поддерживать тон и настроение вашего сайта и бренда — это хорошая идея, слишком большое количество «дополнений» может заставить пользователей забыть то, что они искали в первую очередь.
  • Извинитесь и проявите сочувствие.Можно сожалеть, что пользователь попал не в то место.
  • Если ваш сайт требует входа в систему, добавьте для него место. (Ошибка произошла из-за того, что пользователю нужно было войти в систему?)
  • Будьте изобретательны. Или смешно. Но сначала проверьте страницу. Убедитесь, что случайные пользователи «поняли».
  • Если вы используете «Ошибка 404», добавьте вторую строку текста, рассказывающую пользователям, что это означает или что им нужно делать дальше.

12 отличных примеров

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

Девиантное искусство

Gig Masters

iFolderLinks

Лего

LimpFish

Magnt

Mattel

ModCloth

NPR

Стив Ламберт

Титулист

Тоби

Заключение

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

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

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

Эээ… 404, страница не найдена! Худшая ошибка, правда?

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

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

Ошибка 404 Not Found — это код ответа HTTP, который указывает, что браузер смог связаться с сервером, чтобы попытаться получить страницу, но сервер не смог найти то, что было запрошено. Часто они возникают, когда человек ищет страницу, которой не существует, или когда он щелкает ссылку на страницу, которая больше не существует и не была перенаправлена ​​в другое место.Ссылки, которые никуда не ведут, известны как «мертвые ссылки» или «битые ссылки».

Ошибки 404 вредны для SEO?

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

Проектирование страницы 404

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

Лучшие методы проектирования страницы 404

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

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

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

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

1.Ялантис

Элегантный минималистичный черно-белый дизайн

Yalantis привлекает внимание. Что еще интереснее, эта страница 404 на самом деле интерактивна! При перемещении курсора по точкам волна перемещается в разные стороны. Кто знал, что 404-й может быть забавным?

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

2. IMDB

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

3. Битли

Еще один интерактивный 404, Bitly’s включает забавную анимацию и милую иллюстрацию рыбы-иглобрюха, которая заблудилась.Каждый раз, когда вы наводите курсор на воду, вы вызываете рябь в волне. Bitly также включает ссылки на домашнюю страницу и блог со страницы 404.

4. Здание Discovery

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

5.Форсанетти

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

6. Строения Солт-Сити

Salt City Builds специализируется на обслуживании мотоциклов и ремонте японских моделей, выпущенных до 1979 года. Страница 404 этого бренда гладкая и фирменная с сообщением: «Заблудиться — не так уж и плохо». Он хорошо обращается к их целевому рынку, а также имеет удобную навигацию вверху, которая поможет им вернуться на правильный путь, когда они будут готовы!

7.Pixar

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

8. Orangecoat

Orangecoat — дизайнерская фирма, базирующаяся в Гринвилле, Южная Каролина, специализирующаяся на веб-дизайне и маркетинге, которая помогает предпринимателям создавать компании и руководить веб-стратегиями существующих компаний.На их потрясающе оформленной странице 404 есть диаграмма, которая направляет действия пользователя.

9. Dogstudio

Бренд

Design компании Dogstudio соответствует их 404 странице. Их страница включает в себя случайный GIF-файл с изображением собаки, зацикленной на заднем плане страницы. Обновите страницу, и вы получите еще один GIF с изображением собаки!

10. Чудо

404-я страница

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

11. Точка доступа

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

12. Cirque du Soleil

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

13. Дисней

На этой забавной странице 404 изображен один из современных персонажей Диснея, Ральф, который, похоже, пробивает дыру в странице, потому что заблудился.Интересный способ создать страницу 404 — это увлекательное объединение их персонажей в соответствии с сюжетной линией фильма!

14. Метель

На странице 404

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

15. Уловки CSS

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

16. Слабина

Очаровательная страница 404 в

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

17. GoDaddy

Страница 404

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

18. Purée Maison

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

19. LEGO

На очаровательной 404 странице

Lego, конечно же, изображен персонаж LEGO из фильма LEGO. Он включает в себя симпатичную графику и краткую аннотацию (и строку из фильма), убеждая пользователя, что все по-прежнему великолепно!

20. 20 век Фокс

Мы сочли правильным поставить 20th Century Fox на 20-е место в этом списке.Эта страница 404 меняется с каждым обновлением и включает забавное сообщение, которое направляет вас к одной из самых известных картин, таких как «Офисное пространство», «Эдвард руки-ножницы», «Молодой Франкенштейн» и другие!

21. Фигма

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

22. Mailchimp

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

23. Чудо

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

24. ИКЕА

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

25. Американский домашний щит

Компания

American Home Shield известна своими гарантиями на бытовую технику, поэтому она идеально подходит для того, чтобы показать что-то, что сломано по неработающей ссылке.Нам также нравится, что AHS пользуется этой возможностью, чтобы превратить потерянный трафик в преобразованного пользователя, предлагая пользователю ознакомиться с доступными планами. Может быть, эта страница все-таки не так уж «сломана»!

26. Sony Alpha Вселенная

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

27. Живая нация

Страница 404 на сайте

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

28. Каждый доллар

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

29. Github

Страница

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

30. 9GAG

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

31. Фортнит

Как и следовало ожидать, страница Fortnite 404 на сайте

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

32. Southwest Airlines

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

33. Reddit

Страница 404

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

34. ebay

Страница

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

35. Buzzfeed

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

36.TED

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

37. Giphy

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

38. Trivago

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

39. Одноклассники

У

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

40. Lyft

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

БОНУС 404 ДИЗАЙНА СТРАНИЦ

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

41. Акодез

Acodez — веб-агентство, расположенное в Индии. Это агентство демонстрирует свою индивидуальность на своей странице 404, на которой изображен талисман компании Acodie!

42. CarWow

.

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

Как создать впечатляющую страницу ошибки 404 (с 12 примерами)

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

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

Итак, что посетитель будет делать дальше?

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

Вы только что испортили свое первое впечатление своей страницей ошибок.

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

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

Результат?

Ну…

Снижение вашего рейтинга в поиске.

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

  • Перезапуск сайта
  • Внутренняя ссылка неработоспособна
  • Ссылка на устаревшую поисковую систему

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

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

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

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

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

Зачем нужно создавать индивидуальную страницу 404?

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

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

Но зачем вам тратить время или деньги на этот индивидуальный проект?

Вот 5 причин.

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

Как бы вы хотели увеличить свой поисковый трафик за счет индексации большего количества страниц веб-сайта с помощью страницы с ошибкой 404?

Сладкое. Не правда ли?

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

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

Путем перехода с него на случайные внутренние страницы вашего сайта.

Я использовал эту стратегию, чтобы увеличить посещаемость Techcrunch на 9% за месяц. Я связался со случайными 25-50 внутренними страницами, запустив алгоритм.

У вас наверняка будут неработающие ссылки на вашем сайте.

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

Вывод — создать согласованный образ. Общие страницы с ошибкой 404 — плохой опыт.

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

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

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

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

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

Как ты себя чувствуешь?

Совершенно верно.

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

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

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

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

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

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

Но как именно?

Развлекаясь, как Магнт.

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

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

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

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

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

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

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

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

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

6 элементов соблазнительной 404 стр.

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

Вот 6 особенностей соблазнительной страницы 404.Помните, что вам не обязательно размещать их все на своей странице.

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

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

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

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

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

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

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

Или, может быть, ссылку на вашу карту сайта, например Starbucks.

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

3. Использует простой человеческий язык, чтобы объяснить, что пошло не так. Во-первых, вы обслуживаете ошибку.Затем вы используете технические термины и коды, чтобы объяснить ситуацию. Вы вообще хотите, чтобы пользователь был на вашем сайте?

Видите ли, никого не волнует, что пошло не так с «вашим сервером».

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

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

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

Страница ошибки 404 X-Cart имеет простой заголовок «Страница не найдена».

Вы заметили еще один аспект на странице выше?

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

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

Также не забудьте не винить посетителя за код ошибки (код статуса http).

Я знаю.

Есть вероятность, что пользователь действительно ошибся при вводе URL. Или, возможно, это был ошибочный перенаправление.

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

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

Разве ты не хочешь их уже простить?

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

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

Так как же побудить посетителя сообщить об ошибке?

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

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

Бен Кук реализовал простую контактную форму на странице с ошибкой 404 во время восстановления и перезапуска клиентского веб-сайта.

Получил ли он какие-нибудь ответы?

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

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

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

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

David Hell Man — отличный пример страницы с ошибкой 404 не на английском языке.

6. Предложите им возможность присоединиться к вашему списку рассылки или использовать ваш продукт — Да, вы даже можете конвертировать этих посетителей. Это всего лишь указание пользователю выполнить действие, которое вы от него хотите.

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

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

Вот видеоурок Джоша Бэйлесса о том, как собирать лиды со страниц с ошибкой 404.

[youtube https://www.youtube.com/watch?v=yRGuAwBIRig]

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

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

12 блестящих примеров ошибок 404 страницы

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

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

Надеюсь, ваши творческие соки начнут течь после просмотра этих страниц.

1. Поцелуй

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

И что может быть лучше, чем попросить пользователя подать заявку в службу поддержки для решения проблемы?

2. Джейми Хаскиссон

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

Кроме того, вам будут предложены два варианта: окно поиска для поиска релевантной информации или ссылка на архив сообщений для чтения старого содержания, написанного Джейми.

3. Centresource

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

Затем он предлагает всего два варианта — вернуться на главную страницу или ударить лося. Здесь нет жаргона кода статуса http.

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

4. Huwshimi

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

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

5. Хиллари Клинтон

На сайте политика есть страница с ошибкой, на которой крякнет вас.

Она была даже признана Huffington Post за то, что она каламбур через эту страницу.

Показав счастливую фотографию, Хилари предлагает вам записаться на волонтерство.

Итак, это отличный способ направить посетителей вашего сайта к вашим целям, не так ли?

6. Зайчик в дизайне

Еще одна блестящая концепция от дизайнерской компании.Jackrabbit указывает на «опасность» в своем коде ошибки и сообщает пользователю, что они отклонились от маршрута. У них также есть крутой кролик-талисман, чтобы привлечь вас, в то время как их серверная часть создает файл журнала с кодом состояния http.

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

Разве не прекрасно, что пользователь может извлечь полезность даже из своей страницы с ошибкой?

7.Блюгг

Это британское брендовое агентство, и их страница с ошибкой очень забавна.

Это не минимализм. У них есть куча навигационных ссылок вверху и контактная информация в нижнем колонтитуле.

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

Они ясно передают ошибку — «Аааааааааааааааааааааааааааааааааааааааааааааааааааааааамамамамамамам приятнее! Этой страницы не существует «. Затем видео с козлом с высоким тоном воспроизводится в цикле, пока вы не вернетесь назад, прочь от страниц с ошибками, на их домашнюю страницу (или приостановите воспроизведение видео).

8. Уайтспарк

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

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

Вы также можете нажать на красный CTA «Good Riddance» и уволить Брента.

Нажав эту кнопку, вы увидите обеспокоенного Брента и получите сообщение о том, что многие дети Брента будут голодать на улицах.

Дело в том, что ваши пользователи больше не смотрят на жаргон кода ошибки, такой как http-код статуса «что?» Они видят, что что-то пошло не так, и видят способы решения проблемы.

9. Квартира Home Living

Какой бы вы хотели видеть овцу в ванной?

Вообразить это само по себе забавно, правда?

Это иллюстрация, которую сайт поиска квартир Apartment Home Living использует на своей странице с ошибкой.

И, признав, что страница не существует, они возвращают пользователей на свою домашнюю страницу.

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

10. Лего

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

И внизу слева они предлагают обратную ссылку на главную страницу.

11. Mattel

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

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

Но, чтобы оставаться на сайте, вы получаете анимированный шар Magic 8, который отвечает на ваши вопросы.

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

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

Помимо шара magic-8, Mattel имеет 3 ссылки внизу. Вы можете вернуться на главную страницу, выполнить поиск на веб-сайте или посетить магазин Mattel.

12. Дефрозо

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

Во-первых, он говорит на языке аудитории: «страница не в фокусе.’

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

Или вы можете отправить электронное письмо команде по разморозке о проблеме.

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

3 метода создания настраиваемой ошибки 404 страница

Как я уже упоминал ранее, вам нужно настроить файл.htaccess, чтобы настроить страницу с ошибкой 404.

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

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

1. Используйте плагин 404 Page WordPress — Вам повезло, если вы ведете свой блог на WordPress.Существует множество мощных плагинов, которые помогут вам легко реализовать расширенные функции на вашем веб-сайте.

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

Вот видеоролик о плагине кода ошибки.

[youtube https://www.youtube.com/watch?v=VTL07Lf0IsY]

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

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

2. Наймите разработчика-фрилансера — плагины могут быть чрезвычайно полезны на начальных этапах работы вашего веб-сайта.

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

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

.

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

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

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

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

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

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

[youtube https://www.youtube.com/watch?v=l-YJlu4CpYU]

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

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

Вы используете свой сайт на WordPress?

Многие темы WordPress снабжены файлом 404.php (пользовательский файл шаблона 404).

Вы можете редактировать их в текстовом редакторе и редактировать отображаемое сообщение об ошибке.

В приведенном ниже видеоуроке WebTegrity показывает, как настроить сообщение, отредактировав файл темы 404.php.

[youtube https://www.youtube.com/watch?v=YDN47iDc2_0]

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

Что бы вы ни делали, не выбирайте ни одну из этих настроек страницы 404.

3 инструмента для отслеживания неработающих ссылок и предотвращения ошибок 404 страницы

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

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

1. Проверьте расширение Chrome «Мои ссылки» Это отличный инструмент, используемый в стратегии построения битых ссылок. Он сканирует веб-страницу, перечисляет общее количество ссылок, находит и помечает все неработающие ссылки красным цветом.

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

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

2. Плагин WordPress для проверки неработающих ссылок Если вам нравится автоматизация, вам понравится этот инструмент.

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

Установите плагин и перейдите в Настройки »Проверка ссылок.

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

Чтобы просмотреть более подробный список неработающих ссылок и проблем с кодами ошибок на вашем веб-сайте, перейдите в Инструменты »Неработающие ссылки.

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

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

3. Google Analytics (GA) Это один из самых мощных инструментов для веб-мастеров. Вы уже знаете о его функциях для отслеживания производительности вашего веб-сайта и разделения источников трафика.

Но знаете ли вы, что он может находить даже неработающие ссылки на вашем сайте?

Войдите в свою учетную запись аналитики. Перейдите в раздел Поведение »Контент сайта» Все страницы.

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

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

WordStream обнаружил, что его страница с ошибкой 404 была посещена 126 раз через 79 страниц (с 1 по 30 апреля).

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

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

Заключение

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

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

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

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

https://archive.org/web/wb404.js

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

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

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

  • SEO — разблокируйте огромное количество SEO-трафика.Смотрите реальные результаты.
  • Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
  • Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

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

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

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

2. Чудо

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

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

3. Pixar

На странице 404

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

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

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

Страница 404 на сайте

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

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

5. Bitly

Страница ошибки

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

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

6. Huda Beauty

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

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

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

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

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

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 не должны быть скучными. Приложив немного креативности, они могут послужить еще одним элементом в стратегии развития вашего бренда и цифрового маркетинга.

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

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

30 творческих и умных страниц ошибок 404 | by Solodev

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

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

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

Кажется стандартной практикой для любого 404 вежливо сказать: «Извините, страница, которую вы ищете, недоступна. Попробуйте снова X, Y или Z ».

Хотя эта копия, безусловно, вежлива, она ожидаема и скучна.Скука не привлекает внимания.

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

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

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

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

Spotify использует простую анимацию со своим проигрывателем, добавляя как соответствующий визуальный элемент, так и уникальный элемент дизайна. Как звук царапины записи, который указывает на то, что что-то не работает, анимированная запись перестает вращаться через несколько секунд. Текст также ссылается на подпись Канье Уэста «808 and Heartbreak», которая остается в тренде с некоторыми из самых громких музыкальных произведений.

Если говорить об иконках, у этой популярной игрушки есть «культовая» страница 404. Тон радостный, полезный и не разочаровывающий.Похоже, вы можете просто поговорить со своим дружелюбным специалистом по обслуживанию клиентов LEGO и решить свои проблемы! Он отлично вписывается в общую идею бренда и творческую маркетинговую стратегию компании. Традиционный веб-сайт LEGO также может похвастаться довольно забавной страницей с ошибкой 404.

Ой, ДашЭто, ты точно знаешь, как доставить удовольствие фандому «Властелин колец» . Эта страница 404 заставляет наши ботанические сердца улыбаться и смеяться над неудобствами. Он такой умный и подробный, что даже вершина горы (404) Doom достигает 404 по оси y.Он не воспринимает себя так серьезно, как Сообщество, и прекрасно сочетает текст с умным дизайном.

Конечно, в этом списке есть и другие 404-е, связанные с фэндомом! GitHub превращает одну из самых культовых фраз кино в умную страницу 404. А если вы понятия не имеете, кто такой Оби Ван Кеноби, или вы не фанат Star Wars ? Тогда «это не та веб-страница, которую вы ищете».

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

НАСА 404 — это именно то, что вы ожидаете от НАСА; это относительно беззаботно, если вы поклонник космического юмора, а также отлично сочетается с тоном и брендом организации. Это простое напоминание о том, что в галактике есть более серьезные проблемы, кроме потерянной веб-страницы.

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

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

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

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

Конечно, 404 Amazon может быть визуально несколько прост, но Amazon делает то, что умеет лучше всего, и дает публике то, что они хотят. И они компенсируют неудобство попадания в 404-ю щенками. Действительно, очень милые щенки. Серьезно, если вы обновите 404, вы получите больше щенков. Все эти 404 щенка принадлежат сотрудникам Amazon и имеют дополнительные (и очаровательные) их дескрипторы.

Опять щенки. Это то, что заставляет нас улыбаться, когда страница 404 заставляет нас хмуриться.И так же, как пост щенка Amazon, Huffington Post дарит вам нового счастливого щенка с каждым обновлением.

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

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

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

Umbro использует умный вид, чтобы сказать «что-то сломалось» не словами, а дизайном.

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

Геймификация страниц 404 — это умный способ удержать людей на вашем сайте. Куало не только предлагает версию Galaga (или Space Invaders или Galaxian), но и дает скидочный код тем, кто достигает определенных пороговых значений. (И это одна из самых захватывающих и простых игр, с которыми мы сталкивались за очень долгое время.)

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

Как и MailChimp, G2 Crowd включает в сообщение об ошибке фирменный символ компании. Это милый, простой и отличный способ неожиданно добавить в ресурс веб-сайта повествование и буквальный характер.

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован.