Примеры из опыта компании Salesforce

Пользователи Salesforce работают с формами ежедневно, будь то продавец, администратор или менеджер. Ключевой фактор продуктивности — иметь возможность добавлять, изменять и удалять информацию не прилагая особых усилий. Данный опыт является одной из ключевых целей UX команды в их новом Lightning Experience.

Ошибки в дизайне форм и способы их исправления

Расположение заголовков и полей

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

Выравнивание по левому краю
Выравнивание по левому краю

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

Мы применили похожие принципы для упрощения иерархии и удобства восприятия информации.

1-QGCyzdqHe1k1MbYOFivSnQ

Установка значений по умолчанию

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

Создание нового клиента в Salesforce
Создание нового клиента в Salesforce

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

1-gqxbnKfQpKUaAbM3wqYuhQ

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

1-FVMZX8UHJJxp3NFFIX06-w

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

Пред-заполненные соответствующие поля

Некоторые страницы содержат вебмастера, который позволяет быстро записать звонок или создать новую задачу/событие. Давайте рассмотрим это в действии:

Запись звонка через вебмастер
Запись звонка через вебмастер

Вебмастер в деталях
Вебмастер в деталях
В идеальном мире, пользователи заполняют все поля детальной, корректной информацией. В реальном мире — нет.

В этом примере, пользователь работает с клиентом по имени Walter Junior и они хотят записать только что завершившийся звонок. В вебмастере пользователь представлен 4мя полями: предмет, комментарии, имя и отношение. Обратите внимание, что поле «имя» уже пред-заполнено именем пользователя и поле «предмета» заполнено словом «звонок».

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

Подружите форму с клавиатурой и сделайте ее доступной

Новый Lightning Experience создан на основе доступности и удобства. Пользователи могут перейти к возможности править и изменять каждое поле формы при помощи клавиатуры. Более того, каждый элемент формы построен с возможностью воздействия на него при помощи действий клавиатуры, с использованием практики шаблонов дизайна W3C.

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

И это еще не все

Lightning Experience — это значимая контрольная точка для UX команды Salesforce, но это еще далеко не финиш. Мы продолжаем исправлять возможности редактирования, что означает внедрение встроенного редактора в Lightning.

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

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

Продумывайте свой дизайн на основе опыта, описанного выше.

И помните, что хорошие формы не только красиво выглядят. Они также понятные, доступные и эффективные.

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

Ошибки в дизайне форм и способы их исправления