Почему вкладки и «гармошки» вызывают проблемы у пользователей

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

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

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

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

Эплсид говорит, что очень часто сложности возникают с формами в виде «вертикальной гармошки», где все поля расположены одно под другим и одновременно можно развернуть несколько из них. В качестве примера эксперт приводит мобильное приложение ритейлера Foot Locker — информация о доставке товара представлена в таком виде, что это смутило пользователей, участвовавших в юзабилити-тестировании. Людям было трудно понять, как выбрать нужную опцию и как переключаться между полями формы. К примеру, возникал вопрос о том, сохранит ли кнопка «Обновить» ('Update') данные в трех полях раздела или обновит все разделы формы (на скриншоте свернуты).

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

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

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

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

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

Является ли эта отправка полной или только частичной?

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

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

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

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

Процесс оплаты на сайте Apple

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

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

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

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

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

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

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

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

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

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

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