Основные требования к UX дизайна кнопок мобильного интерфейса

Основные правила разработки UX-дизайна кнопок

Удобство интерфейса мобильного приложения в глазах пользователей во многом зависит от того, насколько хорошо продуман UX-дизайн кнопок. Габариты этого элемента должны быть пропорциональны размерам экрана, обеспечивая отклик при первом же нажатии. В частности, диаметр (длина наименьшей стороны) кнопки должен составлять как минимум 10 мм, что соответствует стандартному размеру подушечки пальца. При создании дизайна разработчикам приложений следует в полной мере задействовать тени, подсвечивания и другие приемы, которые позволяют безошибочно идентифицировать графический элемент как кнопку.

Что еще нужно учесть при проектировании

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

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

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

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