Honlaptervezés

Honlaptervezés

 

con-szolgaltatasaink

9+1 alapelv a hatékony honlap tervezéshez

A webdesign meglehetősen bonyolult dolog, annak ellenére, hogy nem tűnik annak. Ugyanis az oldalnak egyszerre informatívnak, használhatónak és ugyanakkor kellemesnek, esztétikusnak kell lennie, illetve kommunikálnia kell a márkát és technikai elvárásoknak is megfelelőnek kell lennie.

Szóval, egy igen vékony mezsgyén kell haladni a honlap tervezés folyamata alatt, hogy a fentiek teljesüljenek. Az évek során azt tapasztaltuk, hogy nagy szükség van arra, hogy a megrendelőket ezekről az információkról megfelelően tájékoztassuk, így sok időt és pénzt tudunk megtakarítani. Ezért összeállítottam egy saját, a tapasztalatokon alapuló 10 pontos alapelvet, amit jó, ha betartunk, ha szeretnénk hatékonyan működő weboldalt létrehozni.

1. A hierarchia

A hatékony webdesign mögött talán az egyik legfontosabb alapelv húzódik meg elsőnek: ez a vizuális hierarchia. Ez az a sorrend, amely szerint az emberi szem és agy érzékel, lát.

Webdesign hierarchia

Anélkül, hogy ezekről a négyzetekről bármit is tudnánk, az agyunk azonnal rangsorolja őket. Ezt hívjuk vizuális hierarchiának.
A weboldal egyes részei fontosabbak, mint mások és mi szeretnénk, hogy ezek a fontosabb elemek több figyelmet kapjanak, mint a kevésbé fontosak.  Ha a weboldalnak 10 menüpontja van, akkor mindegyik egyformán fontos? Melyikre szeretnénk, hogy a látogató kattintson? Legyenek a fontosabb linkek felé fokozatosan kiemelve!

A hierarchia nem csak a mérettől függ. Lehet a színnel is kiemelni egy-egy fontosabb elemet, gombot, menüpontot. Lehet a formával és a kontraszttal is játszani, hogy valami a weboldalon nagyobb hangsúlyt kapjon vagy éppen ellenkezőleg.
Pl. a Dreamstime, egy szembetűnőbb színnel igyekszik kiemelni a vásárlás gombot.

 

A cél megállapításával kezdjük
Az üzleti cél alapján rangsoroljuk az oldal elemeit a weboldalon. Ha nincs konkrét cél, akkor nem tudjuk, hogy mit helyezzünk előtérbe, mit emeljünk ki.
Íme, egy példa. Ez egy screenshot a Sportsdirect.com honlapjáról.

Weboldal tervezés célja

A legnagyobb figyelmet a dzseki vonja magára (Engem akarsz!), majd a főcím (Csak ma kapsz meg, ne maradj le!) Utána jön, hogy csak 15 fontba kerül és vedd meg. Azután pedig ott van az is, hogy ez nagyon jó vétel, nem bánod meg (80% off).

2. Az arányok

Az aranymetszés: egy varázslatos szám (1,617), amely mindent arányossá, esztétikussá, a szemnek/érzékelésnek harmonikussá tesz.

Arányok a weboldal készítésekor

Aztán ott van még a Fibonacci-sorozat, ahol minden számot (értéket) az előző kettő összege határoz meg. 0, 1, 1, 2, 3, 5, 8, 13, 21, és így tovább.
Érdekes, hogy van látszólag két különböző téma és mégis pontosan ugyanazt a számot adja ki. Sok művész, építész, szobrász az aranymetszés elvét követve hozta létre alkotásait.

Egy híres példa a Pantheon:

Aranymetszés weblap készítéskor

Lehet, hogy ez a webdesignban is alkalmazható? Naná! Nézzük csak, itt van pl. a Twitter oldala:

Aranymetszés a webdesignban

Kép forrása

3. Hick törvénye

Hick törvénye leegyszerűsítve kimondja: azt, hogy az ember milyen gyorsan hoz meg egy döntést, igen erősen befolyásolja a választási lehetőségek száma.

Ugye ezt éttermekben már számtalanszor tapasztaltuk. A menü hatalmas repertoárja miatt nehéz kiválasztani a vacsorát. Ha csak két lehetőség adott, akkor ugye ez a döntés sokkal rövidebb idő alatt megtörténik. Ez hasonló a Választás Paradoxonjához, miszerint ha egy embernek több választása van, a legkönnyebb, hogy semmit sem választ.

Minél több lehetőséget ad a honlapunk a látogatónak, annál nehezebb lesz azt használni (vagy egyáltalán nem fogja használni). Így annak érdekében, hogy a honlapunkon tett látogatás minél hatékonyabb legyen és a felhasználónak pozitív élményt nyújtson, meg kell szüntetni a döntéseket. Ahhoz, hogy jó webdesignt hozzunk létre, a döntési lehetőségek megszüntetését az egész honlap tervezési folyamaton végig kell vinni.

Manapság, a végtelen választási lehetőségek korában az embereknek szűrőkre van szükségük. Ha nagy mennyiségű terméket igyekszik eladni, akkor jobb szűrőket kell használnia a hatékony döntéshozatal elősegítésére.

Itt van ismét a Sportsdirect oldala. Nagyon jól tették, hogy a bal oldali blokkba egy igen részletes és felhasználóbarát szűrő rendszert helyeztek:

Hick törvénye honlap tervezés során

4. Fitt törvénye – ergonómia

Fitt törvénye szerint, az az idő, ami a cél eléréséhez szükséges, a célhoz vezető út és cél méretének a függvénye. Azaz, minél nagyobb az objektum és minél közelebbinek tűnik számunkra, annál könnyebb használni. Pl. a Spotify kiemeléssel könnyíti meg a Play gomb megnyomását.

Ez természetesen nem azt jelenti, hogy a nagyobb mindig jobb. Az a gomb, ami kitölti a fél képernyőt, nem egy jó megoldás. Ennek belátásához nem szükséges különösebb szakmai ismeret.

Egy kisebb gombbal, sokkal jobban ösztönözhető a kattintás, amennyiben az kap egy 20%-os méretnövekedést, míg egy nagyobb objektum nem rendelkezik azokkal az előnyökkel a használhatóságot illetően, ha az előző megoldást alkalmazzuk.

Ez a szabály érvényes a cél méretére is: a gombok méretének arányosnak kell lennie a használata gyakoriságával. Pl. egy űrlap alján, ha két gomb van, az egyik az „elküld”, a másik a „töröl”, akkor az „elküld” gombot érdemes kiemelni a hatékonyság érdekében.

5. A kétharmados szabály

Nagyon hatásos és erősen javasolt is fotók, képek, illusztrációk használata a weboldalon. A vizuális kommunikáció sokkal gyorsabban hat, mint az írott szó.

Ám nem mindegy, hogy miként rendezzük, vágjuk és komponáljuk őket. Érdemes használni a kétharmados szabályt. A fotót vagy grafikát (pl. egy slider képet) felosztjuk 9 egyenlő részre, függőleges és vízszintes párhuzamos vonalakkal. A fontos, kiemelni szánt elemeket a kompozícióban ezeknek a vonalaknak mentén vagy a csomópontokban helyezzük el. Így sokkal izgalmasabb és egyben hatásosabb designt kapunk.

Lent látni, hogy a jobb oldali kép sokkal érdekesebb, mint a bal. Így érvényesül a kétharmados szabály.

Kétharmados szabály a weboldalkészítésben  Kétharmados szabály a weboldalkészítésben

6. Gestalt design törvénye

A Gestalt pszichológia az elme és az agy működésével foglalkozik. Az elve az, hogy az emberi szem először teljes egészében lát tárgyakat, mielőtt annak részleteit venné észre.

Két példa:

Gestalt törvénye honlap tervezés során  Gestalt design törvénye honlap tervezés során

 
Figyeljük meg, hogy ölt formát a fa, anélkül, hogy az őt alkotó állatokra fókuszálnánk. Hasonlóan a dalmatánál, ahol először a kutyát észleljük, aztán a foltokat.

A kulcs az, hogy az emberek először az egészet látják, és csak aztán a részleteket. Az emberek mindig először az egész weboldalt látják, és csak azután veszik szemügyre a fejlécet, menüt, tartalmat, stb. Mint ahogy a gestaltizmus egyik alapítója kimondja: az egész függetlenül a részektől létezik.

7. A fehér tér és a letisztult design

A fehér tér (más néven a negatív tér) a weboldalon megjelenő grafikák, grafikai elemek közötti teret, a margókat, az oszlopok, hasábok, szövegek és sorok közötti teret jelenti.

Ezek nem tekinthetőek pusztán „üres helynek”, nagyon fontos elemei a designnak. Ezeknek köszönhető, hogy az objektumok léteznek egyáltalán. A fehér tér a hierarchia használatáról szól. Az információ hierarchiájáról, legyenek azok színek vagy képek, formák.

Egy olyan weboldalnál, ami tömve van grafikával, szöveggel, felmerül annak a kockázata, hogy zsúfolt lesz és ezáltal nehezen olvasható, nem lesz informatív és nem lehet hatékonyan használni. Ezért az egyszerű honlapok sokkal jobbak.

