Дизайн более эффективных форм
Наш канал в

Примеры из опыта компании 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.

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

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

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

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

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

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

5 UX способов начать разработку дизайна правильно

Проблема в том, что если вы работаете с не-дизайнерами, красивые экраны – то, что нужно. Вы сможете предоставить “вау-эффект” клиенту, а как этот вау-эффект будет реализовываться, уже значения не имеет. А мы все-таки предпочитаем создавать нечто в духе “Все довольны”.

OOUX: Основа дизайна взаимодействий

Свой подход “Объектно-ориентированного UX” (Object-Oriented UX – OOUX) я представил в прошлом году на A List Apart. Подход подразумевает дизайн объектов перед проработкой действий.

Полное руководство по процессу продукт-дизайна

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