Лучшие страницы 404 — примеры дизайна

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

Абра-кадабра!

Ребята, мне не нужны ваши инструкции и составлять заявку я не хочу. Я хочу купить то, что присмотрел… Прощайте!

Not found страницы нужны и важны как часть маркетинговой стратегии любого сайта коммерческой направленности. Если клиент может уйти из-за загрузки страницы на 0,0001 секунду дольше, чем он готов ждать, дурацкая страница 404 тем более способствует этому. Наоборот — правильно оформленная поможет понять, что случилось, где он находится в данный момент и что теперь делать.

В статье мы рассматриваем 18 примеров страниц 404, которые принадлежат сайтам с разной тематикой. Мы ставили цель показать многообразие их оформления — и удачное, и не очень удачное. И очень неудачное.

Давайте посмотрим, что получилось!

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Разберем лучшие страницы 404-ошибки

Адамас. Магазин ювелирных украшений

Страница 404 «Адамас»

Особенности

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

Личное мнение

От продавца ювелирных украшений ждешь золотые россыпи и украшения даже на странице Not Found. Интересно, что со страницы 404 здесь отправляют в коллекции (это абсолютно логично) и в статьи (!). Всем, кто занимается интернет-маркетингом, на заметку.

DNS. Интернет-магазин цифровой и бытовой техники

Страница 404 DNS

Особенности

• Графическая составляющая страницы прямо показывает, что мы на сайте DNS;
• есть кнопка с CTA «Перейти на главную«: это лучше просто ссылки;
• страница подгружает адреса магазинов вашего города.

Личное мнение

Вместо списка магазинов я бы разместил здесь каталог товаров: зачем же еще мы заходим в подобные интернет-магазины! Да и по карте путешествий пользователя большинство сначала выбирает товар, а уже потом ищет, где его купить.

Garry Print. Магазин одежды с принтами

Страница 404 Garry Print

Особенности

• Первое, на что обращаешь внимание, — информация о 50 % скидках;
• предлагаются три пути выхода с этой страницы: на главную, в каталог и на страницу создания своей крутой одежды;
• пользователям по-прежнему доступно главное меню, футер и поисковая строка для уточнения их запросов.

Личное мнение

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

Еще чуть-чуть, и я снова с вами!

Kokoc.com. Продвижение сайтов

Страница 404 Kokoc.com

Особенности

• Трудно не заметить вертикальную «404» на странице;
• пользователю доступно главное меню;
• он может перейти на главную страницу, изучить услуги компании и ее кейсы;
• форма захвата готова помочь пользователю… стать клиентом компании. Неожиданно (нет)!

Личное мнение

Только не говорите, что не увидели здесь аллюзию на фильм «Изгой» с Томом Хэнксом в главной роли. Мы никогда не забудем тебя, Уилсон!

Не время унывать. Нам с тобой еще сайты продвигать!

Infiniti. Автомобильный салон

Страница 404 Infiniti

Особенности

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

Личное мнение

Честно говоря, здесь хочется большего по размеру и смысловому наполнению изображения. Хотя едущая навстречу приключениям Infiniti Q50, конечно, внушает священный трепет.

Konsoleta. Интернет-магазин белья и купальников

Страница 404 Konsoleta

Особенности

• Наконец-то кто-то открыто пишет, что появление 404 страницы — ВНЕЗАПНО, и делает это в такой милой форме;
• пользователю доступны категории каталога, главное меню сайта и виджет обратной связи;
• тут даже порекомендуют хорошие трусы.

Личное мнение

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

Zlatoust Watch. Интернет-магазин часов

Страница 404 Zlatoust Watch

Особенности

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

Личное мнение

«Нет такой страницы» — не самая корректная формулировка проблемы. Хорошо, что можно перейти в каталог часов.

Лабиринт. Интернет-магазин книг

Страница 404 «Лабиринт»

Особенности

• Пользователю доступно главное меню сайта;
• варианты для перехода с 404 страницы — это скидки и подарки, а также главные книги по мнению редакции;
• маркетологи «Лабиринта» не зря едят свой хлеб. Даже 404 страница активно продает.

Личное мнение

Являюсь многолетним клиентом «Лабиринта» и не перестаю радоваться дружелюбию его сайта. А скидка в 40 % (см. под логотипом) всегда подпитывает любовь читателей к интернет-магазину.

Мебельный континент. Интернет-магазин мебели

Страница 404 «Мебельный континент»

Особенности

• Пользователям остаются доступны главное меню и футер сайта;
• на странице 404 есть графический элемент, указывающий на тематику сайта;
• в сопроводительном тексте, увы, нет ни одной гиперссылки.

Личное мнение

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

• пользователь в этот момент мог искать не товар;
• «снят с публикации» — странная формулировка. Товара вообще нет или он отсутствует только на сайте?

Читайте также:

Как увеличить конверсию сайта: 30 рабочих способов

MED-магазин.

Товары для красоты, здоровья и спорта

Страница 404 «MED-магазин»

Особенности

• Пользователям по-прежнему доступны главное меню и каталог товаров;
• 404 страница продает, потому что обещает 5 % скидки на товары по промокоду 404;
• в тексте также интересуются, что пользователь не смог найти на сайте — вот это забота о покупателе!

Личное мнение

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

Мир охоты. Сеть магазинов

Страница 404 «Мир охоты»

Особенности

• Пользователю по-прежнему доступно главное меню сайта;
• предлагаются варианты решения проблемы: переход на главную страницу или каталог товаров. При этом только на главную страницу поставлена гиперссылка;
• главное меню дублируется пиктограммами. Так они воспринимаются намного лучше.

Личное мнение

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

Много сна. Товары для ночного отдыха

Страница 404 «Много сна»

Особенности

• Пользователю не доступны навигационные элементы сайта — главное меню и футер
;
• вариант решения — переход на главную страницу — оформлен в качестве кнопки
;
• есть товарные рекомендации.

Личное мнение

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

Музмарт. Интернет-магазин музыкальных инструментов

Страница 404 «Музмарт»

Особенности

• Вид сломанной гитары — это почти та же боль, как и попадание на страницу 404. Шутка — эти боли не сравнятся;
• пользователю доступны ссылки каталога и популярных категорий;
• доступна информация из футера.

Личное мнение

Если запрошенная страница не найдена, предложите пути решения, а не просто ссылки. И, пожалуйста, не ломайте музыкальные инструменты. К слову, все неверно введенные адреса сайта преобразует в вид https://muzmart.com/404.

PETSHOPRU. Товары для животных

Страница 404 PETSHOPRU

Особенности

• Пользователю по-прежнему доступно главное меню сайта;
• причем доступно дважды — предлагают еще раз обратить внимание на ссылки по аксессуарам для животных;
• в решении проблемы предлагается перейти в каталог.

Личное мнение

Котик играет с клубком на сайте товаров для животных (посмотрите по ссылке — это не просто картинка, а анимация). Если это не милота, то что милота?!

Читайте также:

Как правильно работать с негативными отзывами в интернете

Спортмастер.

Интернет-магазин спортивных товаров

Страница 404 «Спортмастер»

Особенности

• Пользователи по-прежнему видят главное меню сайта;
• со страницы 404 можно посмотреть каталог товаров и воспользоваться поисковой строкой;
• система предлагает перейти со страницы 404 на главную.
• графическая составляющая соответствует тематике сайта по внешнему виду и странице 404 по эмоциональной составляющей;
• графическое оформление категорий товаров фокусирует на себя внимание пользователей.

Личное мнение

Мне очень понравилась формулировка «возможно, ее никогда не было». Это прямо-таки готовый ответ на ввод адреса с несуществующим значением — посмотрите на ссылку, после того как перейдете по ней из раздела.

Wildberries. Маркетплейс разнообразных товаров

Страница 404 Wildberries

Особенности

• Маркетплейс оставляет пользователю главное меню с информацией о доставках его товаров и том, что лежит в корзине;
• также доступна поисковая строка;
• переход на главную оформлен кнопкой фирменного цвета WB;
• пользователям, попавшим на страницу 404, показываются хиты продаж: тут и фитнес-браслет, и трусики-подгузники, и пошлифовать можно. В маске, естественно.

Личное мнение

Формулировка «По вашему запросу ничего не найдено» здесь смотрится как нечто чужеродное. Такое сообщение вполне годится после того, как ввел название определенного товара в поисковую строку сайта и там ничего не нашлось. Мы же получаем такой текст на странице при вводе URL сайт в адресную строку браузера.

Все инструменты.ру. Инструменты для строительства и ремонта

Страница 404 «Все инструменты.ру»

Особенности

• Пользователю по-прежнему доступно главное меню и каталог товаров;
• в тексте страницы предлагается воспользоваться каталогом;
• переход на главную страницу оформлен как заметная кнопка;
• пользователь может также ознакомиться с популярными категориями товаров.

Личное мнение

Вы тоже заметили кнопки «Сказать спасибо» и «Пожаловаться» с правой стороны. Мне почему-то хочется сказать спасибо за такое оформление 404-й. Увидев то, что будет дальше, вы поймете, почему.

Copyblogger. Зарубежный блог по контент-маркетингу

Страница 404 Copyblogger

Особенности

• Пользователю по-прежнему доступно главное меню и футер сайта (они не влезли в скриншот, потому что мы хотели показать вам главное)
• страница оформлена как стандартная статья блога;
• такого количество текста именно для 404 страницы еще нужно поискать;
• можно подписаться на рассылку по контент-маркетингу и тренинг по маркетингу (полная версия 404 страницы по ссылке вверху).

Личное мнение

Как пишущий человек я оценил эту страницу 404, потому что ее текст — по сути реклама сайта Copyblogger. Цитирую начало:

Что-то пошло не так, потому что это страница с ошибкой. Эй, легко заблудиться! Copyblogger опубликовал более 3000 статей по коммерческому писательству, контенту и маркетингу на своем веб-сайте.

Как не надо делать страницы 404

Какая статья без антипримеров, благо в нашем случае их хватает. %&&$$&**#&&$$$ on this server

Но есть 404 страница еще страшнее…

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

Зайдите на сайт маститого маркетолога Сета Година и попробуйте ввести такой адрес страницы, который вызвал бы 404 страницу. Вы будете все время попадать на главную.

Ну нет у меня на сайте такой страницы. И что теперь?

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

Копирайтинг для страницы «Ошибка 404» — Kaplunoff Communications

Все течет, все изменяется…

Материалы на ваших сайтах постоянно обновляются. Возможно, вы даже со временем проводите небольшую чистку и удаляете какие-то страницы… Так как в них уже исчезла необходимость.

А ссылки на них со сторонних источников могли остаться. Переходят по ним новые посетители и видят перед собой пустой экран с фразой “404 Not found”.

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

Посетитель снова видит перед собой “404 Not Found”.

Как правило, это по умолчанию совсем невзрачная страница, которая только отталкивает.

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

 

Классические правила оформления страницы «Ошибка 404»

Открывать Америку вам никто не собирается. Просто все четко и системно, чтобы вы могли удобно этим пользоваться:

1. Размещение логотипа и имени сайта, компании, проекта – это дает возможность посетителю понимать, что сайт существует. Достаточно лишь кликнуть по лого, и он уже на главной странице.
2. Наличие сообщения, которое четко говорит посетителю, что произошло и (желательно) что делать ему дальше.
3. Заметная кнопка, переводящая посетителя на главную страницу сайта.
4. Допускается наличие контактных данных владельца сайта, чтобы при желании с ним сразу связаться
5. Иконки социальных сетей – раз уж человек пришел к вам в гости, не лишним будет его пригласить в круг читателей и последователей вашего ресурса в социальных сетях

 

Нужен ли вообще текст на странице «Ошибка 404»?

Конечно, нужен!

Иначе вы потеряете посетителя. И возникает вопрос – нужен текст-то для чего?

Скажу так: на этой страницы у текста есть 3 последовательные функции:

1. Сообщить, что произошло
2. Указать причины происшедшего
3. Подсказать, что делать дальше

Это стандартный «букет», без креативных ноток. Встречаются еще и другие проявления текстовых сообщений различного рода. Но обо всем по порядку.

 

 

Сообщите, что произошло

Если вы думаете, что каждый посетитель вашего сайта знает, что такое «ошибка 404» – вынужден вас огорчить, не все пользователи сети одинаково продвинуты.

Всегда найдутся те, которые не поймут, что означает надпись «ошибка 404» – они запросто могут исчезнуть в любом направлении, только не в сторону главной (или внутренних) страниц вашего сайта.

Среди формулировок сообщения о произошедшем событии, можно использовать абсолютно разные варианты (учитывая специфику ресурса и характеристики аудитории):

• «Извините! Страница, которую Вы ищете, не может быть найдена»
• «Упс… Мы не можем найти то, что Вы ищете»
• «Простите, но у нас возникли проблемы с поиском страницы, которую Вы запрашиваете»
• «Добро пожаловать на страницу 404! Вы находитесь здесь, потому что ввели адрес страницы, которая уже не существует или была перемещена по другому адресу».
• «Так уж получилось, что из множества страниц нашего сайта Вы оказались как раз на той, которая уже не существует…»
• «404… Увы, но эта страница где-то затерялась в галактике Интернета»
• «Дружище, извини, но мы не смогли найти эту страницу…»
• «Ищете что-то интересное на нашем сайте? К сожалению, страница, которую Вы запрашиваете, не существует…»

 

Укажите причины происшедшего

Очень часто на странице «ошибка 404» этот текстовый блок вообще отсутствует

Авторы, порой, вообще ограничиваются «пустым текстом» в стиле: «Ошибка 404. Страницы не существует или он была удалена».

А дальше думайте, как хотите, если вообще хотите думать.

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

Вот несколько примеров формулировок указания возможных причин ошибки 404:

• «… Возможно, запрашиваемая Вами страница была перенесена или удалена. Также возможно, Вы допустили небольшую опечатку при вводе адреса – такое случается даже с нами, поэтому еще раз внимательно проверьте»
• «… Скорее всего, это случилось по одной из следующих причин: страница переехала, страницы больше нет или Вам просто нравится изучать 404 страницы»

 

Подскажите, что нужно делать

Во-первых, не паниковать…

Во-вторых, всегда можно переадресовать человека на главную страницу сайта (или любую внутреннюю – если в этом есть необходимость).

В-третьих, вы можете использовать в дизайне форму поиска информации на сайте. Человек, не зная, что делать, вводит в поисковую строку запрос по сайту.

Звучит это примерно так:

• «… Чтобы найти интересующую Вас информацию – воспользуйтесь этой формой поиска»
• «… Переходите на главную страницу – там Вы также сможете найти много полезной информации»
• «… Пожалуйста, воспользуйтесь навигацией или формой поиска, чтобы найти интересующую Вас информацию»

 

Выделяем главное

Конечно, хочется из всего этого ассорти выделить наиболее ключевые моменты.

Текст на странице «Ошибка 404» – это не набор фраз, а полноценный текст, преследующий определенную задачу. А именно – стимулировать посетителя перейти в другие разделы сайта, а не его покинуть.

Поэтому…

Со своей стороны, позвольте поделиться личным мнением и рекомендациями:

1. Избегайте фразы «Ошибка 404», замените ее на более мягкий вариант – «Страница 404», просто слово «ошибка» способно спугнуть посетителя.
2. Аналогично – убирайте с дизайна любые предупреждающие знаки («стоп», «внимание») – это также способно спугнуть посетителя
3. Если у вас бизнес-ресурс и ориентированный на клиентов, рекомендуем придерживаться четкого, строго и понятного стиля изложения.
4. Если блог и развлекательный портал – можно отходить от «официальностей», подключая юмор и оригинальность – главное, чтобы ваша идея ориентировалась на формат восприятия информации читателей
5. Не нужно ограничиваться сообщением о том, что произошло, обязательно подскажите посетителю, что ему делать дальше

А если наглядно, вот вам простой пример для сайта компании – строго, четко и понятно:

Здравствуйте!

Добро пожаловать на «страницу 404» нашего сайта.

К сожалению, введенный Вами адрес недоступен. Этому может быть несколько объяснений:

1. Страница удалена (из-за утраты актуальности информации)
2. Страница перенесена в другое место
3. Возможно, при вводе адреса была пропущена какая-то буква (на самом деле, у нас самих так часто получается)

Тем не менее, предлагаем Вам найти нужную информацию с помощью этой простой формы: 

ФОРМА

Или же приглашаем Вас посетить другие разделы нашего сайта:

Главная Услуги О компании Примеры работ Отзывы Блог 

Если у Вас возникли какие-то вопросы – свяжитесь с нами по тел. ______ или же напишите на e-mail ___________.

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

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

Если у вас блог – можете добавить ссылки на последние или самые популярные публикации.

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

Хорошо это или плохо – на самом деле, не важно. Это просто факт.

И мы благодарны своим клиентам за доверие и постоянные заказы, в том числе и на тексты для страниц 404.

10 отличных примеров страниц ошибок 404 | by Quickmark

Вот список наиболее креативных и привлекательных страниц ошибок 404, которые заслуживают уважения.

«СТРАНИЦА НЕ НАЙДЕНА» — пожалуй, самое неприятное, что можно увидеть на экране. Это страница, на которую никто не хочет попасть. Долгое время эта страница повторяла слова «разочарование» и всегда печально известна как «последняя страница Интернета».

Идея 404 родилась, как вы уже догадались, в комнате под номером 404, в которой располагались самые первые веб-серверы в ЦЕРНе.

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

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

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

Вот 10 примеров страниц ошибок 404, которые, по нашему мнению, были блестяще спроектированы.

1. Flipping Book

Концепция здесь перекликается с названием веб-сайта FlippingBook. На этой странице с ошибкой 404 рассказывается история супружеской пары, которая потеряла страницу из книги в домашнем хаосе. Напоминает ситуацию типа «Марли и я». Простой сине-белый цвет контрастирует с несколькими тонкими цветовыми вариациями, которые не кажутся слишком тяжелыми.

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

В целом эта страница служит своей цели наряду с творчеством и определенно оказывается спасением от обычной страницы ошибок, которая заставляет вас вздохнуть!

2. Behance.net

Эта страница не является страницей ошибки конкретного веб-сайта, а является одним из дизайнов, созданных визуальным дизайнером Майклом Цираки.

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

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

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

Бегите домой — отличный навигационный CTA для веб-сайта на тему ужасов, и я всегда ценю хорошую игру слов. 🙂

3. CSS-трюки

Эта страница с ошибкой — одна из моих любимых. Вы видите, что нет таких слов, как 404, ошибка, не найдено и т. д. На самом деле их 9.0020 вообще нет текста в обычном смысле. Тем не менее, ни один человек, использующий веб-сайт, подобный трюкам CSS, не смог бы понять смысл этой страницы. Это очень специфичная для домена страница ошибки , которая напоминает то, что означает веб-сайт, то есть язык веб-стилизации CSS.

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

4. Kwarter

Kwarter — это мобильная игровая платформа, работающая в режиме реального времени, и

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

Страница с ошибкой сначала начинается с того, что вы чувствуете вину за то, что попали на неработающую страницу, жирным шрифтом спрашивая вас — ВЫ СЧАСТЛИВЫ ТЕПЕРЬ? Но тут же берёт на себя очередь брать вину на себя, что видно из фразы — Наши плохие!

В настольном теннисе топ-спин — это очень агрессивный удар, и «теоретически» топсин может быть достаточно агрессивным, чтобы сломать биту на две части. Следовательно, эта страница имеет идеальный текст , и иллюстрацию . Навигационный CTA находится в контексте всей темы. Это не совсем делает очевидным, куда приведет вас кнопка SERVE AGAIN, но оставляет вас с любопытством, чтобы узнать это самостоятельно.

5. Магнит

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

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

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

В целом это довольно нетрадиционная и креативная страница ошибок, и мы не удивлены, что она стала вирусной.

6. Marvel

Я знаю, вы думаете о Мстителях, но это Marvel — прототип веб-приложения и мобильного приложения.

За последнее десятилетие мы перешли от простого текста к GIF-файлам и от простых изображений к видео, но с точки зрения коммуникации одним из самых эффективных методов стала анимация .

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

7. Blue Fountain Media

Посетителю этого сайта предлагается два варианта. Он может либо вернуться назад, либо выбрать версию легендарной игры Pacman. Игра имеет правильную форму в цифре 404.

Я обязательно сыграю хотя бы в одну игру (и обязательно подсяду), прежде чем покину сайт. Простая цветовая схема и широкие возможности навигации — отличное дополнение.

8. EmailCenterUk.com

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

Эта страница не слишком фокусирует на CTA, , однако уловка, которую они здесь провернули, безусловно, может простить это.

Вам интересно узнать, что происходит, когда вы кого-то увольняете?

Вот он,

9. Amazon

Эта статья была бы неполной без фотографии очаровательной собаки.

Ши-тцу Соджу пришла, чтобы извиниться перед вами за то, что не смогла найти вашу страницу. Акцент на ИЗВИНИТЕ.

Вы можете Перейти обратно на домашнюю страницу, найти что-то на веб-сайте.

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

10. Средний

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

Также ни с того ни с сего можно почитать несколько популярных статей о потерянности вообще, а почему бы и нет?

ЗАКЛЮЧЕНИЕ

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

Список страниц с ошибкой 404, упомянутый выше, действительно является ответом на вопрос, как повысить вовлеченность посетителей веб-сайта?

Знаете ли вы веб-сайты, на которые вы наткнулись, на которых была замечательная страница с ошибкой? Может быть, вам понравился дизайн, может быть, он заставил вас посмеяться.

Я хотел бы знать ваши любимые страницы ошибок. Не стесняйтесь комментировать свои мысли ниже.

Нравится этот блог? Поделитесь им с друзьями как можно больше.

Создание 404 страниц с точностью до пикселя

Нравится Visual Inspector? Вашим друзьям это тоже понравится.

Распространяйте эту статью как можно больше. Это поможет нам расти органически, и мы будем благодарны.

Siftery предлагает вам пожизненную подписку на Visual Inspector всего за 49 долларов — https://www.canvasflip.com/visual-spector/siftery/

20 лучших примеров страниц с ошибкой 404

Фотография Саадии Минхас

Автор: Саадия Минхас, 25 января 2019 г.
Отмечен в креативность , дизайн , тенденции дизайна

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

Почему?

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

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

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

1.

Амазонка

Привет собакам! Amazon использует страницу 404, чтобы дать вам некоторое представление о культуре их компании (включая обязательные изображения милых щенков). Amazon также немедленно берет на себя ответственность за ошибку (даже если это не их вина) — с помощью слова «SORRY» большими заглавными буквами, уведомляющего пользователя о том, что это не та страница.

2.

Flickr

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

3.

Adobe

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

4.

Гугл

В Google все просто. Просто изображение сломанного робота и простое, почти техническое сообщение об ошибке. Вероятно, это свидетельство их инженерных корней и стремление каждый раз находить правильный ответ.

5.

Awwwards

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

6.

Канва

Забавная маленькая игра — отличный способ развлечь потерянных посетителей, если у вас есть время собрать ее. Это определенно помогло ему попасть в этот список!

7.

Дрибббл

Dribbble — это веб-сайт для дизайнеров, ищущих вдохновения. Что может быть лучше для заблудившегося посетителя, чем позволить ему выбрать цвет и дать ему ссылку на дизайн этого цвета. Еще один пример страницы 404 веб-сайта, которая глубоко понимает, почему их клиенты там, а затем усердно работает, чтобы предоставить этим клиентам этот контент, куда бы они ни пошли.

8.

Behance

Behance, похожий на Dribbble сайт, предлагающий визуальное вдохновение для дизайнеров, по сравнению с ним немного более стерильный. Подобно поисковой системе 00-х, они показывают просроченным посетителям список всех проектов, категорий и демонстрируют некоторые популярные дизайнерские проекты, чтобы помочь им вернуться в нужное русло.

9.

Новости дизайнера

Простота часто имеет свою силу. Страница Designer News 404 передает сообщение — бонусные баллы за то, что на ее реализацию не требуется месяц времени разработчика.

10.

Инстаграм

Простая страница с копирайтингом, граничащим с обвинением пользователя в ошибке (в отличие от Adobe, которые сразу берут на себя ответственность за ошибку и работают, чтобы помочь пользователю). Заголовок, который, если вы не читали глубже, может быть истолкован как «эта страница существует, но вы не можете получить к ней доступ». Этот день посетителей стал немного менее счастливым, увидев это.

11.

Основа интерактивного дизайна

The Interaction Design Foundation дает посетителю возможность отправить электронное письмо с описанием того, что они делали, когда заблудились, и вопросом, что они ожидали увидеть вместо этого. В этом подходе есть благородное, хотя и ошибочное намерение — если они достаточно заботятся о своих посетителях с ошибкой 404, им действительно следует просматривать журналы ошибок своего веб-сайта (или использовать простые онлайн-инструменты для поиска веб-сайтов) и определять распространенные причины, по которым люди не могут добраться. их предполагаемые пункты назначения.

12.

Ютуб

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

13.

eBay

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

14.

Этихад Эйруэйз

Копирайтеры Etihad 404 упустили памятку из-за краткости, потратив 3 строки, чтобы сообщить, что обычно достигается одной строкой, и в то же время дать пользователю несколько плохих советов ( Проверьте URL-адрес и попробуйте еще раз. Правда? Сколько в среднем пользователи правильно понимают, как форматируется URL-адрес? Кроме того, если вы находитесь на странице 404, повторная попытка волшебным образом не заставит ее внезапно работать).

15.

LinkedIn

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

16.

MailChimp

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

17.

Средний

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

18.

Лего

Немного эмоций может спасти плохую ситуацию — даже если это просто лицо виртуальной пластиковой игрушки. Лего отлично справляется с этой задачей.

19.

Примечания

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