Keresés
Header Háttér

Webshark Blog

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

2019-12-110 komment

Milyen egy jó webdesign?

Tartalomjegyzék
Bővített tartalomjegyzék

Mitől lesz jó egy weboldal, egy app, vagy bármely termék, melynek felhasználói felülete van? A válasz rendkívül széles körű lehet, ahogy a jó weboldalról szóló anyagunkban a konkrétumokat tekintve már megpróbáltuk körüljárni egy irányból. Most azonban egy kicsit máshonnan, az alapelvek felől közelítünk a jó webdesign felé. (Frissítés, 2020.10.29. – Egy új fejezettel bővítettünk: A jó webdesign intuitív)

Melyek egy jó webdesign alapelvei?

A következő alapelvek azok, melyek figyelembe vételével hatékony felhasználói felületek készíthetők. Mivel elvekről van szó, így alkalmazhatók mobileszközöknél, weboldalaknál vagy akár viselhető eszközöknél.

1. Felfedezhetőség

Ha a felhasználók nem találnak meg valamilyen információ vagy funkciót, az olyan, mintha nem létezne. Ezért minden fontos információnak és funkciónak láthatónak és könnyen megtalálhatónak kell lennie.

Ne rejtsd el az összetettségét! Ha megpróbálod takargatni egy felület összetettségét, azzal csak bonyolítod a helyzetet. Minden olyan elemnek, mely szükséges a sikeres ember-gép interakcióhoz (tartalom, menü, stb.) láthatónak kell lennie.

Próbáld mérsékelni a tanulási görbét a fokozatossággal! Lehet, hogy a haladó lehetőségeket első körben nem kell megmutatni a felhasználóknak, csak akkor, ha már valóban szükségük van rá.

Vezesd a felhasználókat a haladó funkciók felé! Ne várj arra, hogy az emberek megtalálnak majd valamit, ehelyett mutasd meg nekik!

Hagyd meg számukra a döntés szabadságát! Tedd lehetővé, hogy bizonyos dolgokat megváltoztassanak, például egy app betűméretét. Ezzel arra ösztönzöd őket, hogy felfedezzék a terméket.

2. Hatékonyság

Az interakciós költségek csökkenthetők azáltal, hogy minimalizálod a felhasználói bevitelt és minden fontos információt az emberek elé helyezel.

Legyen összhangban a felhasználói várakozásokkal! Teljesen mindegy, hogy mennyire logikusan rendezed el a tartalmat, vagy hogy milyen jól néz ki, az számít, hogy megfelel-e a felhasználói várakozásoknak. Ha az emberek arra számítanak, hogy máshogy néz ki, máshogy működik, akkor az gondot fog jelenteni. Mindig olyan terméket készíts, amit könnyű megérteni, megtanulni. Ideális esetben egy terméknek nincs tanulási görbéje.

Használd az alapértelmezéseket okosan! Egy felhasználói felületnél nem feltétlenül lehet mindig beállítani valamilyen alapértelmezést. Ha nem tudod pontosan meghatározni, hogy melyik lehetőség legyen alapértelmezett, akkor nem muszáj beállítani ilyet.

Jelenítsd meg a rendszerállapotot! A felhasználóknak nem lenne szabad keresgélniük a rendszerinformációkat. Figyelj a felhasználókra, és tájékoztasd őket arról, hogy a rendszer éppen mit csinál.

Előrelátó designt készíts! Próbáld előrejelezni a felhasználói szükségleteket és igényeket. Legyél tisztában azzal, hogy a felhasználók miként lépnek kapcsolatba a termékkel, és biztosítsd minden lépéshez a szükséges információkat és eszközöket.

3. Következetesség

Ez egyfelől vizuális következetességet jelent, másfelől következetességet az interakcióknál.

Legyen következetes a platform: a terméket a platform irányelvekkel összhangban készítsd el!

Belső következetesség: hozd létre a saját vizuális és interakciós nyelvedet, melyet mindenhol alkalmazz!

Termékcsaládok közötti következetesség: ha termékcsaládot hozol létre, akkor ezeknek valamilyen közös megjelenést kell adni.

Kacsa teszt: ha kacsának néz ki, úgy úszik, mint egy kacsa, hápog, mint egy kacsa, akkor az valószínűleg kacsa. Ez azt jelenti, hogy viszont azoknak az elemeknek, melyek máshogy reagálnak, máshogy kell kinézniük.

4. Barátságos felület

Add át az irányítás érzését a felhasználóknak! Az emberek gyorsan tanulnak és gyorsan profi használók lesznek, amikor kényelmes környezetben dolgoznak.

Ezért védd a felhasználók munkáját. Biztosítsd azt, hogy soha ne veszítsék el az adataikat!

Segítő hibaüzeneteket küldj! Olyan hibaüzeneteket használj, melyek segítenek a felhasználóknak kijavítani a hibákat.

Legyenek visszafordíthatók a cselekedetek. Gondoskodj annak lehetőségéről, hogy a felhasználók bármilyen cselekvést bármikor vissza tudjanak fordítani.

5. Használhatósági tesztek alkalmazása

Végezz hatékony felhasználói teszteket, melyek biztosítják a cél elérését. Teszteld a tanulhatóságot, az elégedettséget, a hatékonyságot.

6. Kontraszt

A kontraszt elve egy másik nagyon gyakran használt elv, mely a weboldal egyes részeit kiemelkedővé teszi a felhasználók számára. A kontraszt elve a vizuálisan eltérő elemek egymáshoz viszonyított helyzetére vonatkozik, azt fejezve ki, hogy az elemek különböznek egymástól.

A kontraszttal teremtünk különbözőséget a szem számára két elem vagy elemek csoportjai között annak érdekében, hogy eltérő mivoltukat kihangsúlyozzuk. 

A kontraszt elve a leggyakrabban a színeken keresztül jelenik meg a designban. A designerek gyakran túlságosan is lecsökkentik a kontrasztot a háttér és a szöveg között annak érdekében, hogy annak lényegtelenségét megmutassák. Ezzel azonban sokszor nagymértékben lerontják a szöveg olvashatóságát. 

Habár a felhasználók általában nem panaszkodnak a kontraszt miatt, mégis meghatározza a vásárlási döntésüket az, hogy milyen színű a háttér és milyen színűek rajta a betűk. Egy rossz kombináció fárasztja a szemet, de ezt elsőre nagyon nehéz észrevenni.

Indulásnak a legjobb, ha fehér háttéren fekete betűket használsz. Egy világos szürke, egy zöld vagy egy sárga szín használata csak elriasztaná az embereket a weboldaladról. Ha azt tapasztalod, hogy a felhasználóidnak nehezen megy a szövegek elolvasása, akkor gondolj arra, hogy a probléma a betűk vagy a háttér színével lehet.

7. A fontos tartalmakat előre tedd!

Az elrendezés a legfontosabb információ a felhasználók számára. Ha nem megfelelő a tartalmak sorrendje, akkor az rossz benyomást kelt azokban, akik először látogatnak az oldaladra. Az elrendezés alapvetően két elemből áll: szövegből és képekből.

Általában jó megoldás, ha kiváló minőségű képeket használsz a weboldaladon, ugyanakkor arra is figyelned kell, hogy a megfelelő tartalmat helyezd az emberek elé. A lényeget az embereknek már első pillantásra észre kellene venniük.

A cégedről alkotott képet alapvetően határozza meg az, hogy miként jeleníted meg az emberek számára a tartalmakat a weboldaladon. Ez alapján alakul ki valamilyen benyomás bennük a márkádról. Ha a tartalom egyszerű és előtérbe van helyezve, akkor az emberek szívesen kötnek üzletet veled. De ha valami összetett szöveggel támadod meg őket mindjárt az elején, vagy nem értik, hogy mit kínálsz nekik, akkor az embereknek nehéz lesz kapcsolódniuk ahhoz, amit csinálsz.

8. Figyelj a helyes elrendezésre!

A weboldalad forgalmát úgy növelheted a leggyorsabban, ha az adatokat a legegyszerűbb módon rendezed el a weboldaladon. Ehhez érdemes rácsszerkezetet használni. Egy rács mentén történő elrendezés az egyik legkönnyebb és leggyorsabb megoldás, amivel javíthatod a weboldalad használhatóságát, valamint gyorsabbá is teheted vele az oldalt. Az elrendezés emellett nagymértékben meghatározza a weboldalad általános megjelenését.

9. Használj megfelelő betűméretet!

Habár nincs semmiféle ökölszabály arra, hogy mekkora betűket kellene használnod a weboldaladon, érdemes abból kiindulnod, hogy ne legyen kisebb 12 pontosnál a kenyérszöveg, illetve 14 pontosnál a címsor. Ha nagyobb betűket használsz, könnyebb lesz elolvasni a weboldalad tartalmát.

Persze nem csak a betűméret számít az olvashatóságnál, hanem a negatív tér is. Sokan erről elfeledkeznek, pedig, ha kis sortávolságokat használsz, akkor túlságosan bonyolultnak tűik majd a tartalmad. A nagyobb sortávolsággal elválasztott sorok viszont rendezettebbnek tűnnek, áradásul könnyebben olvashatóak.

10. Alkalmazz intuitív keresőmezőt!

A weboldalad célja nyilván az, hogy eladj valamit. És ha azt adod a látogatóknak, amit keresnek, akkor jobban fognak emlékezni rád, és később is visszatérnek. Egy keresőbox is hozzájárul a könnyű használhatósághoz, mégis sokan nem törődnek vele. pedig érdemes “minél intelligensebbé” tenni, mely a korábbi keresések alapján tesz javaslatokat a felhasználók számára.

11. Legyen kényelmes a használat!

Az nem elég, ha egy weboldal szép, fontos, hogy kényelmes legyen a használata is. Mitől lesz kényelmes egy weboldal használata? Attól, hogy az emberek könnyen megtalálják rajta azt, amit keresnek. Például egy jó designnál a kosár gomb annyira előtérbe van helyezve, hogy a látogatóknak nem kell keresgélniük, hanem egyből megtalálják

12. Méretarány

Ezt az alapelvet gyakran használjuk, hiszen majdnem minden vizuális design számára előnyös. A méretarány elve a relatív méretek használatára utal, melyek jelezni tudják a fontosságot egy adott kompozíción belül. 

Tehát, ezt az alapelvet akkor használjuk helyesen, ha a legfontosabb elemek a legnagyobbak, illetve minél kevésbé fontos valami, az annál kisebb. Ennek az elvnek az alapja az, hogy ha valami nagy méretű, akkor azt könnyebben észrevesszük.

Egy vizuálisan vonzó design többnyire legfeljebb csak három különböző méretet használ. A különböző méretű elemekmegteremtik a vizuális hierarchia alapjait is.  

13. Vizuális hierarchia

A jó vizuális hierarchiájú elrendezést a felhasználók könnyebben megértik. A vizuális hierarchia arra utal, hogy az elrendezés vezeti a tekintetet a weboldalon, mégpedig a lényegesebbektől a kevésbé fontosak felé. 

A vizuális hierarchia megteremthető a méretarányok, az értékek, a színek, az elhelyezések, a tér nagysága és sok más egyéb jelzés által. Ha egy weboldalon nehezen tudod megállapítani, hogy hova kellene nézned, akkor valószínűleg hiányzik a megfelelő vizuális hierarchia az oldalon. 

A világos vizuális hierarchia megteremtéséhez, 2-3 betűtípus-méretet érdemes használni, melyek jelzik a felhasználónak, hogy mely tartalmak a legfontosabbak. Emellett használhatsz élénkebb színeket a fontosabb elemeknél, míg a visszafogottabb színeket meghagyod a kevésbé fontosak számára. 

A méretek ugyancsak segítenek a vizuális hierarchia kialakításában: ökölszabályként érdemes kicsi, közepes és nagy elemeket használni a designban. 

14. Egyensúly

Az egyensúly elve arról szól, hogy mennyire kiegyensúlyozottan vannak elrendezve és méretezve a desgin elemei. Egyensúly akkor jelenik meg, amikor egy képzeletbeli, középen húzódó tengely mindkét oldalán megjelenő elemek egyenlő súlyúak. Ebből a szempontból nem csak az elemek száma fontos, hanem az általuk elfoglalt terület is. 

A képzeletbeli tengely a referenciapont, melynek mentén elrendezheted az elemeket. Egy kiegyensúlyozott designban egyetlen terület sem vonja annyira magára annyira a figyelmet, hogy a többi területet ne vedd észre, annak ellenére, hogy bizonyos elemeknek nagyobb a vizuális súlya és sokkal inkább fókuszpontban vannak.

Milyen egyensúlyokról beszélhetünk? Szimmetrikus, aszimmetrikus és sugárirányú egyensúly. Ezt most nem részletezzük, korábban itt írtunk róla.

A lényeg, hogy olyan egyensúlyt kell választani, ami összhangban van azzal az érzéssel, amelyet közvetíteni szeretnél. Az aszimmetrikus egyensúly dinamikus hatást kelt, energia és mozgás érzetét adja át. A szimmetria ezzel szemben csendes és statikus, a sugárirányú pedig mindig a középpont felé vezeti a tekintetet. 

15. Gestalt elvek

Ezek olyan elvek, melyeket a 20. század elején fogalmaztak meg a Gestalt pszichológusai. A Gestalt elvek arról szólnak, hogy az emberek miként egyszerűsítik és rendszerezik az összetett képeket, melyek több elemet is tartalmaznak. A tudatalatti rendszerezés révén a részek egy szervezett egésszé állnak össze, és megszűnnek különálló részeknek lenni. A Gestalt elvek tehát arra mutatnak rá, hogy hajlamosak vagyunk az egészet figyelembe venni az egyedi elemek helyett.

Gestalt elvekből több is létezik, így a hasonlóság, a folytonosság, a közelség, alak és forma, szimmetria és rend. Különösen fontos ezek közül a közelség elve, mely arról szól, hogy az egymáshoz közel elhelyezkedő elemeket egy csoport tagjainak tekintjük. 

Miért fontos ezeket az elveket figyelembe venni?

  • Alkalmazásuk javítja a használhatóságot – az imént felsorolt vizuális design elvek betartása esetén könnyebben használhatóvá válik a weboldal. 
  • Pozitív érzéseket vált ki a design – az elvek használatának eredményeként a designerek olyan felhasználói felületet tudnak létrehozni, mely jól néz ki, így pedig kellemes érzéseket vált ki a felhasználóból.
  • Figyelembe vételük révén erősödik a márka – egy erős vizuális rendszer fokozza a felhasználói bizalmat és érdeklődést a termék iránt, ami erősíti a márkát.

Összességében tehát elmondható, hogy egy weboldal designja akkor lesz jó, ha egyszerű a használata, és a felhasználóknak nem kell sokat gondolkodniuk, hogy mit kínál nekik a weboldal és mit tegyenek rajta. Ennek érdekében a weboldalt tedd olyan egyszerűvé amennyire csak lehet. Ha úgy érzed, hogy ez sikerült, akkor kérdezd meg róla a felhasználóid is, mert lehet, hogy ők másként látják, és tudnak még olyan javaslatokat tenni, amire Te nem is gondoltál korábban.

A jó webdesign a célra összpontosít

Mielőtt nekiállnál a weboldalad tervezésének, tudnod kell, hogy mi a célod vele. Ha már tisztában vagy a célokkal, akkor összpontosíthatsz csak a designra.

A ’90-es évek weboldalainál még nem igazán számított a hatékonyság. Mindenki csak annyit akart, hogy legyen szép a weboldala, kapjon helyett rajta néhány jópofa, egyedi funkció, amire felfigyelnek az emberek. Látszólag egyébként a felhasználók is ezt akarták, nem nagyon zavartak bele képbe a marketing szempontok.

A “szép weboldalak” kora véget ért

A webdesign ennek folyományaként annyiból állt, hogy az ügyféllel folytatott beszélgetés után a designer leült a kedvenc pixel-szerkesztője elé, és összedobott pár különböző vázlatot a weboldal kinézetéről. Lehetőleg olyanokat, melyek jelentős mértékben eltértek egymástól. Egy kifejezetten ronda darab biztos, hogy került közéjük, mivel az értékesítés pszichológiája szerint az emberek annál könnyebben hoznak meg döntéseket, minél nagyobb a különbség a lehetőségek között. Ahhoz képest persze, hogy csak a vizualitás volt fontos, egészen elképesztő weboldalak születtek akkoriban.

A “szép weboldalak” korszakán azonban még mindig nem jutottunk túl. Ha körülnézel a weben, továbbra is azt láthatod, hogy van egy rakás designer, aki változatlanul az előbb vázolt elvet követi a weboldaltervezésnél. Annak ellenére, hogy a webdesign mára egy egészen más irányba fordult. A szépség még mindig fontos tényező a webdesignban, sőt van, akik számára csak ez létezik, elég, ha a Dribbble-t megnézed. A szépség persze fontos lehet a webdesignban, azonban nem elsődleges és nem egyetlen célként.

Az ezeken látható terveknek soha nem az a céljuk, hogy pénzt keressen a weboldalával annak tulajdonosa. Ezek mindig csak a szépségről szólnak, vagy olyan egyéni szempontok határozzák meg őket, mint mondjuk a tökéletes reszponzivitás kialakítása. De nemcsak itt van gond. A különböző template-ek és témák készítői sem nagyon foglalkoznak mással. Habár őket sokszor még a kinézet sem érdekli. Az elsődleges céljuk a nyereség, az a pénz, amit a template hoz nekik.

Mára a cél lett a legfontosabb

Ha azt akarjuk, hogy a cél mindennél fontosabb tényező legyen, akkor még időben meg kell határozni. Ez nem azt jelenti, hogy majd a harmadik vázlat után, hanem azt, hogy még az első előtt. Ha már kigondoltad a weboldalad célját, akkor hamar rájössz, hogy a designnak csak alárendelt szerepe lehet a céllal szemben. Az nem működik, hogy elkészül valamilyen weboldal, majd reménykedsz, hogy eléred vele a már meghatározott céljaidat.

Tehát az első kérdés, amit egy új weboldal tervezésekor vagy egy meglévő oldal redesignja előtt fel kell tenned magadnak az, hogy milyen célt akarsz elérni a weboldallal? (Illetve a designer szemszögéből az, hogy milyen célt akar elérni vele az ügyfél?) A termékét vagy szolgáltatását akarja eladni? Olvasókat akar szerezni? A feliratkozói számát szeretné gyarapítani? Tájékoztatni akarja az embereket a tevékenységéről? Vagy esetleg csak szórakoztatná őket?

Bármi is legyen a weboldal célja, tisztában kell lenni vele. Nem csak a design függ ettől, hanem a tartalmat is az határozza meg, hogy mit akar a weboldal elérni. Mert, hogy írod meg egy cselekvésre ösztönző link szövegét (call to action), ha nem tudod, hogy mire akarod biztatni az embereket?

Nyilván nem mindenki van tisztában a céljaival. Nagyon sok olyan leendő weboldaltulajdonos van, aki nem gondolkodik el a célokon, csak egy weboldalt szeretne. Pedig a célt mindenképpen meg kell határozni a weboldal-tervezés előtt, hiszen csak ekkor tudod megállapítani, hogy a weboldal sikeres-e vagy sem.

A cél akár a célközönség elérése is lehet

A cél szinte minden esetben lehet akár annyi is – ami egyébként minden weboldalnál potenciális célként merül fel -, hogy összekapcsold a céget az ügyfeleiddel vagy közönségeddel. Tehát a kérdés itt az, hogy mi a leghatékonyabb megoldás ennek a kapcsolatnak a kialakítására?

Ugyanakkor ezt a kérdést csak akkor tudod megválaszolni, ha ismered a közönséged, illetve ismered a konkurenciát, és hogy ők miként közelítik meg ezt a problémát. Mit csinálunk, mit teszünk az ügyfelekért, és hogyan tesszük ezt? Honnan tudjuk, hogy elértük a célt? Mit jelent a siker ezen keretek között? A válaszok fogják meghatározni a projekt leírását.

Ezek után következhet csak maga a tervezés. Ami fontos, hogy a célközönség ismeretén alapuljon a design. Például megállapítod, hogy a célközönséged kizárólag 60 éven felüliekből áll. Nyilván ekkor a könnyen olvasható betűtípusok kerülnek az oldalra, megnövelt méretben. De ha pont az ellentéte derül ki, az is kiemelt figyelmet érdemel a tervezés során.

Viszont, csak akkor tudod ezeket a tényezőket figyelembe venni a design során, ha tudod, hogy kik fogják látogatni a weboldalad. Az ügyfelek pedig csak akkor fogják elérni a céljukat, ha Neked sikerül elérned őket. És csak ebben az esetben mondhatod azt majd, hogy a weboldalad sikeres.

A jó webdesign láthatatlan

Habár sokszor ejtünk szót új, látványos, néha meglepő webdesign-trendekről, valójában a jó webdesing nem arról szól, hogy a weboldalunkon be kell mutatnunk valamilyen vizuális csodát, vagy be kell bizonyítanunk, hogy mennyire jól ismerjük a legfrissebb megoldásokat, mennyire vagyunk trendik. A jó webdesign ugyanis láthatatlan.

Azt már sokszor elmondtuk, hogy egy jó webdesign a felhasználót helyezi a középpontba, és a legfőbb jellemzője elsősorban a használhatósága. Ez a cél, és minden vizuális megoldás, technika csak eszköz ennek a célnak az elérésében. A célt azonban meg lehet fogalmazni másként is – és sokak számára talán így érthetőbb lesz -, mégpedig úgy, hogy a webdesignnak

láthatatlannak, azaz észrevehetetlennek kell lennie.

Amikor már “díszíted” a weboldalad ilyen-olyan vizuális megoldásokkal, akkor biztos lehetsz benne, hogy “túldizájnoltad”. Hogyan tarthatod meg a weboldalad designját láthatatlannak?

Természetesen láthatatlanságról nem abban az értelemben beszélünk, hogy a weboldalad teljesen láthatatlanná, vagy akár észrevehetetlenné válik. Nem, a webdesign látható, csak kérdés, hogy mennyire tolakodóan törekszik erre, mennyire feltűnősködni akar. A designer által használt technikáknak és eszközöknek ugyanis nem szabadna szembetűnően nyilvánvalónak lennie az átlagos felhasználók számára.

A webdesignnak tulajdonképpen csak a “jó érzést” kellene közvetítenie feléjük, ennyit kellene észlelniük az egészből. A felhasználók ugyanis a hatása alá akarnak kerülni, kapcsolatba akarnak lépni vele. Nem szükséges arról tudniuk, hogy miért is érzik a késztetést. Ettől jó egy design, és ez az, amiért láthatatlan. De hogyan érhetjük el? Ehhez először meg kell érteni, hogy:

A webdesign a kommunikációról szól

Amikor egy weboldalt tervezünk, vagy akár egy mobilalkalmazást, akkor valamiféle kommunikációt tervezünk meg a felhasználóval. A designnak támogatnia kell az üzenetet, nem pedig akadályoznia azt. Egy élményt kell teremteni, minden rendelkezésünkre álló eszközzel.

Az elkészült weboldal nem neked készül, sőt nem is a konkurencia vagy más designerek számára, hanem a célközönségednek, akik semmit nem tudnak a white space-ről, a színek vagy az egyes betűtípusok megfelelő kiválasztásáról és használatáról. Mindössze érzik, hogy jó használni egy weboldalt, vagy sem. Ez az, amiért úgy kell gondolkodni egy webdesignról, mint egy láthatatlan eszközről.

A láthatatlanságnak több típusa is jelen van a webdesignban. Beszélhetünk a láthatatlan termékekről vagy elhelyezésekről, amikor a márka vagy a hirdetés fel sem tűnik az embereknek. A láthatatlan interakciók és értesítések is annyira feltűnés-mentesen történhetnek, hogy gondolkodás nélkül tud elvégezni a felhasználó egy-egy feladatot. A láthatatlan esztétika pedig egy érzelmi kapcsolatot és köteléket teremt a látogatóval, hogy azok vágyjanak az elköteleződésre a weboldallal.

Hogyan kivitelezhető a láthatatlan webdesign?

A láthatatlan webdesign nem egy trend vagy egy UX-technika. Ugyanazokat az elemeket használja, melyek minden weboldalon megtalálhatók, így a szöveggel, a színekkel, a betűkkel, a képekkel, az ikonokkal dolgozik. Vagyis megértéséhez csak vissza kell térnünk az alapokhoz.

A szöveg és a nyelv esetében azt kell megérteni, hogy üzenetet közvetítenek a felhasználók felé, nemcsak azt, amit kimondunk, hanem annál többet. A stílus lehet hivatalos, könnyed vagy akár vicces is. A felhasználóknak szándékaid szerint szenvedélyt kellene érezniük, esetleg a szövegednek valamilyen cselekvésre kellene sarkallnia őket? Döntsd el, mit szeretnél kiváltani bennük, és ennek megfelelően alakítsd a nyelvezetet. Emellett gondold végig a szavak ritmusát, és hogy hogyan hangzanak, amikor hangosan kiejted őket.

A színek esetében tudni kell, hogy minden színnek vagy színkombinációnak van valami érzelmi hatása. A színek kiválasztása sok időbe telhet, hiszen végig kell gondolni, hogy melyik milyen hatást kelt a látogatókban. Alapvetően valami “jó érzést”, harmóniát, egyensúlyt kell sugározniuk feléjük.

A tipográfiának szintén komoly érzelmi hatása van, üzenetet közvetít a felhasználók felé. Ha bármikor bizonytalan vagy a betűtípus kiválasztásánál, akkor maradj egy sans serif vagy egyszerű serif megoldásnál. De a betűtípusok érzelmi hatásáról korábban már írtunk, érdemes ennek kapcsán átolvasni linkelt bejegyzésünket.

A képek, videók vagy animációk használatánál végig kell gondolni, hogy azokon éppen mi történik, vannak rajta emberek, azok vidámak és mosolyognak? A színek melegek vagy hidegek, lassú vagy gyors cselekedeteket ábrázol? A megfelelő ütem és ritmus ugyanis bizonyos szintű biztonságérzetet jelent az emberek számára. Egy túl gyors vagy akár túl lassú mozgás magára a cselekményre hívja fel a figyelmet, és így a kép kikerül a felhasználó figyelmének középpontjából.

Az ikonok és a felhasználói felület egyéb elemei kapcsán következetességre kell törekedni. Ha ez sikerül, akkor az sokat tehet a webdesign láthatatlanná tétele érdekében. Az ikonkészlet világossá teszi a felhasználók számára, hogy pontosan hogyan működik egy weboldal, hogyan léphetnek vele kapcsolatba, ugyanakkor az egyes ikonok esetén kivitelezhető cselekvések vagy épp azok kinézete akár eltérő is lehet.

A láthatatlanná válás akkor következik be, amikor a felhasználónak már nem kell gondolkodnia azon, hogy mi miért történik, hogyan működik. A cél az, hogy az embereknek megtorpanás nélkül navigáljanak a cél felé, azaz mondjuk egy webáruház esetében  a termékek megrendeléséhez.

Ezek mellett még számos eszköz létezik, melyek segíthetik vagy éppen akadályozhatják egy webdesign láthatatlanná, azaz működőképessé tételét. Ilyenek az árnyékok, a különböző szöveg-effektek, keretek, távolságok, és még sok más dolog. A lényeg az, hogy ezeket miként használjuk. Mindenképpen úgy kell őket alkalmazni, hogy az emberek észre se vegyék őket, ne ezek miatt pillantsanak egy képre vagy egy szövegre. Ezeknek az elemeknek nem kell önálló életre kelniük, pusztán a célok és az üzenet átadásában kell közreműködniük.

A kulcs a láthatatlan design létrehozásánál az, hogy minden részlet tökéletesen ki legyen dolgozva, akár a makro-, akár a mikroelemekről van szó. A webdesignnak szándékosan egyszerűnek kell lennie, nem szabad túldíszíteni, vagy csak azért használni trendi megoldásokat, hogy megmutassuk: ilyet is tudunk.

Meg kell tehát tervezni az apró részleteket, hogy azok teljesen zökkenőmentesen működjenek, valamint át kell gondolni alaposan a teljes képet, hogy lássuk, megfelel-e annak, amit közvetíteni szeretnénk a felhasználók felé. Túlkomplikálni viszont nem érdemes a dolgokat: legtöbbször a legegyszerűbb megoldás egyben a legjobb is.

A jó webdesign következetes

A következetesség rendkívül fontos dolog a webdesignban, a felhasználói élmény szempontjából talán fontosabb is, mint azt elsőre gondolnád. A következetes webdesign révén jobbá, könnyebben használhatóvá válik a weboldalad. Azt is mondhatjuk, hogy bizonyos részei észrevehetetlenné válnak, ami pozitívum, hiszen mint tudjuk: a jó webdesign láthatatlan.

A következetesség egy olyan szál, mely összeköt elemeket a weboldalon, sőt akár egy kampány vagy egy márka esetében is. Ezáltal válik egy termék megkülönböztethetővé.

Miért fontos a következetesség?

Először érdemes meghatározni azt, hogy mit is értünk következetesség alatt. A következetesség egy megegyezés, harmónia vagy összeegyeztethetőség, illetve összhang vagy azonosság egy komplex dolog részei között.

Ha a felhasználói felület tervezését vizsgáljuk, akkor például a CTA-k színeinek egyezése következetesség, vagy ugyanazon betűméret használata a címsorokban szintén következetesség. Tehát, amennyiben követjük az ismert és használt mintákat a designban, akkor következetesek vagyunk.

A következetesség egy fontos design-elv, mely abban segít, hogy a design:

  • használhatóbb
  • könnyebben tanulható
  • intuitív legyen.

De hol a legfontosabb a következetesség egy weboldalnál?

Következetesség a színeknél

Megvan annak az oka, hogy olyannyira sok információ elérhető a megfelelő színsémák kialakításával kapcsolatban a weben. Mi is foglalkoztunk már részletesen a témával, hiszen a szín kulcsfontosságú, amikor össze kell kötni egy márkát egy vizuális megjelenéssel. Egy-egy szín alapján azonnal meg tudod mondani, hogy melyik márkához kapcsolódik: gondolj a Coca-Colára, a Facebookra vagy a T-Mobile-ra! Mennyivel nehezebb lenne azonosítani ezeket a cégeket a rájuk jellemző színárnyalat nélkül.

A jó színhasználat ugyanakkor abban is segíti az embereket, hogy navigáljanak a weboldaladon, és tudják, hogy még a jó irányba tartanak. Ha minden egyes kattintással olyan oldalra jutnának, mely más színpalettát használ, akkor fogalmuk sem lenne róla, hogy hol járnak. Ahhoz, hogy megalkoss egy jó színpalettát, ki kell választanod egy domináns színt, majd ehhez egy vagy két másodlagos színt illeszteni. Ezután meg kell határoznod a stílus és használati szabályokat minden egyes szín esetében, valamint azt, hogy miként alkalmazd mindezt a design során. Ragaszkodj ezekhez a szabályokhoz, és a színekkel már nem lesz gondod!

Betűméretek, térközök, pozíciók

Ugyanúgy, mint a színeknél, itt is szabályokat kell alkotnod, és a megoldás is ugyanaz:

  • válassz ki egy domináns betűtípust és méretet,
  • majd válassz egy másodlagos betűtípust és méretet!

A kiválasztott típust, méretet, térközt, elhelyezést hozzá kell rendelned egy-egy taghez, mint a h1, h2, h3, illetve a kenyérszöveg, így ezek használatával egyből a megfelelő megoldást veszed elő.

Akadnak olyan típusok, melyek csak bizonyos esetekben kerülnek használatra (például a navigációs menüben), ezek eltérnek, de a következetesség itt is fontos. A felhasználókat ugyanis megzavarja, ha a navigációs elemek szövegei az egyes oldalakon eltérő betűtípussal íródnak.

A méretek és az elemek kapcsolat

Mekkorák az egyes elemek a Te weboldaladon? Minden gomb azonos méretű? És mi a helyzet a címsorokkal és a fotókkal? Az egyes elemek méretét a weboldal stílusa határozza meg, ugyanakkor egy adott elem méretének azonosnak kellene lennie minden használatkor. A gyakori méretek és a kapcsolat az egyes elemek között abban segíti a felhasználókat, hogy könnyebben felfedezzék a mintákat, és ennek révén megkapják a megfelelő vizuális segítséget. A következetesség révén harmóniát és egyensúlyt alakíthatsz ki, ezáltal könnyen befogadhatóvá válik a design, és a felhasználói elkötelezettség is erősödik.

Terek és használatuk

Az egyes elemek között húzódó terek legalább olyan fontosak, mint maguk az elemek. Nincs annál zavaróbb, mint amikor az elemek úgy jelennek meg egy weboldalon, mintha csak oda lennének szórva, és semmiféle szabály nem fedezhető fel az alkalmazásukkal kapcsolatban.

A legjobb megoldás a következetes térhasználati szabályok kialakítására a rácsrendszer alkalmazása. A láthatatlan vonalak segítenek abban, hogy hogyan és hová helyezd el az egyes elemeket a weboldalon, ezáltal pedig a szövegek, a képek és a gombok harmóniába kerülnek egymással.

Mindig győződj meg azonban arról, hogy mind a vízszintes, mind a függőleges térkalakítás következetes legyen! Ehhez figyelned kell a kapcsolatra a hasonló és az eltérő elemek között.

Felhasználói minták

A Te designodnak is úgy kell működnie, mint a többi hasonló designnak, és követned kell az elfogadott felhasználói sablonokat. A designerek sokszor eredetit akarnak alkotni, de Te ne ess bele ebbe a csapdába!

Ha egy applikáció vagy egy weboldal úgy működik, ahogy arra számítanak a felhasználók, akkor könnyebben kapcsolatba tudnak vele lépni. Ekkor tudják, hogy a weboldaltól mire számíthatnak, és a design szinte észrevehetetlenné válik, hiszen a jó használhatóság túlragyogja.

A felhasználói felület elemei

Végül, minden interakciós és felhasználói felületen megjelenő elemnek azonos módon kellene viselkednie:

  • A linkeknek vagy az oldalon vagy egy új ablakban megnyílnia (válaszd valamelyiket).
  • A gomboknak azonos színűnek kell lennie.
  • A navigációnak mindig ugyanazon pozícióban kell megjelennie és ugyanazokat az opciókat kell tartalmaznia.
  • A lábléceknek és az oldalsávoknak mindig azonos helyen és méretben kell megjelenniük (azaz ne tedd az egyik oldaladon nagyobbá őket, mint a másikon).
  • Az ikonok legyen felismerhetők, mert erre számítanak az emberek.
  • A kattintható elemek mindig legyenek kattinthatók.

Ne felejtsd: ha egy elemhez valamilyen akciót rendelsz, akkor annak a funkciónak mindenhol máshol is meg kell jelennie. A következetesség a designban létrehozza azt a felépítést, amire a felhasználók vágynak. Kialakul egy drótváz, amit az emberek megértenek, és amely hozzájárul a weboldal használhatóságához és az elköteleződés kialakításához. Mindez egy rakás szabállyal indul az egyes projektek esetében.

Ha egyedül dolgozol, akkor is alkoss egy listát a szabályokról, hogy miként használod a színeket, méreteket, tereket, a felhasználói felület elemeit és az interakciókat! Ez felgyorsítja majd a design-folyamatot és egy sokkal jobb, használhatóbb design kialakításához vezet.

Mikor érdemes megkérdőjelezni a következetesség elvét a webdesignban?

A következetesség átgondolatlanul alkalmazva nem feltétlenül hoz jó eredményeket. A problémákat alapvetően két részre oszthatjuk:

Következetesség a felületen belül

A felületen belüli következetesség kényszert jelent. Habár a kényszer nem egy eredendően rossz dolog, adott esetben meghisúsíthatja azt, hogy elérjük a célunkat a szabályok követése miatt. Néha a következetesség miatt rosszul használható felületek jönnek létre, vagyis a következetesség akár nehezítheti is a felhasználók számára a céljaik elérését. 

A gond az, hogy miközben a design rosszul használható, a következetes megjelenésre hivatkozva igazolhatjuk a design helyességét. Annál is inkább, mivel könnyebb egy következetes designt létrehozni, mint egy jól használhatót.

Ragaszkodás már létező designokhoz

Létezik már egy tökéletes design? Már megtervezted a tökéletes vásárlási folyamatot? Vagy elkészítetted már a legjobban használható bejelentkezési űrlapot? És vajon létezik olyan sablon, mely minden ember számára száz százalékban használható? Nem. 

Nem szabad egyetlen design-megoldáshoz ragaszkodni anélkül, hogy gondolkodnánk annak további javításán. 

Általában nem kérdőjelezzük meg a bevett sablon-megoldásokat, és nem gondolkodunk az azokkal kapcsolatos problémákon. Használjuk őket, mivel megszokottá váltak, és amiatt nem érhet kritika, ha azt csináljuk, ami már jól bevált.

Érdemes megtörni a következetességet?

Mindezek után felmerül a kérdés, hogy szükség van a következetesség figyelmen kívül hagyására vagy a szabályok állandó megszegésére? Nem, ez sem működik. A következetesség fontos a használhatóság, a könnyebb tanulhatóság, és az intuitív design miatt. 

Ugyanakkor, érdemes megváltoztatni a hozzáállásunkat, kérdéseket feltenni és elgondolkodni a válaszokon. Amikor a következetesség miatt alakítunk ki valamit egy weboldalon, akkor fontos lenne átgondolni, hogy a következetesség segít elérni a felhasználóknak a céljukat? Vagy lenne valamilyen könnyebb és használhatóbb megoldás helyette?

A lényeg tehát, hogy a következetesség nem maga cél, amit el kell érni, hanem egy eszköz, hogy elérhessen általa a felhasználó egy célt. És amikor a következetesség a gátja a cél elérésnének, akkor nem szabad ragaszkodni hozzá.

Ha nem ismered a felhasználóidat, maradj következetes!

Fontos ugyanakkor, hogy nem szabad felhagyni a következetességgel, ha nem értjük pontosan a felhasználóinkat. Hiszen hogyan is szegnénk meg egy szabályt, ha nem tudjuk, hogy miért tesszük azt?

Az NNG három kérdés feltevését javasolja, mielőtt megtörnénk a következetességet:

  • Az új design jobban fog teljesíteni, mint a régi?
  • A felhasználók újra és újra hajlandóak lesznek próbálkozni az új designnal, amíg meg nem ismerik annyira, hogy felfedezzék a hosszú távú előnyeit?
  • Felgyorsítja a tanulást?

Ezekre a kérdésekre nem lehet úgy választ adni, hogy nem ismered kellően a felhasználóid tudását és céljait.

A következetesség, illetve annak időnkénti megtörése az egyensúlyról szól. A legfontosabb dolog tisztában lenni azzal, hogy mikor szabad elhagyni a következetességet, és mikor kell következetesnek maradni. Ehhez ismerni kell a felhasználóidat, a céljaikat, mert anélkül nincs értelme a dolognak. 

A jó webdesign intuitív

Mostanában nagyon sok készülő webdesign esetében központi kérdésként merül fel, hogy miként tegyük azt “intuitívvá”. Hiszen az erőfeszítéstől, akadályoktól mentes használat jelentősen javítja egy weboldal hatékonyságát.

