Како да се прилагоди брзината на анимациите за попријатна навигација
Модерните дигитални платформи се потпираат на анимации за да ја насочат вниманието на корисникот, да потврдат интеракции и да направат премините помеѓу екраните да изгледаат природно. Сепак, истата анимација што изгледа елегантно на еден корисник може да биде заморувачка, дезориентирачка или дури и медицински проблематична за друг. Тоа е причината зошто пристапните опции за контрола на брзината на анимации се клучен дел од современата UX-култура, а не само техничка деталност за развивачите.
Кога станува збор за теми со темна визуелна палета и прилагодлив распоред, исправната рамка на движење може да направи разлика помеѓу пријатно и фрустрирачко искуство. Платформите што ги земаат предвид корисничките преференции за брзина, пауза или целосно исклучување на анимациите ги почитуваат принципите на инклузивен дизајн и ги отвораат вратите за поширока публика, вклучувајќи луѓе со вестибуларни нарушувања, фотосензитивна епилепсија или едноставно оние кои сакаат побрзо преминување низ информациите.
| Метод за контрола | Каде се наоѓа | Ниво на контрола | Погодност за корисникот |
|---|---|---|---|
| Системски поставки на уредот | Windows, macOS, Android, iOS | Средно – глобално за сите апликации | Висока за основни корисници |
| Параметри на прелистувачот | Chrome, Firefox, Safari, Edge | Средно до високо | Средна, бара кратка навигација низ менито |
CSS prefers-reduced-motion |
Во кодот на страницата | Високо, прецизно по елемент | Висока, но зависи од развивачот |
| Додатоци и екстензии | Продавници за прелистувачи | Максимално, прилагодливо | Средна, инсталација и конфигурација |
Зошто брзината на анимациите има значење за секој корисник
Движењето на елементите на екранот влијае врз перцепцијата на брзината на целата платформа. Кога транзициите траат премногу долго, корисниците чувствуваат дека страницата „виси", а кога се премногу брзи, можеби не добиваат доволно време да го процесираат она што го гледаат. Ова е особено важно на веб-локациите со динамични табла, статистики и резултати во реално време, каде што постојаните промени на вредностите може да бидат визуелно хаотични без соодветно темпирање.
Покрај тоа, одредени групи корисници имаат медицинска или когнитивна чувствителност на брзите промени. Луѓето со мигрена, вестибуларни нарушувања или нарушувања од аутистичниот спектар може да искусат физичка непријатност при гледање на брзи зум-ин ефекти, хоризонтални лизгања или паралаксни позадини. Затоа опциите како забавување, паузирање или целосно исклучување на анимациите не се луксуз, туку основно барање за пристапност, што го препознаваат и комерцијалните платформи како оваа веб-локација кои инвестираат во контроли за брзина на транзициите.
Вградени контроли преку оперативниот систем и уредот
Повеќето современи оперативни системи нудат поставки кои индиректно влијаат врз начинот на кој се прикажуваат анимациите. Windows, на пример, овозможува прилагодување на визуелните ефекти за оптимална изведба, додека macOS вклучува опции во „Accessibility" менито за намалување на движењето. На мобилните уреди, Android и iOS имаат слични контроли за редукција на motion, кои потоа се почитуваат од страна на апликациите и веб-прелистувачите преку таканаречената media query prefers-reduced-motion.
Овие системски контроли се едни од најлесните за користење бидејќи не бараат инсталирање дополнителни алатки, туку само кратка посета на соодветното подмени. На пример, на iPhone опцијата „Reduce Motion" се наоѓа во Settings → Accessibility → Motion, а на уредите со Android може да биде во Settings → Accessibility → Remove animations. Кога оваа опција е активна, сите компатибилни апликации и веб-страници автоматски ги поедноставуваат своите транзиции, што значи дека корисникот добива постабилно искуство без дополнителна интеракција.
Прилагодувања во самиот прелистувач и на ниво на веб-страница
Покрај системските поставки, голем број прелистувачи вградуваат свои механизми за контрола. Firefox, на пример, има ui.prefersReducedMotion параметар во about:config, додека Chrome овозможува експериментално вклучување на слични прилагодувања. Овие поставки им овозможуваат на корисниците фино подесување кое не зависи од оперативниот систем, што е корисно кога сакаат поинакво однесување во различни средини или кога работат на повеќе уреди истовремено.
На ниво на самата страница, развивачите можат да користат CSS правилото @media (prefers-reduced-motion: reduce) за да ги прилагодат или целосно отстранат анимациите кога корисникот изразил таква желба. Ова вклучува забавување на CSS транзиции, исклучување на JavaScript-базирани анимации, или замена на видеа со статични слики. За корисниците кои често посетуваат платформи со статистички табели и динамични визуализации, можноста за прилагодување на овие елементи преку структуриран пристап – како на пример дизајнот на табелите – претставува значајна предност за инклузивноста на интерфејсот.
Улогата на контрастот, осветленоста и темната палета
Брзината на анимацијата не постои во изолација. Кога позадината е темна и контрастот е висок, брзите движења може да бидат уште попријатни отколку во светла тема, додека недоволен контраст во комбинација со брзи елементи создава визуелен шум и замор. Затоа платформите што комбинираат темна визуелна палета со добро балансирана анимација добиваат повеќе од збирот на двете поставки.
Прилагодувањето на контрастот за режим на висока осветленост е тесно поврзано со контролата на анимациите, како што може да се види и во овој напис. Кога сите три елементи – тема, контраст и движење – се усогласени, корисникот добива визуелно доследно и предвидливо искуство. Препорачливо е дизајнерите да размислуваат за овие параметри како за целина, наместо како за изолирани технички поставки кои се подесуваат независно една од друга.
Практичен список за имплементација на контрола на анимациите
Имплементацијата на пристапни опции за контрола на брзината не мора да биде скап или сложен процес. Со постепено воведување на стандардите и редовно тестирање со различни групи корисници, може да се постигне значително подобрување. Едукативните ресурси, како на пример овој образовен портал, нуват дополнителни материјали за разбирање на принципите на универзален дизајн кои можат да бидат од корист за дизајнерите, развивачите и сопствениците на платформи.
Клучно е да се има предвид дека контролата на брзината не значи само целосно исклучување на движењето. Постои цел спектар од опции – од минимално забавување, преку отстранување на паралаксни ефекти, до сосема статичен распоред – и секоја од нив може да биде вредна за различни корисници во различни моменти. Колку повеќе опции им се даваат на корисниците во форма на разбирливи контроли, толку поголема е веројатноста дека платформата ќе биде прифатена како инклузивна и добро дизајнирана.
- Поставете ја системската контрола „Reduce Motion" како основа, а потоа дозволете дополнително прилагодување во самата апликација.
- Користете ја CSS media query
prefers-reduced-motionза автоматско почитување на корисничките преференци без дополнителна интеракција. - Понудете видлива контрола во менито за поставки, каде што корисникот може рачно да ја прилагоди брзината на транзициите.
- Тестирајте со симулатори за фотосензитивна епилепсија и со корисници со вестибуларни нарушувања за да потврдите дека нема критични ефекти.
- Комбинирајте ја контролата на анимациите со прилагодување на контрастот и темите бидејќи овие поставки заемно се надополнуваат.
- Документирајте ги сите достапни контроли на јасен и разбирлив јазик во делот за помош или пристапност.
- Следете го однесувањето на корисниците за да откриете дали постојат проблематични анимации кои бараат дополнително прилагодување во идните верзии.