UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Курс по созданию дизайна страницы ошибки 404
Редакція
Редакція

Опубліковано

Курс по созданию дизайна страницы ошибки 404

#ux

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

Многие люди говорят фразу: «Дело не в пункте назначения. Все дело в самом путешествии». И эти люди говорят правду – пока они не натолкнутся на контрольно-пропускной пункт. Пропущенный поворот или плохо составленный маршрут могут стоить часов поездки. Когда вы выполняете миссию, эти часы, потраченные на то, чтобы найти то, что вам нужно, могут испортить весь опыт. Это не всегда должно обернуться катастрофой. Может произойти следующий более оптимальный сценарий: вы свернули не туда, но, остановившись на ближайшей заправочной станции, вы едете дальше, уточнив маршрут до конечного пункта назначения. А еще милая пожилая дама, работающая на АЗС дала вам бесплатный рожок мороженого, потому что увидела, что вы сбились с дороги... и хотела вас подбодрить. Часто посетители веб-сайта могут «свернуть не туда». Это не всегда их вина. Они могли ввести неправильный URL (распространенная ошибка) или щелкнуть по неработающей ссылке (наша ошибка). Независимо от причины, вы запутали людей, которые хотели взаимодействовать с вашим сайтом, а теперь не могут. Вы держите поводья их навигации. Вы можете направить их в нужном направлении или можете оставить их разочарованными в темноте. Им нужно сделать разворот на 180 градусов? Они вышли не туда? Только вы можете сказать им это, и лучший способ сделать это при помощи страницы ошибки 404. Страница ошибки 404 может предоставить любой из представленных ниже сценариев возвращения пользователей к покупкам. Мрачная страница 404 раздражает посетителей и толкает их в руки конкурентов, сайт которых лучше удовлетворяет их запросы. Эта унылая страница 404 содержит пресный текст с минимальными визуальными элементами. С таким же успехом можно было написать: «Эта страница не существует». Это, как если бы ваши пользователи спросили вас куда идти, а вы им ответили: «ну, того, что вы ищете, здесь нет. Удачи». Больше ничего. Bards Tragainst Bubanity Даже бренды с, казалось бы, умным брендингом могут пренебречь страницей 404! Владелец этого унылого извинения за страницу с ошибкой останется анонимным (но он рифмуется с Bards Tragainst Bubanity) К сожалению, даже некоторые из лучших мировых брендов используют такие страницы ошибки 404. Без навигации. Без интересного текста. Ничего, что отражало бы индивидуальность их бренда. Подобные страницы расстраивают посетителей еще больше. Тем не менее, некоторые страницы 404 выходят за стандартные рамки. Вместо того, чтобы просто на белой странице сообщить об ошибке 404, они обращаются к пользователю тоном, выражающим их индивидуальность. Хорошо продуманные страницы 404 могут перенаправить посетителей, чтобы они не терялись и в приподнятом настроении переходили на полезную страницу вашего сайта. Взять, к примеру, Amazon. В день Amazon 2018 года компания поняла важность достойной страницы 404. Конечно, покупатели все еще были разочарованы тем, что попали на страницу с ошибкой 404 – даже если на ней был изображен щенок. Тем не менее, представьте себе, сколько бы было раздраженных покупателей, если бы страница 404 выглядела холодной и бесполезной? Независимо от того, какой тон или визуальные элементы вы хотите использовать или какой текст лучше всего привлечет ваших читателей, отличная страница 404 прежде всего делает одну вещь: заставляет посетителей сайта не находить то, что им нужно – хотя бы на мгновение – и направляет их туда, куда им нужно идти. Несмотря на то, что страницы 404 сильно различаются, кажется, что лучшие из них хорошо выполняют две вещи:

  1. Поддержка общего бренда компании;
  2. Успешно перенаправляет посетителей сайта в другое место с помощью четкой навигации и поддержки.

Тематически, есть несколько способов сделать «идеальную» страницу 404:

1. Определите общий тон сообщения

Если контент не является сильной стороной вашего бренда, это может стать проблемой. Однако, если у вашего бренда есть четко выраженная индивидуальность, вы сможете быстро определить, где предложить нечто неожиданное. Посетители уже будут разочарованы, когда перейдут на вашу страницу 404, ведь они не получили то, что хотели. Ваша страница 404 – это возможность показать, что за вашим маркетингом стоят люди, а не роботизированные, холодные, автоматизированные сообщения, которые можно увидеть в других местах. Короче говоря, выйдите за пределы стандартной фразы «эта страница недоступна» и ее вариантов. Независимо от используемого тона, хорошие страницы 404 работают подобно магам. Лучшие иллюзионисты часто признают, что они волшебники. Они не притворяются тем, кем не являются. Страница 404 – это страница ошибки. Поэтому текст и визуальные эффекты часто отражают это. И затем, как любой хороший волшебник, страницы 404 отвлекают внимание от проблемы и направляют его на другое место. Как правило, это делается с помощью текста, который соответствует визуальным элементам. Вот некоторые приемы, используемые успешными страницами 404.

Шутите

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

Поумничайте

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

Будьте дружелюбны

Ярким примером может служить страница 404 интернет-магазина LEGO с дружелюбным представителем службы поддержки клиентов (хотя это и LEGO-человечек). Дружелюбие может исходить от привлекательного дизайна или текста. В конечном счете, текст заканчивается предложением: «Эй, мы действительно сожалеем об этом. Давайте попробуем это исправить».

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

lego shop

Интегрируйте интерактивность

Люди любят нажимать на вещи, особенно если они столкнулись со страницей 404 в декстопном браузере. И если они будут взаимодействовать с вашим сайтом, тем лучше! Один из лучших примеров онлайн-интерактивности на странице 404 – это сайт Kualo. Провайдер хостинга сайтов превратил свою страницу 404 в игру «Космические Захватчики» с возможностью зарабатывать дополнительные жизни по мере повышения уровня. Еще более впечатляет то, что Kualo фактически предлагает скидки на свой хостинг по достижении пользователями определенного количества очков. Геймификация страницы 404 на сайте Kualo заставляет пользователей возвращаться, чтобы получить больше шансов на победу Геймификация страницы 404 на сайте Kualo заставляет пользователей возвращаться, чтобы получить больше шансов на победу

Побуждайте думать

Да, ваши 404 страницы могут быть образовательными! Они могут предложить ресурсы и ссылки на другие полезные разделы вашего сайта. Это может легко развлечь гостей дополнительной информацией. National Public Radio (NPR) на своем сайте делает это исключительно хорошо. Они предоставляют коллекцию статей, которые объединяет одна деталь – это истории о вещах, которые также исчезли. National Public Radio (NPR) 404

Будьте Актуальны / Отсылки к поп-культуре

Используйте это с осторожностью, так как высока вероятность, что вам придется изменить сообщение на странице 404, если вы хотите быть актуальным. Отсылки к поп-культуре быстро выходят из моды. Если вы не будете осторожны, может оказаться, что вы потратили слишком много времени на разработку страницы 404, которая не будет актуальна уже через две недели. (И это смертный грех для любой организации с целевой аудиторией, состоящей из поколения Миллениума или моложе.) Страница 404 сайта Spotify недавно претерпела изменения, чтобы не отставать от трендов. До того, как обыграть песню Канье Уэста «808 and Heartbreak», на странице 404 были слова из песни Джастина Бибера «Sorry». обыграть песню Канье Уэста «808 and Heartbreak» на странице 404

2. Создайте визуальные элементы, соответствующие тону сообщения

Как только у вас появится представление о правильном тоне страницы 404, визуальные эффекты станут следующим важным шагом в процессе ее улучшения. Визуальные элементы часто являются первым элементом страницы 404, на который люди обращают внимание, таким образом, это первое представление желаемого тона этой страницы. Статические визуальные эффекты помогают подчеркнуть текст страницы. Добавление легкой анимации часто может взаимодействовать с текстом, усиливая его. Например, страница 404 сайта Imgur оживляет свои иллюстрации, заставляя глаза персонажей следовать за курсором пользователя. imgur 404 Интерактивность среди визуальных элементов дает людям возможность делать то, что любят разочарованные интернет-пользователи – нажимать на все подряд, пытаясь добиться чего-то полезного.

3. Четко сформируйте навигацию

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

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

Например, страница 404 сайта Shutterstock предлагает три различных сценария. Посетители могут либо вернуться на предыдущую страницу, что полезно, если они нажали не на ту ссылку. Они могут вернуться на домашнюю страницу для более сложного перезапуска навигации, или, возможно, они пришли из поисковой системы и нашли неработающую ссылку, но они не готовы отказаться от веб-сайта и хотят осмотреться. Последний вариант – сообщить о проблеме. Если кто-то искал ваш сайт уже несколько минут подряд, и он знает, что ищет, то посетитель может сообщить, что, возможно, обнаружил проблему. По крайней мере, это вовлекает ваших посетителей, а ваша команда разработчиков получает фидбек о доступности вашего сайта. страница 404 сайта Shutterstock В дополнение к понятной навигации, следующие элементы на основе навигации могут помочь вашим посетителям еще больше:

  • Чат-боты / чат в реальном времени: часто отношение к ботам бывает диаметрально противоположное. Пользователи или считают их невероятно раздражающими, или полезными. Боты, которые появляются в течение секунды после захода на страницу, часто заставляют посетителей покинуть сайт, поскольку бот кажется навязчивым. Тем не менее, ваш сайт может использовать ботов, просто добавив опцию «Click to chat». Это приглашает потерянных посетителей, которые хотят, чтобы вы им помогли, взаимодействовать с ботом.
  • Панели поиска: этот элемент может творить чудеса с большим объемом страниц и информации на веб-сайтах. Панель поиска также может предлагать ответы на общие вопросы или перенаправлять посетителей в раздел «Часто задаваемые вопросы».

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

