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

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

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

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - «Hover Effect» для мобильных кнопок

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - «Hover Effect» для мобильных кнопок

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

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

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

Оригинал: anthony

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

4
  1. Не совсем согласен с мыслями в статье. Ховер эффект позволяет пользователю распознать, что с элементом интерфейса можно провзаимодействовать. Если же пользователь уже взаимодействует с интерфейсом, например с кнопкой, то он уже знает, что с ней можно провзаимодействовать.

    Что касается понимания нажал ли пользователь кнопку или не нажал – то тут нужно помнить, что у хорошей кнопки есть различные состояния: активная, неактивная, нажатая (происходит в момент клика или тапа) и т.д

  2. Спасибо, Люся) Взгляд поверхностный, но статья заставляет задуматься вот об этом вот всём.

    Конечно, это не ховер) можем называть это состоянием кнопок.

    Сила нажатия в интерфейсе?) Конечно, нет) кнопка не прожимается только в одном случае — если мы недонажали. Но даже если мы донажали, и кнопка отыграла эффект нажатия — это не гарантирует обратную связь интерфейса, вы наверняка видели раз сто, как кнопка на сайте прожимается, и.. ничего не происходит! Все потому что онКлик – не панацея, задача ваша не в нажатии кнопки, а в произведении определенного действия, это значит, что обратная связь должна быть от всего интерфейса, даже если на самом деле приложению или сайту нужно время, чтобы “подумать” или отправить данные. Система может сразу нас перекинуть на следующий шаг (экран успеха, экран валидации, спиннер загрузки).

    Понимаете, о чем я? Обратная связь системы не может ограничиваться визуализацией нажимаемого контрола, мы хотим знать, что автомобиль получает ускорение, а не просто педаль газа прожимается.

Добавить комментарий
Похожие записи

100 вещей, которые должен знать UX/UI дизайнер

Майкл Соркин недавно умер от коронавируса, и в знак уважения я составил список из 100 вещей, которые должен знать UX / UI-дизайнер

Основы UX: закон Парето или правило 80/20, которое должен знать каждый дизайнер

Вы когда-нибудь замечали, что используете небольшое количество функций на своем телефоне? У него есть сотни функций, но вы когда-нибудь использовали их все?

7 фундаментальных приемов психологии в дизайне, которые должен знать каждый дизайнер

Для продуктового дизайнера недостаточно быть экспертом в области интерактивного дизайна. И вот почему…