Эволюция контент-маркетинга: новые подходы и мировые практики
Previous
выбрать за меня
4 стратегии, которые поднимут продажи автомобилей в России
Next
ui, юзабилити, ux, оптимизация форм
Юзабилити

Создание и оптимизация форм: мелочи, способные привить любовь с первого взгляда

Автор: Аслан Патов06.10.2014

Когда я думаю о формах регистрации или заказа, в моей памяти всплывают обрывочные воспоминания, связанные с неприятными эпизодами знакомства с теми или иными сайтами. Разумеется, я не могу вспомнить, с какими именно ресурсами был связан такой опыт, но я точно помню, как сильно портилось мое впечатление, если я даже со второго раза не мог добиться банальной регистрации аккаунта. А так как работа с сайтами является частью моей профессиональной деятельности, то, скорее всего, мое раздражение было достаточно умеренным по сравнению с тем негативом, который испытывает рядовой пользователь. Не пытаясь сгущать краски и преувеличивать, можно вполне сухо констатировать – впечатление, испорченное незамедлительно, при первом же знакомстве, ставит крест на дальнейшем успешном взаимодействии юзера с сайтом. Заполнение регистрационной формы и создание нового аккаунта – процесс в определенном смысле интимный и потому требующий от ведущей стороны создания доверительной атмосферы. Никакого сопротивления и отталкивания, только незаметная и моментальная интеграция нового пользователя в структуру ресурса. Давайте поговорим о том, как оправдать и превзойти ожидания юзера, сразу же подарив ему положительный опыт и понимание того, что ему здесь действительно рады.

Формы регистрации, заказа и авторизации

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

Не заставляем придумывать оригинальное имя



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

Структурируем поля удобным и логичным образом

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

ui, юзабилити, ux, оптимизация форм
Регистрация на zappos.com: в первую очередь – самое главное, заботливо обозначенное звездочками.

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



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

ui, юзабилити, ux, оптимизация форм
Старый вариант регистрационной формы Ebay. Несколько громоздко и несобранно.

ui, юзабилити, ux, оптимизация форм
Новый вариант. Несмотря на вынос поля «Фамилия» в правую колонку, простая и четкая структура такой формы не оттолкнет пользователя.

Последний момент, связанный с упорядочиванием формы, относится к вводу пользователями личных данных. Если в рамках вашего проекта форма предусматривает запрос у клиента каких-либо реальных личных данных (телефон или адрес), то лучше всего разместить соответствующие поля в самом конце формы. Конечно, следует оставить приоритет за разделением полей по критерию обязательно\необязательно, поэтому если данные, которые мы требуем от пользователя – обязательные, то поместить их следует в конце блока обязательных полей. Такой подход позволяет, в известной степени, обойти еще один психологический барьер, когда дискомфорт и естественное недоверие при просьбе оставить свои персональные данные мы оставляем на потом, давая человеку время привыкнуть к новой обстановке.

ui, юзабилити, ux, оптимизация форм
Регистрация в PayPal: самая личная информация в конце.

Предпочтительный объем формы



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

ui, юзабилити, ux, оптимизация форм
Аккуратная и располагающая регистрационная форма на Soundcloud.

ui, юзабилити, ux, оптимизация форм
Идеальное воодушевляющее исполнение. Tumblr определенно ценит новых пользователей.

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

ui, юзабилити, ux, оптимизация форм
Asos грамотно разделил форму заказа на несколько понятных и последовательных шагов.

Как подать форму пользователю?

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

ui, юзабилити, ux, оптимизация форм
Хорошая реализация концепции выпадающего окна с компактной регистрационной формой.

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

ui, юзабилити, ux, оптимизация форм
Модальное окно с подобной структурой может быть неплохим вариантом.

Прорабатываем форму – те самые мелочи

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

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

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

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

ui, юзабилити, ux, оптимизация формui, юзабилити, ux, оптимизация форм
Вертикальное расположение подписей – лаконично и однозначно.

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

