Платформа

Что нужно знать о UX-дизайне кнопок на сайте?

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

1. Кнопка выглядит как кнопка

Кнопка – это в первую очередь элемент взаимодействия, а не декора. Знакомясь с интерфейсом, пользователь должен с первого взгляда понимать, что здесь кликабельно, а что нет. Поэтому важно, чтобы кнопка выглядела как кнопка: прямоугольная, с прямыми или закругленными углами (в крайнем случае, если этого требует дизайн, круглая), отбрасывающая тень, плюс-минус стандартная по размеру.

2. На кнопку удобно нажимать

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

3. Кнопка реагирует на взаимодействие

Состояние кнопки подсказывает пользователю, успешно ли он на нее нажал или нет. Поэтому всякая уважающая себя кнопка должна:

• реагировать на наведение курсора в десктопных версиях;

• переходить в «нажатое» состояние после того, как по ней кликнули курсором или пальцем;

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

4. Текст на кнопке не вводит в заблуждение

Нажимая на кнопку, человек должен ясно понимать, что именно сейчас произойдет. Сразу классический антипример.

UX-web-digital

Ясно, что в этом случае текст на кнопках может несколько озадачить пользователя. Чтобы не создавать путаницу, логичнее назвать кнопки так.

UX-digital-web

5. Кнопок много… еще как бывает

Чем больше на сайте целевых действий, тем выше вероятность, что пользователь распылит свое внимание и не совершит вообще ни одного. Так что здесь важно не переборщить. В идеале, на посадочной странице должно быть не больше двух предлагаемых действий: купить товар и заказать обратный звонок. На крупном сайте – не больше трех-четырех: предыдущие два + подписаться на рассылку или провести тест-драйв услуги.

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

 

Похожие материалы:

Кнопка, на которую нажмут: 5 дизайн-приемов по созданию CTA

Юзабилити-х**билити: 6 мифов, в которые до сих пор верят

Как будет выглядеть солидный интернет-магазин летом 2020

Что такое UX-копирайтинг, зачем он нужен и где этому научиться?

Поделиться
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...