Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Разработка качественных корпоративных сайтов, для малого и среднего бизнеса.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
30
Битрикс24

Битрикс24

www.bitrix24.ru

22
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Devicerra

Devicerra

devicerra.com

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

11
myPreza

myPreza

mypreza.ru

9
Reader

Reader

Интернет-журнал о современных технологиях.

9
ADN Digital Studio

ADN Digital Studio

adn.agency

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

UX дизайн для форм регистраций

1 384 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Формы в 2015 году являются важной частью веб-дизайна. Большое влияние на формирование такого утверждения произвел рост рынка мобильных устройств. Из-за этого, разработчики, стали больше уделять внимания различным оптимизациям.

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

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

Раньше запрос большого количества личных данных при регистрации считался нормой. Мало ли, вдруг на будущее понадобятся. Сегодня такой подход уже себя не оправдывает. Форма должна содержать не больше полей, чем необходимо для совершения целевого действия. Никто не любит заполнять простыни экранов излишне подробными данными о себе. Нужны лишь поля, без которых невозможно обойтись в данном конкретном случае.

blog-04-08-0.jpg

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

Люди не любят регистрации

Люди всё более неприязненно начинают относится к традиционным процессам регистрации. Согласно данным исследований, 86% пользователей меняют своё поведение, если их вынуждают создавать учётную запись для совершения какого-либо действия.

Данное исследование проводилось Blue Research и показало, что если пользователей принуждают к регистрации, то:

  • 54% людей решают покинуть сайт;
  • 26% поищут сайт, где не потребуется регистрация;
  • 6% покинут сайт и будут избегать его посещения в будущем;
  • 14% останутся на сайте и закончат регистрацию.

В дополнение к этому, 88% опрошенных ответили, что при заполнении формы дали бы неверную информацию о себе. Также на предложение использовать данные регистрации с другого сайта, на котором пользователь был зарегистрирован ранее, 90% отреагировало бы закрытием вкладки. Общий смысл исследования прост: пользователи не любят регистрации и предпочитают избегать их, где только это возможно. И степень этого сопротивления продолжает расти. Имея выбор между обычной регистрацией и возможностью входа на сайт при помощи социальных сетей, большинство пользователей охотно выберут второй вариант. Итак, формы должны быть предельно короткими и простыми. С точки зрения бизнеса может быть полезно иметь много информации о клиентах, но сложные формы могут отпугнуть людей ещё до совершения первой сделки. Воздействие серьёзное, поэтому лучше отказаться от сбора лишних данных. Так выгоднее.

b_55dedf8fb0517.jpg

Удобство

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

Для упрощения процесса заполнения формы некоторые сложные вопросы можно разбивать на несколько простых, позволяющих ответить «да/нет» либо поставить простое число. Люди неглупые, но вникать в то, что им не особенно нужно, мало кому нравится. Поэтому необходимо максимально упростить и структуру, и варианты ответов на вопросы. Числа нужно размещать вначале вопросов, потому как человек заканчивает читать тогда, когда сочтёт, что понял вопрос и знает, как ответить. В целом, любые ключевые моменты следует размещать вначале вопросов формы. Длинными предложениями злоупотреблять также не стоит.

Повторяющиеся поля

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

Если же пароли в форме даются под разные имена, то менеджер паролей просто не сможет корректно запомнить их ввиду несоответствия имён. Это проблема. Пользователю нужно будет внимательно следить, чтобы вписанные имена точно совпадали, без ошибок. Если же вам непременно необходимо ввести 2 поля для имени/пароля, советуем сделать одну пару полей невидимой в коде. Так менеджер паролей не сможет ошибиться и запутаться.

Дублирование email очень распространено. Многие уже начали понимать, что это ошибка, часто ведущая к снижению конверсии. Смысла в дублировании нет: если вы действительно хотите совершить действие, то и так проверите правильность ввода почтового адреса, дублировать ни к чему. Большинство из нас в своём уме, мы можем быть внимательными, когда хотим.

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

  • Оставляйте достаточно пустого пространства для ввода данных;
  • Используйте чёрный шрифт и белый фон для наглядности;
  • Увеличьте размер шрифта и полей для заполнения – зрение не у всех хорошее.

Также вы можете добавить сообщение отличного от основного цвета, в котором будет отображаться адрес почты, на который уйдёт письмо. Для наглядности.

blog-04-08-1.jpg

На примере для выделения использован красный цвет. Но у многих он ассоциируется с ошибкой. Человек начнёт проверять себя. Поэтому лучше выбрать другой цвет. Вы можете провести А-В тестирование на данном элементе, перекрашивая его в различные цвета. Мелочь, но она может оказаться важной. Если делать, то всё и хорошо.

Названия полей форм

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

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

Выводы

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

Перевод статьи:http://www.sitepoint.com/ux-design-passwords-regis...

+2
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать