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

Юзабилити является одним из ключевых компонентов дизайна мобильного интерфейса. Большая юзабилити часто включает в себя микровзаимодействия, которые представляют собой небольшие отклики и поведение интерфейса, определяющего порядок использования пользовательского интерфейса. Эти микровзаимодействия определяют поведение, стимулируют взаимодействие и помогают пользователям визуализировать, как должен работать интерфейс.

Цифровые интерфейсы являются посредниками между пользователями и их желаемыми целями. Дизайнеры интерфейсов создают опыт, который помогает пользователям выполнять определенные задачи. Например, приложение списка задач имеет интерфейс, который помогает пользователям организовывать свои задачи. Так же, как приложение Facebook дает пользователям интерфейс для взаимодействия с их учетной записью Facebook.

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

Микровзаимодействия имеют силу, потому что они создают иллюзорный опыт. Ползунки вкл / выкл на самом деле не двигаются как физические переключатели, но могут показаться, что перемещаются таким образом через анимацию.
ИЗОБРАЖЕНИЕ: DribbleЯ нашел невероятную цитату в эта почта обсуждая огромное значение микровзаимодействий для мобильных приложений:

«Лучшие продукты хорошо выполняют две функции: особенности и детали. Особенности — это то, что привлекает людей к вашему продукту. Детали — это то, что держит их там. И детали — это то, что на самом деле выделяет наше приложение среди конкурентов »

Мелкие детали могут показаться незначительными с точки зрения разработки, но с точки зрения пользовательского опыта они действительно делают разницу между пользовательским интерфейсом приложения OK и необычным пользовательским интерфейсом приложения.

Отличные микровзаимодействия заставляют пользователя чувствовать себя вознагражденным за действие. Эти действия могут быть повторены и включены в поведение пользователя. Они могут узнать, как использовать приложение на основе этих меньших микровзаимодействий. Когда пользователь выполняет поведение, эти небольшие взаимодействия сообщают: «Да, вы можете взаимодействовать со мной!»

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

Вот наиболее распространенное использование анимации и движения в дизайне мобильного UI / UX:

Направление пользователей между разными страницами
Руководство пользователей через интерфейс для обучения определенному поведению
Предлагая действия / поведение, которые можно предпринять на любой странице

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

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

Микровзаимодействия направляют пользователей через интерфейс, предлагая ответы на поведение. Как только пользователь узнает, что слайдер вкл / выкл может двигаться, он узнает, что он интерактивный. На основании ответа они также узнают, была ли настройка включена или выключена. Когда кнопка выглядит так, как будто ее можно нажать, пользователь инстинктивно знает, что может с ней взаимодействовать.

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

Действие — пользователь делает что-то вроде щелчка, пролистывания, нажатия и удержания или другого взаимодействия.
Реакция — интерфейс реагирует в зависимости от того, что должно произойти. Проведите пальцем по экрану, чтобы вернуться в историю браузера, или прикосновение к ползунку ВКЛ / ВЫКЛ может отключить настройку.
Обратная связь — это то, что пользователь фактически видит в результате взаимодействия. Когда пользователь проводит назад в мобильном браузере, он может всплыть на предыдущей странице, чтобы появиться «в верхней части» экрана. Ползунок включения / выключения может плавно скользить или увеличиваться при нажатии на экран.

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

Рекомендуемое чтение: Flat 2.0 и как он решает проблемы юзабилити Flat Design

Ищите детали
Изучив небольшие части дизайна, вы поймете, как приложение должно реагировать на определенное поведение.

Pull to refresh — хороший пример популярного микровзаимодействия. Когда он впервые запустился, он не был неотъемлемой частью iOS, но многие приложения взяли эту идею и начали двигаться вместе с ней. Теперь pull to refresh — это хорошо известное поведение, которое большинство пользователей знают только при просмотре пользовательского интерфейса канала. То же самое можно сказать и о мобильных меню для гамбургеров, популярность которых резко возросла.

Сделайте каждое микровзаимодействие реалистичным и простым. Не переусердствуйте анимации, потому что они могут стать утомительными, если они слишком подробны и часто используются. Пользователь не хочет, чтобы блеск появлялся каждый раз, когда он нажимал на значок меню. Достигните баланса с подлинной ценностью, которая сообщает, как интерфейс должен работать, не выходя за борт.
Глядя на некоторые примеры
Я думаю, что лучший способ чему-то научиться — это делать, а второй лучший способ — изучать работу других. Я собрал небольшое количество анимаций UI / UX-микровзаимодействия от талантливых пользователей Dribbble, чтобы показать вам, как они выглядят в реальном макете.

Каждое приложение будет отличаться и иметь разные потребности в зависимости от того, что приложение делает. В конце концов, большинство пользователей хотят того же: интуитивно понятного приложения, обеспечивающего качественное взаимодействие с микровзаимодействиями по отношению к поведению пользователей.
1. Анимированный интерфейс приложения событий
Первый пример — отличный карточная анимация Функция создана Иваном Мартыненко. В этом дизайне вы заметите несколько микровзаимодействий, особенно считывание карточек и перемещение по деталям.

При нажатии на карту она увеличивается в размерах. А при нажатии кнопки «Подписаться» фотография профиля пользователя попадает в список подписчиков. Все выглядит очень интуитивно и вполне естественно для интерфейса.
ИЗОБРАЖЕНИЕ: Dribble2. Интерактивный экран упражнений
Этот креативный мобильный анимация упражнений исходит от дизайнера Виталия Рубцова. Он демонстрирует пользователя, сохраняющего свою тренировку для одного набора приседаний.

Обратите внимание, что каждая анимация имеет одинаковый эффект упругого отскока при открытии и закрытии меню. Это также верно, когда активность отмечена как «Готово». Согласованность является ключевой для микровзаимодействий, потому что все они должны чувствовать себя подключенными к одному интерфейсу.
ИЗОБРАЖЕНИЕ: Dribble3. Поиск приложения Микровзаимодействия
Коротко, сладко и точно. Я думаю, что это лучше всего описывает эти поиск приложения микровзаимодействия разработанный Лукасом Хораком. Каждая анимация быстрая, но все же заметная.

Вот как вы должны создавать микровзаимодействия, чтобы избежать чрезмерной сложности. Если интерфейс будет загружаться быстрее без анимации, зачем добавлять его? Быстрые анимации заставляют пользователя двигаться, не затягивая процесс.
ИЗОБРАЖЕНИЕ: Dribble4. Фитнес-цель Микровзаимодействие
Я думаю, что Якуб Анталк действительно ударил этого из парка со своим фитнес-цель микровзаимодействия, Все экраны имеют такое ощущение дрожи, потому что формы движутся очень плавно.

Все же интерфейс также чувствует себя твердым и полезным. Это говорит о том, что микровзаимодействия, созданные с определенной целью, могут быть веселыми и интересными, но также функциональными и прагматичными.
ИЗОБРАЖЕНИЕ: Dribble5. Потяните, чтобы обновить анимацию
Вот один из моих самых любимых анимация «тянуть-обновить» созданный командой в Ramotion, Это не только имитирует жидкость с действием вытягивания, но анимация реакции плавно соединяется от брызг жидкости в круг загрузки.

Это большое внимание к деталям — вот что выявляет истинную красоту в микровзаимодействиях мобильных приложений.
ИЗОБРАЖЕНИЕ: Dribble6. Вкладка Микровзаимодействие
Виджеты с вкладками довольно распространены для мобильных приложений из-за небольших экранов. мне действительно нравится это микровзаимодействие созданный Джоном Нуссисом, хотя я думаю, что он будет более эффективным на более высокой скорости, но сама анимация великолепна и хорошо продумана.

Стрелка привязки вкладок скользит вправо так же, как новый контент отскакивает справа. Это создает иллюзию физического движения экрана вправо. Анимация великолепна, но, поскольку она очень медленная, я думаю, что большинство пользователей будут раздражены через несколько дней.
ИЗОБРАЖЕНИЕ: Dribble7. Предварительная загрузка анимации
Я не очень много говорил о загрузке баров в этом посте, но они так же ценны для общего опыта. Большинство пользователей не хотят ждать загрузки данных, но они определенно не хотят смотреть на пустой экран во время загрузки.

Брет Курц сделал это удивительно экран предварительной загрузки это и весело, и информативно. На самом деле пользователь может развлекаться, наблюдая, как эта маленькая анимация повторяется. Они также могут быть уверены, что приложение все еще загружает их данные и не аварийно завершает работу.
ИЗОБРАЖЕНИЕ: DribbleЗавершение
Все эти примеры блестяще демонстрируют ценность микровзаимодействий. Мобильные приложения получают гораздо больше пользы от микровзаимодействий, потому что пользователи физически касаются экранов пальцами. Пользователи не касаются мониторов своих настольных компьютеров или экранов своих ноутбуков, но все касаются своих смартфонов, потому что это интерактивное состояние по умолчанию.

Это гораздо более личный опыт, поэтому дизайн мобильных приложений может быть таким нюансом. Если все сделано правильно, добавление отличных мобильных микровзаимодействий может создать мощный иллюзорный пользовательский опыт из ничего, кроме пикселей и движения.