Брянск, Брянская область, Россия
Брянск, Брянская область, Россия
ГРНТИ 12.09 Развитие науки
Статья посвящена основам анимации пользовательского интерфейса. Рассмотрены правила юзабилити, используемые в разработке анимации. Рассмотрено понятие триггера системы. Выделены основные принципы анимации пользовательских интерфейсов, обеспечивающие оптимальное взаимодействие пользователя с системой.
анимация, пользовательский интерфейс, проектирование интерфейсов, дизайн интерфейса, эргономика, принципы UX.
Перед разработчиками систем «человек-компьютер» стоит задача проектирования эстетически привлекательных пользовательских интерфейсов. Решение этой задача предполагает применение методов художественного конструирования и технической эстетики, в частности, композиционных средств [1]. При разработке мультимедийных пользовательских интерфейсов используют большое количество различных методов и проектных решений.
Часто разработчики программных средств оценивают функциональность системы отдельно от её пользовательского интерфейса, и редко рассматривают элементы взаимодействия пользователя и системы. Для пользователей именно пользовательский интерфейс является программой. Впечатление от взаимодействия с программным продуктом (ПП) формируется непосредственно от работы с интерфейсом [2].
Одной из заметных тенденций последних лет в дизайне взаимодействий (interaction design) стало постепенное исчезновение границ между веб-дизайном и дизайном приложений, особенно в мобильных средах. Одним из признаков их взаимовлияния стали качественные изменения в использовании анимации на веб-сайтах. Поэтому решение задач связанных с анимацией пользовательского интерфейса (ПИ) является актуальным.
В самом простом виде анимацию в дизайне взаимодействия можно определить как продолжающееся во времени изменение характеристик (свойств) элемента дизайна [3]. Анимация отражает плавность движений управляющего интерфейсом человека и придает взаимодействию между человеком и машиной иллюзию прямого управления.
В настоящее время сложно представить интерфейс статичным. Анимация используется повсеместно, так как микровзаимодействия способны отражать состояние систем, способствуют предотвращению пользовательских ошибок, формируют положительный пользовательский опыт, а так же способны представлению и позиционированию бренда на рынке.
История использования анимации в вебе, как и в интерфейсах приложений, привязана к технологиям: анимация реализовывалась в основном при помощи платформы Flash, неинтерактивных изображений в формате GIF и скриптов на языке программирования Javascript. Долгое время анимации в веб-интерфейсах были призваны главным образом привлекать внимание посетителей. Как следствие, анимации воспринимались скорее как развлекательный и даже раздражающий прием, не слишком совместимый с идеей дизайна, нацеленного на решение пользовательских задач.
Исследования в этой области концентрировались прежде всего на использовании анимации в дизайне графического интерфейса приложений и операционных систем. В частности, С. Хадсон и Д. Стаско [4] (Технологический институт Джорджии), а также Б. Тверски и др. [5] считают, что применение анимации позволяет увеличить объем воспринимаемой пользователем информации, а Б.В. Чанг (Стэнфордский университет) и Д.Унгар [6] показывают, что анимация способствует смягчению резкого перехода между разными состояниями интерфейса.
При использовании цифровых интерфейсов мы ежедневно сталкиваемся с микровзаимодействиями. Они обеспечивают обратную связь, отражая статус системы и помогая пользователям предотвращать ошибки. Кроме того, микровзаимодействия используют для брендирования интерфейса.
Микровзаимодействия состоят из триггера и обратной связи. В данном случае триггером может быть действие пользователя или изменение состояния системы. Обратная связь — это ответ на триггер, передаваемый через небольшие, обычно визуальные, изменения в пользовательском интерфейсе [7].
Рис.1 Схема взаимодействия пользователя с системой
Триггеры можно разделить на пользовательские и системные. Пользовательские триггеры срабатывают при взаимодействии с графическим интерфейсом, а также могут быть вызваны голосом или жестом. Системные возникают при выполнении определенного набора условий. Не каждый элемент является частью микровзаимодействий. Например, к ним нельзя отнести статичные элементы (у них нет триггеров) и флоу, состоящий из нескольких действий.
Положительный пользовательский опыт — это не только про юзабилити, но еще и про вовлечение. Микровзаимодействия играют значительную роль, влияя на внешний вид продукта или услуги. При этом они могут улучшить интерфейс продукта с помощью:
- Поощрения участия;
- Отражения состояния системы;
- Предотвращения ошибок;
- Брендирования за счет анимации [7].
Современные элементы микровзаимодействия, такие как потянуть для обновления, сложнее сделать понятными пользователю, чем их стандартные аналоги (полоса прокрутки). Это связано со сформировавшимися за долгое время пользовательскими паттернами при использования интерфейсов. Современные элементы микровзаимодействия требуют особого внимания и продуманности при их создании, так как они являются новыми для пользователей.
Рассмотрим правила юзабилити, которые непосредственно касаются разработки анимации пользовательского интерфейса.
- Отображение системного статуса
Понятная для пользователя система способствует его общему вовлечению в процесс и в систему в целом. Любое отображение состояния системы является микровзаимодействием, так как имеет триггер и обратную связь.
- Индикаторы прогресса системы
Индикаторы в системе позволяют понять пользователю в каком состоянии находится система на момент выполнения задачи, поддерживая лояльность пользователя к системе. Примером таких индикаторов служат круговые индикаторы обновления новостной ленты.
- Режим ожидания действий пользователя
Данное правило информирует о том, что за счёт микровзаимодействий система способна показывать режим ожидания и необходимость дальнейших действий от пользователя. В iOS, при нажатии и удержании иконки на главном экране, все приложения начинают немного «трястись». Это позволяет понять, что система ждет дальнейших действий: а) приложение можно перетащить в другое место; б) при нажатии крестика в верхнем левом углу программа удалится. Микровзаимодействия не ограничиваются экранными интерфейсами. Голосовые помощники, такие как Google Home, используют их в режиме ожидания команды пользователя.
- Предотвращение пользовательских
ошибок
Необходимость предотвращения ошибок одна из главных задач в разработке пользовательских интерфейсов. Микровзаимодействия способны предупредить пользователя о возможном возникновении ошибки и способствуют формированию положительного пользовательского опыта при использовании системы.
- Отмена действия пользователя
Микровзаимодействия предоставляют удобную возможность для отмены действия, поскольку именно они сообщают пользователю о том, что произошёл переход на странице или ошибка действий. Сервис Gap.com использует микровзаимодействия для информирования пользователя о добавлении товара в избранное. Пульсирующее сердце в углу фотографии товара на сайте Gap — удачный пример использования анимации для привлечения внимания. Так интерфейс интернет-магазина Gap явно демнострирует пользователю, что совершено действие, и, если оно совершено случайно, пользователь может быстро его отменить.
- Предотвращение повторного ввода
данных
Данное правило исключает повторное заполнение необходимой формы на сайте, например регистрация аккаунта. Микровзаимодействия сообщают пользователям, соответствует ли их пароль всем необходимым требованиям, и, таким образом, предотвращают повторный ввод данных (т.е. избавляют от необходимости заполнять всю форму вновь). Примером такого взаимодействия является переход к неправильно заполненному пункту формы без потери информации в других пунктах формы. Если требование ввода данных не соблюдается, тогда под полем пункта возникает красное сообщение об ошибке. Такая серия микровзаимодействий обеспечивает пользователям последовательную обратную связь и приятный опыт работы с сервисом. eBay использует микровзаимодействия в форме регистрации, чтобы сообщить, соответствует ли пароль требованиям
- Отражение ценностей бренда
посредством микровзаимодействий
Микровзаимодействия должны служить не только для технической стороны (удобство пользователя), но и для позиционирования бренда на рынке. Если бренд позиционирует себя развлекательным и ярким, то это стоит отражать на протяжении всего контакта пользователя с интерфейсом системы за счет необходимых микровзаимодействий. От глобального позиционирования бренда зависит анимация на сервисе. Несоответствие данного пункта в системе вводит пользователя в заблуждение.
Компания Apple при поздравлении пользователя с днем рождения использует анимированные воздушные шарики. Здесь одновременно закладывается и позиционирование компании как инновационной, идущей на встречу людям, и, в тоже время, не нарушающей границ. Для общения с пользователями многие бренды полагаются в основном на визуальные эффекты. Микровзвимодействия также могут состоять из звуковых откликов на конкретные действия пользователя. На пример, при входе в систему приставка Xbox One обеспечивает звуковую и визуальную обратную связь. Кнопка Xbox подсвечивается, и система издаёт короткую характерную мелодию. Микровзвимодействия — это не только узнаваемый элемент, но и одна из специфических особенностей бренда Xbox.
Таким образом целесообразно при разработке интерфейса пользоваться указанными правилами, учитывая при этом назначение разрабатываемого продукта, целевую аудиторию, время и бюджет разработки. Хорошо продуманные микровзаимодействия могут оказать большое влияние на пользовательский опыт. Они играют важную роль, так как служат средством коммуникации с пользователем. Микровзаимодействия обеспечивают обратную связь о состоянии системы, а также помогают пользователям не допускать ошибки. Кроме этого, микровзаимодействия способствуют выделению бренда на рынке и его позиционирования, тем самым заинтересовывая пользователя в его выборе [7].
С развитием информационных технологий пользовательских интерфейс должен становится наиболее удобным для пользователя. Анализ изученного материала позволил выделить следующие основные принципы анимации, которых следует придерживаться при разработке пользовательского интерфейса (рис.2.).
Рис. 2 Классификация принципов анимации пользовательского интерфейса
Первый принцип включает в себя визуальную иерархию анимированных элементов не только между собой, но и композицией в целом. Он включает в себя такие критерии как родительские связи, паралакс, многомерность и возможность интерактивного взаимодействия.
Критерий родительские связи обеспечивает пространственные и иерархические связи при взаимодействии с множеством объектом для поддержки с юзабилити. Родительство также позволяет дизайнерам лучше координировать события пользовательского интерфейса во времени, передавая пользователям природу связей объектов.
Критерий параллакс создает пространственную иерархию визуальной плоскости, пока пользователь скроллит страницу сайта. Параллакс – это критерий, описывающий, как разные объекты интерфейса двигаются с разной скоростью. Параллакс позволяет пользователю сфокусироваться на главных действиях и контенте, соблюдая целостность дизайна. Элементы на заднем фоне отдаляются от внимания пользователя во время параллакс-события. Дизайнеры могут использовать этот принцип для отделения актуального контента от вспомогательного и второстепенного.
Критерий многомерность обеспечивает пространственный нарративный фреймворк, когда возникают и отделяются новые объекты. Для UX критически важными являются феномен непрерывности и инстинкт ориентировки в пространстве. Многомерность дает возможность преодолеть нелогичность плоскости UX. Пользователи постоянно пользуются пространственными фреймворками для навигации как по реальному миру, так и по цифровому. Предоставление пространственных указаний по начальному и конечному пунктам позволяет усилить ментальные модели того, где в UX находятся пользователи. Критерий многомерности так же позволяет решить парадокс наслоения в визуальной плоскости.
Критерий возможность интерактивного взаимодействия подчеркивает, что анимированный элемент может подсказывать пользователю, что он является интерактивным, выступая таким образом в роли аффорданса, либо указывать на возможность взаимодействия со страницей в целом.
Следующим принципом является тайминг который включает в себя критерии продолжительности и скорости анимации элементов.
Критерий продолжительность анимации подчеркивает, что скорость анимируемых элементов должна напрямую зависеть от разрешения и диагонали устройства, на котором эта анимация будет просматриваться.
Скорость анимации показывает, что в ходе изменения позиции и состояния элементов анимация должна быть достаточно медленной для того, чтобы пользователь успевал зрительно улавливать изменение системы. Но в тоже время анимация не должна быть слишком медленной, так как она не будет вызывать триггера у пользователя, а скорее будет служить раздражающим фактором.
Рис. 4. Оптимальная скорость анимации блоков системы
Исходя из исследований на основе метода Model Human Processor, нами была выявлена формула скорости анимации, отвечающая за визуальное восприятие объекта в системе.
Fr>1 / Ctp = 1 / k,
где Fr (framerate) - частота кадров, Ctp (cycletime of processor) - время цикла процесса, k - константа частоты кадров для слияния изображений, ее оптимальный диапазон 50-100 msec.
Исследованием оптимальной скорости анимации занимался Якоб Нильсон в 1993 году [8], который при помощи метода когнитивного моделирования (Human processor model) выявил оптимальную скорость анимации элементов пользовательского интерфейса. Этот метод использует экспериментальное время для расчета когнитивного и моторного времени обработки данных пользователем.
Эти цифры основаны на конкретных качествах человеческого мозга. Любая анимация короче 100 мс мгновенна и не будет распознаваться вообще. Если анимация длительностью более 1 секунды передаст ощущение задержки и, следовательно, будет скучной для пользователя.
Критерий смещение подчеркивает то, что среди движущихся объектов одного и того же размера первым должен остановиться объект, который прошел кратчайшее расстояние. Маленькие объекты по сравнению с большими объектами движутся медленнее, так как они делают большие смещения.
Критерий задержки относится к элементам списка (карточки новостей, списки адресов электронной почты и т.д.) Элементы списка должны иметь очень небольшую задержку отображения. Каждое появление нового элемента должно длиться от 20 до 25 мс. Более медленное появление элементов может раздражать пользователя.
Третьим принципом анимации пользовательских интерфейсов является непрерывность системных изменений. Данный принцип включает в себя такие критерии как оверлей и трансформацию.
Оверлей создает нарратив и пространственное соотношение объектов в визуальной плоскости, когда наслоенные объекты зависят от местоположения. Оверлей поддерживает юзабилити, позволяя пользователям манипулировать параметрами порядка объектов на плоскости, чтобы решить проблему отсутствия непространственных иерархий. Оверлей дает возможность дизайнерам использовать движение для манипуляции зависящими от положения объектами, существующими перед или позади других объектов в нетрехмерном пространстве.
Трансформация создает продолжительное состояние нарративного сценария, при котором изменяется целостность объекта. Трансформация – самый заметный критерий из принципов анимации, потому что он визуально наиболее выделяется. Трансформация создает плавный переход пользователя через разные UX-состояния или сущности (в примере это кнопка, затем – круглый прогресс-бар, затем галочка), которые приводят к желаемому результату. Пользователь проходит через эти функциональные пространства к нужному пункту назначения.
Таким образом, исходя из изученного нами материала, можно сделать вывод, что построение диалога с пользователем системы можно и даже необходимо вести при помощи анимации интерфейса, так как она выполняет множество функций в системе. В ходе нашего исследования нами были рассмотрены правила юзабилити, которых необходимо придерживается в ходе разработки позволяющие повысить эффективность программного продукта, а так же сформированы основные принципы, которых следует придерживаться при проектировании анимации пользовательских интерфейсов. Использование данных принципов в ходе разработки анимации пользовательского интерфейса позволит не только сделать его более удобным, но и повысит эффективность взаимодействия пользователя с системой.
1. Баканов, А. С. Эргономика пользовательского интерфейса. От проектирования к моделированию человеко-компьютерного взаимодействия [Электронный ресурс] / А.С. Баканов, А.А. Обознов. - Электрон. текстовые данные. - М. : Институт психологии РАН, 2011. - 176 c. - 978-5-9270-0191-0. - URL http://www.iprbookshop.ru/15677.html.
2. Галанова, И.С. Эргономическое обеспечение проектирования интеллектуальных пользовательских интерфейсов / И.С. Галанова, Ю.А. Малахов // Эргодизайн. - 2019. - №3(05). - С. 122-126. DOI:https://doi.org/10.30987/article_5d25e4dd0bccd0.62314595.
3. Сергеев, С.Ф. Методы тестирования и оптимизации интерфейсов информационных систем [Электронный ресурс]: учебное пособие / С.Ф. Сергеев. - Электрон. текстовые данные. - СПб.: Университет ИТМО, 2013. - 117 c. - 2227-8397. - URL: http://www.iprbookshop.ru/68664.html (дата обращения 26.04.2018).
4. Hudson, S. Animation Support in a User Interface Toolkit: Flexible, Robust, and Reusable Abstractions / S. Hudson, J.T. Stasko // Proceedings of the 6th annual ACM Symposium on User Interface Software and Technology. Atlanta, 1993. - C.57.
5. Tversky, B. Animation: Can It Facilitate? / B. Tversky, J.B. Morrison, M. Betrancourt // International journal of human-computer studies. - Т. 57. - Philadelphia. - 2002. - С. 247-262.
6. Chang, B.-W. Animations: From Cartoons to User Interface / B.-W. Chang, D. Ungar // Proceedings of the 6th annual ACM Symposium on User Interface Software and Technology. Atlanta, 1993. - C.45.
7. Creating Usability with Motion: The UX in Motion Manifesto.[Электронный ресурс] - URL: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc.
8. Jakob Nielsen Usability Engeneering (Interactive Technologies) // Published by Morgan Kaufmann, San Francisco, 1993.
