• UI A UX

Paretov princíp vo webovom dizajne - navrhnite efektívnejšiu webovú stránku podľa pravidla 80/20

  • Lene Wandrey
  • 1 min read
Paretov princíp vo webovom dizajne - navrhnite efektívnejšiu webovú stránku podľa pravidla 80/20

Problém perfekcionizmu v oblasti webového dizajnu

Perfekcionizmus môže byť pre mnohých grafických a webových dizajnérov výzvou. Snaha o dokonalosť je obdivuhodná, ale môže viesť k frustrácii z nekonečných zmien a úprav, kým každý prvok webovej stránky nie je dokonalý. Pre mnohých dizajnérov je ľahké nechať sa pohltiť procesom navrhovania a stratiť pojem o čase pri výbere písma, farebných paliet a premýšľaní nad stovkami pixelovo dokonalých dizajnových rozhodnutí. Iste, je dôležité dodať skvelú prácu, ale ako dizajnér sa ľahko stratí pozornosť na to, čo to znamená? Webová stránka by nemala byť o cieľoch dizajnéra, mala by byť o splnení požadovaného výsledku klienta a zároveň o vyvážení obmedzení času, zdrojov a energie. Bez akýchkoľvek obmedzení môže webová stránka ľahko skončiť pretechnizovaná, pomalá, s príliš veľkým množstvom prvkov a funkcií, ktoré používateľov mätú. Je tiež ťažké vtesnať všetky funkcie do obmedzeného času, takže dizajnérovi môže jednoducho dôjsť čas a nedodanie dobrej webovej stránky v stanovenom termíne je pre všetkých zúčastnených veľmi stresujúce.

Čo je Paretov princíp?

"Pravidlo 80/20", niekedy nazývané Paretov princíp, hovorí, že 80 % účinkov pochádza z 20 % príčin. Paretov princíp prvýkrát predstavil taliansky ekonóm Vilfredo Pareto v roku 1895, keď si všimol, že 80 % bohatstva Talianska vlastní len 20 % jeho obyvateľov. Všimol si tiež, že 20 % hrachových strukov v jeho záhrade vyprodukovalo 80 % hrachu! Paretov princíp naznačuje, že za produkciu väčšiny daného výsledku je zodpovedných niekoľko kľúčových prvkov. Odvtedy sa uplatnil v mnohých ďalších oblastiach vrátane podnikania, ekonómie, psychológie a môže byť dokonca praktický pre každodenný život.

To sa dá dobre preniesť aj na menšie príklady; všimli ste si niekedy, že väčšina vašich príjmov pochádza od niekoľkých rovnakých stálych klientov? Alebo že sa vám zdá, že nosíte stále tie isté kusy oblečenia, zatiaľ čo väčšina vášho šatníka sa nepoužíva? Aj keď pomer nie je vždy presne 80/20 a vždy existujú výnimky, je to skvelý nástroj, ktorý ľuďom pomôže určiť, ktoré činnosti majú najväčší vplyv na ich úspech, a podľa toho im určiť priority.

Paretov princíp vo webovom dizajne a digitálnom marketingu

Paretov princíp aplikovaný na webový dizajn predpokladá, že väčšina výsledkov bude pochádzať z malého počtu kľúčových funkcií. V marketingu budú niektoré kampane oveľa lepšie ako iné. Ak chcete dosiahnuť najlepší výsledok, má zmysel zamerať sa najprv na tento malý počet kľúčových funkcií a zabezpečiť, aby sa im venovala najväčšia pozornosť, zatiaľ čo menej dôležité časti sa dajú urobiť rýchlejšie. Jedným zo spôsobov využitia Paretovho princípu je zameranie sa na používateľský zážitok a použiteľnosť - ak budete venovať pozornosť tomu, ako používatelia interagujú s vaším online obsahom, a zabezpečíte, aby našli to, čo potrebujú, pravdepodobne dosiahnete väčšie úspechy, ako keby ste sa zamerali len na estetiku. Učí nás, že dokonalosť nie je vždy nevyhnutná a že optimalizáciou dôležitých 20 % funkcií je možné dosiahnuť ešte efektívnejšie webové stránky.

Ako príklad môžeme uviesť, že sme sa práve pozreli na údaje o návštevnosti malého elektronického obchodu, ktorý predáva ručne vyrábané výrobky, a všimli sme si niekoľko Paretových trendov. Napríklad takmer všetci ich návštevníci pristupujú na stránku prostredníctvom mobilných zariadení. Väčšina predaja výrobkov pochádza z malého počtu kategórií. Facebook bol ich najväčším zdrojom návštevnosti zo sociálnych sietí. Pri skúmaní tepelnej mapy stránky s produktmi sa ukázalo, že niektoré oblasti majú väčšiu angažovanosť. Do istej miery možno pozorovať typický vzorec F, pričom zhluky interakcií sa nachádzajú v hornom riadku a na ľavej strane stránky.

Devices popularity

Dashboard with website analytics data

Čo sa dá urobiť s týmito informáciami na zlepšenie predaja tohto klienta?

V tomto príklade by bolo najrýchlejšou výhrou zlepšiť mobilné prostredie tejto webovej stránky, ktorá bola pôvodne vytvorená pre počítače. Mohli by sa preskúmať tepelné mapy všetkých stránok, aby sa zistilo viac o preferenciách používateľov. Napríklad najčastejšie klikané otázky zo sekcie FAQ by sa mohli presunúť na domovskú stránku namiesto toho, aby boli skryté. Produkty s vysokým ziskom by mohli byť uvedené v oblastiach stránky, kde je pravdepodobnosť najväčšieho počtu kliknutí.

Vždy začnite otázkou "prečo

Always start with the Why(Zdroj obrázku: Envato Elements)

Na základe svojich skúseností v tomto odvetví som si všimol, že mnohí dizajnéri radi prijmú zadanie a začnú pracovať na návrhoch, aj keď im chýbajú kľúčové informácie týkajúce sa účelu projektu. Možno si osoba zostavujúca brief myslela, že tieto informácie sú implicitné, alebo ich klient nevyjadril stručne. Skôr ako začnete pracovať, urobte si chvíľu odstup. Bez jasného pochopenia toho, prečo robíte to, čo robíte, bude vášmu webovému návrhu chýbať smer. Vaša webová lokalita môže pre vás a dokonca aj pre klienta vyzerať dobre, ale napriek vašim mnohým hodinám bude výsledok sklamaním, ak nedosiahne očakávané výsledky klienta.

Položte si otázku: Prečo existuje táto webová stránka? Kto budú koncoví používatelia webovej stránky a ako budú na webovej stránke komunikovať? Ako bude webová stránka vytvárať hodnotu a úspech pre vášho klienta? Ako bude klient tento úspech merať? Ako bude webová stránka priťahovať návštevníkov a získavať potenciálnych zákazníkov? Keď dokážete odpovedať na tieto otázky a pochopíte "prečo", bude jednoduchšie určiť priority "čo" a "ako" prvkov návrhu. Keď si dokážete predstaviť želaný výsledok, pomôže vám to sústrediť energiu na najdôležitejšie oblasti na jeho dosiahnutie.

Osvojenie si prístupu minimálneho životaschopného produktu v oblasti webového dizajnu

