Главная / Сайт / 7 основных правил дизайна кнопок

7 основных правил дизайна кнопок

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

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

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

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

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

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

 4. Правильно выбирайте размер кнопок
Размер должен отражать приоритет этого элемента. Важные кнопки должны выглядеть как ВАЖНЫЕ. Увеличьте размер, выберите контрастный цвет, чтобы привлечь внимание пользователя.

Позаботьтесь о пользователях мобильных устройств
Во многих мобильных приложениях кнопки слишком маленькие. Это часто приводит к «мискликам» (промахам).

При выборе подходящего размера лучше всего опираться на исследование MIT Touch Lab. Выяснилось, что средний размер подушечек пальцев 10−14 мм, а кончиков пальцев — 8−10 мм. Поэтому оптимальный размер кнопки 10×10 мм.

 5. Соблюдайте порядок кнопок
Кнопки должны воспроизводить разговор между пользователем и системой. Задайте себе вопрос: что пользователь ожидает увидеть на экране?

Например, кнопки «Предыдущий/Следующий» в пагинации. Логично, что кнопка, которая переносит пользователя вперёд, должна находится справа. А слева — кнопка, которая переносит его назад.

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

ТОП 100 эффективных рекламных заголовков.

Как увеличить средний чек интернет-магазина

Реклама в историях — теперь и на Facebook

Задачи ретаргетинга

Как правильно использовать Google Trends

Создание рекламы из Instagram

Тренды продвижения в Инстаграм 2020 году

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

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

Проверьте также

Память и реклама

Память и реклама

Различают три вида памяти: сенсорную, кратковременную и долговременную. Кроме того, принято различать формы памяти: двигательная, механическая, …

один комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *