4 triky, aby se zatížení časů cítit rychlejší
Bez ohledu na to, jak dobře je navržené uživatelské rozhraní, může někdy nebo někdo jiný, kdo ho používá, bude muset počkat, až se něco načte.
Doba načítání by mohla poškodit celkovou zkušenost. Když uživatelé čekají příliš dlouhou dobu na načtení aplikace, uživatelé mohou být netrpěliví. Pokud uživatelé získají tento pocit, opustí váš web a půjdou někam jinam. Naštěstí existuje několik věcí, které můžete udělat, abyste urychlili pocit vašeho času uživatele a udělali, že se váš obsah načítá rychleji než to dělá.
1. Nikdy nechte uživatele čekat, aniž byste jim poskytli zpětnou vazbu
Je-li připojení uživatele pomalé, může chvíli trvat, než stránky naplní obsah na obrazovce. Doba čekání uživatele začíná okamžikem zahájení akce a nejhorší případ je, když nemá žádný indikátor toho, že daný web byl přijat.
Pokud vaše stránky neoznámí uživatelům, že potřebuje určitou dobu k dokončení akce, uživatelé si často myslí, že žádost neobdrželi a pokusili se znovu. Z důvodu nedostatečné zpětné vazby vznikly spousty dalších kohoutků. Aby lidé byli šťastní, musíme dát najevo, že se něco děje, nabídnout vizuální zpětnou vazbu.
2. Vyhněte se indikátorům statického postupu
Statické indikátory pokroku jsou ty, které mají nepohyblivý obrázek nebo text, jako například "Načítání ..." nebo "Prosím, počkejte ...", což znamená, že žádost byla přijata. Zatímco každá zpětná vazba je lepší než žádná, statické ukazatele jsou špatné UX. Uživatelé nemají žádný indikátor, že se obsah načítá, takže si nejsou jisti, zda je proces skutečně uvíznutý.
3. Používejte animované indikátory načítání
Psychologické studie čekací doby ukazují, že se uživatelské zaostření začne po jedné vteřině čekat bez zpětné vazby. Chcete-li snížit nejistotu uživatele, použijte ukazatel pokroku pro jakoukoli akci, která trvá déle. (Poznámka: použití animace se nedoporučuje pro cokoliv, co se načítá méně než jedna vteřina, protože uživatelé se mohou cítit úzkostlivě o tom, co právě blikalo na obrazovce a mimo obrazovku).
Nekonečné nakládací nůžky pro poměrně rychlé operace
Nejjednodušší formou animovaných indikátorů je zatížení. Tento typ vizuální zpětné vazby jen uvádí, že uživatel musí čekat, ale neříká, jak dlouho by měli čekat. Jako obecné pravidlo byste měli použít tento typ indikátoru pokroku pro rychlé akce (2-10 sekund).
Spinner ze šedých čar vyzařujících z centrálního bodu je standardním přístupem.
Nakládací nůžky se často používají společně s gestou "pull-to-refresh". Funguje jako prostředník mezi dvěma státy uživatelského rozhraní a pomáhá uživatelům pochopit, co se děje při změně obrazovky.
Aplikace Apple Mail pro iOS
Procento provedené animace pro dlouhotrvající operace
Nakládání rozmetadel není správným způsobem, jak naznačovat dlouhotrvající zatížení. Je mnohem snesitelnější čekat na něco, pokud víme, kdy se to stane. Proto při dlouhodobých operacích byste měli svým uživatelům jasně ukázat, jak dlouho potřebují čekat. Jako obecné pravidlo byste měli použít procentuálně provedenou animaci pro delší procesy, které trvají 10 nebo více vteřin.
Obrázek kreditu: Behance
Alternativně můžete poskytnout obecný časový odhad operace. Nepokoušejte se být přesní, může to být jednoduché, "může to chvíli trvat," aby informovalo uživatele a povzbudilo je, aby ho počkali.
Instalace aktualizace softwaru v systému Mac OS X
4. Přizpůsobení vnímání času uživatelem
Jak rychle se váš obsah načítá v mysli uživatele. Při pokusu o vytvoření rychlejšího uživatelského zážitku zkrátíte spíše vnímaný čas než skutečný čas. Chcete-li tak učinit, můžete vyplnit čekací dobu pomocí obsahu, animací nebo akcí, které uživatel může provést.
Progress bars
Průběžný prvek umožňuje uživatelům vyvinout očekávání, jak rychle se akce zpracovává. Způsob, jakým se váš pohybový pruh pohybuje, ovlivňuje, jak vnímá čas načítání. Chcete-li, aby uživatelé pokročili rychleji, můžete používat následující jednoduché techniky:
- Průběžný panel by se nikdy neměl zastavit, jinak se uživatelé domnívají, že stránka zmrzla. Nejhorší možný případ je, když se ukazatel postupu přiblíží 99% a najednou se zastaví. Většina uživatelů bude tímto chováním frustrována.
- Můžete skrýt malé zpoždění v panelu pokroku tím, že ho přesunete okamžitě a stabilně.
- Přesuňte ukazatel průběhu zpomaleně na začátku a urychlete jej směrem ke konci, abyste uživatelům poskytli rychlý pocit dokončení.
Obrázek kreditu: Dribbble
Kostní obrazovky
Čekací doba je správný čas pro skeletové obrazovky (aka dočasné informační kontejnery). Skeletová obrazovka je v podstatě prázdná verze stránky, do které jsou informace postupně načítány. Poskytuje alternativu k tradičním animovaným indikátorům. Spíše než ukázat abstraktní widget, skeletové obrazovky vytvářejí očekávání toho, co přijde, a uživatelům se zaměřuje na pokrok namísto čekacích časů.
Obrazy skeletu se načítají rychle, protože se jedná o malý obrázek, který se často skládá z jednoduchých tvarů. Tyto techniky je možné využít i v mobilních aplikacích, protože skeletová šablona může být uložena lokálně spolu s daty aplikace. Aplikace Facebook pro systém iOS zobrazuje uživatelům šedé bloky a řádky, které reprezentují obrázky a text, když se aplikace načte. Po dokončení načítání se obrazy a text zobrazí místo dočasných kontejnerů. Není to tak rychlejší, než mít nakládací obrazovku s rotujícím nástrojem, ale v mysli uživatele to cítí, jako by to bylo.
Operace na pozadí
Další rychlý trik, který můžete použít, je operace na pozadí. Akce, které jsou zabalené do operací na pozadí, mají dva výhody - jsou pro uživatele neviditelné a staly se před tím, než je uživatel skutečně požádá. Udělujte uživatelům další věci, na něž je třeba se soustředit, protože probíhá proces na pozadí. Dobrým příkladem je nahrávání obrázků na Instagram. Jakmile uživatel zvolí obrázek, který má sdílet, začne nahrávat. Aplikace přivádí uživatele k přidání názvu a značek při nahrávání obrázku na pozadí. Až uživatelé budou připraveni stisknout tlačítko "Sdílet", nahrávání bude dokončeno a okamžitě bude možné sdílet jejich obrázek.
Progresivní načítání obrázku
Vzhledem k tomu, že moderní aplikace a weby načítají stále více a více obrázků, je dobré přemýšlet o jejich procesu načítání, protože ovlivňuje výkon a zkušenosti uživatelů. Pomocí efektu rozmazání můžete vytvořit efekt progresivního načítání obrazu.
Jedním z dobrých příkladů je Medium, který rozostří po obraze obálky, stejně jako obrazy v obsahu příspěvku, dokud není obraz plně načten. Nejprve načte malý rozmazaný snímek (náhled) a poté přechod na velký obrázek. Miniatury jsou velmi malé (jen několik kilobajtů), což v kombinaci s rozmazaným efektem umožňuje lepší umístění než pevné barvy, aniž by se obětovalo užitečné zatížení.
Střední používá rozmazání pro vytvoření progresivního efektu nakládání obrazu
Vizuální rozptýlení
Vždy byste se měli pokoušet, abyste počkali příjemnější, pokud nemůžete zkrátit linku. Chcete-li zajistit, aby se lidé nudili při čekání na to, aby se něco stalo, nabídněte jim nějaké rozptýlení. Jemné animace mohou odvrátit návštěvníky a nechat je ignorovat.
Animovaná úvodní obrazovka. Obrázek kreditu: Ramotion (Dribbble)
Obrázek kreditu: Vimeo