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

Как должна выглядеть страница 404

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

Как должна выглядеть страница 404

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

  1. 404 – код состояния
  2. Код 404 появился вместе с протоколом http в 1992 году
  3. Описание кода содержится в RFC 7231, разработанном ISOC и IETF
  4. Код 404 делится на 2 части, где первая «4» – ошибка на стороне клиента
  5. Ошибка 404 не относится к CERN и, в частности, Т. Бернарсу-Ли
  6. Длина кода 404 определена предельным объемом памяти в 64К, доступным к моменту разработки http
  7. Существует вариант soft-404, когда вместо ошибки сервер возвращает 200-Ok, а пользователя проводят по редиректу на другую страницу
  8. 404 – «невежественный» на сленге в Лондоне, UK
  9. В честь ошибки 404 названа абаканская группа ШУМ404
  10. В Японии существует группа 404NOTFOUND

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

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

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

Как должна выглядеть страница 404

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

Как должна выглядеть страница 404

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

«Странички почему-то нет. Оставьте свой eMail или телефон, и мы Вам обязательно сообщим, когда она появится».

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

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

Интересное видео про влияние поведенческих факторов и не только:

Пример удачного оформления страницы 404

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

Как должна выглядеть страница 404

…то стоит поискать вдохновения у других.

Чтобы упростить задачу по поиску настоящих «шедевров 404» предлагаю 18 примеров креативного подхода.

1. Behance.net

У кого, как не у легендарного Майкла Цираки (Michael Tsiraki) искать вдохновения?

Как должна выглядеть страница 404

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

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

  • графическое исполнение в духе «ужастика» – действительно, получить ошибку 404 бывает ужасно;
  • отсылка к теме самого продолжительного шоу и, конечно же, классической игры D&D за счет слов «demogorgan и eggos»;
  • отправка пользователя на главную страницу сайта по кнопке «Run Home» – действительно, куда сбегать от ужастика, если не домой?

Великолепная страница с отличным CTA (Call to Action – призыв к действию), на которую стоит равняться. Соблюдены не только требования по графике, но и по CTA, и по текстовой части.

2. Marvel

Вполне логично ожидать от крупнейшего в мире издателя комиксов (а в последнее несколько десятилетий и кинопроизводителя) оригинального исполнения «ошибочной странички».

Как должна выглядеть страница 404

В основе шаблона страницы 404 – супергерои, которые по тем или иным причинам страдают от ошибки. Например, в приведенном выше скриншоте «Капитану Америка» плохо от инфильтрации Гидры. Сама страница не может быть отображена, пока ее атакую вражеские силы.

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

Как должна выглядеть страница 404

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

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

3. Pixar

Студия анимации Pixar вполне ожидаемо также использует своих героев. В частности, на «404 странице» заходится в плаче персонаж «Печаль» из мультипликационного фильма «Головоломка» (кстати, советую посмотреть!).

Как должна выглядеть страница 404

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

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

4. 20th Century Fox

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

Как должна выглядеть страница 404

Сразу скажем, что это не так – у Hartswood films страничка довольно обычная.

Как должна выглядеть страница 404

Но вернемся к странице 404 студии 20th Century Fox. В отличие от тех же Marvel или Pixar дизайнеры и маркетологи подошли к делу творчески и предлагают посмотреть видео (да-да, полноценные видеоролики) из различных кинолент.

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

Можно насладиться отрывком из «Молодого Франкенштейна» – нашумевшей комедии 1974. Обновив страничку легко встретить как кадры из кинофильма «Эдвард руки-ножницы», так и из других лент, например «Большой переполох в маленьком Китае» 1986 года.

Как должна выглядеть страница 404

Уместен и шутливый текст, сопровождающий ролик. Например, при показе «Китая» при клике по тексту пользователь будет перенаправлен на ресурс Fox Connect на страницу с демонстрируемым фильмом.

CTA убедительный, функциональность – как и везде, сохраняется «шапка» сайта.

5. FlippingBook

Отойдем ненадолго от студий кимнематографии и анимации и обратимся к вполне коммерческим проектам. И за примером далеко ходить не придется. Сервис конвертации pdf документов в html 5.0 FlippingBook имеет свое видение «страницы 404»:

Как должна выглядеть страница 404

Здесь все выверено до мелочей:

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

К CTA здесь просто невозможно «придраться» – все идеально. А главное – пользователь прямо на этой странице может решить свой вопрос, ведь доступен онлайн-чат с менеджером.

6. Dogstudio

По-своему креативно решили вопрос с необнаруженной страницей ребята из дизайнерской студии Dogstudios.

Как должна выглядеть страница 404

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

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

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

Как должна выглядеть страница 404

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

7. CSS-Tricks

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

Как должна выглядеть страница 404

В ответ на ошибку 404 загружается картинка с кусочками кода CSS. Все. Больше никакого функционала. Она не кликабельна. Нет отсылок даже к главной странице сайта. Просто, но «со вкусом».

Но у картинки «дырявой» странички, за которой прячется код, есть определенный смысл:

  • если что-то идете не так, в этом отчасти виноват код сайта, включая и CSS;
  • учитывая, что ресурс посвящен именно CSS вполне ожидаемо, что показывать нужно именно его;
  • в Title страницы 404 помещен текст, который вольно переводится как «Вы прорвали ткань Интернета. С любовью, Крис из «CSS-Tricks».

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

8. Specialized

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

Как должна выглядеть страница 404

CTA средний – текст слишком мелкий и слабо заметен на цветном фоне. Функциональность в остальном сохранена.

Кстати, русскоязычный вариант менее креативен – картинка сохранена, а вот текст потерял свою юморную нотку, а CTA отсутствует:

Как должна выглядеть страница 404

Да и с другими языками проблема – особенный шарм странички пропал:

Как должна выглядеть страница 404

Шаблон страницы 404 для всех языков одинаков. Но «проблема перевода» или банальная лень победила, увы.

9. Kwarter + Blizzard

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

Как должна выглядеть страница 404

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

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

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

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

Схожим путем пошли креативщики из Blizzard:

Как должна выглядеть страница 404

Мы опять видим возложение вины за произошедшее на пользователя, словно использовался один шаблон страницы 404! При этом разработчики игр даже не извиняются! Стильно? Да! Мощно? Конечно!

Чуть портит картинку только явное отсутствие CTA, зато обвалившаяся шапка сайта вполне кликабельна и работоспособна.

Кстати, в англоязычной версии сарказма чуть поменьше:

Как должна выглядеть страница 404

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

10. Elative

Тему разрушений в собственной манере выразили дизайнеры креатив-агентства Elative, визуально представив не найденную страницу сайта в виде ракеты, а пользователя в виде космонавта:

Как должна выглядеть страница 404

Шутка о попытке достичь запретных земель («А может быть вы пытались попасть в запретные земли?») сводит к нулю негативные эмоции от отсутствия искомого контента.

Функционал стандартно сохранен в виде шапки сайта, есть кнопка возврата «на базу» (Return to Home Base). Но один из элементов «шапки» выделен, что особенно бросается в глаза из-за минималистического дизайна страницы.

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

11.  Magnt

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

Как должна выглядеть страница 404

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

Функциональность сайта полностью сохранена в шапке и дополнена кнопкой перехода на главную страницу. Однако никаких магнитов на странице не имеется.

12. Marvel (не путать с производителем комиксов!)

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

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

Как должна выглядеть страница 404

Разберем каждый:

  1. Кнопка зеленого цвета, предлагает связаться с менеджером по электронной почте. Естественно, что адрес пользователя будет сохранен, и в дальнейшем его можно будет использовать в почтовой рассылке. Но и сам факт быстрого выхода на личное общение менеджера с потенциальным покупателем ускоряет процесс продажи.
  2. Кнопка голубого цвета, предлагает «твитнуть». Пользователь, попав в ленту Marvel, с высокой долей вероятности подпишется на твиттер компании со всеми вытекающими последствиями.
  3. Кнопка авторизации, в верхней части рядом с логотипом. Если пользователь еще не зарегистрировался в сервисе, его автоматически перенаправит на страницу регистрации. Великолепный лид-магнит!

Как должна выглядеть страница 404

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

13. PageCloud

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

Как должна выглядеть страница 404

Разберем страницу поэлементно.

  • Текст

Как должна выглядеть страница 404

«Код ошибки 404. Упс! Эта страница была перемещена, переименована, или не создавалась. Почему бы вам не создать ее? С сервисом PageCloud вы можете создать любую страницу, даже если не умеете программировать»

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

  • Кнопки

Как должна выглядеть страница 404

Всего 2 кнопки. Первая сразу предлагает действовать и попробовать PageCloud в деле, вторая ведет на готовый лендинг, где обилие полезной информации и лид-магнитов вызывает «рябь в глазах».

  • Шапка

Как должна выглядеть страница 404

Шапка тоже «не лыком шита»:

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

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

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

14. IMDb

Замечательный и полезный для всех интернет-проект IMDb стоит привести как еще один пример эффективной и «продажной» страницы. Да, сервис вроде как ничего и не продает (кроме показов рекламы), но сути это не меняет.

Как должна выглядеть страница 404

Здесь мы видим:

  • переделанную под ситуацию цитату из кинофильма;
  • ссылку на этот фильм в IMDb;
  • предложение перейти на главную страницу сайта.

Цитаты из фильмов переделываются довольно своеобразно. На приведенном скриншоте мы видим фразу Эммета Брауна из к/ф «Назад в будущее-1»

«Дороги? Там, куда мы отправляемся, они нам не нужны»

переделанную под ситуацию:

«Вебстраницы? Там, куда мы отправляемся, вебстраницы нам не нужны».

15. A-FOTOGRAFY

А вот фотограф из Эдинбурга на своем ресурсе привел свое видение продажной страницы 404:

Как должна выглядеть страница 404

Страничка функциональна и удержит посетителя на сайте:

    1. Быстрые ссылки на главную страницу или в тематические альбомы-портфолио.
    1. Поиск по сайту.
    1. Контактная информация.
    1. Форма обратной связи.
  1. Интересные записи в блоге.

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

16. Distilled + ORANGECOAT

Если отвлечься от темы продаж и обратить внимание на CTA, то довольно интересным окажется подход к оформлению «Страницы 404» агентства он-лайн маркетинга Distilled:

Как должна выглядеть страница 404

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

Более проработанный вариант CTA используется в шаблоне страницы 404 интернет-агентством Orange Coat:

Как должна выглядеть страница 404

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

17. Blue Fountain Media

Любопытным оказался подход IT-компании Blue Fountain Media, которые всего лишь предлагают сыграть в старого доброго пакмана на странице 404:

Как должна выглядеть страница 404

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

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

18. Роман Брайзер

В продолжении темы игры можно привести страницу 404 веб-разработчика Романа Брайзера из Лилля. CTA довольно неоднозначный:

Как должна выглядеть страница 404

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

«Продажки» здесь нет никакой, зато есть эмоции и такое запоминается.

Заключение

Стоит подытожить вышесказанное набором определенных критериев, которые Must-have на странице 404.

  • Самый простейший дизайн страницы существенно повысит шанс удержать пользователя на сайте.
  • Следует поставить себя на место посетителя и подумать, чего бы хотелось пользователю?
  • Нельзя отклоняться от общей концепции и стилистики сайта.
  • По возможности стоит избегать не цензурных выражений, шок-контента 18+.
  • Нужно обязательно объяснить пользователю, что произошло. И постараться свести все к шутке.
  • Вполне допустимы (и даже приветствуются) некоторые интерактивные элементы или простенькие игры.
  • Нельзя забывать о пользователях, которые попали на страничку с помощью смартфона, поэтому контент должен быть ориентирован под любой экран.
  • Стоит превратить страницу 404 в своеобразный лэндинг, как это сделали в PageCloud.

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

Как должна выглядеть страница 404

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

А что бы вы хотели видеть в шаблоне страницы 404 и какого функционала не достает именно Вам

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.