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