Технические науки

УДК 004.5

Паравян Лиана Кареновна

магистр

Харьковского национального университета радиоэлектроники

Paravian Liana

Master of the

Kharkiv National University of Radioelectronics

 АНИМИРОВАННЫЕ МИКРОВЗАИМОДЕЙСТВИЯ В ИНТЕРФЕЙСАХ МОБИЛЬНЫХ ПРИЛОЖЕНИЙ

ANIMATED MICROINTERACTIONS IN MOBILE APPLICATIONS INTERFACES

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

Ключевые слова: интерфейс, анимация, микровзаимодействие, опыт взаимодействия, юзабилити.

Summary. In the paper the idea of animated microinteractions is considered. Microinteractions may enhance user experience, make an application more user-friendly. During the research several versions of animated UI prototypes were tested. As a consequence of the experiment, it was concluded that animated microinteractions have a great influence on the UX, usability, fast and correct understanding of the interface, speed of performance. Based on the research there are provided recommendations of enabling animation to microinteractions.

Key words: interface, animation, micrinteraction, user experience, usability.

Введение. Мобильные устройства, в частности смартфоны, распространяются с невероятной скоростью. Согласно данным статистики GSMA Intelligence за 2018 год, 67% населения планеты – пользователи мобильных устройств [1]. Так как в современном мире мобильные устройства используются не только для функций связи, но и в практически любой ситуации из повседневной жизни, в том числе, когда пользователь одновременно выполняет несколько различных задач, при проектировании интерфейсов приложений для мобильных устройств, необходимо уделять огромное внимание юзабилити приложения, чтобы снизить когнитивную нагрузку при использовании того или иного интерфейса.

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

Микровзаимодействия считаются одним из методов улучшения опыта пользователя. Дэн Саффер, основоположник концепции микровзаимодействий, определяет их как составляющие части продукта, выполняющих только одну конкретную задачу и являющиеся инструментом обеспечения опыта взаимодействия с интерфейсом [2]. Микровзаимодействия создают визуальный, тактильный или звуковой отклик на действия пользователей.

Множество исследований показывают: человеческий мозг устроен так, что воспринимает движущиеся объекты лучше и быстрее [3], чем статические. Движение в интерфейсах достигается посредствам внедрения анимации элементов интерфейса. Анимация – одно из наиболее эффективных средств передачи обратной связи при проектировании микровзаимодействий. Внедрение анимации позволяет достичь хорошего пользовательского опыта во время использования приложения.

Целью исследования является изучение влияния микровзаимодействий в интерфейсах мобильных приложений на опыт взаимодействия с интерфейсом и выявление оптимальных вариантов внедрения анимированных микровзаимодействий.

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

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

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

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

Дэн Сэффер предлагает следующую структуру микровзаимодействий: триггеры, правила, обратная связь, циклы и режимы [5].

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

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

Обратная связь позволяет понять, как отработало правило. Для передачи обратной связи используют визуальные, тактильные, звуковые подсказки. Зачастую, именно для обратной связи используется анимация.

Циклы и режимы определяют продолжительность микровзаимодействий, возможное повторение или изменение их работы.

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

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

Проведено количественное тестирование, в ходе которого пользователям предлагалось выполнить конкретные задачи по взаимодействию с приложением, и измерялось время, затраченное на ее выполнение [6].

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

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

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

Вариант микровзаимодействия с анимированными элементами обратной связи воспринимался успешнее, чем со статическими. Однако, в случае с анимацией нескольких элементов обратной связи поочередно, внимание пользователей рассеивается, вследствие чего возрастает когнитивная нагрузка на работу мозга и снижается скорость дальнейшего взаимодействия с приложением [7]. Тогда как при одновременной анимации элементов, пользователи не акцентировали внимание на анимации.

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

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

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

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

Литература

1. The Mobile Economy 2018 [Электронный ресурс]. – Режим доступа: https://www.gsmaintelligence.com/research/?file=061ad2d2417d6ed1ab002da0dbc9ce22&download
2. Dan Saffer, Microinteractions: Designing with Details / O’Reilly Media,, 2013. – 170 р.
3. Dobrez, L. The Perception of Depicted Motion. Arts 2013, No. 2 (4), 383–446. doi:10.3390/arts2040383
4. Kathryn Whitenton, Minimize Cognitive Load to Maximize Usability [Электронный ресурс]. – Режим доступа: https://www.nngroup.com/ articles/minimize-cognitive-load/ – 22.12.2013
5. What Is A Microinteraction? [Электронный ресурс]. – Режим доступа к ресурсу: http://microinteractions.com/what-is-a-microinteraction/ 2013 – Загл. с экрана.
6. Quantitative vs. Qualitative Usability Testing [Электронный ресурс]. – Режим доступа к ресурсу: https://www.nngroup.com/articles/quant-vs-qual/ – 01.10.2017 – Загл. с экранa.
7. Ways To Avoid Overwhelming Users: Lessons Learned From My High-School Teachers [Электронный ресурс]. – Режим доступа: https://www.smashingmagazine.com/2014/08/avoid-overwhelming-users-lessons-from-high-school