Цвета для сообщений с ошибками

Ошибаться свойственно всем. Ошибки возникают и при взаимодействии людей с пользовательскими интерфейсами (user interfaces). Иногда они происходят по вине человека, а иногда причина кроется в самом приложении. Какова бы ни была причина, ошибки и то, как вы справляетесь с ними, оказывает огромное влияние на пользовательский опыт (user experience). Бесполезные сообщения об ошибках могут привести к тому, что пользователь разочаруется и найдет замену вашему приложению.

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

Что такое сообщение об ошибке?

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

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

Юзабилити: чего стоит избегать в сообщениях об ошибках?

Легче предупредить, чем исправить

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

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

Мудрое решение в этом случае представляет Booking.com: их селектор диапазона дат позволяет выбрать только текущую или последующие даты, и человек таким образом никак не сможет ошибиться.

Приложение Booking.com делает прошедшие даты неактивными для выбора

Профилактика ошибок пользователей при разработке интерфейсов

Сообщения об ошибках неправильного ввода данных

Валидация форм необходима для сообщения пользователю об имеющихся неточностях в введенных им данных. Хорошая валидация формы содержит четыре важных элемента:

1. Правильное время (встроенная валидация)

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

Валидация должна незамедлительно информировать пользователей о правильности введенной ими информации. Главный принцип хорошей валидации формы таков: Разговаривайте с пользователями! Говорите им, что идет не так! Это поможет им сократить время на исправление ошибок.

2. Правильное место

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

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

3. Правильный цвет (интуитивный дизайн)

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

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

4. Понятное сообщение

Ваше сообщение об ошибке должно четко говорить пользователю, что конкретно не так и что ему нужно исправить. То есть вместо вывода сообщения «недействительный email» следует уточнить, что именно неправильно: допущена опечатка, этот e-mail уже занят и т.д. Затем необходимо предложить пользователю варианты действий (войти или восстановить пароль).

«Этот email уже зарегистрирован. Хотите войти или восстановить свой пароль?»

Валидация лид-форм — полное руководство

Ошибки приложений

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

Вы никогда не должны показывать сообщения следующего рода:

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

Это сообщение об ошибке было написано разработчиком для разработчика: «Операция не может быть завершена (WDGeneralNetworkError 500)»

2. Тупиковое сообщение. Такие сообщения не дают никакой полезной информации для пользователей.

Экран приложения Spotify просто заявляет о том, что «произошла ошибка», и не дает никаких дальнейших рекомендаций пользователю

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

«Сервер c таким именем хоста не может быть найден. Повторите попытку»

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

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

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

«Не удается подключиться к этой сети. Вы должны подключиться к Wi-Fi сети, чтобы управлять iTunes или Apple TV»

Юзабилити: чего стоит избегать в сообщениях об ошибках?

Используйте изображения и юмор

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

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

В Gmail при создании нового аккаунта можно натолкнуться на такое сообщение об ошибке:

А вы фанат пунктуации! Увы, имена пользователей не могут содержать многоточия

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

«Опаньки! Возникла ошибка, и мы не смогли опубликовать эту историю»

Итак, чтобы создать идеальную страницу ошибки, стоит учесть следующее:

1. Сообщения об ошибках должны появляться, как только возникает проблема.
2. Необходимо сохранять введенную пользователем информацию на случай возникновения ошибки.
3. Сообщение должно быть написано простым языком, содержать причину ошибки и рекомендации дальнейших действий пользователя.
4. Не пугайте и не сбивайте с толку пользователей своим сообщением.
5. Не забирайте у пользователя контроль над системой в случае возникновения не столь серьезной проблемы.
6. Внесите немного юмора, чтобы смягчить проблему.

Высоких вам конверсий!

По материалам: smashingmagazine.com

06-10-2016

I have a big website with some forms.
There are four background-colours for the form components. One of them is pink/red.

Here the image and the error message:

I can’t change the form background-color, but I’m free to change the message style (background-color, text-color, etc.).

What do you think? I don’t like it the red with white text.
The error message is not very visible, because the background is red. I’ve been trying for a few days with other red styles, and some oranges, but it looks weird.

Blue or green backgrounds are really visibles, but it could be confusing. (success = green, error = red)

How can I improve this form?

I mean, I should change the error message and don’t touch the select components.

Some options, inspired by your answers:

• 1 is current.
• 2 looks nice
• 3 weird
• 4 (darker) and 5 (lighter), similar, but the shadow is different

Thanks you all for the feedback!!

Цвет — эффективный способ коммуникации. Им можно изменить настроение, пробудить эмоции, передать смысл послания. Разберем, как правильно подобрать цвет и пользоваться им в интерфейсе сайта или приложения. В конце — инструменты по подбору цвета.

Сначала посмотрим на использование красного, зеленого и синего в интерфейсе: они часто встречаются на сайтах и в приложениях.

Красный 

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

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

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

1. Акцентировать элемент. В этом примере красный помогает обратить внимание на скидку: 

1. Предупредить о последствиях. Красный подсказывает, к чему приведет действие:

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

1. Выразить недовольство. Так выглядят кнопки в Инстаграме:
   
   

Зеленый 

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

Показать успешный результат. Пользователь завершает действие и видит обратную связь:

Побудить к действию. На сайте «Страйпа» зеленая кнопка приглашает пользователя зарегистрироваться: 

На «Озоне» — помогает завершить покупку:

Синий

Часто встречается в интерфейсе сайтов и приложений. На это есть несколько причин:

Людям нравится синий цвет. Исследование Джо Халлока показывает, что синий нравится мужчинам и женщинам во всем мире:

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

Вызывает доверие и ощущение безопасности. Фейсбук, Вконтакте, Телеграм, Твиттер, Делл, IBM, Интел, AT&T и Пейпал используют синий в продуктах, которыми ежедневно пользуются люди по всему миру:

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

Поэтому отдельные элементы интерфейса нужно сопровождать текстом. Так любому человеку будет удобнее работать с сайтом или приложением:

На что влияет цвет в интерфейсе

На конверсию. В исследовании Джошуа Портера красная кнопка превзошла зеленую на 21%, при этом наполнение страницы не менялось:

Это не значит, что красная кнопка продает лучше зеленой: то, что работает для одной конкретной страницы, не обязательно работает для другой. Единственный способ понять, какой цвет лучше работает, — тестировать несколько вариантов интерфейса и не обобщать результаты сторонних исследований.

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

Лендинг Трелло. Слева — настоящий лендинг. Зеленая кнопка заметна и хорошо сочетается со всей страницей:

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

Если есть несколько равнозначных сценариев, красный и зеленый их разграничат — это поможет принять решение:

Еще пример: 

Как выбрать цвет для интерфейса

Цвет можно подобрать к сайту или приложению. Сделать это проще, чем может показаться:

1. Выберите основной цвет. Если не знаете, какой цвет использовать, попробуйте отталкиваться от логотипа. Основной цвет поможет понять, как должны выглядеть основные элементы интерфейса: кнопки, формы, заголовки, подсветка полей. 

Цвет должен быть ярким. Желтый цвет на белом фоне не читается, а если в качестве основного выбрать серый, то он будет сливаться с неактивными кнопками. Цвет должен хорошо считываться:

Еще пример:

Google рекомендует для приложений подобрать к основному цвету темную и светлую вариацию: 

2. Выберите вторичный цвет. Он дополняет основной и подходит:

• для слайдеров и стрелочек;
• подсветки текста, форм и кнопок;
• прогресс-бара;
• ссылок и заголовков.

Вторичных цветов может быть несколько. Они нужны для наглядного представления информации на одном экране:

3. Выберите цвет фона и сообщений об ошибках. О чем речь:

• Цвет фона помогает создавать контраст между сайтом и отдельными элементами.
• Цвет сообщений об ошибках помогает акцентировать внимание пользователя.

4. Убедитесь, что у шрифтов правильный цвет. На светлом фоне используйте темный цвет шрифта, на темном — светлый:

Вывод

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

Чтобы правильно подобрать цвет:

1. Поймите задачу, которую нужно решить. Подбирать цвета для сайта, приложения или рассылки — это разные задачи.
2. Выберите основной цвет, который лучше всего передает настроение вашего бренда. Используйте яркие цвета.
3. Выберите вторичные цвета, чтобы усилить основной и улучшить опыт пользователей в различных сценариях.
4. Убедитесь, что цвет ошибки хорошо контрастирует с элементами на сайте.
5. Проверьте, чтобы шрифты правильно отображаются.

Полезные ресурсы

