Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-03-310 komment

Miért az egyszerű webdesign a leghatékonyabb? És hogyan egyszerűsíts?

Évtizedes tétel a webdesignban, hogy a konvencióknak megfelelő, egyszerűvé, könnyen átláthatóvá tett weboldal lehet, hogy nem kínál semmi egyedit, viszont hatékony. De vajon miért? És hogyan egyszerűsítsd a weboldaladat?

Webshark weboldalkészítés 02Ha körülnézünk a weben, akkor nagyon sok “egyforma” weboldalt láthatunk. Ennek oka nem csak a weboldal template-ekben keresendő, hanem abban, hogy mindenki jól működő weboldalt szeretne. Márpedig, ha hatékony weboldalt szeretnénk, akkor jobb, ha maradunk a szigorú és megszokott kereteken belül, a kreativitásunkat pedig rövid pórázon tartjuk. És persze igazodunk a területünkön és a közösségünk számára megszokott weboldal-mintákhoz. De miért is?

Szeretjük a megszokottat

Egyrészt azért, mert az emberi agy szereti a szabványdolgokat, mivel ezeket könnyebben, gyorsabban képes befogadni, mint azt, ami eredeti vagy szokatlan. Ezeknél könnyebb a kognitív feldolgozás, mert minél többször kerülünk kapcsolatba egy dologgal, annál közelebbinek érezzük magunkhoz, annál jobban megkedveljük.

Ez a webdesignban annyit jelent, hogy az emberek azokat az oldalakat érzik ismerősnek, vagyis kedvelik, melyeknél kapásból tudják, hogy mit, hol találnak, és milyen tevékenységeket lehet rajtuk végrehajtani. Egy olyan oldal, mely eltér a bevett sémáktól, azt kockáztatja, hogy a látogatók elfordulnak tőle.

Ahhoz, hogy a látogatók könnyedén feldolgozhassák egy weboldal tartalmát, a vizuális befogadás folyamatát meg kell könnyíteni számukra. Ha eddig azt hitted, hogy a felhasználók a kreatív ötletekkel bőven telehintett oldalakat kedvelik, akkor tévedsz. Nyilván van, amikor valakit éppen az eredetiség nyűgöz le, de egy 2013-as, Harvardon született tanulmányban megállapították, hogy miközben az embereknek eltérő az ízlésük a webdesignban, egy dologban egyformán vélekedtek: minél összetettebb egy weboldal, annál kevésbé találják vonzónak. Ebből pedig az következik, hogy ha a legtöbb látogatónk igényének meg szeretnénk felelni, akkor egyszerű oldalt kell készítenünk.

Hogyan öli meg a weboldalad a kreativitás?

A weboldaltervezés tehát nem a kreativitásról szól. Habár minden kezdő úgy áll neki a dolognak, hogy majd kiéli a kreativitását a weboldaltervezésben, később rájön, hogy a webdesign középpontjában a konverzió, a felhasználói élmény, a használhatóság áll. A túlzott kreativitás pedig csak ront egy weboldalon.

Miért? Mert a designereknek a felhasználók számára kell tervezniük, és ezt minél előbb felismeri egy designer, annál jobb. A felhasználókról pedig azt érdemes tudni, hogy lusták és a legrövidebb utat keresik ahhoz, hogy elvégezzenek egy feladatot. Ezért nem jók a túlbonyolított weboldalak, a túl kreatív megoldások, vagyis az hogy egyes designerek újra és újra feltalálják a kereket. A Google kutatása is azt mutatja, hogy a felhasználók az egyszerű és számukra ismerősen kinéző weboldalakat kedvelik.

Az emberek fél másodperc alatt eldöntik, hogy tetszik-e nekik a weboldalad vagy sem, hogy maradnak vagy lelépnek az oldalról, és hogy mit éreznek a céged, márkád iránt. Minden típusú weboldalnak megvan már a sémája, és ez azért nem rossz, mert az emberek jól tudják használni őket, hiszen mindent ott találnak rajtuk, ahol megszokták. Ha nem ott találják, akkor csalódottak lesznek.

