Keresés
Header Háttér

Webshark Blog

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

2020-09-170 komment

Mi a hasonlóság elve? És miért fontos a webdesignban?

Azokat az elemeket, melyek a formájukat, méretűket vagy színűket tekintve hasonlóak, a felhasználók egy csoportba tartozónak érzékelik, míg azokat az elemeket, melyek valamilyen jellemzőjüket tekintve eltérnek, egy másik csoportba tartozónak. A hasonlóság ezért fontos elv a weboldalak tervezésénél.

Korábban már írtunk a Gestalt-elvekről és ennek kapcsán részletesen körüljártuk a közelség elvét. Most egy másik fontos elvre hívnánk fel a figyelmet a Nielsen Norman Group egy újabb alapos cikke alapján: ez pedig a hasonlóság elve.

Az elv lényegében azt mondja ki, hogy azokat a tárgyakat, melyek vizuális jellemzői hasonlóak, kapcsolódónak érzékeljük, ellentétben az eltérő megjelenésű tárgyakéval. A következetesen alkalmazott vizuális szabályok ezért rendkívül fontosak abban, hogy segítsenek a felhasználóknak megérteni és használni egy weboldalt. Hiszen minden interakció során kialakulnak várakozások a felhasználókban azzal kapcsolatban, hogy a hasonló elemek miképpen működnek.

A hasonlóság elve miatt itt sorok helyett oszlopokat látunk. Ha sorban lennének azonosak az elemek, akkor sorokat látnánk.

A hasonlóság elve az egyike az első vizuális csoportosítási elveknek a közelség elve mellett, melyet a Gestalt pszichológusai fogalmaztak meg. Ezek a pszichológusok azt próbálták megérteni, miként fogadják be az emberek a világot és miként döntenek arról, hogy bizonyos dolgok egy csoportba tartoznak.

A hasonlóság elve szerint tehát, amikor elemek vizuális karakterisztikája hasonló, akkor azt feltételezik, hogy azok kapcsolatban állnak egymással. Az elemeknek nem kell tökéletesen egyezőnek lenniük, mindössze legalább egy vizuális jellemzőjüknek kell megegyezni. Ez lehet

  • szín
  • forma
  • méret

A hasonlóság elve akkor is működik, ha az elemeknek eltérő az elhelyezésük. A hasonlóság elve azonban nem feltétlenül a legerősebb csoportosítási elv, mivel a közelség vagy az azonos elhelyezés felülírhatja, ugyanakkor a legrugalmasabbnak számít.

A szín

Egy szín alkalmazása jól jelzi, ha bizonyos elemek összetartoznak, így pedig feltételezhetően azonos a funkciójuk. A szín erősebb, mint más jellemzők, így például a forma, ahogy ezen a képen is látszik:

A felhasználói felületek designjában a színt gyakran használják az azonos funkció jelölésére. Ilyen például, amikor a kattintható elemek, például a linkek, mindig azonos színűek. A szín maga jelzi, hogy kattintható elemről van szó. Fontos azonban, hogy amikor egy kattintható elemet valamilyen színnel jelölünk, akkor azzal a színnel ne jelöljünk például olyan ikonokat vagy címsorokat, melyek nem kattinthatóak.

Az azonos színű gombok ráadásul azonos fontosságot is jeleznek, így ha egy eltérő színű gombot használunk, akkor az a másodlagos fontosságot jelöli.

A forma

A felhasználói felületeken gyakran alkalmazzuk ugyanazt a négyzet alakot, ha azt akarjuk jelezni, hogy egy gombról van szó, ezzel erősítve közöttük a kapcsolatot. Amikor azt látjuk, hogy bizonyos elemek azonos formát vesznek fel, akkor egyébként azt feltételezzük, hogy valóban azonos a funkciójuk. Ez akkor okoz problémát, amikor azonos formájú elemeknek más a funkciójuk egy weboldalon belül.

Itt azonos ikon jelenik meg eltérő linkeknél:

Az NNG egyébként egy korábbi vizsgálatában megállapította, hogy a felhasználók sokkal gyorsabban megtalálnak egy elemet egy listában, ha annak egyedi a formája. Ha az elemek nagyon hasonlóak, akkor sokkal tovább tart átfutniuk a listát és megtalálni a keresett elemet.

Méret

A méret szintén jelezhet elemek között kapcsolatot. Azok az elemek, melyek hasonló méretűek a felhasználók szemében valószínűleg azonos fontosságúnak tűnnek. A felhasználói felületeken gyakran használjuk a méretet azon célból, hogy egy elem fontosságát jelezzük. Az azonos méret azonos fontosságot jelez. A méret következetes használata pedig megteremti a vizuális hierarchiát, mely által a weboldal könnyebben áttekinthető, megérthető.

Persze nem csak a szín, a forma vagy a méret mutathat hasonlóságot elemek között, így például szövegek esetén a vastag vagy dőlt betűs szedés is kapcsolatra utal elemek között. De ugyanígy a tájolás vagy akár a mozgás is kapcsolatot jelez. Látható tehát, hogy a hasonlóság elve teljesen áthatja a vizuális designt, minden egyes weboldal esetében érvényes és működik. Ha nem tudatosan tervezünk a hasonlósággal, akkor zavart okozhat a felhasználókban a weboldalunk, míg gondos tervezésnél javítja a használhatóságot.

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.