Лого vc.ru

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

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

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

Поделиться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Статьи по теме
Почему пользователи вводят меньше данных, если в форме есть обязательные поля30 апреля 2014, 13:56
Кейс: как создатель сервиса DistroKid увеличил конверсию в форме оплаты на 60%06 июня 2014, 14:49
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Статью можно сократить до вида «как не надо/как надо».

У ВК отличная реализация в настройках

0

Ничего отличного. В каждой вкладке каша из автосохраняющихся чекбоксов и кнопок сохранить.

0

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

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

0

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

Главное - это внутри рамки, очерчивающей всю гармошку, или вне ее находится кнопка...

0

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

0

Лучше уж использовать последовательное заполнение с кнопкой "далее" и подписью необязательных полей.

0

ЦП, куда вы вечно юзерпик из шапки прячете? То есть, то нет, что за А/Б тест? =)

Я как порядочный исключил домен ЦП в адблоке. =) Так что не адблок.

0

Бла-бла-бла... Недостаток предсказуемости... бла-бла-бла...

И ни слова о женщинах. А ведь с ними возникают самые большие проблемы

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

0

А посоветуйте сервис создания форм вроде google forms, jotform, wufooo - хочется простой, красивый и бесплатный. Спасибо!

0

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

Сейчас обсуждают
Татьяна Бочкарева

Есть мысли о тезисе номер два. Очень скоро грядет революция в области перевозок людей. Люди будут перемещаться на воздушном метро, стоимость строительства которого в 100! раз дешевле подземного, а скорость до 500 км/ч при цене строительства путевой структуры в $5 млн за 1 км. Причем перемещаться люди будут почти бесплатно, так же как мы сейчас бесплатно звоним через Скайп. Окупаемость будет за счет попутных грузов. Как вам такое - ездить на каждые выходные на свою дачу с Москвы до Анапы за 3 часа?
Уже сейчас можете увидеть этот транспорт в движении (он запущен 29 ноября 2016г). Поддерживайте этот проект воздушного метро (струнный транспорт). Ещё можно успеть стать инвестором данного проекта. Увидеть его в движении и подписаться на новости можно на сайте проекта: goo.gl/qlfD2z

«Через 50 лет стран не будет — останутся только города»: основные тезисы лекции Кьелла Нордстрема о будущем
0
조냐 박

Если я пользуюсь только этими бесплатными 15 ГБ, то мне не о чем волноваться?

Google предупредила российских пользователей о повышении цен с 2017 года из-за «налога на Google»
0
Amar Ak

500-200? И даже не принято? В какой развитой стране такое есть? Так проще всем онлайн магазинам перенестись в юрисдикцию Гонконга и торговать, никаких пошлин, никакого НДС, раб сила по 200usd/месяц... и цены будут хорошие, правда в россии будет еще меньше рабочих мест и налоговых сборов...

Власти России намерены снизить беспошлинный порог для ввоза интернет-посылок до 500 евро с середины 2018 года
0
Johnny Vorony

Мне очень стыдно, коллеги, но до этой статьи я не знал кто такая Алена Владимирская.

Алёна Владимирская и оператор Wi-Fi в московском метро запустили проект с бесплатными карьерными советами
0
Арчибальд

Конечно! Некоторые не опускаются до ножей и кредиток,а строят свои капиталы на пирамидах!

PewDiePie сохранил лидерство в рейтинге самых высокооплачиваемых YouTube-блогеров по версии Forbes
0
Показать еще