10 правил хорошей кнопки
1. Она кликабельна
Что может нам в этом помочь? Первое — форма. У кнопки довольно узнаваемая форма — прямоугольная, прямоугольная со скругленными углами (меньше или больше), реже круглая. При создании сервисов очень важно делать кнопки привычной формы.
Второе — это контраст. Если кнопка является главным CTA, то она должна быть контрастной. Она может быть большой или занимать вообще всю страницу целиком. Также очень важен цвет — кнопка должна не теряться и не спорить с другими объектами рядом.
Третье — тень. В целом это тренд, но гугл возвел его в научный культ. Тень помогает понять, что кнопка кликабельна.
2. Действие
Кнопка — это действие, поэтому на ней должен быть написан глагол. В форме поиска по сайту «Найти» — глагол, а «Поиск» — нет. Первый вариант призывает нажать на себя, поэтому лучше. Например, если в конце страницы вам надо, чтобы пользователь зашел в личный кабинет, пишите не просто «Личный кабинет», а «Перейти в личный кабинет».
3. Что произойдет, если я нажму на нее?
Кнопка должна четко давать понять, что произойдет, если на нее нажать. Она не должна вводить пользователя в заблуждение.
4. Кнопка лучше ссылки
Кнопка всегда лучше ссылки. Исключение — когда ссылка находится в тексте и выступает в роли вспомогательного элемента, подсказки, но не в случае если она является логическим переходом к следующей странице.
5. Кнопка знает свое место
Важна ли кнопка? Если да, используйте все вооружение, чтобы сделать ее заметной и вкусной. Если нет, сделайте на ней меньше акцента, убрав цвет или изменив расположение. Или показывайте только в определенной ситуации.
6. Необходимость кнопки
Здесь правда требуется кнопка, чтобы оставить заявку? А может, лучше сразу показать формы ввода? Всегда нужно думать, действительно ли пользователю необходимо куда-то нажимать, чтобы достичь своей цели.
7. Наведение
Хорошая кнопка при наведении подсказывает, что на нее можно нажать.
8. Нажатие
Хорошая кнопка реагирует на тапы и клики. О таких микровзаимодействиях можно почитать в заметке от наших разработчиков.
9. Загрузка
Хорошая кнопка всегда дает знать, если пользователю необходимо подождать.
10. В нее легко попасть
Читайте об этом здесь.
1. Она кликабельна
Что может нам в этом помочь? Первое — форма. У кнопки довольно узнаваемая форма — прямоугольная, прямоугольная со скругленными углами (меньше или больше), реже круглая. При создании сервисов очень важно делать кнопки привычной формы.
Второе — это контраст. Если кнопка является главным CTA, то она должна быть контрастной. Она может быть большой или занимать вообще всю страницу целиком. Также очень важен цвет — кнопка должна не теряться и не спорить с другими объектами рядом.
Третье — тень. В целом это тренд, но гугл возвел его в научный культ. Тень помогает понять, что кнопка кликабельна.
2. Действие
Кнопка — это действие, поэтому на ней должен быть написан глагол. В форме поиска по сайту «Найти» — глагол, а «Поиск» — нет. Первый вариант призывает нажать на себя, поэтому лучше. Например, если в конце страницы вам надо, чтобы пользователь зашел в личный кабинет, пишите не просто «Личный кабинет», а «Перейти в личный кабинет».
3. Что произойдет, если я нажму на нее?
Кнопка должна четко давать понять, что произойдет, если на нее нажать. Она не должна вводить пользователя в заблуждение.
4. Кнопка лучше ссылки
Кнопка всегда лучше ссылки. Исключение — когда ссылка находится в тексте и выступает в роли вспомогательного элемента, подсказки, но не в случае если она является логическим переходом к следующей странице.
5. Кнопка знает свое место
Важна ли кнопка? Если да, используйте все вооружение, чтобы сделать ее заметной и вкусной. Если нет, сделайте на ней меньше акцента, убрав цвет или изменив расположение. Или показывайте только в определенной ситуации.
6. Необходимость кнопки
Здесь правда требуется кнопка, чтобы оставить заявку? А может, лучше сразу показать формы ввода? Всегда нужно думать, действительно ли пользователю необходимо куда-то нажимать, чтобы достичь своей цели.
7. Наведение
Хорошая кнопка при наведении подсказывает, что на нее можно нажать.
8. Нажатие
Хорошая кнопка реагирует на тапы и клики. О таких микровзаимодействиях можно почитать в заметке от наших разработчиков.
9. Загрузка
Хорошая кнопка всегда дает знать, если пользователю необходимо подождать.
10. В нее легко попасть
Читайте об этом здесь.