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

Я ознакомлен и согласен с Политикой в отношении обработки персональных данных

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

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

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

Источник: Dribbble

Как выглядит страница 404?

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

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

Альтернативные ссылки на сайт

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

Последовательные особенности дизайна

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

Что следует поместить на пользовательскую страницу 404?

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

Включить юмор

Посетители сайта могут быть скорее развеселены, чем раздражены, когда их встречает забавное или остроумное сообщение об ошибке 404. Одним из хороших примеров являются сообщения об ошибке 404 на таких сайтах, как Amazon, Ikea и развлекательный гигант HBO. Их пользовательские сообщения об ошибке 404 очень забавны, причудливы и просто уморительны! Такие сообщения об ошибке 404 улучшают пользовательский опыт (UX), придавая сайту индивидуальность. Эти небольшие детали дизайна нравятся посетителям сайта и повышают вероятность того, что они вернутся на ваш сайт в будущем.

Поместить хороший контент

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

Должен быть чистый дизайн

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

Как создать страницу 404?

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

Включите элементы дизайна

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

Добавить элементы навигации

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

Инструмент отчетности

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

Настройка сервера

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

Отслеживание показателей сайта

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

Помогает ли пользовательская страница 404 SEO?

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

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

Источник: Dribbble

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

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

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

401 ошибка

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

403 ошибка

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

404 ошибка

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

500 ошибка

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

502 Ошибка

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

503 Ошибка

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

504 ошибка

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

Как создать страницу 404 в WordPress?

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

Итог

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

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

Страница 404. Почему важно, чтобы она была классной?

Оглавление

1. Причины ошибки 404
2. Настройка страницы 404
   • Базовые советы
   • С чего начать создание?
   • Сначала происходит обработка ошибки
   • Изменение страницы 404 вручную
   • Нужно также знать, как проверить ошибку 404
3. Почему важно верно оформить страницу 404?
   • Страница 404: примеры
4. Заключение

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

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

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

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

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

Настройка страницы 404

Базовые советы

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

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

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

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

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

С чего начать создание?

Страница ошибки 404 — по техническим параметрам, привычная всем страница, созданная с помощью HTML. При создании страницы 404 чаще всего применяют текстовый редактор в CMS. Главное в этом случае помнить о правиле — прописывать в файле «.htaccess» (главное — точка вначале). Переход пользователя на страничку с ошибкой 404 возможен благодаря подписи  “ErrorDocument 404”. Такая ссылка является переходом на 404.

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

Сначала происходит обработка ошибки

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

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

Изменение страницы 404 вручную

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

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

• Custom 404 Error Page – многофункциональный плагин, который используют при создании страницы 404. Удобен тем, что имеет несколько готовых шаблонов для нашей цели, позволяет вставлять дополнительные ссылки, изображения, изменять шрифты  и их стиль.
• 404 Notifier – еще один плагин, который работает конкретно с пользователем. Минус в том, что не позволяет ничего редактировать. Он перенаправляет пользователя с отсутствующей страницы на рабочую.
  

Нужно также знать, как проверить ошибку 404

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

Для проверки можно использовать адрес: webmaster.yandex.ru/addurl.xml.

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

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

Почему важно верно оформить страницу 404?

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

Страница 404: примеры

Посмотрите несколько примеров креативно-оформленных страниц с ошибкой 404:

Заключение

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

Идеи по оформлению 404 страницы и работа над ошибками

Иногда на сайте мы получаем страницу, информирующую пользователей об ошибке, – Not Found или «Страница не найдена». Причины для этого: либо страница удалена, либо указан неправильный ее адрес. Как правило, такая страница сопровождается цифровым кодом 404. Получается, страница ошибки является бесполезной? Или все считают, что ее никто не увидит, поэтому не стоит ею заниматься? Конструкцию 404-й страницы часто упускают из виду и недооценивают. Такую страницу вполне реально доработать и использовать. Есть два направления в разработке страницы ошибки:

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

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

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

Стоит познакомиться с хорошими примерами. Возможно, в них вы найдете решение для своей страницы ошибки. ТОП-10 «вдохновляющих страниц ошибок» и их реализация:

1. Поиск и главная страница

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

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

2. Карта сайта, раздел FAQ и форумы

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

3. Игра

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

или

Мы тоже заранее позаботились о своей странице 404 и добавили для пользователей небольшой лабиринт. Оцените:

4. Использовать логотип компании

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

5. Поместить сотрудников компании

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

6. Поместить персонажей и известных людей

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

7. Хорошая работа дизайнеров, проявление фантазии, смелая реализация идей

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

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

Еще одна дизайнерская задумка. Вид «сдувшейся» страницы подчёркивает её неработоспособность:

или сломанной:

или полностью разрушенной:

Уникальный подход — «Grats. You broke it», эта страница 404 отличается ещё и тем, что благодарит пользователей за ее нахождение.

