UX рекомендации по проектированию страниц ошибок
Наш канал в

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

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

Читайте также: Курс по созданию дизайна страницы ошибки 404

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

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

  1. Кто вызвал проблему?
  2. Что случилось и почему это произошло?
  3. Когда это будет решено? (Это временно или постоянно?)
  4. Как я могу решить эту проблему? (Актуальные средства или получение помощи)
  5. Свяжите страницу с брендом вашей компании
  6. Добавить неожиданный восторг

1. Кто вызвал проблему?

Помните о местоимениях, которые вы используете. На кого вы ссылаетесь? Это была ошибка пользователя? Вина компании? Это также поможет вам определить, должны ли вы в качестве заголовка произносить такие слова, как «Извините» или «О-о-о!». Допустим, это страница обслуживания, тогда используйте «мы» так, как это вызвано компанией, а не пользователем.

Кто вызвал проблему? 404

2. Что случилось и почему это произошло?

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

Что случилось и почему это произошло? 404

3. Когда эта проблема будет решена?

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

«Мы скоро вернемся. Проверьте… сайт или подписывайтесь на… , чтобы получать обновления»

Страницы 404 – это постоянное состояние, а страница техобслуживания – временное.

4. Как я могу решить эту проблему?

Итак, теперь пользователи знают, что случилось и почему, но что они могут с этим поделать? Дайте им действия, которые можно совершить с помощью текста и активных ссылок. Укажите им выход или дайте что-то еще, чтобы удержать их.

 «Убедитесь, что у вас правильная ссылка, или вы можете попробовать поискать что-то другое»

  • Предложите новый контент
  • Откройте строку поиска
  • Дайте доступ к основной навигации
  • Дайте ссылки на другие популярные страницы
  • Дайте ссылку на главную страницу
Medium 404 удерживает вас, предлагая статьи
Medium удерживает вас, предлагая статьи

 «Мы не смогли найти страницу, которую вы искали. Может быть, наши FAQ или Сообщество смогут помочь?»

IDEO 404 – Предоставление пользователю действий и идей о том, куда еще пойти
IDEO – Предоставление пользователю действий и идей о том, куда еще пойти

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

«Если вам нужна помощь со срочными вопросами, отправьте нам сообщение в… или позвоните по номеру…»

Вы также можете попросить клиента оставить фидбек.

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

Смягчение для чрезвычайных ситуаций - Airbnb 503
Смягчение для чрезвычайных ситуаций – Airbnb 503

5. Свяжите страницу с брендом вашей компании или ее продуктом

Это прекрасная возможность для взаимодействия с вашими пользователями. Используйте символы компании для укрепления бренда. Facebook использовал подобный символ в виде сломанного большого пальца, а сайт Etsy основан на ремесле, поэтому девушка на странице ошибки неправильно связала свой свитер, ой.

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

Etsy 404 – Ой, ее вязание :(
Etsy – Ой, ее вязание 🙁

nasa 404 ошибка

6. Добавьте неожиданный восторг

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

Jaja 404 Kickpush 404

TLDR? Краткие выводы

Кто вызвал проблему?

  • Это была вина пользователя? Вина компании?

Что случилось и почему это произошло?

  • Что такое 404? Почему страницу нельзя найти?
  • Говорите просто и искренне

Когда это будет решено?

  • Держите людей в курсе

Как я могу решить эту проблему?

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

Свяжите страницу с брендом вашей компании

  • Усильте бренд
  • Сообщите, о чем сайт
  • Взаимодействуйте со своими пользователями

Добавить неожиданный восторг

  • Превратите негативный опыт в восхитительный.

Если считаете эту статью полезной, ставьте лайки! Если вы хотите пообщаться с автором, пишите ей в Twitter. Или вы можете подписаться на нее на Medium, чтобы получить больше статей о дизайне.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

5 UX способов начать разработку дизайна правильно

Проблема в том, что если вы работаете с не-дизайнерами, красивые экраны – то, что нужно. Вы сможете предоставить “вау-эффект” клиенту, а как этот вау-эффект будет реализовываться, уже значения не имеет. А мы все-таки предпочитаем создавать нечто в духе “Все довольны”.

OOUX: Основа дизайна взаимодействий

Свой подход “Объектно-ориентированного UX” (Object-Oriented UX – OOUX) я представил в прошлом году на A List Apart. Подход подразумевает дизайн объектов перед проработкой действий.

Полное руководство по процессу продукт-дизайна

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