• UŽIVATELSKÉ ROZHRANÍ A UX

Paretův princip ve webdesignu - navrhněte efektivnější webové stránky podle pravidla 80/20

  • Lene Wandrey
  • 8 min read
Paretův princip ve webdesignu - navrhněte efektivnější webové stránky podle pravidla 80/20

Problém perfekcionismu v oblasti webdesignu

Perfekcionismus může být pro mnoho grafiků a webdesignérů výzvou. Snaha o dokonalost je obdivuhodná, ale může vést k frustraci z nekonečných změn a úprav, dokud není každý prvek webu dokonalý. Pro mnoho designérů je snadné nechat se pohltit procesem návrhu a ztratit pojem o čase při výběru písma, barevné palety a přemýšlení nad stovkami pixelově dokonalých rozhodnutí. Jistě, je důležité odevzdat skvělou práci, ale jako designér se snadno přestanete soustředit na to, co to znamená? Webová stránka by neměla být o cílech designéra, měla by být o splnění požadovaného výsledku klienta a zároveň o vyvážení omezení času, zdrojů a energie. Bez omezení může webová stránka snadno skončit jako přetechnizovaná, pomalá, s příliš mnoha prvky a funkcemi, které uživatele matou. Je také těžké vměstnat všechny funkce do omezeného času, takže se může stát, že designérovi jednoduše dojde čas, a nedodání dobrého webu v termínu je pro všechny zúčastněné velmi stresující.

Co je Paretův princip?

"Pravidlo 80/20", někdy nazývané Paretův princip, říká, že 80 % důsledků vyplývá z 20 % příčin. Paretův princip poprvé představil italský ekonom Vilfredo Pareto v roce 1895, když si všiml, že 80 % italského bohatství vlastní pouze 20 % obyvatel. Všiml si také, že 20 % hrachových lusků na jeho zahradě vyprodukovalo 80 % hrachu! Paretův princip naznačuje, že za většinu daného výsledku je zodpovědných několik klíčových prvků. Od té doby se uplatnil v mnoha dalších oblastech, včetně podnikání, ekonomie, psychologie, a dokonce může být praktický i pro každodenní život.

To se dá dobře přenést i na menší příklady; všimli jste si někdy, že většina vašich příjmů pochází od několika stejných stálých klientů? Nebo že se vám zdá, že nosíte stále stejné kousky oblečení, zatímco většina vašeho šatníku se nepoužívá? I když poměr není vždy přesně 80/20 a vždy existují výjimky, je to skvělý nástroj, který lidem pomůže určit, které činnosti mají největší vliv na jejich úspěch, a podle toho jim stanovit priority.

Paretův princip ve webdesignu a digitálním marketingu

Paretův princip aplikovaný na design webu předpokládá, že většina výsledků bude pocházet z malého počtu klíčových funkcí. V marketingu si některé kampaně povedou mnohem lépe než jiné. Pro dosažení nejlepšího výsledku má smysl zaměřit se nejprve na tento malý počet klíčových prvků a zajistit, aby jim byla věnována největší pozornost, zatímco méně důležité části mohou být hotovy rychleji. Jedním ze způsobů, jak Paretův princip využít, je zaměřit se na uživatelskou zkušenost a použitelnost - tím, že budete věnovat pozornost tomu, jak uživatelé s vaším online obsahem pracují, a zajistíte, aby mohli najít to, co potřebují, pravděpodobně sklidíte větší úspěch, než kdybyste se zaměřili pouze na estetiku. Učí nás, že dokonalost není vždy nutná a že optimalizací důležitých 20 % funkcí lze dosáhnout ještě efektivnějšího webu.

Jako příklad jsme se právě podívali na údaje o návštěvnosti malého e-shopu, který prodává ručně vyráběné produkty, a všimli jsme si několika Paretových trendů. Například téměř všichni jejich návštěvníci přistupují na web přes mobilní zařízení. Většina prodejů produktů pochází z malého počtu kategorií. Facebook byl jejich největším zdrojem návštěvnosti ze sociálních sítí. Při zkoumání tepelné mapy stránky s produkty se ukázalo, že některé oblasti mají větší zapojení. Do jisté míry lze vypozorovat typický vzorec F se shluky interakcí v horním řádku a na levé straně stránky.

Devices popularity

Dashboard with website analytics data

Co lze na základě těchto informací udělat pro zlepšení prodeje tohoto klienta?

V tomto příkladu by nejrychlejší výhrou bylo zlepšení mobilního prostředí tohoto webu, který byl původně vytvořen pro stolní počítače. Bylo by možné prozkoumat heatmapy všech stránek a zjistit více o preferencích uživatelů. Například nejčastěji klikané dotazy z oddílu FAQ by mohly být přesunuty na domovskou stránku, místo aby byly skryty. Produkty s vysokým ziskem by se mohly objevit v oblastech stránek, kde je pravděpodobnost největšího počtu kliknutí.

Vždy začněte otázkou "Proč

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

Ze své praxe v oboru jsem si všiml, že mnoho designérů rádo přijme zadání a začne pracovat na návrzích, i když jim chybí klíčové informace týkající se účelu projektu. Možná si osoba, která brief sestavovala, myslela, že tyto informace jsou implicitní, nebo je klient nevyjádřil stručně. Než začnete pracovat, udělejte si chvilku odstup. Bez jasného pochopení toho, proč děláte to, co děláte, bude váš webový návrh postrádat směr. Vaše webové stránky mohou vypadat dobře pro vás a dokonce i pro klienta, ale navzdory mnoha hodinám práce bude výsledek zklamáním, pokud nedosáhne klientem očekávaných výsledků.

Seznamte se s nástrojem Ranktracker

Univerzální platforma pro efektivní SEO

Za každým úspěšným podnikem stojí silná kampaň SEO. Vzhledem k nesčetným optimalizačním nástrojům a technikám je však těžké zjistit, kde začít. No, už se nebojte, protože mám pro vás přesně to, co vám pomůže. Představuji vám komplexní platformu Ranktracker pro efektivní SEO.

Konečně jsme otevřeli registraci do nástroje Ranktracker zcela zdarma!

Vytvoření bezplatného účtu

Nebo se přihlaste pomocí svých přihlašovacích údajů

Zeptejte se sami sebe: Proč tyto webové stránky existují? Kdo budou koncoví uživatelé webu a jak budou na webu komunikovat? Jakým způsobem budou webové stránky vytvářet hodnotu a úspěch pro vašeho klienta? Jak bude klient tento úspěch měřit? Jak budou webové stránky přitahovat návštěvníky a získávat potenciální zákazníky? Když si dokážete odpovědět na tyto otázky a pochopíte "proč", bude snazší stanovit priority "co" a "jak" prvků návrhu. Když si dokážete představit požadovaný výsledek, pomůže vám to soustředit energii na nejdůležitější oblasti k jeho dosažení.

Přijměte přístup minimálního životaschopného produktu v designu webu

Při tvorbě webových stránek je třeba učinit mnoho rozhodnutí, a proto může být obtížné zjistit, kde začít. Přístup minimálního životaschopného produktu (MVP) zahrnuje okamžité vytvoření pouze základních prvků webových stránek a jejich průběžné zdokonalování na základě zpětné vazby od zákazníků v průběhu času. Obvykle se tak postupuje za účelem úspory nákladů a času nebo v případě, že je podnikatelský záměr založen na mnoha předpokladech. Místo toho, aby se vývojáři pokoušeli o všechno najednou, mohou na základě potřeb zákazníků stanovit priority funkcí a co nejdříve vytvořit prototypy. I když nejste pod časovým nebo rozpočtovým tlakem, pojmout web jako MVP je fantastický způsob, jak uplatnit Paretův princip a bojovat proti perfekcionistickým tendencím. Mentálně vám pomůže vědomí, že vždy můžete později přidat další funkce, ale že byste se měli prozatím soustředit na ty nejdůležitější prvky.

Navrhování pro mobilní zařízení vám pomůže zjednodušit vaše webové stránky

Při navrhování webových stránek chcete uživatelům poskytnout efektivní a intuitivní prostředí. Nejlepším způsobem, jak toho dosáhnout, je navrhovat s přístupem "mobile-first". Tento koncept zahrnuje tvorbu webových stránek, které jsou optimalizovány nejprve pro mobilní zařízení, nikoliv pro stolní počítače, které jsou přizpůsobeny pro mobilní zařízení. Proč je to nutné? Podle webu techjury.net budou v roce 2022 mobilní telefony generovat 60,66 % návštěvnosti webových stránek, zatímco stolní počítače a tablety dohromady 39,34 %. V různých odvětvích a na různých webových stránkách se to může lišit, ale tento trend stojí za povšimnutí. Zaměřením designu na mobilní verzi webu můžete zvýšit šance na úspěch ve svůj prospěch.

Jakmile začnete navrhovat pro mobilní zařízení, rychle si všimnete, že je zde méně místa pro texty a nepořádek. Pokud jste dlouho navrhovali pro stolní počítače, je poměrně těžké se přizpůsobit. Tento přístup ale dobře zapadá do Paretova principu, protože vám pomůže vybrat obsah s největším dopadem. Má to dvě výhody: váš web bude optimalizován pro mobilní platformu, kterou uživatelé preferují, a když jej přizpůsobíte pro stolní počítače, bude vizuálně vypadat moderně a čistě. Později budete muset web stále přizpůsobit pro stolní počítače, ale při práci z přístupu mobile-first je to mnohem snazší, protože již máte zjednodušený design.

Proveďte průzkum a analýzu konkurenčních webových stránek

Pokud jde o webový design, často si pod pojmem průzkum představujeme prohlížení jiných inspirativních webových stránek nebo šablon s krásnými designovými prvky. Výzkum v oblasti webdesignu však přesahuje pouhé obdivování estetiky jiných webových stránek. Pro vytvoření efektivního webu je nutné pochopit, jak lidé web používají, jak uživatelé interagují s různými designy a jak je organizován obsah. Požádáme-li o veškerá analytická data, která nám klient může poskytnout, nebo použijeme-li monitorovací nástroj, jako je například Ranktracker, můžeme lépe identifikovat oblasti, které je možné vylepšit, aby web fungoval lépe.

Výzkum by měl zahrnovat zkoumání stávajících průmyslových standardů, cílových skupin a preferencí uživatelů prostřednictvím analýzy konkurence. Konkurenty můžete zjistit dotazem u klienta nebo vlastním vyhledáváním a zjišťováním, které webové stránky se umísťují na předních místech. Jakmile identifikujete některé konkurenty, potřebujete spolehlivý zdroj údajů o nich. Jednou z mých nejoblíbenějších funkcí nástroje Ranktracker je možnost přidat vlastní identifikované konkurenty a ten zobrazí výkonnost konkurence ve sloupci vedle výsledků vaší vlastní domény. Pokud vás konkurent předstihuje na vaše vlastní klíčová slova, vyplatí se analyzovat jeho webové stránky a poučit se od něj. Chcete-li přidat konkurenta, stačí vložit jeho adresu URL.

Add competitors in Rank Tracker

Rank Tracker board

Klikněte na velký podrobný článek o tom, jak provést analýzu konkurence.

Seznamte se s nástrojem Ranktracker

Univerzální platforma pro efektivní SEO

Za každým úspěšným podnikem stojí silná kampaň SEO. Vzhledem k nesčetným optimalizačním nástrojům a technikám je však těžké zjistit, kde začít. No, už se nebojte, protože mám pro vás přesně to, co vám pomůže. Představuji vám komplexní platformu Ranktracker pro efektivní SEO.

Konečně jsme otevřeli registraci do nástroje Ranktracker zcela zdarma!

Vytvoření bezplatného účtu

Nebo se přihlaste pomocí svých přihlašovacích údajů

Během průzkumu si vytvořte "seznam snů" všech možných funkcí a prvků, které byste do něj mohli zahrnout (nebojte se, časem je zúžíte, ale je užitečné mít všechny nápady pohromadě).

Plánování: Identifikace klíčových prvků návrhu

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

Design webových stránek by měl vycházet z jejich účelu. Podívejte se na všechny prvky/funkce ze seznamu snů a vyberte ty, které podle vás pomohou klientovi dosáhnout jeho cíle. Vezměte si čistý papír a začněte kreslit hrubé wireframy webu. Na wireframech spojte každý prvek, který plánujete zahrnout, s výsledkem: pokud pro něj nenajdete jasný účel, danou část vyřaďte. Nepřemýšlejte o estetice designu, soustřeďte se na to, co je nejlepší pro uživatelský zážitek a použitelnost.

Navzdory všeobecnému přesvědčení není nutné, abyste první wireframy navrhovali pomocí náročného návrhářského softwaru. Analogový přístup s tužkou a papírem bude fungovat stejně dobře, a někdy dokonce lépe, protože vás nebude rozptylovat samotný software. Papír je shovívavější a méně stálý; rychleji se s ním pracuje, což může pomoci během tvůrčího procesu. Pokud potřebujete wireframy prezentovat klientovi, můžete to udělat profesionálněji, jakmile zpracujete hrubé nákresy.

Nejprve vytvořte maketu, pro úsporu času nenavrhujte ve webové platformě.

Staré přísloví říká, že když stavíte letadlo, nemůžete s ním létat. Platí to i pro tvorbu webových stránek: snaha vytvořit webovou stránku, zatímco se stále rozhodujete o obsahu, funkcích a designu, je receptem na frustraci. Chcete-li, aby vše bylo efektivní, potřebujete plán. Vytvoření makety každé stránky se v tomto případě zdá časově náročné a neintuitivní, ale slouží k mnoha účelům a z dlouhodobého hlediska ušetří čas. Makety umožňují klientovi představit si web ještě před zahájením tvorby webu. Může si vyzkoušet různé možnosti barev a písma a snadno předvídat, co je třeba změnit. Diskuse o maketě vytváří mnoho příležitostí k diskusi a otázkám. Zvyšuje se tak šance, že váš klient bude spokojen, až poprvé uvidí živý web. A co je nejdůležitější, práce s maketou vám umožní vytvořit web mnohem rychleji, jakmile se dostanete do fáze vývoje, protože téměř všechna kreativní rozhodnutí již byla učiněna.