8. Использование анимация. Оцените это вживую!

Удобная и акцентирующая внимание пользователей страница ошибки:

или

или

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

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

[EPSB] А как с навигацией на вашем сайте? Проверим и дадим советы. [/EPSB]

9. Служба поддержки

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

Ранее эта страница присутствовала на сайте www.kiss.com, сейчас разработчики сайта решили поменять такой вид страницы на следующий:

10. Игнорирование деталей

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

или

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

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

19 креативных страниц 404 с продуманным дизайном

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

Риз Киршнер

Менеджер по контент-маркетингу

Ничего не найдено.

Лучшие страницы 404 максимально используют досадную ошибку.

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

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

Забавные 404 страницы

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

Томас Боск

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

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

Polo Garcia

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

Даже белка в конце концов поворачивается к экрану, как будто спрашивает посетителей сайта — что вы здесь делаете? Polo вызывает смех, но поддерживает плавность взаимодействия с пользователем, включая очевидную кнопку «отвези меня домой».

Шалом Осахон

Дизайнер продукта и разработчик Webflow Шалом Осахон напоминает вам не паниковать и сравнивает страницу 404 с пожарной тревогой.

‍

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

Mill 3 Studio

Mill 3 Studio отлично передает ощущение приземления на странице 404 с изображением потерянного и сбитого с толку Джона Траволты.

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

Креатив 404 страницы

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

Textio

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

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

Dribbble

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

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

DFY

Вместо «страница не найдена», страница 404 DFY сочетает «дизайн не найден» с космонавтом, который медленно уплывает.

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

Страницы 404, посвященные бренду

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

D&D Beyond

D&D Beyond напрямую обращается к своей аудитории, любящей Dungeons and Dragons, с сообщением об ошибке, в котором утверждается, что халфлинг мог украсть то, что ищут посетители веб-сайта, и спрятал это в другом мире.

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

Spotify

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

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

OK Micah

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

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

Цвет года

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

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

Дайте волю своему творчеству в Интернете

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

Начните бесплатно

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Начните бесплатно

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

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

Куало

Куало радует нас фирменной версией олдскульной видеоигры Space Invader.

Вместо того, чтобы использовать немедленный призыв к действию (CTA), чтобы отправить нас домой, Куало призывает нас отомстить пиксельным космическим захватчикам, на которых написано «куало». Эта полнофункциональная игра станет развлекательным сюрпризом. Мы можем продолжать играть до тех пор, пока у нас не закончатся жизни, после чего появится сообщение «Вы проиграли!» появляется сообщение. Но снова Kualo возвращает нас обратно, обещая скидку на их хостинг для всех, кто наберет более 1000 баллов.

Nouvelle

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

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

Feldman Studio

Перед тем, как щелкнуть мышью, подготовьтесь — страница ошибки 404 Feldman Studio дает вам всего 3 секунды, чтобы подготовиться к игре.

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

MAD

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

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

Kffein

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

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

Клонируемые страницы 404

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

Актив

Актив от NoCodeMachine представляет собой трехмерный куб, сделанный из 404-х цветов радуги.

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

Игра с анимацией

Шаблон страницы 404 Бенджамина Ле Гоффа объявляет, что мы потерялись в космосе, с сообщением: «Ой, космический корабль ушел без вас… Страница, которую вы запрашивали, не может быть найдена».

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

404 анимированная вешалка с ручкой

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

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

Не пренебрегайте своей страницей 404

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

24 февраля 2022 г.

Вдохновение

Поделиться

Рекомендуем прочитать

Вдохновение

Вдохновение

Вдохновение

Подпишитесь на Webflow Inspo

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

Электронная почта

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

Все готово, следите за нашей следующей рассылкой!

К сожалению, адрес электронной почты недействителен. Попробуйте еще раз!

Подробнее о Designer

Designer

Сила CSS, HTML и JavaScript в визуальном холсте.

Взаимодействия

Визуально создавайте взаимодействия и анимацию веб-сайта.

Подробнее о взаимодействиях

CMS

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

Подробнее о CMS

Электронная торговля

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

Подробнее об электронной торговле

Редактор

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

Подробнее о редакторе

Хостинг

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

Подробнее о хостинге

Бесплатно, пока вы не будете готовы к запуску

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

Начните работу — это бесплатно

Трансформация процесса проектирования по телефону

Просмотрите тысячи 404 изображений, чтобы найти вдохновение для дизайна

1. Valore 404 стр.

2. 404 Страница не найдена

3. Бруно 404

4. ОШИБКА 404

5. Иллюстрация поиска не найдена

6. 404 — Иллюстрация пользовательского интерфейса ошибки веб-страницы

7. 404 — Ошибка веб-страницы

8. 404 — веб-дизайн с иллюстрациями

9. 404 — Страница ошибки с 3D и анимацией

10. 404 Анимация страницы

11. Бесплатно Ошибка 404 Иллюстрации ⚡️

