• UI & UX

Pareto-elv a webdesignban - tervezz hatékonyabb weboldalt a 80/20 szabály alapján

  • Lene Wandrey
  • 1 min read
Pareto-elv a webdesignban - tervezz hatékonyabb weboldalt a 80/20 szabály alapján

A perfekcionizmus problémája a webdesignban

A perfekcionizmus sok grafikus és webdesigner számára kihívást jelenthet. A kiválóságra való törekvés csodálatra méltó, de ez némi frusztrációhoz vezethet a végtelen változtatás és finomhangolás miatt, amíg a weboldal minden eleme tökéletes nem lesz. Sok tervező számára könnyű belemerülni a tervezési folyamatba, és elveszíteni az időérzékét a betűtípusok és színpaletták kiválasztása, valamint a pixel-tökéletes tervezési döntések százainak átgondolása közben. Persze, fontos, hogy nagyszerű munkát nyújtsunk, de tervezőként könnyű elveszíteni a fókuszt, hogy mit is jelent ez? Egy weboldalnak nem a tervező céljairól kell szólnia, hanem arról, hogy megfeleljen az ügyfél által kívánt eredménynek, ugyanakkor egyensúlyt teremtsen az idő, az erőforrások és az energia korlátai között. Korlátok nélkül egy weboldal könnyen túltervezett, lassú, túl sok elemmel és funkcióval rendelkező, a felhasználókat összezavaró weboldallá válhat. Emellett nehéz az összes funkciót a korlátozott időbe beleférni, így a tervező egyszerűen kifuthat az időből, és ha nem sikerül határidőre jó weboldalt készíteni, az minden érintett számára nagyon megterhelő.

Mi a Pareto-elv?

A "80/20 szabály", amelyet néha Pareto-elvnek is neveznek, kimondja, hogy a hatások 80%-a az okok 20%-ából származik. A Pareto-elvet először egy Vilfredo Pareto nevű olasz közgazdász vezette be 1895-ben, amikor megfigyelte, hogy Olaszország vagyonának 80%-a a lakosság mindössze 20%-ának tulajdonában van. Azt is észrevette, hogy a kertjében lévő borsóhüvelyek 20%-a termelte a borsó 80%-át! A Pareto-elv azt sugallja, hogy néhány kulcsfontosságú elem felelős egy adott eredmény nagy részének előállításáért. Azóta számos más területen is alkalmazzák, többek között az üzleti életben, a közgazdaságtanban és a pszichológiában, és még a mindennapi életben is alkalmazható.

Ez jól lefordítható a kisebb léptékű példákra is; észrevetted már, hogy a bevételed nagy része egy maroknyi állandó ügyféltől származik? Vagy hogy úgy tűnik, mindig ugyanazokat a ruhadarabokat viseled, miközben a ruhatárad nagy részét nem használod? Bár az arány nem mindig pontosan 80/20, és mindig vannak kivételek, ez egy nagyszerű eszköz arra, hogy az embereknek segítsen azonosítani, mely tevékenységek vannak a legnagyobb hatással a sikerükre, és ennek megfelelően rangsorolni ezeket.

A Pareto-elv a webdesignban és a digitális marketingben

A webdesignra alkalmazott Pareto-elv azt feltételezi, hogy a legtöbb eredményt néhány kulcsfontosságú funkció fogja hozni. A marketingben egyes kampányok sokkal jobban teljesítenek, mint mások. A legjobb eredmény elérése érdekében érdemes először ezekre a kisszámú kulcsfunkciókra összpontosítani, és biztosítani, hogy ezek kapják a legnagyobb figyelmet, míg a kevésbé fontos részek gyorsabban elvégezhetők. A Pareto-elv alkalmazásának egyik módja a felhasználói élményre és a használhatóságra való összpontosítás - ha odafigyel arra, hogy a felhasználók hogyan lépnek kapcsolatba az online tartalommal, és biztosítják, hogy megtalálják, amire szükségük van, valószínűleg nagyobb hasznot fog húzni, mintha csupán az esztétikára összpontosítana. Megtanít minket arra, hogy nem mindig van szükség a tökéletességre, és hogy a funkciók fontos 20%-ának optimalizálásával még hatékonyabb webhelyet lehet elérni.

