Новости / 21 пример эффективного дизайна онлайн-форм - 2

21 пример эффективного дизайна онлайн-форм - 2

06.052014
1818
21 пример эффективного дизайна онлайн-форм - 2

21 пример эффективного дизайна онлайн-форм - 2

Мы продолжаем делиться с вами подборкой эффективных решений при создании онлайн-формы на сайте. Ознакомиться с первой частью.

Оплата картой с экрана мобильного

Здесь Murat Mutlu на сайте Dribble приводит не только пример удобного индикатора прогресса, но и опцию «Сканирование карты». Возможность сканирования информации с кредитной карты для автоматического ввода данных специально адаптирована под сенсорные экраны.

Определение типа карты

На Github, тип карты определяется сразу, как только Вы начинаете вводить номер карты.

Это избавляет пользователя от заполнения дополнительного поля. Всё, что позволяет сократить процесс ввода данных — приветствуется.

Стикеры для формы обратной связи

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

Повторная покупка — легко

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

Привлекательный дизайн

Форма «оценки сортов пива» на сайте Barley's обладает не только интересным дизайном, но еще и удобна и понятна с одного взгляда. Подобными привлекательными ссылками люди будут делиться со своими друзьями и знакомыми — просто из-за приятного дизайна.

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

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

Сопутствующие вопросы

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

Всем, кто следит за трендами интернет-рынка - подарок. Промокод A25-1572 на 25% скидку на трудочасы, отзывы и любые услуги магазина А25. 

Наверх

Форма заказа

FB Twitter YouTube Instagram Google+