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

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

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

Иногда креатив оказывается на грани фола.

Код 404 и почему появляются страницы Not Found. Максимально коротко

Ошибка 404 — код ответа HTTP о том, что запрашиваемая страница не найдена. Он состоит из двух частей: 4 и 04. Цифра 4 означает, что проблема на стороне клиента. Комбинация 04 в протоколе HTTP конкретизирует саму ошибку: Not Found.

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

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

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

Вредят ли ошибки 404 вашему SEO?

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

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

Рекомендации по проектированию страниц ошибок

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

Сообщите, что произошло и почему. Без технических нюансов

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

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

Соблюдайте единство стиля

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

Предложите сообщить об ошибке

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

Сделайте ставку на интерактивность

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

Нетривиальный пример использования интерактивности можно найти у хостера Kualo. Он превратил свои 404-е страницы в культовую игру Space Invaders.

Накопив определенное количество очков в «Космических захватчиках», провайдер предоставит скидку на свои услуги

А вот пример совершенно другого, но не менее мотивирующего формата интерактивности.

Попали на несуществующую страницу? Выбирайте, кого уволить

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

ожидание — реальность

Выведите пользователя из UX-тупика

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

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

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

Поисковая строка в качестве основного навигационного элемента Page Not Found

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

Плохая новость — мы не смогли найти страницу, которую вы искали;
Хорошая новость — мы нашли все ваши потерявшиеся носки.

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

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

Вот как это сделал отец русского веб-дизайна

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

О заглушках техобслуживания

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

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

Юмор, креатив и вежливость — все так же ваши верные помощники в коммуникации с пользователями.

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

Читайте также: 
Как оформить страницу «Товар не найден», чтобы пользователь остался на сайте

Советы по дизайну страницы «404»

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

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

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

Правильный способ сделать это

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

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

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

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

Ключ ко всему — юзабилити

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

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

Творческий подход

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

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

coolappse.com

---

kitkat.com

---

squarespace.com

---

roxanejammet.com

---

emailcenteruk.com

---

lissasleeckx.be

---

onsydney.com.au

---

facebook.com

---

etsy.com

---

browsermedia.com

---

juicygraphics.net

---

klout.com

---

grainandmortar.com

---

trufcreative.com

---

bluegg.co.uk

---

graphitedigital.com

---

aisservice.com

---

bluefountainmedia.com

---

tobi.com

---

titleist.com

---

lego.com

---

cdbaby.com

Вывод

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

Автор статьи designyourway

Перевод — Дежурка

Смотрите также:

дизайн и текст для 404 страницы

Отдайте свои заботы о хорошем контенте на сайте в наши руки

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

Подпишись на рассылку и получи книгу в подарок!

Ошибка 404 или Not Found («не найдено») — код ответа сервера на несуществующую страницу на сайте.

Как это работает?

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

В нашем случае код ответа- 404. Ответ сервера выглядит следующим образом:

Причины 404 ошибки

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

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

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

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

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

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

Как сделать страницу 404? Необходимо просто прописать в данный файл следующую инструкцию:

ErrorDocument 404 //semantica.in/404.php
Всё довольно просто!
Страница 404 для сайта: общие рекомендации
Во первых, 404 страница должна быть! Страница 404 ошибки безусловно должна присутствовать на каждом сайте.
В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu’s Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:
если ссылка страницы была изменена, необходимо изменить URL ссылки на новый;
если страницы уже не существует — просто удаляем ссылку.
 
 
К сожалению, Xenu не спасает от пользователей, которые могут неправильно ввести текст ссылки и не застрахует от битых или неактуальных внешних ссылок, которые введут на страницы вашего сайта.
 
Оформление 404 страницы
По-умолчанию страница 404 ошибки представлена в виде пустой страницы с надписью 404 Not Found, также возможна ситуация с редиректом на страницу хостинга, услугами которого вы пользуетесь.
Значительной доле пользователей всемирной паутины не достаточно предоставить страницу в таком виде — они просто не поймут что произошло, почему сайт вдруг исчез и переслал работать. Это означает только одно — потеря клиента. Но не будем опускать руки и рассмотрим эту ситуацию под другим углом. Как оформить страницу 404 и удержать гостя на сайте?
Текст для 404 страницы
Скажите “Нет!” технической информации!
Большинству пользователей знаком термин “404 ошибка”, но не стоит углубляться в причины её возникновения и давать дополнительные технические рекомендации. Донесите пользователю суть ошибки.
Предоставьте полезный контент!
Необходимо дать полезную информацию в сложившейся ситуации и натолкнуть пользователя на действие которое поможет решить проблему.
Это можно реализовать разными методами:
разместить меню сайта. Не стоит забывать о ссылке на главную страницу сайта
разместить полезные ссылки- это может ссылки на популярный или новый контент.
Разместить строку поиска по сайту- для того чтобы пользователи нашли то что они искали.
В оформлении 404 страницы важно не переусердствовать — не стоит слишком нагружать ее контентом.
Дизайн страницы 404 
Визуальное оформление 404 страницы не должно выбиваться из общего  дизайна.
Сделайте 404 страницу изюминкой сайта! Добавьте креативности страницы с ноткой юмора — это привлекает и удерживает посетителей.
В сети множество примеров того, что значит оригинальная и красивая страница 404. Я не поленился и нашел для вас несколько: 
 
 
 
Не  стоит забывать!
1. Редирект на 404 страницу должен осуществляться без изменения URL страницы.
2. Следите за битыми ссылками на вашем сайте!
В совокупности выполнение этих рекомендаций даст положительный эффект. Не рассматривайте 404 страницу как техническую константу сайта и даже в сложившейся неприятной ситуации она послужит важном инструментом в привлечении посетителей.
 
И напоследок вот вам пример того, как мы оформили страницу 404 для своего сайта:
Как оформить страницу ошибки 404
Расскажем, что такое ошибка 404, почему она возникает и как оформить под неё страницу, чтобы не терять посетителей сайта. Объясним, как найти ошибки на сайте и предотвратить их появление.
Ошибка 404: что это значит?
Иногда при переходе по ссылке вместо страницы сайта на экране появляется надпись: «Страница не найдена. 404 not found. Ошибка 404». Это значит, что такой веб-страницы нет или у неё поменялся адрес.
 Пример страницы 404 на сайте Lenta.ru
Подключить Roistat бесплатно
Почему возникает ошибка 404:
в URL ссылки была допущена ошибка;
был изменён URL-адрес страницы;
сайт временно не работал или вообще не существовал;
неправильно сработал сервер;
веб-страницу удалили.
Иногда владельцы сайтов не догадываются о таких ошибках. Особенно сложно следить за корректностью ссылок на крупных порталах с тысячами страниц. Поэтому пользователи периодически сталкиваются с надписью «404 Page Not Found». Иногда страница 404 появляется из-за ошибки самого пользователя, если он вводит или корректирует URL-адрес вручную.
Почему нужна отдельная страница для 404 ошибки
При вводе URL в строке браузера вручную возможны неточности и опечатки. Пользователи так или иначе могут столкнуться с ошибкой 404 на любом сайте. Если не задать такую страницу, посетитель не поймёт, что произошло, почему по ссылке не открылась ожидаемая страница. Для страницы с ошибкой 404 нужно придумать интересное оформление, оптимизировать её, чтобы пользователи не покидали сайт.
Грамотно настроенная страница 404 поможет:
Сохранить трафик сайта и позиции в выдаче результатов поиска. Сайт теряет трафик, если пользователи часто закрывают его из-за ошибки 404. Из-за этого поисковые системы могут понизить уровень ранжирования сайта.
Предложить посетителю что-то взамен неоткрывшейся страницы. Пользователь попал на неработающую страницу, когда искал конкретный контент, возможно, даже форму регистрации. Сделайте страницу 404 полезной для посетителя, предложите ему почитать о ваших ключевых продуктах, дайте ссылки на полезные статьи.
Вызвать доверие. Грамотно оформленная страница 404 — это возможность сохранить потенциального клиента на сайте. Извинитесь и помогите пользователю найти то, зачем он зашёл на сайт. Так посетитель с большей вероятностью останется на сайте и завершит оформление заявки или покупку.
Как создать страницу с уведомлением об ошибке 404
Во многих CMS стандартная страница 404 создаётся автоматически для любых страниц, кроме одностраничных сайтов-визиток. Или можно создать дизайн этой страницы самостоятельно. Для создания страницы нужно продумать веб-дизайн и призыв к совершению целевого действия. Это может быть ссылка на каталог товаров или строка поиска, чтобы найти нужную страницу.
Чтобы добавить страницу на сайт:
Перенесите шаблон страницы ошибки 404 в корневую папку сайта.
Откройте файл .htaccess и пропишите код: ErrorDocument 404 http://АДРЕС_САЙТА/404.html
Впишите код в любую свободную строку, залейте на хостинг и проверьте: совершите ошибку в какой-нибудь ссылке, например, удалите букву. Вместо стандартного шаблона 404 должен отобразиться новый вариант. Если нет — проверьте правильность кода, возможно, была допущена ошибка.
Некоторые CMS автоматизируют процесс создания страницы об ошибке: например, в WordPress это можно сделать с помощью плагина 404page. Плагин может кастомизировать страницу на разных темах. Для его установки нужна версия WordPress от 4.0.
Как оптимизировать страницу 404 ошибки
Страница должна быть простой и понятной для пользователя. Пусть она будет креативной и гармонично продолжать концепцию всего сайта, но не усложняет путь к основному пространству, например, в каталог товаров или на главную страницу.
Советы по созданию страницы 404:
Будьте доброжелательны. Расскажите посетителю, что страница удалена или произошла ошибка, помогите вернуться на основные страницы сайта.
Предложите посетителю проверить точность адреса или дайте ссылки на разделы, которые были недавно перемещены.
Дайте ссылки на продукт или статьи, релевантные поиску. Для этого нужно знать, на какую страницу пользователь пытался перейти. Это можно сделать, когда в URL указан раздел или категория.
Сделайте страницу полезной: дайте возможность скачать книгу или перейти на статьи в блоге, которые рассказывают о ценности продукта.
Не ограничивайтесь забавной картинкой. Добавьте ссылку на главную страницу сайта, блог, каталог или афишу событий компании.
Предложите посетить страницу с акциями, спецпредложениями.
Разместите строку поиска, чтобы посетитель сайта мог найти то, что он искал. Например, модель телефона в интернет-магазине или статью на новостном портале.
Покажите посетителю квиз или мини-игру. Это отличный способ свести негативное впечатление пользователя к минимуму.
Выдержите единое оформление, чтобы страница 404 не отличалась от остальных страниц сайта.
Рассказали, как квиз-маркетинг помогает пользователям совершить покупку.
Примеры отличных 404 страниц для сайта
Пусть подборка классных примеров вдохновит вас на создание собственного креативного шаблона страницы 404.
У McDonalds на странице 404 есть навигация по сайту и даже форма для подписки на рассылку:
 Пример страницы 404 на сайте McDonalds
На странице 404 блога Roistat пользователю предлагается вернуться на главную страницу блога, перейти в нужный раздел или воспользоваться кнопкой обратного звонка:
 Пример страницы 404 в блоге Roistat
На странице 404 для основного сайта Roistat отсутствие страницы нивелируется подарком для пользователя. Дополнительно посетитель может прочитать кейсы работы с сервисом:
 Пример страницы 404 на сайте Roistat
На сайте Спортмастера использована забавная тематическая картинка, есть ссылки на главную страницу, каталог товаров и поисковая строка:
 Пример страницы 404 на сайте Спортмастер
Ещё одна страница известного интернет-магазина Lamoda. Кроме навигации и строки поиска, пользователям предлагают популярные товары:
 Пример страницы 404 на сайте Lamoda
Тинькофф предлагает простую страницу, на которой сообщается об ошибке и даются ссылки на основные услуги банка:
 Пример страницы 404 на сайте банка Тинькофф
Страница об ошибке у ресторана KFC очень лаконичная страница. Пользователю предлагают всего 2 кнопки с простым CTA — «Заказать еду» и «Найти ресторан»:
 Пример страницы 404 на сайте KFC
Как избегать ошибок на сайте
Неработающие ссылки и большое количество ошибок приводят к потере трафика и снижают позиции сайта в выдаче поисковых систем. Поэтому важно регулярно проверять сайт на ошибки и исправлять их.
Рассказали, как SEO-аудит помогает оптимизировать работу сайта.
 Подключить Roistat бесплатно
Упростить проверку сайта поможет услуга SEO-аудита от Roistat. Аналитики проверят страницы сайта, найдут ошибки и создадут список рекомендаций по их исправлению. На весь оплаченный период оптимизации сайта за вами будет закреплён веб-аналитик, который сможет ответить на все вопросы по работе с сайтом.
На нашем Telegram-канале делимся полезными материалами по маркетингу и аналитике, кейсами клиентов, собираем познавательные дайджесты и анонсируем бесплатные обучающие вебинары. Подписывайтесь, чтобы ничего не пропустить!
от крутых анимаций до 8-битных игр – Сей-Хай
Хотя мы постоянно пишем о трендах и тенденциях веб-дизайна, это не значит, что сайты должны создаваться под копирку. Наоборот, Интернет – это место для креатива. Даже страница ошибки 404 может быть оригинальной и крутой.
Поэтому, когда в следующий раз вы будете разрабатывать сайт, почему бы не разнообразить опыт пользователя и предложить «Страница не найдена» с анимацией и играми? Ниже представлены примеры лучших страниц с ошибкой 404 в сети. Вдохновляйтесь!
Иногда легче попасть на Изнанку мира, чем найти нормальную работу. Netflix знает свой хит #1, а потому не стесняется использовать его в любом случае. Даже на странице 404 для сайта вакансий.
Страница 404 от BuzzFeed – простая, милая и привлекательная. Её охраняет небольшая кошка. Кроме того, она ещё и анимированная, что добавляет +100 к милоте. Не зря мы поставили её на главную.
Компания-производитель Corsair решила сыграть на своём названии. Если вы попали не туда, вам предложат сыграть в забавную пиратскую игру. Этот 8-битный скроллер – определенно наша любимая игра в Интернете.
Шведский дизайнер Хаким создал действительно жутковатую страничку 404. Мало того, что она выглядит жутко, так ещё и эти глаза следят за курсором мыши при движении. Но главное здесь вот что: страница 404 сделана в стиле работ дизайнера и подчеркивает его креативность.
Компания Fox Movies решила с пользой использовать страницу 404 и разместила там каталог фильмов. Но не обычный каталог: здесь в основном фильмы, которые вы вряд ли бы додумались искать самостоятельно. Например, «Молодой Франкенштейн».
Кстати, почти наверняка вам предложат другой фильм – страница меняется каждый раз.
Вы попали не на ту страницу, так почему бы не использовать это как хороший шанс немного отдохнуть и заняться рисованием? Именно так подумали ребята из Left Logic – компании, которая занимается веб-разработкой. Вот динозавр, например.
Время переходить к тяжелой артиллерии. Goooders были номинированы на Awwwards как лучшая страница 404 в 2019 году. По ссылке вы попадаете в настоящую круговерть психодела, которую можно создавать самостоятельно.
Хотя я бы написал какое-то предупреждение для эпилептиков.
Ну и бонус, конечно же – Amazon. Наш главред сказала, что собаки круче котов. Поэтому мне пришлось поставить эту страницу 404.
Источник: Digital Arts
Больше залипалова:
50+ примеров пользовательского интерфейса, которые мог придумать только дьявол
Такого Киану Ривза вы ещё не видели
Stranger Things + ностальгия по 80-м = новая крутая коллекция Nike
Дизайн страницу с ошибкой 404. Как это работает
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Ошибка 404 или Not Found («не найдено») — код ответа сервера на несуществующую страницу на сайте.
Как это работает? 
Весь процесс происходит по протоколу передачи данных HTTP. Клиентское приложение формирует и отправляет запрос серверу. Сервер, в свою очередь, обрабатывает данный запрос и формирует ответ.
В нашем случае код ответа- 404. Ответ сервера выглядит следующим образом:
Причины 404 ошибки 
Красивая страница 404 для сайта обязательно вам понадобиться, чтобы показать ее пользователю, когда тот:
Перейдет по неправильной ссылке, которая содержит синтаксическую ошибку или просто опечатку.
Попадет на страницу, которая в данный момент не существует. Это означает, что данные могли перенести или вовсе удалить. Также можно предположить, что данной страницы (а значит и ссылки) вообще не существовало.
В любом случае страница уведовляет пользователя о том, что страничка, которую он намеревался посмотреть, не найдена.
Как сделать 404 страницу? 
В первую очередь следует разобраться с тем, как формируется страница 404 для сайта. На самом деле это такая же страница, как и любая другая на вашем веб-проекте.
Если вы используете какую-то CMS, то вам нужно знать структуру файлов и страницу, которая отображается при отработке 404 кода ошибки. Если ваш сайт не на движке, то вас спасет системный файл.htaccess, который располагается в корневой папке вашего сайта. В случае если он отсутствует, создайте его сами.
Как сделать страницу 404?
 Необходимо просто прописать в данный файл следующую инструкцию:
ErrorDocument 404 //сайт/404.php
Всё довольно просто!
Во первых, 404 страница должна быть! Страница 404 ошибки безусловно должна присутствовать на каждом сайте.
В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu»s Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:
если ссылка страницы была изменена, необходимо изменить URL ссылки на новый;
если страницы уже не существует — просто удаляем ссылку.
К сожалению, Xenu не спасает от пользователей, которые могут неправильно ввести текст ссылки и не застрахует от битых или неактуальных внешних ссылок, которые введут на страницы вашего сайта.
Оформление 404 страницы 
По-умолчанию страница 404 ошибки представлена в виде пустой страницы с надписью 404 Not Found, также возможна ситуация с редиректом на страницу хостинга, услугами которого вы пользуетесь.
Значительной доле пользователей всемирной паутины не достаточно предоставить страницу в таком виде — они просто не поймут что произошло, почему сайт вдруг исчез и переслал работать. Это означает только одно — потеря клиента. Но не будем опускать руки и рассмотрим эту ситуацию под другим углом. Как оформить страницу 404 и удержать гостя на сайте?
Текст для 404 страницы 
Скажите “Нет!” технической информации!
Большинству пользователей знаком термин “404 ошибка”, но не стоит углубляться в причины её возникновения и давать дополнительные технические рекомендации. Донесите пользователю суть ошибки.
Предоставьте полезный контент!
Необходимо дать полезную информацию в сложившейся ситуации и натолкнуть пользователя на действие которое поможет решить проблему.
Это можно реализовать разными методами:
разместить меню сайта. Не стоит забывать о ссылке на главную страницу сайта
разместить полезные ссылки- это может ссылки на популярный или новый контент.
Разместить строку поиска по сайту- для того чтобы пользователи нашли то что они искали.
В оформлении 404 страницы важно не переусердствовать — не стоит слишком нагружать ее контентом.
Дизайн страницы 404 
Визуальное оформление 404 страницы не должно выбиваться из общего дизайна.
Сделайте 404 страницу изюминкой сайта! Добавьте креативности страницы с ноткой юмора — это привлекает и удерживает посетителей.
В сети множество примеров того, что значит оригинальная и красивая страница 404. Я не поленился и нашел для вас несколько:










Нередко пользователи веб-ресурсов сталкиваются при посещении сайта с ошибкой 404. Эта ошибка возникает, когда веб-сервер не может найти адрес, который вы указали. Причин, по которым происходит сбой, несколько: адрес сайта был введён с типографскими ошибками или усечениями; файл, к которому вы пытаетесь получить доступ, был удалён или перемещён; неработающая ссылка на сайте.
 
 Страница 404 на сайте Creative People 
Как правило, попадая на такую страницу, пользователи просто покидают её с чувством сожаления и разочарования. Зачастую, расстроенный посетитель больше не возвращается. Это особенно досадно в случаях, когда разработчик не может устранить причину ошибки самостоятельно. Например, в случае, когда недоступен контент. Для таких случаев обычно предусмотрен редирект на главную страницу сайта. Но некоторые дизайнеры решили извлечь максимум полезного из досадного, используя 404 страницу. Хорошо разработанная страница может предоставить для пользователя не только полезные ссылки или, например, карту сайта. 404 страница – это поле деятельности для разработчиков и дизайнеров. Для того, чтобы оценить уникальность и полезность этой страницы, мы предлагаем познакомиться с некоторыми примерами российских компаний и дизайнеров в этом направлении.
И да, в профессиональной среде, специально оформленная страница 404 ошибки является хорошим тоном.

 Знаменитая страница 404 с мозгошмыгой на Хабре (доступна зарегистрированным пользователям) 

 404 метровая глубина с айсбергом на сайте Штокмановского месторождения 

 Страница 404 на сайте Турбомилка 

 Страница 404 на сайте веб-студии Zanami 

 Страница 404 на сайте Центра информационной безопасности с «Лебединым озером» 

 Эпическая 404 страница с молдавскими гастарбайтерами 

 Облако тегов в виде цифр 404 на сайте БФМ 

 На сайте Олега Чулакова похожий принцип, только вместо тегов превью работ 

 У Икеи на странице 404 просто безвыходное положение 

 У Евросети фирменная собачка 

 Страница 404 на сайте дизайнера Сергея Мосякина 

 У дизайнера Евгения Филатова удобная настроечная таблица на 404 странице 

 Традиционный русский квест на сайте студии «Парадокс Бокс» 

 Неопознанный персонаж на сайте дизайн-бюро «Щука» 

 Страница 404 студии «Джаст би найс» с арканоидом на HTML5 

 У Елены Клубничкиной фотоаппарат 

 Не дорисованная страница 404 на сайте студии «Банг! Банг!» 
 404 Страница: Дизайн не найден. Как создавать большие страницы ошибок | Шакуро 
  Катя Шокурова, копирайтер   Шакуро 
 Иллюстрация Пекеньо Капитан
 Что такое страница с ошибкой? Причина смущения и раздражения? Немного беспокоит? Вообще ничего? То, что пользователи натыкаются на страницу 404, также расстраивает владельцев сайтов. Тем не менее, может существовать дизайн страницы 404, на котором можно заработать.
 У вас есть возможность выбрать, что будет чувствовать ваш пользователь.
 Дизайнер может создать креативную страницу с ошибкой 404, чтобы повысить коэффициент конверсии и увеличить трафик, превращая прохожих в потенциальных клиентов. Если вы ищете вдохновение, как улучшить страницу 404 (с примерами), то читайте дальше!
 Дизайн страницы 404 Алекс Калиниченко для Shakuro
 Страница 404 — это онлайн-страница, на которую вы попадаете после нажатия на ссылку, которая не работает и, следовательно, больше не доступна.
 Есть две основные причины, по которым посетитель может оказаться на странице с ошибкой 404:
 Компания удалила определенный контент со своего веб-сайта или изменила его URL-адрес
 Человек неправильно ввел URL-адрес, что не является редкостью на нашем мобильном телефоне. эпоха.
 Итак, ошибка 404 означает, что кто-то напортачил.
 404 Page by OSCAR
 Ошибки — часть нашей жизни, это точно. В идеале пользователи не должны видеть страницу 404 полностью, но в реальном мире веб-сайты регулярно обновляются, некоторые ссылки больше не действуют. Вы никогда полностью не избавитесь от необходимости в странице 404. Но лучше проявить инициативу.
 Надежная страница с ошибкой 404 может превратить плохое качество обслуживания клиентов в приятное.
 Не полагайтесь на 404, предоставляемый браузерами.
 Ух! Это так жестко, холодно, скучно и трудно понять. Слишком много текста и технического жаргона. Он ничем не помогает посетителям.
 Пользовательская страница 404 намного лучше:
  Брендинг.  Это укрепляет имидж вашего бренда и увеличивает вероятность того, что посетители продолжат посещать ваш сайт, а не покинут его навсегда.
  Здание треста.  Обслуживаемая страница 404 действует как надежный метод установления определенного уровня доверия между потребителем и компанией.
  SEO.  Он предоставляет дополнительные ссылки на важные части вашего сайта, чтобы поисковые системы могли достичь его полной структуры.
  Удовольствие.  Забавные страницы 404 играют на творчестве и смягчают удар несбывшихся ожиданий пользователей.
 Daily UI Challenge Day 08–404 Страница Сергея Семенова
 Страница 404 — это страница, на создание которой могут уйти тысячи долларов, при этом надеясь, что ее никто никогда не увидит.
 Дизайн страницы 404, вероятно, не первое, что думает дизайнер или владелец веб-сайта, но все же он жизненно важен.Лучшие практики дизайна страницы ошибок гарантируют, что ваша страница будет на высшем уровне и будет хорошо служить своим целям.
 Новая страница Dribbble 404 от Rogie для Dribbble
 Когда вы создаете пользовательскую страницу с ошибкой 404, она по-прежнему остается страницей вашего веб-сайта, поэтому на ней должны сохраняться те же фирменные и визуальные элементы, что и на любой другой странице, например шрифты, цвета, заголовок, логотип , и сохранить общий стиль и индивидуальность бренда.
 Страница 404 — Еженедельные задачи пользовательского интерфейса — сезон 02 / нед. [2/10], Ана Руменович
 Основная цель страницы 404 — быть функциональной и быстро указывать пользователям в правильном направлении.При разработке страницы 404 подумайте о включении следующих компонентов:
 Базовый элемент. Но на самом деле, если вы последовали совету из предыдущего пункта, он может вам не понадобиться, потому что все необходимые ссылки будут там.
 Поле поиска на макете страницы 404 дает пользователю возможность продолжить поиск любой страницы, которую он имел в виду, тем самым заставляя их оставаться на месте.
  Несколько ссылок на самые популярные страницы 
 Здесь вы можете попробовать сделать некоторые прогнозы и полагаться на законы вероятности.Если пользователь следил за популярной страницей, вы можете быстро указать ему в правильном направлении.
 404 Иллюстрация взаимодействия с ошибкой «Не найдена» для веб-страницы. Автор Тарас Мигулко. Поле поиска очень удобно предлагается после увлекательной анимации.
 Представление пользователю страницы 404, заполненной до краев ссылками на каждую страницу вашего веб-сайта, — это определенный способ проверить пределы терпения уже разочарованного пользователя.
 Минималистичный дизайн страницы с ошибкой 404 может в конечном итоге наиболее эффективно служить своим целям.Лучший дизайн способен достичь своих целей простейшими средствами. Это вершина изысканности дизайна.
  Лучший дизайн — это самый простой, который работает. 
  — Альберт Эйнштейн 
 404 Страница — DailyUI # 008 Хендрик С.
 Каким бы цифровым ни было современное общество, было бы ошибкой думать, что все осознают значение ошибки 404. В конце концов, это не та страница, к которой люди привыкли. Более эффективно разъяснить, в чем проблема, полезным и ясным образом.
 Обратите внимание на текст 404 страницы и выбор слов. Более эффективно выбрать вариант «Извините! Мы не могли найти эту классическую страницу по сравнению с машинной «Ошибка 404: страница не найдена», как раньше.
 Извините. Возможно, это даже не ваша вина, но это покажет пользователю, что вам не все равно.
 Страница не найдена Тран Мау Три Тамом
 Многие веб-сайты используют забавный подход и делают свои страницы интересными, например, GitHub или Pixar.
 Создание забавного и замечательного дизайна страницы 404 может оказать на удивление сильное влияние на то, чтобы посетители дольше оставались на вашем веб-сайте.Люди могли даже рассказать о вашей особенно забавной 404-й странице своим друзьям.
 404. Где страница, Лебовски? Автор: Дмитрий З. Веселый дизайн 404 со ссылкой на «Большой Лебовски»
 братьев Коэн. Предложение некоторых специальных предложений, таких как 10% скидка на странице 404, может уменьшить разочарование ваших посетителей и побудить их продолжить работу с вашим сайтом. и даже получить прибыль от этой ситуации. Используйте что-нибудь вроде «Приносим извинения за неудобства. Позвольте нам что-то вам вернуть, сделав специальную сделку ».Это мощный стимул для продолжения и совершения покупки.
 Пустое состояние — ошибка Страница 404, Рудитьяс W Anggoro
 9 Примеры оформления страницы ошибки 404 Creative 
 Мы все были там. Вы просматриваете веб-сайт и наталкиваетесь на страницу с ошибкой 404, которая оставляет вас в затруднительном положении. Ваш опыт мгновенно разрушается, оставляя вас в замешательстве и разочаровании.
 Но некоторые страницы 404 делают полную противоположность. Они удивляют, заставляют смеяться или продолжают рассказывать историю бренда.
 Ищете вдохновение, чтобы сделать страницу 404 вашего сайта удивительно красивой? Мы потратили некоторое время на Dribbble и собрали наши любимые дизайны страниц 404.
 Зазули Азиз. Игривый текст и жирная графика заставят вас забыть, что вы попали на страницу, которую не должны были видеть. 
 Игорь Плак. Эта очаровательная иллюстрация пропавшей страницы на упаковке молока заставляет нас бросить все и отправиться на поиски. 
 Тимоти Дж. Рейнольдс. Эта страница ошибок, созданная для Twitch, видеоплатформы и сообщества геймеров, действительно обращается к целевой аудитории с помощью изометрической графики, которая так распространена в видеоиграх и пиксельной графике.
 Эрнест Асанов. Где-то в далекой-далекой стране на ветвях куста, разрывающегося цветом, укрыта страница 404. Кто бы не хотел побывать в этом мире? 
 Лена Зайцева. Страница ошибки не обязательно должна быть статичной. На этой странице отображается название веб-сайта, а затем отображаются слова, разделенные на «404». Это умный способ добавить движения на страницу. 
 Виктор Керн. Иллюзия глубины на этой странице 404 затягивает вас в дизайн и заставляет вас чувствовать, что вы действительно парите в космосе (и удобно заставляет вас забыть, что вы приземлились не в том месте!).
 Мэй. Насколько хороша эта страница ошибок на тему Хэллоуина? Хотя это определенно требует дополнительного планирования и работы, включение сезонных элементов на страницу 404 — отличный способ удивить клиентов. 
 Костя Варгатюк. Эта страница, созданная для цифрового креативного агентства, показывает, насколько важна обработка шрифтов для общего внешнего вида страницы. Здесь шрифт должен выглядеть как акварель ручной работы. 
 Ризван Багирли. Эта страница 404 может показаться простой с одним выбором цвета и простыми трехмерными иллюстрациями, но она достаточно отличается, чтобы вы остановились и изучили дизайн, прежде чем пытаться отправиться домой.
 Мы пропустили ваш любимый дизайн страницы 404? Поделитесь этим с нами в Twitter: @InVisionApp.
 10 Ошибка 404 Примеры страниц для UX-дизайна 
 Эти примеры страниц 404 показывают, как дизайнеры могут превратить простую вычислительную ошибку в фирменный пользовательский интерфейс (UX).
 Самые ранние модели персональных компьютеров имели 64 КБ ОЗУ или меньше. Программистам нужно было все упростить. Они разработали систему классификации программных функций.Ошибки ввода были присвоены классу 400.
 400 Неверный запрос. Введен неправильный синтаксис.
 401 Несанкционированный. Пользователь не может получить доступ без имени пользователя и пароля.
 403 Запрещено. У пользователя нет разрешения на доступ к файлу.
 404 Не найдено. Пользователь ввел несуществующий URL или связался с ним.
 Раньше пользователям приходилось вводить точный URL-адрес. Например, если вы хотели посетить Yahoo Finance, вам нужно было ввести полный URL-адрес: http: // www.finance.yahoo.com
 Если при вводе URL-адреса вы «потрогали» клавиатуру, то получите код ошибки 400 или 404.
 В настоящее время браузеры позволяют вводить сокращенный адрес, например  www.finance.yahoo.com  или даже  finance.yahoo.com . Фактически, если вы введете полный адрес в строку поиска с синтаксисом из приведенного выше примера, браузер перенаправит вас.
 Почему? Потому что это старый синтаксис с использованием HTTP. Обновленный сайт представляет собой более безопасный URL-адрес с использованием HTTPS.Последние версии браузеров вносят исправления автоматически.
 Ошибка 404 теперь является целевой страницей, на которой вы можете побудить пользователей продолжить использование вашего веб-сайта. Дизайн вашей страницы 404 должен удерживать пользователя от ухода.
 Вот некоторые элементы, которые вы можете использовать:
 Гиперссылки на домашнюю страницу и другие полезные страницы.
 Строка поиска.
 Графические элементы, отражающие бренд сайта.
 Краткое сообщение пользователю фирменным голосом.
 На этих примерах страниц 404 мы рассмотрим, как разные бренды используют эти элементы UX.
 404 примеры страниц: ссылка на домашнюю страницу 
 UXPin 
 Сначала рассмотрим нашу собственную страницу 404.
 Как видите, нам нравится простота. У нас много белого пространства вокруг графики на космическую тематику. Послание простое: «Эй, капитан! Похоже, вы направляетесь не на ту планету! »
 Мы добавили кнопку призыва к действию (CTA), которая возвращает пользователя на главную страницу.
 Google 
 Страница 404 Google также очень проста и имеет много белого пространства.
 «Запрошенный URL не был найден на этом сервере. Это все, что мы знаем.»
 Изображение сломанного робота отражает их высокотехнологичный бренд. Здесь нет призыва к действию, и вы обнаруживаете, что логотип Google является ссылкой на главную страницу, только если навести курсор мыши.
 Многие UX-писатели скажут вам, что не использовать CTA, и в большинстве случаев это так.Помните, вы хотите, чтобы посетители продолжали использовать ваш сайт.
 Google — исключение, потому что они знают, что их посетители всегда вернутся.
 404 Примеры страниц: полезные ссылки на страницы 
 Анги 
 Ранее HomeAdvisor, этот сайт подрядчика по оказанию домашних услуг содержит множество ссылок на другие полезные страницы.
 Сообщение пользователю простое:
 «Ой, это неловко…
 «Похоже, что страница, которую вы ищете, была перемещена, удалена или не существует.Приносим извинения за неудобства ».
 CTA — это список ссылок на предлагаемые страницы.
 В шапке также есть ссылки на типы домашних услуг и сообщения в блогах.
 В нижнем колонтитуле есть ссылки на службы в крупных мегаполисах, таких как Нью-Йорк, Чикаго, Лос-Анджелес и Даллас. Другие полезные ссылки также находятся в нижнем колонтитуле.
 Angi держит все «в секрете». То есть вам не нужно прокручивать страницу, чтобы перейти к какой-либо из ссылок.
 Старбакс 
 В 404 Starbuck изображение кофейного кольца там, где раньше стояла чашка, выступает как метафора страницы, которой нет.
 Он предлагает объяснение того, что могло пойти не так, и некоторые предложения о том, что делать дальше.
 На нем есть ссылка, по которой посетители могут сообщить о неработающих ссылках.
 Glassdoor.com 
 Взглянув на страницу 404 Glassdoor, популярная доска объявлений предлагает несколько действий.
 Поиск работы.
 Читайте отзывы сотрудников компаний.
 Просмотр заработной платы сотрудников.
 См. Вопросы и ответы на собеседовании.
 Посмотрите рейтинг лучших мест для работы.
 404 примеры страниц: с фокусом на графике 
 eBay 
 Фотография ребенка в зимнем пальто с накинутым на глаза капюшоном находится в центре внимания страницы 404 eBay.
 «Мы искали везде».
 «Похоже, эта страница отсутствует. Если вам все еще нужна помощь, посетите наши справочные страницы ».
 Ниже находится кнопка CTA, которая переводит посетителя на главную страницу eBay.
 Внизу страницы находится ползунок с трендовыми сделками.
 Лего 
 Когда вы попадаете на эту страницу 404, вы видите Эммета из  The Lego Movie . Его цитируют: «Все по-прежнему потрясающе».
 404 примеры страниц: вращающиеся элементы 
 Amazon.com  На странице
 Amazon 404 вверху находится панель поиска, в которой предлагается выполнить поиск или щелкнуть ссылку на домашней странице.На нем есть фотография одной из «собак Амазонки». Он ссылается на новостную страницу Amazon о работе Amazon, удобной для собак.
 Если вы обновите страницу, появится изображение другой собаки амазонки. Обновите страницу несколько раз, и вы увидите множество случайных фотографий собак. Мы не знаем, сколько их у страницы 404, но более 7000 собак «работают» на Amazon.
 Комиксы Marvel 
 Как и Amazon, Marvel вращает несколько версий своей страницы 404. Они показывают изображения из вселенной Marvel Comics с такими сообщениями, как:
 «Протокол отсутствует… Программа закрывается…»
 «Гидра в данный момент атакует эту страницу!»
 «$ # &%, ты что-то сломал! Просто шучу.
 «Даже глаз Нуату не видит твоей просьбы».
 «Гидра украла эту страницу у Щ.И.Т.а. база данных!»
 IMDB 
 Еще одна вращающаяся страница 404 из Международной базы данных фильмов (IMDB). Они остаются на стороне бренда и предлагают своим поклонникам знакомство, предлагая цитаты из фильмов.
 «Веб-страницы? Куда бы мы ни пошли, нам не нужны веб-страницы ». — Д-р Эммет Браун,  Назад в будущее .
 «Когда-нибудь мы найдем это… соединение с сайтом.»- Лягушонок Кермит,  Маппет-фильм .
 «Конечно, ты не можешь быть серьезным». «Я серьезно. И не называй меня Ширли. –Тед Страйкер и Раммак,  Самолет .
 «То, что мы имеем здесь… это неспособность общаться». — Капитан,  Cool Hand Люк .
 «Страница не найдена? НЕВЕРОЯТНО! » — Виццини,  Принцесса-невеста .
 «У меня такое чувство, что мы больше не в Канзасе». — Дороти,  Волшебник из страны Оз .
 Заключительные мысли 
 UXPin — это полнофункциональная программа UX / UI-дизайна, которая дает вам инструменты для реализации любого проекта от концепции до запуска продукта в одном приложении.
 При разработке страницы 404 вы можете поделиться с соавторами и заинтересованными сторонами в режиме реального времени прямо с платформы. Они могут добавлять свои комментарии, чтобы сделать итерацию более плавной, вместо множества обратных писем. Начните бесплатную пробную версию сегодня.
 15 лучших примеров 404 страниц в Интернете 
 Мы все привыкли свободно перемещаться по веб-сайтам и непрерывно прокручивать каналы вниз. Когда что-то идет не так или мы нажимаем на ссылку, которая не работает, последующее сообщение «Эта страница не может быть найдена» может быть более чем разочаровывающим.И именно здесь в игру вступают 404 страницы.
 Страница с ошибкой 404 может улучшить или испортить качество обслуживания клиентов. Этот небольшой, но очень важный раздел дизайна вашего веб-сайта может повысить ваши продажи и побудить посетителей к действию. Это может быть разница между тем, как посетитель бросает и покидает ваш сайт, или становится постоянным клиентом и поклонником вашего бренда.
 Следующие бренды и дизайнеры показывают нам, как можно использовать классическое сообщение об ошибке в ваших интересах.Они обновили свои 404 страницы, чтобы не только смягчить удар, но и подарить клиентам улыбку, чувство облегчения или даже небольшой смех. Вот некоторые из лучших примеров страницы 404:
 Что такое страница 404? 
 Страница 404 — это онлайн-страница, которая появляется, когда вы нажимаете на ссылку, которая не работает и, следовательно, больше (или фактически никогда не была) доступна.
 Это может произойти, если кто-то неправильно наберет URL (или, другими словами, веб-адрес, который отображается в адресной строке браузера).Вы также можете перейти на страницу 404, если компания удалила или переместила определенный контент со своего веб-сайта или внесла изменения в структуру своих постоянных ссылок.
 При создании веб-сайта вы можете либо оставить параметр по умолчанию как есть, либо настроить страницу с ошибкой 404. Последнее дает вам возможность создать привлекательный дизайн, который повысит качество обслуживания клиентов. В дополнение к дизайну у вас будет возможность написать дружественное сообщение о бренде, которое предоставит посетителям помощь и указания, которые им необходимы для продолжения просмотра.
 01. Pixar — Симпатичная страница 404 
 Поклонники Pixar, несомненно, оценят эту трогательную страницу 404. В нем представлен персонаж из всеми любимого фильма  Inside Out , что помогает укрепить репутацию их бренда и наладить связь с посетителями сайта. Использование разговорного языка и знакомого персонажа также делает страницу более человечной, помогая нам общаться и общаться.
 Независимо от того, известен ли ваш бренд во всем мире так же широко, как Pixar, вы можете экспериментировать с текстом и изображениями, чтобы создать дружеское, человеческое ощущение.Поиграйте с теплым и неформальным языком, используя такие слова, как «ууууу» и «ой», чтобы установить связь с аудиторией.
 02. Омлет — страница 404 с юмором 
 Нет ничего лучше легкого юмора, чтобы облегчить неприятную ситуацию, особенно если все сделано хорошо. Креативная компания Omelet использовала силу сдержанной комедии на своей странице 404, при этом придерживаясь своей темы, связанной с яйцами.
 Яркий оттенок красного автоматически указывает на предупреждающий знак, но первоначальная паника уравновешивается комическим сообщением «Эта страница неаккуратна».Обратите внимание, как они оставили свою строку меню видимой в верхней части экрана, что упростило навигацию по сайту и позволило посетителям сайта продолжить просмотр.
 03. Dribbble — Interactive 404 page 
 Отвлечение — не всегда плохо. Страница с ошибкой социальной сети Dribbble доказывает это. Веселый интерактивный дизайн приглашает посетителей поиграть, на мгновение отвлекая их внимание от того факта, что они не достигли желаемой веб-страницы.
 Игра не только затягивает, но и служит формой навигации; щелкнув любое изображение, вы попадете в профиль его создателя, плавно удалив вас со страницы 404.Они также позаботились о том, чтобы включить строку поиска и ссылку на свою домашнюю страницу.
 04. Dropbox — Helpful 404 page 
 Вы не можете не влюбиться в этот дружелюбный, балансирующий на велосипеде дуэт. Нарисованные в невинном иллюстративном стиле, фигуры улыбаются от щеки к щеке и, кажется, делают все немного лучше. Этот замечательный пример включения иллюстраций в веб-дизайн передает ощущение знакомства и доступности, что облегчает разочарование при достижении страницы с ошибкой 404.
 Кроме того, Dropbox постарался добавить несколько полезных ссылок. Это позволяет пользователю легко перейти на альтернативную страницу. При создании собственной страницы 404 рекомендуется помочь посетителям вашего сайта, добавив ссылки на самые популярные разделы вашего сайта, такие как домашняя страница, раздел контактов и страница «О нас».
 05. The-Artery — фирменная страница 404 
 Не так много людей, которые будут жаловаться, открыв эту красиво оформленную страницу 404. Модные визуальные эффекты гармонируют с остальной частью веб-сайта этой творческой студии, что обеспечивает удобство просмотра даже при обнаружении неработающей ссылки.
 Само изображение движется в ответ на курсор и состоит из интересных элементов. Это увеличивает вероятность того, что посетители сайта даже намеренно задержатся на этой странице немного дольше. Используемый текст также удобен, предлагая вам щелкнуть в любом месте экрана, чтобы легко продолжить просмотр.
 06. Lazy Oaf — пример модной страницы 404 
 Вот страница 404, которая не совсем соответствует правилам. Модный лейбл Lazy Oaf, утверждающий, что «с 2001 года ведет себя странно», сдержал свое обещание — как можно лучше.
 Вместо того, чтобы предоставлять посетителям сайта обычное объяснение того, почему они, возможно, попали на эту страницу с ошибкой, они заменили ее комичными отговорками, грустными смайликами и табличкой с надписью «дерьмо случается». Однако эта очень откровенная и ярко раскрашенная страница 404 совсем не грустная. Они также обеспечили интуитивно понятную навигацию, сохранив видимую строку меню, а также добавив изображения из своего интернет-магазина на расстоянии короткой полосы прокрутки.
 07. Spotify — страница 404 с индивидуальным оформлением 
 Страница ошибки Spotify помогает укрепить идентичность их бренда за счет модного использования розовых и виниловых изображений тысячелетия.Они сохранили свои панели меню на виду, как в верхнем, так и в нижнем колонтитулах, что упростило навигацию.
 Помимо возможности навигации по меню, Spotify также принял дружественный разговорный язык, чтобы предлагать другие полезные страницы. При создании своего собственного сайта попробуйте использовать неформальные слова, такие как «может быть», и вопросы, чтобы посетители вашего сайта почувствовали, что с другой стороны находится человек.
 08. Julie Bonnemoy — Анимированная страница 404 
 Это портфолио от дизайнера-фрилансера Julie Bonnemoy — настоящий праздник для глаз.Страница 404 почти идентична дизайну домашней страницы, только с другим текстом. Это означает, что вы можете плавно переходить к любому из других разделов, едва заметив, что вы достигли 404.
 Если вы решите оформить свою домашнюю страницу и страницу 404 в аналогичном стиле, вы можете поэкспериментировать с добавлением определенных элементов для создания увлекательный опыт. Поиграйте с анимированными элементами на своем сайте, добавьте прозрачные видеоролики и уникальные векторные иллюстрации.
 09. OkCupid — Tranquil 404 стр. 
 Сеть знакомств OkCupid не пытался скрыть свою главную цель: побудить посетителей сайта подписаться на ее сервис.Хотя этот заметный CTA (призыв к действию) очень прямой по своему подходу, он сочетается с нежным шрифтом и успокаивающими подводными визуальными эффектами, которые плавно перемещаются по экрану. Вместе они образуют общий уравновешенный вид, который далеко не напористый.
 Еще один совет — сконцентрируйте дизайн страницы 404 вокруг успокаивающих оттенков, чтобы убедить клиентов, что, хотя страница может отсутствовать, они все еще на правильном пути. Оттенок синего OkCupid вызывает умиротворение и чувство доверия — мудрый выбор для страницы 404.Чтобы подобрать подходящий оттенок для вашего дизайна, стоит изучить психологию цвета.
 10. Lego — Friendly 404 page 
 Lego использовала знакомого персонажа для дизайна своей страницы 404, помогая связать аудиторию с брендом и создать дружескую атмосферу. Их разговорный стиль текста также обнадеживает, сохраняет тон легким и игривым, с восклицательными знаками и повседневным языком.
 Если вы также собираетесь создать юмористическую страницу 404, убедитесь, что она функциональна, как это сделала Lego здесь, предлагая альтернативные варианты навигации.Они выделили кнопку с призывом к действию на белом фоне, что делает ее заметной. Сохраняя меню на виду, как в верхнем, так и в нижнем колонтитуле, посетители сайта могут легко переходить на дополнительные страницы.
 11. Ueno — страница 404 с креативной копией 
 Цифровое агентство Ueno создало несколько вариантов своей веселой, беззаботной страницы 404. Анимированного хот-дога, который, казалось бы, спасает свою жизнь, достаточно, чтобы вызвать улыбку на любом лице. Но в сочетании с остроумным текстом слева посетители сайта будут рады, что наткнулись на эту отсутствующую страницу.
 Уэно сочетает комедию с точным, минималистичным дизайном. Если вы добавляете юмор на свою страницу 404, убедитесь, что сбалансировали его, поддерживая профессиональный вид, соответствующий принципам дизайна. Использование белого пространства, минимальной цветовой палитры и текстовой иерархии помогает бренду достичь профессионального тона.
 12. Figma — Привлечение 404 page 
 Хотя на первый взгляд это может показаться классическим дизайном с черным текстом на белом фоне, это далеко не так. Более пристальный взгляд откроет возможность поиграть с текстом, сделав несколько захватывающей интерактивной игрой и дающей представление о природе самого продукта.
 Figma также включает множество различных вариантов навигации, включая меню как вверху, так и внизу страницы. Потенциально разочарованные посетители могут легко получить доступ к нужной странице, щелкнув один из множества пунктов меню.
 13. MailChimp — Heartwarming 404 page 
 Реализуя стиль иллюстрации, идеально сочетающий детский и эмоциональный характер, MailChimp определенно знает, как смягчить несколько удручающую ситуацию при переходе на страницу 404.Они включают большую кнопку, которая выделяется, являясь единственным цветным элементом и расположена прямо посередине страницы.
 Однако, что делает эту страницу 404 по-настоящему особенной, так это чувствительность, с которой был создан каждый элемент. Образ осла с головой в норе, отчаянно ищущего страницу, которую искал посетитель, движется сам по себе. Но в сочетании с поэтическим языком и сочетанием шрифтов с засечками и без засечек общий эффект трогает и поднимает настроение.
 14. Уэйд и Лета — Странные и чудесные 404 стр. 
 Этот уникальный дизайн творческого дуэта Уэйда и Леты выделяется из толпы. Как и все остальное их онлайн-портфолио, оно личное и странное во всех смыслах. Они включили короткую зацикленную гифку, на которой Уэйд болтает в проходе супермаркета и делает жест рукой, который, кажется, не имеет отношения к проблеме страницы 404.
 Однако он вызывает улыбку, что, несомненно, является положительным результатом перехода на страницу с ошибкой.Большой текст на вашем лице — это не только тренд веб-дизайна, он также служит для того, чтобы прямо и стильно проинформировать вас о проблеме.
 15. Wix — Четкая и лаконичная страница 404 
 Мы не могли не добавить эту. И не только потому, что на нем невероятно пушистый кот. Хотя этот кошачий друг, безусловно, выигрывает по привлекательности, он также позволяет тонко предположить, что посетитель сайта, возможно, неправильно набрал доменное имя (либо это, либо виноваты какие-то лапы).
 Помимо визуального аспекта, эта страница с ошибкой предлагает полезные ссылки, которые направят посетителя в желаемое место.Текст краткий и по существу. Сочетание с простой цветовой схемой веб-сайта, состоящей из большого белого фона, а также с оттенками серого и черного, страница вызывает чувство спокойствия.
  Автор: Дана Меир 
 Эксперт и писатель по дизайну
 Стр. 404. Дизайн значимой ошибки. 
 Жизнь часто доказывает, что ошибки — это лишь часть прогресса. Ошибки — неизбежная часть жизни человека, и область взаимодействия с цифровыми продуктами не исключение.Невозможно предсказать все ошибки, которые могут возникнуть между человеком и технологиями, но тестирование и анализ могут позволить дизайнерам найти способы, как сделать ошибки полезными или, по крайней мере, легко решаемыми. Сегодняшний пост посвящен, пожалуй, самой частой ошибке в Интернете, известной как страница 404: давайте внимательнее рассмотрим определение этого явления, его вероятную структуру и дизайн, а также множество творческих примеров из мирового сообщества дизайнеров.
 Что такое страница 404? 
 Технически 404 или Not Found — это сообщение об ошибке в коде ответа HTTP (протокол передачи гипертекста), которое отправляется в случае, если пользователь успешно подключился к серверу, но по какой-то причине не может получить запрошенный контент.Когда это происходит, например, в ситуациях, когда пользователи пытаются перейти по удаленной, неработающей или неработающей ссылке, сервер веб-сайта формирует и отправляет веб-страницу 404, информирующую пользователя о том, что контент не может быть найден.
 Безусловно, страница может иметь очень простой и базовый вид с одной строкой текста, говорящей, что «здесь ничего нельзя найти». Однако подавляющее большинство веб-сайтов предпочитают применять настроенную веб-страницу 404. И это действительно можно охарактеризовать как удобную для пользователя политику, также успешно поддерживающую продвижение веб-сайта или бренда.Правильно оформленная и стильная веб-страница, которую показывают всем, кто ошибся в ссылке, способна не только информировать пользователей, но и перемещаться по ним, развлекать или просто доставить момент эстетического удовольствия.
 Что включает страница 404? 
 Среди широко используемых элементов макета на странице 404 можно отметить:
 Во многих случаях концепция дизайна, выбранная для этого типа веб-страницы, соответствует общему стилистическому исполнению веб-сайта, чтобы сохранить ощущение целостности и последовательности.Это означает, что дизайнеры применяют одинаковую или очень близкую цветовую палитру, стиль элементов макета и графический дизайн, типографику и сетку. Тем не менее, некоторые дизайнеры выбирают противоположный способ представления и заставляют страницу 404 полностью отличаться от всего остального веб-сайта, что, возможно, поддерживает идею о том, что такого рода ошибки являются случайностью и не должны быть связаны с остальное содержимое веб-сайта.
  Страница 404 в Dribbble с применением сообщения об ошибке, двух вариантов ключевых ссылок (домашняя страница или контактная форма), фирменного знака (буквенное обозначение бренда) и изображения темы в качестве фона 
  404 страница для UXBooth с применением сообщения об ошибке, возможность прямого обращения в службу поддержки и меню категорий контента.
 Здесь также можно упомянуть два разных подхода к отображению числа «404». На некоторых страницах он используется как центральный элемент композиции, поскольку все активные пользователи Интернета знают, что означает это число в Интернете: быстро просматривая заметные и разборчивые числа, пользователь будет проинформирован о проблеме за доли секунды. Однако есть также дизайнеры, которые не делают число 404 быстро заметным в общей визуальной иерархии страницы: это часто случается, когда эта страница используется в качестве поля для дополнительной навигации и представления контента.
 Что касается элементов навигации, примеры, показанные ниже, позволят вам увидеть, что большинство из них применяют сообщение об ошибке к пользователю и ссылку или кнопку на домашней странице. Тем не менее, этот базовый набор можно эффективно расширить за счет:
 Набор ссылок или меню, предоставляющее пользователю множество маршрутов, а не только домашнюю страницу, прямо с этого момента
 фиксированный заголовок, позволяющий пользователю мгновенно переходить к ключевым областям веб-сайта
 поле поиска, через которое пользователь может запросить необходимый контент, не возвращаясь на домашнюю страницу
 Коллекция рекомендуемых сообщений, которые могут заинтересовать пользователя
 рекламный элемент или ссылка.
 Определенно, здесь не упоминается, что все эти элементы должны быть включены на одну страницу вместе: выбор и состав должны быть основаны на тщательном исследовании пользователей. Устанавливая приоритеты, дизайнер может принять решение о том, что следует включить в макет: если пользователям нужно переходить только на домашнюю страницу, то все остальные параметры будут отвлекать внимание. И наоборот, если пользователи, скажем, ищут определенный продукт или предмет, они, вероятно, не будут рады вернуться на главную страницу и только там получить доступ к поиску.Решение должно зависеть от целевой аудитории, ее потребностей и желаний, проблем, решаемых через платформу, на которой они находятся.
 Сообщение об ошибке обычно является еще одним объектом для рассмотрения: копия должна быть слишком длинной, стиль и манера общения (формальная или неформальная) должны соответствовать общему тону и голосу веб-сайта, шрифты должны гармонично выглядеть в макете и разборчивый. Сообщение об ошибке должно дать пользователям почувствовать, что их уважают, и четко проинформировать их о том, что произошло.
 Еще один очень обсуждаемый элемент дизайна страницы 404 — это нестандартная графика. В обзоре тенденций дизайна 2016 года мы отметили растущую тенденцию применения кастомных иллюстраций в мобильных и веб-интерфейсах. Страница 404 — одно из наиболее удобных мест для реагирования на эту творческую тенденцию: оригинальные иллюстрации или уникальная графика могут поддерживать стилистическое исполнение и общение с пользователями. Не секрет, что люди — визуальные существа, и картинка стоит тысячи слов: она может не только информировать, но и добавлять атмосферу веселья, развлечения, формальности и т. Д.Такой подход может превратить простую веб-страницу в источник эстетического удовлетворения, что, кстати, является важным источником положительного пользовательского опыта.
 Сборник креативных страниц 404 
 Теперь перейдем от теории к практике: здесь мы выбрали разнообразный набор креативных концепций веб-дизайна, по-разному применяя пользовательскую графику, упомянутую выше.
  По TUBIK 
  Эндрю Колин Бек 
  Тимоти Дж.Рейнольдс 
  По UENO 
  По Congruity Hub 
  Ольга Байдалинова 
  Энтони Лагун 
  По TUBIK 
  Автор: Kejia Shao 
  Александр Савич 
  Анастасия Андрийчук 
 , Lucija Frljak 
 Итак, мы можем определенно сказать, что в дизайне 404-страничное разнообразие является ключевым моментом: следуя простому базовому пониманию, какую информацию пользователь должен получить с этой точки серфинга, дизайнеры могут найти сотни творческих способов элегантной доставки. и услужливо.
 Полезные статьи 
 Копирование содержимого в пользовательских интерфейсах: советы и практические приемы
 Как улучшить возможность веб-сканирования
 3C дизайна пользовательского интерфейса: цвет, контраст, содержание
 Как выбрать между светлым и темным UI
 Как работает человеческая память: идеи для UX-дизайнеров
 9 эффективных советов по визуальной иерархии
 Страница 404, креатив, D4U Вдохновение, дизайн, советы по дизайну, графический дизайн, HCI, взаимодействие человека с компьютером, иллюстрация, взаимодействие, дизайн взаимодействия, интерфейс, пользовательский интерфейс, удобство использования, взаимодействие с пользователем, пользовательский интерфейс, UX, веб, веб-дизайн, веб-дизайн , сайт,
 английский
 русский
 украинец
 13 лучших примеров дизайна страницы с ошибкой 404 в WordPress 
 Вы ищете лучшие примеры дизайна страницы с ошибкой 404 в WordPress?
 Большинство пользователей, которые посещают страницу с ошибкой 404 по умолчанию, быстро покидают ваш сайт.Это увеличивает показатель отказов, что может негативно повлиять на ваш сайт. Вы можете оптимизировать страницу с ошибкой 404 на своем веб-сайте, чтобы снизить показатель отказов и увеличить количество просмотров страниц.
 В этой статье мы поделимся некоторыми из лучших примеров дизайна страницы с ошибкой 404 в WordPress, которые могут вас вдохновить.
 Оптимизация страницы с ошибкой 404 в WordPress 
 Ошибка 404 может возникать по нескольким причинам, и пользователь быстро переключается на другой веб-сайт, что не очень хорошо влияет на рейтинг вашего сайта в поиске.
 Пока вы устраняете проблему, вы можете настроить страницу ошибки 404 в WordPress, чтобы привлечь внимание пользователей. Это включает в себя кнопку с призывом к действию для перенаправления пользователей на вашу домашнюю страницу, значки социальных сетей для увеличения количества подписчиков, форму подписки на рассылку новостей по электронной почте для привлечения новых потенциальных клиентов и многое другое.
 Самый простой способ создать собственный дизайн страницы 404 — использовать плагин SeedProd. Это самый популярный конструктор целевых страниц с функцией перетаскивания, позволяющей настраивать страницы ошибок без редактирования кода.
 Он предлагает более десятка встроенных шаблонов страниц ошибок 404, которые вы можете выбрать и отобразить на странице ошибок вашего веб-сайта. Вы также можете создавать собственные шаблоны.
 Эти шаблоны страниц ошибок имеют привлекательные цвета и потрясающие шрифты, которые привлекают внимание пользователей с первого взгляда.
 При этом давайте взглянем на некоторые из лучших дизайнов страниц с ошибкой 404, чтобы заинтересовать ваших пользователей.
 Шаблоны страниц 404 от SeedProd 
 Ниже вы найдете самые популярные платные и бесплатные шаблоны SeedProd для страницы с ошибкой 404.Выберите шаблон и легко оптимизируйте страницу с ошибкой.
 1. Пустая чашка 404 Страница 
 2. В центре внимания 404 Страница 
 3. Бесплатно 404 Страница 
 4. Пустыня 404 Страница 
 5. Скоро появится Horizon Стр. 
 6. Звезды 404 Страница 
 7. Цвет Темный 404 Страница 
 8. Цветной свет 404 стр. 
 9. Электронная торговля 404 Страница 
 10.О нет 404 Page 
 11. Потерянная страница 404 
 12. Под водой 404 Страница 
 13. Разбитое яйцо 404 Страница 
 По умолчанию эти шаблоны отлично выглядят и готовы к использованию на странице ошибок. Однако вы можете полностью настроить шаблон страницы ошибки с помощью конструктора целевой страницы SeedProd, чтобы он соответствовал вашему бренду и привлекал пользователей на ваш сайт.
 Мы надеемся, что эта статья помогла вам найти лучшие примеры дизайна страницы с ошибкой 404.Вы также можете ознакомиться с нашим руководством по лучшим плагинам для создания страниц WordPress и нашим сравнением лучших услуг электронного маркетинга, чтобы превратить потенциальных клиентов в платежеспособных клиентов.
 Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.
 Лучшие примеры 404 страниц с нашей кухни 
 Продуманная страница 404 может помочь вам увеличить посещаемость веб-сайта.
   «Запрошенный URL-адрес не был найден на этом сервере.” 
 Вы можете помнить это с первых дней Интернета. Это общее сообщение об ошибке 404, сообщающее посетителям веб-сайта, что они попали на несуществующую страницу. Это сообщение появилось в верхнем левом углу, оставив остальную часть страницы полностью пустой.
 В настоящее время вы не найдете такой жесткой и простой страницы с ошибкой 404.
 Но если номер кода ошибки все тот же и сообщение такое же, что изменилось?
 Разница заключается в  КАК отображается ошибка .
 Веб-дизайн претерпел огромные изменения, поэтому обеспечение отличного пользовательского опыта (UX) с простым, логичным пользовательским интерфейсом (UI) и ясным, кратким текстом является главным приоритетом.
 На нашей дизайнерской кухне мы готовим несколько восхитительных проектов и хотим дать вам возможность взглянуть на некоторые из наших самых интересных примеров 404 страниц. Но прежде чем мы погрузимся в них, вот краткий обзор, который поможет вам лучше понять дизайн 404.
 Что такое страница 404? 
  Целью  страницы 404 является отображение сообщения об ошибке 404 и информирование посетителей о том, что страница, которую они искали, не существует по данному URL-адресу.
  Причины , которые могут вызвать ошибку 404, включают:
 Случайная опечатка в URL-адресе
 Неработающая ссылка, ведущая на страницу ошибки
 Ошибка в исходном коде страницы
 Неверный код перенаправления
 Домен с истекшим сроком действия
 A (повторно) перемещена страница
 Неправильно обновленная страница
 Необнаруженные изменения URL-адреса
  Цель  страницы 404 — которую дизайнеры, копирайтеры и разработчики не должны упускать из виду — состоит в том, чтобы заставить посетителей чувствовать себя менее неудобно из-за неудобств и направить их на другие полезные и актуальные страницы веб-сайта.
 Страница 404 является частью когорты страниц с ошибками, которые вам необходимо иметь на своем веб-сайте, поэтому не забудьте включить ее в свой контрольный список веб-дизайна и подготовить перед запуском сайта.
 Создание страниц 404: хорошие и плохие практики 
 Теперь, когда вы знаете, о чем эта страница, давайте рассмотрим, как ее оформить, чтобы сделать ее привлекательной и интересной для посетителей вашего веб-сайта.
  Надлежащая практика проектирования 404: 
 Будьте информативны и поддерживайте интерес посетителей
 Предложите путь восстановления со ссылками на другие страницы
 Включает привлекательные кнопки с призывом к действию
 Отображение отличительной строки поиска на месте
 Совместите дизайн 404 с остальной частью веб-сайта
 Совместите эту страницу с цветами, стилем и голосом вашего бренда
 Используйте дружелюбный тон голоса при тексте страницы
 Используйте собственные изображения — иллюстрации, анимацию, видео, GIF и т. Д.
  Плохая практика проектирования 404: 
 Оставьте посетителей без понятия, что делать дальше (кроме нажатия кнопки «назад» и выхода с вашего сайта, даже не оглядываясь назад)
 Используйте только общий текст «Страница не найдена»
 Винить посетителей в ошибочном переходе на страницу 404
 Например, чтобы не обвинять посетителей, вместо того, чтобы говорить: «Вы, должно быть, ввели неправильный URL», на копии страницы должно быть написано что-то вроде: «Пока мы пытаемся выяснить, что пошло не так, вы можете посетить наш Домашняя страница и продолжайте изучение.”
  Тон голоса , который вы используете, может сильно повлиять на восприятие вашего бренда. Короткий эксперимент Nielsen Norman Group (NN / g) показал именно это:
 «Различные тона голоса на веб-сайте оказывают ощутимое влияние на восприятие пользователями дружественности, надежности и желательности бренда. Лучше всего подходят повседневные, разговорные и восторженные тона ». — Nielsen Norman Group
  Призывы к действию (CTA)  также очень важны.Без какой-либо кнопки CTA — даже если это простой якорный текст со ссылкой — пользователи немедленно покинут страницу.
 Дайте пользователям повод задержаться подольше, стратегически разместив призывы к действию. Это может помочь вам собрать дополнительный веб-трафик.
 Лучшие примеры страниц 404 из наших текущих проектов 
 Пора показывать!
 Давайте взглянем на несколько вдохновляющих дизайнов страниц с ошибкой 404, над которыми мы сейчас работаем.
 Мы рассмотрим каждый пример и укажем его сильные стороны, чтобы вы могли выбрать функции, которые могут соответствовать вашему стилю и лучше всего подходят для вашего веб-сайта.
 Пример № 1: Knopp Biosciences 
 Дизайн страницы 404 для  Knopp Biosciences  соответствует цветовой палитре веб-сайта и общему стилю бренда.
 Он предлагает простую, понятную копию и две возможности — посетить домашнюю страницу или вернуться на предыдущую страницу. Все это упаковано в  визуально отличительных кнопок CTA  с четкими призывами к действию и дружелюбным, но информативным тоном.
 Если вы присмотритесь, вы увидите изображение человека на заднем плане, смотрящего в микроскоп.Это тонкое добавление к бренду, которое также может быть метафорой для выражения «мы внимательно изучаем этот URL-адрес».
 Knopp Biosciences — биотехнологическая компания, которая обнаруживает и разрабатывает лекарства, изменяющие жизнь пациентов с астмой и эпилептической энцефалопатией, путем проведения генетических исследований и клинических исследований.
 С такой узкой нишей и определенной целевой аудиторией эта страница 404 легко передает четкое сообщение и помогает посетителям найти путь к нужной информации.
 Пример № 2: Geissele Automatics 
 Этот пример страницы 404 отлично справляется с согласованием темы страницы с брендом, как визуально, так и текстуально, поскольку  Geissele Automatics  предлагает пистолеты, винтовки и другое огнестрельное оружие.
 На странице отображается умная игра слов с фразой «Ой, стреляй».
 Зная отрасль, в которой работает эта компания, это имеет смысл. В данном случае это уместный (и забавный) способ сказать, что страница не найдена.Изображение пропущенной цели завершает дизайн.
 Этот пример страницы 404 также предлагает возможность поиска на месте, чтобы помочь посетителям найти то, что они ищут.
 Как мы уже упоминали, то, что люди попадают на несуществующую страницу, не означает, что это должно быть концом их пути на вашем веб-сайте.
 Напротив, вы должны предоставить как можно больше вариантов и воспользоваться возможностью, чтобы привлечь их внимание и побудить их к действию.
 Вы обратили внимание на баннер подписки на рассылку новостей внизу страницы? Таким образом, страница  404 предлагает как путь восстановления, так и подписку на будущие обновления, новости и специальные предложения .А кому не нравятся специальные предложения, приходящие на почту, верно?
 Функция рассылки новостей может быть особенно полезна, если вы разрабатываете веб-сайт электронной коммерции. Добавление формы подписки внизу страницы или на панели объявлений вверху может помочь вам расширить список адресов электронной почты и расширить охват для большего числа потенциальных клиентов.
 Пример № 3: Tecnam 
 В этом примере страницы 404 мы рассказываем историю, комбинируя визуальные эффекты и копируя их в один связный элемент. Повествование может быть ценным инструментом для  привлечения внимания пользователей, установления личного контакта и обеспечения впечатляющего взаимодействия с клиентами .
 Сюжет здесь включает мрачную погоду, облачное небо, неудачный полет, радары, управление полетом и неудачную посадку. И все это актуально и по делу, потому что  Tecnam  предлагает широкий выбор самолетов для коммерческих операторов, летных школ и специальных миссий.
 Кроме того, на странице есть множество вариантов восстановления с кнопками CTA внизу, ведущими на разные страницы веб-сайта.
 Plus, есть полное меню навигации, доступное на боковой панели, а также кнопка «Тестовый полет» в правом верхнем углу, которая является призывом к действию, который распространяется на все страницы Tecnam.
 Пример № 4: Edge2Edge 
 Здесь у нас есть интересный дизайн страницы 404, который ведет с пользовательским изображением, связанным с брендом.
  Edge2Edge  — компания, предлагающая различные упаковочные решения, поэтому пустая коробка с логотипом компании сбоку идеально вписывается в эту страницу.
 Edge2Edge имеет  дружелюбный и непринужденный фирменный голос , поэтому просто сказать «Ой, это выглядит пустым» с номером 404, видимым на заднем плане, кажется правильным решением для этого примера 404, не так ли?
 Страница также содержит ссылки на другие страницы и всю навигацию за значком гамбургер-меню.
 Пример 5: Avalanche Aquatics 
 Страница 404 для  Avalanche Aquatics  — отличный пример использования жирного полноэкранного изображения. На этой фотографии есть все, что нужно, чтобы заявить о себе:  она яркая, красочная, оптимистичная и, безусловно, соответствует бизнес-индустрии и самому бренду .
 Avalanche Aquatics — компания, специализирующаяся на проектировании, установке и обслуживании водных горок, водных игровых сооружений и нестандартных решений для аквапарков.Весь веб-сайт использует яркие цвета и большие игривые изображения, поэтому этот пример страницы 404 соответствует бренду.
 Без всех других ссылок, меню, боковых панелей, верхних и нижних колонтитулов, эта страница предлагает две кнопки CTA с высоким цветовым контрастом, чтобы сделать их доступными и помочь пользователям найти выход, не перегружая их слишком большим количеством информации.
 Пример № 6: Продукты Fresco 
 Вот еще одно креативное решение для примера страницы 404.
  Fresco Products  — это свежие фрукты, овощи, мясо и бакалея, поэтому эта страница демонстрирует саму суть бренда.Визуальное представление числа 404 с использованием фруктов и овощей делает заявление, которое идеально сочетается с брендом.
 Помимо пользовательской иллюстрации, есть простое и понятное сообщение «Ой!» с последующим четким указанием статуса страницы.
 Несмотря на то, что внутри содержимого страницы не отображаются кнопки с призывом к действию, в заголовке веб-сайта отображается полная панель навигации, поэтому посетители могут легко выбрать другую страницу и продолжить свой путь к покупкам в Интернете, несмотря на небольшой перерыв.к.а. посадка на несуществующую страницу.
 Как сделать креативный дизайн страницы 404 
 Креативный дизайн страниц 404 может быть забавным, умным, остроумным, анимированным, иллюстрированным, геймифицированным, гладким, стильным, элегантным, минималистичным, ретро или футуристическим, с 3D-эффектами, файлами GIF, видео и т. Д.
 Возможности безграничны.
 Итак, как узнать, какой стиль использовать в процессе разработки веб-сайта, и как решить, какой из них лучше всего подойдет для вашего бизнеса?
  Зависит от вашего: 
 Вид деятельности
 Промышленность и ниша
 Целевая аудитория
 Фирменный стиль
 Цветовая палитра бренда
 Фирменный голос
 Стиль дизайна сайта
 UX / UI дизайн
 Когда у вас все это в порядке, вы можете приступить к разработке  оригинальной креативной страницы 404 , которая порадует вашу аудиторию и предоставит ей легкий выход из такой неудобной ситуации.
 Это может помочь вам показать вашим потенциальным клиентам, что вы заботитесь об их времени и уделяете внимание деталям, что может привести к построению прочной связи и долгосрочным отношениям.
 Последние мысли на странице 404 Примеры 
 Страницы с ошибками — одни из самых сложных для разработки веб-страниц. Пользователям уже неприятно переходить на несуществующую страницу, поэтому вам не следует усиливать давление.
 Вместо этого вы всегда должны предлагать  простой и удобный путь восстановления .
 Мы надеемся, что примеры страниц с ошибкой 404, которые мы показали вам, дадут вам полезную информацию о передовых методах разработки страницы с ошибкой 404 для вашего бизнес-сайта.
  Итог:  Чтобы превратить эту ошибку в преимущество и получить еще больший трафик веб-сайта (вместо потери потенциальных клиентов), будьте информативны, предоставляйте дополнительные параметры и призывы к действию, используйте позитивный и дружелюбный тон, применяйте нестандартные оригинальные изображения, не уклоняйтесь от юмора и сохраняйте фирменный стиль.
 .
No related posts.