Разработка интуитивно понятных и удобных страниц 404

Все мы хоть раз сталкивались со страницей 404.

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

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

Готовы узнать, как превратить плохое в хорошее? Давайте выясним это.

Настройте страницу 404 для своего сайта

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

Немного пробуждения, не так ли?

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

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

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

Объясните, что произошло

Если мы посмотрим на страницу 404 по умолчанию под Apache, мы увидим следующее:

Вот и все. Пользователь понятия не имеет, что на самом деле произошло и что делать дальше.

Поскольку вы заботитесь о своих клиентах и ​​хотите избавиться от любого неприятного опыта, объясните ошибку. Основными причинами ошибки 404 обычно являются:

• Пользователь что-то опечатался,
• Ссылка битая,
• Страница не существует,
• Связь с сервером разорвана.

Конечно, вам не нужно перечислять все вышеперечисленные проблемы. Просто убедитесь, что ваше объяснение понятно.

Если честно рассказать о проблеме, вы покорите пользователей и побудите их остаться на сайте и продолжить просмотр.

Создайте привлекательное сообщение

Страница 404 — это отличный шанс для бренда продемонстрировать свою индивидуальность с помощью хорошо продуманного сообщения.

Лучшие 404-страничные примеры часто содержат:

• Каламбуры
• Сообщение, связанное с продуктами или услугами сайта
• Личное обращение,
• Отсылки к поп-культуре и узнаваемым событиям.

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

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

Предложить действие

Призыв к действию действительно важен и абсолютно необходим для дизайна страницы 404.

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

Некоторые из самых популярных CTA для страницы 404:

• панель поиска
• домашняя страница
• топ-товары/услуги
• подписаться на продукт или информационный бюллетень
• предложение бесплатного пробного периода

Обратите внимание на дизайн кнопок CTA. Они должны быть хорошо видны и не сливаться с фоном, иначе пользователь их не заметит. Также подумайте о сообщении кнопки CTA: вместо клише типа «Нажмите здесь» используйте что-то более креативное («Посмотрите, что у нас есть»).

Добавить строку поиска

Пользователь попал на страницу 404, потому что он что-то искал. Поэтому предложите им попробовать еще раз, добавив панель поиска на страницу.

Вы можете поддержать это сообщением вроде: «Кажется, ваш запрос нигде не найден… Почему бы не попробовать еще раз?» Хорошо написанные CTA имеют высокий уровень вовлеченности и хорошо работают в сочетании с изображениями.

Также добавьте текст подсказки в строку поиска. Полоса с текстом привлекает больше внимания, чем пустая.

Добавьте точки выхода

Панели поиска на странице 404 недостаточно. Что делать, если пользователи не уверены в том, что им нужно?

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

Некоторые компании используют страницу 404 как возможность напомнить о своих товарах и услугах и разместить на странице соответствующие ссылки.

Покажите свои товары/услуги

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

Что касается других сайтов, то наверняка вы можете предложить что-то ценное своим пользователям. Это может быть бесплатная пробная версия продукта, предложение записаться на курс или путеводитель по полезным разделам сайта.

Сделать это весело

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

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

Отслеживание ошибки 404

Ошибка 404 не касается пользователя. Но ваша задача отследить его и выявить причину ошибки и путь пользователя.

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

Рассмотрим все источники ошибок 404.

Ошибка 404 не обязательно может быть на вашем сайте — клиент может открыть старую рассылку и перейти по ссылке или она может появиться в результатах поиска в Google.

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

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

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

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

Как только вы увидите, как ошибки 404 влияют на ваш бизнес, вам будет проще расставить приоритеты для ваших задач и переместить ошибки 404 вверх или вниз по списку.

Постоянный мониторинг

Ошибка 404 — это не то, что происходит регулярно. Может случиться так, что у вас все отлично, а потом вдруг пользователь получает 404.

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

Типы инструментов отслеживания

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

Инструменты сканирования

Инструменты сканирования, такие как Screaming Frog, идеально подходят для быстрого сканирования вашего веб-сайта и проверки его на наличие неработающих ссылок.

Эти инструменты анализируют ссылки вашего веб-сайта и позволяют узнать, какие из них не работают и в чем причина ошибки. Кроме того, инструменты сканирования обычно просты в управлении и установке.

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

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

Инструменты обратной ссылки

В отличие от инструментов сканирования, инструменты обратных ссылок фокусируются на внешних источниках, которые приводят пользователей к неработающим ссылкам на вашем сайте.

Link Explorer от Moz — это один из инструментов, который поможет вам найти веб-сайты, с которых пользователи переходят на ваш сайт. Такой анализ действительно полезен для вашего SEO, поскольку вы можете устранить ссылки 404 и улучшить рейтинг своего сайта.

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

Отслеживание с помощью Google Analytics

Один из наиболее распространенных и эффективных способов отслеживания ошибки 404 страницы — Google Analytics.

Для этого вам нужно скопировать этот код:

<script>  
   // Create Tracker - Send to GA
   // Replace UA-11111111-11 with your own Tracking ID
 ga('create', 'UA-11111111-11');
   ga('send', {
     hitType: 'event',
     eventCategory: '404 Response',
     eventAction: window.location.href,
     eventLabel: document.referrer
});
</script>

и добавьте его на страницу/шаблон ошибки 404. Просто не забудьте вставить идентификатор вашей учетной записи Google в код.

После этого вы сможете увидеть, какие именно URL-адреса вызывают ошибку 404 и где люди их получают.

И наконец: решите проблему!

Аварии будут и это факт. Лучше иметь красивую страницу 404 заранее, чем лихорадочно исправлять проблему, пока раздраженные пользователи ждут.

Однако 404 — это ошибка, которую необходимо исправить. В зависимости от приоритета ошибки вы можете перенаправить ссылку, восстановить страницу или исправить исходную ссылку. Также сделайте следующее:

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

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