Кнопки являются важным элементом дизайна. Они играют главную роль в диалоге между пользователем и системой.
1. Сделайте кнопки похожими на кнопки
Когда дело доходит до взаимодействия с пользовательским интерфейсом, пользователи должны мгновенно знать, что является "кликабельным", а что нет. Каждый элемент в дизайне требует усилий пользователя для декодирования. Как правило, чем больше времени требуется на это, тем менее удобным он становится для человека.
Но как пользователи понимают, является ли определенный элемент интерактивным или нет? Они используют предыдущий опыт и визуальные обозначения, чтобы прояснить значение объекта пользовательского интерфейса. Вот почему так важно использовать соответствующие визуальные обозначения (такие как размер, форма, цвет, тень и т. д.) чтобы сделать элемент похожим на кнопку. Визуальные элементы обладают существенной информационной ценностью — они помогают сделать интерфейс доступным и понятным.
К сожалению, во многих интерфейсах признаки интерактивности слабы и требуют усилий для взаимодействия.
Не думайте, что что-то в вашем интерфейсе очевидно для ваших пользователей
Во многих случаях дизайнеры намеренно не идентифицируют кнопки как интерактивные элементы, поскольку они предполагают, что интерактивные элементы очевидны для пользователей. При проектировании интерфейса всегда следует иметь в виду следующее правило:
Ваша способность интерпретировать означающие кликабельности не совпадает с вашими пользователями, потому что вы знаете, что каждый элемент в вашем собственном дизайне предназначен для выполнения.
Используйте знакомые дизайны для ваших кнопок
Вот несколько примеров кнопок, которые знакомы большинству пользователей:
- Заполненная кнопка с квадратными границами
- Заполненная кнопка с закругленными углами
- Заполненная кнопка с тенями
- Призрачная кнопка
Среди всех этих примеров дизайн "заполненной кнопки с тенями" является наиболее ясным для пользователей. Когда пользователи видят размерность объекта, они мгновенно понимают, что это то, на что они могут нажать.
2. Поместите кнопки там, где пользователи ожидают их найти
Кнопки должны располагаться в местах, где пользователи могут легко найти их или ожидать увидеть. Не заставляйте пользователей искать кнопки. Если пользователи не могут найти кнопку, они не будут знать, что она существует.
3. Ярлык кнопки должен ассоциироваться с тем, что она делает
Кнопки с общими или вводящими в заблуждение ярлыками могут быть огромным источником разочарования для ваших пользователей. В идеале метка кнопки должна четко описывать ее действие.
Пользователи должны четко понимать, что происходит, когда они нажимают на кнопку.
4. Правильно выбирайте размер кнопки
Размер кнопки должен отражать приоритет этого элемента на экране. Большая кнопка означает более важное действие.
Сделайте самую важную кнопку похожей на самую важную. Всегда старайтесь сделать основную кнопку действия более заметной. Увеличьте его размер (сделав кнопку больше, вы сделаете ее более важной для пользователей) и используйте контрастный цвет, чтобы привлечь внимание пользователя.
Сделайте кнопки удобными для пальцев мобильных пользователей.
Во многих мобильных приложениях кнопки слишком малы. Это часто приводит к ситуации, когда пользователи вводят неверные данные.
Исследование MIT Touch Lab показало, что средние значения для подушечек пальцев составляют от 10 до 14 мм, а кончики пальцев–от 8 до 10 мм. Это делает 10мм х 10мм хорошим минимальным.
5. Следите за порядком
Порядок расположения кнопок должен отражать характер диалога между пользователем и системой. Спросите себя, какой порядок пользователи ожидают иметь на этом экране и дизайн соответственно.
Пользовательский интерфейс-это беседа с вашими пользователями
6. Избегайте использования слишком большого количества кнопок
Это общая проблема для многих приложений и веб-сайтов. Когда вы предоставляете слишком много вариантов, ваши пользователи в конечном итоге ничего не делают.
7. Обеспечьте визуальную или звуковую обратную связь
Когда пользователи нажимают на кнопку, они ожидают, что пользовательский интерфейс ответит соответствующей обратной связью. В зависимости от типа операции это может быть визуальная или звуковая обратная связь. Когда у пользователей нет обратной связи, они могут подумать, что система не получила их команду и повторит действие. Такое поведение часто приводит к множеству ненужных операций.
Почему это происходит? Как люди, мы ожидаем некоторую обратную связь после того, как мы взаимодействуем с объектом. Это может быть визуальная, звуковая или тактильная обратная связь-все, что подтверждает факт регистрации взаимодействия.
Для некоторых операций, таких как загрузка, стоит не только подтвердить ввод данных пользователем, но и показать текущее состояние процесса.