UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 5 способов сделать кнопку призыва к действию интуитивно понятной
Редакція
Редакція

Опубліковано

5 способов сделать кнопку призыва к действию интуитивно понятной

#ux

Нажать или не нажать – это вопрос, который приходит в голову пользователю, когда он видит кнопку призыва к действию.

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

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

Упорядочьте кнопки в соответствии с паттерном сканирования

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

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

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

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

Различайте кнопки и текст при помощи формы

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

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

Текстовые кнопки не только вводят в заблуждение, но также являются меньшими целями нажатия (tap targets). Размещение текстовой метки внутри формы кнопки делает призыв к действию заметнее, и пользователю легче его нажать.

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

Выделите прогрессивные действия цветом

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

В этом примере «checkout» («оформить заказ») имеет высокий приоритет, поскольку направляет пользователей к цели. Но не ясно, какое действие имеет средний приоритет «view cart» («перейти в корзину») или «keep shopping» («продолжить покупки»).

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

Изучив действия, становится ясно, что «Перейти в корзину» имеет средний приоритет, а «Продолжить покупки» – низкий приоритет. Легко увидеть, какое действие продвигает пользователей к их цели, а какое отдаляет их от нее.

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

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

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

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

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

Варьируйте полужирный стиль текстовых меток

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

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

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

Добавьте иконку к действию с высоким приоритетом

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

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

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

Ваши кнопки интуитивно понятны?

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


Перевод статьи Anthony

Найновіші коментарі (0)