237817fd9f246c35fb26b783fd5616a2 - «Hover Effect» для мобильных кнопок

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

Читайте также:

В каких случаях необходимы кнопки с индикатором загрузки

Почему не нужно выделять неактивные кнопки серым цветом

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

«Hover Effect» для мобильных кнопок

Удаление зависающего hover-эффекта недостаточно. Пользователи мобильных гаджетов нуждаются в визуальной обратной связи, потому что ошибочное нажатие кнопки – это очень распространенная проблема. Целевые размеры мобильных кнопок меньше десктопных версий, и их сложнее нажимать. От силы нажатия тоже многое зависит. Она должна быть установленной, т.к. иногда силы нажатия бывает недостаточно для активации действия, кнопка просто его не распознает.

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

«Hover Effect» для мобильных кнопок

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

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

Оригинал: anthony

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Система подбора цветов для интерфейса. Основы. Часть 1

Как создать доступный цифровой опыт Цвет, как инструмент Сегодня мы проводим большую…

Новый подход к подбору цвета интерфейса

Совместное использование нового способа построения цветовых систем для доступных пользовательских интерфейсов. Создайте…

Базовая сетка 4px для достижения визуальной точности

Я пользуюсь базовой сеткой 4px уже более 2-х лет и пытаюсь заставить мою команду начать использовать ее.