Képzeld el, hogy látsz egy autót a kereskedésben, amit kipróbálnál! Amikor viszont beszállsz, azt látod, hogy nincs ott a kormánykerék, ahol az lenni szokott. Ilyenkor beszélhetünk “nem intuitív designról”, hiszen eddigi tapasztalataid alapján nem tudod vezetni az autót. A felhasználó figyelmét itt a design elvonja azzal, hogy nem nyilvánvaló megoldásokkal ismeretlen helyzetekbe kényszeríti.

Mi az az intuitív webdesign?

Amikor webdesignról van szó, akkor a design egészen addig intuitív, amíg a felhasználó képes egy feladat végrehajtására mindenféle megtorpanás nélkül. Ezzel szemben egy nem intuitív design a figyelmét olyan weboldal-elemekre irányítja, melyek nincsenek kapcsolatban a feladattal.

Az intuitív webdesign tulajdonképpen csak annak a könnyen, szinte gondolkodás nélkül használható webdesignnak egy más aspektusa – vagy akár csak egy eltérő megnevezése -, melyet az egyszerűség, a konvencióknak való megfelelés és a kiváló felhasználói élmény jellemez.

Ami talán szintén érzékelhető a példából, és fontos megjegyezni: “ösztönös” használat nincs, csak már megszerzett tapasztalat alapján történő használat. Hiszen ki születik úgy, hogy tud autót vezetni? A megszerzett tapasztalatra viszont lehet és kell építeni. Ehhez persze tisztában kell lenned azzal, hogy mekkora is a felhasználói tudás, és mennyit kell neked hozzátenned. Akad azonban néhány probléma:

Mindenkinek mást jelent

A helyzetet azonban bonyolítja, hogy mindeni számára egy kicsit mást jelent az intuitív használat. Vagyis, ami intuitív számodra, az nem feltétlenül intuitív a felhasználóidnak. Ugyanakkor van egy pár dolog, ami közös benned és a felhasználóidban.

Ezért, ahhoz hogy elő tudj állítani egy intuitív webdesignt némi kutatásra lesz szükséged. Akár meg is kérdezheted arról a felhasználóidat, hogy mit gondolnak a weboldaladról. Bevetheted az A/B teszteket is, amivel pontosan megtudhatod, hogy mi működik és mi nem a weboldaladon. És kiderülhet az is, hogy egy-egy változtatásnak milyen a hatása.

Megszerzett tudás – megcélzott tudás

A másik dolog, ami az intuitív webdesign kapcsán felmerül, hogy a felhasználók rendelkeznek már egy tudással a felületedről, ugyanakkor még van egy pár dolog, amit nem tudnak, de tudniuk kellene. Ha olyan dolgot is a szájukba akarsz rágni, amivel már tisztában vannak, akkor azzal csak túlkomplikálod a designt. Kénytelenek lesznek felesleges lépéseket megtenni.

Ez azt jelenti, hogy egy intuitív design csak azokra a dolgokra vezeti rá a felhasználóit, melyet még nem tudnak, de kellene tudniuk a felületed használatához. Ahhoz megint csak elég jól kell ismerned a felhasználóidat, hogy tudjad mit tudnak és mit nem tudnak.

Mikor lesz egy felhasználói felület intuitív?

Akkor, amikor a felhasználók minden kísérletezés, gyakorlás, segítség, oktatás nélkül képesek megérteni a felhasználói felület működését. Vagyis, ha valami úgy néz ki mint egy gomb, akkor tudjuk, hogy annak megnyomása esetén számíthatunk valamilyen reakcióra. Ehhez hasonlóan, ha látunk a linket, akkor tudjuk, hogy kattintásra megnyit egy másik oldalt. Ugyanakkor egy olyan felhasználói felület esetében, melyen nem csak navigálni nehéz, hanem olyan elemeket is tartalmaz, melyek teljesen idegenek számunkra, azt mondhatjuk, hogy az az UI nem intuitív.

A lényeg, hogy miközben vannak eltérések aközött, hogy mit jelent az intuitív használat az egyik ember számára, és mit jelent a másik számára, addig vannak olyan dolgok, melyek szinte mindenki esetében javítják a felhasználói élményt. Például az, ahogy átfutjuk a weboldalakat legalább annyira egyforma minden ember esetében, mint hogy nem nyúlnak bele a tűzbe. Tehát az univerzálisan elfogadott elemekre kell építeni.

A bejegyzés elején említett példában adott egy akadály – nincs kormánykerék -, mely a felhasználói út során bukkant fel. Az átlagos felhasználó nem akar plusz erőfeszítést tenni, törni a fejét. Különösen akkor nem, ha azért jött, hogy pénzt költsön el. Az emberek nem szeretik az akadályokat a használat során, hiszen csak hátráltatja őket a céljaik elérésében, összezavarja, eltéríti őket. (Talán ez az egyik oka annak is, hogy a Google miért tesz az önvezető autóiba is kormánykereket.)

Ha mindezt a webdesignra alkalmazzuk, akkor azt mondhatjuk, hogy egy intuitív weboldal elemei olyan módon vannak kialakítva és elrendezve, hogy a felhasználó a lehető legkönnyebben hozzá tudjon férni az információkhoz, tudjon navigálni az oldalon, és erőfeszítés nélkül elérje a célját. Az intuitív webdesign nem szúr szemet, ugyanakkor nem feltétlenül marad észrevétlen.

A gyakorlatban, amikor valaki arra törekszik, hogy egy weboldalt esztétikussá tegyen, gyakran a szépség oltárán feláldozza a használhatóságot. És habár egy szép weboldalnak sokszor elnézzük a kisebb használhatósági hibáit, ha a felhasználó nem találja meg, amit keres, akkor esélytelen, hogy hosszabb időt töltsön el a weboldalon.

Mi kell egy intuitív a webdesignhoz?

1. A felhasználóid megismerése

Habár mindez egyszerű és nyilvánvaló lehet mindenki számára, sokszor mégsem készülnek intuitívan használható weboldalak. Még akkor sem, ha erre törekszünk. Ennek valószínűleg az az oka, hogy a designerek nem tudják, kik és mit akarnak az adott weboldal felhasználói, vagy mit várnak el az adott cég weboldalától. Tehát egy intuitív weboldal elkészítését a közönség megismerésével kell kezdeni.

Ezzel kapcsolatban fontos figyelni a tudásbeli különbségre. Ez alatt azt értjük, hogy tudnod kell, mekkora az eltérés a meglévő felhasználói tudás és a megcélzott felhasználói tudás között. A meglévő tudás egészen pontosan az, amit a felhasználó tud a felület használatáról a weboldal meglátogatása előtt addigi tapasztalatai alapján. Ez minden felhasználónál, célcsoportnál más és más. A megcélzott tudás pedig az, amit a reményeid szerint megszerez majd a weboldaladon annak érdekében, hogy ott elérje a céljait.

A felhasználók megismerésével tudsz rálátni erre a különbségre, tisztába kerülni jelenlegi tudásszintjükkel. Emellett persze arra is rájössz, mit várnak a weboldaladtól, mik a céljaik, milyen vágyaikat akarják kielégíteni. Ezen információk nélkül nem nagyon lehet hatékony weboldalt készíteni, hiszen csak feltevések vannak és sötétben tapogatózás zajlik.

A vizsgálataid eredményeként tehát meg kellene ismerned a célközönséged szándékait, vágyait, tudását. Ez egyénenként és célcsoportonként eltérő, ráadásul aszerint is változik, hogy épp az eladási tölcsér mely szakaszán tartózkodnak. Mégis ez határozza meg, hogy milyen lesz a webdesign, milyen szövegeket írsz egy adott aloldalon számukra.

2. Egy jó információs architektúra

Nyilván az cél, ha az emberek ne csak elolvasni tudják a weboldalad, hanem könnyen át is futható legyen. Ehhez kell az intuitívan befogadható a tartalom, amit a jó elrendezés biztosít. Az információs architektúra határozza meg, hogy miként rendezed el a tartalmaid a felületen, milyen kategóriákat használsz és mennyire könnyű navigálnia a látogatóknak az oldalon. Nyilván a cél az, hogy könnyű és intuitív használat révén jussanak bele a megfelelő csatornába az emberek, és arra haladjanak benne, amerre szeretnéd.

3. A megszokott sablonok

A célközönségedet figyelembe véve a számukra érvényes webes konvenciókra érdemes építened. Hiszen az emberek nem szeretik a változásokat a gyakran előforduló sablonoknál. Egy Windows-használó számára furcsa, amikor egy OS X-et kell használnia és a bezárás gomb az ablak bal oldalán található. És persze ugyanez igaz fordítva is. Az emberek megszoktak bizonyos megoldásokat, és ha ezektől eltávolodunk, akkor az nem túl felhasználóbarát dolog.

4. Következetesség

Akadnak akik nem figyelnek eléggé a következetességre, amikor épp egy intuitívnak szánt designon dolgoznak. Miközben egy weboldalt tervezel, szükség van a következetességre az egyes oldalak esetében. Van ugyanis egy elvárás a felhasználók részéről azzal kapcsolatban, hogy a weboldalad miként működik, és ha ez oldalról oldalra változik, akkor az nem csak zavart okoz, hanem frusztrációt is.

Tehát ha az egyik oldaladon még felső navigációs menüt használsz, míg a következőn már a bal oldalra teszed a menüt, azzal zavart okozol a felhasználókban, akik a csalódás miatt talán el is hagyják a weboldaladat. Már egy egészen kis következetlenség miatt is sokat romolhat a weboldalad használhatósága.

5. Egyszerűség

Az egyszerűség manapság gyakran hallott szó a webdesignban, és az sem véletlen, hogy a minimalista weboldalak egyre népszerűbbek. Egy egyszerű weboldal gyorsabban betöltődik, könnyebbnek látszik, de megvalósítani és karbantartani is egyszerűbb lehet. Ezért is törekszenek egyre inkább a minimalista megoldások irányába a tervezők.

Ehhez persze az kell, hogy minden felesleget eltávolíts a weboldalról, így egyszerűbbé téve a használatot. Azt, hogy mi a felesleges egy alapos ellenőrzés és a tesztek tudják megmutatni. Minden, ami által könnyebbé válik a használat, intuitívabban használhatóvá teszi a felületet, és ezáltal mérsékelhető a weboldal használata által kiváltott stressz.

Az Airbnb oldala is egyszerű
6. Minimális erőfeszítéssel megvalósítható feladatok

Senki sem akar egy teljes percet azzal tölteni, hogy létrehozzon mondjuk egy felhasználói fiókot. Ezért szükséged van arra, hogy gyorsíts a regisztrációs folyamaton, és a felhasználók ezt a lehető legkisebb erőfeszítéssel meg tudják tenni. Az egyszerűsítés és a felesleges lépések elhagyása a megoldás a felhasználók megtartására és konvertálására.

7. Integrált segítség

Ez az egyik legkritikusabb része az intuitív designnak. Tény ugyanis, hogy nem egyszerű létrehozni egy olyan felhasználói felületet, mely akár egy speciális célközönség számára is egyformán könnyen használható. Miközben néhány embernek a felületed teljesen intuitívnak fog tűnni, addig mások máshogy érzik majd. Az utóbbiak miatt gondolni kell arra, hogy segítségre lesz szükségük a weboldalad működésével kapcsolatban.

Az egyes elemek mellett elhelyezett segítő információk gondoskodnak arról, hogy a weboldal használata közben mindig információhoz jussanak az emberek. Ez nem csak időt takarít meg számukra, hanem az egész felhasználói élményt kellemesebbé, kevésbé zavarba ejtővé, és hatékonyabbá teszi.

8. Gyors betöltődés

A régi, bölcs mondás úgy hangzik, hogy ha időt adsz az ügyfeleknek a gondolkodásra, akkor valószínűleg nem fognak vásárolni. Ugyanez érvényes a webdesignban is. Ha egy weboldal betöltése túl sok időt vesz igénybe, akkor nagy a valószínűsége, hogy a felhasználók nem fognak várni, és inkább egy másik weboldalt keresnek fel.

Ez az oka annak, hogy amikor nagyméretű weboldalakról van szó, akkor mindig csak egy részét töltsd be a tartalomnak, esetleg használj folyamatjelzőt, hogy a felhasználókat a weboldaladon tartsd! A weboldalsebességről részletesebben itt írtunk.

Összefoglalva

Elmondhatjuk, hogy egy olyan weboldal nem lehet intuitív, melynek nehéz megfejteni a működését, esetleg eltéríti a felhasználók figyelmét. Tehát miközben figyelsz az olyan megszokott designelemekre, mint a megfelelő színséma kiválasztása vagy tartalomstruktúra kialakítása, arra is figyelned kell, hogy a design intuitív legyen a célközönséged számára.

A felhasználói élményt egyesek összekeverik a vizuális megjelenéssel, pedig az csak egy része neki. A másik része, hogy milyen könnyen használják a weboldalad az emberek. Ha nem sikerül egy kellően intuitív felületet összehoznod, melyet könnyű megérteni és amely segíti a feladatok végrehajtását, akkor a felhasználók valószínűleg egy másik weboldalt keresnek, mely megteszi mindezt számukra.

A jó webdesign egyensúlyt alakít ki

Egyensúlyra van szükség ahhoz, hogy a felhasználók azokkal a weboldal-elemek vizsgálatával töltsék az idejüket, amelyet szeretnél megmutatni nekik. Az egyensúly segít fenntartani a látogatók számára a koncentrációt, így könnyebben befogadják az információkat a weboldaladról.

A hatékony kommunikációhoz tehát egyensúlyra van szükség a weboldalon.  Abban a pillanatban, hogy ez az egyensúly megszűnik, az üzenet veszít hatékonyságából, elsüllyed a káoszban.

Amikor eléred azt a pontot, hogy minden éppen olyan mértékben van jelen – akár egy weboldalon -, amennyire szükséges, akkor létrejön az egyensúly, harmónia alakul ki a designban.

Ahhoz, hogy egy weboldal megalkotása során a designer egyensúlyt hozzon létre, kell a tehetség és a gyakorlat, na meg egy kis gondolkodás. De milyen lehetőségek adódnak az egyensúly vizuális megteremtésére egy weboldalon?

A szimmetrikus egyensúly

Az első és a legegyszerűbb megoldás az egyensúlyra a teljes szimmetria, a weboldalakon is. Ezért is találkozol szimmetrikus egyensúllyal a legtöbb weboldalon, úgy, hogy észre sem veszed.

És pontosan ez a lényege a szimmetrikus egyensúlynak. Egy természetesen kellemes megjelenést jelent az emberek számára, hiszen a design esztétikai szempontból jól szervezettséget és harmóniát sugároz. Ráadásul azért is vonzóbb az emberek számára a szimmetria minden más megoldásnál, mert maga az ember is egy szimmetrikus lényként tekint magára.

Az ember vonzódik a rendezettséghez, az egységességhez és az ismétlődéshez. A szimmetrikus egyensúly fontos jellemzője, hogy mivel a képek az ilyen weboldalakon szabályosan elrendezett hasábokban jelennek meg, így sokkal könnyebb a navigáció a felhasználók számára. Ráadásul olvasni is könnyebb, felülről lefelé, illetve balról jobbra haladva.

A szimmetrikusan kiegyensúlyozott oldalakat általában professzionálisabbnak tűnnek, nagyobb bizalmat keltenek, és a felhasználók igényeire szabottabbnak érezzük. A szimmetrikus egyensúly lehetővé teszi, hogy több részletet, képet, hirdetést helyezz el egy oldalon, mert könnyebb az információk megtalálása és feldolgozása az emberek számára.

A szimmetrikus egyensúly pontosan azt jelenti, amire bárki gondol a szimmetriával kapcsolatban: minden egyes elemnek megvan a maga megfelelője egy vertikálisan vagy horizontálisan húzódó tengely másik oldalán. Vagyis van egy képzeletbeli vonal, mely a weboldal közepén húzódik és mintegy tükörként működik, azaz egyik oldalt “tükrözi” a másik oldalra.

Sokan persze teljesen jogosan ezt a fajta egyensúlyt vagy elrendezést rendkívül unalmasnak látják, azonban az idő próbáját kiállta. És még mindig a legjobb módja annak, hogy egy weboldalnál megtaláljuk a tökéletes egyensúlyt. Itt van például a Cisco weboldala, mely egy ilyen szimmetrikus egyensúlyt mutat be.

Ennél a tengely függőlegesen húzódik az oldal közepén. Ha ezt képzeletben meghúzod, akkor láthatod, hogy a sorok középre rendezettek, az ikonok száma mindkét oldalon megegyezik, ahogy a cikkek bélyegképeinél is megmarad ez a szimmetria. És talán nem a legizgalmasabb weboldalról van szó, azonban nem is kell annak lennie, hiszen a cég hálózati eszközöket gyárt, nem pedig a kreatíviparban tevékenykedik.

Emellett a weboldal jól használható és funkcionális, ami tovább javítja a felhasználói élményt. A szimmetrikus design tehát olyan cégek számára javasolt, melyek professzionalizmust, szakmai hozzáértést, a minőség felé való elköteleződést akarnak sugallni.

Aszimmetrikus egyensúly

Annak ellenére, hogy a tökéletes szimmetriának sok előnye van – mint az fentebb soroltuk – az aszimmetria sem elvetendő. Aszimmetrikus weboldal például a Pinterest, ugyanakkor az is tény, hogy talán nehezebb feldolgozni az információtartalmát, mint ha szimmetrikusan lennének elrendezve az elemek.

Ugyanakkor nagyon sok aszimmetrikus megjelenést látunk logóknál is: ilyen például a Nike, mely ennek ellenére, vagy épp ezért, nagyon sikeres és jól felismerhető. Az aszimmetrikus design sokkal egyedibb és izgalmasabb, ha megfelelően használják.

Elsőre ellentmondásosnak hangozhat, de asszimmetriával is el lehet érni az egyensúlyt. Nincs ebben semmi különös, hiszen attól, hogy két rész nem azonos méretű, még lehet azonos súlyú, egyenlő jelentőségű. Az aszimmetria többféle módon is megjelenhet egy weboldalon: akár vertikálisan, akár horizontálisan.

Az aszimmetria kiemelheti az egyik oldalon lévő elemet, míg a másik oldalon lévőket kissé elhalványítja. Az ilyen egyenlőtlenség ellenére az egymás mellé helyezett eltérő súlyú elemek összessége mégis egyensúlyt mutat.

Vagyis annak ellenére, hogy az oldalon aszimmetriát látunk, tulajdonképpen a súlyokat tekintve itt is szimmetriával van dolgunk, az összbenyomás pedig harmonikus és kifejezetten szép lehet, talán még inkább, mint a szimmetrikus egyensúlyt használó megoldásoknál.

Paradoxonnak tűnhet, de a látszólagos egyenlőtlenséggel teremt egyensúlyt a design, és ezáltal működik. De miért használjuk a nagyobb kihívást jelentő aszimmetrikus designt, ha szimmetrikus designnal egyszerűen és könnyen kialakítható a megfelelő egyensúlyt?

Elsősorban azért, mert az aszimmetrikus egyensúly révén izgalmasabb, dinamikusabb lesz a kapott eredmény. Az persze tagadhatatlan, hogy több munkával jár így megalkotni az egyensúlyt, de ha igazán élő, dinamikus és vizuálisan vonzó megoldásra törekszel, akkor érdemes belefektetni ezt a többletet. Egy aszimmetrikus weboldal a mozgás, az izgalmasság, és a modern megjelenés érzését teremti meg a felhasználóban. Itt egy példa rá. A Honda amerikai oldala ugyan egy teljesen szimmetrikus résszel indít, azonban a hajtás alatt már változik a helyzet.

Belecsöppenünk egy kártya-alapú designba, ami elsőre rendkívül rendezetlennek, szinte kaotikusnak hat, ugyanakkor vizuálisan nagyon erős, színes. Ha egy horizontális vagy akár egy vertikális vonallal kettéosztjuk a felületet, akkor látható, hogy a két rész sehogy sem egyforma. Egyrészt a kártyák többféle méretűek és oldalarányúak, ráadásul nem szabályos sorokba és oszlopokba rendeződnek.

Ettől azonban egy nagyon izgalmas látvány bontakozik ki, mely összességében mégis egyensúlyt mutat. Az aszimmetrikus egyensúly megalkotása lényegesen nehezebb, mint a szimmetrikus társáé, mert figyelembe kell venni az egyes elemek közötti összetett kapcsolatokat.

Sok designer pont emiatt igyekszik kerülni ezt a megoldást. Pedig az aszimmetrikus egyensúly nagyon hatékonyan ragadja meg a felhasználók figyelmét, használatával a mozgás érzetét keltheted, mivel a szem természetes módon elindul a nagyobb elemek irányából a kisebbek felé, és a sötétebb részektől a világosabbhoz.

Érdemes tehát kihasználni az aszimmetrikus egyensúlyban lévő lehetőségeket. A kérdés már csak az, hogy milyen eszközökkel lehet kialakítani a weboldaladon? Használhatod a színeket, a textúrákat és a súlyt.

  • Az egyes elemeid eltérő méretűek legyenek.
  • Olyan textúrát használj, mely egyes elemeket nehezebbé tesz.
  • Használj erős színeket a pasztell árnyalatok helyett.
  • Helyezz elemeket az oldal sarkába vagy szélére, mivel ez nehezebbé teszi őket.

És természetesen a negatív tér megfelelő használata is beletartozik, hiszen az whitespace eleve aszimmetriát teremt. Ha tudod, miként működik a negatív tér a designban, akkor már érted, hogy hogyan mozgatja a felhasználó tekintetét a weboldalon. Ha jól alkalmazod, akkor a látogatók oda tekintenek, ahová Te szeretnéd. Ehhez persze hozzátartozik a színek okos használata is.

Mindenesetre gyakorlással és türelemmel megtanulhatod kialakítani a hatékony aszimmetriát, és lehet egy sokkal izgalmasabb weboldalad. Az aszimmetrikus design mindezek alapján elsősorban olyan cégeknek való, melyek az egyediségükkel akarnak hatni, művészi vagy modern a megjelenésük, lendületet, dinamizmust akarnak kifejezni, és innovatív termékekkel szállnak be a versenybe.

Sugárirányú egyensúly

Mindezeken túl azonban beszélhetünk úgynevezett radiális vagy sugárirányú egyensúlyról is. Ilyenkor nem egy vonal mentén tükrözünk szimmetriát kialakítva, hanem egy középen elhelyezett pontból. Ez persze azt eredményezi, hogy amennyiben akár egy függőleges, akár egy vízszintes vonallal kettéválasztjuk a felületet, mindig találni fogunk mindkét oldalon egymásnak megfelelő elemeket, azonos távolságra a vonaltól.

A legegyszerűbb példa erre az egyensúlyra a nap és annak sugarai, melyek a középpontból nyúlnak ki, vagy egy tó felszínén kirajzolódó hullámok, amikor beledobunk egy követ. Ami ezt a megoldást igazán különlegessé teszi, hogy a felhasználó figyelme egyrészt a középpontra irányul, másrészt el is vándorol onnan kifelé, és ismét visszatér. Vagyis nagyon könnyű ezáltal kialakítani a fókuszpontot.

Van erre is példa természetesen a webdesignban, még ha nem is olyan gyakori az előfordulása, mint a másik két megoldásnak. Itt van például a Vlog, mely animációjával még fokozza is a hatást, szinte hipnotizálva az embert.

Ezzel el is jutottunk a végére. Most már talán Te is tudatosabban fogod figyelni az eléd kerülő weboldalakon az egyensúly megjelenését vagy éppen annak hiányát. Fontos azonban megérteni, hogy az egyensúly kialakítása nem csak az esztétika miatt fontos, hanem azért is, mert javítja a felhasználói élményt. Azáltal, hogy megkönnyíti a látogatóknak az információk befogadását és a navigációt a weboldalon.

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.

Comments are closed.