Топ-100 7 основных правил проектирования кнопок | UXLab

7 основных правил проектирования кнопок

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

1. Делайте кнопки похожими на кнопки

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

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

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

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

Слабые различимые знаки — еще более серьезная проблема для мобильных пользователей. В попытке понять, является ли отдельный элемент интерактивным или нет, пользователи ПК могут навести курсор на элемент и проверить, изменится ли его состояние. У мобильных пользователей нет такой возможности. Чтобы понять, является ли элемент интерактивным, пользователи должны нажать на него — нет другого способа проверить интерактивность.

Не предполагайте, что что-то в вашем интерфейсе очевидно для ваших пользователей

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

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

Используйте для своих кнопок знакомый дизайн

Вот несколько примеров кнопок, знакомых большинству пользователей:

  • Кнопка с фоном и квадратными углами
  • Кнопка с фоном и закругленными углами
  • Кнопка с фоном и тенью
  • Прозрачная кнопка

Кнопки в дизайне

Среди всех этих примеров дизайн «Кнопка с фоном и тенью» является самым понятным для пользователей. Когда пользователи видят размерность кнопки, они сразу же узнают, что это то, на что можно нажать.

Не забывайте о свободном пространстве

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

Как пользователь, вы не можете определить поле это или кнопка
Как пользователь, вы не можете определить поле это или кнопка

2. Размещайте кнопки там, где пользователи ожидают их найти

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

По возможности используйте традиционные макеты и стандартные шаблоны интерфейса

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

Не играйте в «найди кнопку» со своими пользователями

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

3. Кнопки с подписью

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

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

Неясная подпись «ОК» не говорит о действии, совершаемом кнопкой
Неясная подпись «ОК» не говорит о действии, совершаемом кнопкой

Не понятно, что означают «ОК» и «Отмена» в этом диалоговом окне. Большинство пользователей спросят себя: «Что произойдет, когда я нажму «Отмена»?

Никогда не создавайте диалоговое окно или форму, состоящую исключительно из двух кнопок «ОК» и «Отмена».

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

Подпись «Удалить» четко сообщает пользователям о действии
Подпись «Удалить» четко сообщает пользователям о действии
Потенциально опасное действие ‘Заблокировать карту’ окрашено в красный цвет. Изображение: Ramotion
Потенциально опасное действие ‘Заблокировать карту’ окрашено в красный цвет. Изображение: Ramotion

4. Правильно подбирайте размер кнопки

Размер кнопки должен отражать приоритет этого элемента на экране. Чем больше кнопка, чем важнее действие.

Установите приоритетность кнопок

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

Dropbox использует размер и цветовой контраст, чтобы привлечь внимание пользователя к кнопке призыва к действию «Попробуйте Dropbox Business бесплатно»
Dropbox использует размер и цветовой контраст, чтобы привлечь внимание пользователя к кнопке призыва к действию «Попробуйте Dropbox Business бесплатно»

Делайте кнопки удобными для пользователей мобильных телефонов

Во многих мобильных приложениях кнопки слишком малы. Из-за этого пользователи часто опечатываются.

Слева: Кнопки подходящего размера. Справа: Кнопки слишком мелкие. Изображение: Apple
Слева: Кнопки подходящего размера. Справа: Кнопки слишком мелкие. Изображение: Apple

Исследование MIT Touch Lab показало, что средние значения для подушечек пальцев составляют от 10 до 14 мм, а кончиков пальцев — 8−10 мм. Это делает квадрат 10 мм x 10 мм хорошим минимальным размером для зоны касания.

Изображение: uxmag
Изображение: uxmag

5. Позаботьтесь о порядке

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

Интерфейс — это разговор с вашими пользователями

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

6. Избегайте использования слишком большого количества кнопок

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

7. Обеспечение визуального или звукового фидбека при взаимодействии

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

Почему это происходит? Как люди, мы ожидаем определенную обратную связь после того, как мы взаимодействуем с объектом. Это может быть визуальный, звуковой или тактильный фидбек — все, что подтверждает факт взаимодействия.

Пользовательский интерфейс обеспечивает визуальный фидбек, который фиксирует нажатие кнопки. Изображение: Vadim Gromov
Пользовательский интерфейс обеспечивает визуальный фидбек, который фиксирует нажатие кнопки. Изображение: Vadim Gromov

Для некоторых операций, таких как загрузка, стоит не только подтвердить ввод, но и показать текущее состояние процесса.

Эта кнопка преобразуется в индикатор прогресса, чтобы продемонстрировать текущее состояние операции. Изображение: Colin Garven
Эта кнопка преобразуется в индикатор прогресса, чтобы продемонстрировать текущее состояние операции. Изображение: Colin Garven

Вывод

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

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

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Бесплатный звонок

 

Вы можете оставить номер и мы сами вам перезвоним 

Представьтесь, пожалуйста:

Введите ваш номер

 

×
Заказать юзабилити-аудит

 

Для заказа аудита заполните, пожалуйста, форму, либо свяжитесь с нами по телефону: +375 29 378 16 13

Представьтесь, пожалуйста:

Как с вами связаться? Например, телефон, e-mail или скайп
Расскажите немного о вашем проекте:(необязательно)

 

×
Заказать веб аналитику

 

Для заказа веб аналитики заполните, пожалуйста, форму, либо свяжитесь с нами по телефону: +375 29 378 16 13

Представьтесь, пожалуйста:

Как с вами связаться? Например, телефон, e-mail или скайп
Расскажите немного о вашем проекте:(необязательно)

 

×
Заказать проектирование

 

Для заказа проектирования заполните, пожалуйста, форму, либо свяжитесь с нами по телефону: +375 29 378 16 13

Представьтесь, пожалуйста:

Как с вами связаться? Например, телефон, e-mail или скайп
Расскажите немного о вашем проекте:(необязательно)

 

×
С нами очень просто связаться

 

Вы можете оставить свои контакты и мы сами вам перезвоним 

Представьтесь, пожалуйста:

Введите ваш номер

Или адрес электронной почты, если вам удобнее общаться через нее

 

×