Keresés
Header Háttér

Webshark Blog

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

2017-08-300 komment

Hogyan alakítsd ki a “vissza a tetejére” gombot a weboldaladon?

A hosszú weboldalakon történő navigációt segítheti az, ha elhelyezel rajtuk egy “vissza a tetejére” gombot. A kialakításának azonban megvannak a maga szabályai. De előbb azt érdemes átgondolni, hogy lenne-e számodra jobb megoldás helyette.

Elsősorban a reszponzív design megjelenése és elterjedése vezetett oda, hogy egyre több lett az egyhasábos, hosszú weboldal-kialakítás a weben. Ezeknél különösen hasznossá vált a “Vissza a tetejére” gomb, melynek használatával az emberek egyetlen kattintással a weboldal tetejére tudtak navigálni. Erre a gyors helyváltoztatásra azért lehet szükség, mert gyakran előfordul, hogy az oldal közepén járva látni akarják a navigációs menüt. Például azért, mert mondjuk új célt keresnek, vagy valami szűrést alkalmaznának, esetleg a keresőmezőt használnák.

Természetesen az operációs rendszerek és a böngészők kínálnak különféle megoldásokat erre, például a home gomb lenyomása, vagy Safariban, iOS-nél az állapotsor megérintése is a lap tetejére repíti a felhasználót. Ezeket a trükköket azonban a legtöbben nem ismerik, és csak görgetni kezdenek nagy lendülettel, ha oda akarnak jutni. Ami persze egy igazán hosszú, vagy akár végtelen oldalnál nem biztos, hogy hatékony. Így szükség van a weboldalak részéről valami nyilvánvalóbb megoldásra. Ez lenne a “Vissza a tetejére” gomb. Na de hogyan érdemes kialakítani ezt? Erre adott jó pár tanácsot a Nielsen Norman Group, illetve felsorolt néhány alternatív lehetőséget.

Hogyan alakítsd ki a “Vissza a tetejére” gombod?

Mikor van szükség ilyen gombra?

Amikor egy weboldal 4 kijelzőnyi méretnél hosszabb, akkor már érdemes használni a “vissza a tetejére” gombot. Ennél rövidebb oldalaknál azért felesleges, mert az embereknek nem okoz fáradtságot visszagörgetni, miközben a gomb megjelenése csak egy zavaró elem a felületen, mely feleslegesen növeli a zsúfoltságot.

Hova érdemes helyezned?

A jobb alsó sarokban kellene megjelennie a gombnak, mert ez az a hely, ahol az emberek számítanak rá és keresni fogják. Ez a pozíció nem zavaró számukra, ugyanakkor jól észrevehető. Ha a gombot a kijelző más részére helyezed, akkor azt kockázatod, hogy nem észre sem veszik.

Kell-e szöveg a gombhoz?

Egy ikon önmagában – például egy felfelé mutató nyíl – nem feltétlenül egyértelmű jelzés az emberek számára. Ráadásul a grafikai megvalósítástól is függ, hogy mennyire tudják értelmezni azt. Szöveg-kiegészítésként a “vissza a tetejére” megteszi, hiszen ez nagyjából leírja a gomb funkcióját, és egyértelművé teszi azt.
Hogyan helyezd el?

A megfelelő kialakítás az egyetlen ragadós gomb. Például ahelyett, hogy az oldal több szakaszának végére elhelyezel egyet-egyet. Utóbbi megoldás a horgonylinkeket (http://blog.webshark.hu/2017/05/18/weblapon-beluli-hivatkozasok/) használó oldalaknál gyakori. Az NNG azonban használhatósági vizsgálatai eredményeként arra jutott, hogy az emberek nem figyelnek fel ezekre az ismétlődő linkekre.

Mekkora legyen?

A gombot érdemes viszonylag kis méretűre venni, hogy ne takarjon ki fontos elemeket a weboldalon. Természetesen mobilon legyen akkora, hogy az embereknek könnyű legyen az érintéssel történő használata. Fontos viszont, hogy vizuálisan kiemelkedjen az oldalból. Ha nagyon elveszik a tartalomban, akkor az emberek nem fogják észrevenni és használni.

Miként jelenjen meg?

Érdemes megfontolni egy késleltetett megjelenést. Tehát csak akkor bukkanjon fel az emberek számára a gomb, ha már jelentős mértékben legörgettek az oldalon, és elképzelhető, hogy vissza akarnak térni a tetejére. A gomb tehát akkor legyen látható, amikor feltételezhetően szükség lehet rá, miközben feleslegesen nem takar ki részeket a tartalomból. Ha viszont megjelent, akkor legyen mozdulatlan az adott pozícióban, mert a mozgásra automatikusan felfigyelnek az emberek, és odavándorol a tekintetük.

Mivel cserélheted le a “vissza a tetejére” gombot?

Navigáció az oldal alján

Azok számára remek megoldás, akik az oldal tetején elhelyezkedő navigációs menühöz térnének vissza, esetleg elindítanának egy keresést a keresőben, amikor elérnek az oldal aljára. Természetesen a megoldás csak akkor működik, ha általában legörgetnek a weboldalad aljára az emberek.

Ragadós menü

Ha nem görgetnek le az aljára, akkor egy ragadós menüt vethetsz be. Ha a görgetéssel az az elsődleges céljuk az embereknek, hogy egy másik aloldalra vagy az oldal egy más részére navigáljanak, akkor egy állandóan jelen lévő menü feleslegessé teszi a “vissza a tetejére” gombot. Ugyanígy megjeleníthetők a ragadós menüben azok a fő funkciók is, melyeket egyébként az oldal tetején érnének el, mint például egy keresés vagy szűrés.

A “Home” gomb

A közösségi oldalakon a Home gomb funkciója általában az, hogy a lap tetejére vigye a felhasználókat. Ezeken az oldalakon az emberek megszokták a használatát, ugyanakkor más weboldalaknál más a funkciója a home vagy kezdőlap gombnak. Általában a weboldalakon az emberek arra számítanak, hogy a kezdőlap gomb a főoldalra viszi őket, nem pedig a lap tetejére. Így ezeknél nem igazán használható.

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.