Chulakov Design

​​10 правил хорошей кнопки

1. Она кликабельна

Что может нам в этом помочь? Первое — форма. У кнопки довольно узнаваемая форма — прямоугольная, прямоугольная со скругленными углами (меньше или больше), реже круглая. При создании сервисов очень важно делать кнопки привычной формы. Второе — это контраст. Если кнопка является главным CTA, то она должна быть контрастной. Она может быть большой или занимать вообще всю страницу целиком. Также очень важен цвет — кнопка должна не теряться и не спорить с другими объектами рядом. Третье — тень. В целом это тренд, но гугл возвел его в научный культ. Тень помогает понять, что кнопка кликабельна.

2. Действие

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

3. Что произойдет, если я нажму на нее?

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

4. Кнопка лучше ссылки

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

5. Кнопка знает свое место

Важна ли кнопка? Если да, используйте все вооружение, чтобы сделать ее заметной и вкусной. Если нет, сделайте на ней меньше акцента, убрав цвет или изменив расположение. Или показывайте только в определенной ситуации.

6. Необходимость кнопки

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

7. Наведение

Хорошая кнопка при наведении подсказывает, что на нее можно нажать.

8. Нажатие

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

9. Загрузка

Хорошая кнопка всегда дает знать, если пользователю необходимо подождать. 10. В нее легко попасть

Читайте об этом здесь.