Zlepšenie použiteľnosti vstupných stránok s animáciou. Zlepšenie použiteľnosti: Súvisiace služby. Používajte správne vstupné formuláre

Ahojte všetci!

Asi každý, kto sa na internete cíti sebavedomo, už počul niečo ako použiteľnosť webových stránok. Nie nadarmo je taký rozšírený, veď je základom pre budovanie interakcie návštevníka so stránkou. Chcem teda odhaliť celú pointu tohto konceptu a pomôže vám a sebe urobiť váš webový zdroj užívateľsky prívetivejším.

Čo je použiteľnosť webovej stránky?

Použiteľnosť stránky je koncept, ktorý demonštruje pohodlie webového zdroja pre interakciu. To znamená, že o to jednoduchšie je pre návštevníkov navigácia na stránke, konzumácia obsahu, interakcia s ním rôzne prvky, tým vyššia je úroveň použiteľnosti.

Hlavným cieľom je udržať si publikum na stránke a povzbudiť ho k cieleným činnostiam, napríklad prihlásením sa na odber noviniek alebo nákupom. Navyše zvýšením použiteľnosti svojej stránky sa zlepšujete, čo priaznivo ovplyvňuje propagáciu vo vyhľadávačoch. Na podporu mojich slov si prečítajte materiál na stránkach podpory Yandex, tu je odkaz.

Ak zabudnete na všetky tieto problémy s použiteľnosťou, neuvedomíte si plný potenciál svojej stránky. Pamätajte si: keď prejdete na nepriateľskú stránku, pravdepodobne sa odtiaľ budete chcieť okamžite dostať, však? To isté sa deje s návštevníkmi vášho webu. Uver mi.

Ľudia, ktorí strávili veľa času štúdiom použiteľnosti, vypracovali určitý počet pravidiel, ktoré je dôležité zvážiť pri vytváraní webovej stránky:

1. Pravidlo 2 sekúnd. V priemere je používateľ pripravený stráviť len 2-3 sekundy čakaním na načítanie stránky, preto vzniklo toto pravidlo. Zvýšením rýchlosti načítania vašej webovej stránky získate oveľa lepšiu odozvu od vašich návštevníkov;
2. Pravidlo 3 kliknutí. Opäť priemerná hodnota. Faktom je, že väčšina používateľov sa nechce obťažovať dosiahnutím akéhokoľvek výsledku a je pripravená urobiť iba 3 kliknutia. To znamená, že sa musíte uistiť, že používateľ môže uskutočniť napríklad nákup na stránke 3 kliknutiami;
3. Princíp štruktúry. Je veľmi dôležité, aby bola stránka jasne štruktúrovaná – nemalo by dochádzať k miešaniu. Jeden informačný blok by mal prúdiť z druhého atď. Vďaka prehľadnej štruktúre sa používateľ môže ľahko pohybovať na stránke a nájsť to, čo potrebuje;
4. Pravidlo formátu. Medzi štýlom prvkov lokality by nemali byť žiadne rozdiely, to znamená, že celý webový zdroj by mal byť vytvorený v jedinom kľúči;
5. Obrátená pyramída. To znamená prezentáciu materiálu tak, aby používateľ dostal odpoveď na svoju otázku už v prvých sekundách.

Toto samozrejme nie sú všetky pravidlá použiteľnosti stránok, ale podľa mňa tie najzákladnejšie. Treba ich brať do úvahy pri práci na zlepšovaní stránky a ešte lepšie pri tvorbe.

Je dobré riadiť sa pravidlami, no oveľa lepšie je mať pred očami jasné odporúčania, ktoré roky zbierajú vedci, marketéri, analytici.

Ako zlepšiť vašu stránku?

Existuje mnoho spôsobov, ako zlepšiť používateľskú skúsenosť s vašou stránkou. Vhodné pre rôzne typy stránok. Použitím všetkých uvedených odporúčaní / metód získate veľkú vďačnosť od používateľov vašej stránky.

Navigácia na stránke

Takže prvá vec, ktorú musíte venovať pozornosť, je navigácia na stránke. Aby návštevník rýchlo našiel to, čo potrebuje, a mohol sa voľne pohybovať po stránke, je potrebné, aby bola ponuka zdrojov štruktúrovaná, citlivá a zrozumiteľná.

Nezabudnite umiestniť všetky dôležité prvky do navigačnej ponuky:

• Kontakty;
• O spoločnosti;
• Služby;
• Doprava a platba.

Predpokladom je prítomnosť mapy webu pre ľudí, kde sú umiestnené odkazy na všetky stránky webového zdroja. Pomocou neho môže používateľ ľahko nájsť to, čo potreboval. Poslúži ako príklad.

Drobčeky môžu pomôcť zlepšiť použiteľnosť webovej lokality. Chleba Je reťazec odkazov, ktoré používateľovi ukazujú, v ktorej kategórii a na ktorej stránke sa nachádza. S ich pomocou sa bude môcť posunúť na akúkoľvek úroveň.

Pre internetové obchody tento blok odkazy sú veľmi užitočné, pretože pomáhajú používateľom nájsť podobné produkty, rýchlo prejdite na nadpis / kategóriu záujmu z karty produktu, prejdite na stránku.

Logo webového zdroja možno pravdepodobne pripísať aj navigácii. Všetci sme si už zvykli, že logo akejkoľvek stránky je klikateľné a je odkazom na hlavnú stránku. V skutočnosti len z tohto dôvodu stojí za to urobiť logo odkazom na hlavné.

Rýchlosť načítania webu

V modernom svetečlovek nie je pripravený strácať svoj drahocenný čas čakaním na načítanie stránky, aby našiel odpoveď na svoju otázku. Ak sa stránka načítava dlho, používateľ prejde na inú stránku, pretože s vysokou mierou pravdepodobnosti tam stále nájde to, čo hľadal. V súťaži o návštevníka je teda rýchlosť načítania webu kritický aspekt použiteľnosť.

Podľa mojich skúseností majú obrázky veľký vplyv na rýchlosť načítania. Ak to chcete skontrolovať, musíte použiť špeciálny nástroj z google PageSpeed ​​Insights... Väčšina podrobne Hovoril som o optimalizácii načítania v. Určite si ju prečítajte!

Spätná väzba

Ak je vaša stránka komerčná, musíte sa uistiť, že vás používateľ môže rýchlo kontaktovať:

Vyhľadávanie na stránke

Prítomnosť vyhľadávania na stránke tiež prispieva k zlepšeniu použiteľnosti stránky - veľa pre človeka ľahšie vstúpiť do vyhľadávací reťazecčo hľadá a nájde odpoveď (alebo nenájde), ako sa pol hodiny plaziť po stránke. Preto sa odporúča vykonať vyhľadávanie na vašej stránke.

To je možné vykonať pomocou špeciálnych doplnkov od spoločnosti Yandex alebo Google, môžete tiež použiť pluginy pre CMS.

Registrácia prihlášky. registrácia

Vyššie som spomínal pravidlo 3 klikov, čo znamená dosiahnutie akéhokoľvek výsledku na stránke na 3 kliknutia. Z toho vyplýva, že akýkoľvek formulár na webovom zdroji by mal byť čo najjednoduchší. Napríklad registrácia so zdrojom pomocou sociálnych sietí:

A zjednodušiť proces objednávania v internetovom obchode na 2 - 4 polia, pretože ľudia sú príliš leniví na to, aby vypĺňali objemné formuláre a odosielali extra informácia(ako sa im zdá) cudzím ľuďom.

Obsah

