Keresés
Header Háttér

Webshark Blog

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

2019-03-130 komment

Mekkora legyen egy gomb mobilos felületen?

A Te mobilos felületeiden a felhasználók könnyedén nyomkodják a gombokat, vagy időnként eltévesztik a célt? Ha az utóbbi a helyzet, akkor se őket hibáztasd, hanem vizsgáld meg újra a gomb elhelyezését és méretét.

Ha egy gombnak nincs meg a megfelelő mérete és elhelyezése, akkor mobilos használatnál nagyon könnyen előfordul, hogy vagy nem találják el a felhasználók, vagy pedig másik gombot nyomnak meg helyette. De mekkora is legyen egy mobilos felületen megjelenő gomb? A Uxmovement most egy bejegyzésében nagyon jól érthetően lefektette az alapokat. Úgyhogy, ha még nem vagy tisztában az optimális mérettel (CSS pixelben, 96 DPI-nél) , akkor fuss neki ennek a pár bekezdésnek.

Gombméret szabályok

A gombméreteket tekintve kialakításra kerültek már szabványok, így nem kell a sötétben tapogatózni. Kutatások révén kiderült, hogy melyek azok a méretek és távolságok, melyek jól működnek, mivel a legtöbb felhasználó számára – beleértve az időseket is – könnyű a használatuk.

A tanulmányból kiderül, hogy egy 42 pixeles méret alatt például drámaian romlik az érintési hatékonyság. De az is kiderül, hogy 72 pixel felett ugyanígy romlik a hatékonyság. Ez tehát azt jelenti, hogy a minimális méret 42 pixel, míg a maximális 72 pixel. A legkedveltebb gombméret egyébként a 60 pixeles, de a 72 pixeles hozza a legnagyobb érintési pontosságot, és az idősebb felhasználók ezt kedvelik a legjobban.

A gomboknál ugyanakkor a fontossági sorrendet is figyelembe kell venni. Ennek megjelenítésével fogják tudni a felhasználók azt, hogy melyik gomb viszi közelebb őket a tervezett céljukhoz, és melyik zsákutca. A sorrend nagyon egyszerűen a gombméretekkel határozható meg. Nincs szükség arra, hogy önkényesen kitalálj egy méretet, majd reménykedj abban, hogy az összhangban van a felhasználói igényekkel.

A fenti ábrán látható, hogy a magas prioritású gomb mérete 72 pixeles, a közepesé 60 pixeles, míg az alacsony prioritásúé 42 pixel. Nyilván azt a gombot, melyet a a felhasználók a leggyakrabban használnak, könnyen láthatóvá és megérinthetővé kell tenni. Ezáltal gyorsabban és nagyobb hatékonysággal képesek használni. Ez különösen akkor fontos, ha a felhasználók figyelme különböző feladatok között oszlik meg.

Gombtávolság szabály

Amikor a vizsgálat szerint a gombok túl távol estek egymástól, akkor a felhasználók sokkal lassabban értek oda a célhoz. Ugyanakkor, ha túl közel helyezkedtek egymáshoz, akkor pontatlanná vált az érintés.

A vizsgálat szerint 12-48 pixel közötti távolság az optimális a gombok között. Ezeket a távolságokat az eltérő gombméretek esetében is alkalmazhatod. A különböző távolságok különböző gombméretek esetében optimálisak:

  • 12-24 pixel a nagy gomboknál
  • 24-36 pixel a közepes gomboknál
  • 36-48 pixel a kis gomboknál

Ez azért alakul így, mert a nagyobb gombokat akkor is könnyebben érintik meg a felhasználók, ha azok közelebb vannak egymáshoz. Ugyanakkor egy kisméretű gombnál kis távolság esetén nagy a hibázás lehetősége.

Mekkora legyen a gombon lévő szöveg?

Az előbb felsorolt szabványok vajon alkalmazhatók a szöveges gomboknál is? Igen, de alapvetően csak a gombok magasságánál vehetők figyelembe, hiszen a szélességek a szövegtől függően változhatnak.

A fenti példán látszik, hogy egy szöveges gomb, melynek a magassága 60 pixel, jóval szélesebb is lehet, mint a 60 pixeles ikonos gomb. Tulajdonképpen a szélesebb szöveges gombot jóval nagyobb hatékonysággal lehet eltalálni, mivel kisebb pontosságot igényel a művelet a nagyobb méret miatt. Ilyenkor tehát a gombok magassága az, amely meghatározza a pontosságot.

Ugyanakkor a gombtávolságra vonatkozó szabályok nem alkalmazhatók a szöveges gomboknál a nagyobb szélesség miatt. Ami viszont biztosan tűnik, az az, hogy egy legalább 12 pixeles távolság már megteremti a vizuális elválasztottságot.

Összességében tehát elmondható, hogy ha pusztán az érzéseidre hagyatkozol a gombok méreteinek és távolságainak meghatározásánál, akkor az nagy bizonytalanságot jelent. Sokkal hatékonyabb, ha a fent felsorolt méreteket alkalmazod. Gondold tehát át, hogy milyen szabványméreteket használsz általában, és a fenti szabályok alapján állítsd be ezeket a méreteket, ezáltal minden felületen jobb felhasználói élményt leszel képes elérni.

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.