Три стратегии для решения проблемы случайных нажатий на сенсорных экранах

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

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

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

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

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

Есть три подхода к проблеме:

Можно оставить всё как есть, и случайные клики нельзя будет отменить. Однако для важных действий это неприменимо.

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

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

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

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

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

Если пользователь кликнет по логотипу магазина кроссовок Foot Locker при заказе через мобильную версию сайта, появится диалоговое окно с просьбой подтвердить намерение покинуть страницу.

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

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

Просьба подтвердить намерение не обязательно принимает классическую форму диалогового окна — есть и более элегантные варианты.

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

Клавиша «Открыть» в приложении App Store для iOS после нажатия становится клавишей «Установить» — для активации необходимо два клика. Похоже на взаимодействие из «Часов», но с одним отличием: элемент не меняет положение, поэтому подтвердить действие можно быстрее. Однако эта клавиша более уязвима для случайных двойных нажатий.

Есть много разных вариантов одного решения: пользователю необходимо произвести действие дважды. Три способа выше — Foot Locker, «Часы» и App Store — наиболее распространены. Необязательно заставлять пользователя кликать дважды. Также можно использовать свайп или нажатие с удержанием.

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

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

Свайп — более сложное действие, чем нажатие, и в интерфейсах используется редко. Хотя пользователи знакомы с таким жестом по способу разблокировки ранних версий iOS и Android, ни в одной из этих операционных систем он больше не используется. Поэтому свайп вскоре может уйти в прошлое.

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

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

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

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

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

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

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

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

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

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

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

Решением может стать 24-часовой промежуточный период, когда пользователь может отредактировать или отменить заявку. Затем она автоматически отправляется в отдел кадров, и изменить её уже нельзя. Если пользователь ничего не сделал, заявка остаётся неизменной, однако при этом у него было достаточно времени на то, чтобы в случае необходимости внести правки.

В мобильных версиях сайтов Amazon и B&H Photo пользователи могут редактировать или отменять свои заказы сразу в корзине. Заказ товара — пример процесса, который можно сделать обратимым на небольшой временной промежуток (30 минут или несколько часов после размещения или до обработки на складе).

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

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

Если действия нельзя отменить или обратить (отправка электронных писем, сообщений), их «цену» — для бизнеса и конечных пользователей — в рамках трёх стратегий можно рассчитать следующим образом (номера пунктов совпадают с номерами стратегий):

Если действия можно обратить (удалить случайно опубликованную запись, позвонить в службу поддержки и так далее), «стоимость» распределяется так:

Нужно выбирать стратегию с наибольшей окупаемостью инвестиций. Существует две закономерности:

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

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

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

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

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

#Интерфейсы