Példaként egy kézzel készített termékeket árusító kis webáruház forgalmi adatait néztük meg, és több Pareto-trendet is észrevettünk. Például szinte minden látogatójuk mobilon keresztül lép be az oldalra. A legtöbb termékértékesítés kis számú kategóriából származik. A Facebook volt a legnagyobb közösségi médiaforgalmuk forrása. A termékoldal hőtérképét vizsgálva egyes területek nagyobb elkötelezettséget kapnak. Valamelyest megfigyelhető a tipikus F mintázat, az interakciók klaszterei a felső sorban és az oldal bal oldala mentén.

Devices popularity

Dashboard with website analytics data

Mit lehet tenni ezekkel az információkkal az ügyfél értékesítésének javítása érdekében?

Ebben a példában a leggyorsabb eredmény az lenne, ha javítanánk az eredetileg asztali számítógépre készült weboldal mobilos élményét. Az összes oldal hőtérképét meg lehetne vizsgálni, hogy többet tudjunk meg a felhasználói preferenciákról. Például a GYIK rész legtöbbet kattintott kérdéseit a kezdőlapra lehetne áthelyezni, ahelyett, hogy elrejtenék. A magas nyereségű termékeket azokon az oldalakon lehetne megjeleníteni, ahol a legtöbb kattintás várható.

Mindig a "Miért"-tel kezdjük

Always start with the Why(Kép forrása: Envato Elements)

Az iparágban szerzett tapasztalataim alapján azt tapasztaltam, hogy sok tervező szívesen elfogadja a megbízást és elkezd dolgozni a terveken, még akkor is, ha a projekt céljával kapcsolatos kulcsfontosságú információk hiányoznak. Lehet, hogy a briefet összeállító személy úgy gondolta, hogy ez az információ magától értetődő, vagy az ügyfél nem fogalmazta meg tömören. Szánjon egy pillanatot arra, hogy hátralépjen, mielőtt munkához lát. Ha nem érti világosan, hogy miért csinálja, amit csinál, a webdesignnak nem lesz iránya. Lehet, hogy a webhelye jól néz ki az Ön és még az ügyfél számára is, de a sok munkaóra ellenére az eredmény kiábrándító lesz, ha nem éri el az ügyfél által várt eredményeket.

Kérdezd meg magadtól: Miért létezik ez a weboldal? Kik lesznek a weboldal végfelhasználói, és hogyan fognak a weboldalon interakcióba lépni? Hogyan fog a weboldal értéket és sikert teremteni az ügyfele számára? Hogyan fogja az ügyfél mérni ezt a sikert? Hogyan fogja a weboldal vonzani a látogatókat, és hogyan fogja megszerezni a leadeket? Ha ezekre a kérdésekre választ tud adni, és megérti a "Miért"-et, akkor könnyebb lesz rangsorolni a tervezési elemek "Mit" és "Hogyan"-ját. Ha vizualizálni tudja a kívánt eredményt, az segíteni fog abban, hogy az energiáját a legfontosabb területekre összpontosítsa, hogy elérje azt.

Fogadja el a minimálisan életképes termék megközelítést a webdesignban

A weboldal tervezésekor annyi döntést kell meghozni, hogy nehéz lehet tudni, hol kezdjük el. A minimálisan életképes termék (MVP) megközelítés lényege, hogy a weboldalnak csak a legfontosabb elemeit építjük meg azonnal, majd az ügyfelek visszajelzései alapján idővel folyamatosan finomítjuk azokat. Ezt általában költség- és időmegtakarítás céljából alkalmazzák, vagy akkor, ha egy üzleti ötlet sok feltételezésen alapul. Ahelyett, hogy mindent egyszerre próbálnának ki, a fejlesztők az ügyfelek igényei alapján rangsorolhatják a funkciókat, és a lehető leghamarabb elkészíthetik a prototípusokat. Még ha nincs is idő- vagy költségvetési nyomás, a weboldal MVP-ként való felkarolása fantasztikus módja a Pareto-elv alkalmazásának és a perfekcionista tendenciák leküzdésének. Mentálisan segít, ha tudod, hogy később mindig hozzáadhatsz még több funkciót, de most a legfontosabb elemekre kell koncentrálnod.

A mobil-első tervezés segíthet egyszerűsíteni weboldalát

A weboldal tervezésekor hatékony és intuitív felhasználói élményt szeretne nyújtani a felhasználóknak. Ezt úgy érheti el a legjobban, ha a "mobil-első" tervezési megközelítéssel tervez. Ez a koncepció azt jelenti, hogy először mobileszközökre optimalizált webhelyeket kell létrehozni, nem pedig asztali webhelyeket, amelyeket a mobilokhoz igazítanak. Miért van erre szükség? A techjury.net szerint 2022-ben a mobiltelefonok a webhelyek forgalmának 60,66%-át generálják, míg az asztali számítógépek és a táblagépek együttesen 39,34%-ot tesznek ki. Ez különböző iparágakban és különböző webhelyeken eltérő lehet, de a tendenciát érdemes megjegyezni. Azzal, hogy a webhely mobil verziójára összpontosítja a tervezést, a siker esélyeit a maga javára fordíthatja.

Ha egyszer elkezd mobileszközökre tervezni, gyorsan észre fogja venni, hogy kevesebb hely marad a szövegezésnek és a rendetlenségnek. Elég nehéz alkalmazkodni, ha sokáig asztali számítógépekre terveztél. Ez a megközelítés azonban jól illeszkedik a Pareto-elvhez, mivel segít kiválasztani a legnagyobb hatású tartalmat. Ennek két előnye is van: webhelye a felhasználók által preferált mobilplatformra lesz optimalizálva, és amikor asztali számítógépre adaptálja, vizuálisan modernnek és letisztultnak fog tűnni. A webhelyét később is át kell majd alakítania asztali gépre, de ha a mobil-első megközelítésből dolgozik, ez sokkal könnyebbé válik, mivel már egy egyszerűsített dizájnnal rendelkezik.

Végezzen kutatást és elemezze a versenytársak webhelyeit

Amikor webdesignról van szó, gyakran úgy gondolunk a kutatásra, hogy más inspiráló weboldalakat vagy gyönyörű designelemekkel rendelkező sablonokat nézegetünk. De a webtervezéssel kapcsolatos kutatás túlmutat más weboldalak esztétikájának csodálatán. Meg kell érteni, hogyan használják az emberek a webet, hogyan lépnek kapcsolatba a felhasználók a különböző dizájnokkal, és hogyan szerveződik a tartalom egy hatékony weboldal létrehozásához. Az ügyfél által rendelkezésre bocsátott elemzési adatok bekérésével vagy egy olyan felügyeleti eszköz, mint a Ranktracker használatával jobban be tudjuk azonosítani azokat a területeket, amelyeken a jobb teljesítményű webhely érdekében javítani lehet.

A kutatásnak tartalmaznia kell a meglévő iparági szabványok, a célközönség és a felhasználók preferenciáinak vizsgálatát a versenytársak elemzésével. A versenytársakat megtalálhatja az ügyfél megkérdezésével, vagy saját keresésekkel, és megnézheti, hogy mely webhelyek állnak az első helyen. Miután azonosított néhány versenytársat, megbízható adatforrásra van szüksége róluk. A Ranktracker egyik kedvenc funkciója az, hogy hozzáadhatja saját azonosított versenytársait, és a saját domain eredményei mellett egy oszlopban megjeleníti a versenytársak teljesítményét. Ha egy versenytárs a saját kulcsszavaira előzi meg Önt a rangsorban, érdemes elemezni a weboldalukat, hogy tanulhasson tőlük. Egy versenytárs hozzáadásához egyszerűen csak be kell illesztenie az URL-címüket.

Add competitors in Rank Tracker

Rank Tracker board

Kattintson ide egy nagyszerű, mélyreható cikkért arról, hogyan kell versenyelemzést végezni.

Miközben az összes kutatást végzi, készítsen egy "álomlistát" az összes lehetséges funkcióról és elemről, amelyet be tudna építeni (ne aggódjon, ezeket le fogja szűkíteni, de hasznos, ha az összes ötletet együtt tartja).

Tervezés: A fő tervezési jellemzők azonosítása

Planning: Identifying Key Design Features(Kép forrása: Envato Elements)

A weboldal kialakításának a tervezett célon kell alapulnia. Nézze meg az összes elemet/funkciót az álomlistáról, és válassza ki azokat, amelyekről úgy gondolja, hogy segítenek az ügyfélnek elérni a célját. Fogjon egy üres papírt, és kezdjen el rajzolni néhány durva drótvázlatot a weboldalához. A drótvázlatokon minden egyes tervezett elemet kapcsoljon össze egy eredménnyel: ha nem talál egyértelmű célt, hagyja ki azt a részt. Ne a dizájn esztétikájára gondoljon, koncentráljon arra, hogy mi a legjobb a felhasználói élmény és a használhatóság szempontjából.

A közhiedelemmel ellentétben az első drótvázlatokat nem kell díszes tervezőszoftverrel megtervezni. A ceruza és a papír analóg megközelítése is jól működik, sőt, néha még jobb is, mivel nem vonja el a figyelmét a szoftver. A papír megbocsátóbb és kevésbé maradandó; gyorsabban használható, ami segíthet a kreatív folyamat során. Ha a drótvázakat be kell mutatnia az ügyfélnek, ezt sokkal professzionálisabban teheti meg, miután átdolgozta a nyers rajzokat.

Először készítsen egy mock-upot, ne tervezzen a webes platformon, hogy időt takarítson meg.

Van egy régi mondás, miszerint nem tudsz repülni egy repülőgéppel, miközben építed. Ez igaz a webdesignra is: ha megpróbálsz egy weboldalt építeni, miközben még mindig a tartalommal, a funkciókkal és a dizájnnal kapcsolatos döntéseken gondolkodsz, az a frusztráció receptje. Ahhoz, hogy a dolgok hatékonyak maradjanak, tervre van szükséged. Minden oldal makettjének elkészítése itt időigényesnek és kontraintuitívnak tűnik, de számos célt szolgál, és hosszú távon időt takarít meg. A mock-upok lehetővé teszik, hogy ügyfele még a webfejlesztés megkezdése előtt vizualizálja a weboldalt. Megtapasztalhatják a különböző szín- és betűtípus-választékokat, és könnyen előre láthatják, hogy mit kell megváltoztatni. A mock-up megbeszélése sok lehetőséget teremt a megbeszélésre és a kérdésekre. Ez növeli annak az esélyét, hogy az ügyfél elégedett lesz, amikor először látja az élő webhelyet. A legfontosabb, hogy a mock-upal való munka lehetővé teszi, hogy a weboldal sokkal gyorsabban elkészüljön, amint eljut a fejlesztési szakaszba, mivel szinte minden kreatív döntés már megszületett.

Olyan tartalommal dolgozzon, amely jól fog szerepelni a keresőmotorokban

Előfordul, hogy az ügyfél ragaszkodik ahhoz, hogy a tervezést "helyőrző szöveggel" kezdje, mivel úgy gondolja, hogy az Ön feladata csak az esztétikai elemek megtervezése. Ha lehetséges, kerülje el, hogy bármilyen tervezési munkát általános helyőrző szöveggel végezzen. Bár a tervei gyönyörűen nézhetnek ki, a weboldalának nem lenne célja, ha elhanyagolna egy kulcsfontosságú összetevőt, például a jól megírt tartalmat.

