Како да се дизајнираат полнила за напредок

Полнилото за напредок е визуелен сигнал дека задачата се извршува и му овозможува на корисникот да ја процени останувачката работа. Тоа ја намалува несигурноста, го задржува вниманието и создава чувство на контрола дури и кога процесот трае подолго.

Доброто полнило ја следи вистината соодветно на процесот, ја прикажува со јасни ознаки и не создава погрешни очекувања за времето на завршување. Неговиот дизајн треба да биде разбирлив во темна и светла тема, да работи на различни екрани и да остане употребливо и за корисници со различни потреби.

Избор на видот полнило што најдобро ја опишува задачата

Кога крајната вредност е позната, најсоодветен е процентуалиот индикатор. Тој покажува колку е завршен процесот, на пример 45 или 80 проценти, и е придружен со кратко текстуално објаснување за тековната фаза. Прикажувањето на прецизна вредност без вистина потврден податок може да создаде погрешно впечатление, па затоа бројот треба да се добива од реалниот извршен процес.

Состојба на процесот Соодветен модел Главна информација Пример
Познат крај на задачата Процентуално полнило Колку проценти се завршени Обработка на документ
Непознат крај на задачата Лента со движење Работата сè уште продолжува Вчитување на содржина
Повеќе последователни етапи Сегментирано полнило Кои етапи се завршени и следна Навигација низ форма
Задачата чека нешто Етапен индикатор Во која фаза е процесот Синхронизирање на податоци

За непознатото време на завршување е погодна лента со непрестано, но ненагласно движење. Кога процесот има повеќе етапи, сегментираното полнило е поинформативно од единечната процентуална вредност, бидејќи секој сегмент може да покажува завршен, тековен или преостанат чекор. Уште материјали за дизајн на интерфејси можат да послужат како референца при изборот меѓу овие модели.

Контраст и изглед во темната визуелна тема

Во темната тема, полнилото мора да има доволно контраст од позадината и од неговиот простор. Светлиот дел на лентата треба да се разликува и од неисполнетиот дел, а основниот текст да остане читлив без осветлување или дополнителни ефекти. Контрастот треба да ја поддржуваат и，然后把 видивоста да ја потврдат материјалот, како што бараат стандардите за пристапност.

Бојата сама по себе не смее да ја пренесува единствената информација за состојбата. Завршен, тековен и неуспешен процес можат да имаат различни бои, но треба да бидат придружени со текст, икона, различен облик или јасно разделување на сегментите. Ова го овозможува правилното разбирање и кај корисниците со нарушени перцептивни способности.

Пристапност и читливост за сите корисници

Семантичката маркирачка овозможува полнилото да биде препознатено како индикатор за извршување, додека текстуалното објаснување го дава истиот контекст на сите корисници. Корисникот треба да види што се случува, на пример „Исполнето 3 од 5 етапи“, наместо само непозната процентуална вредност. Историјата на процесот, како што се нуди на страницата за чести прашања за корисници, може да помогне во формулирањето на јасни и корисни одговори.

Екранските читачи имаат потреба од ознака за прогрес и од соодветни вредности. Поради тоа, при динамичко полнило се користат атрибути како aria-valuenow, aria-valuemin и aria-valuemax, а неопределениот процес се означува поинаку. Важна е и редоследот на фокусот: полнилото не смее да го пресврте во нов облик на активност што јаInterruptва или ја забавува навигацијата.

Анимациите треба да ги почитуваат настройките за намалено движење. Кога корисникот избира режим со намалени ефекти, промените на ширината и бојата можат да бидат непосредни, а движењето на лентата да се замени со периодично ажурирање на текстот. Поради ова, полнилото останува информативно и во услови ограничен перформанс или висока потрошувачка на енергија.

Поврзаност со навигацијата и корисничкото искуство

Полнилото за напредок треба да ја опишува конкретната задача што корисникот ја започнал, без да ја претвори во општа декорација. Во многоетапна навигација, секој чекор може да биде прикажан како сегмент со наслов и кратко име, при што тековниот чекор останува видлив. При префрлање меѓу страници, ознаката за тековната локација и очигледното враќање назад го зачувуваат контекстуалниот ориентир.

Добар пример за јасна структура е главната страница, каде различните типови содржина треба да бидат поделени според намената и приоритетот на корисникот. Истото важи и за полнилата: интерфејсот мора да покажува дека обработката на податоците, поставувањето на поставките и вчитувањето на содржината се различни активности. Сликата или бојата не треба да ги заменуваат насловите на задачите.

При враќање назад, префрлање на нова јазична верзија или продолжување по грешка, полнилото треба да ја задржи најновата валидна состојба. Корисникот не треба повторно да ја започнува целата задача заради изгубената позиција. Дополнително, ако процесот запира, интерфејсот моја да го прикаже проблемот, да понуди конкретно решение и да ја зачува состојбата пред продолжувањето.

Анимации и микроинтеракции со јасна порака

Промената на должината на полнилото треба да биде плавна и да го одразува вистинскиот напредок. Премногу брзото анимирање може да создаде чувство дека задачата се завршила предвидувано, а премногу спорото движење создава застој. Упатството за анимации и микроинтеракции може да помогне во изборот на соодветното траење и начинот на реакција.

Завршувањето deserves кратко, ненагласно потврдување, како промена на иконата или кратко појавување на текстот „Готово“. Истата микроинтеракција не треба да се користи за грешка, затоа што неуспехот бара јасно објаснување и можност за повторно обидување. Додадениот звук или визуелен ефект мора да имаат функционална purpose и да не го нарушуваат остатокот од интерфејсот.

При вчитување со непознато времетраење, лентата со движење треба да остане смирена и да не го привлекува вниманието повеќе од потребното. Корисникот мора да има и други начини за разбирање на процесот, како текстуален статус или можност за напуштање. Кога податоците се всушиност постари, ажурирањето на индикаторот без реална промена на состојбата создава погрешна комуникација меѓу интерфејсот и системот.

Препораки за сигурна и ефикасна имплементација

Следните препораки ги поврзуваат визуелната јасност, пристапноста и реалното следење на процесот во едноставен модел за имплементација.

Поставувањето на полнилото треба да биде дел од функционалниот текст на интерфејсот, а не само додаден графички елемент. Неговиот дизајн ја поддржува комуникацијата, ја поедноставува очекувањето и го зачувува фокусот на корисникот during секоја фаза од процесот.