Руководство по дизайну понятных и удобных бизнес-форм

Руководство по дизайну понятных и удобных бизнес-форм

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

Преобразовать дизайн в рабочую форму Jodoo, процесс, представление записей и дашборд

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

Открыть конструктор форм Jodoo

Начните с задачи пользователя и следующего решения

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

01

Определить задачу до написания вопросов

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

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

Группировать поля в порядке, в котором людям удобно отвечать

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

  • Начните со знакомого пользователю контекста личности, запроса, площадки, актива или случая.
  • Размещайте даты, суммы, единицы и доказательства рядом с вопросом, который они поясняют.
  • Используйте условные разделы для вопросов, относящихся только к некоторым случаям.
  • Размещайте подтверждение и отправку после того, как человек сможет проверить результат.
03

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

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

  • Предпочитайте конкретные подписи вроде «Требуемая дата доставки» вместо «Дата».
  • Показывайте единицу и допустимый формат рядом с числовыми или кодовыми полями.
  • Не используйте термины политики, внедрения и систем, которые не нужны заполняющему форму.
  • Проверьте длину переведенных подписей до окончательной верстки.
04

Использовать проверку, чтобы помочь людям исправить запись

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

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

Спроектировать завершенное и возвращенное состояния

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

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

Проверить с реалистичными мобильными данными и исключениями

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

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

Проверить каждый слой до публикации

Используйте контрольный список на реальной форме с реалистичными значениями, ролями, устройствами и возвращенным случаем.

СлойКонтрольный вопросЧто проверить в подтвержденияхТипичная ошибка
ЗадачаЧто пытается завершить отправитель?Задача одним предложением и названная аудиторияФорма копирует внутреннюю базу данных вместо задачи пользователя
РешениеЧто решит или сделает следующий ответственный?Назначенный ответственный, маршрут, срок и результатПоля собираются без ответственного следующего действия
ПоляКаждое ли поле поддерживает действие, доказательство или отчетность?Карта от поля до решенияСлишком много обязательных или дублирующихся вопросов
МакетМожет ли человек отсканировать данные и заполнить форму на телефоне?Реалистичный тест на телефоне с длинными значениямиДлинные разделы, ранние переносы строк, скрытая кнопка отправки
ЛогикаСкрыты ли неуместные вопросы и видны ли обязательные данные?Обычные и условные путиОбязательные поля появляются только после предотвратимой ошибки
ПроверкаМожет ли человек понять и исправить ошибку?Проверки недопустимого диапазона, формата, даты и отсутствующих доказательствОбщие сообщения об ошибках или потерянные ответы
Путь возвратаМожет ли проверяющий запросить точное исправление?Причина возврата, ответственное поле и сохраненная историяПовторная отправка создает дубликат записи
ДокладМожно ли из показателя открыть исходную работу?Переход от дашборда к исходной записиДиаграммы показывают количество без ответственного и действия

Улучшить одну форму за четыре коротких прохода

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

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

01Шаг 01

Удалить поля без назначения

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

  • Назовите аудиторию.
  • Назовите решение.
  • Отметить значения, уже известные системе.
02Шаг 02

Переписать структуру и подписи

Сгруппировать оставшиеся вопросы в естественном порядке и заменить внутреннюю терминологию.

  • Используйте короткие разделы.
  • Добавьте единицы измерения и примеры.
  • Проверьте длину перевода.
03Шаг 03

Проверить мобильную работу, логику и ошибки

Используйте реалистичные значения, файлы, фотографии, расчеты и условные ветви на экране телефона.

  • Вызовите каждую ошибку.
  • Держите кнопку отправки видимой.
  • Проверить самый длинный путь.
04Шаг 04

Провести отправку и возврат

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

  • Сохраняйте историю.
  • Проверьте доступ ролей.
  • Откройте детализацию дашборда.
Форма запроса на оплатуФорма запроса на оплатуСобирайте запросы на оплату, подтверждающие документы, согласования и статус выплаты в одном финансовом рабочем процессе, созданном в Jodoo.Форма онбординга поставщикаФорма онбординга поставщикаСобирайте данные для настройки поставщика, обязательные документы, информацию о налоговой и платежной готовности, примечания по рискам, результаты проверки ответственным, недостающие файлы и статус активации.Шаблон чек-листа контроля качестваШаблон чек-листа контроля качестваВыполняйте проверки качества, фиксируйте подтверждение выполнения и отслеживайте дальнейшие действия в одном настраиваемом процессе чек-листа Jodoo.Шаблон отчета о выезде сервисного специалистаШаблон отчета о выезде сервисного специалистаИспользуйте отчет о выезде сервисного специалиста, чтобы фиксировать состояние объекта, диагностику, выполненные работы, фотографии, комментарии клиента, блокеры и дальнейшие действия.Форма жалобы клиентаФорма жалобы клиентаУправляйте жалобами клиентов с помощью структурированного приема заявок, сбора подтверждающих материалов, отслеживания статуса, последующих действий ответственного и дашбордов по решению.

Вопросы о дизайне форм

Что такое хороший дизайн формы?

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

Сколько полей должно быть в форме?

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

Должно ли каждое поле быть обязательным?

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

Как форма должна работать на мобильном устройстве?

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

Что должно произойти после отправки формы?

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