Vagyis egy weboldal tervezésének mindig egy prototípussal a fejünkben érdemes belevágni, majd ebből kiindulva lehet más elrendezésekkel kísérletezni. Természetesen minden a célközönségedtől függ. Ha például nagyrészt kreatív emberekből áll, akkor bátran lehetsz merész, mert az ő elvárásaik mások, mint az átlagemberé. Ugyanakkor, ha az emberek egy nem meghatározott, egyéni preferenciákkal rendelkező csoportjának tervezed a weboldalad, akkor érdemes olyan közel maradni a prototípusokhoz, amennyire lehetséges.

Nem jó, ha a felhasználóknak törniük kell a fejüket a weboldalad használata során. A weboldalaknál van egy rakás konvenció és szabvány – például a logó elhelyezésére, a navigációra, a keresőmezőre vonatkozóan -, melyeket felesleges megváltoztatni. Ezek a sztenderdek mind segítik a felhasználót a weboldaladon való tájékozódásban, és ha ezeket jól használod, akkor gyorsabban megtalálják, amit keresnek.

A megszokott elrendezésekből kell tehát kiindulni, majd variálni és tesztelni bizonyos eltérő megoldásokat. A megérzésekre nem érdemes alapozni, tudni kell, hogy mit gondolnak a felhasználók. Ha megengedhetsz magadnak teljesen új design-megoldásokat, akkor azt is megteheted, hogy teszteld ezeknek a használhatóságát.

A kreativitásodat legfeljebb a vizuális designban érdemes kiélni. Kipróbálhatsz eltérő színsémákat és betűtípus-kombinációkat, de variálhatsz a térközökkel és a hierarchiával is. Megjeleníthetsz a weboldaladon eredeti illusztrációkat, vagy különleges hover-effekteket. De az is kreativitást igényel, ha egyszerűsíteni akarod a weboldalad. Sőt, egy weboldal egyszerűsítése sokszor több kreativitást követel meg, mint a díszítése.

A lényeg azonban az, hogy a felhasználók gyorsabban elérhessék céljaikat a weboldaladon. A kreativitásod pedig arra használd, hogy megoldjad a problémáikat, javíts a konverziós arányokon.

Az egyszerűség gyönyörködtet

De miért is érzik az emberek szebbnek az egyszerűséget, a konvenciókat? Azért, mert könnyebb nekik feldolgozni egy egyszerű, megszokott weboldal tartalmát. Egy egyszerű oldal nem igényel nagy munkát a szemektől és az agytól, hogy feldolgozza és esetleg tárolja az ott található információkat. Ettől pedig még szebbnek is látjuk.

Merthogy ez a feldolgozás egyébként nem egy könnyű és gyors folyamat, hiszen a retinának előbb elektromos impulzusokká kell alakítania a vizuális információkat. Minél több fényre és színre vonatkozó információ van egy weboldalon – azaz minél komplexebb -, annál több elektromos impulzust kell a szemnek továbbítania, illetve az agynak feldolgoznia, majd tárolnia.

egyszerű webdesign

Ezért van az, hogy annyira egyszerűvé kell tenni az oldalt, amennyire csak lehet, el lehet tolni a dolgot egészen a minimalizmusig. A tipográfia, a logó, a színek, az elrendezés mind információt közvetít a márkánkról. Korábban már foglalkoztunk azzal, hogy milyen tipográfia, illetve milyen színek mit sugároznak egy weboldalról, illetve a mögötte álló cégről. Itt erről van szó, pusztán annyival kiegészítve, hogy a szükségesnek tűnő információkat ajánlott minél kevesebb elem segítségével átadni a felhasználóknak.

Munkamemória

A másik indok az egyszerűsítésre a rövid távú memória, azaz más néven munkamemória korlátozottsága. Agyunknak ez a része arra való, hogy rövid távon tároljon információkat. A munkamemóriába mindössze öt-kilenc tétel fér bele egyszerre. Ezért is ajánlott az oldalunknak egyszerre minél kevesebb információt átadnia.

