Страница 404 для сайта 👉 Чек-лист правильного оформления и дизайна с примерами — Ant-Team
Содержание- Зачем оформлять страницу 404 Not Found?
- Как оформить страницу ошибки
- Шапка и футер — оставляем?
- Создаем блок с ошибкой 404
- Текст для страницы с ошибкой 404
- Элементы навигации
- Основные рекомендации
- Блок-схема
- Итоги и бонусы
Нет времени читать?
Отправить статью на почтуВ этой статье мы расскажем, почему стоит делать уникальную страницу 404 для сайта и как правильно её оформлять.
Покажем удачные и неудачные примеры оформления таких страниц.
В конце статьи вас ждет бесплатный чек-лист и шаблон технического задания на дизайн страницы с 404-ой ошибкой.
Зачем оформлять страницу 404 Not Found?
Существует 2 основные причины появления 404-ой ошибки:
- неправильно введён адрес ссылки;
- страница была удалена.
Пытаясь попасть на несуществующую страницу, пользователь видит ошибку 404 Not Found. Стандартная страница с 404-ой ошибкой никак не связана с вашим сайтом. Именно поэтому большинство пользователей стараются как можно скорее закрыть ее.
Вот так оставлять нельзя:
Рисунок 1. Стандартная страница 404 Not Found
Правильно оформленная страница поможет удержать на сайте заблудившихся посетителей и тем самым улучшить показатели.
Приведем пример количества посещений страницы с 404-ой ошибкой на сайтах, с которыми мы работаем.
Сайт 1:
- 1 143 477 просмотров сайта за год;
- 42 114 просмотров страницы 404 за год (или 3,85%).
Приведем для сравнения такие цифры: у самого популярного раздела каталога 218 011 просмотров за год (19%), что всего в 5 раз превышает количество просмотров 404-ой страницы. А у раздела, который находится на 6 месте по количеству просмотров за год, эта цифра составляет 14 935 просмотров (или 1,3%), что в 3 раза меньше, чем у страницы 404.
Сайт 2:
- 64 625 просмотров сайта за год;
- 547 просмотров страницы 404 за год (или 0,84%).
Из 11 разделов на сайте целых 4 раздела имеют меньше просмотров, чем страница 404.
Только представьте, какое большое количество посетителей сайта попадает на страницу 404-ой ошибки, и в ваших силах удержать и заинтересовать их.
При желании вы можете проверить свой сайт на количество посещений страницы с 404-ой ошибкой через Яндекс.Метрику. Как это сделать, подробно описано в инструкции от Яндекса.
Как оформить страницу ошибки
Существует 5 вариантов:
1. Оставить стандартную страницу ошибки браузера.
Но ведь мир и так довольно жесток 🙁
Рисунок 2. Мем
2. Сделать страницу креативной и интересной:
Gif 1. Страница 404 с анимацией с сайта https://rabota.gk-rte.ru/404
На странице 404-ой ошибки посетитель видит анимацию с отсчетом времени до столкновения. В итоге столкновение, конечно, не происходит, но пользователь может задержаться на странице из интереса, чтобы увидеть, чем все закончится. Это, в свою очередь, улучшает поведенческие факторы — увеличивается время на сайте и уменьшается показатель отказов.
3. Сделать страницу полезной для посетителя, помочь ему найти нужную информацию:
Рисунок 3. Страница 404 с полезным контентом с сайта https://drarthurkhristenko.ru/404
Попадая на несуществующую страницу на сайте пластического хирурга, посетитель видит основные услуги, которые оказывает доктор.
4. Совместить предыдущие 2 варианта:
Рисунок 4. Страница 404 с полезным контентом и креативом с сайта https://www.
coca-cola.ru/404
Отличный пример совмещения креатива и полезной для посетителя информации на сайте Coca-cola.
Наша рекомендация: используйте именно такой вариант при оформлении страницы с 404-ой ошибкой.
5. Использовать промокод на скидку:
Рисунок 5. Страница 404 с промокодом с сайта https://www.planeta-sport.ru/404/
Хороший пример совмещения креатива и промокода на скидку в спортивном интернет-магазине. Это красивое “извинение” за то, что страницы не существует. В итоге вместо досады или раздражения у пользователя появится дополнительный стимул сделать у вас покупку.
Рисунок 6. Мем
Шапка и футер — оставляем?
Если пользователь знаком с вашим сайтом, то попав на страницу 404, внешне отличающуюся от самого сайта, он решит, что попал не по адресу, и уйдёт. Или перейдёт на главную, а резкая разница в цвете и общем оформлении доставит ему неприятные эмоции. Оба варианта — так себе.
Наша рекомендация: оставить шапку и футер при оформлении страницы с 404-ой ошибкой.
Тем более так рекомендует Google:
“Страница 404 должна быть выполнена в том же стиле (включая элементы навигации), что и основной сайт.” — Google.
Создаем блок с ошибкой 404
Это этап креатива. Подумайте над интересным оформлением. Можно взять за основу сферу вашего бизнеса: какие услуги вы оказываете, что продаете.
Рисунок 7. Пример 404-ой страницы на сайте https://kolesa.kz/404/
Сайт по продаже автомобилей использует оригинальную фразу “Докатились” и тут же предлагает посмотреть объявления. Из минусов здесь можно отметить тёмный фон, так как на основном сайте он светлый.
Рисунок 8. Пример 404-ой страницы на сайте https://www.pixar.com/404
* Перевод: “Не плачь. Это всего лишь 404 ошибка. То, что ты ищешь, могло переместиться в долгосрочную память.”
Рисунок 9. Пример 404-ой страницы на сайте https://www.lego.com/ru-ru/404
Рисунок 10. Пример 404-ой страницы на сайте https://www.
f1news.ru/404/
Если не получается придумать интересный дизайн, опираясь на деятельность вашего сайта, то рекомендуем использовать минимализм (да простят нас дизайнеры), как на примерах ниже.
Рисунок 11. Пример 404-ой страницы на сайте https://www.tinkoff.ru/404/
Рисунок 12. Пример 404-ой страницы на сайте https://www.aviasales.ru/404
Рисунок 13. Пример 404-ой страницы на сайте https://www.kinopoisk.ru/404/
Определившись с идеей оформления, не забывайте, что дизайн страницы с 404-ой ошибкой должен быть выполнен в общей стилистике самого сайта.
И не стоит делать этот блок слишком большим, выходя за пределы первого экрана. Вряд ли посетитель этой страницы захочет прокручивать экран вниз.
Текст для страницы с ошибкой 404
Пользователю должно быть понятно, что запрашиваемая страница недоступна. Наша задача — помочь ему быстро сориентироваться. На этом этапе составьте сообщение, которое не вызовет отторжения.
Примеры:
- Извините, такой страницы у нас нет.
Мы поможем найти нужную информацию. - Извините, такой страницы у нас нет. Но есть много другой полезной информации.
Элементы навигации
Google рекомендует разместить на странице 404-ой ошибки ссылки на самые популярные статьи или записи блога, а также на главную страницу.
Если ваш сайт предоставляет услуги или продаёт товары, то добавьте ссылку на каталог и основные услуги/товары.
Рисунок 14. Пример 404-ой страницы на сайте https://www.mann-ivanov-ferber.ru/404/
Если на вашем сайте есть блог, то добавьте ссылку на сам блог и на самые популярные статьи.
Рисунок 15. Пример 404-ой страницы на сайте https://www.nytimes.com/404
Например, The New York Times добавил на страницу 404-ой ошибки самые популярные статьи, которыми чаще всего делятся их читатели.
Возможность сообщить о неработающей ссылке
Дайте посетителю возможность пожаловаться на неработающую ссылку. Вы можете не отвечать на эти сообщения, но сделайте такой функционал.
Опишите в техническом задании для программистов, как должна работать эта кнопка. Добавьте ссылку на сайт, где есть та функция, которую вы хотите повторить.
Если это будет всплывающая форма заявки, то опишите дизайнеру, как она должна выглядеть.
Рисунок 16. Пример отработки кнопки “Сообщить о нерабочей ссылке” со страницы https://enjoyme.ru/404/
Основные рекомендации
Резюмируем основные рекомендации из данной статьи:
- Оформите страницу 404 в том же стиле, что и весь сайт. Это касается элементов навигации, шрифта, цвета.
- Подготовьте понятный и короткий текст, который не вызовет отторжения у пользователя. Ему должно быть ясно, что запрашиваемая страница недоступна.
- Добавьте креатив в оформление, чтобы удержать посетителя на сайте.
- Добавьте ссылки на главную страницу, основные категории и услуги, а также на самые популярные статьи или записи блога.
- Вся информация должна помещаться на первом экране. Нет смысла добавлять больше: вряд ли посетитель страницы 404 будет скроллить вниз.
- Дайте пользователю возможность сообщать о неработающих ссылках, даже если не собираетесь проверять эти сообщения.
Блок-схема
Как только вы определитесь с оформлением, нужно нарисовать блок-схему.
И не забудьте подробно описать в техническом задании, как должен выглядеть каждый элемент.
Если вы никогда не составляли блок-схемы или хотите получить больше информации об их составлении, то рекомендуем прочитать нашу статью “Как сделать ТЗ на дизайн сайта бесплатно самому: подробная инструкция”.
Рисунок 17. Пример составленной блок-схемы для 404 страницы Ant-team.ru
Итоги и бонусыСтраница 404 должна выполнять 2 действия: удерживать посетителя на сайте и давать ему самую популярную и полезную информацию, благодаря которой он будет дальше путешествовать по сайту и создавать трафик.
И чтобы процесс создания страницы с 404-ой ошибкой не принес вам лишней головной боли, предлагаем воспользоваться нашим чек-листом и шаблоном технического задания, где подробно описан каждый шаг (читайте красный текст):
- Чек-лист на дизайн для страницы 404
- Шаблон ТЗ на дизайн для страницы 404
А чтобы было ещё понятнее, можете воспользоваться примером заполнения шаблона ТЗ и нарисованной блок-схемой:
- Пример ТЗ на дизайн для страницы 404 Ant-Team
- Блок-схема 404 Ant-Team
Это настоящее техническое задание, которое мы заполняли для нашей страницы 404-ой ошибки.
P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых материалов.
При написании статьи использованы источники:
- https://developers.google.com/search/docs/advanced/crawling/soft-404-errors?hl=ru&visit_id=637885645086554669-667034082&rd=1#93641
- https://yandex.ru/support/metrica/stand-out/informative-page-404.html#informative-page-404
Заявка принята
Мы свяжемся с вами в ближайшее время и обсудим возможности для продвижения вашего сайта.
Остались вопросы или хотите заказать продвижение?
Имя
Адрес сайта
Я ознакомлен и согласен с Политикой в отношении обработки персональных данных
Спасибо, что подписались на рассылку!
Мы будем отправлять вам только полезный контент не чаще 2 раз в месяц.
Подпишитесь на рассылку
Мы будем отправлять вам письма с самыми интересными и полезными статьями 2 раза в месяц.
Имя
Ваша почта
Я ознакомлен и согласен с Политикой в отношении обработки персональных данных
Оформление страницы 404 Not Found: примеры дизайнов
Автор: Интернет Хостинг Центр
В процессе интернет-серфинга мы часто сталкиваемся с ошибкой 404 (Error 404 Not Found). Этот код означает, что на сайте нет страницы с таким адресом. Проблема может возникнуть по нескольким причинам: пользователь ввел неверный URL, информация была перемещена на другой веб-адрес, страницу удалили, произошел сбой на сервере. Чем крупнее ресурс и чем больше на нем веб-страниц, тем сложнее уследить за корректностью ссылок внутри него. Посетители натыкаются на ответ 404 и спешно покидают сайт, не найдя того, что искали. Это плохо влияет на показатели SEO. Избавиться от этой ошибки нельзя, но можно оформить ее так, чтобы она работала на вас. В статье мы расскажем, зачем и как это делают разные веб-проекты.
Зачем оформлять страницу 404 Not Found
Если кратко, оформление 404 страницы нужно, чтобы уменьшить процент пользовательских отказов. Стандартное сообщение об ошибке отталкивает посетителя — увидев его, он сразу же закрывает вкладку в браузере или возвращается на предыдущий адрес (например, в поиск). Системы фиксируют время пребывания человека на вашем сайте, и такое поведение воспринимается как отказ: пользователю здесь неинтересно, значит, надо давать в выдаче другие ссылки. Поскольку полностью исключить возможность появления 404-го кода нельзя, остается лишь по максимуму оптимизировать его, чтобы трафик задерживался подольше. Для этого нужно придумать интересное оформление, которое зацепит внимание и не отпугнет клиента.
Кроме того, это хороший маркетинговый ход, чтобы предложить посетителю свои услуги/товары/контент взамен веб-страницы, которая не открылась. Главное, сделать это правильно.
Рекомендации по оформлению страницы 404
Стандартное оформление страницы 404 плохо тем, что оставляет человека с проблемой один на один. Она не выглядит, как часть сайта, а создает впечатление, будто что-то сломалось и тебя занесло в глубокие дебри интернета. Нет объяснения, что произошло, нет вариантов решения — только белый экран с маленькой надписью.
Чтобы вызвать у пользователя интерес, вам нужно исправить эти недочеты. И желательно — подойти к вопросу креативно. Строгих правил тут нет, но необходимо учесть два важных момента:
- Ваша цель — удержать внимание, но не захватить его полностью. Не стоит добавлять слишком увлекательные мини-игры или создавать целый лендинг.
- Посетитель попал сюда по ошибке, но он что-то искал, поэтому не забудьте помочь ему «выбраться».
Ниже мы дадим еще несколько рекомендаций, которые помогут вам оформить сообщение об ошибке должным образом.
Шапка и футер
Поскольку перед нами стоит задача успокоить пользователя, необходимо сразу показать ему, что он находится на том же сайте, где и был. Для этого в оформлении ошибки 404 должны присутствовать элементы, которые присутствуют и на всех остальных страницах: шапка и подвал. Экспериментировать с ними не нужно. Лучше просто добавить готовые блоки сверху и снизу, чтобы не образовался резкий контраст при переходе. В идеале все должно выглядеть так, будто человек просто зашел в очередной раздел веб-ресурса, где структура документа ничем не отличается от предыдущих.
Разумеется, это не обязательное требование. Соблюдать его или нет — дело ваше, многим интернет-проектам удается оформить 404-й код без переноса этих элементов.
Если в общем связь с вашим ресурсом угадывается, можно обойтись без них.
Текст для страницы
Допустим, пользователь понял, что он все еще на нашем веб-сайте. Но ему по-прежнему нужны хоть какие-то объяснения произошедшего. От вас не требуется расписывать технические тонкости возникновения ошибки и устраивать ликбез. Мы в принципе не рекомендуем вдаваться в подробности. Только если у вас не блог, посвященный изучению работы серверов. В остальных случаях лучше общаться с посетителем на простом и понятном языке: извиниться, сказать, что страница не найдена, выразить намерение помочь. Для этого достаточно всего нескольких фраз. Можно также попросить пользователя проверить корректность URL-адреса.
Вариантов текста очень много, необязательно останавливаться на чем-то стандартном. Главное — донести смысл. Вы лучше знаете свою аудиторию и на каком языке она разговаривает. Используйте это знание, чтобы содержание веб-страницы с ошибкой соответствовало и оформлению самого сайта.
Элементы навигации
Самое важное при оформлении страницы 404 — не делать ее тупиковой. Ваш клиент понимает, что произошла ошибка, и в конце концов он решит перейти в другое место. Настройте документ так, чтобы этим местом стал ваш сайт, а не поисковая выдача. Добавьте ссылку на главную страницу, предложите посетить популярные разделы:
- если есть блог, сошлитесь на интересные статьи;
- если у вас интернет-магазин, оставьте ссылки на товары в каталоге;
- если оказываете услуги, сделайте переходы на веб-страницы, где их можно заказать.
Вы могли подумать, что проще сразу сделать перенаправление на главную, но с точки зрения юзабилити это не совсем грамотное решение. Вам необходимо объяснить пользователю, что он ошибся адресом, иначе человек снова попробует попасть на несуществующую страницу.
А это не нужно ни ему, ни вашему серверу.
Дизайн в стиле сайта
Наконец, мы дошли до основной части: дизайна. Здесь, что называется, полный карт-бланш. Но тоже не без нюансов. Страница ошибки не должна выбиваться из общего стиля вашего веб-ресурса, иначе есть риск запутать посетителя. Пусть дизайнеры подумают над тем, как можно органично вписать ее в существующий концепт. Можно взять за основу сферу деятельности компании и придумать подходящую иллюстрацию, можно подойти к вопросу с юмором или, если это неуместно, отдать предпочтение минимализму. Обычно найти решение нетрудно — особенно, если посмотреть, как к созданию «ненайденной» веб-страницы подошли другие представители ниши. Изображения, видео, анимированные иллюстрации, квизы, мини-игры или строгий минималистичный текст в стилистике бренда — выбирайте, что вам больше по душе, но старайтесь выдерживать единое оформление.
Примеры дизайнов 404 страницы
Как мы уже сказали, если изучить оформление чужих 404-х страниц, то отыскать собственное решение будет гораздо проще.
Мы собрали несколько разнообразных примеров, чтобы показать вам, как может выглядеть результат при соблюдении всех правил или только нескольких. Возможно, какой-то из них натолкнет вас на нужную мысль.
Интернет Хостинг Центр
Как провайдеру хостинга, нам важно, чтобы пользователи могли без проблем получить информацию о наших услугах. Поэтому страницу 404 мы оформили в виде небольшого путеводителя, который подсказывает, где можно найти те или иные сведения.
Обратите внимание, что оформление выполнено в том же стиле, что и основной сайт. При наведении на цветные квадраты можно увидеть надпись «404».
Яндекс
В Яндексе 404-ю ошибку оформили довольно минималистично:
Здесь нет иллюстраций, однако присутствует главный элемент, по которому связь с поиском легко читается — собственно, сама поисковая строка.
При этом есть и текст, четко обозначающий проблему, и навигация с ссылками на популярные сервисы компании.
Дзен
Контент-платформа подошла к вопросу более неформально:
Интересная иллюстрация приковывает внимание, а шутливая надпись намекает, что, возможно, когда-нибудь пользователи Дзена создадут страницу с таким адресом. Здесь нет хэдера и подвала, потому что его нет и на самой площадке. Но зато есть ссылки на главную страницу.
VK
С маскотом Вконтакте знакомы все, поэтому использовать его для оформления ошибки 404 было логичнее всего:
Соцсеть кратко сообщает, в чем проблема, и с помощью неочевидной, но огромной кнопки в виде собаки отсылает пользователя на главную.
Плюсофон
Облачная телефонная платформа оформила веб-страницу относительно строго, поскольку ее целевая аудитория — это представители бизнеса.
Шапка и подвал на месте, объяснение дано, ссылки проставлены. Все просто и понятно.
Заключение
К оформлению страницы 404 не предъявляют особых требований, но если вы хотите извлечь из нее пользу, не пренебрегайте советами, которые мы дали. Помните, что важнее всего — вызвать доверие пользователя.
10 Примеры страниц ошибки 404 для дизайна UX
Эти примеры страниц 404 показывают, как дизайнеры могут превратить простую вычислительную ошибку в фирменный пользовательский интерфейс (UX).
Первые модели персональных компьютеров имели 64 КБ ОЗУ или меньше. Программистам нужно было упрощать. Они разработали систему классификации программных функций. Ошибки ввода были отнесены к классу 400.
Имеется четыре ошибки ввода класса 400.
- 400 Неверный запрос .
Ввод имеет неправильный синтаксис. - 401 Неавторизованный . Пользователь не может получить доступ без имени пользователя и пароля.
- 403 Запрещено . У пользователя нет прав доступа к файлу.
- 404 Не найдено . Пользователь ввел несуществующий URL-адрес или сделал ссылку на него.
Раньше пользователям приходилось вводить точный URL-адрес. Например, если вы хотели посетить Yahoo Finance, вам нужно было ввести полный URL-адрес: http://www.finance.yahoo.com
. г получить код ошибки 400 или 404.
В настоящее время браузеры позволяют вводить сокращенный адрес, например www.finance.yahoo.com или даже Finance.yahoo.com . На самом деле, если вы введете в строку поиска полный адрес с синтаксисом, как в примере выше, браузер вас перенаправит.
Почему? Потому что это старый синтаксис, использующий HTTP. Обновленный сайт имеет более безопасный URL-адрес с использованием HTTPS.
Последние версии браузеров автоматически вносят исправления.
Ошибка 404 теперь является целевой страницей, на которой вы можете поощрять пользователей продолжать использовать ваш веб-сайт. Ваш дизайн страницы 404 должен удерживать пользователя от ухода.
Вот некоторые элементы, которые вы могли бы использовать:
- Гиперссылки на домашнюю страницу и другие полезные страницы.
- Строка поиска.
- Графические элементы, отражающие бренд сайта.
- Краткое сообщение пользователю фирменным голосом.
В этих примерах страниц 404 мы рассмотрим, как разные бренды используют эти элементы UX.
Примеры страницы 404: ссылка на главную страницу UXPinСначала мы рассмотрим нашу собственную страницу 404.
Как видите, мы любим простоту. У нас много пустого пространства вокруг графики космической тематики. Сообщение простое: «Привет, капитан! Похоже, вы направляетесь не на ту планету!»
Мы включили кнопку призыва к действию (CTA), которая возвращает пользователя на домашнюю страницу.
Страница Google 404 также очень проста и имеет много пробелов.
«Запрошенный URL-адрес не найден на этом сервере. Это все, что мы знаем.»
Изображение сломанного робота отражает их высокотехнологичный бренд. Там нет CTA, и вы обнаружите, что логотип Google является ссылкой на домашнюю страницу, только если вы наведете указатель мыши.
Многие UX-райтеры скажут вам, что отказ от CTA — это большой запрет, и в большинстве случаев это так. Помните, вы хотите, чтобы посетители продолжали использовать ваш сайт.
Google является исключением, потому что они знают, что их посетители всегда вернутся.
404 Примеры страниц: полезные ссылки на страницы AngiЭтот сайт, ранее называвшийся HomeAdvisor, содержит множество ссылок на другие полезные страницы.
Сообщение пользователю простое:
«Да, это неловко…
«Страница, которую вы ищете, была перемещена, удалена или не существует.
Приносим извинения за неудобства».
CTA — это список ссылок на рекомендуемые страницы.
В шапке у вас также есть ссылки на виды домашних услуг и сообщения в блогах.
В нижнем колонтитуле есть ссылки для поиска услуг в крупных мегаполисах, таких как Нью-Йорк, Чикаго, Лос-Анджелес и Даллас. Другие полезные ссылки также находятся в футере.
Анги держит все «вверху». То есть вам не нужно прокручивать, чтобы перейти к любой из ссылок.
StarbucksВ Starbucks 404 изображение кофейного кольца там, где раньше была чашка, выступает как метафора страницы, которой здесь нет.
Он предлагает объяснение того, что могло пойти не так, и некоторые предложения о том, что делать дальше.
В нем есть ссылка, по которой посетители могут сообщить о неработающих ссылках.
Glassdoor.comГлядя на страницу 404 Glassdoor, популярная доска объявлений предлагает несколько действий.
- Поиск работы.
- Читайте отзывы сотрудников о компаниях.
- Просмотр зарплат сотрудников.
- См. вопросы и ответы на собеседовании.
- Посмотрите рейтинги лучших мест для работы.
Фотография ребенка в зимнем пальто с капюшоном, надвинутым на глаза, является центром страницы 404 eBay.
«Мы искали везде».
«Похоже, эта страница отсутствует. Если вам все еще нужна помощь, посетите наши справочные страницы».
Ниже находится кнопка CTA, которая ведет посетителя на домашнюю страницу eBay.
Внизу страницы находится полоса прокрутки с актуальными предложениями.
Lego Когда вы попадаете на эту страницу 404, вы видите Эммета из The Lego Movie . Его цитируют: «Все по-прежнему замечательно». Примеры страниц 404: вращающиеся элементы На нем есть фотография одной из «собак Амазонки».
Он ссылается на страницу новостей Amazon о рабочем месте Amazon, дружественном к собакам.
Если вы обновите страницу, появится изображение другой собаки-амазонки. Обновите несколько раз, и вы увидите много случайных фотографий собак. Мы не знаем, сколько их на странице 404, но на Amazon «работают» более 7000 собак.
Комиксы MarvelКак и Amazon, Marvel чередует несколько версий страницы 404. Они показывают изображения из вселенной Marvel Comics с такими сообщениями, как:
- «Отсутствует протокол… Выход из программы…»
- «Гидра в настоящее время атакует эту страницу!»
- «$#&%, ты что-то сломал! Просто шучу.»
- «Даже глаз Нуату не видит твоей просьбы».
- «Гидра украла эту страницу из архива Щ.И.Т. база данных!»
Еще одна вращающаяся страница 404 из Международной базы данных фильмов (IMDB). Они остаются на бренде и знакомят своих поклонников, предлагая цитаты из фильмов.
- «Веб-страницы? Там, куда мы идем, нам не нужны веб-страницы». – Доктор Эммет Браун, 9 лет.0031 Назад в будущее .
- «Когда-нибудь мы найдем… связь с сайтом». — Лягушка Кермит, Маппет-фильм .
- «Конечно, вы несерьезны». «Я серьезно. И не называй меня Ширли. – Тед Страйкер и Раммак, Самолет .
- «То, что у нас здесь… это отсутствие связи». — Капитан, Хладнокровный Люк .
- «Страница не найдена? НЕВЕРОЯТНО!» – Виццини, Принцесса-невеста .
- «У меня такое чувство, что мы больше не в Канзасе». – Дороти, 9 лет0031 Волшебник страны Оз .
Прототип вашей страницы 404 в UXPin
UXPin — это полнофункциональная программа для проектирования UX/UI, которая дает вам инструменты для реализации любого проекта от концепции до запуска продукта в одном приложении.
При разработке страницы 404 вы можете поделиться ею с соавторами и заинтересованными сторонами в режиме реального времени прямо с платформы.
Они могут добавлять свои комментарии, чтобы сделать итерации более плавными, вместо множества переписки по электронной почте. Начните бесплатную пробную версию сегодня.
Нашли это полезным? Поделиться с
UXPin — это платформа для разработки продуктов, которую используют лучшие дизайнеры планеты. Пусть ваша команда легко проектируйте, сотрудничайте и презентуйте от низкоточных каркасов до полностью интерактивных прототипов.
Начните бесплатный пробный период
Определите возможности и вызовы для увеличения влияния систем проектирования и DesignOps на предприятия.
Скачать электронную книгу бесплатно
Подписывайтесь на нашу новостную рассылку
- Бесплатно Электронные книги
- Бесплатные комплекты пользовательского интерфейса
- Изделия для дизайна
Мы бережно защищаем ваши данные — как описано в Политике конфиденциальности.
Окончательный контент
электронные книги Блоги Вебинары- Конфиденциальность
- © 2010 — 2023 UXPin Sp.
о.о.
Эти страницы с ошибкой 404 легендарны
Джины Армстронг, графического дизайнера
Фото Айлы Вершурен с сайта Unsplash с «404 — Страница не найдена».
Сообщение об ошибке означает, что либо ссылка не работает, либо ее никогда не существовало, либо она содержит опечатку.
Эти ситуации определенно могут раздражать пользователя, но один из способов справиться с этим разочарованием — создать уникальную страницу 404.
Дизайн страницы 404
При создании креативной страницы 404 можно выбрать множество направлений: мини-игры, интерактивные инструменты, юмористические изображения и полезные ссылки — вот лишь несколько примеров. Цель состоит в том, чтобы разработать страницу, которая побуждает пользователей продолжать взаимодействие с сайтом, а не уходить с него.
Независимо от того, какой маршрут вы выберете, важно убедиться, что и ваши изображения, и текст относятся к бренду, и что вы предоставляете путь к альтернативным страницам.
Ознакомьтесь с пятью примерами уникальных и эффективных страниц 404:
1) Figma
Figma — редактор векторной графики и инструмент для создания прототипов, используемый для дизайна веб-сайтов.
В качестве программного обеспечения для дизайна очень характерно, что страница 404 структурирована как интерактивный инструмент дизайна.
Здесь вы можете играть с точками вектора в тексте, изменяя форму и размер «404». Это увлекательно, что помогает смягчить разочарование от того, что вы попали на неработающую страницу. На странице также есть навигация по меню и обширный нижний колонтитул, поэтому они могут легко вернуться на домашнюю страницу.
2) Unsplash
Unsplash может похвастаться еще одним прекрасным примером продуманного и фирменного выбора страницы 404. На странице 404 сайта Unsplash, бесплатном с фотографиями, представлены фотографии, созданные пользователями.
Они также наложили жуткий элемент, где ваш курсор работает как фонарик, освещая только небольшие части фотографии за раз.
В остальном страница минималистична, с заслугой фотографа и одной кнопкой, обеспечивающей обратный путь на домашнюю страницу.
3) Dribble
Dribble — сайт-портфолио для дизайнеров с красочной страницей 404. На странице представлены популярные дизайны всех цветов радуги. Вы можете отрегулировать ползунок цвета, чтобы увидеть новый набор рекомендуемых дизайнов, и щелкнуть любой из дизайнов, чтобы рассмотреть его поближе.
Это фантастическое интерактивное решение, побуждающее пользователей оставаться на сайте.
Они также предлагают ряд полезных опций для пользователя, включая ссылку на домашнюю страницу, контактную кнопку и панель поиска.
4) Дискорд
Это весело. Discord — это бесплатное приложение для голосового, видео и текстового чата с отличной страницей 404. На первый взгляд, вы попали на статическую страницу со ссылками для получения помощи. Тем не менее, есть забавное маленькое пасхальное яйцо, если вы его найдете! Затем появляется оверлей с ретро-игрой Snake, в которую вы можете играть.
С забавной гифкой, юмористической подписью, возвратом к Волшебнику страны Оз и мини-игрой креативность зашкаливает. Кроме того, кто не любит Снейка?
5) ASPCA
В этом последнем примере Американское общество по предотвращению жестокого обращения с животными (ASPCA) демонстрирует более простое решение на 404 страницах.
С симпатичной фотографией кота, который тянется к вам, и копией для конкретного бренда вам предлагается помочь одним из трех способов; пожертвуйте, примите меры или приютите домашнее животное.
Навигация по главному меню также по-прежнему доступна, если вы хотите изучить другие страницы.
Проявите творческий подход
Надеюсь, эти примеры вдохновят вас отказаться от этой скучной страницы 404 (или перенаправить на домашнюю страницу, что сбивает с толку и разочаровывает пользователей) и создать что-то действительно уникальное.
Независимо от вашего бренда или отрасли, все стремятся к тому, чтобы у пользователей была простая навигация и общее положительное впечатление от вашего веб-сайта.
