Примеры страница 404: опупенное оформление + 10 примеров

Вы попадаете на планету Миллер, как в фильме «Интерстеллар». На этой планете можно быстро дождаться обновлений сайта, ведь местный час равен 7 годам на Земле.

Холст

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

Импорт-Сервис

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

MES

Пример простой и лаконичной страницы 404.

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

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

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

Катаргина Наталья

хозяйка офиса

10 примеров пользовательских страниц 404, ранжированных от лучших к худшим | by Tia Loehnert

Пользовательские 404 страницы

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

·

·

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

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

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

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

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

Что работает

• Ясность . Четкое сообщение об ошибке объясняет, что произошло и почему посетитель видит страницу.
• Следующий шаг . Существует очевидный и огромный призыв к Search Medium, чтобы исправить ситуацию.
• Эмпатия . Команда пошла дальше следующего шага, чтобы сопереживать посетителю и глубже погрузить его в некоторые статьи, дополненные интересными миниатюрами. Это единственный из десяти случайных, кто даже пытался сочувствовать.
• Нет места лучше дома . Они включали явную ссылку на домашнюю страницу.

Что не работает

• Дизайн CTA для поиска Medium приглушен и исчезает, сводя на нет тот факт, что типографика такая большая. Я бы использовал более заметную основную кнопку Medium для поиска вместо этой приглушенной кнопки с контуром, которая обычно используется для обозначения того, что что-то неактивно.

Вполне естественно, что веб-сайт с более чем 31 000 ссылающихся сайтов¹ должен иметь полезную страницу 404, и Whitehouse.gov не разочаровал.

Что работает

• Ясность . Это объясняет, что происходит, в том числе уникальные ситуации, в которых находятся администрации исполнительной власти США. У большинства других сайтов не будет архивов только потому, что они меняют руководство каждые 4–8 лет, как, например, Whitehouse.gov. Это объяснение страницы 404 дает понять, что введенный URL-адрес мог существовать когда-то и был законно перемещен.
• Руководство . Есть кнопка для перехода к упомянутым выше архивам.
• Дизайн . Он фирменный и чистый.

Что не работает

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

Хорошо, Fiverr. Дай пять для удовольствия.

Что работает

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

Что не работает

• Я бы предпочел видеть 404 в тексте, а не в изображении. Всем, включая скринридеров, должно быть ясно, что произошло.
• Общая функциональность 404 плохая. На самом деле довольно сложно получить страницу 404 на Fiverr, потому что страницы услуг и продавцов имеют URL-адреса верхнего уровня, и они приходят и уходят, когда им заблагорассудится, создавая пустоту.
• Кроме того, очень распространенные орфографические ошибки на важных страницах не имеют надлежащих перенаправлений, а также не вызывают ошибку 404. Например, /login — это реальный URL-адрес для входа, но если вы ввели /loginn, вы не получите ошибку 404, и вы не получить страницу входа. Вы получаете страницу, которая говорит, что страница больше не существует. Что странно и, надеюсь, не преднамеренно. Ты можешь это исправить, Fiverr!

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

Тем не менее, достоинство этой страницы 404 в том, что она краткая и (в основном) полезная.

Что работает

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

Что не работает

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

Знаете ли вы?

CUNY (Городской университет Нью-Йорка) насчитывает более 250 000 студентов. Это один из крупнейших университетов мира. И вы можете поспорить, что это связано с ТОННОЙ веб-трафика. Им абсолютно необходим пользовательский 404!

И у них есть один. Это не супер, но и не зверски. Спуск начинается с №5.

Что работает

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

Что не работает

