Използването на анимация за подобряване на потребителското преживяване на мобилни приложения

Изработката на изцяло статични екрани вече е в историята, като съвременният дизайн на мобилни приложения, и не само, се концентрира върху взаимодействието на потребителите със съдържанието и функционалностите. Тук идва и ролята на анимацията. Когато тя е използвана стратегически и тестовете са доказали нейната полезност, тя улеснява и ускорява взаимодействието с апликацията. Да разгледаме функциите на анимацията в рамките на модерния мобилен интерфейс.

Защо анимацията е важна за потребителското преживяване?
Действията на хората са движени основно от визуалните им перцепции, а когато едно изображение, което „струва повече от хиляди думи“, е задвижено, то става изключително мощен инструмент за взаимодействието на потребителите с мобилното приложение. Чрез анимацията процесът буквално оживява. Ценността ѝ става още по-голяма, като се имат предвид ограниченията в размерите на екраните на таблетите и смартфоните.

Основни видове анимация
В дизайна на мобилни приложения се използват два основни вида анимация: функционална и удовлетворяваща. Функционалната е съвсем лека, като често се интегрира в други компоненти на интерфейса. Нейната цел е да помогне на потребителя да се ориентира в мобилното приложение и да го използва по-ефективно. Удовлетворяващата анимация служи за създаване на емоции у хората, като ги забавлява и/или умилява, представяйки ценностите на бранда.

Функционалната анимация
Тя е важна при изграждането на пътя на потребителя и цялостното преживяване на мобилната апликация. Нейните основни функции са:
- Създаване на логични преходи
- Предоставяне на визуална обратна връзка
- Показване на статуса на системата
- Помощ при първото използване на приложението

1. Създаване на логични преходи
Преходът между две различни визуални състояния трябва да е ясен, гладък и лесен. Когато той е добре изграден, това помага на потребителите на апликацията да не се разконцентрират и объркат. Една от основните цели на анимацията е да подобри прехода между два навигационни контекста и да обясни промяната в подредбата на елементите на екрана.

Тъй като повечето взаимодействия на приложенията са йерархични (степенувани), анимацията също така се използва за представянето на по-малки и подробни елементи. В една апликация с календар например тя позволява „изскачането“ на бележките за всяка дата на екрана. Анимацията е и в основата на създаването на бутони с двойна функция като „пусни/пауза“, като позволява визуалната промяна на иконката в зависимост от контекста. Важното в случая е двете функции да са максимално ясно представени - най-добре със символи, които потребителите познават отлично.

2. Предоставяне на визуална обратна връзка
Благодарение на визуалната обратна връзка потребителите усещат, че имат повече контрол, когато използват мобилното приложение, тоест те разбират и познават настоящия контекст по-добре. Един от основните фактори за това е адаптивността на потребителския интерфейс към техните нагласи, действия и предпочитания. Елементите на интерфейса трябва да са максимално „материализирани“, въпреки че са дигитални. Това се постига чрез анимация, чиято цел е да отрази действията на потребителя визуално и чрез движение веднага. Най-простият пример е премигването на даден бутон, когато той бъде натиснат.

Визуализирането на резултата от дадено действие е друг основен елемент на визуалната обратна връзка. В този случай анимацията играе потвърждаваща роля, като замества думите. Когато се обработва въведена от потребителя информация например, най-често използваният анимиран елемент е спинерът, приличащ на геврече, който се запълва. След това обикновено се появява икона с чавка, която показва, че данните са приети.

3. Показване на статуса на системата
Винаги се случва нещо „на заден план“ в едно мобилно приложение и когато това има директен ефект върху потребителското преживяване, индикацията му е повече от необходима. При зареждането на екраните например може да се сложи свежа и забавна анимация, която е свързана с бранда, вместо традиционният индикатор. Друго решение е да се използва така нареченият „скелетен екран“, при който полетата се обозначават веднага, а съдържанието им може да се зарежда постепенно.

Анимацията може да е полезна и при обновяването на съдържанието, което често става с дръпването на екрана надолу. Тя трябва да индикира действието, предприето от потребителя, и да представя извършвания процес на обновяване в реално време. Получаването на известия в мобилното приложение (in-app notifications) обикновено се индикира с малко етикетче с номерче, което е „кацнало“ на иконата, обозначаваща наличието на съобщения. Сигналът може да стане по-ясен и силен с помощта на анимация. Много често иконата за известия е стилизирана камбанка, която е лесно разпознаваема. При наличието на ново съобщение, тя може да се движи, все едно че звъни.

4. Помощ при първото използване на приложението
Анимацията може да послужи, за да се покаже на потребителя как да работи с мобилното приложение. Трябва да се обясни на хората как да ползват апликацията, особено ако тя има по-сложни функционалности. За опознавателния процес може да се създаде анимирано съдържание, което показва екраните, бутоните и менютата и как се взаимодейства с тях чрез жестове.

Друг широко използван подход, особено при игрите, са визуалните подсказки, които често се появяват автоматично, когато потребителят не предприема действие в рамките на определен период. В много случаи те са полезни и за навигацията.

Удовлетворяващата анимация
За много специалисти потребителското преживяване е изцяло свързано с това как работи мобилното приложение и колко полезно е то. Същевременно то не може да не провокира емоции. Този желан ефект може да се получи чрез използването на така наречената удовлетворяваща анимация, която най-общо казано носи наслада. Да разгледаме основните начини, чрез които тя създава страхотни и незабравими моменти за потребителите:

Демонстрация на изисканост - Чрез анимацията преживяването може да стане по-модерно и уникално, което искрено радва хората.

Награда за потребителя - Когато той извърши определено действие, което отнема значително време и усилие, една малка анимация лесно може да го накара да се усмихне. Този подход, използван най-често при игрите, има приложение и в по-практични апликации. Можем да дадем пример с отмятането на задачи в приложение тип личен бележник.

Показване на човешкото лице на бранда - Идеята е да се създаде лична връзка между бранда и потребителя, която естествено включва емоции. Ефективен начин за постигането на желаните резултати е да се анимират определени аспекти от общуването между двете страни. Когато потребителят въведе информация, поискана от бранда например, може да излезе анимирано съобщение, което съдържа кратка благодарност. Известията, изпращани от мобилното приложение, могат да се обогатят с емотикони, показващи какво изпитват хората, които стоят зад бранда.

За забавление – Анимациите имат силата да накарат потребителите да взаимодействат с апликацията, като трансформират обикновени действия в нещо по-забавно. Когато се обърне внимание на леките движения и жестове, това може да изненада приятно хората, а и да демонстрира високо професионално умение от страна на дизайнерите. При създаването на лична бележка например може да се създаде много кратка анимация, която показва пускането и получаването на хартиена ракетка, като тези, които едно време си пращахме в училище.

Анимиране с цел
Както вече разбрахме, анимацията е могъщ инструмент и тъкмо за това към нея трябва да се подхожда отговорно. Тя трябва да се използва с конкретна цел, така че да улесни и ангажира потребителя, а не да го разконцентрира. Най-добрите анимации са тези, които са естествена част от потребителското преживяване и не търсят просто да привлекат вниманието.

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

Когато е използвана правилно, анимацията може да даде на едно мобилно приложение по-динамично, удовлетворяващо и ангажиращо потребителско преживяване.

Споделете в: