Кнопки являются важным элементом дизайна взаимодействия. Они играют основную роль в диалоге пользователя с системой. В этой статье я рассмотрю семь основных принципов, которые вам нужно знать, чтобы создавать эффективные кнопки.
1. Делайте кнопки похожими на кнопки
Когда дело доходит до взаимодействия с интерфейсом, пользователи должны сразу понимать какие элементы кликабельны, а какие нет. Каждый элемент дизайна требует от пользователя усилий по декодированию. Как правило, чем больше времени требуется пользователям для декодирования интерфейса, тем менее он удобен для них. Но, как пользователи понимают, является ли определенный элемент дизайна интерактивным или нет? Они используют предыдущий опыт и визуальные знаки для понимания смысла объекта интерфейса. Вот почему так важно использовать соответствующие визуальные знаки (такие как размер, форма, цвет, тень и т. д.), чтобы элемент выглядел как кнопка. Визуальные знаки несут важное информационное значение – они помогают создавать возможность действия в интерфейсе. К сожалению, во многих интерфейсах знаки, означающие интерактивность слабо различимы и требуют усилий по взаимодействию; в результате они заметно снижают понятность интерфейса. Если отсутствует понимание возможных взаимодействий, и пользователи с трудом узнают, что кликабельно, а что нет, не имеет значения, насколько круто выглядит ваш дизайн. Если им будет сложно пользоваться, он расстроит пользователей. Слабые различимые знаки – еще более серьезная проблема для мобильных пользователей. В попытке понять, является ли отдельный элемент интерактивным или нет, пользователи ПК могут навести курсор на элемент и проверить, изменится ли его состояние. У мобильных пользователей нет такой возможности. Чтобы понять, является ли элемент интерактивным, пользователи должны нажать на него – нет другого способа проверить интерактивность.
Не предполагайте, что что-то в вашем интерфейсе очевидно для ваших пользователей
Во многих случаях разработчики намеренно не идентифицируют кнопки как интерактивные элементы, поскольку они предполагают, что эти интерактивные элементы очевидны для пользователей. При разработке интерфейса вы всегда должны помнить следующее правило:
Ваша способность интерпретировать обозначение кликабельности не совпадает с вашими пользователями, потому что вы знаете, что должен делать каждый элемент вашего дизайна.
Используйте для своих кнопок знакомый дизайн
Вот несколько примеров кнопок, знакомых большинству пользователей:
- Кнопка с фоном и квадратными углами
- Кнопка с фоном и закругленными углами
- Кнопка с фоном и тенью
- Прозрачная кнопка
Не забывайте о свободном пространстве
Важны не только визуальные свойства самой кнопки. Количество пустого места рядом с кнопкой облегчает (или усложняет) понимание пользователем интерактивный это элемент или нет. В примере ниже некоторые пользователи могут путать прозрачную кнопку с информационным полем. 
2. Размещайте кнопки там, где пользователи ожидают их найти
Кнопки должны располагаться там, где пользователи могут легко их найти или ожидают их увидеть. Не заставляйте пользователей искать кнопки. Если пользователи не найдут кнопку, они не будут знать, что такая кнопка существует.
По возможности используйте традиционные макеты и стандартные шаблоны интерфейса
При стандартной компоновке пользователи легко поймут цель каждого элемента. Сочетание стандартной компоновки с понятным визуальным дизайном и широкими пробелами делает макет более понятным.
Не играйте в «найди кнопку» со своими пользователями
Совет: Проверьте свой дизайн на понятность. Когда пользователи впервые переходят на страницу, содержащую действия, которые вы хотите, чтобы они совершили, они должны легко найти соответствующую кнопку.
3. Кнопки с подписью
Кнопки с общими или вводящими в заблуждение подписями могут стать источником разочарования ваших пользователей. Сделайте подписи четко поясняющими, что делает каждая кнопка. В идеале подпись должна описывать действие кнопки. Пользователи должны понимать, что происходит, когда они нажимают на кнопку. Позвольте мне привести простой пример. Представьте, что вы случайно вызвали действие удаления, и теперь вы видите следующее сообщение. 
Никогда не создавайте диалоговое окно или форму, состоящую исключительно из двух кнопок «ОК» и «Отмена».
Вместо «ОК» лучше использовать подпись «Удалить». Кроме того, если «Удалить» является потенциально опасной операцией, вы можете использовать красный цвет, чтобы указать на этот факт. 
4. Правильно подбирайте размер кнопки
Размер кнопки должен отражать приоритет этого элемента на экране. Чем больше кнопка, чем важнее действие.
Установите приоритетность кнопок
Покажите какая кнопка самая важная. Всегда старайтесь сделать кнопку основного действия более заметной. Увеличьте ее размер (сделайте кнопку более крупной, тем самым подчеркнув ее важность) и используйте контрастный цвет, чтобы привлечь внимание пользователя. 
Делайте кнопки удобными для пользователей мобильных телефонов
Во многих мобильных приложениях кнопки слишком малы. Из-за этого пользователи часто опечатываются. 
5. Позаботьтесь о порядке
Порядок кнопок должен отражать характер разговора между пользователем и системой. Спросите себя, какой порядок пользователи ожидают на этом экране и соответственно спроектируйте его.
Интерфейс – это разговор с вашими пользователями
Например, как упорядочить кнопки «Предыдущая / Следующая» в разбивке на страницы? Логично, что кнопка, которая перемещает вас вперед, должна быть справа, а кнопка, которая перемещает вас назад, должна быть слева.
6. Избегайте использования слишком большого количества кнопок
Это распространенная проблема для многих приложений и веб-сайтов. Когда вы предоставляете слишком много опций, ваши пользователи ничего не делают. Выберите для своего приложения или сайта только важные действия, которые вы хотите, чтобы ваши пользователи совершали.
7. Обеспечение визуального или звукового фидбека при взаимодействии
Когда пользователи нажимают на кнопку, они ожидают, что пользовательский интерфейс ответит соответствующим фидбеком. В зависимости от типа операции это может быть визуальная или звуковая обратная связь. Когда пользователи не получают фидбек, они могут подумать, что система не получила команду и повторят действие. Такое поведение часто вызывает ненужное повторение операций. Почему это происходит? Как люди, мы ожидаем определенную обратную связь после того, как мы взаимодействуем с объектом. Это может быть визуальный, звуковой или тактильный фидбек – все, что подтверждает факт взаимодействия. Пользовательский интерфейс обеспечивает визуальный фидбек, который фиксирует нажатие кнопки. Изображение: Vadim Gromov Для некоторых операций, таких как загрузка, стоит не только подтвердить ввод, но и показать текущее состояние процесса. Эта кнопка преобразуется в индикатор прогресса, чтобы продемонстрировать текущее состояние операции. Изображение: Colin Garven
Вывод
Несмотря на то, что кнопки являются обычным элементом дизайна взаимодействия, стоит обратить внимание на то, чтобы сделать этот элемент максимально качественным. UX дизайн кнопки всегда должен быть понятным и легко распознаваемым.
Перевод статьи Nick Babich
Топ коментарі (0)