Obsah
- 01. Použijte líné načítání
- 02. Nestahujte písma
- 03. Optimalizujte vektorové umění
- 04. Optimalizace obrázků
- 05. Zajistěte, aby to bylo rychlé
- 06. Používejte platby jedním klepnutím a přihlaste se
- 07. Ať to funguje všude
S progresivními webovými aplikacemi a jednostránkovými aplikacemi (PWA a SPA) mají vývojáři technické nástroje k poskytování rychlých a poutavých webových zážitků, které konkurují jejich nativním protějškům. Ale existuje chybějící kousek skládačky, katalyzátor, který může pohánět vysoce výkonnou webovou aplikaci k vysoce výkonnému a nejlepšímu uživatelskému prostředí ve své třídě. Tuto ingredienci lze nalézt na základě zvážení výkonu jako základního principu procesu UX a vizuálního designu. Toto je Performant Design.
Zpoždění mezi 300 a 1 000 milisekund způsobí, že se uživatel bude cítit, jako by stroj fungoval, ale začne mentálně přepínat kontext nad 1 000 milisekund. Cokoli, co poskytuje obsah rychleji, bude mít za následek pozitivnější zapojení (aby váš web fungoval hladce, získejte brilantní webhostingovou službu). Tyto tipy vám ukáží, jak vytvořit aplikaci podle principů výkonného designu; sledujte je, aby vaše webové aplikace začaly létat.
Chcete něco trochu jiného? Vyzkoušejte tvůrce webových stránek nebo špičkové cloudové úložiště.
- Jak vytvořit progresivní webovou aplikaci
01. Použijte líné načítání
Doby načítání lze výrazně snížit pomocí prvků Lazy Loading mimo obrazovku. Tím se dekonstruuje počáteční užitečné zatížení k vykreslení obsahu, který je zobrazen jako první. Obrázky a další těžké prvky se načítají později v pořadí nebo při posouvání uživatelem.
Lighthouse je nástroj Google plný užitečných poznatků, které pomáhají návrhářům a vývojářům optimalizovat výkon v jemných detailech v celém spektru načítání.
02. Nestahujte písma
Stahování vlastních písem stojí u připojení 3G přibližně 200–500 ms. Pokud necháte zařízení zpracovávat vykreslování písem pomocí systémových písem, zajistí se okamžité načtení textu, a použití proměnných písem nabízí typografické variace, aniž byste museli uživatele stahovat písma s více váhami. Podívejte se na různá písma v akci na v-fonts.com.
03. Optimalizujte vektorové umění
Export vektorových ikon a ilustrací do souboru často přidává spoustu zbytečného nafouknutí. To lze značně vyčistit, snížit užitečné zatížení obrazu webu a poskytnout uživateli rychlejší přístup k hlavní navigaci a značení pomocí ikon. SVGOMG, který pochází z vývojového týmu Google, je užitečným nástrojem, který pomáhá optimalizovat SVG.
04. Optimalizace obrázků
Úkolem optimalizace obrázků je úloha, která drží prostor v procesu návrhu i vývoje. Umění optimalizace obrazu vychází z lidského oka, které posuzuje dopad kompresního nástroje na kvalitu obrazu.Několik algoritmů a technik vykreslování může významně zmenšit velikost obrazu způsoby, které jsou pouhým okem neviditelné.
Tým Google Chrome představil Squoosh, aby pomohl v obou těchto procesech. Tento výkonný webový nástroj pro kompresi obrázků staví do popředí vizuální srovnání s vysokým rozlišením a poskytuje uživatelům přístup ke všem komplexním možnostem komprese v zákulisí.
05. Zajistěte, aby to bylo rychlé
Zpoždění kratší než 100 milisekund jsou stále okamžitá, ale vše nad tím je znatelné. Pokud jde o optimalizaci rychlosti, to, co uživatel vnímá, je opravdu důležité, díky čemuž je návrh pro tyto mezistátní státy nedílnou součástí poskytování hyper výkonu.
Zástupné symboly obsahu nebo kostry se používají ke konstrukci předinstalované verze stránky při načítání obsahu. Nejen, že zabraňují zubatým a rušivým „přetokům“ - kde jsou vykreslené prvky vytlačeny ze zobrazení následným načítáním položek na jejich místo - ale také mohou přimět uživatele k přesvědčení, že se stránka načítá rychleji, než ve skutečnosti je.
Při implementaci skeletových obrazovek by měl být obsah vykreslen, jakmile je připraven, spíše než blokování, dokud není vše připraveno k zobrazení.
Který funguje nejlépe? Který se cítí rychleji? Aplikace, kde uživatel nemá žádné informace o tom, kdy přichází obsah? Nebo takový, který používá střídané načítání animací, kostry obrazovek, matné obrázky a metadata pro obsah? Načtení těchto dvou příkladů může trvat stejně dlouho, ale vnímání délky uživatelem je zcela odlišné.
Použití číselníku neukazuje žádný údaj o tom, kdy bude načítání stránky dokončeno. Krátké animace na druhé straně mohou maskovat přechod načítání a naznačovat, že systém spíše „postupuje“ než „zpracovává“.
Všichni chceme vidět reakci na naše činy a na webu se to nijak neliší. Hladké posouvání, hedvábné animace a zpětná vazba klepnutím - to vše pomáhá zvýšit vnímání uživatele, že zkušenost okamžitě reaguje na jeho dotek. Vezmeme-li v úvahu, že klepnutí, najetí myší, načítání a pasivní stavy pomáhají simulovat výkonné prostředí, materiálový design společnosti Google poskytuje návod, jak efektivně vytvořit všechny tyto stavy.
Dnešní uživatel je netrpělivý a čím víc ho přimějte myslet, tím je pravděpodobnější, že odejdou za prací jinam. Srozumitelnost a jednoduchost jsou proto klíčovými součástmi jakékoli vysoce výkonné webové zkušenosti.
Zdůrazněná tlačítka výzvy k akci (CTA) umožňují uživatelům rychle se v úkolu posunout s jistotou. Věnování pečlivé pozornosti velikosti, barvě, umístění a mikroskopii CTA napomáhá ke zřetelnějšímu pochopení klíčových akcí a zkracuje čas na přemýšlení. Vzory, které se poprvé objevily v nativních aplikacích, jako je plovoucí tlačítko akce a pevná lišta záhlaví, přimějí uživatele rychle se pohybovat a dobře se přeložit do jakékoli výkonné webové aplikace.
Obecné pravidlo navigace je „mimo dohled, mimo mysl“. Vzory, jako je spodní navigační lišta a záložky, kladou primární akce uživatele dopředu a do středu, zatímco tradiční nabídka hamburgerů má nižší míru zapojení. Facebook zjistil, že přechodem z hamburgerového menu na záložkový přístup zlepšilo zapojení, spokojenost, výnosy a vnímání rychlosti.
Mít strategii typu obsahu, který chcete propagovat, je důležité a pouhé zacházení se všemi navigačními položkami jako s rovnými bude mít za následek snížení zapojení v oblastech, které chcete zlepšit. Spotify zjistil, že snížením počtu možností na panelu karet na pět se zvýšil dosah naprogramovaného obsahu Spotify - skvělý příklad toho, jak propagace určitých položek navigace nad ostatními může zaměřit uživatelský zážitek.
06. Používejte platby jedním klepnutím a přihlaste se
Digitální peněženky, jako je GooglePay a připravované rozhraní API pro automatické přihlášení, využívají data uložená v zařízení ke zjednodušení toků náročných na tření. GooglePay umožňuje nakupujícím dokončit více platebních kroků jediným klepnutím, zatímco přihlášení jedním klepnutím dostane uživatele do jejich účtu stejným způsobem.
Výsledky od prvních uživatelů ukazují, že odstranění přerušení přihlašovacích obrazovek a pokladen, spolu s mentálním třením při zapamatování a zadávání informací, urychluje dokončení úkolu a zlepšuje zapojení.
07. Ať to funguje všude
Dnešní uživatel tráví online přibližně šest hodin denně s průměrem 6,5 připojených zařízení na osobu. Nejen, že je zásadně důležité navrhovat pro řadu různých zařízení, ale také navrhovat pro oblasti s nízkou a žádnou konektivitou.
Uživatelé k dokončení úkolu často využívají více relací a poskytování výkonných zkušeností na každém zařízení zajišťuje, že celý proces je plynulý a uspokojivý.
Desktop podporuje PWA a navrhování výkonných responzivních PWA bez nafouklého kódu běžně spojeného s responzivními webovými stránkami, což znamená nejprve navrhnout mobilní zařízení. Tím se do popředí dostanou základní věci a další položky se přidají, pouze když to agent uživatele zvládne.
Servisní pracovníci umožňují PWA vstát, když dojde k výpadku síťového připojení. Tím se otevírají dveře k vytváření offline uživatelských zkušeností pomocí jasného zasílání zpráv o stavu sítě a deaktivací prvků, které by jinak tento zážitek vykolejily.
Tento článek byl původně publikován v čísle 286 časopisu Creative Web Design Webový designér. Koupit číslo 286 zde nebo zde se přihlaste k odběru Web Designer.
