Miért használunk sokszor lekerekített sarkokat a webdesignban? És miért lett ebből designtrend? (Frissítve, 2023.08.30.)

Talán megfigyelted már, hogy a gombok többnyire valamilyen mértékben lekerekített sarkokkal jelennek meg a weboldalakon vagy az applikációkban. De ugyanez a helyzet a valós, fizikai eszközöknél is. Ráadásul a lekerekített sarok az elmúlt években kifejezetten webdesign-trenddé alakult. De miért olyan hasznosak és népszerűek a lekerekített sarkok? (Frissítés, 2023.08.30. – Egy új fejezettel bővítettünk: Egyre elterjedtebbek a lekerekített sarkok a webdesignban)

Akár a digitális, akár a fizikai felületeken nézel körül, többségében lekerekített sarkú gombokat látsz, nem pedig szabályos négyszögeket. Olyannyira, mintha a lekerekített sarkok szabvánnyá váltak volna a webdesigban. De nem csak a gomboknál használják, egész weboldalak designját is egyre gyakrabban határozzák meg a lekerekített sarkok (amire hamarosan mutatunk is néhány példát, de előbb lássuk az okot.)

A tanulmányok azt mutatják: a lekerekített sarkú négyzeteket könnyebben befogadja az emberek tekintete, mint a szabványos négyszögeket, éles sarkokkal. Lehet, hogy elsőre furcsán hangzik, de azért, mert kisebb kognitív erőfeszítést igényel a befogadásuk: a szem, illetve az agy gyorsabban dolgozza fel a kör alakú alakzatok látványát. A négyszögek látványának feldolgozásához viszont több neuronális eszközt kénytelen igénybe venni. Ez pedig azt jelenti, hogy mivel egy lekerekített sarkú négyszög közelebb áll a körhöz, ezért könnyebb a feldolgozása.

A Barrow Neurológiai intézetben azt is megállapították, hogy egy sarok annál „világosabbnak” tűnik, minél szögletesebb. Ráadásul minél világosabb egy elem, illetve annak egy része, annál nagyobb erőfeszítést igényel ránézni.

Ráadásul az ember hamar megtanulja, hogy az éles sarkok általában veszélyesek, így a fizikai világban igyekszünk őket kerülni, és szívesebben használunk lekerekített, természetesebbnek és biztonságosabbnak tűnő tárgyakat.Vagyis, amikor egy kisgyerek egy labdával játszik, akkor ritkán pánikolnak a szülők. Viszont ha egy éles tárgyat kaparint a kezébe, és itt nem csak olyan eszközökről lehet szó, mint mondjuk egy kés, hanem elég egy éles sarkú tárgy, akkor mindjárt feléled bennük a félelem, hogy meg fog sérülni a gyerek. Az idegtudomány ezt elkerülő válasznak hívja, mely beépül az emberbe az élete során, többek között az éles eszközökkel szemben.

Ez az oka annak, hogy még akár grafikonoknál is sokkal hatékonyabb lekerekített sarkokat használni, hiszen az emberek szeme könnyebben követi a lágy vonalakat. A hullámzó vonalak hatékonyan vezetik a tekintetet, és ugyanez a helyzet egy lekerekített sarokkal is. Ezzel szemben az éles sarkok eltérítik a szemünket a vonalról, vagyis hirtelen megakadunk, amikor az vonal éles szögben irányt vált.

De a lekerekített sarkok akkor is előnyösek, ha valamilyen információs egységet vesznek körbe. Már csak azért is, mivel a lekerekített sarkok az alakzat közepe felé vezetik a tekintetet. Tehát pont a tartalomra irányítják a figyelmet, mely a négyzeten belül található. Ráadásul, ha több négyszög áll egymás mellett, akkor a lekerekített sarkok révén gyorsabban megállapítható, hogy melyik oldal melyik négyzethez tartozik.

Az éles sarkok viszont kifelé mutatnak a négyszögből, elvezetve a tekintetet a fontos információról. Egymás mellett álló négyszögek esetében pedig elsőre nehéz felfogni, hogy melyik oldal melyik négyszöghöz tartozik. Itt ugyanis nem segít a lekerekítés íve az irány megmutatásában.

Ezek alapján persze azt gondolhatod, hogy hajrá, használjunk mindig, mindenhol lekerekített sarkú négyszögeket és javulni fog a UX. Ez azonban nem egészen így van. A lekerekített sarkok alkalmazásának is megvan a maguk helye és ideje, nem minden esetben jelentik a jobb választást.

Amikor egy terméket tervezel, akkor át kell gondolni annak célját, mely összefüggésben van azzal, hogy milyen legyen a benyomása a felhasználónak. Önmagában egy lekerekített sarok nem csinál semmit, csak akkor nyeri el értelmét, ha nagy léptékben, tehát mondjuk a teljes designban következetesen jelenik meg, így megváltoztatva a termék megjelenését és a róla alkotott benyomást.

Itt azonban azt is figyelembe kell akkor venni, hogy egyes formák esetében más asszociációk keletkeznek bennünk:

• A négyzetes formákat általában megbízhatóbbnak, egységesebbnek, tradicionálisabbnak és professzionálisabbnak látjuk.
• A háromszögek dinamikusak, energikusak, erősek.
• A kör formák viszont barátságosak, szeretnivalók és veszélytelenek.

Emiatt tehát át kell gondolni a célt, a márkát, a terméket a tervezésnél, mert a választott formáknak nagy hatása lesz arra, hogy milyen kép alakul ki a felhasználókban róla. A lekerekített sarkok tehát hatékonyak lehetnek, ha barátságosnak akarunk látszani, de van aki a megbízhatóságot, professzionalizmust szeretné inkább hangsúlyozni.

Másrészt, ha minden elem lekerekített sarkú a weboldalunk vagy az alkalmazásunkban, akkor azonos a megjelenésük, így egy lekerekített sarkú gomb nem fog kitűnni a sok hasonló forma közül. Ha van egy CTA-gombunk, akkor az abban az esetben lesz feltűnő a lekerekített sarkaival, ha csak ennél az egyetlen elemnél alkalmazunk lekerekített sarkokat.

A lényeg tehát, hogy megvan a mélyen húzódó oka annak, amiért az emberek szeretik a lekerekített sarkokat mind a fizikai, mind a digitális világban. Ennek ellenére nem érdemes mindig, mindenhol lekerekített sarkokat használni, illetve figyelni kell az egyes formák hatására is, valamint arra is, hogy ha vizuális hierarchiát akarunk kialakítani, akkor hogyan használjuk.

Úgy tűnik azonban trenddé vált a webdesignban a lekerekített sarkok használata (már nem csak a gomboknál).

Egyre elterjedtebbek a lekerekített sarkok a webdesignban (FRISSÍTÉS, 2023.08.30.)

Sokan úgy hívják, hogy bento doboz design, mely a nevét a japán bento ételesdobozokról kapta, melyre szintén a lekerekített sarkok a jellemzőek, ugyanakkor megjelenik a tartalom sajátos elrendezése is a (lekerekített sarkú) dobozokban.

A stílus emiatt leginkább olyan weboldalak számára használható, melyek csoportokba tudják rendezni, szervezni a tartalmaikat, és persze szeretnének „puhítani” a megjelenésükön azzal, hogy elkerülik az éles sarkokat, ami vonzóbbá, hívogatóbbá is teszi a weboldalt az emberek számára.

Mi jellemző erre a stílusra?

• A tartalom dobozokba van rendezve, hasonlóan a bento-dobozok rekeszeihez.
• Az egyes dobozok különféle típusú tartalmakat tartalmazhatnak: képeket, szövegeket, videókat, interaktív elemeket.
• Harmonikus és kiegyensúlyozott megjelenés az esztétikus elrendezés és a megfelelő whitespace révén.
• Ezt erősíti a dobozok rács-alapra tétele.
• Gyakran használnak erős színeket, hogy az egyes részeket megkülönböztessék egymástól.
• Ezen színek és a lekerekített sarkok miatt a design játékossá, vidámmá válik, amit az egész oldal designjával követni érdemes.

Hogyan használd a bento-dobozokat a weboldaladon?

Amikor lekerekített sarkokat használsz, különösen rács-alapú rendszerben, akkor az oldal vizuálisan harmonikussá, barátságossá válik. Ehhez azonban szükséges, hogy a dobozok között megtartsd a megfelelő (és általában azonos) távolságot. Ezáltal kapnak teret az egyes elemek és teszik lehetővé a könnyű interakciót az emberek számára.

Fontos még:

• a tartalmak logikus rendszerezése és a túlzsúfoltság elkerülése
• a megfelelő vizuális hierarchia kialakítása, mely a legfontosabb elemhez vezeti a felhasználók tekintetét
• a sarkok lekerekítettsége változó lehet, a kérdés az, hogy milyen mértékű lekerekítés passzol jobban a weboldalhoz
• a whitespace használatával előzhető meg a zsúfoltság és érhető el egy elegáns megjelenés
• ha nem passzol a cégedhez a bento doboz stílus, akkor ne használd!
• alkalmazható minden weboldal-elemnél, de van amikor túl sok lesz már a lekerekített sarkokból, ezért érdemes olykor kombinálni éles sarkokkal

Címkék: webdesign

Hozzászólás jelenleg nem lehetséges.