Работа над ошибками и идеи по оформлению 404 страницы

Иногда на сайте мы получаем страницу, информирующую пользователей об ошибке, – Not Found или «Страница не найдена». Причины для этого: либо страница удалена, либо указан неправильный ее адрес. Как правило, такая страница сопровождается цифровым кодом 404. Получается, страница ошибки является бесполезной? Или все считают, что ее никто не увидит, поэтому не стоит ею заниматься? Конструкцию 404-й страницы часто упускают из виду и недооценивают. Такую страницу вполне реально доработать и использовать. Есть два направления в разработке страницы ошибки:

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

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

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

Стоит познакомиться с хорошими примерами. Возможно, в них вы найдете решение для своей страницы ошибки. ТОП-10 «вдохновляющих страниц ошибок» и их реализация:

1. Поиск и главная страница

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

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

2. Карта сайта, раздел FAQ и форумы

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

3. Игра

Можно организовать интересное применение страницы 404, например, использовать целевую игру! Отличный способ сделать страницу ошибки просто интересной. Предусмотрите все детали вплоть до звукового сопровождения, например, 8-битной музыки. Пользователь отвлечется игрой и поднимет себе настроение. С такой страницы можно уйти на дальнейшие поиски, только если преодолеешь в себе чувство азарта. Посетитель обязательно сохранит страницу в закладки, чтобы снова вернуться и поделиться этим с друзьями. Ну или попробует ещё раз заблудиться на сайте:

или

Мы тоже заранее позаботились о своей странице 404 и добавили для пользователей небольшой лабиринт. Оцените:

4. Использовать логотип компании

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

5. Поместить сотрудников компании

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

6. Поместить персонажей и известных людей

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

7. Хорошая работа дизайнеров, проявление фантазии, смелая реализация идей

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

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

Еще одна дизайнерская задумка. Вид «сдувшейся» страницы подчёркивает её неработоспособность:

или сломанной:

или полностью разрушенной:

Уникальный подход - «Grats. You broke it», эта страница 404 отличается ещё и тем, что благодарит пользователей за ее нахождение.

8. Использование анимация. Оцените это вживую!

Удобная и акцентирующая внимание пользователей страница ошибки:

или

или

Можно приводить в движение части иллюстрации с помощью курсора мышки. Это оставит пользователей на странице ошибки надолго.

Можно даже использовать ссылки в социальные сети на странице ошибки. На следующем примере призрак не просто водит глазами при движении мышки, но и переводит в Twitter компании при клике на него.

[EPSB] А как с навигацией на вашем сайте? Проверим и дадим советы. [/EPSB]

9. Служба поддержки

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

Ранее эта страница присутствовала на сайте www.kiss.com, сейчас разработчики сайта решили поменять такой вид страницы на следующий:

10. Игнорирование деталей

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

или

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

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