Страница 404 — классные примеры реальных сайтов
«Страница не найдена», «Упс…Такой страницы нет», «Страница, которую вы ищете, не найдена» – все это ошибка 404, которая возникает, когда ресурс, который мы хотим открыть, по каким-то причинам более не доступен.
Вы наверняка не хотели бы, чтобы посетители вашего сайта часто видели страницу 404. Особенно в ситуации, когда они только знакомятся с вашим брендом.
Мы не в силах предотвратить попадание на страницу 404, но мы можем сделать так, чтобы эта страница создавала хорошее впечатление о нашем бизнесе.
Даже лучше. Страница с ошибкой 404 могла бы заставить пользователей улыбнуться и почувствовать, что они оказались в правильном месте.
Как это возможно? Ответ читайте в нашей статье.
Страница с ошибкой 404 – что это?
Страница 404 – это страница, которую видят пользователи, когда их веб-запрос генерирует ошибку 404 – код HTTP-статуса, указывающий, что страница, которую мы пытаемся открыть, не существует.
Чаще всего такая страница появляется, когда URL-адрес напечатали с ошибкой или нажали на битую ссылку, которая ведет к несуществующей странице. Еще одна причина – владелец сайта решил удалить страницу или переместил ее в другое место, но забыл настроить переадресацию.
Как сделать страницу 404 – основные правила
- Дизайн страницы должен соответствовать оформлению сайта. Страница с ошибкой 404 не должна выделяться на фоне остальных страниц.
- Сделайте страницу удобной в навигации. Добавьте ссылки на главную страницу и основные разделы сайта.
- Следует поработать над формулировкой текста. По понятным причинам здесь не может быть много текстовой информации – это не продуктовая страница и не статья блога. Абсолютный минимум – объяснить, что это за страница, почему пользователь попал на нее и что делать, чтобы выйти оттуда.
- Добавьте прямую ссылку для контакта с командой техподдержки – предоставьте пользователю возможность сообщить об ошибке. Так вы покажете, что голос и мнение аудитории для вас очень важны.
Страница 404 – это такая же полноценная страница сайта, как и остальные, и ее созданию следует уделить не меньше внимания, чем другим. Почему?
Потому что это препятствие, о которое «спотыкается» лид, и если страница не оптимизирована, то она становится источником утечки трафика. Пользователь просто закрывает сайт и уходит на другие ресурсы. Ваша задача – всеми силами удержать его и направить на другие полезные страницы.
Зачем оптимизировать страницу 404?
- Шаблонная страница с ошибкой 404 понижает уровень доверия клиента к компании. Он может подумать, что сайт не работает, и выберет другой ресурс.
- Утечка трафика из-за некачественной страницы 404 является сигналом для поисковых систем и намеком в пользу того, что ваш ресурс не имеет ценности для аудитории.
Многие страницы 404 банально информируют о том, что запрашиваемый контент не существует. Но некоторые компании подходят с юмором к их созданию и делают их веселыми и запоминающимися.
Итак, давайте взглянем на список примеров. Мы собрали коллекцию интересных страниц 404 и сопроводили их комментариями от знакомых маркетологов, к которым мы обратились за помощью.
А вы знали? В бесплатном конструкторе сайтов GetResponse вы можете создать не только страницу 404, но и целый сайт! Вместе с интуитивным редактором вы получаете коллекцию готовых шаблонов, а мастер настройки с искусственным интеллектом может собрать весь сайт всего в несколько нажатий. Чтобы узнать больше об этом инструменте и начать дизайн страницы 404 уже сегодня, посмотрите эту видеоинструкцию.
СОЗДАТЬ САЙТ БЕСПЛАТНО
1. Ultimate GuitarЧтобы просмотреть анимацию, откройте исходную страницу.
Фоновый видеоряд страницы 404 идеально подходит под тематику сайта.
На сайте собрана коллекция нот и нотных тетрадей. Пополняется она за счет музыкальных экспертов и случайных пользователей. Каждому загруженному экземпляру можно поставить оценку: так вы узнаете, какие нотные тетради особенно ценные и качественные.
Есть премиальные расширения, благодаря которым вы получаете доступ к экспертному контенту, включая видеоинструкции и пошаговые справочники, а также официальные сборники нот. По таким источникам вы можете самостоятельно разобрать любую песню в буквальном смысле “по нотам”.
Визуализация страницы 404 каждый раз меняется: парень с гитарой совершает прыжок, чтобы показаться круче, но в конечном итоге смешно падает, или, например, еще один гитарист пытается впечатлить публику, раскручивая гитару вокруг головы, в результате чего она улетает со сцены (и ломается).
Хабиб Курди, старший копирайтер в GetResponse
Главные выводы:
- Вовлеченность поддерживается даже без особого текста.
Споткнувшийся гитарист или гитарист, потерявший гитару, находят отклик в душе музыкантов, передают вайб, который перекликается с содержанием сайта. - Чудаковатые видео говорят посетителям “эй, нет ничего страшного в том, что вы попали на несуществующую страницу”.
- Что насчет текста? Да, он предельно прост и по существу. “Упс” – это стандартное восклицание, которое означает досаду от неудачи. Чуть ниже ссылка на главную страницу (простота навигации), а также ссылка “сообщить о проблеме”. Наконец, 2 cta-кнопки, которые дублируют ссылки выше, но делают их более удобными для клика.
Обычно страницы 404 выбиваются из общей тональности сайта. Страница 404 Wizarding World является исключением.
Вы видите кадр, где Гарри Поттер впервые использует каминную сеть для трансгрессии. В этот раз он вместо Косого переулка оказался внутри мрачной лавки волшебника “Горбин и Бэркес” на малоизвестной улочке.
Изображение полно загадок, которые под силу разгадать истинным фанатам Гарри Поттера.
Похожие ребусы можно найти на страницах сайта Wizarding World.
Чуть ниже вопрос-обращение “Бедный, ты заблудился?” Это в духе миссис Уизли: она часто задается похожими вопросами, когда встревожена чем-то. Здесь мы видим ее в центре фотографии в кругу семьи.
Все эти приемы создают эффект погружения, и страница 404 не выделяется из общей атмосферы сайта. Создается впечатление, что пользователь попал сюда не случайно.
Чуть ниже размещена кнопка с призывом “Вернуться в Wizarding World” (“Вернуться в мир волшебства”), что дает двусмысленность: вернуться на основной сайт или вернуться в мир волшебства?
Никола Роза, владелец бизнеса Nikola Roza – SEO for the Poor and Determined
Главные выводы:
- Вплетайте страницу 404 в дизайн и тональность сайта.
- Оформляйте ее в соответствии с элементами вашего брендинга.
- Навигация должна быть понятной, желательно разместить кнопку, нажав на которую вы без труда покинете страницу.
Вместо того чтобы придумывать стандартную скучную страницу 404, владельцы международной сети ресторанов быстрого питания Wendy’s решили по максимуму проявить здесь индивидуальность бренда. Текст находится под дождем из фирменных бургеров Wendy’s.
На странице у вас 3 опции: открыть меню Wendy’s, просмотреть доступные вакансии или поиграть в милую игру, стилизованную под Wendy’s, в процессе которой, признаемся, у нас разыгрался аппетит и захотелось отведать наггетсов и картошки фри.
Это далеко не скучная страница 404 – вы ее точно запомните. Она олицетворяет образ компании Wendy’s, которая любит веселье и бургеры.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse
Главные выводы:
- Постарайтесь персонализировать страницу 404, добавив индивидуальности бренда.
- Появление страницы 404 – это не самое приятное событие, но вам под силу добавить позитива.
Это креативное агентство занимается маркетинговыми проектами, и ее проект по созданию собственной страницы 404 оказался очень удачным.
Страница загружается анимацией разбивающегося яйца. Кричаще-красный цвет сообщения привлекает внимание, а игра слов (eggstinct => extinct – “не существует”) делает отсылку к теме яйца (egg – “яйцо”) – обратите внимание на название агентства – Omelet (омлет).
Это слово активно используется в кампаниях контент-маркетинга, где услуги Omelet скромно описываются как eggstinctly brilliant. Сайт Omelet заявляет: “Иногда вам приходится вскрыть (crack open – аналогия с “разбить яйцо”) плохую идею, зажарить ее и подать на блюде с толикой сарказма”.
Omelet – это креативное агентство, которое отличается от других. Они берут обычную идею и переворачивают ее с ног на голову, создавая искрометные кампании, заставляющие людей думать (и смеяться).
Рональд Самсон, аналитик-исследователь в CreditDonkey
Главные выводы:
- Подгоняйте страницу под оформление и атмосферу сайта.
- Добавьте немножко юмора.
Canva – это платформа для творчества и графического дизайна. Их страница 404 очень простая и одновременно интригующая. Вы можете вернуться на главную страницу или остаться и решить головоломку. Во время игры вы в очередной раз понимаете, почему Canva так популярна – вы получаете доступ к ярким шаблонам и красивым элементам дизайна.
Эта страница ставит своей целью не конверсию, а развлечение посетителя. Простая структура страницы избавляет от вопроса “как отсюда выбраться” – вы без труда можете вернуться на главную страницу и продолжить работу.
Вещи, которые нам не очень понравились: скучный текст и отсутствие ссылок на основные разделы сайта.
Еще, судя по картинкам, такое впечатление, что эта страница давно не обновлялась.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse
Главные выводы:
- Простота – залог успеха. Но не забывайте про навигацию.
- Не бойтесь показать здесь свои самые лучшие стороны (например, дизайн в Canva).
- Регулярно обновляйте страницу 404.
Slack – это платформа для деловой коммуникации, которая хорошо понимает ценность баланса между работой и личной жизнью. Страница 404 прекрасно отражает эту философию. Текст выглядит успокаивающе и направляет в Справочный центр.
Присутствуют также элементы навигации. Но отдельно хочется отметить идиллический анимированный пейзаж. Открывается живописная сцена: летают бабочки, кругом цветы и радуга.
Более того – она интерактивна. Вы можете прокручивать пейзаж слева направо и гладить цыпленка и поросенка, которых встречаете по пути.
Это одна из самых успокаивающих страниц 404.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse
Главные выводы:
- Настройте четкую навигацию.
- По возможности предложите помощь и направьте в центр поддержки.
- Битые ссылки и несуществующие страницы раздражают. Старайтесь сгладить негативные эмоции пользователя, используя вежливые формулировки.
В мире, помешанном на скроллинге, нижняя часть сайта становится самым ценным активом.
Мне нравится, что Airtable не стали изобретать велосипед и выбрали навигацию, знакомую посетителям сайта. Они предлагают связаться со службой поддержки, а это очень важно для “потеряшек”. Этот прием устраняет неприятный осадок от попадания на несуществующую страницу.
Том Баррагри, менеджер по продуктовому маркетингу в GetResponse
Главные выводы:
- Не забывайте про навигацию в футере сайта.
- Добавляйте четкие CTA-кнопки.
- Совет: можно делать персонализированные предложения на основе посещенных ранее страниц.
Кто еще мог придумать изобразить бегущий хот-дог, чтобы вызвать у вас удивление и смех? Только Ueno.
Этот хот-дог, в свою очередь, напоминает нам, что техподдержка, скорее всего, так и не получила сообщение с просьбой исправить ошибку на странице. Спасибо за хорошее настроение, Ueno!
Брукс Конкл, владелец BrooksConkle
Главные выводы:
- Несуществующая страница расстраивает, поэтому ваша задача – исправить это.
- Смех продлевает жизнь – добавьте юмора.
Figma – платформа для графического дизайна и создания прототипов – креативно подошла к дизайну своей страницы 404. На первый взгляд, это стандартная страница с ошибкой 404.
Но если приглядеться, то можно заметить, что цифры 404 можно редактировать.
Вы можете бесконечно долго менять их очертание и форму. Даже если вы попали сюда по ошибке, не зная ничего о компании, вы можете наглядно посмотреть, что из себя представляет ее инструмент, играясь с цифрами.
Здесь есть также полоска навигации вверху, откуда вы можете попасть в любой раздел сайта. Черная CTA-кнопка “зарегистрироваться” выделяется на белом лаконичном фоне. Это один из наших любимых примеров того, как познакомить посетителя с фирменным инструментом.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse
Главные выводы:
- Представьте, что страница 404 – это первое знакомство клиента с вашим брендом. Это отличная возможность подойти с креативом и наглядно представить свои продукты или услуги.
Мы считаем, что это отличный пример качественной страницы 404.
Тон высказывания и внешний вид полностью соответствуют философии бренда.
Это проявляется в цветовой схеме, желтом подчеркивании, шрифтах и формулировках текста.
Хотя это страница ошибки, мы хотели, чтобы пользователь покидал ее с улыбкой на лице. Поэтому придумали эту карикатурную картинку, объясняющую, что что-то пошло не так.
Также мы хотели, чтобы пользователи знали, что им делать дальше. Есть ссылка на главную страница и подсказка проверить URL-адрес на предмет опечаток.
В нижней части страницы мы добавили дополнительные разделы, которые делают взаимодействие с этой страницей приятнее (и потенциально увеличивают конверсии). Мы разместили ссылки на лучшие статьи, ссылку на страницу с описанием инструментов платформы, а также на страницу регистрации.
Как еще можно оптимизировать эту страницу? Добавить строку поиска рядом со ссылкой на главную страницу. И хотя эта страница – не самый лучший вариант для повышения конверсий или подписок, мы надеемся, что она делает все, чтобы поднять настроение посетителей.
Михал Лешчиньски, глава отдела контент-маркетинга и партнерств в GetResponse
Главные выводы:
- Если меняете элементы брендинга, меняйте и страницу 404, чтобы она соответствовала нововведениям.
- Привнесите юмор в создание страницы.
- Анализируйте, насколько странице 404 удается повышать конверсии и поднимать настроение аудитории.
Иногда продукта, который вы ищете, больше нет. Конечно, это грустно. И если большинство компаний принимают этот факт и извиняются.
Lego идут другим путем: они убеждают, что переживать не стоит, жизнь по-прежнему прекрасна. Ниже четкий призыв к действию “Приступить к покупкам”.
Ирек Климчак, старший менеджер проектов в отделе контент-маркетинга GetResponse
Главные выводы:
- Проявляйте эмпатию.
- Помогите посетителю сохранить спокойствие.
- Предложите четкое решение.
Эту страницу 404 точно не назовешь обычной. После попадания туда мы сразу понимаем, что оказались не в том месте. Горилла – талисман Bouncer – предстает в интимной обстановке, а текст лишь подтверждает наши догадки.
Здесь два призыва к действию:
1) вернуться на главную страницу
2) стать опекуном гориллы при посредничестве Всемирного фонда дикой природы.
Второй призыв визуально более заметный и указывает на приоритеты компании (шутка!).
Чуть ниже ссылки на свежие посты блога на случай, если мы хотим узнать больше о доставляемости писем.
Эта страница соответствует общей тональности сайта.
Радек Качиньски, директор Bouncer.
Главные выводы:
- Добавляйте четкие призывы к действию.
- Мыслите нестандартно, например, предлагайте поддержку для благородной цели.
- Используйте символ компании, чтобы «очеловечить» страницу.
- Создавайте страницу 404 в соответствии с философией компании.
- Добавляйте в нижней части страницы ссылки на полезный контент (например, на посты блога).
У NASA очень красивая профессионально выполненная страница 404.
Текст «Космический объект, который вы искали, исчез за горизонтом событий» и фоновое изображение загадочной галактики очень подходят космическому агентству.
Здесь нет уловок, вы можете продолжить просматривать сайт NASA, нажав на ссылки в строке навигации. Никто не пытается заставить вас задержаться на этой странице, однако у создателей получилось привлечь внимание.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse.
Главные выводы:
- Если есть возможность адаптировать текст и дизайн страницы под специфику вашего бизнеса, обязательно воспользуйтесь ею. Благодаря единообразию темы вы поддерживаете вовлеченность аудитории и повышаете свой авторитет.
Время создать страницу 404
Как вы успели заметить, несуществующие страницы – это далеко не редкое явление. Многие маркетологи научились извлекать из них пользу для бизнеса.
Одни пытаются изменить негативное восприятие этой страницы на положительное – оставляя забавное сообщение или добавляя интерактив.
Другие пытаются протянуть руку помощи – добавляют полезные ссылки, кнопку перехода на главную страницу или строку поиска – чтобы пользователь нашел контент, который ищет или который будет ему интересен.
А еще есть маркетологи, которые пытаются с помощью этой страницы повысить продажи и конверсию.
Примеры страниц в этой статье послужат вам источником вдохновения. У вас обязательно получатся чудесные и запоминающиеся страницы 404.
Если вы в самом начале пути и еще не обзавелись сайтом, советуем прочитать нашу статью.
Там мы пошагово объясняем, какие аспекты вам нужно учесть, если вы хотите иметь собственный сайт – это может быть сайт на базе WordPress, требующий продвинутых ручных настроек, или сайт на базе интуитивного блочного редактора вроде конструктора GetResponse.
Если вы еще не слышали об этом новом инструменте GetResponse, посмотрите краткую видеоинструкцию.
СОЗДАТЬ САЙТ БЕСПЛАТНО
Почему любому сайту нужна страница 404
Приемы создания страницы и лучшие примеры от сайтов на Тильде и в вебе
Tilda Education
Когда человек попадает на страницу ошибки, он чувствует себя подавленным и раздраженным. Страница 404 сообщает нам, что мы потерпели неудачу. Но все можно исправить и вернуть пользователя на сайт невредимым. Рассказываем, как это сделать, с примерами.
Содержание
Зачем нужна страница 404
Приемы создания страницы 404: о чем стоит помнить
Как правильно сделать страницу ошибки на Тильде
Примеры классных страниц 404 на Тильде
Страница 404 — это неудачная попытка открыть что-то в вебе. Это автоматическая страница, которая открывается, если запрашиваемый сайт невозможно найти.
Обычно такая ошибка возникает, когда человек вводит некорректный адрес сайта или переходит по несуществующей ссылке (например, вы удалили старую ссылку, а в поисковой индексации она осталась, и человек перешел).
Страница 404 может возникнуть на любом сайте, потому что ее невозможно проконтролировать полностью.
Зачем нужна страница 404
Кажется, что можно и обойтись без собственного дизайна страницы ошибки — что в этом такого?
На самом деле страница 404 нужна всем, и вот почему:
Вы не можете предотвратить все случайные ошибки — пользователь может ошибиться и ввести другой адрес, не найти того, что искал и уйти. Так вы потеряете потенциального клиента.
Когда у сайта уже очень много страниц, сложно отследить все адреса: где-то могли поменять адрес, чтобы улучшить SEO, какой-то раздел удалили, а он по-прежнему индексируется в поиске.
Когда у вас много неоформленных страниц 404, с которых пользователи не могут перейти на главную или другие разделы, у вашего сайта снижаются позиции в органическом поиске.
Так что продумать дизайн страницы 404 — полезно для SEO.
ifttt.com
www.dtelepathy.com
www.cosowinerestaurant.com
oak.is
www.hannabi.com
www.panicstudio.tv
panike.pt
outlane.co
Создать дизайн страницы 404 — способ по-человечески поговорить с вашим пользователем и вернуть его на сайт.
Приемы создания страницы 404: о чем стоит помнить
Объяснить посетителю, что происходит.
Вы можете уменьшить беспокойство человека, попавшего на страницу 404, если расскажете, как это могло произойти.
Можно перечислить причины (например, ссылка устарела и ее убрали с сайта, или допущена ошибка в адресной строке), а также сделать ссылку на главную сайта или возможность выйти в меню.
solarcomplekt.com
www.uxsofia.com
marvelapp.com
Развлечь и рассмешить.
Цель дизайна страницы 404 — сделать меньше фрустрацию вашей аудитории, постараться отвлечь людей от ощущения потери. С этим очень хорошо справляются изображения, видео, анимации, особенно смешные.
hugeinc.com
Тональность сообщения на странице ошибки зависит от позиционирования вашего бренда, но немного юмора никогда не помешает.
worrydream.com
www.pixar.com
renk-magazin.de
off-box.com
bakkenbaeck.com
emojibook.club
Вернуть пользователя на сайт.
Юмор и красивые картинки — это прекрасно. Но не стоит забывать, что вам нужно поскорее вернуть посетителя страницы 404 на сайт. Дайте ему возможность для этого, поставьте контакты, меню и ссылку на главную или блог.
builtvisible.com
theoryandpractice.ru
finely.co
mag.fieldsroads.ru
Сохранять свой стиль.
Страница 404 — часть вашего сайта, поэтому она должна быть оформлена в стиле вашего бренда. Это касается цветов, типографики и всего контента.
dropbox.com
hula-hoop.fr
intercom.com
airbnb.ru
Предупредить ошибку.
Лучший способ сделать так, чтобы пользователь не попал на страницу 404 — постоянно проверять «битые ссылки» на сайте. Если раз в месяц проверять потерянные статьи, видео, картинки и так далее, ваши пользователи будут все меньше попадать на страницу 404.
У Google и Яндекс есть бесплатные сервисы для веб-мастеров, которые помогают найти неработающие ссылки.
Как правильно сделать страницу ошибки 404 на Тильде
Сделайте оформление: добавьте сообщение об ошибке и желаемый контент — например, ссылку на главную или забавную иллюстрацию.
Опубликуйте.
Перейдите в «Настройки сайта > Еще > 404 страница». Выберите из списка страницу, которую вы создали и сохраните.
Важно:
- Не задавайте адрес /404 — будет появляться стандартная ошибка Тильды
- Чтобы 404 заработала, вам нужно переопубликовать все страницы сайта
Какую информацию разместить на странице 404?
Вы можете рассказать посетителям, как они оказались на странице 404 ошибки и почему.
Какие блоки я могу использовать для создания страницы 404?
Выбор блоков зависит от задач вашей страницы ошибки. Это может быть блок с картинкой и заголовком или просто картинкой, может быть видео или нулевой блок, если вы хотите дать волю дизайнерской фантазии.
Нарисуйте прототип страницы 404 — вдохновитесь примерами, напишите текст, подберите изображение. И дальше под свои задачи подбирайте нужные блоки из библиотеки Тильды. Можно использовать шаблоны одноэкранных сайтов, например, подойдут шаблоны Тильды для контактов. Если на сайте используется шапка с меню, то ссылка на главную и выход на другие разделы сайта у вас уже есть.
Как должна выглядеть моя страница 404?
Предела совершенству нет.
Как и любую другую страницу в вебе, оформите 404 так, чтобы она отражала стиль вашей компании и вашего сайта в целом. Творите и веселитесь, на странице ошибки можно позволить себе оторваться.
danwoodger.com
bons.me
swelldesigngroup.com
robinhood.com
www.dogstudio.co
Примеры классных страниц 404 на Тильде
controforma.school
basetemplates.com
www.arenaslab.com
thewonderdesigns.com
www.togdazine.ru
happyfication.space
lab-w.com
Текст: Варя Гурова
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям.
Спасибо!
Читайте также:
Продвижение по методу AARRR
Что такое UX дизайн?
Как привлечь новых пользователей с подходом Jobs To Be Done
Закон о защите персональных данных — как избежать штрафов
Впечатление о сайте — что повышает доверие пользователя в веб-дизайне
Визуальная иерархия сайта: оформление и организация контента
Персональный сайт личного бренда: как использовать Тильду для развития личного бренда
Бизнес в инстаграм: как увеличить продажи с помощью сайта
Как повысить конверсию сайта — 12 психологических приемов
Уникальное торговое предложение для сайта — как составить продающий оффер
Аналитика сайта — как повысить конверсию сайта, используя веб-аналитику
SEO продвижение сайта на Тильде самостоятельно — пошаговая инструкция
| Показать больше |
20 лучших примеров страниц с ошибкой 404
Автор: Саадия Минхас, 25 января 2019 г.
Отмечен в креативность , дизайн , тенденции дизайна
Страница 404 каждого веб-сайта — страница, над созданием которой многие компании тратят огромное количество времени, надеясь, что ни один клиент ее никогда не увидит.
Почему?
Потому что, когда клиент видит вашу страницу 404, это означает, что что-то пошло не так. Ваш клиент ввел неверный адрес, или он зашел на страницу, которой больше не существует, или кто-то где-то ошибся и есть ссылка на ваш сайт, которая ведет в тупик.
Каждый хороший UX-дизайнер и менеджер по продукту признает, что, хотя вы в первую очередь сосредоточены на решении самых серьезных проблем пользователя, вам также необходимо приспосабливаться и к тем случаям, когда они выходят за рамки сценария. Вот почему скромная страница 404 стала такой важной частью каждого веб-сайта, даже если цель состоит в том, чтобы клиент никогда ее не увидел.
Здесь мы рассмотрим, как 20 крупных компаний обрабатывают свои страницы 404 — как они используют их, чтобы восстановить неудачный опыт перехода по мертвой ссылке, и как они берут на себя ответственность за сбой, перенаправляя своих пользователей на более зеленые пастбища, часто добавляя немного развития бренда и юмора одновременно.
1.
Амазонка
Привет собакам! Amazon использует страницу 404, чтобы дать вам некоторое представление о культуре их компании (включая обязательные изображения милых щенков). Amazon также немедленно берет на себя ответственность за ошибку (даже если это не их вина) — с помощью слова «SORRY» большими заглавными буквами, уведомляющего пользователя о том, что это не та страница.
2.
Flickr
Косвенная отсылка к фильму, небольшое пояснение и возможность просмотреть тщательно подобранный список фотографий означают, что даже пользователи, попавшие туда случайно, скорее всего, задержатся на сайте еще немного.
3.
Adobe
Сногсшибательная фотография и соответствующая идиома сочетаются как тонкое свидетельство мощности пакета Adobe для редактирования фотографий. Поиск и возврат на домашнюю страницу — это два стандартных действия, которые пользователь может захотеть предпринять с этого момента.
4.
Гугл
В Google все просто. Просто изображение сломанного робота и простое, почти техническое сообщение об ошибке. Вероятно, это свидетельство их инженерных корней и стремление каждый раз находить правильный ответ.
5.
Награды
Не все понимают это правильно, и страница 404 Awwward использует все заглавные буквы и резкие изображения, чтобы сообщить посетителю, что он не прибыл туда, куда ожидал. В частности, текст, набранный заглавными буквами, затрудняет чтение, заставляя пользователя задерживаться в пути дольше, чем он мог бы в противном случае предпочесть.
6.
Канва
Веселая маленькая игра — отличный способ развлечь потерянных посетителей, если у вас есть время собрать ее. Это определенно помогло ему составить этот список!
7.
Дрибббл
Dribbble — это веб-сайт для дизайнеров, ищущих вдохновения. Что может быть лучше для заблудившегося посетителя, чем позволить ему выбрать цвет и дать ему ссылку на дизайн этого цвета.
Еще один пример страницы 404 веб-сайта, которая глубоко понимает, почему их клиенты там, а затем усердно работает, чтобы предоставить этим клиентам этот контент, куда бы они ни пошли.
8.
Behance
Behance, похожий на Dribbble сайт, предлагающий визуальное вдохновение для дизайнеров, по сравнению с ним немного более стерильный. Подобно поисковой системе 00-х, они показывают просроченным посетителям список всех проектов, категорий и демонстрируют некоторые популярные дизайнерские проекты, чтобы помочь им вернуться в нужное русло.
9.
Новости дизайнеров
Простота часто имеет свою силу. Страница Designer News 404 передает сообщение — бонусные баллы за то, что на ее реализацию не требуется месяц времени разработчика.
10.
Инстаграм
Простая страница с копирайтингом, граничащим с обвинением пользователя в ошибке (в отличие от Adobe, которые сразу берут на себя ответственность за ошибку и работают, чтобы помочь пользователю).
Заголовок, который, если вы не читали глубже, может быть истолкован как «эта страница существует, но вы не можете получить к ней доступ». Этот день посетителей стал немного менее счастливым, увидев это.
11.
Основа интерактивного дизайна
The Interaction Design Foundation дает посетителю возможность отправить электронное сообщение с описанием того, что они делали, когда заблудились, и вопросом, что они ожидали увидеть вместо этого. В этом подходе есть благородное, хотя и ошибочное намерение — если они достаточно заботятся о своих посетителях с ошибкой 404, им действительно следует просматривать журналы ошибок своего веб-сайта (или использовать простые онлайн-инструменты для поиска веб-сайтов) и определять распространенные причины, по которым люди не могут добраться. их предполагаемые пункты назначения.
12.
Ютуб
Четко расскажите о том, что только что произошло, сделайте милую картинку с обезьянкой, дайте пользователю вместо этого поискать другое видео.
Хорошая, простая работа второй по величине поисковой системы в мире.
13.
eBay
Простое и относительно забавное изображение ребенка — необычное отклонение от наших страниц на сегодняшний день, но оно работает хорошо, поскольку сочетается с четким сообщением и ссылками на их домашнюю страницу, страницы справки и популярные предложения.
14.
Этихад Эйруэйз
Копирайтеры Etihad 404 упустили памятку из-за краткости, потратив 3 строки, чтобы сообщить, что обычно достигается одной строкой, и в то же время дать пользователю несколько плохих советов ( Проверьте URL-адрес и попробуйте еще раз. Правда? Сколько в среднем пользователи правильно понимают, как форматируется URL-адрес? Кроме того, если вы находитесь на странице 404, повторная попытка волшебным образом не заставит ее внезапно работать).
15.
LinkedIn
Стандартная страница с ошибкой 404, отвечающая всем требованиям, но не предлагающая ничего вдохновляющего.
Смутно релевантное изображение телескопа, приличная копия и ссылки на ленту пользователя и на справочный центр.
16.
MailChimp
Достижение страницы 404 редко означает жизнь или смерть, поэтому Mailchimp делает это прямо сейчас, беря на себя ответственность за ошибку и предоставляя посетителю возможность продолжить. Соответствует всем требованиям и помогает укрепить свой бренд.
17.
Средний
Сообщение об ошибке 404 звучит громко и четко. Страница разумно дает пользователю возможность перейти к популярным статьям о том, как «потеряться».
18.
Лего
Немного эмоций может спасти неприятную ситуацию — даже если это всего лишь лицо виртуальной пластиковой игрушки. Лего отлично справляется с этой задачей.
19.
Примечания
Простое монохромное предложение 404. Одна небольшая критика заключается в том, что основную кнопку действия («Вернуться домой») трудно сразу идентифицировать.
20.
Движение пользовательского интерфейса
Движение пользовательского интерфейса использует свою страницу ошибок для продвижения еженедельной подписки на их информационный бюллетень, умничка!
Биография автора:
Саадия Минхас — увлеченный UX-дизайнер, обладающий обширным опытом управления и разработки удивительных пользовательских интерфейсов, предоставляя высококачественный дизайн для продуктов и проектов по всему миру. Чтобы прочитать больше ее статей, посетите Medium, UXDesignWorld
Читать дальше…
- Роль дизайна в создании бренда
- 10 тенденций дизайна, которые миллениалы примут в 2019 году
- 25+ инструментов для запуска вашего стартапа в 2019 году
- Дизайн бренда 101 для основателей стартапов
- Нужен ли вашему стартапу дизайнер UX или UI?
Что такое страница 404? Полное руководство с примерами
Содержание
Что такое страница 404
Следует ли использовать собственную страницу ошибок?
Руководство по странице 404
Примеры страницы 404
Что такое страница 404?
Страница 404 — это стандартное сообщение об ошибке, которое отображается, когда кто-то пытается получить доступ к несуществующей веб-странице.
Это может произойти по разным причинам, например, если страница была удалена, перемещена или переименована, а вы не настроили вместо нее переадресацию 301.
При возникновении ошибки 404 пользователь увидит общее сообщение об ошибке «404 Страница не найдена».
Наиболее распространенная причина появления страницы 404 связана с переходом по устаревшим ссылкам, которые больше не ведут на правильную страницу.
Другие причины включают веб-страницу, к которой они пытаются получить доступ, больше не существует или они просто ввели неверный URL-адрес.
Как ошибка 404 влияет на SEO?
Хотя ошибки 404 не оказывают прямого влияния на SEO, они могут косвенно влиять на рейтинг вашего сайта в результатах поиска.
Это связано с тем, что ошибки 404 могут привести к неработающим ссылкам, что может затруднить Google правильное сканирование и индексирование вашего веб-сайта.
Кроме того, если пользователи постоянно попадают на страницы 404 при посещении вашего веб-сайта, это создаст плохой пользовательский опыт, что может привести к более высокому показателю отказов и более низкому рейтингу в результатах поиска.
Что такое Soft 404 Ошибки?
Мягкая ошибка 404 возникает, когда веб-сервер возвращает страницу, которая выглядит как обычная веб-страница, но не содержит ожидаемого содержимого.
Это может произойти, когда владелец веб-сайта неправильно направляет трафик своего веб-сайта на несуществующую страницу.
Ошибки Soft 404 не всегда легко обнаружить, но они могут создавать проблемы как для владельцев веб-сайтов, так и для посетителей.
Как исправить ошибку 404?
Если вы видите на своем веб-сайте ошибку 404, вы можете исправить ее несколькими способами.
Сначала проверьте URL-адрес страницы, к которой вы пытаетесь получить доступ. Если URL-адрес неверен, просто обновите его и повторите попытку. Если URL-адрес правильный, но страница по-прежнему не загружается, попробуйте очистить кэш браузера и файлы cookie.
Если URL-адрес больше не существует, в противном случае пользователь может не понять, почему он попал на эту страницу.
Создание пользовательской страницы 404
Пользовательская страница 404 — отличный способ добавить индивидуальности вашему веб-сайту и помочь посетителям сориентироваться, если они столкнутся с ошибкой 404.
Чтобы создать пользовательскую страницу 404, просто создайте новую страницу на своем веб-сайте и включите сообщение с извинениями за ошибку, а также полезные ссылки или другую информацию.
Вы также можете использовать эту возможность, чтобы добавить немного юмора на свой сайт — ведь все делают ошибки!
Примеры страниц с ошибкой 404
Чтобы дать вам представление о различных типах страниц с ошибкой 404. Мы выбрали подборку из тех, что нашли в сети.
1. Интеллектуальный пассивный доход
Вот красивый 404-страничный дизайн от нашего хорошего друга Пэта Флинна. Здесь вам показано стандартное уведомление, за которым следует ссылка на домашнюю страницу.
Однако вам также будет показана панель поиска для поиска того, что вы ищете, а также некоторых полезных ресурсов и последних статей.
Вам также будет показано окно подписки с предложением лид-магнита.
Важно отметить, что в целом страница имеет тот же дизайн, что и другие страницы веб-сайта, что делает ее последовательной и менее раздражающей для посетителя.
Это резко снизит показатель отказов или вероятность того, что посетитель уйдет. Им показывают многочисленные варианты, чтобы остаться на странице и продолжить просмотр, что является ключом к увеличению вероятности получения подписчика электронной почты.
2. Nintendo
Поскольку Nintendo — компания, занимающаяся видеоиграми, она является очень известным брендом во всем мире, и тысячи посетителей ежедневно посещают их веб-сайт.
В этом примере Nintendo выбирает чистый дизайн со ссылками на полезные ресурсы для игр, новости, а также ссылку для связи со службой поддержки.
3. Gordon Ramsey
Вот еще одна простая страница 404, предлагающая короткое уведомление об ошибке с возможностью подписаться на информационный бюллетень Гордона Рэмси.
Интересно отметить, что форма подписки скрыта при первом просмотре страницы, и для ее открытия необходимо нажать кнопку справа.
Это добавляет дополнительный шаг к подписке посетителя, что приводит к более отзывчивому и заинтересованному подписчику электронной почты.
4. Страница Amazon 404
Вот забавный пример от Amazon. Очень простая страница, на которой нет ничего, кроме изображения собаки и двух URL-ссылок, ведущих на домашнюю страницу, и страницы, где можно узнать больше о собаках на Amazon.
Не лучшее применение для страницы Уверен, вы согласитесь. Но это отличная демонстрация того, как юмор может быть отличным способом вернуть посетителя в ваш бизнес.
Так что, если вы обнаружите, что число посетителей, уходящих из вашего сайта, довольно велико, подумайте о том, чтобы добавить немного юмора, чтобы восстановить вовлеченность.
5. Marie Forleo fun 404 page
Это красивая жирная страница 404 от Marie Forleo.
Снова предлагает 2 простые URL-ссылки на ее домашнюю страницу и возможность просмотра видео.
Она также включает в себя ненавязчивую панель выбора, которая выделяется вверху страницы. Это отличный пример того, как вы можете предложить лид-магнит, сохраняя при этом минималистичный дизайн.
Если у вас есть лид-магнит и вы хотите разместить его так, чтобы он не занимал много места на странице, то определенно рекомендуется последовать примеру Мари.
6. Щепотка Yum
Вот еще один хороший пример от Pinch of Yum. Макет очень похож на тот, который использовал Пэт Флинн, и предлагает подборку статей с рецептами блюд, на которые можно взглянуть.
В самом верху страницы также есть окно поиска, а также удобное поле для подписки в нижнем колонтитуле.
Опять же, сохраняя один и тот же дизайн повсюду, это отличный дизайн страницы, который следует учитывать, если вы находитесь в нише кулинарных рецептов и хотите вернуть своих посетителей.
7. Дай Мануэль
Вот еще один хороший пример минималистского дизайна в нише здоровья и хорошего самочувствия.
