Главное Авторские колонки Вакансии Образование
Выбор редакции:
9 393 5 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Правильная страница 404 для интернет-магазина

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

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

b_5858ef6808a0a.jpg

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

Плохо: не оформлять 404 вообще

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

Взгляните на 404-ю сайта legacy.com/404 — там ее решили не оформлять.

Плохо: не направлять на продающие страницы

Все такое видели: 404 page not found. Конечно, современные пользователи уже достаточно опытны, чтобы самостоятельно разобраться с тем, что делать дальше — нажать «назад» в браузере, перейти на главную, воспользоваться меню и так далее.

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

404-я Ikea предлагает перейти на главную, узнать о франшизе, посетить музей — такие рекомендации вряд ли помогут желающему купить светильник.

b_5858ef6904f38.jpg

Плохо: делать вид, что ошибки не было

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

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

К примеру, в магазине Steam вообще нет 404-ой, вместо этого покупатель попадает на главную страницу

b_5858ef698d18b.jpg

Плохо: делать страницу ошибки визуально «оторванной» от сайта

Действительно, 15 лет назад страницы 404 было принято делать не похожими на основной сайт. Убирать меню, подвал и всю остальную навигацию.

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

Сегодня в этом нет нужды — 404-ая может и должна быть полноценной частью сайта.

А вот страница «ничего не найдено» магазина Newegg явно делалась дизайнером «старой школы»

b_5858ef6a5855d.jpg

Плохо: предлагать воспользоваться картой сайта

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

404-ая Homedepot настаивает на двух альтернативах: перейти на главную или открыть карту сайта

b_5858ef6cb1382.jpg

У решения Nordstrom нет визуальных акцентов на конверсионных действиях (воспользоваться поиском, перейти к категориям)

b_5858ef6d7ad90.jpg

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

Практика распространенная, но в корне не правильная. Представьте ситуацию: посетитель перешел в ваш магазин по уже не актуальной ссылке с другого сайта (или рассылки). Ему обещали обувь за полцены — а вместо этого он увидит странное послание: «по вашему запросу „shoes-flashsale-of-the-february.html“ ничего не найдено»

Такое можно увидеть на 404-ой странице магазина Zappos

b_5858ef6e6739b.jpg

Плохо: бессмысленное декорирование

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

Свободное пространство 404-ой Bustle можно было бы использовать для того, чтобы помочь пользователю

b_5858ef6f3e3e7.jpg

Плохо: использовать не универсальную фразу

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

Неточная формулировка введет клиента в заблуждение.

Хороший пример текста — у 404-ой Sears.

b_5858ef7035b4c.jpg

Теперь о том, что хорошо размещать на странице «ничего не найдено» интернет-магазина.

Хорошо: предлагать воспользоваться поиском

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

Несмотря на то, что у Amazon на 404-ой картинки собачек, которые «помогают» работе ритейлера, магазин не забыл о главном инструменте конверсии — поиске

b_5858ef71412c8.jpg

Хорошо: выводить ссылки на категории или акции

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

На странице «ничего не найдено» H&M в центре внимания — ссылки на категории товаров, это помогает посетителю быстрее оказаться в интересующем его разделе

b_5858ef724e16c.jpg

На 404-ой Munchkin не просто смешная картинка — магазин также предлагает авторизоваться за скидку в 10%. Почему бы заблудившемуся пользователю не начать с этого?b_5858ef73393b7.jpg

Хорошо: предложить обратиться в службу поддержки

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

Wiley предлагает писать службе техподдержки

b_5858ef7422791.jpg

Macy’s предлагает связаться с круглосуточной службой клиентской поддержки онлайн

b_5858ef7514e6a.jpg

Хорошо: выводить на 404-ой товарные рекомендации

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

Такой практики придерживаются многие ведущие онлайн-ритейлеры в мире:

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

b_5858ef7626e47.jpg

Товарные рекомендации на 404-й онлайн-магазина Nike — это подборки из мужских, женских и детских коллекций: даже новый посетитель найдет что-то для себя

b_5858ef77077af.jpg

Итого

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

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

Страница 404-ой ошибки на сайте eHarmony.

b_5858ef7795487.jpg

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

Функциональность пришла на смену эмоциональности. Современная 404-ая в интернет-магазине выглядит примерно так:

  • Текст, объясняющий, что и по каким причинам произошло.
  • Контакты службы поддержки.
  • Ссылки на основные страницы: главная, каталог.
  • Ссылки на популярные категории и акции.
  • Блоки с просмотренными ранее и рекомендуемыми товарами.
  • Шапка и подвал сайта на странице 404.
  • Модуль поиска и призыв им воспользоваться.

Самый быстрый и практичный способ «прокачать» свою страницу 404 — это подключить систему персонализированных товарных рекомендаций.

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Михаил Великий
Сделали анонс на главной странице vc.ru.
Ответить
Дмитрий 59315
Сказать, что статья спорная - ничего не сказать.

Во-первых, раньше делались простые 404 не только в силу "а давайте позаботимся о наших пользователях", но и из-за технических ограничений того же хостинга. Например, лучшее, что можно было сделать, это предоставить свою страницу, где мог быть только HTML и JS. Никакого backend'a. Если элементы меню генерировались из БД, например, подтянуть их на 404ю могло банально не быть возможности.

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

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

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

Товарные рекомендации повышают конверсию? Да, если ваш магазин умеет грамотно их распределять. 404я должна быть лаконичной и понятной, предоставлять дальнейшие действия и круто, если я зашел на светильник, например, за 1000 р, которого больше нет по данной ссылке и ниже я вижу альтернативы в соответствующем диапазоне, а не формат аля "кстати, наш магазин ещё торгует пылесосами". Сюда же "хороший" пример с регистрацией. Вы мне ничего не предложили, не предоставили никакую ценность, но будьте добры, зарегистрируйтесь. Да, отчасти это работает. Но работает не потому, что это классный кейс. А потому, что чем больше элементов Вы разместите на странице (например, через строчку у Вас будет кнопка "Регистрация"), тем больше соответствующих действий в краткосрочной перспективе получите. В долгосрочной перспективе - это так себе стратегия.

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

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

ИМХО.
Ответить
Vitaly Dyachenko
Очень конструктивный комментарий. Согласен с вами.
Ответить
Кудренко Юрий
Хорошая статья. Согласен с большинством пунктов :-) в основном потому, что писал подобную статью, но затрагивал не только 404 страницу, но и другие системные страницы, которые могут быть тупиковыми ("Ваша корзина пуста", "Ничего не найдено", "Пустое избранное" и пр.) Надеюсь, кому-то будет интересно — http://webdela.ru/blog/fishki/uluchshaem-stranitsy-s-sistemnymi-soobshcheniyami/
Ответить
One Second App
Бизнес-секундомер, который поможет контролировать рабочее время.
Vanya Alekseev
Когда обновляли сайт сделали 404 в виде онлайн редактора HTML.
Кому интересно, смотреть тут: https://jolien.ru/404
Также разрабатывали сайта кинокомпании Амедиа, разрабатывали вот такую интересную 404: http://amediafilm.ru/404
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.