Дизайн форм и полей ввода: популярные тренды

135

Вы читаете перевод статьи Сайхо Джорджа “Epic form & input field design trends”. Над переводом работали Полина Фирсова, Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.


Итак, вы мечтаете обеспечить пользователям, которые впервые зашли на сайт, выдающийся опыт взаимодействия. Кевин Хейл (основатель Wufoo), в своем выступлении на конференции ZURBsoapbox привел отличную аналогию, которая объясняет важность первого впечатления. Кевин сравнил первое впечатление посетителя сайта с первым свиданием:

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

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


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


Давайте подумаем: когда посетители чаще всего взаимодействуют с вами на сайте? Когда заполняют форму контактов, чтобы связаться с вами; вводят свои данные для регистрации аккаунта; подписываются на рассылку, чтобы узнать о выходе клевого продукта и т.д.

В общем, скорее всего, они будут использовать форму или какое-то поле для ввода текста. Рассмотрим несколько крутых примеров дизайна форм и полей ввода, которые помогут вам удивить посетителей сайта.

Инновационный дизайн форм

Интерфейс формы с одним полем ввода

Вместо шести полей, которые должен заполнить пользователь, эта минималистичная форма показывает поля по одному друг за другом. Таким образом, пользователя ничего не отвлекает. Есть ненавязчивые визуальные подсказки: аккуратный прогресс-бар и цифры, которые показывают, сколько полей нужно заполнить. Минус в том, что к предыдущему полю вернуться нельзя. Чтобы узнать, как создать такую форму, смотрите урок на codrops.

Интерфейс формы с одним полем ввода

Интерфейс формы в разговорном стиле

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

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

Полноэкранный интерфейс формы

Такой дизайн позволяет посетителям сайта ни на что не отвлекаться при заполнении формы.

Полноэкранный интерфейс формы

Дизайн формы подписки на рассылку

Вот несколько классных анимированных форм подписки, которые заставят клиентов улыбнуться 🙂

Studio Kit (домен больше не работает)

Форма подписки. Дизайн Studio Kit

Дизайн Барта Недервина

Форма подписки. Дизайн Барта Недервина

Дизайн Даниила Внучкова

Форма подписки. Дизайн Даниила Внучкова

Анимированная форма подписки в виде конверта

Анимированная форма подписки в виде конверта

Форма подписки на рассылку. Дизайн Патрика Рогана

Форма подписки. Дизайн Патрика Рогана

Форма подписки. Дизайн Юлии Хусаиновой

Форма подписки. Дизайн Юлии Хусаиновой

Кнопка-трансформер для формы подписки

Кнопка-трансформер для формы подписки

Дизайн форм входа/регистрации

Форма регистрации. Дизайн Snapwire

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

Форма регистрации. Дизайн Snapwire

Форма входа. Дизайн Фарруха Тиллаева

Форма входа. Дизайн Фарруха Тиллаева

Кнопка-трансформер для формы входа/регистрации

Кнопки-трансформеры для входа и регистрации

Форма входа. Дизайн Гленна Хичкока

Дизайн Гленна Хичкока

Форма входа. Дизайн Колина Гарвена

Форма входа. Дизайн Колина Гарвена

Форма входа. Дизайн Logoswish

Форма входа. Дизайн Logoswish

Дизайн формы оплаты картой

Форма ввода данных банковской карты. Дизайн Алексея Голованова

Эта форма выглядит как банковская карта. В полях ввода пользователь указывает 16-значный номер карты, срок действия и CVV-код.

Форма ввода данных карты. Дизайн Алексея Голованова

Дизайн формы ввода данных карты с одним полем

Это простая форма: посетитель указывает номер и другие данные банковской карты в одном поле ввода.

Дизайн формы ввода данных карты с одним полем

Дизайн формы оплаты

Дизайн формы оплаты

Дизайн формы оплаты картой

Форма оплаты картой. Дизайн Skeuocard

Форма оплаты картой. Дизайн Джесси Поллака

Форма ввода данных банковской карты. Дизайн Джесси Поллака

Больше полезных примеров кода вы можете посмотреть на CodeMyUI.com

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

Опубликовано в #SWLH (Startups, Wanderlust, and Life Hacking)



Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →
Формы

Посты в категории UI-дизайн

10 UX-татуировок, которые я набил пока дизайнил 10 000 экранов интерфейсов

Ринат Шайхутдинов

18 июня 2019

Посты в категории UI-дизайн

5 техник, которые помогут сделать call to action интуитивно понятным

Ринат Шайхутдинов

7 мая 2019

Посты в категории UI-дизайн

Оптические иллюзии в дизайне интерфейсов (для фанатиков дизайна)

Ольга Жолудова

3 марта 2019