Красивое сообщение об ошибке

• Главная»
• Уроки»

• CSS»

• Создание красивых сообщений с помощью CSS

• Метки урока:
• подсказки
• сообщения

body{
font-family:Arial, Helvetica, sans-serif; 
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('validation.png');
} 

<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>
<div class="validation">Validation message</div>

5 последних уроков рубрики «CSS»

• 

  Забавные эффекты для букв

  Небольшой эффект с интерактивной анимацией букв.
• 

  Реализация забавных подсказок

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

• 

  Анимированные буквы

  Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

• 

  Солнцезащитные очки от первого лица

  Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

• 

  Раскрывающаяся навигация

  Экспериментальный скрипт раскрывающейся навигации.

Перевод краткого руководства от UX-писателя BBC Эми Лик.

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

Определите, с какой ошибкой столкнулся пользователь

Прежде чем составлять сообщение, убедитесь, что знаете ответы на эти вопросы:

Структура текста

Чтобы исправить ошибку, сначала нужно узнать, в чём она состоит. Сообщение будет выглядеть примерно так: ошибка → как её исправить.

Довольно простая структура. Вот пример реального сообщения об ошибке в одну строчку.

Бывает, система не может указать, что именно произошло.

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

Пишите коротко и ясно

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

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

Системная ошибка

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

Чтобы принять ответственность за случившееся, используйте активный залог. Пишите: «Мы не можем сохранить ваши изменения», а не «Ваши изменения не могут быть сохранены».

Ошибка пользователя

Иногда ошибки появляются по вине пользователя. Но сообщить об этом можно мягко и без осуждения.

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

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

Используйте правильный тон

Тон сообщения будет зависеть от серьёзности ошибки. Мягкость в словах отлично подходит для мелких ошибок, но для более критических стоит подбирать слог построже.

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

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

Что случится, если нажать на кнопку

Для устранения некоторых ошибок могут потребоваться СТА-кнопка или ссылка. Иногда бывает нужна кнопка отмены.

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

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

Время и место

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

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

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

Ключевые рекомендации

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

Вот 3 жизненно важных части любого хорошего сообщения об ошибке:

• Четкое текстовое сообщение
• Правильное размещение
• Хороший визуальный дизайн

Четкое текстовое сообщение

1. Сообщение об ошибке должно быть понятным

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

2. Сообщение об ошибке должно быть полезным

Не достаточно просто написать, что что-то пошло не так. Покажите пользователю, как он может исправить проблему.

Например, Microsoft описывает проблему, и прямо в сообщении об ошибке предоставляет вариант ее решения.

3. Сообщение об ошибке должно подходить под определенную ситуацию

Очень часто, веб-сайты используют одно сообщение об ошибке для всех схожих состояний. Оставили пустым поле ввода электронного адреса — «Введите правильный электронный адрес», пропустили символ «@» — «Введите правильный электронный адрес». MailChimp решает эту проблему иначе — они используют 3 разных сообщения об ошибке для каждого состояния процесса подтверждения электронной почты. Сначала проверяется, заполнено ли поле ввода. Затем проверяется введены ли символы «@», и «.».

4. Сообщение об ошибке должно быть вежливым

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

5. Используйте юмор, если он уместен

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

Правильное размещение

Хорошее сообщение об ошибке — это такое сообщение, которое вы увидите. Размещайте его рядом с элементами интерфейса, с которыми ошибка непосредственно связана.

Правильный визуальный дизайн

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

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

Заключение

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

Источник изображения

Бесперебойное время работы веб-сайта (website up-time) – важнейший показатель надежности функционирования ресурса в сети, параметр, который непременно должны отслеживать веб-маркетологи, интернет-предприниматели и IT-специалисты.

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

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

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

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

1. Digg

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

«У нашей повозки сломалась колесная ось, но мы можем продать скот для оплаты ремонта и скорейшего возвращения к вам».

2. Tumblr

У вас проблемы с сервисом Tumblr? В этом виноваты Тумбестии (Tumbeasts)! Замечательные анимационные персонажи, созданные командой рисовальщиков комиксов The Oatmeal, от имени администрации Tumblr сообщают посетителям, что сервис временно недоступен, поскольку «Гадкие Тумбестии погрызли все серверы».

3. Google Wave

В 2009 году Google создал сервис Google Wave, объединяющий электронную почту, систему обмена мгновенными сообщениями, веб-чаты, социальные сети и инструменты для совместного управления проектами. Google Wave прекратил свое существование в 2010 году, а для тех, кто все еще не в курсе произошедших событий, была заготовлена такая вот «страница 404», сообщающая о прекращении проекта:

«Серфинга не будет, чувак. Волна улеглась навсегда. Время расслабиться».

4. Blippy

Некогда в Глобальной сети существовал сайт Blippy, позволявший потребителям обмениваться отзывами о товарах и услугах. Прежде чем он был окончательно «снесен» в мае 2011 года, он сообщал пользователям о своей недоступности вот такой картинкой.

5. Grooveshark

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

6. Reddit

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

7. Mint.com

Mint.com – сайт, собирающий все финансовые документы пользователей «в одном месте», тем самым помогая контролировать, например, семейный бюджет. Финансы – это очень серьезно. Поэтому клиенты, не могущие получить доступ к важной финансовой информации, приходят в негодование практически мгновенно. Для того, чтобы поднять настроение недовольных посетителей, Mint сделал одну из самых веселых «страниц ошибки» в Глобальной сети. Персонажа, «проживающего» на ней, зовут Джастин, и он уже обзавелся целой армией преданных поклонников.

8.Taptaptap

Taptaptap – это компания, которая создает приложения для iPhone, и знает, что всем нравятся забавные детские фотографии, вроде той, что показывается посетителям их сайта при возникновении «ошибки 404».

9. Twitter

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

10. HubSpot

Да, подобные неприятности случаются и с признанными специалистами в области интернет-технологий! Когда сервис HubSpot «ложится в даун», на странице сообщения об «ошибке 404» посетители могут видеть неподдельное раскаяние, написанное на лице главного IT-специалиста HubSpot Тома Каттанео (Tom Cattaneo). Все видят, как ему стыдно? 🙂

Помните, что творческий подход полезен во всем, даже в создании страницы «ошибки 404»!

• Основные элементы продающей целевой страницы
• Анатомия идеальной целевой страницы
• 19 причин, по которым вы должны использовать визуальные материалы в ваших маркетинговых стратегиях

09-11-2012