Egy weboldal csak akkor értékes, ha látogatót kap, és a keresőmotor-optimalizálás (SEO) azt jelenti, hogy a keresőmotorok hogyan találják meg a weboldalát organikusan. Az oldalon használt megfogalmazások döntő fontosságúak a SEO szempontjából, és a tervezési elemeknek támogatniuk kell a megfogalmazást. Ha előre tudja, hogy mik a kulcsszavak, az extra rálátást biztosít. Ha szövegíróval dolgozik a tartalom elkészítésénél, győződjön meg róla, hogy ismeri a SEO-t. Még ha nem is vagy SEO-szakértő, ismerkedj meg ezzel a témával, hogy a webtervezési folyamat során jobban odafigyelhess erre.

Néhány kulcsszókereső eszköz bonyolult (különösen, ha új vagy a SEO-ban), de a Ranktracker Keyword Finder nagyon egyszerű és intuitív: egyszerűen hozzáadod a kulcsszavakat egy listához, és a kulcsszavak nehézsége szerint színkódoltan jeleníti meg az eredményeket. A jó SEO érdekében alacsony versennyel, de megfelelő keresési volumennel rendelkező kulcsszavakat szeretne választani, ezért nagyon hasznos, hogy a keresési volumenek ott is megjelennek.

Keyword Finder

Mielőtt tehát belekezdene, próbáljon meg legalább egy vázlatot készíteni a szövegezésről. Ha Ön önálló tervező, valószínűleg Önnek is segítenie kell majd az ügyfélnek kitalálni, hogy a szövegezés hol illeszkedik a legjobban a weboldalon. A tervezési folyamat realitása, hogy ez a szövegezés néhányszor változhat, de sokkal jobb, ha van valami, amivel elindulhat, mintha semmi sem lenne.

Egyszerűsítse a betűtípusok, színek, hierarchia és vizuális elemek kiválasztását.

Ha kevésbé tapasztalt tervező vagy, vagy csak időt szeretnél spórolni, hasznos, ha sablonokkal dolgozol, és azokat használod alapként. Egy olyan CMS esetében, mint a WordPress, több ezer nagyszerű sablon létezik elfogadható áron. Ezek már rendelkeznek egységes stílusban megtervezett betűtípusokkal, színekkel, hierarchiával és vizuális elemekkel. Ha aggódik az eredetiség miatt, nyugodt lehet, hogy az eredménye másképp fog kinézni, mint a sablon, mivel azt a drótvázakhoz igazítja. Ha van néhány tervezési eszköz és egy általános stílus, amivel elindulhat, az valóban segíthet az irányt megtalálni, és csökkentheti a döntési fáradtságot. Ne tartalmazzon túl sok színt: nyugodtan korlátozhatja a webhely színeit 2 színre vagy legfeljebb 3 színre. Nézze meg a The 20 Best Color Combinations to Try on Your Website néhány nagyszerű ötletért és trendért a webhely színeinek kiválasztásakor.

Következtetés: A hatás maximalizálása

Ha egy tervező tudja, hogy mire kell összpontosítania, az segíthet neki kezelni maximalista hajlamait, miközben sikereket ér el. A Pareto-elv a webdesignban alkalmazott szabály, amely szerint a felhasználói élmény 80%-át 20%-os erőfeszítéssel lehet elérni. Ez azt jelenti, hogy a webdesignereknek a tartalom, az oldalsó tervezési elemek, a használhatóság és más tényezők optimalizálására kell összpontosítaniuk erőfeszítéseiket, hogy hatékony, a keresőmotorokban jó helyezést elérő weboldalt hozzanak létre.

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

Próbálja ki a Ranktracker-t INGYENESEN