Как работать с цветами в маркетинге, какие есть цветовые модели и как их правильно сочетать — в статье «Как работать с цветами в digital-маркетинге».

Выбрать основной цвет и на его основе автоматически получить вторичные цвета поможет инструмент «Генератор палитр».

Проверить, как дальтоники видят ваш сайт.

Валидация и вывод сообщений об ошибках

Последнее обновление: 24.04.2023

Для вывода сообщений об ошибках в компонентах Blazor применяются два встроенных компонента — ValidationSummary и ValidationMessage.
Оба они расположены в пространстве имен Microsoft.AspNetCore.Components.Forms.

ValidationSummary

ValidationSummary выводит все сообщения об ошибках. На уровне разметки html генерируется html-элемент <ul> с классом
validation-errors

<ul class="validation-errors">
    <li class="validation-message">Сообщение об ошибке 1</li>
    <li class="validation-message">Сообщение об ошибке 2</li>
    ........................
    <li class="validation-message">Сообщение об ошибке N</li>
</ul>

В этот список добавляются все сообщения об ошибках в виде элемента с классом validation-message.

Например, возьмем следующую модель Person

using System.ComponentModel.DataAnnotations;

public class Person
{
    [Required]
    [StringLength(20, MinimumLength =2)]
    public string? Name { get; set; }
    [Required]
    [Range(1,110)]
    public int Age { get; set; }
}

В компоненте App определим форму для ввода данных этого класса и с помощью ValidationSummary выведем ошибки валидации:

@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web

<EditForm Model="@person" OnSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <p>
        Name:<br />
        <InputText id="name" @bind-Value="person.Name" />
    </p>
    <p>
        Age:<br />
        <InputNumber id="age" @bind-Value="person.Age" />
    </p>
    <button type="submit">Submit</button>
</EditForm>

@code {
    Person person = new();
    void Submit()
    {
        Console.WriteLine($"Name: {person.Name} tAge: {person.Age}");
    }
}

Если в данном случае мы введем некорректные значения, то компонент ValidationSummary будет формировать следующую разметку:

<ul class="validation-errors">
    <li class="validation-message">The field Age must be between 1 and 110.</li>
    <li class="validation-message">The field Name must be a string with a minimum length of 2 and a maximum length of 20.</li>
</ul>

ValidationMessage

Компонент ValidationMessage<T> отображает сообщение об оишбке для отдельного свойства модели. Этот компонент генерирует html-элемент
<div> с классом validation-message, который содержит сообщение об ошибке.

С помощью свойства For компонент ValidationMessage устанавливает валидируемое свойство модели через передаваемое лямбда-выражение.
Например, изменим компонент App следующим образом:

@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web

<EditForm Model="@person" OnSubmit="Submit">
    <DataAnnotationsValidator />
    <p>
        Name:<br />
        <InputText id="name" @bind-Value="person.Name" /><br />
        <ValidationMessage For="@(() => person.Name)" />
    </p>
    <p>
        Age:<br />
        <InputNumber id="age" @bind-Value="person.Age" /><br />
        <ValidationMessage For="@(() => person.Age)" />
    </p>
    <button type="submit">Submit</button>
</EditForm>

@code {
    Person person = new();
    void Submit()
    {
        Console.WriteLine($"Name: {person.Name} tAge: {person.Age}");
    }
}

Теперь сообщения об ошибках отображаются рядом с каждым полем ввода

Стилизация

Стилизируя классы validation-errors и validation-message, можно настроить вывод сообщений об ошибках. Например, определим в компоненте
App примитивную стилизацию:

@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web

<style>
    .validation-errors {
        color: red;
    }
    div.validation-message{
        color: #2980B9;
    }
</style>
<EditForm Model="@person" OnSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <p>
        Name:<br />
        <InputText id="name" @bind-Value="person.Name" /><br />
        <ValidationMessage For="@(() => person.Name)" />
    </p>
    <p>
        Age:<br />
        <InputNumber id="age" @bind-Value="person.Age" /><br />
        <ValidationMessage For="@(() => person.Age)" />
    </p>
    <button type="submit">Submit</button>
</EditForm>

@code {
    Person person = new();
    void Submit()
    {
        Console.WriteLine($"Name: {person.Name} tAge: {person.Age}");
    }
}

В данном случае для ошибок в ValidationSummary применяется красный цвет, а для ValidationMessage — синий цвет: