Когда мы вводим на сайте неверный адрес или щелкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP – Not Found или «Ошибка 404». Мы стремимся понять, что же произошло, и скорее покинуть эту страницу.
Повышаем конверсию: поиск по сайту как часть воронки продаж
Хорошо оформленная с точки зрения дизайна и юзабилити страница 404 поможет пользователю понять, что делать дальше.
Рассмотрим наиболее удачные примеры.
AliExpress
![Страница 404 AliExpress]( "Страница 404 AliExpress")
Автоматический редирект на главную страницу сайта через 4 секунды.
Amazon
![Страница 404 Amazon]( "Страница 404 Amazon")
Предложение перейти на главную страницу.
Есть ссылка на страницу «Собаки Amazon»:
![Собаки Amazon]( "Собаки Amazon")
Занимаемся разработкой фирменного стиля: повышаем узнаваемость бренда.
Подробнее
Aviasales
![Страница 404 Aviasales]( "Страница 404 Aviasales")
Предложение перейти на главную страницу.
Ссылки на сервисы компании.
Blizzard
![Страница 404 Blizzard]( "Страница 404 Blizzard")
Уместный сарказм.
Возможности перейти во все разделы со страницы.
Coca-Cola
![Страница 404 Coca-Cola]( "Страница 404 Coca-Cola")
Возможность перейти на главную страницу.
Доступ к разделам компании со страницы (круглая красная кнопка в верхнем правом углу).
Подписка на новости компании.
Convert Monster
![Страница 404 Convert Monster]( "Страница 404 Convert Monster")
Креативное оформление – молодая красивая девушка с призывом в духе sex sells.
Доступ ко всем разделам сайта из футера (его видно при прокрутке вниз).
Изображение и призыв к действию меняется каждый раз при обновлении страницы 404:
![Sex sells!]( "Sex sells!")
Ebay
![Страница 404 Ebay]( "Страница 404 Ebay")
Прямое указание на то, что что-то пошло не так. И извинение.
Предложение вернуться на главную страницу или воспользоваться техподдержкой.
Evernote
![Страница 404 Evernote]( "Страница 404 Evernote")
Указание на ссылки, которыми можно воспользоваться для дальнейшей работы – начать работу с приложением, приобрести бизнес-версию или почитать материалы из блога.
Facebook
![Страница 404 Facebook]( "Страница 404 Facebook")
Возможность возвратиться на предыдущую страницу, перейти в ленту новостей или перейти в справочную информацию.
Тупичок Гоблина
![Страница 404 Тупичка Гоблина]( "Страница 404 Тупичка Гоблина")
Графическое оформление в духе компьютерных игр конца 90-ых.
Анимация на странице – в прорези двери справа появляются красные глаза.
Доступ из страницы ко всем разделам сайта.
Студия Дениса Каплунова
![Страница 404 студии Дениса Каплунова]( "Страница 404 студии Дениса Каплунова")
Оказывается адрес неверно введенной страницы.
Оригинальный сопроводительный текст.
Доступ из страницы к основным разделам сайта.
Лабиринт
![Страница 404 «Лабиринта»]( "Страница 404 «Лабиринта»")
Ссылка на акции в теле страницы.
Возможность воспользоваться поиском по сайту или выбрать книгу из каталога.
Студия Артемия Лебедева
![Страница 404 студии Артемия Лебедева]( "Страница 404 студии Артемия Лебедева")
Оригинальный сопроводительный текст.
Доступ к самым интересным разделам сайта студии.
Новолипецкий металлургический комбинат
![Страница 404 Новолипецкого металлургического комбината]( "Страница 404 Новолипецкого металлургического комбината")
Возможность вернуться на предыдущую страницу или перейти на главную.
Ссылка на географию активов завода и на его продукцию.
Ozon
![Страница 404 Ozon]( "Страница 404 Ozon")
Оригинальный сопроводительный текст.
Доступ к каталогу товаров.
Возможность посмотреть все акции и спецпредложения «Озона».
Сотмаркет
![Страница 404 Sotmarket]( "Страница 404 Sotmarket")
Нетривиально оформленные ссылки на разделы каталога электроники.
Кликабельный логотип «Сотмаркет» для перехода на главную страницу сайта.
Texterra
![Страница 404 «Текстерры»]( "Страница 404 «Текстерры»")
Описание причин проблемы.
Ссылка на главную страницу сайта.
Возможность поиска нужной страницы по сайту.
Банк «Тинькофф»
![Страница 404 банка «Тинькофф»]( "Страница 404 банка «Тинькофф»")
Оригинальный текст со смайликом.
Ссылки на основные услуги банка «Тинькофф».
Викиум
![Страница 404 «Викиума»]( "Страница 404 «Викиума»")
Оригинальный текст.
Возможность перейти на главную страницу, чтобы успокоить профессора или связаться с командой «Викиума».
Яндекс
![Страница 404 «Яндекса»]( "Страница 404 «Яндекса»")
Возможность воспользоваться поиском :-)
Ссылки на сервисы «Яндекса».
Ссылка на установку переключателя раскладки клавиатуры Punto Switcher.
Рекламные объявления (!) на странице 404.
Университет «Синергия»
![Страница 404 Университета «Синергия»]( "Страница 404 Университета «Синергия»")
Позитивная картинка со смыслом.
Возможность воспользоваться поиском.
В описании страницы предлагается способ решения проблемы.
Студия аниматоров «Кудесник»
![Страница 404 Студии Аниматоров «Кудесник»]( "Страница 404 Студии Аниматоров «Кудесник»")
Рисунок-смайлик недвусмысленно намекает, что произошла досадная ошибка.
В описании страницы даются способы решения проблемы, притом оформлены они гиперссылками.
Излишнее дублирование информации о том, что страница не найдена.
Lego
![Страница 404 Lego]( "Страница 404 Lego")
Все человечки выражают неподдельную панику. Пользователь понимает, что что-то пошло не так.
В описании страницы выдержан неформальный тон общения.
Предлагается решение проблемы – кнопка перехода на главную страницу сайта.
«Кинопоиск»
![Страница 404 «Кинопоиска»]( "Страница 404 «Кинопоиска»")
На странице показываются кадры из известных фильмов.
В описании указывается, почему могла появиться такая страница. Способы решения оформлены гиперссылками.
Каждый раз страница 404 генерирует новое изображение:
![Если на картинке сверху это был Рон Уизли из «Гарри Поттера», теперь – Хан Соло из «Звездных войн»]( "Если на картинке сверху это был Рон Уизли из «Гарри Поттера», теперь – Хан Соло из «Звездных войн»")
Творческая мастерская «Штуки»
![Страница 404 творческой мастерской «Штуки»]( "Страница 404 творческой мастерской «Штуки»")
Нетривиальный и очень уместный заголовок для подобного рода страницы.
Способ решения проблемы оформлен гиперссылкой.
Все пункты меню, авторизация и регистрация на сайте, гиперссылки в футере доступны со страницы 404.
Playboy Russia
![Страница 404 Playboy Russia]( "Страница 404 Playboy Russia")
Странница разрывает шаблоны J.
В описании заманивают остаться на сайте из-за большого количества материалов и прекрасных дам (хорошо, если бы статьи и фото девушек были оформлены ссылками на соответствующие разделы).
«Единый визовый центр»
![Страница 404 «Единого визового центра»]( "Страница 404 «Единого визового центра»")
Запоминающаяся картинка-мем с Grumpy Cat.
В описании страницы способы решения проблемы выполнены гиперссылками.
За присланный на почту скриншот страницы 404 обещают подарок.
Udemy
![Страница 404 Udemy]( "Страница 404 Udemy")
Заголовок страницы мотивирует простить владельцев сайта за попадание на нее.
Есть гиперссылка на страницу поддержки. Все серьезно.
Pikabu
![Страница 404 Pikabu]( "Страница 404 Pikabu")
Скажу просто – на этой странице прекрасно ВСЁ!
Что за существо сидит рядом с парнем?
Pixar
![Страница 404 Pixar]( "Страница 404 Pixar")
Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить.
Заголовок страницы «Оооо… Не плачь». Трудно сдержаться, глядя на изображение.
Описание страницы написано будто от лица Радости из того же мультфильма:
«Этот всего лишь ошибка 404!
То, что ты ищешь, могло затеряться в долгосрочной памяти».
Какой не должна быть страница 404
Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
Внешний вид страницы
с нечитаемыми символами:
![Страница 404 с «кракозябрами» – совершенно непонятно, что делать дальше]( "Страница 404 с «кракозябрами» – совершенно непонятно, что делать дальше")
со стандартной и малоинформативной надписью:
![Дежурная и неинформативная страница, которая никак не объясняет, что делать дальше]( "Дежурная и неинформативная страница, которая никак не объясняет, что делать дальше")
дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):
![Белоснежный пустой фон страницы 404]( "Белоснежный пустой фон страницы 404")
Если вы решили сделать сайт, пусть у него будет первоклассной и страница с кодом ответа 404. Пользователи и поисковые системы будут вам благодарны.
kak-sdelat-iz-stranitsy-404-chto-to-poleznoe-i-interesnoe-primery
|
Занимаемся разработкой фирменного стиля: повышаем узнаваемость бренда.
Подробнее
Aviasales
Ebay
Творческая мастерская «Штуки»