Ha elegendő fehér terünk van, az letisztulttá teszi az oldalunkat. A letisztult design alapvetően, világosan kommunikálja az üzenetet, de ez nem jelenti azt, hogy kevesebb is a tartalma. A letisztult honlap tervezés azt jelenti, hogy a lehető legjobban használjuk (ki) a tereket, hogy bölcsen használva azokat, világos és érthető weboldalt hozzunk létre. A célunk az, hogy a látogató nagyon gyorsan megtalálja a keresett információt.

Pl. a GROW oldala nagyon szépen használja a tereket, ezáltal letisztult és átlátható.

Letisztult weboldal design

A terek kifinomult használata megkönnyíti, hogy a látogató a fő üzenetre, a képi világra és a tartalmi szövegre összpontosítson. A fehér terek nagyban elősegítik, hogy a weboldal elegáns legyen, hogy kifinomult összhatást nyújtson.

8. A használhatóság

A webdesign nem csak a szép képeket jelenti. Egy oldalon nagyon sok információ van egymással kölcsönhatásban. Mi, tervezők, igyekszünk ezeket összhangba hozni, összefogni és egy organikus egészet kreálni mindezekből. Ettől lesz egy honlap használható.

Már tárgyaltuk néhány megközelítésből a használhatóságot. Még kitérnék pár fontos dologra:

 – „Ragadós szabványok”
Vannak olyan dolgok, amiket az emberek elvárnak és kézenfekvő számukra. Ilyen például az aláhúzás. Az emberek ilyenkor egy linket várnak a weboldalon. Ha ettől eltérünk, akkor nagy az esélye annak, hogy nem fog jól működni. Persze fel lehet rúgni a szabályokat (legtöbbször így születnek korszakalkotó megoldások), de a legtöbb esetben azt érdemes használni, amit a látogató elvár.

– Gondolkodj úgy, mint egy felhasználó
Amikor egy felhasználó jön az oldaladra, mit is akar csinálni? Listázzuk ki, hogy milyen különböző interakciókat végezhet a weboldalon. Hogyan lehet ezekre ösztönözni őket, milyen könnyű ezt megvalósítani ezt számunkra? Ez jelentheti a nagyon gyakori tevékenységeket, pl. „kosárba tesz”, „kérjen ajánlatot” stb., vagy még azt is, hogy a kereső mező mennyire elérhető. Ha ezeknek a végére jártunk, akkor megláthatjuk, hogy melyek azok az eszközök, gombok, funkciók, ikonok stb., amelyek nem felhasználóbarát módon működnek, és melyek azok, amelyek támogatják azt, hogy a weboldalunkra látogatók elérjék és megkapják azt, amiért a honlapunkra érkeztek.

9. Összhang és egység

Az összhang azt jelenti, hogy minden összeillik, harmonikus képet, érzetet ad. Értem ez alatt a rovatok méretét, a betűtípust, a színeket, a menü és a gombok stílusát, a távolságokat, a tereket, a képeket stb. Mindezek egy komplett egészet kell, hogy képezzenek az oldalon és a további oldalakon is.

A profi oldal következetes. A következetlenségek a designban olyanok, mint a helyesírási hibák egy szövegben. Ezek a hibák az értelmezhetőséget rontják. Bármilyen is legyen a design, ha a következetesség útján haladva összhangot és egységet teremtünk, akkor ezek feldobják az oldalt minőségileg.

A legegyszerűbb módja a következetes tervezésnek az, hogy tartsuk be az elhatározásainkat. Természetesen egy nagyobb projekt esetében, amikor egy nagyobb terjedelmű weboldalt készítünk, akkor a honlap tervezési folyamat alatt, lehet, hogy megváltozik az eredeti koncepció és pl. a végére már más stílusú gombokat használunk. Ilyenkor vissza kell menni az eddig elkészült oldalakhoz és mindent átalakítani az új stílusra.

Ilyen volt a legutóbbi munkánk is, ahol a kiindulás egy igen trendkövető, letisztult oldal volt, de aztán a megrendelővel közösen egy robosztus, masszív és nagyon szakmai oldalt hozunk létre. Hamarosan látható lesz a referenciák között.

+1. Tudatosság

Az egység, nálunk a GuruStudio-nál, igen fontos szempont. Egy honlap tervezésénél tudatosan, a logót és az egyéb megadott arculati elemeket, grafikai motívumokat vesszük kiindulási alapnak. Erre építünk minden továbbit. A logó szín- és formavilága adja meg a weboldal alapstílusát. Ehhez adódik hozzá a megrendelő által adott instrukció, az esetleges elképzelései az áhított oldalról. Mi pedig még hozzáadjuk a saját impulzusainkat, intuíciónkat, és így, egy fúzió folytán jön létre a webdesign, ami, a tudatos honlap tervezés által egy harmonikus egysége a használhatóságnak és letisztultságnak.

 

Comments are closed