12. 404 Иллюстрация страницы

13. Ошибка 404

14. Ошибка 404 иллюстрации ⭐️

15. Блог Egnyte 404

17. Ничего не найдено

18. 404 Ошибка

19. Ничего не найдено

20. Страница 404 — Пользовательский интерфейс без названия

21. 404 ошибка веб-страницы

22. Ежедневный ИП #008 — 404 стр.

23. На обслуживании 🔧

24. Иллюстрация для Joom (страница 404). Концепция.

Зарегистрируйтесь, чтобы продолжить или войдите

Загрузка еще…

404 дизайна, темы, шаблоны и графические элементы для загрузки на Dribbble

1. Просмотр 404 — ошибка веб-страницы

   404 — Ошибка веб-страницы

2. Valore 404 стр.

3. Бруно 404

4. 404 Анимация страницы

5. Просмотр 404 Страница не найдена

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

6. 404 Ошибка

7. 404 — веб-дизайн с иллюстрациями

8. Ошибка 404

9. 404 ошибка веб-страницы

10. 404 — Иллюстрация пользовательского интерфейса ошибки веб-страницы

11. Бесплатно Ошибка 404 Иллюстрации ⚡️

12. Посмотреть иллюстрацию 404

    404 Иллюстрация

13. 404 — Страница ошибки с 3D и анимацией

14. ОШИБКА 404

15. Посмотреть 404

16. Ежедневный ИП #008 — 404 стр.

17. Просмотр пустой страницы 404

    Пустая страница 404

18. На обслуживании 🔧

19. Просмотр 404 ошибки веб-страницы

    404 ошибка веб-страницы

20. Ошибка 404 иллюстрации ⭐️

21. Иллюстрация для Joom (страница 404). Концепция.

22. Просмотр 404 — Дизайн веб-страницы

    404 — Дизайн веб-страницы

23. Просмотр 404 веб-страницы| Ежедневный интерфейс 008

    404 Веб-страница| Ежедневный ИП 008

24. 404 Иллюстрация страницы

Зарегистрируйтесь, чтобы продолжить или войдите

Идет загрузка…

Как создать страницу с ошибкой 404, которая удерживает пользователей на вашем сайте | Дивад Сандерс

Дизайн веб-сайта

Превратите потерянных посетителей в постоянных клиентов.

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

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

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

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

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

Например, вместо того, чтобы открывать medium.com/@divadsanders (страница моего профиля на Medium), попробуйте открыть medium.com/divad-sanders (эта страница не существует). Обязательно вернись. Нам есть что обсудить.

Видите разницу? Ввод неправильного URL приводит к странице 404 Medium. На странице ошибки 404 будет отображаться одно из следующих сообщений:

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

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

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

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

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

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

Главная страница вашего сайта должна определять, как страница 404 воспринимается посетителями.

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

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

Включите свой продукт

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

На странице также есть две отсылки из фильма «Ральф против Интернета », о которых знают только фанаты.

Добавить навигацию панели поиска

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

Например, эта страница 404 на веб-сайте Star Wars предоставляет посетителям возможность выполнить поиск по всему веб-сайту, чтобы найти страницу, которую они искали. Изображение незавершенной Звезды Смерти, которая «не полностью вооружена и не работает», — отличный намек на фильмы.

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

Поделитесь своими последними предложениями

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

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

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

Рассмешите посетителей

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

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

Попробуйте сами: щелкните здесь и несколько раз обновите страницу.

Возьми на себя вину

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

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

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

Давайте пройдемся по списку всего, что Starbucks делает прямо на этой странице:

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

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

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

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

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

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

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

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

Нашли ли вы другие уникальные страницы 404, которые я не перечислил? Или советы, как получить максимальную отдачу от страницы 404? Пожалуйста, прокомментируйте и поделитесь ниже!

25 Привлекательный дизайн страницы с ошибкой 404

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

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

Веб-сайты, которые преуспевают в игре с ошибкой 404:

• Женя Рынжук

• Ромен Аваль

• Агнес Ллойд-Платт

• Слабаки

• МСТК

• ЛЕКБ

• Андреа Рени

• Комбо

• Фигма

• Нейндекс

• Новая компания

• Куспид

• Колесо прелюдии

• Клим

• СМК

• Аувяя

• индиго

• Гимбокс

• Кхоа Ле

• Не\Вещественное

• Сидо

• Проект «Крутой»

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

• Дрибббл

• Тревожный сон

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

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

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

Сделайте страницы ошибок 404 интерактивными

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

404 Страницы с ошибками должны быть забавными

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

Убедитесь, что ваши страницы с ошибкой 404 визуально интересны

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

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

Женя Рынжук

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

Ромен Аваль

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

Агнес Ллойд-Платт

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

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

Beaver Builder поставляется с модулем формы входа. Это добавит базовую форму входа на вашу страницу 404:

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

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