ui, юзабилити, ux, оптимизация форм
Google Chrome подсвечивает формы ввода желтой рамкой.

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

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

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

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

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

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

ui, юзабилити, ux, оптимизация форм
Примеры корректного обозначения пользовательских ошибок.

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

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

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

Самый простой и распространенный пример этой идеи – демонстрация прогресса заполнения, вроде «Шаг 2 из 5». Это особенно актуально в том случае, если вам не удалось обойтись лаконичной формой и пришлось использовать большое количество полей для заполнения.

ui, юзабилити, ux, оптимизация форм
Информирование о количестве оставшихся шагов создает у пользователя уверенность в будущем.

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

Пароли

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

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

ui, юзабилити, ux, оптимизация форм
Регистрация в одно поле – просто введите свой email и не ломайте голову.

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

Если вы все же решили использовать форму ввода пароля при регистрации, постарайтесь учесть некоторые важные моменты, значительно улучшающие юзабилити. Во-первых, ясно и четко объясняйте пользователю, какие символы можно использовать в пароле. Во-вторых, вместо дублирующего поля, предназначенного для дополнительной проверки правильности ввода пароля, гораздо удобнее и логичнее использовать чекбокс «показать пароль», как это было в старой доброй ICQ.

Ленивая регистрация и легкая авторизация

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

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

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

Очень хорошим способом легкой авторизации является использование модулей различных социальных сетей, таких как Facebook Connect или Sign in with Twitter. Мы подробно описывали полезность этого метода в одной из наших прошлых статей. На текущий момент авторизация через социальные сети является мощной и перспективной альтернативой обычной регистрации.

ui, юзабилити, ux, оптимизация форм
Модули социальных сетей повсюду – для их объединения даже пришлось разрабатывать отдельные плагины, такие как Janrain.

Подтверждение с помощью SMS

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

Недоверие и страх потери средств можно преодолеть, в первую очередь, убедительным и коротким описанием той цели, с которой вы просите пользователя воспользоваться подтверждением через SMS. Еще один способ нивелировать психологический барьер – изменить надпись на кнопке с «Отправить SMS» на более конкретную и менее подозрительную «Зарегистрироваться» или «Сделать заказ».

Также будет очень здорово, если вы не будете в категоричной форме требовать у пользователя подтверждения. По тем или иным причинам пользователь может не захотеть или не смочь ввести код из SMS. Не пускать его по этой причине дальше – не самая лучшая идея с точки зрения оптимизации конверсии. Гораздо более элегантным приемом будет постоянное напоминание о необходимости подтвердить телефон, появляющееся на всех страницах сайта, которые просматривает пользователь. Столкнуть человека с неизбежностью подтверждения через SMS можно непосредственно при совершении им определенного ключевого, финального действия, которым может быть постинг, добавление объявления или оформление заказа.

Немного о CAPTCHA

Из обстоятельного разговора о капче, который имел место в рамках статьи «CAPTCHA, ее прошлое, настоящее и будущее», можно сделать только один вывод – капча портит юзабилити и убивает конверсию. Пробуйте все, что угодно (в том числе то, что мы предлагали в упомянутой статье), но оставляйте капчу для самого крайнего случая. Не затрагивающие юзера методы отсеивания ботов, такие как скрытые ловушки в формах или, наоборот, наличие полей, которые видны только человеку, могут быть отличной альтернативой обременяющей и раздражающей капче.

Рассылки и подписывание пользователя без его ведома

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

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

Безопасность и психологический комфорт

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

Кроме демонстрации исключительно благих целей, не лишним будет успокоить человека, подчеркнув безопасность хранения его личных данных на ваших серверах (очень здорово, если это действительно так). Основные тезисы безопасности:

  • Доступ третьих лиц к информации исключен.
  • Платежная информация (если таковая имеет место) передается по защищенному соединению.
  • Серверы с персональными данными имеют надежную защиту.

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

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.