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

0
237

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Игра

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

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

или

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Идеи по оформлению 404 страницы и работа над ошибками
или полностью разрушенной:

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

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

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

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

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

или

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

или

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

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

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

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

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

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

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

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

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

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

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

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

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

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

или

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

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

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