Какой должна быть страница «404», чтобы удержать пользователя на сайте | OTUS
Прямо сейчас идет открытый вебинар «Машинное обучение на службе Data Science» . Присоединяйтесь!

Какой должна быть страница «404», чтобы удержать пользователя на сайте

Плюс грамотная страница ошибки «Page was not found» поможет не только удержать, но и расположить пользователя к вашей компании.

статья_7-1801-8a7344.jfif

Старший UX/UI-дизайнер https://sibdev.pro/ Артём Петухов поделился подборкой интересных страниц ошибки «404» и рассказал, почему с них стоит брать пример.

статья_8-1801-03f228.jfif

Артём Петухов, UX/UI-дизайнер Sibdev

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

Положительная эмоция

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

Кинопоиск использует кадры из известных фильмов. Это очень простое и современное решение. Мне, например, нравится кадр с Рональдом Уизли из фильма про Гарри Поттера. Заставляет улыбнуться, не правда ли? :)

статья_9-1801-f5f20a.jfif

https://www.kinopoisk.ru/404/

Иллюстрации

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

статья_10-1801-b1fe00.jfif

https://dribbble.com/404

Помощь

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

Если у вас есть поиск по сайту, это тот самый момент, когда его стоит предложить пользователю напрямую. И приправьте это всё ссылками на главные разделы сайта для быстрого доступа, как это сделали в Apple.

статья_11-1801-a9c1d9.jfif

https://www.apple.com/ru/404/

Простота

Старайтесь не нагружать пользователя лишней информацией. Чем проще, тем лучше. За самое лаконичное решение приз достается Google, впрочем, как всегда.

статья_12-1801-39eafa.jfif

http://google.ru/404/

Интерактив

Позвольте пользователю стать частью вашего сайта. Интересные, креативные решения могут увлечь вашего пользователя настолько, что он вовсе забудет, что он искал 5 минут назад… Так, о чём это я… Ах да!

За возможность поиграться с вектором большое спасибо Figma.

статья_13-1801-44834d.jfif

https://www.figma.com/404/

Классика

В интернете существует уже тысячи крутых решений для страницы 404. Вот, например, классический вариант. Пользователям Windows обязательно понравится. По крайней мере, я точно оценил. #windows_живи

статья_14-1801-9e19f9.jfif

Стилистика

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

1_статья-1801-8b0eab.jpg

https://sibdev.pro/404/

Данный материал подготовлен веб-студией https://sibdev.pro/ — местом в сердце Сибири, где мы разрабатываем кастомные веб-сервисы и веб-приложения. Специализируемся на frontend, backend, верстке, дизайне интерфейсов, SPA.

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться
Популярное
Сегодня тут пусто