10 примеров страниц с ошибкой 404 для UX-дизайна

Эти примеры страниц с ошибкой 404 демонстрируют, как веб-дизайнеры могут преобразовать обычную системную неисправность в уникальное взаимодействие с пользователем (UX).

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

Существует четыре основные ошибки ввода в этой категории:

1. 400 Неверный запрос. Введенные данные не соответствуют правильной структуре.
2. 401 Несанкционированный. Доступ запрещен без верификации через логин и пароль.
3. 403 Запрещено. Пользователю отказано в разрешении на доступ к определенному ресурсу.
4. 404 Не найдено. Пользователь пытается открыть страницу по несуществующему URL или по неверной ссылке.

Раньше пользователям приходилось вводить точный URL-адрес. Например, если вы хотите посетить Yahoo Finance, вам нужно будет ввести полный URL-адрес: http://www.finance.yahoo.com.

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

В настоящее время браузеры позволяют вводить сокращенный адрес, например: www.finance.yahoo.com или даже finance.yahoo.com. В действительности, даже если вы укажете полностью сформированный адрес согласно старым правилам, как в упомянутом примере, браузер автоматически перенаправит вас.

Почему это происходит? Потому что представленный формат URL основывается на устаревшем протоколе HTTP. Обновленный сайт представляет собой более безопасный URL-адрес, использующий HTTPS. Последние версии браузеров автоматически вносят исправления.

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

Вот некоторые элементы, которые вы могли бы использовать:

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

Мы проанализируем примеры страниц с кодом 404 от различных компаний, чтобы увидеть, как они внедряют эти элементы пользовательского опыта (UX).

Примеры страниц 404: ссылка на домашнюю страницу

UXPin

Сначала мы посмотрим страницу 404 UXPin.

Как видите, они любят простоту. У них много пустого пространства вокруг графики на космическую тематику. Сообщение простое: «Эй, капитан! Похоже, ты направляешься не на ту планету!»

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

Google

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

«Запрошенный URL-адрес не найден на этом сервере. Это все, что мы знаем.»

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

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

Google является исключением, так как они уверены в том, что пользователи все равно вернутся на их ресурс.

Примеры страниц 404: полезные ссылки на страницы

Angi

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

Сообщение пользователю простое:

«Да, это неловко…

Похоже, страница, которую вы ищете, была перемещена, удалена или не существует. Приносим извинения за неудобства».

CTA — это список ссылок на предлагаемые страницы.

В заголовке также есть ссылки на типы домашних услуг и сообщения в блогах.

В подвале сайта удобно собраны ссылки, которые помогают найти сервисы в крупнейших городах, включая Нью-Йорк, Чикаго, Лос-Анджелес и Даллас. Там же расположены и другие важные гиперссылки.

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

Starbucks

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

Он предлагает объяснение того, что могло пойти не так, и некоторые предложения о том, что делать дальше.

Здесь есть ссылка, по которой посетители могут сообщить о неработающих ссылках.

Glassdoor.com

Взглянув на страницу 404 Glassdoor, популярная доска вакансий предлагает несколько действий.

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

Примеры страниц 404: ориентировано на графику

eBay

Фотография ребенка в зимнем пальто с капюшоном, натянутым на глаза, занимает центральное место на 404 странице eBay. 

«Мы искали повсюду».

«Похоже, эта страница отсутствует. Если вам все еще нужна помощь, посетите наши страницы помощи».

Под текстом размещена интерактивная кнопка, призванная направить гостя сайта обратно на главную страницу eBay.

В самом низу страницы расположен скроллинг с предложениями, которые актуальны на данный момент.

Lego

Когда вы попадаете на эту страницу 404, вы видите Эммета из фильма «Lego Movie». Его цитируют: «Все по-прежнему великолепно».

Примеры страниц 404: вращающиеся элементы

Amazon.com

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

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

Комиксы Marvel

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

• «Протокол отсутствует… Выход из программы…»
• «Гидра сейчас атакует эту страницу!»
• «$#&%, вы только что что-то сломали! Шутка.»
• «Даже глаз Нуату не видит вашего запроса.»
• «Гидра украла эту страницу из базы данных ЩИТА!»

IMDB

Еще одна изменяющаяся страница 404 из Международной базы данных фильмов (IMDB). Создатели сайта продолжают радовать своих пользователей знаменитыми кинофразами:

• «Веб-страница? Там, куда мы идем, нам не нужны веб-страницы». – Доктор Эммет Браун, «Назад в будущее».
• «Когда-нибудь мы найдем это… подключение к веб-сайту». – Лягушонок Кермит, Маппет-фильм.
• «Конечно, ты не можешь быть серьезным». «Я серьезно. И не называй меня Ширли». –Тед Страйкер и Раммак, Самолет.
• «Что мы имеем здесь… это неспособность общаться». – Капитан, Хладнокровный Люк.
• «Страница не найдена? НЕВОЗМОЖНО!» – Виццини, Принцесса-невеста.
• «У меня такое ощущение, что мы больше не в Канзасе». – Дороти, Волшебник страны Оз.