5+ лучших примеров дизайна страниц 404
Вы можете помнить это с первых дней существования Интернета. Это общее сообщение об ошибке 404, сообщающее посетителям веб-сайта, что они попали на несуществующую страницу. Это сообщение появилось в верхнем левом углу, оставив остальную часть страницы полностью пустой.
В настоящее время вы не найдете такой жесткой и простой страницы с ошибкой 404.
Но если номер кода ошибки остается прежним, и сообщение такое же, что изменилось?
Разница заключается в том, КАК отображается ошибка .
Веб-дизайн претерпел огромные изменения, поэтому обеспечение отличного пользовательского интерфейса (UX) с простым, логичным пользовательским интерфейсом (UI) и ясным, кратким текстом является главным приоритетом.
Что такое страница 404?
Цель страницы 404 - отображать сообщение об ошибке 404 и информировать посетителей о том, что страница, которую они искали, не существует по данному URL-адресу.
Причины, которые могут вызвать ошибку 404, включают:
- Случайная опечатка в URL-адресе
- Неработающая ссылка, ведущая на страницу с ошибкой
- Ошибка в исходном коде страницы
- Неправильный код перенаправления
- Домен с истекшим сроком действия
- (Повторно) перемещенная страница
- Неправильно обновленная страница
- Необнаруженные изменения в URL-адресе
Цель страницы 404 - которую дизайнеры, копирайтеры и разработчики не должны упускать из виду - состоит в том, чтобы заставить посетителей чувствовать себя менее неудобно из-за неудобств и направлять их на другие полезные и актуальные страницы на веб-сайте.
Страница 404 является частью когорты страниц с ошибками, которые вам необходимо иметь на своем веб-сайте, поэтому не забудьте включить ее в контрольный список веб-дизайна и подготовить перед запуском сайта.
Разработка страницы 404: хорошие и плохие практики
Теперь, когда вы знаете, о чем эта страница, давайте рассмотрим, как ее спроектировать, чтобы сделать ее привлекательной и приятной для посетителей вашего сайта.
Хорошая практика проектирования 404 заключается в следующем:
- Будьте информативны и привлекайте посетителей
- Предложите путь восстановления со ссылками на другие страницы
- Включите привлекательные кнопки с призывом к действию
- Отображение отличительной панели поиска на месте
- Совместите дизайн 404 с остальной частью веб-сайта
- Совместите эту страницу с цветами, стилем и голосом вашего бренда.
- Используйте дружелюбный тон голоса в копии страницы
- Используйте собственные изображения - иллюстрации, анимацию, видео, GIF и т. Д.
Плохая практика проектирования 404 заключается в следующем:
- Не дать посетителям понять, что делать дальше (кроме нажатия кнопки «назад» и выхода с вашего сайта, даже не оглядываясь назад).
- Используйте только общий текст «Страница не найдена»
- Винить посетителей в ошибочном переходе на страницу 404
Например, чтобы не обвинять посетителей, вместо того, чтобы говорить: «Вы, должно быть, ввели неправильный URL», в тексте страницы должно быть написано что-то вроде: «Пока мы пытаемся выяснить, что пошло не так, вы можете посетить нашу домашнюю страницу".
Тон голоса, который вы используете, может оказать сильное влияние на восприятие вашего бренда:
«Различные тона голоса на веб-сайте оказывают ощутимое влияние на восприятие пользователями дружественности, надежности и желательности бренда. Лучше всего подходят повседневные, разговорные и восторженные тона »
Призывы к действию (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 внизу, ведущими на разные страницы сайта.
Кроме того, на боковой панели доступно полное меню навигации, а также кнопка «Тестовый полет» в правом верхнем углу, которая является призывом к действию, который распространяется на все страницы Tecnam.
Пример # 4: Edge2Edge
Здесь у нас есть интересный дизайн страницы 404, который ведет с пользовательским изображением, связанным с брендом.
Edge2Edge - это компания, которая предлагает различные упаковочные решения, поэтому пустая коробка с логотипом компании сбоку идеально вписывается в эту страницу.
Edge2Edge имеет дружелюбный и непринужденный голос бренда , поэтому просто сказать «Ой, это выглядит пустым» с числом 404, видимым на заднем плане, кажется правильным решением для этого примера 404, не так ли?
Страница также содержит ссылки на другие страницы и всю навигацию за значком гамбургер-меню.
Пример # 5: Лавинные водные виды спорта
Страница 404 для Avalanche Aquatics - отличный пример использования жирного полноэкранного изображения. На этой фотографии есть все, что нам нужно, чтобы заявить о себе: она яркая, красочная, оптимистичная и, безусловно, соответствует бизнес-индустрии и самому бренду .
Avalanche Aquatics - компания, которая специализируется на проектировании, установке и обслуживании водных горок, водных игровых сооружений и нестандартных решений для аквапарков. На всем веб-сайте используются яркие цвета и большие веселые изображения, поэтому этот пример страницы 404 соответствует бренду.
На этой странице, очищенной от всех других ссылок, меню, боковых панелей, верхних и нижних колонтитулов, есть две кнопки CTA с высоким цветовым контрастом, чтобы сделать их доступными и помочь пользователям найти выход, не перегружая их слишком большим количеством информации.
Пример # 6: Продукты Fresco
Вот еще одно творческое решение для примера страницы 404.
Fresco Products - это свежие фрукты, овощи, мясо и бакалея, поэтому эта страница демонстрирует саму суть бренда. Визуальное представление числа 404 с использованием фруктов и овощей делает заявление, которое идеально сочетается с брендом.
Помимо пользовательской иллюстрации, есть простое и дружелюбное сообщение «Ой!» с последующим четким указанием статуса страницы.
Несмотря на то, что в содержимом страницы не отображаются кнопки с призывом к действию, в заголовке веб-сайта видна полная панель навигации, поэтому посетители могут легко выбрать другую страницу и продолжить свой путь к покупкам в Интернете, несмотря на короткий перерыв, то есть переход на страницу, которая не отображается. не существует.
Как создать креативный дизайн страницы 404
Креативный дизайн страниц 404 может быть забавным, умным, остроумным, анимированным, иллюстрированным, гладким, стильным, элегантным, минималистичным, ретро или футуристическим, с 3D-эффектами, GIF-файлами, видео и т. Д.
Возможности бесконечны.
Так как же узнать, какой стиль использовать в процессе разработки веб-сайта, и как решить, какой из них лучше всего подойдет для вашего бизнеса?
Это зависит от вашего:
- Вид деятельности
- Промышленность и ниша
- Целевая аудитория
- Фирменный стиль
- Цветовая палитра бренда
- Голос бренда
- Стиль дизайна сайта
- UX / UI дизайн
Как только у вас будет все это в порядке, вы можете приступить к разработке оригинальной креативной страницы 404 , которая порадует вашу аудиторию, предоставляя им легкий выход из такой неудобной ситуации.
Это может помочь вам показать вашим потенциальным клиентам, что вы заботитесь об их времени и уделяете внимание деталям, что может привести к построению прочной связи и долгосрочным отношениям.
Заключительные мысли на примерах страниц 404
Страницы с ошибками - одни из самых сложных для проектирования веб-страниц. Пользователям уже неприятно переходить на несуществующую страницу, поэтому вам не следует усиливать давление.
Вместо этого вы всегда должны предлагать простой и увлекательный способ восстановления .
Мы надеемся, что представленные нами примеры страниц с ошибкой 404 дадут вам полезную информацию о передовых методах разработки страницы с ошибкой 404 для вашего бизнес-сайта.
Итог: чтобы превратить эту ошибку в преимущество и увеличить посещаемость веб-сайта (вместо потери потенциальных клиентов), будьте информативны, предоставляйте дополнительные параметры и призывы к действию, используйте позитивный и дружелюбный тон, применяйте собственные оригинальные изображения, не избегайте юмора и сохраняйте фирменный стиль.
- Комментарии
- Вконтакте