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

Формы: поля ввода и кнопки

3 июля 2016, 21:48

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

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

Форма — базовый комплект интерфейса

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

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

Мой главный совет начинающим дизайнерам: не придумывайте велосипед. Изучайте опыт ведущих продуктовых компаний, их интерфейсы и гайдлайны. Для начала предлагаю ознакомиться с рассказом Данилы Ковчего о графических интерфейсах, особое внимание обратите на раздел «система». А оценить большую систему и гайдлайн можно на примере материал дизайна.

Инпуты

Я выделяю 3 типа полей ввода: стандарт, компакт и тинькофф.

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

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

Поля, которые используются в интерфейсах сервисов тинькофф банка. Они объединяют достоинства первых двух типов полей — они компактны и одновременно информативны в заполненном состоянии.

Кнопки

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

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

Вместо заключения

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

Прямо сейчас набирают силу дизайнерские концепции Zero UI и No UI. А математики и разработчики улучшают методы анализа и использования больших данных и нейросетей.

Поделиться
Запинить
Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter