Несколько похожих кнопок. Как помочь пользователям выбрать нужную?

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

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

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

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

Кнопка "Отправить деньги" позволяет пользователям переслать свои деньги другому человеку, а кнопка "Перевести" — перевести средства на другой банковский счет.

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

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

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

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

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

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

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

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

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

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

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