Práce s obsahem, který se dobře umístí ve vyhledávačích

Někdy se stává, že klient trvá na tom, abyste začali navrhovat "zástupný text", protože si myslí, že vaším úkolem je pouze navrhnout estetické prvky. Pokud je to možné, vyhněte se jakékoli návrhářské práci s obecným zástupným textem. Vaše návrhy sice mohou vypadat krásně, ale vaše webové stránky by postrádaly smysl, pokud byste zanedbali klíčovou složku, jako je dobře napsaný obsah.

Seznamte se s nástrojem Ranktracker

Univerzální platforma pro efektivní SEO

Za každým úspěšným podnikem stojí silná kampaň SEO. Vzhledem k nesčetným optimalizačním nástrojům a technikám je však těžké zjistit, kde začít. No, už se nebojte, protože mám pro vás přesně to, co vám pomůže. Představuji vám komplexní platformu Ranktracker pro efektivní SEO.

Konečně jsme otevřeli registraci do nástroje Ranktracker zcela zdarma!

Vytvoření bezplatného účtu

Nebo se přihlaste pomocí svých přihlašovacích údajů

Webové stránky jsou hodnotné pouze tehdy, pokud je navštíví návštěvníci, a optimalizace pro vyhledávače (SEO) je způsob, jak vyhledávače vaše webové stránky organicky najdou. Pro SEO je rozhodující výběr formulací na stránce a designové prvky by měly tyto formulace podporovat. Pokud předem víte, jaká jsou klíčová slova, dává vám to další přehled. Pokud na obsahu spolupracujete s copywriterem, ujistěte se, že je obeznámen se SEO. I když nejste odborníkem na SEO, seznamte se s tímto tématem, abyste si toho mohli být při tvorbě webu více vědomi.

Některé nástroje pro vyhledávání klíčových slov jsou složité (zejména pokud se SEO teprve začínáte), ale nástroj Ranktracker Keyword Finder je velmi jednoduchý a intuitivní: stačí přidat klíčová slova do seznamu a zobrazí výsledky barevně rozlišené podle obtížnosti klíčových slov. Pro dobrou SEO optimalizaci chcete vybírat klíčová slova s nízkou konkurencí, ale přiměřeným objemem vyhledávání, takže je velmi užitečné, že se objemy vyhledávání zobrazují přímo zde.

Keyword Finder

Než tedy začnete, pokuste se získat alespoň návrh znění. Pokud jste samostatný designér, je pravděpodobné, že budete muset klientovi také pomoci zjistit, kam se znění na webu nejlépe hodí. Realitou procesu návrhu je, že se toto znění může několikrát změnit, ale mít něco na začátek je mnohem lepší než vůbec nic.

Zjednodušte výběr písem, barev, hierarchie a vizuálních prvků.

Pokud jste méně zkušený designér nebo si jen chcete ušetřit čas, je užitečné pracovat se šablonami a použít je jako základ. Pro systém CMS, jako je WordPress, existují tisíce skvělých šablon za rozumné ceny. Ty již mají písma, barvy, hierarchii a vizuální prvky navržené v uceleném stylu. Pokud máte obavy o originalitu, buďte si jisti, že váš výsledek bude vypadat jinak než šablona, protože ji přizpůsobujete svým wireframům. Mít na začátku nějaké designové prostředky a obecný styl vám může skutečně pomoci najít směr a snížit únavu z rozhodování. Nezahrnujte příliš mnoho barev: barvy webu můžete bezpečně omezit na 2 barvy nebo maximálně 3. Podívejte se na článek 20 nejlepších barevných kombinací, které můžete vyzkoušet na svém webu, kde najdete několik skvělých nápadů a trendů při výběru barev webu.

Závěr: Maximalizace dopadu

Když víte, na co se zaměřit, můžete designérovi pomoci zvládnout jeho perfekcionistické tendence a zároveň dosáhnout úspěchu. Paretův princip je pravidlo v oblasti webdesignu, které říká, že 80 % uživatelského zážitku lze dosáhnout s 20 % úsilí. To znamená, že webdesignéři musí zaměřit své úsilí na optimalizaci obsahu, prvků designu na stránce, použitelnosti a dalších faktorů, aby vytvořili efektivní web, který se bude dobře umisťovat ve vyhledávačích.

Lene Wandrey

Lene Wandrey

Founder, hot-designs.com

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

Začněte používat Ranktracker... zdarma!

Zjistěte, co brání vašemu webu v umístění.

Vytvoření bezplatného účtu

Nebo se přihlaste pomocí svých přihlašovacích údajů

Different views of Ranktracker app