Как отслеживать события 404, используя Google Analytics

Что вам нужно начать отслеживать

Предоставленный код будет сообщать об ошибках 404 в Google Analytics, поэтому у вас должна быть активная учетная запись. Вам также необходим доступ к шаблону 404 вашего сайта, и (это важно) страница 404 должна сохранять структуру URL typed/clicked страницы. Это означает, что события 404 не могут быть просто перенаправлены на страницу 404. Вы должны обслуживать шаблон 404 динамически с точным URL, который вызывает ошибку. Большинство сервисов веб-сервера (таких как Apache) позволяют вам делать это с различными правилами перезаписи. Предоставленный код будет сообщать об ошибках 404 в Google Analytics

Отслеживание ошибки 404 при помощи Google Analytics

С помощью Google Analytics очень легко отслеживать явные ошибки 404. Убедитесь, что ваш основной скрипт отслеживания Google Analytics на месте, а затем добавьте следующий код на страницу / шаблон ошибки 404: // Create Tracker - Send to GA ga('create', 'UA-11111111-11'); ga('send', { hitType: 'event', eventCategory: '404 Response', eventAction: window.location.href, eventLabel: document.referrer }); Вам нужно будет выгрузить ID своего аккаунта Google Analytics. После этого скрипт заработает и будет отправлять «событие» в Google Analytics. Категория события «404 Response»: действие использует JavaScript для передачи URL, который выдает ошибку, а метка использует JavaScript для передачи предыдущего URL, на котором был пользователь. По этим данным вы можете увидеть, какие URL вызывают события 404 и где люди получают доступ к этим URL.

Отслеживание ошибок 404 с помощью GoogleTag Manager

Все больше и больше веб-менеджеров решили перейти на Google Tag Manager. Этот инструмент дает возможность встраивать в один контейнер целый ряд скриптов. Это особенно полезно, если у вас много скриптов отслеживания от нескольких провайдеров. Чтобы начать отслеживание ошибки 404 с помощью Tag Manager, сначала начните с создания «Переменной» под названием «Page Title Variable». Этот тип «JavaScript» переменной, а имя переменной - «document.title»: GoogleTag Manager 404 отслеживание - 1 По сути, мы создаем переменную, которая проверяет заданный заголовок страницы. Так мы будем проверять, находимся ли мы на странице 404. Затем создайте «Триггер», называемый «404 Page Title Trigger». Тип «Page View», и триггер срабатывает, когда «Page Title Variable» содержит «404 — Page Not Found» или любой другой заголовок страницы 404 отображаемый, как в браузере. GoogleTag Manager 404 отслеживание - 2 Наконец, вам нужно будет создать «тег» с именем «404 Event Tag». Тип тега «Universal Analytics» и он содержит следующие компоненты: GoogleTag Manager 404 отслеживание - 3 Переменная, триггер и тег работают для передачи соответствующих данных непосредственно в Google Analytics.

Отчет об ошибке 404

Независимо от вашего метода отслеживания (будь то с помощью Tag Manager или прямых маяков событий), ваши отчеты должны быть одинаковыми в Google Analytics. В разделе «Behavior» вы увидите пункт «Events». Здесь вы увидите все зарегистрированные события 404. Измерения «Event Action» и «Event Label» предоставят вам соответствующие данные о том, какие URL-адреса вызывают ошибки 404 и укажут источник ссылки. GoogleTag Manager 404 отслеживание - 4 Теперь вы можете регулярно отслеживать ошибки 404 и предпринимать необходимые шаги для минимизации их возникновения. При этом оптимизируйте свои реферальные источники и обеспечьте лучший пользовательский опыт, сохраняя конверсию и вовлечение пользователей.

Что делать с результатами Google Analytics

Теперь, когда вы знаете, как отслеживать ошибки 404, что делать разработчику? Основным результатом отслеживания событий 404 является поиск паттернов, которые приводят к этим ошибкам. Эти данные должны помочь вам определить намерения пользователя и понять, чего он хочет. В идеале вы увидите тенденции в том, что приводит людей на вашу страницу 404, и сможете применить эти знания для соответствующей настройки сайта. Если посетители вашего сайта испытывают проблему при поиске страницы, воспользуйтесь возможностью создать контент, который заполняет эту дыру. Таким образом, люди получают результаты, которых раньше не видели на вашем сайте. Событий 404 можно избежать путем настройки дизайна вашего сайта. Убедитесь, что навигация на страницах понятна и направляет пользователей к логическим конечным точкам. Возможно придется изменить описание на странице, чтобы нарисовать более четкую картину для пользователей.

Все вместе

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


Перевод статьи Shelby Rogers

Топ коментарі (0)