Pri návrhu webovej stránky je potrebné urobiť množstvo rozhodnutí, preto môže byť ťažké zistiť, kde začať. Prístup minimálneho životaschopného produktu (MVP) spočíva v tom, že sa hneď vytvoria len základné prvky webovej stránky a potom sa priebežne zdokonaľujú na základe spätnej väzby od zákazníkov. Zvyčajne sa to robí s cieľom ušetriť náklady a čas, alebo keď je podnikateľský nápad založený na mnohých predpokladoch. Namiesto toho, aby sa vývojári pokúšali o všetko naraz, môžu určiť priority funkcií na základe potrieb zákazníkov a vytvoriť prototypy čo najskôr. Aj keď nie ste pod časovým alebo rozpočtovým tlakom, poňatie webovej stránky ako MVP je fantastický spôsob, ako uplatniť Paretov princíp a bojovať proti perfekcionistickým tendenciám. Mentálne vám pomôže vedomie, že neskôr môžete vždy pridať ďalšie funkcie, ale teraz by ste sa mali sústrediť na najdôležitejšie prvky.

Navrhovanie pre mobilné zariadenia vám pomôže zjednodušiť vaše webové stránky

Pri navrhovaní webovej stránky chcete používateľom poskytnúť efektívne a intuitívne prostredie. Najlepší spôsob, ako to dosiahnuť, je navrhovať s prístupom "mobile-first". Táto koncepcia zahŕňa vytváranie webových stránok, ktoré sú optimalizované najprv pre mobilné zariadenia, a nie webových stránok pre stolné počítače, ktoré sú prispôsobené pre mobilné zariadenia. Prečo je to potrebné? Podľa portálu techjury.net budú v roku 2022 mobilné telefóny generovať 60,66 % návštevnosti webových stránok, zatiaľ čo stolové počítače a tablety spolu 39,34 %. V rôznych odvetviach a na rôznych webových stránkach sa to môže líšiť, ale tento trend stojí za povšimnutie. Zameraním dizajnu na mobilnú verziu webu môžete zvýšiť šance na úspech vo svoj prospech.

Keď začnete navrhovať pre mobilné zariadenia, rýchlo si všimnete, že je tu menej miesta na texty a neporiadok. Ak ste dlho navrhovali pre stolové počítače, je pomerne ťažké sa prispôsobiť. Tento prístup však dobre zapadá do Paretovho princípu, pretože vám pomôže vybrať obsah s najväčším účinkom. Má to dve výhody: vaša stránka bude optimalizovaná pre mobilnú platformu, ktorú používatelia uprednostňujú, a keď ju prispôsobíte pre počítače, bude vizuálne vyzerať moderne a čisto. Neskôr budete musieť svoju webovú lokalitu stále prispôsobiť pre počítače, ale pri práci na základe prístupu mobile-first je to oveľa jednoduchšie, pretože už máte zjednodušený dizajn.

Urobte si prieskum a analyzujte konkurenčné webové stránky

Pokiaľ ide o webový dizajn, často si pod pojmom prieskum predstavujeme prehliadanie iných inšpiratívnych webových stránok alebo šablón s krásnymi dizajnovými prvkami. Výskum v oblasti webového dizajnu však presahuje rámec obdivovania estetiky iných webových stránok. Je potrebné pochopiť, ako ľudia používajú web, ako používatelia interagujú s rôznymi dizajnmi a ako je organizovaný obsah, aby sa vytvorila efektívna webová lokalita. Ak si vyžiadame všetky analytické údaje, ktoré nám klient môže poskytnúť, alebo použijeme monitorovací nástroj, ako je napríklad Ranktracker, môžeme lepšie identifikovať oblasti, ktoré je možné zlepšiť, aby sme dosiahli lepší výkon webových stránok.

Výskum by mal zahŕňať preskúmanie existujúcich priemyselných noriem, cieľových skupín a preferencií používateľov prostredníctvom analýzy konkurencie. Konkurentov môžete nájsť tak, že sa opýtate klienta alebo si sami vyhľadáte a zistíte, ktoré webové stránky sa umiestňujú na popredných miestach. Po identifikácii niektorých konkurentov potrebujete spoľahlivý zdroj údajov o nich. Jednou z mojich obľúbených funkcií nástroja Ranktracker je možnosť pridať vlastných identifikovaných konkurentov a v stĺpci vedľa výsledkov vašej vlastnej domény sa zobrazí výkonnosť konkurencie. Ak vás konkurent predbieha na vaše vlastné kľúčové slová, oplatí sa analyzovať jeho webové stránky a poučiť sa od neho. Ak chcete pridať konkurenta, stačí vložiť jeho adresu URL.

