Статьи

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

Три дорожных знака, указывающие на тупики.

Фото: ржавчина

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

Концепция проста: если клиентский компьютер запрашивает URL-адрес, который сервер не может разрешить, сервер отвечает «404 Not Found» — или другими словами: « Да, я здесь, но я не могу найти предмет, который вы просили ».

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

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

дизайн

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

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

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

Ссылки на социальные сети

Предоставление ссылок на социальные сети на странице 404 — отличный способ как решить проблему пользователей, так и собрать больше пользователей одновременно. Официальные ссылки на веб-сайте Facebook, Twitter, Pinterest, StumbleUpon, Tumblr и другие страницы могут быть предоставлены для участия в социальных сетях.

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

Основные ссылки

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

Однако это не время для представления всей вашей карты сайта. Если пользователь потерян, не заставляйте его фильтровать десятки ссылок, чтобы найти то, что он ищет. Держите представленные варианты до 6 или 7 максимум.

В большинстве случаев они могут включать, но не ограничиваются:

  • Дом
  • Недавние Посты
  • Поиск
  • Около
  • контакт

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

Предоставить онлайн контактную форму

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

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

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

Аудио / Видео / Блок-схема Юмор

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

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

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

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

крейгслист

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

Craigslist

Ники браун

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

Ники браун

cubeecraft

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

CubeCraft

Проект-EUH

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

http://www.project-euh.com/404/?

Technorati

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

Technorati.com

кульминация

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

http://www.acme.com/404

Расширение вещания

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

Расширение вещания

истирание

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

истирание

Оранжевое пальто

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

Оранжевое пальто

Дисней

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

Дисней

Дизайн Zillas

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

http://www.designzillas.com/404

Twingly

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

Twingly

веб-группа

Простой дизайн страницы ошибки 404.

http://www.webogroup.com/404/

Griffin Technology

Еще один базовый дизайн со ссылками для связи с веб-мастером и службой поддержки.

Griffin Tech

перекус

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

перекус

YepLike

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

Yeplike

TrentWalten

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

Трент Уолтон

диво

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

диво

Mozilla

Страница ошибок Mozilla предоставила несколько советов посетителям с домашней страницей и ссылкой для отслеживания ошибок .

Mozilla

THCNET

Ok. Правда в том, что страница 404 на THCNET на самом деле не поможет вам найти то, что вы искали в THCNET, прежде чем вы попадете на 404. Вместо этого они предоставляют вам живую, играбельную версию древней (в начале 1980-х) текстовой приключенческой игры Zork. Попробуйте пойти на север (‘n’) и залезть на дерево, чтобы увидеть его в действии.

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

THCNET

Limpfish

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

Limpfish

Старбакс

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

Старбакс

Heinz

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

Heinz

Бит Вдохновения

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

InspirationBit

Realmac Software

Бьюсь об заклад, вы не можете перестать смеяться после достижения этой страницы. Они также предоставили несколько важных ссылок для своих официальных аккаунтов в твиттере, flickr и vimeo.

Real Mac Software

Real Mac Software

Домашний Звездный Бегун

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

Домашний Звездный Бегун

StudyTonight

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

StudyTonight

Любые другие?

Мне понравилась страница nickybrown , nosh и project-euh 404, а вы?

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