Понимание микровзаимодействий в дизайне мобильных приложений
Юзабилити является одним из ключевых компонентов дизайн мобильного интерфейса. Большая юзабилити часто подразумевает микровзаимодействий которые небольшие ответы и поведение от интерфейса диктовать, как должен использоваться пользовательский интерфейс. Эти микровзаимодействия определяют поведение, стимулируют взаимодействие и помогают пользователям визуализировать, как должен работать интерфейс..
Цифровые интерфейсы являются посредниками между пользователями и их желаемыми целями. Дизайнеры интерфейсов создают впечатления, которые помогают пользователям выполнять определенные задачи. Например, приложение списка задач имеет интерфейс, который помогает пользователям организовывать свои задачи. Так же, как приложение Facebook дает пользователям интерфейс для взаимодействия с их учетной записью Facebook.
В этом руководстве я углублюсь в микровзаимодействия для мобильных приложений. Небольшие взаимодействия могут показаться тривиальными, но они могут иметь огромное влияние на качество опыта пользователя. Когда все сделано правильно, микровзаимодействия кажутся подлинной частью всеобъемлющего мобильного пользовательского опыта.
Сила микровзаимодействий
В большинстве случаев целью микровзаимодействия является обеспечить обратную связь на основе действий пользователя. Это может помочь пользователям визуализировать, как интерфейс движется или ведет себя, хотя это чисто цифровой на плоском экране.
Микровзаимодействия имеют силу, потому что они создать иллюзорный опыт. Ползунки вкл / выкл на самом деле не двигаются как физические переключатели, но они могут показаться движущимися через анимацию.
В этом посте я нашел невероятную цитату, в которой обсуждается огромное значение микровзаимодействий для мобильных приложений:
“Лучшие продукты делают две вещи хорошо: особенности и детали. Особенности - это то, что привлекает людей к вашему продукту. Детали - это то, что держит их там. А детали - вот что на самом деле выделяет наше приложение среди конкурентов..”
мелкие детали может показаться незначительным с точки зрения разработки, но с точки зрения пользовательского опыта они действительно сделать разницу между пользовательским интерфейсом OK и необычным пользовательским интерфейсом.
Большие микровзаимодействия делают пользователя чувствовать себя вознагражденным для принятия мер. Эти действия могут быть повторный а также укоренился в поведении пользователя. Они могут узнать, как использовать приложение на основе этих меньших микровзаимодействий. Когда пользователь выполняет поведение, эти небольшие взаимодействия сообщают: «Да, вы можете взаимодействовать со мной!»
Взгляните на примеры, найденные в спецификации дизайна материалов Google. Документация фактически имеет целый раздел, посвященный движению материала.. Пространственные отношения являются большой частью этого уравнения, но движение может диктовать больше, чем просто пространственные отношения.
Вот наиболее распространенное использование анимации и движения в мобильном UI / UX дизайне:
- Направление пользователей между разными страницами
- Руководство пользователей через интерфейс для обучения определенному поведению
- Предлагая действия / поведение, которые можно предпринять на любой странице
Мобильные приложения имеют намного меньше места на экране чем сайты. Это может привести к некоторым трудностям в обучении пользователей тому, как пользоваться приложением. Но это может быть удивительно просто, если вы знаете, как правильно реализовать микровзаимодействия.
Как работают микровзаимодействия
Одиночное микровзаимодействие срабатывает всякий раз, когда пользователь взаимодействует с одной частью интерфейса. Большинство микровзаимодействий анимированные ответы на жест пользователя. Таким образом, движение смахивания будет реагировать иначе, чем нажатие или щелчок.
Blink UX сделал отличный пост, обсуждая мелкие детали микровзаимодействий. Эти маленькие анимации должны следовать предсказуемый процесс что пользователь может узнать за каждое взаимодействие в приложении.
Микровзаимодействие направляет пользователей через интерфейс предлагая ответы на поведение. Как только пользователь узнает, что слайдер вкл / выкл может двигаться, он узнает, что он интерактивный. На основании ответа они также узнают, была ли настройка включена или выключена. Когда кнопка выглядит так, как она может быть нажата пользователем инстинктивно знает они могут взаимодействовать с ним.
Согласно UXPin, каждое основное микровзаимодействие может быть разбито на четыре этапа, но я суммировал процесс в три шага.
- действие - пользователь что-то делает например, щелчок, пролистывание, нажатие и удержание или другое взаимодействие.
- реакция - интерфейс отвечает основываясь на том, что должно произойти. Проведите пальцем по экрану, чтобы вернуться в историю браузера, или прикосновение к ползунку ВКЛ / ВЫКЛ может отключить настройку..
- Обратная связь - это то, что пользователь на самом деле видит в результате взаимодействия. Когда пользователь перемещается назад в мобильном браузере, он может всплыть на предыдущей странице, чтобы появиться «в верхней части» экрана. Ползунок включения / выключения может плавно скользить или увеличиваться при нажатии на экран.
Эти очень маленькие действия могут быть выполнены без анимации, но отличные микровзаимодействия предлагают реалистичное чувство к плоскому цифровому интерфейсу, который в основном приходит в виде реалистичные анимационные эффекты. Они вдыхают жизнь в интерфейс и стимулируют взаимодействие с пользователем.
Ищите детали
Посмотрев на небольшие части дизайна, вы поймете, как приложение должно реагировать на определенное поведение.
Потяните, чтобы обновить является хорошим примером популярного микровзаимодействия. Он не был неотъемлемой частью iOS при первом запуске, но многие приложения взяли эту идею и начали двигаться вместе с ней. Теперь pull to refresh - это хорошо известное поведение, которое большинство пользователей знают только при просмотре пользовательского интерфейса канала. То же самое можно сказать и о мобильных меню для гамбургеров, популярность которых резко возросла.
Сделайте каждое микровзаимодействие реалистично и просто. Не переусердствуйте анимации, потому что они могут стать утомительным если они слишком подробны и часто используются. Пользователь не хочет, чтобы блеск появлялся каждый раз, когда он нажимал на иконку меню.. Подводить баланс с подлинной ценностью, которая общается как должен работать интерфейс не выходя за борт.
Глядя на некоторые примеры
Я думаю, что лучший способ чему-то научиться - это делать, а второй лучший способ - изучать работу других. Я собрал небольшую горстку UI / UX анимация микровзаимодействия от талантливых пользователей Dribbble, чтобы показать вам, как они выглядят в реальном макете.
Каждое приложение будет отличаться и иметь разные потребности в зависимости от того, что приложение делает. В конце концов, большинство пользователей хотят одно и то же: приложение, которое интуитивный а также обеспечивает качественный пользовательский опыт с микровзаимодействиями относительно поведения пользователя.
1. Анимированный интерфейс приложения событий
Первый пример - это отличная анимация, созданная Иваном Мартыненко. Вы заметите горстка микровзаимодействий в этом дизайне, особенно считывание карт и перемещение по деталям.
При нажатии на карту она увеличивается в размерах. А при нажатии кнопки «Подписаться» фотография профиля пользователя попадает в список подписчиков. Все выглядит очень интуитивно и вполне естественно для интерфейса.
2. Интерактивный экран упражнений
Эта креативная мобильная анимация упражнений создана дизайнером Виталием Рубцовым. Это демонстрирует пользователя, сохраняющего свою тренировку для одного набора приседаний.
Обратите внимание, что каждая анимация имеет одинаковый эффект упругого отскока когда меню открывается и закрывается. Это также верно, когда активность отмечена как «Готово».. консистенция является ключевым с микровзаимодействиями, потому что они все должны чувствовать подключен к тому же интерфейсу.
3. Поиск приложения Микровзаимодействия
Коротко, сладко и точно. Я думаю, что это лучше всего описывает эти микровзаимодействия поисковых приложений, разработанные Лукасом Хораком. Каждая анимация быстро, но все же заметно.
Вот как вы должны проектировать микровзаимодействия с избегать чрезмерной сложности. Если интерфейс загружается быстрее без анимации, зачем добавлять его?? Быстрые анимации держите пользователя движущимся, не увязая в опыте.
4. Фитнес-цель Микровзаимодействие
Я думаю, что Jakub Antalà ??  ?? â'K-k действительно ударил этого из парка с его микровзаимодействием цели пригодности. Все экраны имеют такое ощущение дрожи, потому что формы движутся так плавно.
Все же интерфейс также чувствует твердый и полезный. Это говорит о том, что микровзаимодействия, созданные с определенной целью, могут быть веселыми и увлекательными, но также функциональными и прагматичными..
5. Потяните, чтобы обновить анимацию
Вот одна из моих самых любимых анимаций, созданных командой Ramotion. Это не только имитирует жидкость с действием тянуть, но анимация ответа плавно соединяется от брызг жидкости в загрузочный круг.
это большое внимание к деталям это то, что раскрывает истинную красоту в микровзаимодействиях мобильных приложений.
6. Вкладка Микровзаимодействие
Виджеты с вкладками довольно часто встречаются в мобильных приложениях из-за небольших экранов. Мне очень нравится это микровзаимодействие, созданное Джоном Нуссисом, хотя я думаю, что оно будет более эффективным на более высокой скорости, но сама анимация великолепна и хорошо продумана..
Стрелка привязки вкладок скользит вправо так же, как новый контент отскакивает справа. Это дает иллюзию весь экран физически движется направо. Анимация изящна, но так как она очень медленная, я думаю, что большинство пользователей будут раздражены через несколько дней.
7. Предварительная загрузка анимации
Я не сказал много о бары загрузки в этом посте, но они так же ценны для общего опыта. Большинство пользователей не хотят ждать загрузки данных, но они определенно не хотят смотреть на пустой экран во время загрузки.
Брет Курц сделал этот удивительный экран предварительной загрузки, который был и забавным, и информативным. Пользователь может быть развлекаться смотреть, как эта маленькая анимация повторяется. Они также могут быть успокоило что приложение по-прежнему загружает свои данные и не разбился.
Завершение
Все эти примеры блестяще демонстрируют ценность микровзаимодействий. Мобильные приложения получают гораздо больше пользы от микровзаимодействий, потому что пользователи физически касаться экранов с их пальцами. Пользователи не касаются своих настольных мониторов или экранов своих ноутбуков, но все касаются своих смартфонов, потому что это состояние по умолчанию интерактивности.
Это гораздо больше личного опыта, Именно поэтому дизайн мобильных приложений может быть таким нюансированный процесс. Если все сделано правильно, добавление отличных мобильных микровзаимодействий может создать мощный иллюзорный пользовательский опыт из ничего, кроме пикселей и движения.
