Как я проектирую нормальные формы


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

— Задаюсь вопросами откуда берутся данные, куда они попадают и в каком виде будут храниться и отображаться после завершения работы с формой. Например, если я проектирую форму регистрации, то обязательно прикидываю структуру приветственного письма (ведь оно формируется после отправки данных и частично использует их: «Здравствуйте, %Юзернейм%»);
— Показываю, что произойдёт после отправки формы (в том числе предусматриваю «крутилки», которые показывают, что что-то происходит при медленном коннекте);
— Показываю, где отображать сообщение об ошибке, если что-то пойдёт не так;
— Описываю в функциональной спецификации (ФС), какие типы ошибок возникают для конкретной формы.

Например, вот типы ошибок для формы на скриншоте (пишу уже даже не задумываясь, это не особо сложная наука):
— Ошибка по тайм-ауту;
— Неверный формат данных в текстовом поле;
— Текстовое поле не заполнено.

Реже я расписываю в ФС формат данных и ограничение по количеству вводимых в поля символов.

Почти всегда в ФС приходится писать для формы какие-нибудь тезисы уже после того, как все основные моменты описаны. Вот, например, тезис для формы на скриншоте: «Импортируются только те монетки, которых до этого не было в вочлисте, дубликаты игнорируются».

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

Если десять лет назад я продавал ФС к каждому десятому проекту, то сегодня к каждому первому. Мне очень легко объяснить клиенту, почему без неё проект будет разрабатываться дольше и дороже.


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *