Mail.ru Group corporate blog
Web design
Interfaces
7 July 2014

404 пост



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

Наш опыт

Каждый день социальной сетью Одноклассники пользуется более 40 млн человек. И примерно 150 тысяч из них натыкается на страницу 404. Доля мизерная, всего 0,37% от общего количества посетителей. Но в абсолютном выражении очень даже приличная посещаемость. «Вашу бы энергию, да в мирных целях», — подумали мы и решили с пользой использовать этот трафик. На тот момент страница 404 выглядела так:



Делать просто очередную дизайнерскую страницу смысла не было. После продолжительных раздумий в течение получаса была предложена идея благотворительной кампании в пользу WWF. Природу надо беречь — это известно со школы. Но эта тема очень обширная, многовато для несчастной 404 страницы. Поэтому мы поставили перед собой три задачи:
  • напомнить людям о вымирании редких видов животных;
  • познакомить поближе с самим Фондом охраны дикой природы WWF;
  • дать посетителям возможность сделать личный вклад в сохранение глобальной природной экосистемы.

В результате новая страница 404 стала выглядеть так:



Сверху шёл текст самой ошибки, чтобы пользователь сразу понимал, куда он попал. Рядом с логотипом Одноклассников мы разместили логотип WWF. Ниже шёл информационный блок, состоявший из фотографии представителя какого-либо вымирающего вида (была собрана небольшая подборка) и краткого описания. К тому же с этой страницы вела ссылка на официальную группу WWF в Одноклассниках. Первая и вторая поставленные задачи были решены. А ради третьей задачи мы разместили в группе WWF специальный iframe, через который посетители могли попасть на сайт самого фонда и сделать пожертвование.



Результат превзошёл наши ожидания — около 50% случайных посетителей страницы 404 переходили по ссылке в группу WWF. Этот проект длился один месяц, и на момент его окончания группа выросла до 30 тысяч человек. Более того, по данным самого WWF, в течение этого месяца пользователи Одноклассников сделали около 7% всех пожертвований. Однако в действительности эта доля была, скорее всего, заметно выше. Дело в том, что, перейдя с Одноклассников на сайт WWF, не все посетители сразу делали пожертвование. Некоторые возвращались позже, но уже напрямую, а не окольными путями.

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



Это фонд содействия в усыновлении детей-сирот. Мы сохранили такую же структуру страницы: логотип, фотография, описание. И всего за две недели, которые длился этот проект, было 18 обращений от потенциальных приёмных родителей. А первых детей усыновили уже через месяц после старта проекта.

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

У других

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



Очень экспрессивная иллюстрация, с юмором.



Тру-веб-мастера сразу скажут, что этот вариант никуда не годится. Но дизайн нам понравился.



Анимированная страница, на которой раскачивается жирный воробей азиатского происхождения.



Торжество минимализма, а также дизайна над функциональностью и полезностью.



Хороший пример функциональной, и в то же время забавной страницы.



Ещё один пример исключительно дизайнерской страницы. Стильно и красиво, а странность картинки заставляет остановиться, цепляет внимание.



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



Анимированная интерактивная страница с красивыми эффектами. Правда, тяжеловата.



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



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



Ещё один широко известный пример. С юмором, логически связан с продукцией компании, всё грамотно продумано.



Одна из лучших идей для 404 страницы. Не сразу удаётся сообразить, что это такое, даже ссылок нет. Но идея прекрасная.

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

+71
38.7k 102
Comments 34