Как сделать из страницы 404 что-то полезное и интересное: 20 примеров
Когда мы вводим на сайте неверный адрес или щелкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP – Not Found или «Ошибка 404». Мы стремимся понять, что же произошло, и скорее покинуть эту страницу.
Хорошо оформленная с точки зрения дизайна и юзабилити страница 404 поможет пользователю понять, что делать дальше.
Рассмотрим наиболее удачные примеры.
AliExpress
- Автоматический редирект на главную страницу сайта через 4 секунды.
Amazon
- Предложение перейти на главную страницу.
- Есть ссылка на страницу «Собаки Amazon»:
Aviasales
- Предложение перейти на главную страницу.
- Ссылки на сервисы компании.
Blizzard
- Уместный сарказм.
- Возможности перейти во все разделы со страницы.
Coca-Cola
- Возможность перейти на главную страницу.
- Доступ к разделам компании со страницы (круглая красная кнопка в верхнем правом углу).
- Подписка на новости компании.
Convert Monster
- Креативное оформление – молодая красивая девушка с призывом в духе sex sells.
- Доступ ко всем разделам сайта из футера (его видно при прокрутке вниз).
- Изображение и призыв к действию меняется каждый раз при обновлении страницы 404:
Ebay
- Прямое указание на то, что что-то пошло не так. И извинение.
- Предложение вернуться на главную страницу или воспользоваться техподдержкой.
Evernote
- Указание на ссылки, которыми можно воспользоваться для дальнейшей работы – начать работу с приложением, приобрести бизнес-версию или почитать материалы из блога.
- Возможность возвратиться на предыдущую страницу, перейти в ленту новостей или перейти в справочную информацию.
Тупичок Гоблина
- Графическое оформление в духе компьютерных игр конца 90-ых.
- Анимация на странице – в прорези двери справа появляются красные глаза.
- Доступ из страницы ко всем разделам сайта.
Студия Дениса Каплунова
- Оказывается адрес неверно введенной страницы.
- Оригинальный сопроводительный текст.
- Доступ из страницы к основным разделам сайта.
Лабиринт
- Ссылка на акции в теле страницы.
- Возможность воспользоваться поиском по сайту или выбрать книгу из каталога.
Студия Артемия Лебедева
- Оригинальный сопроводительный текст.
- Доступ к самым интересным разделам сайта студии.
Новолипецкий металлургический комбинат
- Возможность вернуться на предыдущую страницу или перейти на главную.
- Ссылка на географию активов завода и на его продукцию.
Ozon
- Оригинальный сопроводительный текст.
- Доступ к каталогу товаров.
- Возможность посмотреть все акции и спецпредложения «Озона».
Сотмаркет
- Нетривиально оформленные ссылки на разделы каталога электроники.
- Кликабельный логотип «Сотмаркет» для перехода на главную страницу сайта.
Texterra
- Описание причин проблемы.
- Ссылка на главную страницу сайта.
- Возможность поиска нужной страницы по сайту.
Банк «Тинькофф»
- Оригинальный текст со смайликом.
- Ссылки на основные услуги банка «Тинькофф».
Викиум
- Оригинальный текст.
- Возможность перейти на главную страницу, чтобы успокоить профессора или связаться с командой «Викиума».
Яндекс
- Возможность воспользоваться поиском :-)
- Ссылки на сервисы «Яндекса».
- Ссылка на установку переключателя раскладки клавиатуры Punto Switcher.
- Рекламные объявления (!) на странице 404.
Какой не должна быть страница 404
- Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
- Внешний вид страницы
- с нечитаемыми символами:
- со стандартной и малоинформативной надписью:
- дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):
Если вы решили сделать сайт, пусть у него будет первоклассной и страница с кодом ответа 404. Пользователи и поисковые системы будут вам благодарны.