Add competitors in Rank Tracker

Rank Tracker board

Kliknutím na tento článok získate podrobné informácie o tom, ako vykonať analýzu konkurencie.

Počas prieskumu si vytvorte "zoznam snov" všetkých možných funkcií a prvkov, ktoré by ste mohli zahrnúť (nebojte sa, zúžite ich, ale je užitočné mať všetky nápady pohromade).

Plánovanie: Identifikácia kľúčových prvkov dizajnu

Planning: Identifying Key Design Features(Zdroj obrázku: Envato Elements)

Dizajn webovej stránky by mal vychádzať z jej účelu. Pozrite sa na všetky prvky/funkcie zo zoznamu snov a vyberte tie, ktoré podľa vás pomôžu klientovi dosiahnuť jeho cieľ. Vezmite si čistý papier a začnite kresliť hrubé náčrty webovej lokality. Na svojich wireframes spojte každý prvok, ktorý plánujete zahrnúť, s výsledkom: ak preň nemôžete nájsť jasný účel, túto časť vyraďte. Nemyslite na estetiku dizajnu, sústreďte sa na to, čo je najlepšie pre používateľský zážitok a použiteľnosť.

Na rozdiel od všeobecného presvedčenia nemusia byť vaše prvé náčrty navrhnuté pomocou náročného dizajnérskeho softvéru. Analógový prístup s ceruzkou a papierom bude fungovať rovnako dobre a niekedy dokonca lepšie, pretože vás nebude rozptyľovať samotný softvér. Papier je zhovievavejší a menej trvalý; rýchlejšie sa používa, čo môže pomôcť počas tvorivého procesu. Ak potrebujete prezentovať wireframy klientovi, môžete to urobiť profesionálnejšie, keď už máte spracované hrubé nákresy.

Najprv si vytvorte maketu, aby ste ušetrili čas, nenavrhujte vo webovej platforme

Staré príslovie hovorí, že keď staviate lietadlo, nemôžete s ním lietať. Platí to aj v prípade webového dizajnu: snaha vytvoriť webovú lokalitu, keď ešte stále riešite rozhodnutia o obsahu, funkciách a dizajne, je receptom na frustráciu. Ak chcete, aby boli veci efektívne, potrebujete plán. Vytvorenie makety každej stránky sa tu zdá byť časovo náročné a proti intuícii, ale slúži na mnoho účelov a z dlhodobého hľadiska ušetrí čas. Makety umožňujú vášmu klientovi predstaviť si webovú stránku ešte pred začatím tvorby webu. Môže si vyskúšať rôzne možnosti farieb a písma a ľahko predvídať, čo je potrebné zmeniť. Diskusia o makete vytvára veľa príležitostí na diskusiu a otázky. Zvyšuje sa tým šanca, že váš klient bude spokojný, keď prvýkrát uvidí živé webové sídlo. A čo je najdôležitejšie, práca s maketou vám umožní vytvoriť webovú lokalitu oveľa rýchlejšie, keď sa dostanete do fázy vývoja, pretože takmer všetky kreatívne rozhodnutia už boli urobené.

Pracujte s obsahom, ktorý sa dobre umiestňuje vo vyhľadávačoch

Niekedy sa stáva, že klient trvá na tom, aby ste začali navrhovať s "textom na mieste", pretože si myslí, že vašou úlohou je navrhovať len estetické prvky. Ak je to možné, vyhnite sa akejkoľvek práci na návrhu s generickým zástupným textom. Hoci vaše návrhy môžu vyzerať krásne, vaša webová stránka by nemala zmysel, ak by ste zanedbali kľúčovú zložku, ako je dobre napísaný obsah.