• Это безумно скучно и, честно говоря, заставляет меня задуматься, неужели университет так же скучен, как страница 404. Абсолютно никаких персонажей, если только их персонаж не является изображением картонной коробки. А если бы в комплекте была картонная коробка, было бы лучше.
• Список полезных веб-сайтов сильно страдает от того, что делают почти все университетские навигационные системы: информационной перегрузки. Веб-сайты университетов всегда стараются быть всем для всех. Вместо этого они должны отдавать предпочтение чему-то, например студентам, и использовать специальную обработку, например колоду карточек, чтобы выделить ссылки Прием , Подать заявку и Текущий учащийся . Остальное можно закинуть в список.
• Есть инструкция использовать функцию поиска «выше», но она бесполезна. Значок поиска — это крошечная штучка вверх и вправо, а не «выше», как написано. Эти типы визуальных указаний также недоступны. В качестве исправления они могли бы просто изменить инструкцию на «Кроме того, вы можете ищите то, что вы ищете» и используйте реальную ссылку для поиска вместо чего-то основанного на скрипте, к которому вы не можете получить через URL. Добро пожаловать, CUNY!

«Привет, Coursera? Звонил 1982 год и хочет вернуть свою графику».

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

Что работает

• Следующие шаги . Здесь есть несколько мест, куда вы можете перейти, и Coursera аккуратно на них ссылается.

Что не работает

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

Мне на самом деле эстетически нравится пользовательская страница 404 Колорадо-Боулдер. Только не функционально.

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

Что работает

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

Что не работает

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

Уважаемый Forbes,

Вы можете лучше.

Что работает

• Полезный следующий шаг . По крайней мере, этот баннер/страница помогает вам, предоставляя окно поиска.
• Расскажет, что произошло . Страницы там нет. Или это?

Что не работает

• Баннер, который можно закрыть? Меня смущает UX этого. Почему команда Forbes использует баннер в стиле оповещения, который вы можете закрыть? Или «X» предназначен для того, чтобы отклонить рекламу GIANT, появившуюся через несколько секунд после попадания в 404?
• Большая ошибка с точки зрения привлечения людей к контенту. Журнал, который не помогает людям найти другой отличный контент? Наверняка есть какие-то другие страницы, которые посетитель мог бы увидеть вместо них. Разве главная цель журнала не отвлекать и сбивать с толку?

Тут-тут, Forbes. Ту ту.

Вас не развлекает?²

Кто не любит отличную страницу LOTR, ставшую мемом 404? Все понимают, верно?

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

С DashThis, насчитывающим 18 000 пользователей из более чем 122 стран, им надлежит делать все правильно, а не просто смешно.

Что работает

• Умный . Я дам им это. Это, безусловно, умный и отличный способ извлечь выгоду из тренда.
• На марке . Сделано красиво и в этом нет никаких сомнений. Как инструмент визуальной отчетности, где внешний вид действительно имеет значение, это перо в их кепке.

Что не работает

• Неясно . В UX последнее, что вам нужно, это чтобы люди говорили: «А?» при просмотре вашего дизайна или инструкций. Лично я понимаю то, на что намекает фраза «не просто…», но многие этого не понимают. Мало того, они использовали подзаголовок/главную копию, чтобы углубиться в неизвестность, вместо того, чтобы говорить о проблеме: ошибке 404.
• Это тупик — или так кажется . Поскольку команда DashThis решила занять так много места графикой в ​​стиле LOTR, люди задаются вопросом, что делать теперь, когда они не могут найти то, что искали. Есть несколько полезных советов НИЖЕ рисунка, но они гораздо важнее рисунка и должны быть над ним.
• Это большая неудача . Поскольку отчеты DashThis — это ссылки, которые вы даете клиентам, они должны понимать это правильно. Путешествие Фродо было важным, как и это.

О, Дисней. Как сильно вы разочаровываете!

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

Что работает

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

Что не работает

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

Хорошая попытка, Микки!

— —

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

¹ Согласно Alexa

² Вы знаете этот фильм, не просматривая его?

7 лучших примеров страниц 404 для сайтов электронной коммерции | Nexcess

Блог Главная

28 марта 2022 г.

Линдси Миллер

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

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

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

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

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

Важность страницы 404

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

Что вызывает ошибку 404?

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

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

Причины, по которым клиенты попадают на страницу 404 на веб-сайте электронной коммерции, включают:

