Улучшаем дизайн 404-й страницы

Сегодня мы рассмотрим еще один важный момент в интернет-маркетинге — дизайн страницы 404.

Время от времени при посещении сайтов все мы сталкиваемся с этой страницей. Она указывает на ошибку, когда сервер не может найти данные по указанному пользователем адресу (не путать с ошибкой «сервер не найден»). 404-я страница извещает о том, что информация может быть доступна в будущем, но на данный момент по запрашиваемому адресу ее нет.

Причин выдачи 404-й страницы может быть множество: опечатки при наборе адреса, битые ссылки, файлы, которые вы ищете, были удалены или перемещены. Стоит отметить, что 404-я страница — самая узнаваемая станица об ошибке в Интернете.

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

Когда даже 404-я не найдена

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

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

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

1. Дайте возможность найти

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

Еще один хороший пример — qype.com. На нем также хорошо разработана система дополнительного поиска по категориям. Доступность навигационного меню в дополнении с тематической иллюстрацией помогают удерживать посетителя на сайте.

2. Доступно объясните

Не все пользователи интернет-пространства знают, что такое страница 404, и почему они ее видят. Доступность объяснения - одна из первостепенных задач по улучшению взаимодействия с пользователем в случае негативного результата поиска на сайте. Вот, эту идею реализовал популярный российский веб-дизайнер Артемий Лебедев на сайте tema.ru: 

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

На 404 странице сайта habrahabr.ru вас встретит забавный персонаж, доступное объяснение и возможность поиска заново:

Посмотрите, как оформлена 404-я страница на этом сайте http://pervushin.com/404:

Более подробное руководство к действию трудно и представить.

3. Увлекайте и удерживайте

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

1) Сайт фирмы Klapp (klapp.no):

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

2) Компания Audiko пошла тем же путем, удерживая внимание с помощью отлично скомпонованной тематической иллюстрации:

3) Также хорошими способами увлечения пользователей являются анимация, видео, музыкальные заставки. Хороший тому пример — proteys.info:

4. Придерживайтесь общей концепции дизайна

При попадании на 404-ю страницу среднестатистический пользователь оказывается в непривычном для себя пространстве. У него возникает масса вопросов:
- Была ли это страница сайта?
- Что я сделал не так?
- Корректно ли работает мой браузер?
- и т.д.

Разрабатывая страницу 404-й ошибки в стиле дизайна сайта, вы даете пользователю визуальный ориентир. Другими словами, информируете его о том, что он все еще на вашем сайте, но при поиске столкнулся с небольшой проблемой, которую легко может решить, например, перейдя на главную страницу. Общая концепция дизайна страницы 404 должна включать:
1. Единое с общим дизайном сайта цветовое решение;
2. Элементы фирменного стиля: геометрические формы, логотип компании и пр.

Примеры таких 404 страниц:

- med-altai.ru: тут вы найдете и логотип, и узнаваемый графический элемент фирменного стиля (медведь), и возможность начать поиск заново:

- Сайт компании Fuelly (fuelly.com): 

- 404-я страница Twitter, выдержанная в общем стиле всего сайта:

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

5. Предложите помощь

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

6. Перенаправьте

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

Вот так эта функция реализована на сайте b-red.ru:

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

Таким же образом поступили и разработчики сайта concrete5russia.ru. Они поместили на 404-ю страницу важные разделы сайта:

7. Юмор всегда работает на вас

«Отнеситесь к проблеме с юмором, и ситуация станет лучше», — так гласит народная мудрость. Юмор всегда был катализатором успешной интеракции, особенно в неприятных ситуациях. Исходя из этого, многие компании используют юмор при разработке дизайна 404-й станицы. Давайте посмотрим лучшие примеры такого дизайна:

- zanami.ru:

- На сайте southparkstudios.com дизайн 404-й станицы выдержан в стиле сайта и в духе проекта. Его отличительная особенность — постоянно меняющиеся картинки:

- На сайте mint.com 404-я страница встречает посетителей забавной надписью: “Мы искали везде, но эту страницу не смогли найти. Зато вот что мы нашли под диванными подушками”:

- На русскоязычных сайтах и шутят по-русски. Давайте посмотрим на сайт ktonanovenkogo.ru:

Такой подход к дизайну 404-й страницы подходит все фирмам независимо от их рода деятельности. Тонкость состоит в способе выражения концептуальной идеи.

Подводя итоги, хотелось бы отметить, что привлечение посетителя на сайт – это половина дела. Очень важно удержать его на ресурсе и предоставить ему необходимую информацию. Только так вы сможете превратить посетителя в счастливого клиента. 

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

А теперь хотим предложить вам несколько полезных советов по созданию 404-й страницы от дизайнера Turboseo Игоря Бенцарука:

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

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