One pager webdesign tippek és trükkök

2019-03-14

Mi az a one pager webdesign?

A one pager weboldalak defíniciója viszonylag egyszerű: egy olyan weboldal típust értünk alatta, amely mindössze egy lapból, ha úgy tetszik nyitólapból áll és nincsenek aloldalai. Mivel az összes tartalom a nyitólapon található, ezért a navigáció az oldal különböző részeire történő ugrást jelenti.

Mikor használj one pager webdesign-t?

A one pager weboldalak – mivel alapvetően az utóbbi években felkapottak – ezért reszponzívak és mobilon magasabb felhasználói élményt nyújtanak, mint hagyományos társaik, viszont SEO szempontból nem teljesítenek olyan jól. Az egyes tartalmak ugyanazon az oldalon vannak, ezért nem tudsz külön URL-t társítani hozzájuk, nem tudsz egyedi META adatokat megadni nekik, ami negatívan fogja befolyásolni az organikus forgalmukat. Arról nem is beszélve, hogy a látogatottsági statisztkákban sem tudod mérni őket olyan hatékonyan, mint a multi-page site-okat.

A one pager weboldalaknak egyértelműen megfogalmazhatók az előnyei és a hátrányai is. Egyrészt a designerek-nek nagyobb szabadságot adnak a layout és a vizuális effektusok megtervezése során, másrészt viszont azok a látogatók, akik nem szeretnek sokat görgetni, nem fogják szimpatikusnak találni az ilyen típusú oldalakat.

Az előnyökön és hátrányokon hosszasan lehetne vitázni, de nincs kétség afelől, hogy mielőtt eldöntöd, hogy one pager oldalt készítesz, számba kell venned, hogy a célközönséged és az üzleted szempontjából előnyös választás lesz-e hosszú távon vagy sem.

A one pager weboldakat előszeretettel alkalmazzák az alábbi területeken:

• személyes bemutatkozó weboldalak
• portfólió weboldalak
• önéletrajzok
• események, rendezvények, konferenciák
• landing page-ek
• online brosúrák
• egy-termék weboldalak
• különleges vizuális megjelenést igénylő projektek

Mikor ne használj one pager design szerkezetet?

A one pager design nem neked való, ha …

• weboldalad túl sok menüpontból áll
• nagyon sok szöveges és egyéb tartalmad van
• sok termékből álló webshopod van

One pager webdesign tippek és trükkök

Tervezz meg egy logikus szerkezetet

Ahhoz, hogy a látogató dolgát megkönnyítsd, és gyorsan be tudja fogadni az oldaladon tárolt információkat, a tartalmat logikus szerkezetbe kell rendezned. Gyűjts össze az össze információt, amit az oldalon meg szeretnél jeleníteni és utána tördeld fel részekre aszerint, hogy mi az ami logikailag összetartozik. Utána pedig határozd meg ezen részek sorrendjét gondolva arra, hogy a látogató milyen sorrendben fog végighaladni rajtuk.

Van még egy dolog, amit figyelembe kell venned, ez pedig az oldal teteje. Itt priorizáld azt az információt, amely az oldal célját mutatja be. Tehát amint megérkezik a látogató az oldalra, azonnal tisztában legyen vele, hogy miről szól, mi a célja.

Bontsd a szöveget szekciókra

A one pager webdesign weboldalakon jellemzően nem szoktak sok szöveget megjeleníteni. Ez nem az az oldal típus, ahol több oldalas esettanulmányokat vagy cikkeket tudnál megjeleníteni. A szövegeid legyenek rövidek és lényegre törőek és bontsd őket jól elkülöníthető szekciókra, amelyek irányítják a látogató figyelmét és végigvezető őket az oldalon.

Szentelj megfelelő figyelmet a háttérre

Az első dolog, ami egy one pager oldalon szemet szúr, az a háttér. A több oldalból álló site-oknál jellemzően semleges, világos színű hátteret alkalmazunk az olvashatóság megkönnyítése valamint a szerkezet adottságai miatt. A one pager oldalaknál viszont a háttér nagyon szerepet kap az arculat illetve a megjelenés kialakításában, ugyanakkor itt is fontos, hogy a tartalmak könnyen olvashatók legyenek és ne olvadjanak bele a háttérbe. Javasolt kerülni az animációk, videók használatát a háttérben.

Alakíts ki határozott vizuális hierarchiát

A látogatói viselkedés elemzések során egyértelművé vált, hogy nagyobb mennyiségű szöveges tartalmak esetén a szem F-mintázat alapján böngészi végig a tartalmat, míg kevesebb szöveg esetén inkább a Z-minta a gyakoribb.

A one pager weboldalad esetében az egyes szekciókat próbáld meg vegyesen ezen két minta alapján felépíteni annak érdekében, hogy változatos legyen az oldal struktúra és a látogató ne találja egyhangúnak a szerkezetet.

Használj parallax effektust

A weboldalad jellege és konverziós célja fogja meghatározni, hogy érdemes-e parallax effektekben gondolkodnod. A tervezés során vedd figyelembe, hogy …

• mennyi idő alatt kell betöltődnie az oldalnak. A parallax effektek nagyobb képekkel, videókkal dolgoznak, ami egyértelműen rontja a beltöltődés sebességét.
• mennyire fontos a felhasználói élmény. Célközönségtől függ, hogy a parallax mozgásokat mennyire tartják esztétikusnak vagy éppen zavarónak

Hátrányai ellenére a parallax mozgások előszeretettel használatosak a one pager weboldalakon, mert igazán látványos megjelenést lehet kialakítani segítségükkel és a hosszú görgetés némiképp oldható a vizuális trükkökkel.

Használj alternatív navigációs megoldásokat

A one pager weboldalak jellegüknél fogva sok görgetést igényelnek, ami sok felhasználóban kelti azt az érzést, hogy nem is pontosan tudják, hogy éppen hol tartanak az oldalon. Ha weboldalad nagyon sok tartalmi elemből áll össze és hosszú görgetést igényel, akkor érdemes megfontolnod néhány alternatív navigációs megoldás bevezetését. Ezek a navigációs elemek folyamatosan elérhetők minden szekcióban és lehetővé teszik, hogy lásd, éppen hol tartasz az oldalon, mi a következő szekció. Ezt az alternatív navigációt még ki lehet bővíteni egy lap aljára vagy lap tetejére történő ugrással, így aztán végképp biztonságban érezheti majd magát a látogató.

Használj hangsúlyos cselekvésre ösztönzéseket (CTA-k)

A one pager weboldalak ideálisak a hangsúlyos, jól pozícionált CTA-k elhelyezésére, amelyek segítségével magas konverziót lehet elérni, éppen ezért ne felejts el őket használni.

Ha weboldalad egy meghatározott célból készült, pl. kapcsolatfelvétel, termék vásárlás, konferenciára történő regisztráció, szoftver letöltést, hírlevél feliratkozás … stb, akkor az egész design-t ezen célnak történő megfelelés köré kell tervezni. Legyen a CTA vagyis a cselekvésre történő felhívás az oldaladon egyértelmű és hangsúlyos és nem árt az oldalon többször is megjeleníteni, hogy garantáltan ne kerülje el a látogatók figyelmét.

Törekedj a magas felhasználói élményre.

Felhasználói élmény alatt értjük az összes olyan dolgot, amely a látogató véleményét befolyásolja a weboldallal kapcsolatban. Vedd sorra ezeket a szempontokat és törekedj arra, hogy one pager weboldad ne valami nehezen kezelhető, nehezen befogadható műalkotás legyen, hanem megvalósítsa azokat az üzleti célokat, amelyek életre hívták.

Teszteld az oldalt mobilon.

A reszponzívitás vagyis az eszköz független megjelenés manapság már kötelező és ez alól a one pager weboldalak sem kivételek. Sok olyan kivételesen színvonalas megjelenésű one pager oldallal találkozom, ahol a tervezők beleadtak apait-anyait a desktop megjelenésbe, de láthatóan hanyagolták azt a szempontot, hogy a többség mobilon fogja megtekinteni az oldalt. Ne kerülj ebbe a csapdába, élesítés előtt alaposan teszteld mobilon is az oldalad.

A kapcsolatfelvétel mindig legyen szem előtt

Az oldal elhagyások egyik elsődleges indoka még mindig az, hogy a látogató nem találja a kapcsolat felvételi lehetőséget. Ezen problémák elkerülése érdekében tervezd meg az oldalad úgy, hogy ha a látogató kapcsolatba akar lépni veled, akkor ne kelljen hosszan keresgélnie és mindezt a lehető legtöbb csatornán meg is tudja tenni.

Javasolt a telefonszám, e-mail cím, közösségi média elérhetőségeket egy külön blokkban elhelyezni az oldalon és szükség esetén több formában is megismételni.

Jelenítsd meg a közösségi média csatornáidat az oldalon

Egy one pager weboldalon is fontos, hogy a látogató megismerje milyen közösségi média oldalakon vagy jelen és kedvenc csatornáin követni tudjon téged illetve kapcsolatot tudjon felvenni veled.  Előre soha nem tudhatod, hogy az adott látogatónak a LinkedIN, az email, a Facebook Messenger vagy a telefon lesz a szimpatikusabb a kapcsolatfelvételre. Add meg az összes elérhetőséged egy közösségi média sávon, ami még plusz bizalomépítő jelleget is ad az oldaladhoz.

Legyen egy informatív lábléc az oldal alján

A látogatók többsége tisztában van azzal, hogy a legfontosabb információk az oldal alján a láblécben megismétlésre kerülnek, tehát ha valamit nem találnak, akkor gyorsan oda görgetnek. Ne okozz csalódást a látogatóknak azzal, hogy oldaladnak nincs lábléce vagy ott csak egy Copyright felirat található. Amit egy láblécben érdemes feltüntetni:

• Cégnév
• Elérhetőségek: cím, telefonszám
• Nyitvatartás
• Közösségi média elérhetőségek
• Térkép
• Jogi nyilatkozat, Adatvédelmi nyilatkozat
• Impresszum