• Опечатка или опечатка в URL-адресе . Если кто-то вводит ссылку прямо в адресную строку, легко ошибиться или пропустить букву, особенно если он печатает на своем телефоне.
• Проблема с сервером. Технические неполадки могут вызвать ошибку 404.
• Удаленная страница или продукт. Если удалить и удалить страницу или товар, ссылка больше не будет работать. Хотя ваш веб-сайт знает, что вы удалили ссылку, вы не можете изменить все места, где ее сохранили люди.
• Изменен URL-адрес. Если ваш URL-адрес изменился, любой, кто сохранил старую ссылку, попадает на страницу 404, если вы не настроили перенаправление. Например, если ваш сайт электронной коммерции использует категории в структуре ссылок, и вы измените названия категорий, все ваши URL-адреса изменятся.

Связанное чтение: 14 современных тенденций дизайна веб-сайтов на 2022 год >>

Влияние на конверсию

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

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

Продавайте свои товары в Интернете, не беспокоясь

Официально рекомендованный WooCommerce, наш хостинг создан для онлайн-бизнеса, подобного вашему

Посмотрите наши планы хостинга WooCommerce

Примеры электронной коммерции 404 Страницы

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

Academy

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

Urban Outfitters

Забавная гифка соответствует их бренду, а подборка их самых популярных товаров пытается вернуть покупателей на страницу товара.

Sur la Table

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

Birchbox

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

Bonobos

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

На этой странице 404 царит простота с тремя вариантами возврата, перехода на домашнюю страницу или поиска.

The Container Store

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

Передовой опыт страницы 404 для электронной торговли

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

Рекомендации для 404 страниц включают:

• Очеловечить сообщение. «Извините, страница не найдена» звучит пресно. Используйте креативный и броский текст, соответствующий вашему бренду. Academy и Sur la Table использовали сильные стороны своего бренда, разместив 404-страничный текст.
• Будьте проще. Во всех примерах, которые мы рассмотрели, дизайн и пользовательский интерфейс были простыми. Если кто-то потерялся, перенаправьте его как можно быстрее. Предоставьте краткие варианты, чтобы помочь им найти нужную страницу.
• Включить поиск и контактную информацию. Страница Container Store превосходно предоставляет покупателям различные способы поиска того, что им нужно, включая поиск, ссылки на главные категории и контактную информацию. Не оставляйте людей без понятия, куда идти дальше. Позволить им достучаться до человека — отличный вариант.
• Продвижение продуктов. Большинство покупателей в какой-то момент нажимают что-то в разделе «рекомендовать для вас» на сайте электронной торговли. Поэтому рассмотрите возможность добавления рекомендаций по продуктам на страницу 404. Вы также можете использовать пространство для продвижения таких вариантов, как «купи сейчас, заплати потом».

Создание страницы 404 для электронной коммерции на WooCommerce

Хорошо спроектированная страница 404 для электронной коммерции начинается с хорошо спроектированного сайта электронной коммерции.

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

Управляемая WooCommerce от Nexcess предлагает производительность, скорость и первоклассную безопасность, которые вам понадобятся, с нужными вам инструментами и функциями.

Ищете отличное решение для электронной коммерции? Не смотрите дальше. Попробуйте управляемую WooCommerce.

Ознакомьтесь с нашими планами хостинга WooCommerce

Свяжитесь с нами

Связанные ресурсы

Будущее электронной коммерции: 3 основные темы, на которые следует обратить внимание в 2022 году

5 крупных брендов, использующих WordPress Ecommerce

коммерческий веб-сайт

Как проверить скорость веб-сайта и аналитику эффективности электронной торговли

Стратегическое использование руководств покупателя в электронной торговле

Линдси Миллер — эксперт по WordPress и WooCommerce и главный исполнительный директор Content Journey, агентства контент-маркетинга, которое фокусируется на увеличении органического трафика веб-сайтов для своих клиентов с помощью SEO и ведения блогов.