Дизайн форм и полей ввода: популярные тренды
Вы читаете перевод статьи Сайхо Джорджа “Epic form & input field design trends”. Над переводом работали Полина Фирсова, Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Итак, вы мечтаете обеспечить пользователям, которые впервые зашли на сайт, выдающийся опыт взаимодействия. Кевин Хейл (основатель Wufoo), в своем выступлении на конференции ZURBsoapbox привел отличную аналогию, которая объясняет важность первого впечатления. Кевин сравнил первое впечатление посетителя сайта с первым свиданием:
Если на первом свидании ваш спутник/спутница начинает ковыряться в носу — второго свидания не будет. Но если вы давно женаты, то не броситесь разводиться из-за подобной мелочи. Когда отношения уже устаканились, все совсем иначе.
Думаю, большинство из вас согласны с этим. Итак, мы знаем, что создать классный пользовательский опыт для тех, кто зашел на сайт впервые, очень важно. Давайте подумаем, как это можно сделать. При первом посещении сайта у пользователя формируется впечатление о дизайне в целом. Вы можете внести небольшие изменения в пользовательский интерфейс уже существующего сайта, чтобы произвести более яркое впечатление.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Давайте подумаем: когда посетители чаще всего взаимодействуют с вами на сайте? Когда заполняют форму контактов, чтобы связаться с вами; вводят свои данные для регистрации аккаунта; подписываются на рассылку, чтобы узнать о выходе клевого продукта и т.д.
В общем, скорее всего, они будут использовать форму или какое-то поле для ввода текста. Рассмотрим несколько крутых примеров дизайна форм и полей ввода, которые помогут вам удивить посетителей сайта.
Инновационный дизайн форм
Интерфейс формы с одним полем ввода
Вместо шести полей, которые должен заполнить пользователь, эта минималистичная форма показывает поля по одному друг за другом. Таким образом, пользователя ничего не отвлекает. Есть ненавязчивые визуальные подсказки: аккуратный прогресс-бар и цифры, которые показывают, сколько полей нужно заполнить. Минус в том, что к предыдущему полю вернуться нельзя. Чтобы узнать, как создать такую форму, смотрите урок на codrops.
Интерфейс формы в разговорном стиле
Как вам такой способ сбора информации: пользователь видит обычное предложение, где некоторые слова превращаются в выпадающие списки и служат полями ввода? Посмотрите видеоурок и узнайте, как создать такую форму для своего сайта.
Полноэкранный интерфейс формы
Такой дизайн позволяет посетителям сайта ни на что не отвлекаться при заполнении формы.
Дизайн формы подписки на рассылку
Вот несколько классных анимированных форм подписки, которые заставят клиентов улыбнуться :)
Studio Kit (домен больше не работает)
Дизайн Барта Недервина
Дизайн Даниила Внучкова
Анимированная форма подписки в виде конверта
Форма подписки на рассылку. Дизайн Патрика Рогана
Форма подписки. Дизайн Юлии Хусаиновой
Кнопка-трансформер для формы подписки
Дизайн форм входа/регистрации
Форма регистрации. Дизайн Snapwire
Ребята из Snapwire предлагают посетителям сайта указать при регистрации аккаунт в Инстаграме, чтобы запросить ранний доступ.
Форма входа. Дизайн Фарруха Тиллаева
Кнопка-трансформер для формы входа/регистрации
Форма входа. Дизайн Гленна Хичкока
Форма входа. Дизайн Колина Гарвена
Форма входа. Дизайн Logoswish
Дизайн формы оплаты картой
Форма ввода данных банковской карты. Дизайн Алексея Голованова
Эта форма выглядит как банковская карта. В полях ввода пользователь указывает 16-значный номер карты, срок действия и CVV-код.
Дизайн формы ввода данных карты с одним полем
Это простая форма: посетитель указывает номер и другие данные банковской карты в одном поле ввода.
Дизайн формы оплаты
Дизайн формы оплаты картой
Форма оплаты картой. Дизайн Джесси Поллака
Больше полезных примеров кода вы можете посмотреть на CodeMyUI.com
Надеюсь, вам понравились эти примеры. Если встретите другие классные способы дизайна или анимации форм — напишите мне, и я дополню этот список.
Опубликовано в #SWLH (Startups, Wanderlust, and Life Hacking)
Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Скулкина, Полина Фирсова и Ринат Шайхутдинов.
Ментальные заметки
Каждая карта описывает один принцип человеческого поведения и предлагает способы его применения в разработке веб-сайтов, веб-приложений, а также множества других систем, с которыми взаимодействуют пользователи.
Выпустили приложение под iOS.