Jediná vec, pre ktorú používatelia prichádzajú na akúkoľvek stránku, je obsah. Preto musí byť prezentovaný štruktúrovaným a zrozumiteľným spôsobom. Nikto nemá rád pevnú obuv, ľudia majú radi poriadok. Aby bol text ľahko čitateľný, musíte použiť:

• Podnadpisy. Pozri si môj článok. Snažím sa všade používať podnadpisy, aby ste sa vy, milý čitateľ, cítili príjemne;
• zoznamy;
• Stoly;
• Pohodlné písmo. Len nedávno som dostal do komentárov jeden komentár k príspevku o nečitateľnom písme a hneď som ho opravil. Dúfam, že sa teraz cítite pohodlne;
• Vysvetľujúce obrázky.

Toto všetko spolu pomôže občas vylepšiť obsah na stránke. Okrem toho vyhľadávacie roboty tiež milujú jasnú štruktúru textu, takže sa snažte!

No, týmto končím, milí priatelia! Budúci týždeň vám ukážem, ako urobiť analýzu použiteľnosti webu.

Do skorého videnia!

Predchádzajúci článok
Ďalší článok

• Preklad
• Návod

Privítajú ich šaty, sprevádza ich myseľ. Toto staré príslovie hovorí okrem iného aj o dôležitosti prvého dojmu. To platí nielen pre ľudí, ale aj pre softvérové ​​produkty- webové stránky a mobilné aplikácie. Jedným z najdôležitejších bodov pri formovaní atraktivity sieťového projektu je jeho jednoduchosť použitia – použiteľnosť. A keď človek prvýkrát spozná stránku alebo aplikáciu, prvé dojmy často rozhodujú o tom, či sa k tomuto produktu bude vracať znova a znova. Inými slovami, použiteľnosť je jednou z kľúčových vlastností webovej stránky, ktorá formuje (alebo ničí) publikum. Poďme sa pozrieť na niektoré bežné a často prehliadané scenáre správania používateľov, ako aj spôsoby, ako zlepšiť použiteľnosť v najdôležitejších fázach interakcie s vašou webovou stránkou alebo mobilnou aplikáciou.

Jasná a vedomá interakcia

1. Vyberte veľkosti písma

Stále viac ľudí surfuje na webe pomocou mobilných zariadení a pre niektoré stránky sa mobilná verzia stala hlavným prúdom. A to diktuje svoje vlastné požiadavky na veľkosť písma, pretože obrazovky smartfónov a tabletov sú oveľa menšie ako konvenčné monitory a notebooky. Rozširovanie, šírenie responzívny dizajn zohralo veľkú úlohu pri upozorňovaní na problematiku písma.

Často sa tvorcovia webových stránok zameriavajú na použiteľnosť tlačidiel, ikon, kariet a iných objektov, na ktoré je potrebné kliknúť. A málokto si pamätá na pohodlie klikania na textové hypertextové odkazy. Preto vždy vykonajte „živé“ testy pohodlia stláčania prstov na hypertextové odkazy.

2. Napíšte informatívne chybové správy

Mnoho ľudí zanedbáva výber znenia chybových hlásení, pretože ich považujú za druhoradé. Vývojári zvyčajne vedia, ako sa im vyhnúť nesprávne činy vo svojich produktoch, a preto sa s takýmito správami stretávajú len zriedka.

Skutoční používatelia sa tým však nemôžu pochváliť.

Ak používateľ po zobrazení chybového hlásenia dobre nerozumie, čo má robiť, môže váš produkt úplne opustiť. Preto môže byť text správy hravý, no prinajmenšom by mal používateľom pomôcť rýchlo zistiť dôvod a vyhnúť sa narušeniam v budúcnosti.

Snažte sa vyhnúť špecializovaným výrazom, píšte správy verejne, zrozumiteľný jazyk... Nie je potrebné vypisovať informácie, ktoré nemôže použiť pre používateľa. Dokonca aj chyby overenia môžu byť preformulované tak, aby zneli priateľskejšie, ak je to potrebné. Porovnajte dve verzie tej istej obrazovky z jednej populárnej operačný systém:

Pohodlie vstupných formulárov

3. Zjednodušte požiadavky na heslo

Dnes je zvykom vyžadovať, aby používatelia tvorili zložité heslá... Ale treba to robiť pozitívnym spôsobom, s povzbudzujúcou pomocou, nie ako zdrvujúco drsný stav. Mnohé vstupné formuláre vyzerajú veľmi pekne, no zároveň sú úplne nepohodlné. Aj keď použiteľnosť tohto prvku rozhrania môže mať rozhodujúci vplyv na úspech celého produktu. Neúspešné rozhodnutia môžu odradiť používateľov už vo fáze zadávania prihlasovacieho hesla alebo pri objednávaní. Preto je potrebné venovať veľkú pozornosť využiteľnosti formulárov.

Napríklad historicky vybrané boxy sa ťažko upravujú. Vo väčšine prípadov sa vývojári pokúšajú skryť štandardné objekty a naklonovať ich ako vhodnejšie prvky DOM. V tomto prípade sa údaje z „klonov“ prenesú na vstup pôvodných prvkov.

Len schopnosť ovládať vzhľad bežnej rozbaľovacej ponuky zaberie veľa času. Ale stojí to za sviečku? Na to nesmieme zabúdať mobilných používateľov veľmi rýchlo si zvyknú na vzhľad a správanie štandardných prvkov rozhrania používaných v ich operačných systémoch.

Napríklad používatelia Windows Mobile očakávajte, že po výbere rozbaľovacej ponuky sa zoznam možností otvorí na celú obrazovku, oddelene od samotného poľa. Zatiaľ čo Používatelia systému Android očakávať, že uvidím modálne okno... A ak kvôli svojim dizajnovým nápadom nesplníte takéto očakávania, používatelia nemusia vaše riešenia vôbec oceniť. Pravdepodobne sa im bude ťažšie pracovať s vaším produktom, čo negatívne ovplyvní ich skúsenosti. Inými slovami, zmenou dizajnu štandardných prvkov vytvoríte viac problémov než sa rozhodnete.

4. Používajte správne vstupné formuláre

Mnoho ľudí odporúča používať formátovanie údajov vo vstupných poliach. Ak napríklad pridáte vstup, vstup, rozloženie sa pri písaní automaticky prepne. Vyzerá to však zvláštne a vôbec to nepomáha, ale prekáža pri vypĺňaní formulára.

Ak máte viacero vstupných polí, je lepšie im priradiť jeden dátový typ. Pre používateľa je to oveľa jednoduchšie, keď sa pri zadávaní používa rovnaké rozloženie a preskakovanie z písmen na čísla a späť prináša len ďalší zmätok.

V HTML 5 má zmysel používať rôzne typy vstupu iba vtedy, keď je na obrazovke čo najmenej polí. Dobrý príklad- dvojfaktorový overenie Google: existuje len jedno pole, do ktorého je možné zadávať iba čísla. Tu to bude veľmi vhodné automatické prepínanie do digitálneho rozloženia.

No v zložitejších formách môže byť takáto „vstřícnost“ a „iniciatíva“ klávesnice otravná, pretože núti používateľa mentálne prepínať, zvyšuje kognitívnu záťaž. Najmä pri prechode z písmen na čísla a naopak:

5. Usmernenie živého a nezabudnuteľného zážitku z prvého použitia

Ak je začiatočník od prvých sekúnd sklamaný vašou stránkou alebo aplikáciou, potom je to podobné hrubosti majiteľa pri stretnutí s hosťami. Bez ohľadu na to, aké chutné sú pochúťky, stretnutie bude beznádejne zničené.

Vývojár môže ľahko stratiť zo zreteľa niektoré scenáre počiatočného použitia svojho produktu. Napríklad obrazovku plnú ikon alebo sekcií je ťažké nazvať intuitívnou. Prvé skúsenosti s používaním môžete zmierniť napríklad pomocou užitočných rád a varovných správ, ktoré môžete jednoducho vypnúť.

6. Diabol je v detailoch

Všetky druhy maličkostí môžu hrať veľkú úlohu pri uľahčení ovládania vášho produktu. Napríklad známy štandardný kurzor v úplne prvom vstupnom poli vám umožní rýchlo a bezbolestne sa ponoriť do rozhrania. V ideálnom prípade by sa mal používateľ po stránke alebo aplikácii pohybovať na „autopilotovi“.

Nedostatok skúseností nových používateľov s vaším produktom sa prejavuje tým, že niektoré funkcie môžu spôsobiť vážne problémy. Pamätajte na kancelársku sponku z Microsoft Office ktorá zrazu vystúpila a ponúkla jej pomoc, čo bolo nepríjemnejšie.

Riadenie úspešného prvého použitia je ako chôdza po lane – je veľmi ťažké to urobiť správne, ale ak to dokážete, je to viac než odmenené uznaním používateľa. Napríklad projekt Stumbleupon je veľmi úspešný pri učení nováčikov o svojich základných schopnostiach.

Môže byť dobrý nápad integrovať proces učenia sa do bežného používania produktu. Predpokladajme, že pri archivácii listov v poštová aplikácia môžete zobraziť hlásenie "Viete, že môžete začať archivovať pomocou Ctrl + K?" Tento prístup umožňuje používateľom učiť sa oveľa hladšie ako tradičné lekcie v štýle „preskúmať celú aplikáciu“.

7. Mikrokopírovanie by sa nemalo používať so spätnou platnosťou

„Mikrokopírovanie“ označuje všetky malé pokyny a potvrdenia používané v aplikáciách.

• "Neboj sa, nedovolíme, aby unikla tvoja poštová adresa."
• "Na platbu nepotrebujete bankovú kartu"

Microcopy je ideálnym nástrojom na budovanie dôvery a zlepšovanie používateľskej skúsenosti. Môžu byť tiež použité na veľmi efektívne školenie používateľov, ktorí si nie sú príliš istí vaším produktom.

Napríklad viazanie banková karta alebo poskytovanie e-mailu pre mnohých používateľov je dosť kontroverzné. A ak nereprezentujete určitú rokmi overenú, rešpektovanú značku, ľudia sa vám ju budú vždy báť poskytnúť podobné informácie... Mikrokópie môžu pomôcť vysporiadať sa s pochybnosťami používateľov

8. Vždy uveďte kontext

Používatelia nenávidia nedostatok kontextu. Dané s čím tok informácií neustále sa musia vyrovnávať, ľudia sa snažia abstrahovať od všetkého nadbytočného na obrazovke a sústrediť sa na konkrétne veci. Keď to prišlo do módy nekonečné rolovanie, veľa stránok čelilo jednému problému: ak používateľ niekde omylom klikol a aktuálna pozícia sa vynulovala. To je obzvlášť nepríjemné v tých prípadoch, keď človek posúva obsah stránky veľmi dole. Už po piatich rolovaných obrazovkách môže byť náhodné kliknutie nepríjemné.

Väčšina stránok dnes rieši tento problém pomocou modálov a iných schém typických pre jednostránkové aplikácie. Napríklad na Pintereste sa kliknutím na dlaždicu neotvorí nová stránka, ale modal. To vám umožní preskúmať podrobnosti konkrétneho záznamu bez straty aktuálnej pozície alebo čakania na načítanie novej stránky.

V mobile Facebook aplikácia používa sa rovnaký prístup: ak kliknete na fotografiu v albume, načíta sa v režime celej obrazovky. To vyzerá takmer je to, ako keby sa otvorila nová stránka, ale po stlačení tlačidla späť sa úhľadne vrátite späť do kontextu.

Používatelia, najmä používatelia mobilných zariadení, nemajú radi, keď sa obsah obrazovky nečakane zmení. Toto by sa malo robiť iba v reakcii na explicitné akcie používateľa. Napríklad, spravodajské kanály Twitter a Facebook sú nútené aktualizovať. V opačnom prípade by to bola nepríjemná situácia, keď si prečítate správu a v tomto čase proces na pozadí obnoví informačný kanál a vysype vám veľa nových správ, ktoré pochovajú to, čo ste čítali predtým. Je to ako poryv vetra, ktorý vám vytrhne noviny z rúk.

Našťastie Twitter jemne informuje používateľa o nových správach a čaká, kým používateľ dá príkaz na stiahnutie. To znamená, že osoba úplne kontroluje zmenu obsahu obrazovky a nie je zmätená.

15. Rozdeľte veľké komplexné úlohy na menšie operácie

Nikto nemá rád vypĺňanie celostránkového formulára. Preto budú všetky druhy sekcií nastavení, registračné formuláre a profily len prínosom logické oddelenie do menších blokov. Na to použite karty, sekcie, karty, bočné panely. Potrebu viacerých výplní bude človek ľahšie vnímať aj vtedy, ak je na jednej stránke viacero logických blokov.

Rozdelenie do logických blokov subjektívne zjednodušuje nastavovanie a vypĺňanie mnohých polí a zabraňuje pocitu nepríjemnej práce. To je dôležité najmä pre mobilné aplikácie a verzie stránok.

Napríklad Facebook už niekoľko rokov zdokonaľuje svoje zoskupovanie nastavení ochrany osobných údajov, aby bolo jednoduchšie konfigurovať. Ale raz to bola taká netriviálna úloha, že mnohí sa týchto nastavení jednoducho nedotkli. Po ich rozdelení do sekcií sa zvýšil podiel používateľov, ktorí s týmito stránkami radšej pracujú, ako sa im vyhýbajú.

Ďalším dobrým príkladom rozdelenia veľkej úlohy na logické bloky je proces platby. Pre mnohé webové aplikácie sa tento postup stáva kritickým bodom, indikátorom úspešnosti projektu. Keď je pokladňa rozdelená na etapy, tak pri ich prechode majú používatelia pocit pokroku, pokroku, aj keď nie všetko ide ako po masle.

Taktiež rozdelenie do logických blokov uľahčuje odhaľovanie a riešenie vzniknutých problémov. Nikto predsa nechce riešiť hlášku typu „Mohli by ste opraviť nasledujúce štyri body?“.

Ak prinútite používateľa vyplniť všetky polia alebo nakonfigurovať nastavenia na jednej komplexnej stránke, skončíte tak, že ich vajcia vložíte do jedného košíka. Akákoľvek chyba zabráni odoslaniu všetkých ostatných údajov.

To isté možno povedať o formách darovania, najmä v mobilné projekty... Pravdepodobne chcete, aby si používateľ pomyslel: „Páni, aké to je jednoduché“ namiesto „Áno, to chce čas.“ Zlepšenie použiteľnosti formulárov sa priamo odráža v rentabilite projektu.

Väčšina z vyššie uvedených bodov je dostatočne jednoduchá, keď sa zvažuje izolovane. Ale ak s ním pracujete každý deň, potom sa oko často rozmazáva. Preto je dôležité vedieť urobiť krok späť, abstrahovať a pozrieť sa na svoje duchovné dieťa očami „nového používateľa“.

Značky:

• použiteľnosť rozhraní
• použiteľnosť stránok

Pridať značky

Ako môžeme zlepšiť použiteľnosť stránky a urobiť ju čo najpohodlnejšou a najpríjemnejšou pre všetkých jej návštevníkov a čitateľov? Takúto otázku si položí asi každý webmaster a bloger pri pohľade na svoj SOM. Priznám sa, tiež som si nad tým nie raz lámal hlavu. Tak som sa rozhodol ešte raz o tom popremýšľať a napísať ak nie všetky, tak najviac dôležité rady a poukazuje na zlepšenie kvality stránok pre ľudí. Tu sa dotknem spôsobov, ako zlepšiť kvalitu obsahu, rýchlosť webu, navigáciu, dizajn webu a mnoho ďalších vecí.

Bohužiaľ, zlepšenie použiteľnosti webovej stránky môže trvať veľa času. Existuje veľa technické problémy ktoré si treba premyslieť a. Tento obchod však stojí za to. Ak si teda chcete udržať svojich návštevníkov čo najdlhšie a znížiť mieru odchodov, myslite na zvýšenie pohodlia pre vašich návštevníkov už od začiatku tvorby projektu.

Toto nie je nikdy zbytočné, pretože vám to umožňuje vopred určiť, ako budú návštevníci interagovať s vašou stránkou a ako dlho na nej zostanú. V tomto článku vám ich chcem poskytnúť niekoľko užitočné rady ktorý v do značnej miery vám pomôžu zvýšiť čas a používateľskú skúsenosť na vašom webe. Odporúčam aj prečítať. Budú vám veľmi užitočné!

Kvalita obsahu

Kamkoľvek sa pozriete, obsah bude vždy hlavný kľúčová vlastnosť... Nezáleží na tom, či ide o SEO, použiteľnosť alebo iné reklamné kampane... Kvalita publikovaných materiálov vždy bola, je a bude hlavným nástrojom vašej stránky. Skúste preto zverejniť materiál, ktorý by žiadne nespôsobil negatívne emócie u návštevníka. Ak chcete zlepšiť kvalitu svojho obsahu, je potrebné dodržať niekoľko základných vecí:

• zaujímavý, užitočný a jedinečný materiál- to je jeden z dôležitých bodov na zvýšenie kvality vašich materiálov. Ak zverejňujete obsah, ktorý je pre niekoho zbytočný a neužitočný, tak naň môžete rovno zabudnúť ďalší vývoj váš zdroj. Nikto do nej nevstúpi, pretože v nej nebude nič užitočné. Preto sa snažte dať užitočné a zaujímavé tipy pre vašich čitateľov!
• bez vody a dlhých handričiek- dlhé textové plátna sú teraz mimo módy! Píšte len k téme a nie príliš veľa. Pre používateľa bude ťažké zvládnuť to obrovské množstvo textu na prvýkrát. To však neznamená, že by ste nemali myslieť na odhalenie témy. Ak vidíte, že téma je na jeden príspevok dosť rozsiahla, tak si ju rozdeľte na viacero príspevkov. Prospeje to nielen pohodliu čitateľa, ale aj propagácii stránky. Tiež sa nesnažte písať príliš malé príspevky. To je veľmi zlé pre jedinečnosť. Ak je to možné, pridajte svoje zdôvodnenie, postrehy alebo niečo iné užitočné. Optimálny text je 500 - 1000 slov. Maximálny strop je 1500-2000 slov. Zamerajte sa teda na tieto čísla!
• krásny dizajn stĺpikov- aj to je veľa dôležitý bod na zlepšenie kvality ich materiálov. Text vždy riedite obrázkami. Veľmi dobre zlepšujú porozumenie učive a dávajú oddych pri čítaní. Tiež v teste, ak je to možné, použite podnadpisy. Veľmi dobre pomáhajú orientovať sa vo veľkom množstve informácií. Možnosť realizácie zatiaľ nemožno vylúčiť. odrážkové zoznamy, tabuľky a rôzne audio a video materiály. To môže výrazne zlepšiť kvalitu obsahu.

• zvýrazniť text- pomôže to zamerať pozornosť používateľa na niektoré veľmi dôležité body. Viac dôležité slová zvýrazniť tučným písmom. Umiestnite potrebné návrhy do krásnych blokov. Napríklad vytvoriť textový blok « Pozornosť"alebo" Citovať". V žiadnom prípade to však nepreháňajte. Zvýraznite len to podstatné.
• prepojenie- veľmi dôležitý bod nielen pri propagácii webovej stránky, ale aj v jej použiteľnosti. Tým, že svojim používateľom ponúknete ďalšie články na túto tému, nielenže zvýšite čas, ktorý človek strávi na stránke, ale ponúknete mu ďalšie tipy na podobné témy... Tiež sa uistite, že všetky odkazy sú dobre viditeľné a nelepia sa na pozadie. Nezabudnite si overiť dostupnosť nefunkčné odkazy... Je totiž nepríjemné, keď sa používateľovi pri prechode vyskytne chyba. Ďalšou dobrou možnosťou by bolo zobrazovať podobné príspevky vo forme miniatúr. Bude to veľmi atraktívne!
• písať bez chýb- zlepší kvalitu obsahu. Málokto rád číta text s veľké množstvo hrubé chyby. Vždy si preto skontrolujte chyby nielen v nových, ale aj starých záznamoch. Napríklad text na chyby možno skontrolovať v rovnakom. Sám si teraz pomaly opravujem svoje staré poznámky.

Rýchlosť načítania webu

Rýchle načítanie stránok vášho webu tiež ovplyvňuje použiteľnosť tohto projektu. Nikoho nebaví dlho čakať na naloženie potrebného materiálu. Ak sa vaša stránka načítava veľmi pomaly, tak návštevníci na takejto stránke určite dlho nezostanú a odídu hľadať informácie inam. Snažte sa preto vždy sledovať rýchlosť svojej stránky.

Rýchlosť stránok môžete skontrolovať v rôzne služby... Napríklad veľmi rád používam službu Pingdom. Snažte sa, aby sa váš projekt nenačítal dlhšie ako 3 sekundy. Existuje mnoho spôsobov, ako znížiť rýchlosť načítania webovej stránky:

• inštalácia a konfigurácia doplnku pre ukladanie do vyrovnávacej pamäte- to vám výrazne pomôže zrýchliť prácu na stránke a tiež znížiť zaťaženie vášho servera. Skúste použiť všetky druhy ukladania do vyrovnávacej pamäte.
• optimalizácia obrazu- Zmenšite veľkosť fotografií bez straty kvality a orežte nepotrebné oblasti obrázka. Tým sa zníži veľkosť stránky, a tým aj čas načítania stránky.
• aktivujte iba funkcie, ktoré potrebujete- prestaňte používať nepotrebné pluginy, moduly a skripty. Ak je to možné, zakážte nanajvýš nepotrebné funkcie a nenaháňajte pre web príliš nahromadené šablóny. Takéto témy majú spravidla veľa zbytočného kódu, čo ovplyvňuje rýchlosť načítania stránok.
• optimalizácia databázy- nezabudnite veľa čistiť prebytočný odpad vo svojej základni. Ak máte viacero lokalít, postarajte sa o vytvorenie pokročilej databázy. Môžete tak výrazne znížiť zaťaženie vášho servera. Ak je vaša stránka spustená, odporúčam vám ju pozrieť.
• prechod na drahší tarif z hostingu- vyberte si nielen dobrý hosting ale aj najviac vhodné sadzby v ňom. Ak po vyššie uvedenej optimalizácii ešte nie ste úplne spokojní s rýchlosťou načítania vašej stránky, skúste si vybrať výkonnejší a drahší plán. Pre jeho schopnosti možno budete potrebovať dedikovaný server.

Vo všeobecnosti by takéto momenty pri optimalizácii stránok nemali chýbať. Osoba by mala ľahko prejsť na stránky vášho webu. Ani to však nestojí príliš veľa. To má pre používateľov nepriaznivé dôsledky.

Pohodlná navigácia:

Ponuka

Užívateľsky prívetivá stránka jednoducho musí mať užívateľsky príjemnú navigáciu. V snahe o pohodlie je však hlavnou vecou nepreháňať to. To platí najmä pre rozbaľovaciu ponuku. Na niektorých stránkach sa to robí tak rôznorodo, že navigácia cez to môže spôsobiť nejaké negatíva. Veľa nadpisov 2-4 úrovní (obrázok nižšie)... Ukážete na určitý nadpis a za ním sa odvíja ďalšie, ďalšie a ďalšie. Stačí náhodne trhnúť myšou a celé menu sa zrúti. Tak sa ukáže akýsi druh akordeónu.

Navigácia s takýmto tlačidlovým akordeónom je pomerne náročná, preto buďte opatrní pri vytváraní vyskakovacieho menu. Nerobte nadpisy väčšie ako druhá úroveň. Medzi veľkým počtom takýchto nadpisov bude pre používateľa náročnejšia navigácia na stránke. Ideálnou možnosťou by bolo vytvoriť nadpisy prvej úrovne. Nie vždy to však funguje. Ak máte veľmi širokú tému, niekedy môže byť potrebné použiť nadpisy druhej úrovne. (podnadpis)... Veľmi dobre zdieľajú tému stránky. Nemusíte teda všetko vyrezávať v jednom nadpise.

Povedzte mi, prečo nemôžete vytvárať nové rubriky? Áno, môžete vytvárať, ale takéto nadpisy zaberú priestor navyše... A podnadpisy môžu špecificky rozdeliť témy a okrem toho môžu byť takéto časti skryté v hlavnom nadpise. To veľmi šetrí priestor. Preto, ak plánujete použiť značný počet nadpisov, môže byť vhodné rozdeliť niektoré nadpisy do podnadpisov. Len nepoužívajte rubriky vyššie ako druhá úroveň, inak dostanete akordeón.

Vo všeobecnosti si tu musíte dôkladne premyslieť navigáciu na stránke. Ak má vaša stránka veľa miesta, samotné kategórie môžu byť tiež zoskupené do rôznych widgetov. To znamená, že podľa predmetu sú všetky nadpisy rozdelené do niekoľkých widgetov. Táto navigácia môžeš si pozrieť môj blog. Teraz sa tam používa. Sú tam aj skryté podnadpisy.

Ďalšou dobrou možnosťou by bolo použitie grafiky v navigácii. Grafiku človek vníma rýchlejšie a lepšie ako jednoduchý text. Preto, ak máte možnosť zobraziť rôzne vysvetľujúce ikony vedľa nadpisov, v žiadnom prípade to neodmietajte. Bude to pre vás len plus!

Taktiež v samotných príspevkoch je potrebné zobraziť odkaz na kategórie, v ktorých sú tieto príspevky publikované. Užívateľ tak bude vedieť, do ktorej rubriky materiál patrí a potom jednoducho prejde na túto rubriku. Ak používate značky, musíte ich zobraziť aj vo svojich príspevkoch. Získate tak ďalšiu navigáciu navyše. Na nadpisy by som odporučil použiť strúhanku.

mapa lokality

Hlavným nástrojom pre jednoduchú navigáciu je mapa stránok pre návštevníkov. Toto je druh obsahu webovej stránky vo formulári samostatná stránka... Obsahuje odkazy na všetky záznamy projektu. Všetko takpovediac na jednom mieste! Je to veľmi výhodné pre návštevníkov. Rýchlo a vizuálne si budú môcť prezerať všetky záznamy na vašej stránke. Dokonca neexistuje ani kniha, ktorá by nezahŕňala obsah pre pohodlné vyhľadávanie... Tak prečo tým zaťažovať svoj projekt. Preto si takúto mapu webu určite vytvorte.

Taktiež nedávajte všetko dokopy do sitemapy. Zoskupte všetok obsah do sekcií konkrétnych tém. Všetky tieto sekcie zvýrazniť inou farbou, aby sa používateľovi uľahčila navigácia medzi veľkým počtom odkazov. Ako som už povedal, nebude zbytočné pripájať ku každej sekcii samostatné grafické ikony. Ak máte veľmi širokú tému, môžete urobiť niekoľko dcérske karty pre každú podtému. Len toho nerob príliš veľa!

Používateľ si tak môže rýchlo vybrať podtému, ktorú potrebuje, a následne si ju prezerať potrebné materiály... To je veľmi dôležité, keď máte na svojej stránke zverejnených niekoľko stoviek príspevkov. Používateľ tak nebude musieť niekoľkokrát listovať stránkami, aby našiel len podtému a sekcie k nej, ktoré sú pre neho vhodné. V budúcnosti si plánujem vytvoriť aj takúto pokročilú mapu webu.

Navigácia na stránke

Tiež sa oplatí postarať sa o navigáciu na stránke. Takáto navigácia je na stránke nevyhnutnosťou. Mal by byť nainštalovaný na domovskej stránke stránky. Nájdu sa aj ľudia, ktorí takúto navigáciu zámerne odmietajú. Myslím, že toto je nesprávne! Aj keď je k dispozícii ponuka a mapa stránok, navigácia po stránke je stále potrebná. Používatelia tak môžu jednoducho prejsť na stránky druhej úrovne a zobraziť tam oznámenia rôznych príspevkov. Takáto navigácia môže byť použitá vo forme čísel alebo vo forme textu.

Ak má vaša stránka veľmi veľký počet komentárov, určite ich urobte navigácia na stránke a za komentáre. Vďaka tomu bude pre používateľa najpohodlnejšia navigácia vo veľkom prúde správ. Výstup niekde nie viac ako 50 - 60 správ na stránku.

Taktiež nerobte mapu stránok vo forme jedného obrovského textového plátna. Ak počet príspevkov na vašej stránke alebo blogu nie je malý, potom určite urobte navigáciu po stránke aj na mape webu. Pre používateľov to bude veľmi pohodlné, pretože nikto nemá rád toto nekonečné posúvanie stránok. Tiež sa uistite, že vaša stránka má formulár na vyhľadávanie na stránke.

vzhľad stránky

Je tvárou vašej stránky. Ak takýto človek návštevníka vystraší alebo mu dodá nejaký negatívny charakter, tak človek z takejto stránky jednoducho neutečie a len ťažko sa na ňu vráti. Preto by ste sa mali postarať aj o oblečenie pre váš projekt. Chcem vám povedať, že veľa závisí od témy stránky. Hlavná vec je tu tiež na túto stránku v určitej téme. Samozrejme, nemusíte vytvárať žiadne majstrovské diela. Skúste si však vybrať šablóny, ktoré najlepšie zodpovedajú vašej téme a vašim čitateľom.

Ak máte pochybnosti, internet je plný šablón. Sú rozdelené do samostatných kategórií tém. Vyberte si smer a prezrite si vhodné šablóny. Vo všeobecnosti to závisí od predmetu projektu. Ak pre jednoduchý blog, jednoduchý a ľahko zadarmošablónu, potom pre veľký portál potrebujete tú najsofistikovanejšiu šablónu. Možno aj v. V prípade komerčných stránok by ste tiež nemali používať jednoduché šablóny. Musíte hľadať niečo krásne a atraktívne, aby ste prilákali viac návštevníkov.

Pre komerčné stránky by som odporučil kúpiť prémiové šablóny alebo objednať šablónu úplne od začiatku. Všetky vaše predaje je možné ovplyvniť mnohými spôsobmi. Preto nešetrite peniazmi za solídny a kvalitný web dizajn. V honbe za kvalitou a krásou by ste však nemali zájsť príliš ďaleko. Všetok tento exces si s vami môže zahrať krutý vtip. Príliš farebné a šablóny plnené rôznymi druhmi blokov môžu návštevníkov vystrašiť. Preto vedzte, kedy prestať! Používajte len tie funkcie, ktoré sú skutočne potrebné. Nemalo by tam byť nič zbytočné!

Dôležitým bodom je tiež dostupnosť mobilnej verzie a aplikácií pre váš web. Teraz s rýchlym rozvojom sietí a technológií stále viac a viac viac ľudí radšej používať mobilný internet. Je to rýchle a pohodlné! Preto sa rozhodne musíte postarať o responzívny dizajn webu a prípadne inštaláciu mobilných aplikácií. Máte teda záruku, že keď používateľ príde na vašu stránku z mobilného zariadenia, bude sa v nej cítiť príjemne.

Pre rýchly prístup budú všetky navigačné prvky vo vhodnej časti stránky, všetky tlačidlá budú mať primeranú veľkosť pre zariadenie a prezeranie obsahu bude oveľa pohodlnejšie. Vo všeobecnosti sa starajte aspoň o mobilnú verziu stránky, aby ste nestratili najviac návštevnosť a zlepšenie použiteľnosti webových stránok na mobilných zariadeniach.

Veľký význam má na stránke samotné písmo. Nepohodlné a zlé písmo iba znásilní používateľa. Preto sa nesnažte utekať za krásou. Vo svojich príspevkoch používajte iba štandardné obyčajné písma. Navyše sú podporované všetkými prehliadačmi. Vo vašich príspevkoch by som odporučil používať font Verdana. Dôležitá je aj veľkosť písma. Príliš malý text je veľmi ťažko čitateľný. Preto odporúčam použiť písmo s veľkosťou 13 - 14 bodov.

Buďte opatrní s množstvom a kvalitou reklám na stránke. Spravidla to na WordPress engine. Veľké množstvo rôzne reklamy, ako aj strašné obrázky v blokoch návštevníka rýchlo vystrašia a zanechajú len negatívnu odozvu na vašu stránku. Preto sa zamyslite nad tým, čo dávate na svoje stránky.

Dajte príležitosti pohodlná funkcia komentovanie na stránke. Musíte vypnúť captcha a nájsť iné spôsoby boja proti spamu. Ak sa o projekte vedú veľké diskusie, potom je lepšie písať komentáre ako strom a navigovať k nim stránku po stránke. Každá správa by mala zobrazovať gravatar komentátora. Niektorí ľudia to skrývajú zámerne. To nemôžeš! Ukazuje sa, že nie je jasné, kto je za koho zodpovedný. A je to veľmi výhodné pre komunikáciu. Preto sú takéto gravatary vždy potrebné a najlepšie s najoptimálnejšou veľkosťou. Obrázky, ktoré sú príliš veľké a príliš malé, sú zbytočné.

Nezabudnite poskytnúť najkrajšie a najkvalitnejšie predplatné. To by malo zahŕňať prihlásenie na odber nových príspevkov na stránke, nových komentárov na konkrétnu tému a odbery sociálnych médií. Celý tento proces by mal byť užívateľsky prívetivý a ľahko použiteľný. A pre blogerov by som odporúčala zostať pri tom. Toto je tiež veľmi dôležité!

Záver

To je všetko! Alebo nie? Ak poznáte nejaké iné spôsoby, ako zlepšiť použiteľnosť webu a znížiť mieru odchodov, určite napíšte nižšie do komentárov. A tak, ako vidíte, spôsobov, ako zlepšiť kvalitu stránky, je pomerne veľa. Teoreticky by mal byť tento príspevok rozdelený do niekoľkých článkov. Bolestne sa ukázalo, že je to objemné. Téma je však veľmi dôležitá. V druhej časti témy hovorím o dôležitosti obsahu, odkazov a smerovania používateľa.

Dnes mnohí dizajnéri vnímajú animáciu ako niečo, čo robí dizajn krajším a živším, a len zriedka ich používajú na zlepšenie použiteľnosti. Na zlepšenie použiteľnosti vstupnej stránky by mala byť animácia funkčný prvok, nielen dekorácia. Ak sa chcete naučiť, ako urobiť dizajn atraktívnym a pohodlným pomocou animácie, tento článok je pre vás.

1. Vytvorte koncept

Každý dizajnér je rozprávač. Keď vytvorí stránku, rozpráva svojim návštevníkom príbeh. Pomocou animácií môžeme tento príbeh urobiť ešte zaujímavejším.

Animácia vdýchne obsahu život, robí ho pútavejším a zapamätateľnejším. Dobrý príklad tohto druhu animácie možno nájsť na webovej stránke Ikonet. Animácia zachytáva používateľa od prvej sekundy jeho pobytu na stránke.

Animácia môže slúžiť aj ako sprievodca, ktorý používateľovi vysvetľuje, ako interagovať s rozhraním alebo stránkou. Upozorňuje tak používateľa na dôležité veci. Ak napríklad potrebujete zdôrazniť nejakú informáciu alebo akciu, urobte ju tak, aby odniekiaľ vykĺzla a bola dostatočne nápadná. Pozrite sa na príklad Prestona Zellera nižšie. Prvky sa objavujú na stránkach jeden po druhom, čím upozorňujú používateľov na konkrétne oblasti na stránke.

2. Poskytnite spätnú väzbu

Interakcia medzi človekom a počítačom je založená na dvoch hlavných princípoch: užívateľský vstup a systém Spätná väzba... Všetko interaktívne objekty musí reagovať na vstup používateľa vhodným vizuálnym alebo zvukovým signálom. Tým poskytuje spätnú väzbu.

Nižšie je uvedený efekt vlastného začiarkavacieho políčka vytvorený pomocou rámca Slides. Jemná animácia poskakovania, ktorú používateľ vidí pri používaní prepínača, zvyšuje pocit interaktivity.

Pomocou snímok môžete vytvárať pekné animácie pri vznášaní sa, ktoré povzbudzujú používateľov k interakcii s objektmi. Pozrite sa na Berry Visual. Keď umiestnite kurzor myši na položku Odoslať správu alebo na ponuku vpravo horný roh, objaví sa pekný animovaný efekt. To vytvára pocit interaktivity prvkov.

Buf Antwerp je ďalším skvelým príkladom toho, ako sa môže zlepšiť animovaná spätná väzba používateľskú skúsenosť... Keď návštevníci umiestnia kurzor myši na dlaždicu, zobrazí sa priesvitné prekrytie s textom Ďalšie informácie o objekte.

3. Vytvorte spojenie

Skvelým miestom na pridanie animácie na vašu vstupnú stránku sú momenty prechodu. Často sa momenty prechodu zdajú náhle, napríklad keď používatelia kliknú na odkaz a zobrazí sa nové okno. Takéto zmeny väčšinou vedú k strate kontextu, treba skenovať mozog nová stránka pochopiť, ako súvisí s predchádzajúcim, takže pre používateľov môže byť ťažké vnímať takéto prechody.

Zvážte príklad náhleho prechodu:

Porovnajte to s nasledujúcim príkladom, v ktorom plynulý animovaný prechod vedie používateľa do rôznych častí obrazovky:

Druhý prechod je jemnejší. Jasne demonštruje proces presúvania sa medzi sekciami, pomáha používateľom pochopiť, čo sa deje a vidieť prepojenie medzi nimi.

Používa sa aj pri vytváraní prechodu medzi fázami. Hladké prechody medzi snímkami v príklade nižšie vytvárajú dojem konzistentnosti, takže informácie nevyzerajú súvisle.

4. Urobte z nudných úloh zaujímavé

Môže byť ťažké si predstaviť, ako môžete do svojej každodennej rutiny pridať hravé prvky. Ale pridaním malého prekvapenia do animácie môžeme premeniť známu interakciu na niečo zábavné a nezabudnuteľné.

Ak si otvoríte stránku Výstava 3D miestností Tympanus, na prvý pohľad sa vám bude zdať, že sa nelíši od iných webových galérií. Váš dojem sa však zmení ihneď po interakcii so stránkou. Ak pohnete kurzorom, uvidíte, ako sa stránka pohybuje, a tento efekt vytvorí pocit 3D priestoru. Tento pocit sa zosilňuje, keď prechádzate z jednej stránky na druhú. Vyzerá to, že cestujete z jednej miestnosti do druhej v 3D priestore.

Teraz si povedzme niečo známejšie ako 3D efekty – o tvaroch. Kto rád vypĺňa formuláre? Asi nikto. Vypĺňanie formulárov je však jednou z najbežnejších úloh na internete. Ako robíte túto aktivitu zábavnou?

Pozrite sa na obrázok nižšie, yeti zatvorí oči, keď používateľ začne zadávať svoje heslo. Tento animovaný efekt je prekvapivý a povznášajúci, najmä ak ho vidíte prvýkrát.

V neposlednom rade môžete posúvanie urobiť nielen vizuálne zaujímavým, ale aj užitočným pre vašich čitateľov. Nižšie je interaktívna cesta, v ktorej je trasa na mape animovaná v súlade s obsahom na stránke. Súdržnosť nápadov, vizuálov a umiestnenia umožňuje používateľom čítať informácie a pozorovať pohyb po mape.

Určenie, kde bude animácia na stránke najužitočnejšia, je len polovica príbehu. Implementácia animácie je tiež veľmi dôležitá. V tejto časti sa naučíte, ako správne animovať objekty profesionálnym spôsobom.

1. Neanimujte viacero objektov súčasne

Keď sa niekoľko predmetov pohybuje súčasne, je pre používateľa ťažké sústrediť sa. Pretože oči človeka budú bežať z jedného objektu na druhý a mozog bude potrebovať dodatočný čas vyrovnať sa s tým, čo sa deje (najmä ak je pohyb veľmi rýchly). Preto je veľmi dôležité správne implementovať animáciu.

Je nevyhnutné porozumieť konceptu prechodnej choreografie, čo je sled pohybov, ktoré udržujú pozornosť pri zmene rozhrania. Minimalizujte počet súčasne sa pohybujúcich prvkov. Nepoužívajte viac ako dva alebo tri pohyblivé prvky súčasne. Ak chcete uviesť do pohybu viac ako tri objekty, zoskupte ich a animujte ich ako celok, nie ako samostatné prvky.

Slajdy sú pri webdizajne mimoriadne užitočné, neumožňujú príliš veľký pohyb. Každý animovaný efekt na snímkach bol starostlivo navrhnutý tak, aby efektívne prezentoval obsah.

2. Animácia by nemala byť v rozpore s individuálnymi charakteristikami vstupnej stránky

Zakaždým, keď do svojho návrhu pridáte animáciu, urobíte ho výraznejším. Jeho vzhľad bude do značnej miery závisieť od zvoleného animovaného efektu.

Keď ľudia interagujú s produktom, majú určité očakávania. Predstavte si, že keď vytvoríte vstupnú stránku pre bankovú službu, rozhodnete sa použiť skákaciu animáciu pre formulár na zber údajov. Mnoho používateľov sa bude báť poskytnúť svoje údaje, pretože formulár nevyzerá dostatočne vážne.

Rámec Slides poskytuje 10 animovaných štýlov, ako sú Stack, Zen, Film, Cards a Zoom. Experimentujte s rôzne efekty a vyberte si ten, ktorý najlepšie vyhovuje všetkým kritériám.

3. Nastavte časovanie

Pokiaľ ide o vytváranie animácií, načasovanie je všetko. Doslova rozhoduje o osude animácie. Keď pracujete na animácii, zvyčajne strávite tretinu času hľadaním požadovaných animovaných efektov a zvyšok času výberom načasovania, aby bola vaša animácia elegantná.

Optimálna rýchlosť animácie používateľského rozhrania je 200 až 500 milisekúnd. Animácie, ktoré trvajú menej ako 1 sekundu, sa považujú za okamžité, zatiaľ čo animácie dlhšie ako 5 sekúnd môžu vyvolať dojem ťahania.

Pokiaľ ide o vytváranie animovaných efektov, načasovanie má priamy vplyv na to, ako je animácia vnímaná. Pomáha dizajnérom urobiť animácie prirodzenejšie a prirodzenejšie.

4. Nezabúdajte na dostupnosť

Animácia je dvojsečná zbraň. Môže zlepšiť použiteľnosť pre jednu skupinu používateľov a zároveň vytvoriť problémy pre inú skupinu. Uvoľnite Apple iOS 7 sa stal príkladom, ako sa to nerobí. Krátko po vydaní operačného systému Používatelia iPhone uvádza, že animované prechody spôsobujú závraty a únavu očí.

Musíte sa zamerať na masy a zvážiť poruchy, ako sú problémy so zrakom atď. Vždy skontrolujte, či váš dizajn spĺňa pokyny WCAG. Sledujte želania a komentáre používateľov.

Špeciálna multimediálna funkcia CSS, „prefers-reduced-motion“ (preferuje minimálny pohyb), pomáha sledovať, kedy používateľ požaduje minimalizovať počet animácií.

Okrem toho by ste mali vykonať testovanie použiteľnosti, aby ste sa uistili, že všetci používatelia vrátane tých so zrakovým postihnutím nebudú mať problém s interakciou s vaším návrhom.

5. Otestujte svoje návrhy

Tu je niekoľko tipov, na ktoré treba pamätať pri testovaní:

• Otestujte na inom hardvéri.

Mnoho hardvérových charakteristík, ako je veľkosť obrazovky, hustota obrazovky, výkon GPU a tak ďalej môže výrazne ovplyvniť výkon vašej animácie. Výsledkom je, že majiteľ kvalitnejšej obrazovky uvidí iný obraz ako majiteľ staršieho zariadenia. Zvážte tieto faktory a optimalizujte svoju animáciu tak, aby vyzerala skvele na všetkých zariadeniach.

• Test na mobilnom telefóne.

Väčšina stránok je vytvorená a testovaná na PC. Nedostatok testovania na mobilných zariadeniach môže používateľom spôsobiť veľa problémov, pretože niektoré animované metódy fungujú dobre na počítačoch, ale nie na mobilných zariadeniach. Ak chcete používateľom zabrániť v zlej skúsenosti, uistite sa, že váš návrh funguje skvele na počítači aj mobilnom zariadení.

• Sledujte animáciu pri nízkej rýchlosti

Je ťažké si všimnúť nedostatky, keď animácia (najmä zložitá) funguje plná rýchlosť... Keď však animáciu spomalíte (povedzme na desatinu rýchlosti), takéto nedokonalosti sa prejavia. Môžete tiež vytvoriť spomalené video a ukázať ho svojim priateľom, aby ste získali ich názor.

6. Animácia by mala byť navrhnutá na začiatku

Mnoho dizajnérov uvažuje o animácii zbytočná funkcia pretože preťažuje používateľské rozhranie a komplikuje to. Vo väčšine prípadov je to tak, ale len preto, že dizajnéri pridávajú animáciu na konci procesu návrhu. Náhodný pohyb bez akéhokoľvek účelu návštevníkom neprospeje a je pravdepodobnejšie, že bude rozptyľovať a obťažovať.

Aby bola animácia užitočná a praktická, nájdite si na začiatku návrhu nejaký čas. Určenie miest, kde bude animácia vyzerať logicky a prirodzene, je veľmi dôležité.

Záver

Dobre navrhnutá a kvalitná animácia robí vstupnú stránku nielen atraktívnejšou, ale aj užívateľsky príjemnejšou. Správne vykonaná animácia môže urobiť z interakcií so vstupnou stránkou nezabudnuteľný a pútavý zážitok.

Dnes vám dávame do pozornosti súbor optimalizačných tipov, ktorých účinnosť je podložená skutočnými a veľmi spoľahlivými prípadmi.

Výsledky niektorých štúdií už zrejme poznáte, no my sa na ne pokúsime pozrieť z trochu iného uhla.

1. Zabudnite na pravidlo troch kliknutí

Vo svojej knihe Využite svoj talent sieť (2001) Jeffrey Zeldman slávna osoba vo svete webdizajnu presadzujte myšlienku, že „pravidlo troch kliknutí pomáha vytvárať webové stránky, ktoré majú intuitívnu a logickú hierarchickú štruktúru“. To znamená, že ak používateľ potrebuje na prístup k požadovanému obsahu urobiť viac ako tri kliknutia, začne pociťovať frustráciu, pretože to vyžaduje veľa úsilia a je to vnímané ako strata času.

V skutočnosti je však väčšina používateľov skutočne motivovaná zaviazať sa cielená akcia, a nenapadne ich zastaviť len preto, že už urobili tri kliknutia bez toho, aby dosiahli cieľ. Ak sa pozriete na hlavné príčiny frustrácie používateľov, zistíte, že nadmerné kliknutia nie sú veľkým problémom.

A potom vyvstáva otázka: má pravidlo troch kliknutí vôbec nejaký vedecký a empirický základ? Inými slovami, existuje nejaký výskum, ktorý naznačuje, že používatelia sú po troch kliknutiach frustrovaní?

Podľa štúdie britského webového dizajnéra Joshuu Portera používatelia, ktorí po troch kliknutiach nenájdu obsah, ktorý hľadajú, majú menšiu pravdepodobnosť, že prestanú hľadať. Okrem toho v priebehu štúdie niektoré subjekty urobili až 25 kliknutí.

Korelácia počtu kliknutí a percenta dokončených úloh v prípadoch úspechu (modrá) a neúspechu (červená)

Na koniec hlavnú úlohu nie je to počet kliknutí, ktoré sa prehrajú, ale pohodlie rozhrania. Ak je to jednoduché a priamočiare, človeka to poteší, aj keď na dosiahnutie cieľa treba 15 kliknutí. A ak webová stránka dodržiava pravidlo troch kliknutí, ale je zle navrhnutá a implementovaná, potom ju daná osoba nemusí chcieť používať vôbec.

2. Pamätajte na F-vzor

Jakob Nielsen vykonal štúdiu, v rámci ktorej sa vykonalo sledovanie očí (okulografia) viac ako 230 používateľov internetu, keď si prehliadali rôzne webové stránky. V dôsledku toho sa ukázalo, že pri zbežnom prezeraní sa pohľad používateľa pohybuje po trajektórii v tvare písmena F.

Teplotná mapa zobrazení webových stránok Jacoba Nielsena

Eyetools v spolupráci s dvoma marketingovými spoločnosťami Did-It a Enquiro urobili podobnú štúdiu. Zúčastnilo sa ho 50 subjektov, z ktorých každý mal vidieť výsledky vyhľadávania Google. V dôsledku toho sa pohľad všetkých 50 subjektov častejšie sústredil na ľavý horný roh a teplotná mapa mala tvar písmena F.

Zobrazenie teplotnej mapy stránky s výsledkami Google

Dizajnéri a textári by mali tieto údaje zvážiť pri vytváraní a umiestňovaní obsahu. Kľúčový obsah webovej stránky by preto mal byť umiestnený bližšie k ľavej strane rozloženia. Ak budete venovať pozornosť, uvidíte, že na najpopulárnejších zdrojoch je za nadpisom zoznam odsekov alebo skupina krátkych odsekov, ktoré majú rovnaký tvar písmena F. To rozhodne robí text čitateľnejším pri rýchlom prezeraní.

3. Na rýchlosti sťahovania záleží

Nikto nerád čaká. Používatelia internetu, teda my všetci, sme extrémne netrpezliví ľudia, preto by ste ich nemali nechať zbytočne čakať. Pri práci na svojom webe alebo vstupnej stránke dbajte na rýchlosť načítania stránky a neoľutujete.

Takže pred pár rokmi špecialisti Microsoft vykonali štúdiu s použitím ich Vyhľadávací nástroj Bing... Cieľom štúdie bolo identifikovať vzťah, ak existuje, medzi rýchlosťou načítania stránky a množstvom metrík, ako je spokojnosť používateľov, priemerný príjem na návštevníka a údaje o kliknutiach.

Štúdia zistila nasledujúcu koreláciu: Zvýšenie oneskorenia načítania stránky o 2 sekundy malo za následok 3,8 % pokles spokojnosti používateľov a približne 4,3 % pokles výnosov. Zároveň sa celkový počet kliknutí používateľov znížil o 4,4 %. Pokles zisku o 4,3% sa môže zdať ako malá strata, ale keď prichádza o multimiliónových a multimiliardových korporáciách sa každé percento hrnie do obrovských súm, o ktoré nikto nechce prísť.

Vzťah medzi oneskorením načítania stránky v ms a zmenou nasledujúcich ukazovateľov (zľava doprava): 1) počet jedinečných požiadaviek na 1 používateľa (%); 2) počet úprav žiadostí (%); 3) zisk na používateľa (%); 4) celkový počet kliknutí (%); 5) spokojnosť používateľov (%); 6) čas na dokončenie kliknutia (ms).

Tento príklad ukazuje, že používatelia sú skutočne netrpezliví a ochotní opustiť zdroj, ktorý ich núti čakať príliš dlho. Mali by ste sa tiež obávať o rýchlosť načítania vašej stránky, pretože Google nedávno zohľadnil tento faktor pri hodnotení výsledkov vyhľadávania.

Našťastie existuje veľa nástrojov, ktoré vám pomôžu zlepšiť načítanie a výkon stránky, ako napríklad rýchlosť stránky Google alebo YSlow od Yahoo.

4. Urobte text čitateľnejším

Renomovaný špecialista na použiteľnosť Jakob Nielsen uskutočnil štúdiu, v ktorej skúmal vnímanie textu návštevníkmi jeho stránky a ukázalo sa, že ľudia si online obsah len málokedy prečítajú pred očami. Návštevníci priemernej webovej stránky (cca 593 slov) čítajú 20-28% textu. S ďalším zvyšovaním objemu textu tento ukazovateľ postupne klesá až na 10 %.

Vzťah medzi počtom slov na stránku a maximálnym percentom tohto čísla (v %), ktoré môže používateľ prečítať (pri rýchlosti čítania 250 slov za minútu)

Existuje množstvo techník, ktoré pomáhajú prilákať viac pozornosti používateľov na obsah vášho webu. Ich cieľom je zlepšiť čitateľnosť textu. Ide najmä o výber Kľúčové slová pomocou zoznamov a častých podnadpisov a rozčlenením textu do jednoduchých krátkych odsekov.

5. Nezameriavajte sa na "čiaru skladania"