Сооснователь исследовательской фирмы Baymard Institute Дж. Эплсид опубликовал статью о том, как формы на сайтах сделать понятными для посетителей и избежать распространенных ошибок.

Формы в виде «гармошки» и вкладок

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

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

 

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

 

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

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

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

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

Недостаток предсказуемости

Эплсид говорит, что очень важно понимать ключевую проблему при работе с разнообразными нестандартными формами в виде «гармошки» и вкладок — пользователь не понимает, как именно работает в них кнопка «Отправить».

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

По мнению Эплсида, в этом случае проблему решает именно контент, а вовсе не дизайнер — нужно взять данный прием на вооружение и сделать содержание странички «говорящим».

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

Еще один пример несколько непонятной формы, которая выполнена с применением вкладок — это настройки Gmail.

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

 

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

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

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

Оплата на официальном сайте компании Apple

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

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

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

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

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

Формы в виде вкладок сложнее сами по себе, так как визуально кажется, что в одну единицу времени может быть открыта лишь одна вкладка.

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

Дж. Эплсид думает, что кнопка для сохранения информации должна находится внутри каждой вкладки, подчеркивая при этом, что относится только к информации на ней.

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

Альтернативы

Использование «гармошек» и вкладок может спровоцировать появление проблем, поэтому создателям интерфейсов следует рассмотреть альтернативные типы форм.

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

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

На сайте Best Buy радиокнопки применяются, чтобы подчеркнуть взаимоисключаемость двух вариантов оплаты. Если бы существовала возможна одновременная оплата PayPal и картой, испольлзовались бы чекбоксы.

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

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

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

Тем не менее, разработчикам нужно еще на стадии создания дизайна подумать о том, будет ли он пользователю понятен.