Webová stránka je hodnotná len vtedy, ak ju navštevuje návštevník, a optimalizácia pre vyhľadávače (SEO) je spôsob, akým vyhľadávače organicky nájdu vašu webovú stránku. Pre SEO je rozhodujúce, aké formulácie sa na stránke použijú, a dizajnové prvky by mali tieto formulácie podporovať. Ak vopred viete, aké sú kľúčové slová, poskytuje vám to ďalší prehľad. Ak spolupracujete s copywriterom na tvorbe obsahu, uistite sa, že je oboznámený so SEO. Aj keď nie ste odborník na SEO, oboznámte sa s touto témou, aby ste si to mohli lepšie uvedomiť počas procesu tvorby webu.

Niektoré nástroje na vyhľadávanie kľúčových slov sú komplikované (najmä ak ste v SEO nováčik), ale vyhľadávač kľúčových slov Ranktracker je veľmi jednoduchý a intuitívny: jednoducho pridáte kľúčové slová do zoznamu a zobrazí výsledky farebne odlíšené podľa náročnosti kľúčových slov. Pre dobrú SEO optimalizáciu chcete vyberať kľúčové slová s nízkou konkurenciou, ale s primeraným objemom vyhľadávania, preto je veľmi užitočné, že sa objem vyhľadávania zobrazuje priamo tu.

Keyword Finder

Skôr ako začnete, skúste si pripraviť aspoň návrh znenia. Ak ste samostatný dizajnér, je pravdepodobné, že budete musieť klientovi pomôcť aj s určením, kam sa znenie na webovej stránke najlepšie hodí. Realitou procesu navrhovania je, že toto znenie sa môže niekoľkokrát zmeniť, ale mať niečo na začiatok je oveľa lepšie ako nič.

Zjednodušenie výberu písma, farieb, hierarchie a vizuálnych prvkov

Ak ste menej skúsený dizajnér alebo si len chcete ušetriť čas, je užitočné pracovať so šablónami a použiť ich ako základ. Pre systém CMS, ako je WordPress, existujú tisíce skvelých šablón za rozumné ceny. Tie už majú písma, farby, hierarchiu a vizuálne prvky navrhnuté v ucelenom štýle. Ak máte obavy o originalitu, buďte si istí, že váš výsledok bude vyzerať inak ako šablóna, pretože ju prispôsobujete svojim wireframom. Ak máte na začiatku k dispozícii určité prostriedky dizajnu a všeobecný štýl, môže vám to skutočne pomôcť nájsť smer a znížiť únavu z rozhodovania. Nezahŕňajte príliš veľa farieb: farby webovej stránky môžete pokojne obmedziť na 2 farby alebo maximálne 3. Pozrite si 20 najlepších farebných kombinácií, ktoré môžete vyskúšať na svojej webovej stránke, kde nájdete niekoľko skvelých nápadov a trendov pri výbere farieb webovej stránky.

Záver: Maximalizácia vplyvu

Vedieť, na čo sa zamerať, môže dizajnérovi pomôcť zvládnuť jeho perfekcionistické sklony a zároveň dosiahnuť úspech. Paretov princíp je pravidlo v oblasti webového dizajnu, ktoré hovorí, že 80 % používateľského zážitku možno dosiahnuť s 20 % úsilia. To znamená, že weboví dizajnéri musia svoje úsilie zamerať na optimalizáciu obsahu, prvkov dizajnu na stránke, použiteľnosti a ďalších faktorov, aby vytvorili efektívnu webovú lokalitu, ktorá sa bude dobre umiestňovať vo vyhľadávačoch.

Lene Wandrey

Lene Wandrey

Lene Wandrey is a tech-loving artist, graphic designer and entrepreneur living in South Africa. She's the founder of hot-designs.com. She is passionate about design and productivity.

Link: hot-designs.com

Vyskúšajte aplikáciu Ranktracker ZADARMO