Egy egyszerű, sablon alapján felépített oldal csökkenti azt az információmennyiséget, ami a munkamemóriát terheli, így jut kapacitása azokat az elemeket befogadni és tárolni az oldalról, melyeket fontosnak tartunk. Például egy webshop esetében a termék árát, leírását vagy épp a garanciára vonatkozó részt.

Ha viszont eltérünk a jól megszokott sémáktól, akkor az erre vonatkozó, de tulajdonképpen lényegtelen információk fogják kitölteni a rendelkezésre álló teret a munkamemóriában. A látogatókat megzavarhatja egy szokatlan felépítés vagy a rendhagyó színek, a rossz navigáció, a lassú betöltési sebesség vagy a homályos képek. Ezeket fogja feldolgozni az agya, ahelyett, hogy a számunkra konverziót eredményező információk eljutnának hozzá.

Ezért tanácsos a felhasználók számára olyan weboldalt mutatni, mely teljesen megfelel a webes sémáknak. Ezek persze területtől, iparágtól, látogatóközönségtől függően változnak – tehát más a szabvány-felépítése egy blognak, mint egy webáruháznak -, úgyhogy ezekkel kell előbb tisztában lenni, majd a megtalált mintára felépíteni a weboldalt.

Nem mindegy, hogy milyen az egyszerűség

Nem biztos, hogy mindenki tökéletesen tudja, mikor is válik hatékonnyá az egyszerűsítés. Sokan leragadnak a naiv egyszerűségnél, mely hibás megoldásokat szül, vagy épp megakadnak a túlbonyolítottság fázisában.

Miközben úgy tűnik, hogy az életünk és világunk számtalan problémájára a megoldás az egyszerűsítésben rejlik, ez mégsem azt jelenti, hogy vissza kell térnünk a kőkorszakba vagy hogy egy általunk idealizált, egyszerűbbnek és jobbnak tartott időben való létet kellene imitálni. Hiszen használjuk, használni akarjuk a technológia legújabb vívmányait, melyek könnyebbé teszik az életünket, és nem akarunk lemondani az általuk nyújtott kényelemről, prakikumról. A két cél tehát más-más irányba mutat, állandó a feszültség túlbonyolított világunk és egyszerűségre törekvésünk között. De mi a megoldás, hogyan oldható fel ez a feszültség?

Erre a kérdésre kereste a választ egy mediumos blogbejegyzésben annak szerzője, aki jó érzékkel egy Steve Jobs idézethez nyúlt vissza, és mutatott rá a megoldásra. Ennek lényege pedig az lenne, hogy amikor egy problémára tekintünk és azt egyszerűnek látjuk, akkor valójában nem értjük meg a probléma összetettségét. Amikor elkezdünk vele mélyebben foglalkozni, akkor látjuk, hogy valójában bonyolult a dolog, majd erre válaszul jönnek a túlbonyolított megoldások. A legtöbb ember ennél a pontnál megakad. Azonban, ha igazán jó megoldást akarunk, akkor tovább kell lépni, meg kell érteni a probléma lényegét, annak érdekében, hogy előállhassunk egy elegáns és igazán hatékony megoldással.

A naiv egyszerűségtől a túlbonyolításig

A folyamat az úgynevezett naiv egyszerűséggel kezdődik. Amikor sokan gondolkodás nélkül, akár rutinból, akár sztereotípiákra építve vágják a választ valami problémára. Ez azonban a legtöbb esetben rossz megoldást jelent. Mint H.L.Mencken fogalmazott “minden összetett problémára van egy válasz, ami tiszta, egyszerű, és hibás”. Bár kényelmes lehet, nem szabad itt leragadni, hanem muszáj mélyebben megérteni a dolgokat minden esetben.

Amint azonban tényleg megpróbálunk megérteni és jó megoldásokkal megoldani egy problémát, úgy válik egyre bonyolultabbá a helyzet. Egyre több tényező bukkan fel az egyenletünkben, és az egész kezd olyan bonyolulttá és áttekinthetetlenné válni, mint egy repülőgép pilótafülkéje a laikusok számára, vagy egy 80 oldalas használati utasítás. Ilyenkor kell megállni egy pillanatra, hogy egyáltalán megértsük, mi is zajlik körülöttünk, és hogy levegőt kapjunk. Ha azonban itt leragadunk, attól még a dolgok és a megoldások bonyolultak maradnak.

A valódi megoldás: az elegáns egyszerűség

Ha ennél a pontnál nem adjuk fel, hanem kitartóan próbáljuk megoldani az egyre bonyolultabbá váló helyzetet, akkor eljuthatunk az egyszerűség egy olyan szintjéhez, mely túlmutat a korábbi naiv és ezáltal hibás egyszerűségen. Fogalmazhatunk úgy, hogy az egyszerűség itt már elegánssá válik, és nem egy durván megmunkált faék kvalitásaival rendelkezik csak.

Ennek az elegáns egyszerűségnek az alapja az a mély tudás és szakértelem, mely a problémával eltöltött sok-sok munkaóra gyümölcse, melynek során végig arra törekedtünk, hogy egyszerűsítsünk. Ezáltal érhető el a tökéletesség. A webdesignban sokszor hallott aforizma szerint nem akkor lesz valami kész, amikor már nem tudunk mit hozzátenni, hanem akkor, amikor már nem tudunk mit elvenni belőle. A tudás és a szakértelem pedig ahhoz kell, hogy tudjad, mit lehet és mit nem lehet elvenni.

Ilyen elegáns egyszerűséggel találkozhatunk napjaink olyan tárgyainál is, mint egy-egy jól sikerült laptop vagy mobiltelefon, de akár weboldalaknál, alkalmazásoknál is, melyek mögött hihetetlenül bonyolult technológia és adott esetben emberek százainak több éves munkája áll. Amennyiben ezek a termékek igazán jók, akkor kinézetük egyszerűséget, eleganciát sugall, de ott van mögöttük a rendkívüli összetettség és a technológia teljes potenciálja. Ez azonban a felhasználó elől rejtve marad, nem bonyolítja az életét egészen addig, amíg valamilyen speciális esetben szüksége nem lesz rá.

Tippek a weboldalad egyszerűsítéséhez

Ha találkozunk egy elrontott weboldallal, akkor azon általában egyszerűsítéssel lehet helyretenni a dolgokat. Ahogy néha rendet kell rakni és ki kell dobálni a szemetet a közvetlen környezetedben, úgy meg kell ezt tenni időnként a weboldalad esetében is annak érdekében, hogy jobban használható legyen. Ha “kitakarítasz” egy weboldaladon, azzal javítod a használhatóságát és a felhasználói élményt. Nem tudod, hogy hol kezdd el a rendrakást?

Mindig lebegjen a szemed előtt a cél!

Nem árt, ha világosan látod, hogy mi a célod a weboldaladdal. Mégpedig érdemes ezt a célt a felhasználó szemszögéből megfogalmazni. Például lehet a cél az, hogy egy ingyenes próbára regisztráljon vagy feliratkozzon egy hírlevélre. Tehát ha létrehozol egy új weboldalt vagy csak egy új aloldalt, akkor ne téveszd szem elől azt a célt, amit Te, illetve a felhasználó el akar érni a weboldal használatával.

Ez segíteni fog abban, hogy lássad, mely elemek szükségtelenek, melyek térítik el a felhasználót a céltól. Tehát, ha azt akarod, hogy a látogató letöltsön valamit az oldaladon, akkor ne jeleníts meg például egy másik letöltésre mutató linket azon az oldalon. Használj egyetlen lehetőséget, egyetlen call to action gombot, amit az oldal elejére, közepére helyezel. Ha hosszú az oldalad, akkor megismételheted ugyanezt a CTA-t még néhányszor. És minden mást távolíts el, ami nem segíti hozzá felhasználót, hogy elérje a célt.

Rövidítsd le  szövegeket!

Még 1997-ben a Nielsen Norman Group elvégzett egy kutatást, melyben azt vizsgálták, hogy miként olvasnak az emberek a weben. Mint kiderült, nem olvasnak. Ehelyett csak átfutották a weboldalakat. Ez azt jelenti, hogy a weboldalakon sok az emberek számára felesleges szöveg. Ezeket tehát érdemes csökkenteni. Lehet akár a mondatokat is rövidíteni, az ismétlődéseket megszüntetni.

Emellett persze arra is figyelj, hogy megfelelően tagold a szöveget, használj alcímeket, felsorolásokat, vastagon szedett szavakat, hiszen ezej is mind segíti a szöveg átfutása során segítik a felhasználót. Érdemes használni a fordított piramis struktúrát, vagyis a lényeggel kezdeni a szöveget, és a részleteket későbbre hagyni.

Dobd ki a díszítést!

A szöveg után áttérhetünk a vizuális megoldásokra. Gyakran előforduló probléma szokott lenni az egyes weboldalakon, hogy valaki valamiért úgy gondolja, hogy kell egy kis extra elem, díszítés, hogy igazán feldobja azt. A szándék ugyan méltányolható, az eredmény azonban nem felel meg a várakozásoknak. Jobb megoldás, ha minden felesleges díszítést eltávolítunk a weboldalunkról. És ez még csak nem is fogja rontani a felhasználói élményt. Pont fordítva.

Használd fel újra a designelemeket!

Ha a weboldaladon túl sok a szín, a betűtípus, a stílusvariáció, az csak növeli a zűrzavart. Törekedj a következetességre, és mindig ugyanazokat a designelemeket használd fel újra és újra. A következetesség révén tűnik letisztultnak a weboldalad. Vannak persze ökölszabályok, például, hogy ne használj egy weboldalon többet két-három betűtípusnál, de ugyanez igaz a színekre is. Mert a következetlenség csak a felhasználók zavarodottságához vezet.

Csökkentsd az aloldalak számát!

Mindig akad egy rakás olyan aloldal, melyek szükségtelenek, valamint a sok-sok aloldalunkra szétszórt, de logikailag összetartozó tartalmak egytelen oldalon is összevonhatók. Ha csökken a menüpontok és a linkek száma, megszabadulsz a többszintes elrendezéstől, akkor a felhasználóknak is könnyebb lesz a lényegre fokuszálniuk, hiszen kevesebb lesz a kattintási lehetőség.

Tedd a lényeget a hajtás fölé!

Habár a scrollozási készségünk jelentős mértékben fejlődött az elmúlt években, többek között a mobileszközök jellege miatt is, miközben a sokféle kijelzőméret miatt az hajtás fölött fogalma is egyre puhább, azért még mindig érdemes a legfontosabb dolgokat az oldal felső részén elhelyezni. Oda, ahová mindenféle görgetés nélkül rálátnak azok, akik megérkeznek a weboldalunkra.

Csökkentsd a színek számát!

Érdemes korlátozni a színek számát háromra, mert ez is hozzájárul a weboldal egyszerűsítéséhez és hatékonyabbá tételéhez. Ha ezt egy kicsit kevésnek érzed, akkor se újabb színeket vonj be a designba, hanem színárnyalatokat alkalmazzál, ahol szükségesnek érzed. Érdemes elolvasni színekkel kapcsolatos bejegyzésünket is.

Alkalmazd a 80/20-as szabályt!

A webdesignban a Pareto-elvet úgy fogalmazhatjuk meg, hogy a jelenlegi weboldalunk 20 százaléka hozza az elért eredmények 80 százalékát. Erre a 20 százalékra kell tehát koncentrálnunk erőinket, hogy optimalizáljuk a nyereséget. Miközben persze megszabadulunk a ballasztként rá nehezedő 80 százaléktól, így tovább növelve a 20 százalékos rész hatékonyságát. A cél a javuló konverziós ráta, mely a munka eredményeként fog megmutatkozni. De lássuk bővebben!

A Pareto-elv (80/20-as szabály) a webdesignban

A Pareto-elvet azért is ajánlott alkalmazni az olyan weboldalaknál, melyek már huzamosabb ideje működnek, mert tapasztalataink szerint az idők folyamán szinte minden honlap egyre nagyobb méretűvé válik, egyre több elemet, funkciót próbálnak a tulajdonosaik beléjük zsúfolni. A kezdetben egyszerűnek, gyorsnak induló weboldalak az évek folyamán általában nehézzé és használhatatlanná válnak.

Cél, elemzés, terv

Első körben tehát a 80 százaléknyi fölöslegtől kell megszabadítani weboldalunkat, hogy még jobb teljesítményt érjünk el vele. De melyik legyen ez a 80 százalék? Ehhez először is gondosan meg kell vizsgálni oldalunk jelenlegi teljesítményét, majd tervet készíteni a karcsúsításra. Ez persze némi gondolkodást és munkát jelent, ugyanakkor ennek eredményeként kapunk egy kevesebb törődést igénylő weboldalt, melynek ráadásul jobb lesz a konverziós rátája.

Az elemzés során át kell tekinteni a rendelkezésre álló számokat arról, hogy weboldalunk melyik része teljesít jól. Ebbe beletartozik a formok és az analitika vizsgálata, de eszköztárunkba még a usability tesztek is belekerülhetnek, hogy olyan területeket is elemezhessünk, melyeket az analitikával nem tudunk mérni.

Mielőtt azonban a kutatásba belevágnánk, nem árt tisztázni, hogy pontosan milyen célra irányul a weboldalunk. Majd ennek fényében áttekinteni a felhasználói interakciókat. Ez a cél lehet egy márkának a népszerűsítse, egy termék eladása, vevői feliratkozás, stb. Ezek a marketingből jól ismert célok, melyek közül egy célnak kell alárendelni az oldalt.

Ha ezt a célt kiválasztottuk, akkor ezután az említett elemzések segítségével egy listába össze kell szedni, hogy a weboldalunk mely elemei állnak ezen cél szolgálatában, és melyek nem. Ezután el lehet kezdeni most már ténylegesen is megtisztítani a weboldalt a szükségtelen, és a gyengén teljesítő elemektől.

Az eredmény

A munka eredményeként egy sokkal áramvonalasabb oldalt fogunk kapni. Ez egyszerűbb lesz, gyorsabban betöltődik, könnyebben átlátható, jobban navigálható, így a felhasználói élmény is javul. Ezen tényezők által a látogatók nagyobb százaléka fog a call to action gombunkra kattintani, ami a konverzió növekedését eredményezi. Vagyis, ha szeretnénk, hogy több vevőnk, ügyfelünk, feliratkozónk legyen, akkor tényleg érdemes egy egyszerűbb weboldalt összeraknunk.

Természetesen van kockázata is a dolognak, hiszen jól kell megválasztani azt a 80 százalékot, amit elhagyunk az oldalunkról. Emellett nem szabad túlzásokba sem esni. Nem szabad eltüntetni olyan tartalmakat és funkciókat, melyek fontosak a látogatók számára, és ha ezeket nem kapják meg, akkor nem jutnak el a konverzióig. Ezzel ugyanis rontani fogjuk a weboldalunk teljesítményét. Persze általában nem az a veszély szokott leselkedni a weboldaltulajdonosokra, hogy túl sokat hagynának el. Sokkal inkább az, hogy nincs szívük semmitől sem megszabadulni.

Fontos tehát az alapos elemzés, és nem csak megérzéseinkre hagyatkozva kellene belevágni az egyszerűsítésbe. Érdemes a megvalósítás után tesztelni a weboldal teljesítményét, kísérletezni a különböző megoldásokkal és folyamatosan monitorozni a számokat. Ezek fognak rámutatni arra, hogy valóban a megfelelő elemeket vettük-e ki a weboldalból, és lehet-e még tovább csiszolni rajta. A cél ugyanis nem önmagában egy kisebb méretű oldal, hanem a jobb teljesítmény elérése.

Kategória: Design | Címke:

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.