<\/p>\n\n\n\n\n\n\n\n
A gondos tervez\u00e9s az\u00e9rt is fontos, mert egy gomb sokszor kapcsol\u00f3dik a CTA-hoz, vagyis mag\u00e1ra a konverzi\u00f3ra ennek seg\u00edts\u00e9g\u00e9vel ker\u00fcl sor. Ha nem siker\u00fcl a kialak\u00edt\u00e1sa, akkor k\u00f6zvetlen\u00fcl rontja a weboldal eredm\u00e9nyeit. L\u00e1ssuk teh\u00e1t az alapokat!<\/p>\n\n\n\n
Mit\u0151l hat\u00e9kony egy gomb?<\/h2>\n\n\n\n
Egy hat\u00e9kony gombnak jeleznie kell mag\u00e1r\u00f3l, hogy gombk\u00e9nt funkcion\u00e1l, a felhaszn\u00e1l\u00f3nak pedig tudnia kell, hogy mit v\u00e1rhat a gombt\u00f3l. A hat\u00e9kony gomb mindig t\u00e1j\u00e9koztatja a felhaszn\u00e1l\u00f3t arr\u00f3l, hogy mi fog t\u00f6rt\u00e9nni, amikor kapcsolatba l\u00e9p vele. Emellett jeleznie kell a gombnak a saj\u00e1t fontoss\u00e1g\u00e1t is.<\/p>\n\n\n\n Egy gomb teh\u00e1t akkor tekinthet\u0151 hat\u00e9konynak, ha <\/p>\n\n\n\n Miel\u0151tt belev\u00e1gn\u00e1l egy gomb megtervez\u00e9s\u00e9be meg kell \u00e9rtened, hogy mik\u00e9nt is \u00e9p\u00fcl fel. Amennyiben a gombon ikon is megjelenik, akkor az a balr\u00f3l jobbra t\u00f6rt\u00e9n\u0151 olvas\u00e1s miatt a bal oldalra ker\u00fcl.<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2022.10.26.:<\/em><\/p>\n\n\n\n \u00c1ltal\u00e1ban minden fel\u00fclet egyn\u00e9l t\u00f6bb t\u00edpus\u00fa gombot tartalmaz a jobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny \u00e9rdek\u00e9ben. A k\u00fcl\u00f6nb\u00f6z\u0151 t\u00edpus\u00fa gombok p\u00e9ld\u00e1ul seg\u00edtenek a felhaszn\u00e1l\u00f3knak abban, hogy megk\u00fcl\u00f6nb\u00f6ztess\u00e9k a fontosat a kev\u00e9sb\u00e9 fontost\u00f3l azzal, hogy jobban vagy kev\u00e9sb\u00e9 h\u00edvj\u00e1k magukra a figyelmet.<\/p>\n\n\n\n Hab\u00e1r els\u0151re sokaknak \u00fagy t\u0171nhet, hogy rengeteg gombst\u00edlussal lehet tal\u00e1lkozni a weboldalakon \u00e9s az applik\u00e1ci\u00f3kban, ezek alapvet\u0151en csak n\u00e9h\u00e1ny t\u00edpusba sorolhat\u00f3k. \u00c9s itt most nem arr\u00f3l van sz\u00f3, hogy l\u00e9teznek p\u00e9ld\u00e1ul v\u00e1lt\u00f3gombok vagy r\u00e1di\u00f3gombok, hanem az egyszer\u0171 kattinthat\u00f3 vagy \u00e9rinthet\u0151 gombok eszt\u00e9tik\u00e1j\u00e1r\u00f3l, illetve, hogy ezek jellemz\u0151en milyen kontextusban jelenhetnek meg.<\/p>\n\n\n\n Ez az alapvet\u0151 gombt\u00edpus, melynek keret\u00e9t teljes kit\u00f6lti a gomb sz\u00edne, csak a sz\u00f6veg jelenik meg rajta. Mivel kattinthat\u00f3 elemr\u0151l van sz\u00f3, \u00edgy ezek sokszor figyelemfelkelt\u0151 sz\u00ednt kapnak, \u00edgy t\u00f6k\u00e9letes v\u00e1laszt\u00e1st jelentenek az els\u0151dleges CTA megjelen\u00edt\u00e9s\u00e9hez.<\/p>\n\n\n\n Ezt a t\u00edpus\u00fa gombot akkor \u00e9rdemes haszn\u00e1lni, ha szeretn\u00e9nk r\u00e1venni a felhaszn\u00e1l\u00f3t egy konkr\u00e9t cselekv\u00e9s elv\u00e9gz\u00e9s\u00e9re. Sz\u00f6vegk\u00e9nt ker\u00fclhet bele „let\u00f6lt\u00f6m”, „feliratkozom” \u00e9s hasonl\u00f3 szavak.<\/p>\n\n\n\n \u00c9rdemes figyelni arra, hogy a gomb nincs mindig akt\u00edv \u00e1llapotban. Amikor nem kattinthat\u00f3 a gomb, akkor elt\u00e9r\u0151 vizu\u00e1lis megjelen\u00e9st kell neki adni, p\u00e9ld\u00e1ul sz\u00fcrke sz\u00ednt kaphat a gomb \u00e9s a benne l\u00e9v\u0151 sz\u00f6veg is.<\/p>\n\n\n\n A form\u00e1t tekintve k\u00e9t alapvet\u0151 megold\u00e1sr\u00f3l besz\u00e9lhet\u00fcnk: <\/p>\n\n\n\n Hogy melyiket v\u00e1lasztjuk, a weboldal vagy applik\u00e1ci\u00f3 vizu\u00e1lis designja hat\u00e1rozza meg. Teh\u00e1t, ha az egyes elemek sz\u00f6gletesek, akkor a gombnak is olyannak kellene lennie. <\/p>\n\n\n\n Ami m\u00e9g fontos, hogy kattint\u00e1s eset\u00e9n a gomb visszajelz\u00e9st adjon a felhaszn\u00e1l\u00f3nak arr\u00f3l, hogy kattintott. <\/p>\n\n\n\n A szellemgomb annyiban k\u00fcl\u00f6nb\u00f6zik a sz\u00ednnel kit\u00f6lt\u00f6tt gombt\u00f3l, hogy nincs benne sz\u00edn, csak a keret jelenik meg. A szellemgomb alapvet\u0151en egy m\u00e1sodlagos gomb, ami alternat\u00edv\u00e1t k\u00edn\u00e1l az els\u0151dleges gombhoz k\u00e9pest. Emellett haszn\u00e1lhat\u00f3 olyan esetben is, ha a gombbal nem akarjuk megzavarni a felhaszn\u00e1l\u00f3t. Ezzel azt haszn\u00e1ljuk ki, hogy kisebb a vizu\u00e1lis s\u00falya, mint a norm\u00e1l gombnak, \u00edgy a fel\u00fcletet kev\u00e9sb\u00e9 terheli.<\/p>\n\n\n\n Az ikon-gomb egy olyan gomb, mely nem kap sz\u00f6veget, csak egy ikon jelenik meg benne. F\u0151 el\u0151nye, hogy kis helyet foglal, \u00edgy j\u00f3 lehet\u0151s\u00e9g men\u00fckben vagy rendszers\u00e1vokon a sok funkci\u00f3 kis ter\u00fcleten val\u00f3 megjelen\u00edt\u00e9s\u00e9re.<\/p>\n\n\n\n Itt els\u0151sorban az a fontos, hogy az ikonok jelent\u00e9s\u00e9t \u00e9rts\u00e9k a felhaszn\u00e1l\u00f3k. Ha a felhaszn\u00e1l\u00f3k nem \u00e9rtik az ikonokat, akkor nem mernek majd kattintani. Ez\u00e9rt szokt\u00e1k a designerek olykor azt mondani, hogy a legjobb ikon a sz\u00f6veg. Seg\u00edt az is, ha tooltipk\u00e9nt, hoverrel jelenik meg az ikon-gomb le\u00edr\u00e1sa, mert \u00edgy t\u00e1j\u00e9koztat\u00e1st ad a felhaszn\u00e1l\u00f3nak a funkci\u00f3j\u00e1r\u00f3l.<\/p>\n\n\n\n A lebeg\u0151 akci\u00f3gombokat a Google tette n\u00e9pszer\u0171v\u00e9 a material designnal. Ezek ikon-gombok n\u00e9mi \u00e1rny\u00e9kkal, \u00e9s \u00e1ltal\u00e1ban a kijelz\u0151 jobb als\u00f3 sark\u00e1ban jelennek meg. Els\u0151dleges CTA-k\u00e9nt jelenik meg mobilalkalmaz\u00e1sokban (desktopon is haszn\u00e1lhat\u00f3, de mivel ott el\u00e9g nagy a t\u00e9r, nincs sok \u00e9rtelme), \u00e9s \u00e1ltal\u00e1ban egyetlen cselekv\u00e9s elv\u00e9gz\u00e9s\u00e9re alkalmas. Hab\u00e1r tal\u00e1lkozhatunk olyan alkalmaz\u00e1sokkal, ahol a lebeg\u0151 akci\u00f3gomb t\u00f6bb funkci\u00f3t is kap, ezt jobb elker\u00fclni, mert t\u00fal bonyolultt\u00e1 v\u00e1lik a fel\u00fclet.<\/p>\n\n\n\n Itt megint csak arra kell figyelni, hogy az ikon jelent\u00e9se egy\u00e9rtelm\u0171 legyen a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, k\u00fcl\u00f6n\u00f6sen az\u00e9rt, mert az els\u0151dleges cselekv\u00e9st lehet \u00e1ltala megtenni. Ha a felhaszn\u00e1l\u00f3k nem \u00e9rtik az ikon jelent\u00e9s\u00e9t, nem fognak kattintani. <\/p>\n\n\n\n A gomboknak teh\u00e1t vizu\u00e1lis vagy hangjelz\u00e9st kell adnia k\u00fcl\u00f6nb\u00f6z\u0151 \u00e1llapotair\u00f3l. A j\u00f3l megtervezett gomb megv\u00e1ltoztatja \u00e1llapot\u00e1t a felhaszn\u00e1l\u00f3i interakci\u00f3nak megfelel\u0151en. Egy rossz gomb f\u00e9lre tudja vezetni a felhaszn\u00e1l\u00f3. Melyek ezek az \u00e1llapotok? <\/p>\n\n\n\n A vizu\u00e1lis jelz\u00e9sek \u00e1ltal ezeknek az \u00e1llapotoknak hat\u00e1rozottan elk\u00fcl\u00f6n\u00edthet\u0151nek kell lenni\u00fck. <\/p>\n\n\n\n Gyakran el\u0151fordul egy weboldalon, hogy nem csak egy gombra van sz\u00fcks\u00e9g, hanem kett\u0151re. Ilyenkor van egy els\u0151dleges fomb, mely a f\u0151 cselekv\u00e9st teszi lehet\u0151v\u00e9 az oldalon, p\u00e9ld\u00e1ul egy \u0171rlap elk\u00fcld\u00e9s\u00e9t vagy egy megrendel\u00e9st egy web\u00e1ruh\u00e1zban. Ugyanakkor megjelenik mellette m\u00e1s funkci\u00f3j\u00fa gomb is, melynek vizu\u00e1lisan is el kell k\u00fcl\u00f6n\u00fclnie. <\/p>\n\n\n\n Ha els\u0151dleges \u00e9s m\u00e1sodlagos gombok is megjelen\u00edt\u00e9sre ker\u00fclnek egy weboldalon vagy applik\u00e1ci\u00f3ban, akkor<\/p>\n\n\n\n Egy p\u00e1rbesz\u00e9dpanel k\u00e9rd\u00e9seket fogalmaz meg a felhaszn\u00e1l\u00f3nak, majd hagyja \u0151ket valamilyen parancsot adni. Az alapvet\u0151 megold\u00e1s az Ok \u00e9s a T\u00f6rl\u00e9s gomb, melyeknek sorrendj\u00e9t tekintve nincs egyet\u00e9rt\u00e9s. A Windows p\u00e9ld\u00e1ul jobb oldalra teszi az Ok-t, m\u00edg az Apple vagy a Google balra.<\/p>\n\n\n\n Egy alkalmaz\u00e1sn\u00e1l teh\u00e1t az adott platform szab\u00e1lyait kell k\u00f6vetni, ugyanakkor weboldalakn\u00e1l ez nem j\u00e1rhat\u00f3 \u00fat, ott azt kell figyelembe venni, hogy a legt\u00f6bb felhaszn\u00e1l\u00f3 milyen eszk\u00f6zt haszn\u00e1l. Ezekn\u00e9l a gombokn\u00e1l is c\u00e9lszer\u0171 azonban az \u00e1ltal\u00e1nos Ok\u00e9\/Nem sz\u00f6vegt\u0151l elt\u00e9r\u0151 sz\u00f6veget haszn\u00e1lni.<\/p>\n\n\n\n A kontrasztar\u00e1ny a gombokn\u00e1l alapvet\u0151en azt fejezi ki, hogy mennyire t\u00e9r el a gombon szerepl\u0151 sz\u00f6veg sz\u00edne a gomb sz\u00edn\u00e9t\u0151l. Emellett ugyanakkor azt is figyelembe kell venni, hogy milyen a kontraszt a h\u00e1tt\u00e9rsz\u00edn \u00e9s a gombsz\u00edn k\u00f6z\u00f6tt, valamint ha k\u00fcl\u00f6nb\u00f6z\u0151 gombok (akt\u00edv-inakt\u00edv, els\u0151dleges-m\u00e1sodlagos gomb) ker\u00fclnek egym\u00e1s mell\u00e9, akkor ezek sz\u00edne k\u00f6z\u00f6tt.<\/p>\n\n\n\n A World Wide Web Consortium (W3C) \u00e1ltal aj\u00e1nlott kontrasztar\u00e1ny a gomb \u00e9s a sz\u00f6veg sz\u00edn\u00e9nek viszony\u00e1ban legal\u00e1bb 4,5:1, kiv\u00e9ve a k\u00f6vetkez\u0151 eseteket:<\/p>\n\n\n\n Ezen t\u00fal azonban, ha k\u00fcl\u00f6nb\u00f6z\u0151 gombok ker\u00fclnek egym\u00e1s mell\u00e9, akkor fontos, hogy a kontraszt \u00e1ltal is megjelen\u00edts\u00fck azok hierarchi\u00e1j\u00e1t. En\u00e9lk\u00fcl ugyanis a felhaszn\u00e1l\u00f3k nehezebben fogj\u00e1k kital\u00e1lni, hogy melyik az els\u0151dleges gomb, ez pedig zavart, megtorpan\u00e1st eredm\u00e9nyez, ami a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny szempontj\u00e1b\u00f3l k\u00e1ros.<\/p>\n\n\n\n Milyen esetekben kell figyelembe venni a gombok hierarchi\u00e1j\u00e1n\u00e1l a kontrasztar\u00e1nyt? P\u00e9ld\u00e1ul, amikor van egy els\u0151dleges \u00e9s egy m\u00e1sodlagos gombod is. Ezek st\u00edlusa is elt\u00e9r persze: m\u00edg az els\u0151dleges gomb egy teli gomb, addig a m\u00e1sodlagos k\u00f6rvonalas. Ez azonban m\u00e9g nem elegend\u0151 a k\u00f6z\u00f6tt\u00fck l\u00e9v\u0151 hierarchia kifejez\u00e9s\u00e9re, be kell vetni a megfelel\u0151 kontrasztar\u00e1nyt is. Ha azonos sz\u00edn\u0171, de k\u00f6rvonalas a gomb, az m\u00e9g nem el\u00e9g egy\u00e9rtelm\u0171, ahogy az l\u00e1tszik a bal oldali gombokn\u00e1l:<\/p>\n\n\n\n Ahhoz, hogy az els\u0151dleges gombod elegend\u0151 figyelmet kapjon, a m\u00e1sodlagos gombodn\u00e1l cs\u00f6kkenteni kell a kontrasztar\u00e1nyt. Ezt megteheted az \u00e1rnyalat megv\u00e1ltoztat\u00e1s\u00e1val, a l\u00e9nyeg, hogy a cs\u00f6kkentett kontrasztar\u00e1ny is legyen elegend\u0151 a megfelel\u0151 olvashat\u00f3s\u00e1ghoz.<\/p>\n\n\n\n Egyesek \u00fagy pr\u00f3b\u00e1lj\u00e1k kifejezni egy m\u00e1sodlagos gomb hely\u00e9t a hierarchi\u00e1ban, hogy fekete sz\u00ednt adnak neki. Val\u00f3sz\u00edn\u0171leg abb\u00f3l a megfontol\u00e1sb\u00f3l, hogy a fekete egy semleges sz\u00edn, \u00edgy nem verseng az els\u0151dleges gomb sz\u00edn\u00e9vel. A fekete sz\u00ednnek azonban j\u00f3val nagyobb lesz a kontrasztar\u00e1nya, ami \u00e1ltal m\u00e9gis el\u0151t\u00e9rbe tolakodik:<\/p>\n\n\n\n Ez\u00e9rt a fekete helyett ink\u00e1bb egy halv\u00e1nyabb \u00e1rnyalatot vagy vil\u00e1gos sz\u00fcrk\u00e9t \u00e9rdemes haszn\u00e1lni m\u00e1sodlagos gombk\u00e9nt. Ut\u00f3bbi eset\u00e9ben azonban figyelni kell arra, hogy annak kontrasztar\u00e1nya ne legyen nagyobb, mint az els\u0151dleges gomb\u00e9:<\/p>\n\n\n\n Mivel a sz\u00fcrk\u00e9t nem lehet ak\u00e1rmeddig halv\u00e1ny\u00edtani – az olvashat\u00f3s\u00e1g megtart\u00e1sa miatt -, ez\u00e9rt a f\u0151 sz\u00ednt kell s\u00f6t\u00e9tebbre venni. Persze, lehet, hogy pont j\u00f3l mutatna egy vil\u00e1gos f\u0151 sz\u00edn a weboldaladon, azonban ha nincs meg a megfelel\u0151 kontrasztja a h\u00e1tt\u00e9rrel, a sz\u00f6veggel \u00e9s a m\u00e1sik gombbal, akkor haszn\u00e1lhatatlan.<\/p>\n\n\n\n Ha egy gombnak nincs meg a megfelel\u0151 m\u00e9rete \u00e9s elhelyez\u00e9se, akkor mobilos haszn\u00e1latn\u00e1l nagyon k\u00f6nnyen el\u0151fordul, hogy vagy nem tal\u00e1lj\u00e1k el a felhaszn\u00e1l\u00f3k, vagy pedig m\u00e1sik gombot nyomnak meg helyette. De mekkora is legyen egy mobilos fel\u00fcleten megjelen\u0151 gomb? A Uxmovement<\/a> most egy bejegyz\u00e9s\u00e9ben nagyon j\u00f3l \u00e9rthet\u0151en lefektette az alapokat. \u00dagyhogy, ha m\u00e9g nem vagy tiszt\u00e1ban az optim\u00e1lis m\u00e9rettel (CSS pixelben<\/a>, 96 DPI-n\u00e9l) , akkor fuss neki ennek a p\u00e1r bekezd\u00e9snek.<\/p>\n\n\n\n A gombm\u00e9reteket tekintve kialak\u00edt\u00e1sra ker\u00fcltek m\u00e1r szabv\u00e1nyok, \u00edgy nem kell a s\u00f6t\u00e9tben tapogat\u00f3zni. Kutat\u00e1sok r\u00e9v\u00e9n kider\u00fclt, hogy melyek azok a m\u00e9retek \u00e9s t\u00e1vols\u00e1gok, melyek j\u00f3l m\u0171k\u00f6dnek, mivel a legt\u00f6bb felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra – bele\u00e9rtve az id\u0151seket is – k\u00f6nny\u0171 a haszn\u00e1latuk. <\/p>\n\n\n\n A tanulm\u00e1nyb\u00f3l kider\u00fcl, hogy egy 42 pixeles m\u00e9ret alatt p\u00e9ld\u00e1ul dr\u00e1maian romlik az \u00e9rint\u00e9si hat\u00e9konys\u00e1g. De az is kider\u00fcl, hogy 72 pixel felett ugyan\u00edgy romlik a hat\u00e9konys\u00e1g. Ez teh\u00e1t azt jelenti, hogy a minim\u00e1lis m\u00e9ret 42 pixel, m\u00edg a maxim\u00e1lis 72 pixel. A legkedveltebb gombm\u00e9ret egy\u00e9bk\u00e9nt a 60 pixeles, de a 72 pixeles hozza a legnagyobb \u00e9rint\u00e9si pontoss\u00e1got, \u00e9s az id\u0151sebb felhaszn\u00e1l\u00f3k ezt kedvelik a legjobban.<\/p>\n\n\n\n A gombokn\u00e1l ugyanakkor a fontoss\u00e1gi sorrendet is figyelembe kell venni. Ennek megjelen\u00edt\u00e9s\u00e9vel fogj\u00e1k tudni a felhaszn\u00e1l\u00f3k azt, hogy melyik gomb viszi k\u00f6zelebb \u0151ket a tervezett c\u00e9ljukhoz, \u00e9s melyik zs\u00e1kutca. A sorrend nagyon egyszer\u0171en a gombm\u00e9retekkel hat\u00e1rozhat\u00f3 meg. Nincs sz\u00fcks\u00e9g arra, hogy \u00f6nk\u00e9nyesen kital\u00e1lj egy m\u00e9retet, majd rem\u00e9nykedj abban, hogy az \u00f6sszhangban van a felhaszn\u00e1l\u00f3i ig\u00e9nyekkel.<\/p>\n\n\n\n A fenti \u00e1br\u00e1n l\u00e1that\u00f3, hogy a magas priorit\u00e1s\u00fa gomb m\u00e9rete 72 pixeles, a k\u00f6zepes\u00e9 60 pixeles, m\u00edg az alacsony priorit\u00e1s\u00fa\u00e9 42 pixel. Nyilv\u00e1n azt a gombot, melyet a a felhaszn\u00e1l\u00f3k a leggyakrabban haszn\u00e1lnak, k\u00f6nnyen l\u00e1that\u00f3v\u00e1 \u00e9s meg\u00e9rinthet\u0151v\u00e9 kell tenni. Ez\u00e1ltal gyorsabban \u00e9s nagyobb hat\u00e9konys\u00e1ggal k\u00e9pesek haszn\u00e1lni. Ez k\u00fcl\u00f6n\u00f6sen akkor fontos, ha a felhaszn\u00e1l\u00f3k figyelme k\u00fcl\u00f6nb\u00f6z\u0151 feladatok k\u00f6z\u00f6tt oszlik meg.<\/p>\n\n\n\n Amikor a vizsg\u00e1lat szerint a gombok t\u00fal t\u00e1vol estek egym\u00e1st\u00f3l, akkor a felhaszn\u00e1l\u00f3k sokkal lassabban \u00e9rtek oda a c\u00e9lhoz. Ugyanakkor, ha t\u00fal k\u00f6zel helyezkedtek egym\u00e1shoz, akkor pontatlann\u00e1 v\u00e1lt az \u00e9rint\u00e9s. <\/p>\n\n\n\n A vizsg\u00e1lat szerint 12-48 pixel k\u00f6z\u00f6tti t\u00e1vols\u00e1g az optim\u00e1lis a gombok k\u00f6z\u00f6tt. Ezeket a t\u00e1vols\u00e1gokat az elt\u00e9r\u0151 gombm\u00e9retek eset\u00e9ben is alkalmazhatod. A k\u00fcl\u00f6nb\u00f6z\u0151 t\u00e1vols\u00e1gok k\u00fcl\u00f6nb\u00f6z\u0151 gombm\u00e9retek eset\u00e9ben optim\u00e1lisak:<\/p>\n\n\n\n Ez az\u00e9rt alakul \u00edgy, mert a nagyobb gombokat akkor is k\u00f6nnyebben \u00e9rintik meg a felhaszn\u00e1l\u00f3k, ha azok k\u00f6zelebb vannak egym\u00e1shoz. Ugyanakkor egy kism\u00e9ret\u0171 gombn\u00e1l kis t\u00e1vols\u00e1g eset\u00e9n nagy a hib\u00e1z\u00e1s lehet\u0151s\u00e9ge. <\/p>\n\n\n\n Az el\u0151bb felsorolt szabv\u00e1nyok vajon alkalmazhat\u00f3k a sz\u00f6veges gombokn\u00e1l is? Igen, de alapvet\u0151en csak a gombok magass\u00e1g\u00e1n\u00e1l vehet\u0151k figyelembe, hiszen a sz\u00e9less\u00e9gek a sz\u00f6vegt\u0151l f\u00fcgg\u0151en v\u00e1ltozhatnak.<\/p>\n\n\n\n A fenti p\u00e9ld\u00e1n l\u00e1tszik, hogy egy sz\u00f6veges gomb, melynek a magass\u00e1ga 60 pixel, j\u00f3val sz\u00e9lesebb is lehet, mint a 60 pixeles ikonos gomb. Tulajdonk\u00e9ppen a sz\u00e9lesebb sz\u00f6veges gombot j\u00f3val nagyobb hat\u00e9konys\u00e1ggal lehet eltal\u00e1lni, mivel kisebb pontoss\u00e1got ig\u00e9nyel a m\u0171velet a nagyobb m\u00e9ret miatt. Ilyenkor teh\u00e1t a gombok magass\u00e1ga az, amely meghat\u00e1rozza a pontoss\u00e1got.<\/p>\n\n\n\n A gombt\u00e1vols\u00e1gra vonatkoz\u00f3 szab\u00e1lyok nem alkalmazhat\u00f3k egy az egyben a sz\u00f6veges gombokn\u00e1l a nagyobb sz\u00e9less\u00e9g miatt. Ami viszont m\u00e1r elfogadhat\u00f3nak t\u0171nik, az az, hogy egy legal\u00e1bb 8 pixeles t\u00e1vols\u00e1g m\u00e1r megteremti a vizu\u00e1lis elv\u00e1lasztotts\u00e1got. Ugyanakkor ebben az esetben nincsenek optim\u00e1lis sz\u00e1mok, ink\u00e1bb csak javaslatok:<\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben teh\u00e1t elmondhat\u00f3, hogy ha puszt\u00e1n az \u00e9rz\u00e9seidre hagyatkozol a gombok m\u00e9reteinek \u00e9s t\u00e1vols\u00e1gainak meghat\u00e1roz\u00e1s\u00e1n\u00e1l, akkor az nagy bizonytalans\u00e1got jelent. Sokkal hat\u00e9konyabb, ha a fent felsorolt m\u00e9reteket alkalmazod. Gondold teh\u00e1t \u00e1t, hogy milyen szabv\u00e1nym\u00e9reteket haszn\u00e1lsz \u00e1ltal\u00e1ban, \u00e9s a fenti szab\u00e1lyok alapj\u00e1n \u00e1ll\u00edtsd be ezeket a m\u00e9reteket, ez\u00e1ltal minden fel\u00fcleten jobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt leszel k\u00e9pes el\u00e9rni.<\/p>\n\n\n\n Ha rossz szavakat haszn\u00e1lsz a gombjaidn\u00e1l, akkor az megzavarja a felhaszn\u00e1l\u00f3kat, nehezebb\u00e9 teszi a feladatuk v\u00e9grehajt\u00e1s\u00e1t, \u00edgy az tov\u00e1bb fog tartani. De hogyan v\u00e1lasszuk ki a megfelel\u0151 kifejez\u00e9seket egy gombhoz? 5 szab\u00e1lyt \u00e9rdemes figyelembe venni.<\/p>\n\n\n\n A gombod sz\u00f6veg\u00e9nek cselekv\u00e9sre kell \u00f6szt\u00f6n\u00f6znie a felhaszn\u00e1l\u00f3kat. Amikor egy cselekv\u0151 ig\u00e9vel tal\u00e1lkoznak, akkor azt felt\u00e9telezik, hogy a gomb azt azonnal v\u00e9grehajtja. A cselekv\u0151 ig\u00e9k haszn\u00e1lata lehet\u0151v\u00e9 teszi sz\u00e1mukra, hogy ne kelljen elolvasniuk a gombhoz kapcsol\u00f3d\u00f3 t\u00f6bbi sz\u00f6veget.<\/p>\n\n\n\n Amennyiben a felhaszn\u00e1l\u00f3knak el kell olvasniuk a gomb feletti t\u00e1j\u00e9koztat\u00f3 sz\u00f6veget, mik\u00f6zben csak egy igen \u00e9s egy nem szerepel a gombokon, azzal n\u0151ni fog a hib\u00e1s kattint\u00e1sok kock\u00e1zata, valamint nagyobb terhel\u00e9st jelent a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra az \u00e9rtelmez\u00e9s. A gombokon l\u00e9v\u0151 ige viszont egy\u00e9rtelm\u0171v\u00e9 teszi, hogy melyik gombt\u00f3l mi v\u00e1rhat\u00f3.<\/p>\n\n\n\n A cselekv\u0151 ig\u00e9knek lehet egy m\u00e1sodlagos \u00e9rtelm\u00fck is. Ha a megfogalmaz\u00e1s nem el\u00e9g pontos, akkor a felhaszn\u00e1l\u00f3 f\u00e9lre\u00e9rtheti a gombon szerepl\u0151 sz\u00f6veget, \u00edgy annak funkci\u00f3j\u00e1t is.<\/p>\n\n\n\n A fenti p\u00e9ld\u00e1n az l\u00e1that\u00f3, hogy nem mindegy, a t\u00f6rl\u00e9s\/elt\u00e1vol\u00edt\u00e1s sz\u00f3nak melyik v\u00e1ltozat\u00e1t haszn\u00e1ljuk. A delete azt fejezheti ki, hogy teljes m\u00e9rt\u00e9kben t\u00f6rl\u00e9sre ker\u00fcl egy f\u00e1jl a rendszerb\u0151l, ami megzavarhatja a felhaszn\u00e1l\u00f3t.<\/p>\n\n\n\n Min\u00e9l t\u00f6bb felhaszn\u00e1l\u00f3 hall \u00e9s haszn\u00e1l egy kifejez\u00e9st, az ann\u00e1l ismertebb\u00e9 \u00e9s elfogadottabb\u00e1 v\u00e1lik. A gombokn\u00e1l olyan szavakat kell v\u00e1lasztani, melyek a mindennapi besz\u00e9dben is el\u0151fordulnak. Ker\u00fclni kell viszont a technikai kifejez\u00e9seket, mert ezeket nem mindenki \u00e9rti. Lehet, hogy Te igen, de a felhaszn\u00e1l\u00f3id nem felt\u00e9tlen\u00fcl. Ugyan\u00edgy ker\u00fcld a szlengben haszn\u00e1lt kifejez\u00e9seket, mert ezek sem mindenki sz\u00e1m\u00e1ra egy\u00e9rtelm\u0171ek!<\/p>\n\n\n\n Min\u00e9l t\u00f6bb sz\u00f3 szerepel egy gombon, ann\u00e1l t\u00f6bbet kell olvasniuk a felhaszn\u00e1l\u00f3knak. Pr\u00f3b\u00e1ld teh\u00e1t minimaliz\u00e1lni a sz\u00e1mukat, haszn\u00e1ld a legegyszer\u0171bb felsz\u00f3l\u00edt\u00e1st, mert azt ak\u00e1r egy pillant\u00e1ssal meg\u00e9rtik a l\u00e1togat\u00f3k. Fontos az is, hogy az emberek megb\u00edznak a gombokon tal\u00e1lhat\u00f3 felsz\u00f3l\u00edt\u00e1sokban, vagyis azt v\u00e1rj\u00e1k a gombt\u00f3l, hogy azt teszi, ami r\u00e1 van \u00edrva. Ez megk\u00f6nny\u00edti sz\u00e1mukra a d\u00f6nt\u00e9shozatalt. <\/p>\n\n\n\n Ker\u00fcld el azokat a felesleges ig\u00e9ket, melyek azt magyar\u00e1zz\u00e1k a felhaszn\u00e1l\u00f3knak, hogyan haszn\u00e1lj\u00e1k az eszk\u00f6z\u00fcket. Itt arra gondolunk, hogy a „kattints ide” sz\u00f6veg a gombokon felesleges, hiszen az emberek m\u00e1r tudj\u00e1k, hogy mit kell tenni\u00fck egy gombbal. Ehelyett annak az ig\u00e9nek kell szerepelnie a gombon, mely a felhaszn\u00e1l\u00f3 a kattint\u00e1st k\u00f6vet\u0151en fog tenni.<\/p>\n\n\n\n A gombod sz\u00f6veg\u00e9nek olyannak kellene lennie, mint egy mondatnak, a mondatv\u00e9gi \u00edr\u00e1sjelet kiv\u00e9ve. Ez azt jelenti, hogy nagy kezd\u0151bet\u0171vel kezd\u0151dj\u00f6n (teh\u00e1t ne kicsi legyen, vagy ne legyen minden bet\u0171 nagy). Amikor norm\u00e1lis mondatokkal tal\u00e1lkoznak a gombokn\u00e1l a felhaszn\u00e1l\u00f3k, az olyan sz\u00e1mukra, mint ha valaki besz\u00e9lne hozz\u00e1juk. <\/p>\n\n\n\n Nagyon gyakran jelenik meg gombokn\u00e1l az a megold\u00e1s is, hogy csupa nagybet\u0171vel vannak \u00edrva. Ez az\u00e9rt nem a legjobb, mert egyes felhaszn\u00e1l\u00f3k „t\u00fal hangosnak” \u00edt\u00e9lhetik, azon okn\u00e1l fogva, hogy a nagybet\u0171s \u00edr\u00e1sm\u00f3d kiab\u00e1l\u00e1st fejez ki. R\u00e1ad\u00e1sul a csupa nagybet\u0171s sz\u00f6vegeknek rosszabb az olvashat\u00f3s\u00e1ga, ugyanakkor viszont az is meg\u00e1llap\u00edt\u00e1st nyert, hogy min\u00e9l r\u00f6videbb egy sz\u00f6veg, ann\u00e1l nagyobb m\u00e9ret\u0171 bet\u0171t \u00e9rdemes haszn\u00e1lni.<\/p>\n\n\n\n Kor\u00e1bban eml\u00edtett\u00fck, hogy a gomboknak 5 \u00e1llapota lehets\u00e9ges. Ugyanakkor ehhez az 5 \u00e1llapothoz csatlakozhat egy hatodik is: a t\u00f6lt\u0151d\u00e9si \u00e1llapot. Mivel egy gomb lenyom\u00e1sa \u00e9s az eredm\u00e9ny k\u00f6z\u00f6tt \u00e1ltal\u00e1ban rendk\u00edv\u00fcl r\u00f6vid id\u0151 telik el, \u00edgy felesleges a t\u00f6lt\u0151d\u00e9si \u00e1llapotot jelezni az emberek sz\u00e1m\u00e1ra. Ugyanakkor el\u0151fordulhatnak olyan m\u0171veletek, melyek a szokottn\u00e1l hosszabb id\u0151t vesznek ig\u00e9nybe. Ilyenkor, ha nem jelezz\u00fck a t\u00f6lt\u0151d\u00e9si \u00e1llapotot, az hib\u00e1kat okozhat.<\/p>\n\n\n\n Ha egy cselekv\u00e9s hat\u00e1s\u00e1ra hossz\u00fa ideig kell v\u00e1rnia a felhaszn\u00e1l\u00f3nak, akkor tudnia kell, hogy a rendszer foglalkozik-e a k\u00edv\u00e1ns\u00e1g\u00e1val. Ha azt l\u00e1tja, hogy nem t\u00f6rt\u00e9nik semmi, akkor arra gondolhat, hogy nem nyomta le megfelel\u0151en a gombot. Emiatt ism\u00e9t kattintani fog. <\/p>\n\n\n\n Amivel viszont nem csak dupl\u00e1zza a m\u0171veletet, hanem lass\u00edtja is annak v\u00e9grehajt\u00e1s\u00e1t. Helyzett\u0151l f\u00fcgg\u0151en ez ak\u00e1r hib\u00e1t is okozhat, ami nem csak a felhaszn\u00e1l\u00f3nak, hanem a rendszernek is gond. Ilyen lehet, ha a felhaszn\u00e1l\u00f3 t\u00f6bbsz\u00f6r k\u00fcld el egy \u00fczenetet, t\u00f6bbsz\u00f6r k\u00fcld el egy \u0171rlapot, vagy t\u00f6bbsz\u00f6r rendeli meg ugyanazt a term\u00e9ket. A t\u00f6bbsz\u00f6ri lenyom\u00e1s \u00e1ltal plusz adatok keletkeznek hib\u00e1san, melyeket kezelni kell. Ez pedig nem egyszer\u0171.<\/p>\n\n\n\n Az ilyen hib\u00e1k megel\u0151z\u00e9s\u00e9re szolg\u00e1lnak a t\u00f6lt\u00e9si \u00e1llapotjelz\u0151k. Gomb eset\u00e9ben, ha egy m\u0171velet k\u00e9t m\u00e1sodpercn\u00e9l hosszabb id\u0151t vesz ig\u00e9nybe<\/strong>, akkor m\u00e1r indokolt haszn\u00e1lni. Ez persze nem egy egzakt sz\u00e1m, de egy kutat\u00e1s szerint az emberek idegesek lesznek, ha egy oldal bet\u00f6lt\u00e9s\u00e9re k\u00e9t m\u00e1sodpercn\u00e9l hosszabb ideig kell v\u00e1rni.<\/p>\n\n\n\n A t\u00f6lt\u0151d\u00e9st jelz\u0151 gomb viszont megmutatja a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, hogy a m\u0171velet folyamatban van. Ebben az esetben a felhaszn\u00e1l\u00f3 kisebb es\u00e9llyel kattint ism\u00e9telten a gombra. <\/p>\n\n\n\n Az \u00e1llapotot persze lehet jelezni a gombon k\u00edv\u00fcl is, amivel kor\u00e1bban a weboldalsebess\u00e9gr\u0151l sz\u00f3l\u00f3 anyagunkban<\/a> m\u00e1r foglalkoztunk. Ugyanakkor sok esetben tal\u00e1n praktikusabb a gombon mag\u00e1n mutatni, hogy elindult a folyamat. Hiszen a felhaszn\u00e1l\u00f3k szeme a gombon van, ha pedig f\u00f6l\u00e9 helyezz\u00fck az \u00e1llapotjelz\u00e9st, nem felt\u00e9tlen\u00fcl veszik \u00e9szre. <\/p>\n\n\n\n Az \u00e1llapotjelz\u0151 elhelyez\u00e9se nem eredm\u00e9nyezheti a gomb n\u00f6veked\u00e9s\u00e9t, \u00e9s nincs sz\u00fcks\u00e9g elt\u00e9r\u0151 h\u00e1tt\u00e9rsz\u00ednre sem. Ahogy a nem-akt\u00edv gombok megjelen\u00e9s\u00e9n\u00e9l mindj\u00e1rt kifejtj\u00fck, nem-akt\u00edv gombk\u00e9nt kell megjelen\u00edteni: a gomb \u00e1ttetsz\u0151s\u00e9g\u00e9t n\u00f6velve. Az \u00e1llapotjelz\u0151 ugyanakkor legyen j\u00f3l l\u00e1that\u00f3 a gombon.<\/p>\n\n\n\n Ha nem f\u00e9r el a k\u00f6r alak\u00fa \u00e1llapotjelz\u0151, akkor haszn\u00e1lhat\u00f3 m\u00e1s megold\u00e1s is. K\u00fcl\u00f6n\u00f6sen akkor, ha a gomb c\u00edmk\u00e9j\u00e9nek \u00e1t\u00edr\u00e1s\u00e1ra is sor ker\u00fcl, amivel szint\u00e9n j\u00f3l jelezhet\u0151 a felhaszn\u00e1l\u00f3nak, hogy valami t\u00f6rt\u00e9nik.<\/p>\n\n\n\n Gyakran el\u0151fordul, hogy egy bizonyos kontextusban nem akt\u00edv egy gomb, azaz nem lehet r\u00e1 kattintani, mert adott helyzetben nincs funkci\u00f3ja, nem m\u0171k\u00f6dik (p\u00e9ld\u00e1ul, mert egy term\u00e9k adott m\u00e9retben elfogyott). Mint l\u00e1ttuk kor\u00e1bban a gomboknak van egy \u00fagynevezett nem-akt\u00edv \u00e1llapota, ezt kell valahogy kifejezni a vizu\u00e1lis designban. <\/p>\n\n\n\n Ami nem j\u00f3 megold\u00e1s, ha egyszer\u0171en elt\u00e1vol\u00edtjuk a gombot, hiszen ez megzavarja a felhaszn\u00e1l\u00f3t, durv\u00e1n megv\u00e1ltoztatja a fel\u00fclet megjelen\u00e9s\u00e9t. ehelyett \u00e1ltal\u00e1ban jelezni kell vizu\u00e1lisan, hogy nem akt\u00edv gombr\u00f3l van sz\u00f3. <\/p>\n\n\n\n Nagyon sokszor alkalmazz\u00e1k ennek \u00e9rdek\u00e9ben a gomb sz\u00fcrk\u00e9v\u00e9 t\u00e9tel\u00e9t. Ez azonban gyakran nem ide\u00e1lis megold\u00e1s, mivel az akt\u00edv \u00e9s a nem akt\u00edv gomb, illetve az eg\u00e9sz design nincs vizu\u00e1lis \u00f6sszhangban, \u00edgy a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra nem felt\u00e9tlen\u00fcl k\u00e9t \u00e1llapotot jelez. Amikor egy sz\u00fcrke gomb sz\u00ednesbe v\u00e1lt, az k\u00e9pes meglepni a felhaszn\u00e1l\u00f3t, ez\u00e9rt el kell ker\u00fclni, ha lehets\u00e9ges. <\/p>\n\n\n\n Jobb megold\u00e1s az \u00e1ttetsz\u0151s\u00e9g megv\u00e1ltoztat\u00e1sa, vagyis a gombot egyszer\u0171en \u00e1ttetsz\u0151bb\u00e9 kell tenni, amikor nem akt\u00edv. Ilyenkor a felhaszn\u00e1l\u00f3 j\u00f3l l\u00e1tja a kapcsolatot az akt\u00edv \u00e9s nem-akt\u00edv \u00e1llapot\u00fa gomb k\u00f6z\u00f6tt. Hab\u00e1r a gomb elhalv\u00e1nyult, a sz\u00ednek megmaradnak, ami biztos\u00edtja a kapcsol\u00f3d\u00e1st a k\u00e9t \u00e1llapot k\u00f6z\u00f6tt.<\/p>\n\n\n\n Az\u00e9rt is el\u0151ny\u00f6sebb egy elhalv\u00e1ny\u00edtott gomb a sz\u00fcrk\u00e9n\u00e9l, mivel a sz\u00fcrke tov\u00e1bbra is az el\u0151t\u00e9rben marad (hacsak a h\u00e1tt\u00e9r nem sz\u00fcrke), \u00edgy pedig k\u00e9pes felh\u00edvni mag\u00e1ra a figyelmet, \u00e9s sokkal nagyobb es\u00e9llyel v\u00e9lik akt\u00edv gombnak a felhaszn\u00e1l\u00f3k. Ann\u00e1l is ink\u00e1bb, mert egy sz\u00fcrke gomb nem eredend\u0151en a nem-aktivit\u00e1st jelzi, hiszen p\u00e9ld\u00e1ul az alacsony priorit\u00e1st is jel\u00f6lhetj\u00fck \u00edgy, azaz egy m\u00e1sodlagos call to actiont. <\/p>\n\n\n\n A l\u00e9nyeg teh\u00e1t, hogy a nem-akt\u00edv gombokn\u00e1l az \u00e1ttetsz\u0151s\u00e9get kell n\u00f6velni, nem pedig a sz\u00ednt megv\u00e1ltoztatni. Az \u00e1ttetsz\u0151s\u00e9g m\u00e9rt\u00e9ke alapvet\u0151en a h\u00e1tt\u00e9r sz\u00edn\u00e9t\u0151l f\u00fcgg, de \u00f6k\u00f6lszab\u00e1lyk\u00e9nt 40 sz\u00e1zal\u00e9kos vagy az alatti \u00e1ttetsz\u0151s\u00e9g \u00e1ltal\u00e1ban j\u00f3l haszn\u00e1lhat\u00f3. Fontos, hogy el\u00e9g alacsony legyen a m\u00e9rt\u00e9ke, mert en\u00e9lk\u00fcl sokan akt\u00edv gombnak fogj\u00e1k l\u00e1tni. <\/p>\n\n\n\n Egy m\u00e1sik, az akt\u00edv \u00e9s nem akt\u00edv \u00e1llapot jelz\u00e9s\u00e9hez kapcsol\u00f3d\u00f3 hiba, amikor inverz sz\u00edneket haszn\u00e1lnak a gombokn\u00e1l. Ilyenkor az a probl\u00e9ma, hogy a felhaszn\u00e1l\u00f3 ilyen vizu\u00e1lis megjelen\u00e9sn\u00e9l a nem akt\u00edvk\u00e9nt jelzett \u00e1llapotot is akt\u00edvnak l\u00e1thatja<\/strong>. Ennek oka a kor\u00e1bban m\u00e1r eml\u00edtett kontraszt-probl\u00e9ma.<\/p>\n\n\n\n A kontraszt ugyanis vizu\u00e1lisan kiemel egy elemet. Amennyiben inverz sz\u00edneket haszn\u00e1lunk (teh\u00e1t a sz\u00f6veg \u00e9s a gomb sz\u00edne felcser\u00e9l\u0151dik), akkor ugyanolyan kontrasztar\u00e1nyr\u00f3l besz\u00e9lhet\u00fcnk. Ez pedig azt jelenti, hogy mindk\u00e9t gomb egyar\u00e1nt versenyez a felhaszn\u00e1l\u00f3i figyelm\u00e9\u00e9rt, holott az egyik nem-akt\u00edv. Hogy \u00e9rthet\u0151bb legyen:<\/p>\n\n\n\n A fenti kapcsol\u00f3n\u00e1l nem igaz\u00e1n lehet tudni, hogy melyik r\u00e9sz van akt\u00edv \u00e9s melyik nem-akt\u00edv \u00e1llapotban. Ez csak akkor lesz egy\u00e9rtelm\u0171, ha az akt\u00edv gomb sokkal nagyobb kontrasztar\u00e1nyt kap, mint a nem akt\u00edv<\/strong>. <\/p>\n\n\n\n A jobb oldali kapcsol\u00f3n\u00e1l lehet l\u00e1tni, hogy mennyivel egy\u00e9rtelm\u0171bb\u00e9 v\u00e1lik a nem-akt\u00edv gomb jelz\u00e9se, ha lecs\u00f6kkentj\u00fck a sz\u00f6veg \u00e9s a gombsz\u00edn kontrasztj\u00e1t. <\/p>\n\n\n\n A gombokn\u00e1l a hover effekt arr\u00f3l t\u00e1j\u00e9koztatja a felhaszn\u00e1l\u00f3t, hogy interakci\u00f3ba l\u00e9phet az elemmel. A gond az, hogy csak desktopon haszn\u00e1lhat\u00f3 hover, mobilon ezt a visszajelz\u00e9st n\u00e9lk\u00fcl\u00f6zni kell. Annak ugyanis nincs \u00e9rtelme, hogy amikor a felhaszn\u00e1l\u00f3 meg\u00e9rinti a gombot, akkor az \u00fagy jelezze vissza azt, hogy interakci\u00f3ra k\u00e9sz, mint ha megnyomtuk volna a gombot, majd \u00fajra meg kellene nyomni.<\/p>\n\n\n\n De l\u00e9tezik-e olyan megold\u00e1s, mely mobilon a hover helyett haszn\u00e1lhat\u00f3? Igen, az az \u00fagynevezett ripple vagy fodroz\u00f3d\u00e1si effekt. Hab\u00e1r nem pont ugyanazt csin\u00e1lja, mint a hover effekt desktopon, de m\u00e9gis valamif\u00e9le visszajelz\u00e9st ad a felhaszn\u00e1l\u00f3nak. A fodroz\u00f3d\u00e1si effekt annyit tesz, hogy amikor a felhaszn\u00e1l\u00f3 meg\u00e9rinti a gombot, akkor egy elt\u00e9r\u0151 sz\u00edn\u0171 k\u00f6r elkezd n\u00f6vekedni a gombon, jelezve, hogy hat\u00e9kony volt az \u00e9rint\u00e9s. \u00cdgy a felhaszn\u00e1l\u00f3nak nem kell bizonytalankodnia, hogy vajon t\u00e9nyleg meg\u00e9rintette a gombot. Vizu\u00e1lisan \u00fagy n\u00e9z ki, mint amikor egy kavicsot bedobunk a v\u00edzbe.<\/p>\n\n\n\n A fodroz\u00f3d\u00e1si effektet nem kell magyar\u00e1zni a felhaszn\u00e1l\u00f3nak, mert intuit\u00edv m\u00f3don \u00e9rteni fogja, hiszen amikor meg\u00e9rinti a vizet, akkor is hasonl\u00f3 dolgot l\u00e1t. <\/p>\n\n\n\n \u00c9rdemes teh\u00e1t a gombokn\u00e1l mobilos megjelen\u00e9sn\u00e9l fodroz\u00f3d\u00e1si effektet haszn\u00e1lni, amikor desktopon hover effekt jelenne meg. Ez ugyanis n\u00f6veli a bizonyoss\u00e1g\u00e1t abban, hogy megfelel\u0151en eltal\u00e1lta a gombot. Persze nem pont azt tudja, amit egy hover, de legal\u00e1bb valamif\u00e9le vizu\u00e1lis visszajelz\u00e9st ad a felhaszn\u00e1l\u00f3knak az interakci\u00f3r\u00f3l.<\/p>\n\n\n\n A tiszt\u00e1n sz\u00f6veges gombok igaz\u00e1b\u00f3l nem gombok, hanem sz\u00f6veges linkek, melyek nem egy hosszabb sz\u00f6vegben kapnak helyett, hanem \u00f6n\u00e1ll\u00f3 egys\u00e9gk\u00e9nt jelennek meg. Ezek \u00e1ltal\u00e1ban alacsonyabb priorit\u00e1s\u00faak a f\u0151 CTA-gombhoz k\u00e9pest. Gyakorlatilag a gombforma hi\u00e1ny\u00e1val azt fejezik ki a designerek, hogy kev\u00e9sb\u00e9 fontos CTA-r\u00f3l van sz\u00f3.<\/p>\n\n\n\n A pirossal keretezett r\u00e9szben l\u00e1that\u00f3, hogy pontosan mire gondolunk. Az ilyen gombok els\u0151sorban mobilos megjelen\u00e9sn\u00e9l okozhatnak probl\u00e9m\u00e1t, melyekre \u00e1ltal\u00e1ban sokkal szigor\u00fabb szab\u00e1lyok vonatkoznak, mint az asztali g\u00e9pes megjelen\u00e9sre.<\/p>\n\n\n\n Ennek oka, hogy az emberi ujj nagyobb, mint az eg\u00e9rmutat\u00f3. Ha egy kis c\u00e9lpont f\u00f6l\u00e9 helyezed, akkor elt\u0171nhet maga a c\u00e9lpont a szemed el\u0151l. Keret \u00e9s gombforma h\u00edj\u00e1n az sem l\u00e1tszik, hogy a cselekv\u00e9s v\u00e9grehajt\u00f3dott, azaz nem l\u00e1tszik a gomb reakci\u00f3ja az \u00e9rint\u00e9sre.<\/p>\n\n\n\n A bal oldali k\u00e9pen az l\u00e1tszik, hogy eltakarja az ujj a „K\u00fcld\u00e9s” sz\u00f3t. A jobb oldalon pedig egy norm\u00e1l gomb l\u00e1that\u00f3. Ahhoz, hogy egy ilyen kis, sz\u00f6veges gombot eltal\u00e1ljon a felhaszn\u00e1l\u00f3, rendk\u00edv\u00fcl nagy er\u0151fesz\u00edt\u00e9sre \u00e9s figyelemre van sz\u00fcks\u00e9ge. Egy norm\u00e1l gomb eset\u00e9n ez nem jelentkezik, hiszen a gomb-forma miatt m\u00e1r nagyobb a m\u00e9ret, \u00e9s a keret is t\u00f6k\u00e9letesen \u00e9szlelhet\u0151.<\/p>\n\n\n\n Sokan megold\u00e1sk\u00e9nt a csupa nagybet\u0171vel \u00edrt v\u00e1ltozatot<\/strong> haszn\u00e1lj\u00e1k, s\u0151t a Google Material Design rendszere is ezt aj\u00e1nlja. Ez\u00e1ltal ugyanis hat\u00e1rozottabb kont\u00fart kap az egy\u00e9bk\u00e9nt is nagyobb\u00e1 v\u00e1l\u00f3 sz\u00f6veg. Ugyanakkor ez m\u00e9g nem az igazi, hiszen csak kism\u00e9rt\u00e9kben n\u0151tt meg a „c\u00e9l”, ugyanakkor a nagybet\u0171s \u00edr\u00e1sm\u00f3d miatt romlik az olvashat\u00f3s\u00e1g (mint arr\u00f3l kor\u00e1bban m\u00e1r besz\u00e9lt\u00fcnk).<\/p>\n\n\n\n Tov\u00e1bbi probl\u00e9ma, hogy a sz\u00f6veges gombok \u00e9s a nem kattinthat\u00f3, norm\u00e1l sz\u00f6vegek alapvet\u0151en csak sz\u00edn\u00fckben k\u00fcl\u00f6nb\u00f6znek<\/strong>. Teh\u00e1t teljes m\u00e9rt\u00e9kben az emberek sz\u00edn\u00e9rz\u00e9kel\u00e9s\u00e9re hagyatkozunk, ha ilyen gombokat haszn\u00e1lunk. Pedig nagyon k\u00fczdenek sz\u00ednt\u00e9veszt\u00e9ssel, sz\u00ednvaks\u00e1ggal. <\/p>\n\n\n\n L\u00e1ttuk teh\u00e1t a probl\u00e9m\u00e1t ezekn\u00e9l a gombokn\u00e1l, ugyanakkor vel\u00fck szemben \u00e1ll a designer t\u00f6rekv\u00e9se, hogy alacsonyabb priorit\u00e1sukat jelezze valahogy. Milyen lehet\u0151s\u00e9gek \u00e1llnak a rendelkez\u00e9sre?<\/p>\n\n\n\n Ha a sz\u00f6veg k\u00f6r\u00e9 teszel egy keretet, akkor l\u00e9trej\u00f6n egy keretes vagy m\u00e1s n\u00e9ven szellemgomb. Ez\u00e1ltal m\u00e1r fizikailag is gomb megjelen\u00e9s\u0171v\u00e9 v\u00e1lik a link, melyet k\u00f6nnyebben tudnak kezelni a felhaszn\u00e1l\u00f3k, hiszen j\u00f3l l\u00e1tj\u00e1k a c\u00e9lpontot, m\u00e9g akkor is, ha \u00e9pp rajta van az ujjuk.<\/p>\n\n\n\n Ugyanakkor a sz\u00edn (kit\u00f6lt\u00e9s) hi\u00e1nya azt jelzi a felhaszn\u00e1l\u00f3knak, hogy m\u00e1sodlagos fontoss\u00e1g\u00fa gombr\u00f3l van sz\u00f3, mely nem versenyez a f\u0151 call to actionnel.<\/p>\n\n\n\n A m\u00e1sik lehet\u0151s\u00e9g arra, hogy a gomb m\u00e1sodlagos jelleg\u00e9t kifejezd, ha halv\u00e1nyabb sz\u00ednt adsz neki, mint a f\u0151 gomb\u00e9. Ez\u00e1ltal m\u00e9g l\u00e1that\u00f3ak a hat\u00e1rai \u00e9s a h\u00e1ttere, azonban nem versenyez a f\u0151 CTA-val. <\/p>\n\n\n\n Az el\u0151bbiek ellen\u00e9re vannak olyan helyzetek, amikor van \u00e9rtelme a tiszt\u00e1n sz\u00f6veg-gombok haszn\u00e1lat\u00e1nak. P\u00e9ld\u00e1ul akkor, ha nem m\u00e1sodlagos cselekv\u00e9sn\u00e9l haszn\u00e1lod \u0151ket, hanem harmadlagosn\u00e1l. Ilyenkor van egy f\u0151 CTA-d, egy m\u00e1sodlagos gombod, \u00e9s ha m\u00e9g oda kell zs\u00fafolnod egy harmadik cselekv\u00e9st megval\u00f3s\u00edt\u00f3 gombot is, akkor az lehet a sima sz\u00f6veg-gomb. Ezekre egy\u00e9bk\u00e9nt sem \u00e9rkezik t\u00fal sok kattint\u00e1s, \u00e9s csek\u00e9ly jelent\u0151s\u00e9g\u00fcket ki tudod fejezni a m\u00e9rs\u00e9kelt vizu\u00e1lis s\u00fallyal.<\/p>\n\n\n\n Tipikusan ilyen gombk\u00e9nt jelenik meg, ha seg\u00edts\u00e9get, t\u00e1j\u00e9koztat\u00e1st akarsz adni a felhaszn\u00e1l\u00f3knak a CTA-ddal kapcsolatban. A t\u00e1j\u00e9koztat\u00e1s linkj\u00e9t felesleges CTA-k\u00e9nt t\u00e1lalni a felhaszn\u00e1l\u00f3knak, el\u00e9g egy sz\u00f6veg-gomb is, mely \u00edgy egy\u00e1ltal\u00e1n nem versenyez a t\u00f6bbi gombbal.<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2021.11.18.:<\/em><\/p>\n\n\n\n Gyakran l\u00e1tjuk weboldalakon vagy appokban, hogy egym\u00e1s mell\u00e9 ker\u00fclnek olyan gombok, melyek egym\u00e1ssal ellent\u00e9tes opci\u00f3t k\u00edn\u00e1lnak a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra. Ez sok esetben nem olyan nagy gond, mert nincs akkora jelent\u0151s\u00e9ge, ha v\u00e9letlen\u00fcl f\u00e9lrekattintanak. N\u00e9ha viszont komoly probl\u00e9m\u00e1kat okozhat. De mi a megold\u00e1s?<\/p>\n\n\n\n A hib\u00e1k megel\u0151z\u00e9se mindig sokkal jobb megold\u00e1s, mint a jav\u00edt\u00e1suk. Hiszen, amikor egy felhaszn\u00e1l\u00f3nak korrig\u00e1lnia kell egy hib\u00e1t, akkor az m\u00e1r megzavarja a feladatv\u00e9gz\u00e9s\u00e9ben \u00e9s jelent\u0151s energi\u00e1kat kell a hiba megold\u00e1s\u00e1ra ford\u00edtania, m\u00e9g akkor is, ha n\u00e9h\u00e1ny m\u00e1sodperc alatt helyrehozhat\u00f3 – h\u00edvta fel a figyelmet egy bejegyz\u00e9s\u00e9ben<\/a> a Nielsen Norman Group, mely alaposan k\u00f6r\u00fclj\u00e1rta a probl\u00e9m\u00e1t. <\/p>\n\n\n\n Az, hogy k\u00e9t, ellent\u00e9tes lehet\u0151s\u00e9get k\u00edn\u00e1l\u00f3 gomb egym\u00e1s mell\u00e9 ker\u00fcl, \u00e1ltal\u00e1ban az\u00e9rt k\u00f6vetkezik be, mert a designerek nem veszik figyelembe, hogy a felhaszn\u00e1l\u00f3k nem teljes figyelm\u00fckkel fordulnak egy weboldal vagy alkalmaz\u00e1s fel\u00e9. A felhaszn\u00e1l\u00f3knak nagyon sokszor automatikusak a reakci\u00f3ik, nem gondolkodnak, k\u00fcl\u00f6n\u00f6sen, ha rutinb\u00f3l v\u00e9gzik a feladatot.<\/p>\n\n\n\n Ha megn\u00e9zed ezt a men\u00fct, ami egy rosszul \u00edrt sz\u00f3 miatt jelenik meg a Firefoxban, akkor l\u00e1thatod, hogy a sz\u00f3 jav\u00edt\u00e1s\u00e1t lehet\u0151v\u00e9 tev\u0151 link eg\u00e9szen k\u00f6zel van a sz\u00f3t\u00e1rhoz ad\u00e1shoz. Nagyon k\u00f6nny\u0171 v\u00e9letlen\u00fcl r\u00e1kattintani az ut\u00f3bbira, \u00e9s \u00edgy nem, hogy nem ker\u00fcl jav\u00edt\u00e1sra a sz\u00f3, hanem mindj\u00e1rt gazdagabb lesz a sz\u00f3t\u00e1runk egy hib\u00e1s sz\u00f3val.<\/p>\n\n\n\n Ez a probl\u00e9ma nagyon gyakran felmer\u00fcl az \u00fagynevezett men\u00fck, meger\u0151s\u00edt\u0151 panelek, hiba\u00fczenetek, stb. eset\u00e9ben. Gondolj p\u00e9ld\u00e1ul a szinte mindenhol el\u00e9rhet\u0151 jobbgombos men\u00fcre, mely a „M\u00e1sol\u00e1s” \u00e9s a „Beilleszt\u00e9s” lehet\u0151s\u00e9get tartalmazza, pont egym\u00e1s alatt. Ugye el\u0151fordult m\u00e1r veled is, hogy nem arra kattintott\u00e1l, amelyikre szerett\u00e9l volna, \u00edgy m\u00e1sol\u00e1s helyett mondjuk egy sz\u00f6veg szerkeszt\u00e9se k\u00f6zben kit\u00f6rl\u0151d\u00f6tt a kijel\u00f6lt sz\u00f6veg, \u00e9s beleker\u00fclt egy, a v\u00e1g\u00f3lapon megl\u00e9v\u0151 kor\u00e1bbi sz\u00f6veg. <\/p>\n\n\n\n Ez sok esetben korrig\u00e1lhat\u00f3 egy egyszer\u0171 „Undo” paranccsal, de nem minden esetben ez a helyzet. K\u00fcl\u00f6n\u00f6sen, ha p\u00e9ld\u00e1ul p\u00e1rbesz\u00e9dpanelekr\u0151l vagy \u0171rlapokr\u00f3l van sz\u00f3. Ahol szint\u00e9n jellemz\u0151en egym\u00e1s mellett jelennek meg az ellent\u00e9tes funkci\u00f3j\u00fa gombok. Annyira gyakran, hogy az ellent\u00e9tes opci\u00f3k egym\u00e1s mell\u00e9 helyez\u00e9se az egyike a 10 leggyakrabban el\u0151fordul\u00f3 designhib\u00e1nak<\/strong>. De mit lehet tenni az elker\u00fcl\u00e9s\u00fck \u00e9rdek\u00e9ben?<\/p>\n\n\n\n Arra, hogy jobban megk\u00fcl\u00f6nb\u00f6ztess k\u00e9t ellent\u00e9tes funkci\u00f3j\u00fa gombot t\u00f6bb lehet\u0151s\u00e9g is k\u00edn\u00e1lkozik a val\u00f3 \u00e9letben: <\/p>\n\n\n\n A l\u00e9nyeg, hogy jelezni tudjuk nem csak azt, hogy mik\u00e9nt l\u00e9phet kapcsolatba a felhaszn\u00e1l\u00f3 a gombbal, hanem annak hat\u00e1s\u00e1t is egy olyan m\u00f3don, mely nem ig\u00e9nyli a felhaszn\u00e1l\u00f3 tudatos figyelm\u00e9t.<\/p>\n\n\n\n Teh\u00e1t, amikor a val\u00f3 \u00e9letben p\u00e9ld\u00e1ul egy kart j\u00f3val nehezebb megh\u00fazni, mint egy m\u00e1sikat, akkor az er\u0151fesz\u00edt\u00e9s elt\u00e9r\u0151 m\u00e9rt\u00e9ke m\u00e1r vissza is jelez a felhaszn\u00e1l\u00f3nak, hogy hib\u00e1zni k\u00e9sz\u00fcl, \u00e9s nem csak ut\u00f3lag der\u00fcl ki a hiba.<\/p>\n\n\n\n Term\u00e9szetesen van logika a m\u00f6g\u00f6tt, hogy egym\u00e1s mell\u00e9 ker\u00fcl k\u00e9t ellent\u00e9tes funkci\u00f3j\u00fa gomb, hiszen pont emiatt van k\u00f6z\u00f6tt\u00fck kapcsolat. Ugyanakkor a k\u00e9t kapcsol\u00f3d\u00f3 gomb hat\u00e1sa eg\u00e9szen elt\u00e9r\u0151 (p\u00e9ld\u00e1ul egy Ment\u00e9s \u00e9s egy T\u00f6rl\u00e9s eset\u00e9ben). Emiatt pedig a designereknek m\u00e9gis csak arra kell t\u00f6rekedni\u00fck, hogy amennyire csak lehets\u00e9ges, megk\u00fcl\u00f6nb\u00f6ztess\u00e9k a kett\u0151t, \u00edgy minim\u00e1lisra cs\u00f6kkents\u00e9k a felhaszn\u00e1l\u00f3k hib\u00e1z\u00e1si lehet\u0151s\u00e9g\u00e9t. <\/p>\n\n\n\n Mondhatod, hogy erre szolg\u00e1l a c\u00edmke a gombon, ez azonban m\u00e9g messze nem el\u00e9g. M\u00e1s vizu\u00e1lis jelz\u00e9sekre \u00e9s elt\u00e9r\u0151 elhelyez\u00e9sre is sz\u00fcks\u00e9g van, ha biztosra akarunk menni<\/strong>. Itt van p\u00e9ld\u00e1ul egy m\u00e1sik helyes\u00edr\u00e1si megold\u00e1s, ahol elt\u00e9r\u0151 sz\u00ednnel, ikonnal, bet\u0171m\u00e9rettel jelzik a k\u00e9t elt\u00e9r\u0151 opci\u00f3t, azaz a sz\u00f3 jav\u00edt\u00e1s\u00e1t, illetve sz\u00f3t\u00e1rba val\u00f3 felv\u00e9tel\u00e9t. <\/p>\n\n\n\n Egy m\u00e1sik megold\u00e1s, ha j\u00f3l elk\u00fcl\u00f6n\u00edtj\u00fck egym\u00e1st\u00f3l a lehet\u0151s\u00e9geket, \u00e9s egy kicsit megnehez\u00edtj\u00fck a k\u00e9t lehet\u0151s\u00e9g \u00f6sszecser\u00e9l\u00e9s\u00e9t. A felhaszn\u00e1l\u00f3nak akkora utat kelljen bej\u00e1rnia az eg\u00e9rmutat\u00f3val vagy az ujj\u00e1val a k\u00e9t ellent\u00e9tes opci\u00f3 k\u00f6z\u00f6tt, hogy ez\u00e1ltal cs\u00f6kkenjen a hiba lehet\u0151s\u00e9ge. Persze mondhatjuk, hogy ez tov\u00e1bbi f\u00e1radts\u00e1got jelent a haszn\u00e1latn\u00e1l, ugyanakkor m\u00e9g mindig kevesebb er\u0151fesz\u00edt\u00e9st ig\u00e9nyel, mint ha ut\u00e1na jav\u00edtani kell a f\u00e9lrekattint\u00e1s miatt bek\u00f6vetkez\u0151 hib\u00e1t. <\/p>\n\n\n\n A nagyobb t\u00e1vols\u00e1gra lehet p\u00e9lda az al\u00e1bbi app, ahol a k\u00e9t rendk\u00edv\u00fcl l\u00e9nyeges \u00e9s nagy hat\u00e1s\u00fa funkci\u00f3 t\u00e1vol ker\u00fclt a men\u00fc t\u00f6bbi elem\u00e9t\u0151l. <\/p>\n\n\n\n L\u00e1that\u00f3 teh\u00e1t, hogy a s\u00falyos k\u00f6vetkezm\u00e9nyekkel j\u00e1r\u00f3 funkci\u00f3k el\u00e9r\u00e9s\u00e9t mik\u00e9nt lehet megnehez\u00edteni, hogy ez\u00e1ltal elker\u00fclj\u00fck egy komolyabb hiba bek\u00f6vetkezt\u00e9t. Haszn\u00e1lhatunk jelent\u0151sen elt\u00e9r\u0151 vizu\u00e1lis megjelen\u00e9st vagy megn\u00f6velt teret, esetleg egyszerre mind a kett\u0151t, hogy jelezz\u00fck a k\u00e9t vagy t\u00f6bb funkci\u00f3 k\u00fcl\u00f6nbs\u00e9g\u00e9t.<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2022.02.03.:<\/em><\/p>\n\n\n\n Az el\u0151bbiekben \u00e9rintett\u00fck az ellent\u00e9tes funkci\u00f3j\u00fa gombok tervez\u00e9s\u00e9vel kapcsolatos probl\u00e9m\u00e1kat, de egy dologr\u00f3l m\u00e9g nem besz\u00e9lt\u00fcnk: a gombok sorrendj\u00e9r\u0151l.<\/p>\n\n\n\n Ez els\u0151sorban akkor okoz dilemm\u00e1t, amikor egym\u00e1s mellett helyezkedik el a k\u00e9t gomb: OK \/ M\u00e9gse vagy M\u00e9gse \/ OK a megfelel\u0151 sorrend? Term\u00e9szetesen a gombok sz\u00f6vege b\u00e1rmi m\u00e1s is lehet, (Igen \/ Nem, El\u0151z\u0151 \/ K\u00f6vetkez\u0151, stb.) a l\u00e9nyeg, hogy k\u00e9t, ellent\u00e9tes funkci\u00f3j\u00fa gomb ker\u00fcl egym\u00e1s mell\u00e9.<\/p>\n\n\n\n A Windows \u00e9s az Apple is megosztott a k\u00e9rd\u00e9sben. A Windows User Experience Guidelines eg\u00e9sz m\u00e1s \u00e1ll\u00e1spontot k\u00e9pvisel, mint az Apple Human Interfaces Guidelines. El\u0151bbi az OK gombot el\u0151re helyezi, m\u00edg ut\u00f3bbi h\u00e1tra, de a Google is a „M\u00e9gse \/ OK” sorrendet haszn\u00e1lja. Ha megk\u00e9rdezz\u00fck a designereket, akkor mindkett\u0151 mellett elhangzanak \u00e9rvek.<\/p>\n\n\n\n Az OK gomb el\u0151re helyez\u00e9se az\u00e9rt lehet indokolt, mivel balr\u00f3l jobbra olvasunk<\/strong>, \u00e9s a felhaszn\u00e1l\u00f3k alapvet\u0151en az OK-ra kattintanak gyakrabban.<\/p>\n\n\n\n Az OK gomb jobbra helyez\u00e9se viszont az\u00e9rt lehet indokolt, mivel balr\u00f3l jobbra tart a folyamat<\/strong>. Teh\u00e1t, ha az „el\u0151z\u0151 \/ k\u00f6vetkez\u0151” p\u00e1ros n\u00e9zz\u00fck, akkor logikusnak t\u0171nik, hogy a k\u00f6vetkez\u0151 sz\u00f3 h\u00e1tulra ker\u00fcl, hiszen erre l\u00e9p\u00fcnk tov\u00e1bb. Ugyanez igaz lehet a „M\u00e9gse \/ OK” p\u00e1rosra is, mivel a M\u00e9gse tulajdonk\u00e9ppen visszal\u00e9pteti a felhaszn\u00e1l\u00f3t, m\u00edg az OK el\u0151re viszi.<\/p>\n\n\n\n L\u00e1that\u00f3 teh\u00e1t, hogy mindk\u00e9t megold\u00e1s mellett vannak \u00e9rvek. A d\u00f6nt\u00e9st ugyanakkor megk\u00f6nny\u00edti, hogy egyik elrendez\u00e9s sem okoz UX-probl\u00e9m\u00e1t, \u00edgy nem \u00e9rdemes tesztelgetni, hogy h\u00e1ny sz\u00e1zadm\u00e1sodperccel vesz kevesebb id\u0151t ig\u00e9nybe a felhaszn\u00e1l\u00f3k r\u00e9sz\u00e9r\u0151l egyik vagy m\u00e1sik verzi\u00f3.<\/p>\n\n\n\n Az viszont sok id\u0151t megtakar\u00edthat a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, hogyha valamely sorrend mellett d\u00f6ntesz, akkor azt k\u00f6vetkezetesen betartod az eg\u00e9sz designban. De az is hasznos, ha igazodsz ahhoz az oper\u00e1ci\u00f3s rendszerhez, melyben megjelenik a fel\u00fcleted (mint azt kor\u00e1bban eml\u00edtett\u00fck, az Apple \u00e9s a Windows ellent\u00e9tes sorrendet haszn\u00e1l). <\/p>\n\n\n\n Ugyanakkor, ha nem desktop szoftvert tervezel, hanem weben jelen\u00edtesz meg k\u00e9t gombot, akkor m\u00e1r nehezebb helyzetben vagy, hiszen b\u00e1rmilyen rendszer alatt megjelenhet az oldalad. Ilyenkor azt \u00e9rdemes figyelembe venni, hogy milyen rendszert haszn\u00e1l a felhaszn\u00e1l\u00f3id t\u00f6bbs\u00e9ge. <\/p>\n\n\n\n De legink\u00e1bb arra \u00e9rdemes figyelni, hogy <\/p>\n\n\n\n Friss\u00edtve, 2022.12.06.:<\/em><\/p>\n\n\n\n R\u00e1di\u00f3-gombokkal mindenhol tal\u00e1lkozol a weben \u00e9s a mobilos alkalmaz\u00e1sokban. Ezek seg\u00edtenek a felhaszn\u00e1l\u00f3knak a be\u00e1ll\u00edt\u00e1sokn\u00e1l, az online \u0171rlapokn\u00e1l vagy ak\u00e1r egy pizzarendel\u00e9sn\u00e9l. R\u00e1di\u00f3-gombok r\u00e9v\u00e9n a fel\u00fclet k\u00f6nnyebben haszn\u00e1lhat\u00f3, jobban hozz\u00e1f\u00e9rhet\u0151 lehet, a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny pedig javul. Sok design teh\u00e1t nincs meg n\u00e9lk\u00fcl\u00fck. De persze vannak olyan helyzetek, amikor c\u00e9lszer\u0171 elker\u00fclni \u0151ket. Ezzel hamarosan foglalkozunk is, de induljunk el onnan, hogy<\/p>\n\n\n\n A r\u00e1di\u00f3 gomb egy d\u00f6nt\u00e9st realiz\u00e1l\u00f3 elem a webdesignban, melynek r\u00e9v\u00e9n a felhaszn\u00e1l\u00f3 kiv\u00e1laszthat a lehet\u0151s\u00e9gek sor\u00e1b\u00f3l egyetlen opci\u00f3t. \u00c1ltal\u00e1ban egy kis k\u00f6r l\u00e1that\u00f3 az opci\u00f3 le\u00edr\u00e1sa el\u0151tt, melyben – ha kiv\u00e1laszt\u00e1sra ker\u00fcl az adott lehet\u0151s\u00e9g – egy fekete pont jelenik meg.<\/p>\n\n\n\n A r\u00e1di\u00f3-gombnak k\u00e9t \u00e1llapota van: bekapcsolt vagy kikapcsolt. A felhaszn\u00e1l\u00f3 v\u00e1laszt a list\u00e1ban felsorolt lehet\u0151s\u00e9gek k\u00f6z\u00fcl annak \u00e9rdek\u00e9ben, hogy tov\u00e1bb tudjon haladni a c\u00e9lja fel\u00e9 a weboldalon vagy mobil applik\u00e1ci\u00f3ban.<\/p>\n\n\n\n R\u00e1di\u00f3-gombokat t\u00f6bbnyire akkor vetnek be a designerek, amikor a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra egy \u0171rlapot, k\u00e9rd\u0151\u00edvet kell kit\u00f6lteni, esetleg valamif\u00e9le be\u00e1ll\u00edt\u00e1sokat eszk\u00f6z\u00f6lni. Haszn\u00e1lni olyan esetekben kellene \u0151ket, amikor egy list\u00e1ban folyamatosan l\u00e1that\u00f3 m\u00f3don kett\u0151 vagy t\u00f6bb lehet\u0151s\u00e9g tal\u00e1lhat\u00f3, \u00e9s ezek k\u00f6z\u00fcl kell v\u00e1lasztania a felhaszn\u00e1l\u00f3nak. P\u00e9ld\u00e1ul, amikor szeretn\u00e9d hangs\u00falyozni az emberek sz\u00e1m\u00e1ra az \u00f6sszes el\u00e9rhet\u0151 opci\u00f3 megl\u00e9t\u00e9t<\/strong> – a teljes lista szem el\u00e9 helyez\u00e9s\u00e9vel -, vagy azt akarod, hogy gyorsan \u00e1ttekints\u00e9k valamennyi lehet\u0151s\u00e9get<\/strong>.<\/p>\n\n\n\n Kor\u00e1bban volt egy olyan \u00e1ltal\u00e1nosan elterjedt v\u00e9lem\u00e9ny, hogy ha kevesebb mint 5 opci\u00f3t kell elhelyezni, akkor r\u00e1di\u00f3-gombokat kell haszn\u00e1lni, ha \u00f6tn\u00e9l t\u00f6bbet, akkor m\u00e1r leny\u00edl\u00f3 list\u00e1t<\/strong>. Ez az \u00f6k\u00f6lszab\u00e1ly, de nem minden esetben \u00e9rv\u00e9nyes, ha rendelkez\u00e9sedre \u00e1ll hely, \u00e9s egy\u00e9b indok is lenne r\u00e1, akkor ak\u00e1r t\u00f6bb (eg\u00e9szen 15-ig) opci\u00f3 eset\u00e9n is haszn\u00e1lni lehet.<\/p>\n\n\n\n A r\u00e1di\u00f3-gombok haszn\u00e1lat\u00e1nak indokai:<\/p>\n\n\n\n Nem a r\u00e1di\u00f3-gomb az egyetlen lehet\u0151s\u00e9g, amellyel opci\u00f3k k\u00f6z\u00fcl v\u00e1lasztani lehet egy weboldalon vagy applik\u00e1ci\u00f3ban. Lehetnek helyzetek, amikor a m\u00e1s m\u00f3don megjelen\u00edtett list\u00e1k el\u0151ny\u00f6sebbek.<\/p>\n\n\n\n Az egyik alternat\u00edv\u00e1t a leny\u00edl\u00f3 men\u00fck<\/strong> jelentik. P\u00e9ld\u00e1ul abban az esetben, ha nagyon nagy sz\u00e1m\u00fa v\u00e1laszt\u00e1si lehet\u0151s\u00e9get kell megmutatni a felhaszn\u00e1l\u00f3knak. 5 opci\u00f3 felett \u00e1ltal\u00e1ban m\u00e1r \u00e9rdemesebb leny\u00edl\u00f3t haszn\u00e1lni, els\u0151sorban az\u00e9rt, mert \u00edgy kevesebb helyet foglal el, de mint mondtuk, ez nem minden esetben \u00e9rv\u00e9nyes. Indok \u00e9s elegend\u0151 hely eset\u00e9n ak\u00e1r 15 opci\u00f3t is felsorolhatsz r\u00e1di\u00f3gombos megold\u00e1ssal<\/strong>. <\/p>\n\n\n\n Ugyanakkor a leny\u00edl\u00f3 men\u00fc haszn\u00e1lat\u00e1nak<\/strong> is vannak j\u00f3 indokai:<\/p>\n\n\n\n Ugyanakkor azt tudni kell a leny\u00edl\u00f3kr\u00f3l, hogy lass\u00edtj\u00e1k a felhaszn\u00e1l\u00f3t<\/strong>, hiszen el\u0151sz\u00f6r le kell nyitnia az opci\u00f3kat, azt\u00e1n v\u00e1lasztani, ami n\u00e9ha nem k\u00f6nny\u0171 egy hossz\u00fa list\u00e1n\u00e1l. Ann\u00e1l is ink\u00e1bb, mivel sokszor lecs\u00fasznak a list\u00e1r\u00f3l az eg\u00e9rmutat\u00f3val vagy az ujjukkal, f\u00e9lrekattintanak, \u00edgy el\u00f6lr\u0151l kell kezdeni a kiv\u00e1laszt\u00e1s folyamat\u00e1t.<\/p>\n\n\n\n De akkor sem biztos, hogy j\u00f3 v\u00e1laszt\u00e1s, ha fontos sz\u00e1modra, hogy \u00e1tgondoltan v\u00e1lasszanak, mivel nem biztos, hogy felt\u0171nik az emberek sz\u00e1m\u00e1ra a leny\u00edl\u00f3 \u00e1ltal k\u00edn\u00e1lt v\u00e1laszt\u00e1si lehet\u0151s\u00e9g, \u00edgy az alap\u00e9rtelmezett opci\u00f3 marad be\u00e1ll\u00edtva. <\/p>\n\n\n\n Egy tov\u00e1bbi lehet\u0151s\u00e9g a checkbox<\/strong>, de checkboxokat akkor \u00e9rdemes haszn\u00e1lni, amikor nem csak egyetlen opci\u00f3t v\u00e1laszthat<\/strong> a felhaszn\u00e1l\u00f3 egy list\u00e1b\u00f3l, hanem t\u00f6bbet. Hiszen minden egyes checkbox f\u00fcggetlen a lista t\u00f6bbi r\u00e9sz\u00e9t\u0151l. Abban az esetben is checkboxot lehet haszn\u00e1lni, amikor csak k\u00e9t lehet\u0151s\u00e9g (igaz vagy hamis) k\u00f6z\u00fcl lehet v\u00e1lasztani.<\/p>\n\n\n\n Mint a webdesignban mindenhol, az egyszer\u0171s\u00e9g ebben az esetben is k\u00f6vetend\u0151 elv. Hiszen a vizu\u00e1lis z\u0171rzavar \u00e9s a felesleges elemek csak f\u00e1rasztj\u00e1k az embereket. Vagyis, amikor r\u00e1di\u00f3-gomb tervez\u00e9s\u00e9re ker\u00fcl a sor, akkor gondold \u00e1t, hogy mik\u00e9nt tudod cs\u00f6kkenteni a felhaszn\u00e1l\u00f3k kognit\u00edv terhel\u00e9s\u00e9t.<\/p>\n\n\n\n A haszn\u00e1lhat\u00f3s\u00e1g \u00e9rdek\u00e9ben vedd fontol\u00f3ra azt is, hogy a list\u00e1d elrendez\u00e9se el\u00e9g logikus-e. Jakob Nielsen azt tan\u00e1csolja<\/a>, hogy egy r\u00e1di\u00f3gombos lista mindig f\u00fcgg\u0151leges elrendez\u00e9s\u0171 legyen, \u00e9s minden opci\u00f3 egy \u00faj sorba ker\u00fclj\u00f6n. Ez sokat jav\u00edt az olvashat\u00f3s\u00e1gon.<\/p>\n\n\n\n A felhaszn\u00e1l\u00f3nak mindig legyen lehet\u0151s\u00e9ge arra, hogy visszavonja egy l\u00e9p\u00e9s\u00e9t. Amikor r\u00e1di\u00f3-gombokr\u00f3l van sz\u00f3, akkor ez azt jelenti, hogy az alap\u00e9rtelmezett be\u00e1ll\u00edt\u00e1s r\u00e9v\u00e9n vissza tud l\u00e9pni az eredeti oldalbe\u00e1ll\u00edt\u00e1sokhoz, \u00e9s el\u00f6lr\u0151l kezdeni a folyamatot. Ez\u00e1ltal egy \u0171rlap kit\u00f6lt\u00e9se k\u00f6nnyebb\u00e9 \u00e9s gyorsabb\u00e1 v\u00e1lik, \u00e9s kevesebb l\u00e9p\u00e9s megt\u00e9tel\u00e9re lesz sz\u00fcks\u00e9g a felhaszn\u00e1l\u00f3k r\u00e9sz\u00e9r\u0151l. \u00c9rtelemszer\u0171en az alap\u00e9rtelmezett helyzet az legyen, melyet a leggyakrabban v\u00e1lasztanak ki a felhaszn\u00e1l\u00f3k.<\/p>\n\n\n\n A r\u00e1di\u00f3 gombok arra szolg\u00e1lnak, hogy a be\u00e1ll\u00edt\u00e1sokon v\u00e1ltoztassanak \u00e1ltala a felhaszn\u00e1l\u00f3k. Ugyanakkor nem akci\u00f3-gombok. Ha egy r\u00e1di\u00f3-gombbal t\u00f6rt\u00e9n\u0151 v\u00e1laszt\u00e1s valamilyen azonnali v\u00e1ltoz\u00e1st eredm\u00e9nyez, az megzavarja az embereket, ez\u00e1ltal hosszabb\u00e1 v\u00e1lik a sz\u00e1mukra a feladat elv\u00e9gz\u00e9se.<\/p>\n\n\n\n Teh\u00e1t, ha a felhaszn\u00e1l\u00f3 meghozott egy d\u00f6nt\u00e9st, \u00e9s kattintott a megfelel\u0151 opci\u00f3 r\u00e1di\u00f3-gombj\u00e1ra, akkor m\u00e9g sz\u00fcks\u00e9g van arra is, hogy kattintson egy parancs-gombra is, \u00e9s csak ez \u00e1ltal \u00e9lesednek v\u00e9g\u00fcl a k\u00edv\u00e1nt v\u00e1ltoz\u00e1sok. Ez azt jelenti, hogy puszt\u00e1n a kiv\u00e1laszt\u00e1ssal m\u00e9g nem szabad \u00e9letbe l\u00e9pnie a v\u00e1ltoz\u00e1snak. Valahogy \u00edgy:<\/p>\n\n\n\n A r\u00e1di\u00f3-gombok \u00e9s a jel\u00f6l\u0151n\u00e9gyzetek r\u00e9g\u00f3ta jelen vannak a weboldalakon, elt\u00e9r\u0151en n\u00e9znek ki \u00e9s m\u00e1s a funkci\u00f3juk, ugyanakkor a felhaszn\u00e1lok sz\u00e1m\u00e1ra ez nem felt\u00e9tlen\u00fcl vil\u00e1gos, k\u00fcl\u00f6n\u00f6sen akkor k\u00e9pesek zavart okozni, ha egyszerre vannak jelen a weboldalon.<\/p>\n\n\n\n Az elt\u00e9r\u0151 funkci\u00f3jukr\u00f3l egyed\u00fcl a megjelen\u00e9s\u00fck \u00e1rulkodik, ez azonban nem felt\u00e9tlen\u00fcl k\u00e9pes \u00e1tadni az \u00fczenetet: a pipa \u00e9s a pont mind\u00f6ssze annyit mond a felhaszn\u00e1l\u00f3nak, hogy v\u00e1laszt\u00e1si lehet\u0151s\u00e9gr\u0151l van sz\u00f3. Emiatt, amennyiben mindkett\u0151 egyszerre jelenik meg a weboldalon, akkor a k\u00f6vetkezetess\u00e9g, mint UX elv<\/a>, s\u00e9r\u00fclhet. Ez\u00e9rt \u00e9rdemes \u00e1tgondolni, hogy mik\u00e9nt is haszn\u00e1ljuk \u0151ket egy\u00fctt.<\/p>\n\n\n\n A k\u00f6vetkezetess\u00e9g elve kimondja, hogy az olyan elemeknek, melyek hasonl\u00f3 funkci\u00f3val b\u00edrnak egy weboldalon, azonos megjelen\u00e9s\u0171eknek kell lenni\u00fck. A r\u00e1di\u00f3-gombok \u00e9s a jel\u00f6l\u0151n\u00e9gyzetek pedig hasonl\u00f3 funkci\u00f3j\u00faak \u00e9s azonos kontextusban jelennek meg, mik\u00f6zben a megjelen\u00e9s\u00fck elt\u00e9r\u0151:<\/p>\n\n\n\n Az elt\u00e9r\u0151 megjelen\u00e9s az\u00e9rt lehet indokolt, mert m\u00edg a r\u00e1di\u00f3gombok kiz\u00e1r\u00f3 v\u00e1laszt\u00e1st jelentenek, addig a jel\u00f6l\u0151n\u00e9gyzetek eset\u00e9n t\u00f6bb opci\u00f3 is kiv\u00e1laszthat\u00f3. N\u00e9h\u00e1nyan emiatt indokoltnak tartj\u00e1k az elt\u00e9r\u0151 megjelen\u00e9st, ugyanakkor ett\u0151l m\u00e9g a funkci\u00f3juk nem igaz\u00e1n k\u00fcl\u00f6nb\u00f6zik: v\u00e1laszt\u00e1si lehet\u0151s\u00e9geket sorolnak. Legal\u00e1bbis a felhaszn\u00e1l\u00f3k nem k\u00fcl\u00f6nb\u00f6ztetik meg, egyszer\u0171en kiv\u00e1lasztanak egy lehet\u0151s\u00e9get az olvasott c\u00edmke alapj\u00e1n.<\/p>\n\n\n\n A c\u00edmke egy\u00e9bk\u00e9nt tal\u00e1n jobban megmutatja a felhaszn\u00e1l\u00f3nak, hogy mik\u00e9nt haszn\u00e1lhat\u00f3 az \u0171rlap, mint a pipa vagy a pont jelz\u00e9s, hiszen a t\u00f6bbes sz\u00e1m\u00fa megfogalmaz\u00e1s utal arra, hogy t\u00f6bb v\u00e1laszt\u00e1si lehet\u0151s\u00e9get lehet kipip\u00e1lni, vagy \u00e9ppen csak egyet kiv\u00e1lasztani.<\/p>\n\n\n\n Mindenesetre a UX Movement felvet\u00e9se<\/a> szerint tal\u00e1n jobb megold\u00e1s lehet a lenti k\u00e9p jobb oldal\u00e1n l\u00e1that\u00f3 design, amennyiben r\u00e1di\u00f3-gomb \u00e9s jel\u00f6l\u0151n\u00e9gyzet egyszerre jelen van az \u0171rlapon:<\/p>\n\n\n\n Itt a jobb oldali oszlop lenne a megjelen\u00e9sben \u00f6sszhangba hozott verzi\u00f3, ahol a c\u00edmke t\u00f6bbessz\u00e1ma („Kateg\u00f3ri\u00e1k” \u00e9s „T\u00e1vols\u00e1g”) utal arra, hogy egy vagy t\u00f6bb lehet\u0151s\u00e9g v\u00e1laszthat\u00f3, mik\u00f6zben a vizu\u00e1lis megjelen\u00e9s k\u00f6vetkezetes, illetve nem k\u00fcl\u00f6nb\u00f6zteti meg a n\u00e9mik\u00e9pp elt\u00e9r\u0151 m\u0171k\u00f6d\u00e9st.<\/p>\n\n\n\n Ez persze nem azt jelenti, hogy ez a vizu\u00e1lisan jobb megold\u00e1s hat\u00e9konyabb lenne haszn\u00e1lhat\u00f3s\u00e1gi szempontb\u00f3l, mindenesetre \u00f6tletnek j\u00f3<\/strong>, \u00e9s elm\u00e9letben egy megfontoland\u00f3 lehet\u0151s\u00e9g, amikor a r\u00e1di\u00f3-gombokat \u00e9s a jel\u00f6l\u0151n\u00e9gyzeteket \u00f6sszhangba kell hozni egy \u0171rlapon bel\u00fcl.<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2022.10.21.:<\/em><\/p>\n\n\n\n A vissza gomb haszn\u00e1lata sokszor okoz kellemetlen meglepet\u00e9seket a felhaszn\u00e1l\u00f3knak. Ak\u00e1r a b\u00f6ng\u00e9sz\u0151ben, ak\u00e1r a weboldalon bel\u00fcl tal\u00e1lkoznak vele. Nem is igen b\u00edznak benne, mert m\u00e1r tapasztalt\u00e1k, hogy kisz\u00e1m\u00edthatatlan, mi k\u00f6vetkezik a lenyom\u00e1sa ut\u00e1n: sokszor ink\u00e1bb t\u00e1volabb ker\u00fclnek a c\u00e9ljukt\u00f3l, mintsem k\u00f6zeledn\u00e9nek hozz\u00e1. <\/p>\n\n\n\n Ilyen fordul p\u00e9ld\u00e1ul el\u0151 akkor, ha egy t\u00f6bbl\u00e9p\u00e9ses rendel\u00e9s eset\u00e9ben a vissza gomb lenyom\u00e1s\u00e1val nem egy lapot l\u00e9pnek vissza, hanem az eg\u00e9sz folyamat elej\u00e9re ker\u00fclnek, mik\u00f6zben t\u00f6rl\u0151dik minden adat, amit eddig megadtak. A felhaszn\u00e1l\u00f3i frusztr\u00e1ci\u00f3 kik\u00fcsz\u00f6b\u00f6l\u00e9se \u00e9rdek\u00e9ben egy olyan vissza-megold\u00e1st kell k\u00e9sz\u00edtened, mely seg\u00edt az embereknek \u00e9s nem h\u00e1tr\u00e1ltatja \u0151ket.<\/p>\n\n\n\n Min\u00e9l nagyobb az overlay m\u00e9rete a felhaszn\u00e1l\u00f3k ann\u00e1l ink\u00e1bb \u00f6n\u00e1ll\u00f3 lapk\u00e9nt fogj\u00e1k fel. Ez\u00e9rt a vissza gomb funkci\u00f3ja nagym\u00e9ret\u0171 overlay eset\u00e9ben annak bez\u00e1r\u00e1sa kell, hogy legyen, nem pedig a felhaszn\u00e1l\u00f3 el\u0151z\u0151 oldalra mozgat\u00e1sa<\/strong>. Arra azonban figyelj, hogy ez csak kell\u0151en nagy m\u00e9ret\u0171 overlay eset\u00e9ben t\u00f6rt\u00e9njen \u00edgy, mert egy\u00e9bk\u00e9nt zavar\u00f3v\u00e1 v\u00e1lik. Ha pedig arr\u00f3l van sz\u00f3, hogy ak\u00e1r a megadott adatai is elvesznek a vissza gomb lenyom\u00e1sa r\u00e9v\u00e9n, akkor figyelmeztess\u00fck arra, hogy milyen k\u00f6vetkezm\u00e9nyekkel j\u00e1r a kattint\u00e1s.<\/p>\n\n\n\n Mivel a felhaszn\u00e1l\u00f3k rossz tapasztalataikb\u00f3l k\u00f6vetkez\u0151en sokszor f\u00e9lnek haszn\u00e1lni a b\u00f6ng\u00e9sz\u0151 vissza gombj\u00e1t, ez\u00e9rt \u00e9rdemes egyedi vissza gombot tenni minden olyan helyre, ahol sz\u00fcks\u00e9g lehet r\u00e1. Egy weboldalon bel\u00fcli egyedi vissza gombt\u00f3l ugyanis sokkal kisz\u00e1m\u00edthat\u00f3bb, racion\u00e1lisabb m\u0171k\u00f6d\u00e9st v\u00e1rnak.<\/p>\n\n\n\n Na, de hov\u00e1 ker\u00fclj\u00f6n az egyedi vissza gomb? \u00d6k\u00f6lszab\u00e1ly alapj\u00e1n a legjobb, ha a legkev\u00e9sb\u00e9 fontos gombk\u00e9nt tekint\u00fcnk r\u00e1, \u00edgy a legkev\u00e9sb\u00e9 hangs\u00falyos (kontrasztos) megjelen\u00e9st kapja, \u00e9s mivel az els\u0151dleges gomb \u00e1ltal\u00e1ban a k\u00fcls\u0151 sz\u00e9lek k\u00f6zel\u00e9be ker\u00fcl, \u00edgy a vissza gomb legbel\u00fclre ker\u00fcl a gombok sor\u00e1ban<\/strong>.<\/p>\n\n\n\n Ez persze els\u0151sorban \u0171rlapokn\u00e1l \u00e9rv\u00e9nyes, m\u00e1s esetekben elhelyezheted a lap tetej\u00e9n, vagy ak\u00e1r egy „ragad\u00f3s” s\u00e1vban – alapvet\u0151en a bal sz\u00e9len -, m\u00e9gpedig \u00fagy, hogy k\u00f6nnyen \u00e9szrevehet\u0151 legyen.<\/p>\n\n\n\n Ugyanezt egy\u00e9bk\u00e9nt \u0171rlapokon is megteheted, vagyis a vissza gomb nem az \u0171rlap alj\u00e1ra ker\u00fcl a m\u00e1sik vagy t\u00f6bbi gomb mell\u00e9, hanem fel\u00fclre a bal sarokba<\/strong>, ahogy egy\u00e9bk\u00e9nt a b\u00f6ng\u00e9sz\u0151kben is \u00e1ltal\u00e1ban megtal\u00e1lhat\u00f3. Ennek az elhelyez\u00e9snek az az el\u0151nye is megvan, hogy kisebb az es\u00e9lye a f\u00e9lrekattint\u00e1snak a felhaszn\u00e1l\u00f3 r\u00e9sz\u00e9r\u0151l. Ez akkor is fontos, amikor k\u00f6vetkez\u0151-el\u0151z\u0151 gomb p\u00e1rost haszn\u00e1lsz, hiszen ellent\u00e9tes funkci\u00f3kr\u00f3l van sz\u00f3. Ezeket a gombokat min\u00e9l messzebb kell elhelyezni egym\u00e1st\u00f3l, hogy ne legyen f\u00e9lrekattint\u00e1s.<\/p>\n\n\n\n Egy gomb att\u00f3l t\u0171nik interakt\u00edvnak, hogy \u00fagy n\u00e9z ki, mint az oldal t\u00f6bbi gombja, vagy legal\u00e1bb kap egy al\u00e1h\u00faz\u00e1st<\/strong>, hogy linkk\u00e9nt legyen \u00e9rtelmezhet\u0151. Term\u00e9szetesen jelezheted vizu\u00e1lisan a gombok elt\u00e9r\u0151 fontoss\u00e1g\u00e1t, ennek ellen\u00e9re a vissza gombnak is interakt\u00edvnak kell l\u00e1tszania, valamint olyan helyen \u00e9s olyan m\u00f3don kell megjelennie, hogy a felhaszn\u00e1l\u00f3 \u00e9szrevegye.<\/p>\n\n\n\n A hossz\u00fa weboldalakon t\u00f6rt\u00e9n\u0151 navig\u00e1ci\u00f3t seg\u00edtheti az, ha elhelyezel rajtuk egy \u201cvissza a tetej\u00e9re\u201d gombot. A kialak\u00edt\u00e1s\u00e1nak azonban megvannak a maga szab\u00e1lyai. De el\u0151bb azt \u00e9rdemes \u00e1tgondolni, hogy lenne-e sz\u00e1modra jobb megold\u00e1s helyette.<\/p>\n\n\n\n Els\u0151sorban a reszponz\u00edv design megjelen\u00e9se \u00e9s elterjed\u00e9se<\/a> vezetett oda, hogy egyre t\u00f6bb lett az egyhas\u00e1bos, hossz\u00fa weboldal-kialak\u00edt\u00e1s a weben. Ezekn\u00e9l k\u00fcl\u00f6n\u00f6sen hasznoss\u00e1 v\u00e1lt a \u201cVissza a tetej\u00e9re\u201d gomb, melynek haszn\u00e1lat\u00e1val az emberek egyetlen kattint\u00e1ssal a weboldal tetej\u00e9re tudtak navig\u00e1lni. Erre a gyors helyv\u00e1ltoztat\u00e1sra az\u00e9rt lehet sz\u00fcks\u00e9g, mert gyakran el\u0151fordul, hogy az oldal k\u00f6zep\u00e9n j\u00e1rva l\u00e1tni akarj\u00e1k a navig\u00e1ci\u00f3s men\u00fct. P\u00e9ld\u00e1ul az\u00e9rt, mert mondjuk \u00faj c\u00e9lt keresnek, vagy valami sz\u0171r\u00e9st alkalmazn\u00e1nak, esetleg a keres\u0151mez\u0151t haszn\u00e1ln\u00e1k.<\/p>\n\n\n\n Term\u00e9szetesen az oper\u00e1ci\u00f3s rendszerek \u00e9s a b\u00f6ng\u00e9sz\u0151k k\u00edn\u00e1lnak k\u00fcl\u00f6nf\u00e9le megold\u00e1sokat erre, p\u00e9ld\u00e1ul a home gomb lenyom\u00e1sa, vagy Safariban, iOS-n\u00e9l az \u00e1llapotsor meg\u00e9rint\u00e9se is a lap tetej\u00e9re rep\u00edti a felhaszn\u00e1l\u00f3t. Ezeket a tr\u00fckk\u00f6ket azonban a legt\u00f6bben nem ismerik, \u00e9s csak g\u00f6rgetni kezdenek nagy lend\u00fclettel, ha oda akarnak jutni. Ami persze egy igaz\u00e1n hossz\u00fa, vagy ak\u00e1r v\u00e9gtelen oldaln\u00e1l nem biztos, hogy hat\u00e9kony. \u00cdgy sz\u00fcks\u00e9g van a weboldalak r\u00e9sz\u00e9r\u0151l valami nyilv\u00e1nval\u00f3bb megold\u00e1sra. Ez lenne a \u201cVissza a tetej\u00e9re\u201d gomb. Na de hogyan \u00e9rdemes kialak\u00edtani ezt? Erre adott j\u00f3 p\u00e1r tan\u00e1csot<\/a> a Nielsen Norman Group, illetve felsorolt n\u00e9h\u00e1ny alternat\u00edv lehet\u0151s\u00e9get.<\/p>\n\n\n\n Amikor egy weboldal 4 kijelz\u0151nyi m\u00e9retn\u00e9l hosszabb, akkor m\u00e1r \u00e9rdemes haszn\u00e1lni a \u201cvissza a tetej\u00e9re\u201d gombot. Enn\u00e9l r\u00f6videbb oldalakn\u00e1l az\u00e9rt felesleges, mert az embereknek nem okoz f\u00e1radts\u00e1got visszag\u00f6rgetni, mik\u00f6zben a gomb megjelen\u00e9se csak egy zavar\u00f3 elem a fel\u00fcleten, mely feleslegesen n\u00f6veli a zs\u00fafolts\u00e1got.<\/p>\n\n\n\n A jobb als\u00f3 sarokban kellene megjelennie a gombnak, mert ez az a hely, ahol az emberek sz\u00e1m\u00edtanak r\u00e1 \u00e9s keresni fogj\u00e1k. Ez a poz\u00edci\u00f3 nem zavar\u00f3 sz\u00e1mukra, ugyanakkor j\u00f3l \u00e9szrevehet\u0151. Ha a gombot a kijelz\u0151 m\u00e1s r\u00e9sz\u00e9re helyezed, akkor azt kock\u00e1zatod, hogy nem \u00e9szre sem veszik.<\/p>\n\n\n\n Egy ikon \u00f6nmag\u00e1ban – p\u00e9ld\u00e1ul egy felfel\u00e9 mutat\u00f3 ny\u00edl – nem felt\u00e9tlen\u00fcl egy\u00e9rtelm\u0171 jelz\u00e9s az emberek sz\u00e1m\u00e1ra. R\u00e1ad\u00e1sul a grafikai megval\u00f3s\u00edt\u00e1st\u00f3l is f\u00fcgg, hogy mennyire tudj\u00e1k \u00e9rtelmezni azt. Sz\u00f6veg-kieg\u00e9sz\u00edt\u00e9sk\u00e9nt a \u201cvissza a tetej\u00e9re\u201d megteszi, hiszen ez nagyj\u00e1b\u00f3l le\u00edrja a gomb funkci\u00f3j\u00e1t, \u00e9s egy\u00e9rtelm\u0171v\u00e9 teszi azt. A megfelel\u0151 kialak\u00edt\u00e1s az egyetlen ragad\u00f3s gomb. P\u00e9ld\u00e1ul ahelyett, hogy az oldal t\u00f6bb szakasz\u00e1nak v\u00e9g\u00e9re elhelyezel egyet-egyet. Ut\u00f3bbi megold\u00e1s a horgonylinkeket (http:\/\/blog.webshark.hu\/2017\/05\/18\/weblapon-beluli-hivatkozasok\/) haszn\u00e1l\u00f3 oldalakn\u00e1l gyakori. Az NNG azonban haszn\u00e1lhat\u00f3s\u00e1gi vizsg\u00e1latai eredm\u00e9nyek\u00e9nt arra jutott, hogy az emberek nem figyelnek fel ezekre az ism\u00e9tl\u0151d\u0151 linkekre.<\/p>\n\n\n\n A gombot \u00e9rdemes viszonylag kis m\u00e9ret\u0171re venni, hogy ne takarjon ki fontos elemeket a weboldalon. Term\u00e9szetesen mobilon legyen akkora, hogy az embereknek k\u00f6nny\u0171 legyen az \u00e9rint\u00e9ssel t\u00f6rt\u00e9n\u0151 haszn\u00e1lata. Fontos viszont, hogy vizu\u00e1lisan kiemelkedjen az oldalb\u00f3l. Ha nagyon elveszik a tartalomban, akkor az emberek nem fogj\u00e1k \u00e9szrevenni \u00e9s haszn\u00e1lni.<\/p>\n\n\n\n \u00c9rdemes megfontolni egy k\u00e9sleltetett megjelen\u00e9st. Teh\u00e1t csak akkor bukkanjon fel az emberek sz\u00e1m\u00e1ra a gomb, ha m\u00e1r jelent\u0151s m\u00e9rt\u00e9kben leg\u00f6rgettek az oldalon, \u00e9s elk\u00e9pzelhet\u0151, hogy vissza akarnak t\u00e9rni a tetej\u00e9re. A gomb teh\u00e1t akkor legyen l\u00e1that\u00f3, amikor felt\u00e9telezhet\u0151en sz\u00fcks\u00e9g lehet r\u00e1, mik\u00f6zben feleslegesen nem takar ki r\u00e9szeket a tartalomb\u00f3l. Ha viszont megjelent, akkor legyen mozdulatlan az adott poz\u00edci\u00f3ban, mert a mozg\u00e1sra automatikusan felfigyelnek az emberek, \u00e9s odav\u00e1ndorol a tekintet\u00fck.<\/p>\n\n\n\n Azok sz\u00e1m\u00e1ra remek megold\u00e1s, akik az oldal tetej\u00e9n elhelyezked\u0151 navig\u00e1ci\u00f3s men\u00fch\u00f6z t\u00e9rn\u00e9nek vissza, esetleg elind\u00edtan\u00e1nak egy keres\u00e9st a keres\u0151ben, amikor el\u00e9rnek az oldal alj\u00e1ra. Term\u00e9szetesen a megold\u00e1s csak akkor m\u0171k\u00f6dik, ha \u00e1ltal\u00e1ban leg\u00f6rgetnek a weboldalad alj\u00e1ra az emberek.<\/p>\n\n\n\n Ha nem g\u00f6rgetnek le az alj\u00e1ra, akkor egy ragad\u00f3s men\u00fct vethetsz be. Ha a g\u00f6rget\u00e9ssel az az els\u0151dleges c\u00e9ljuk az embereknek, hogy egy m\u00e1sik aloldalra vagy az oldal egy m\u00e1s r\u00e9sz\u00e9re navig\u00e1ljanak, akkor egy \u00e1lland\u00f3an jelen l\u00e9v\u0151 men\u00fc feleslegess\u00e9 teszi a \u201cvissza a tetej\u00e9re\u201d gombot. Ugyan\u00edgy megjelen\u00edthet\u0151k a ragad\u00f3s men\u00fcben azok a f\u0151 funkci\u00f3k is, melyeket egy\u00e9bk\u00e9nt az oldal tetej\u00e9n \u00e9rn\u00e9nek el, mint p\u00e9ld\u00e1ul egy keres\u00e9s vagy sz\u0171r\u00e9s.<\/p>\n\n\n\n A k\u00f6z\u00f6ss\u00e9gi oldalakon a Home gomb funkci\u00f3ja \u00e1ltal\u00e1ban az, hogy a lap tetej\u00e9re vigye a felhaszn\u00e1l\u00f3kat. Ezeken az oldalakon az emberek megszokt\u00e1k a haszn\u00e1lat\u00e1t, ugyanakkor m\u00e1s weboldalakn\u00e1l m\u00e1s a funkci\u00f3ja a home vagy kezd\u0151lap gombnak<\/a>. \u00c1ltal\u00e1ban a weboldalakon az emberek arra sz\u00e1m\u00edtanak, hogy a kezd\u0151lap gomb a f\u0151oldalra viszi \u0151ket, nem pedig a lap tetej\u00e9re. \u00cdgy ezekn\u00e9l nem igaz\u00e1n haszn\u00e1lhat\u00f3.<\/p>\n\n\n\n Aki Google-term\u00e9keket haszn\u00e1l, az 2014 \u00f3ta egyre t\u00f6bb fel\u00fcleten kapja a<\/strong> material design k\u00f6telez\u0151 kell\u00e9kek\u00e9nt a lebeg\u0151 akci\u00f3gombot. De b\u00e1rmilyen weboldalon vagy applik\u00e1ci\u00f3ban lehet haszn\u00e1lni, amire egyre t\u00f6bb p\u00e9ld\u00e1t is l\u00e1tni. A k\u00e9rd\u00e9s, hogy \u00e9rdemes-e? \u00c9s ha igen, hogyan?<\/p>\n\n\n\n A material design<\/a>, \u00e9s annak Google \u00e1ltal megfogalmazott elvei meglehet\u0151sen n\u00e9pszer\u0171ek. Ez a flat desginb\u00f3l kin\u0151tt st\u00edlus remek\u00fcl alkalmazhat\u00f3 az okostelefonok fel\u00fcletein. A jellegzetes sz\u00edns\u00e9m\u00e1n, a semleges tipogr\u00e1fi\u00e1n \u00e9s az anim\u00e1ci\u00f3kon k\u00edv\u00fcl az egyik f\u0151 saj\u00e1toss\u00e1ga az, hogy a fel\u00fcletek jobb als\u00f3 sark\u00e1ban felbukkan a lebeg\u0151 akci\u00f3gomb (floating action button). Egyre t\u00f6bb olyan appba, s\u0151t weboldalba futhatsz bele, melyek alkalmazz\u00e1k egyes elemeit, p\u00e9ld\u00e1ul a lebeg\u0151 akci\u00f3gombokat.<\/p>\n\n\n\n A lebeg\u0151 akci\u00f3gomb az als\u00f3 sarokba ker\u00fclve k\u00f6veti mindenhov\u00e1 a felhaszn\u00e1l\u00f3t. Az\u00e9rt ott, hogy az emberek k\u00f6nnyen el\u00e9rhess\u00e9k okostelefon haszn\u00e1lata k\u00f6zben a h\u00fcvelykujjukkal. Hab\u00e1r apr\u00f3 a m\u00e9rete, \u00e9s els\u0151re tal\u00e1n a fel\u00fclet egy l\u00e9nyegtelen elem\u00e9nek t\u0171nhet, azonban a hat\u00e1sa jelent\u0151s. Ha j\u00f3l alkalmazz\u00e1k, akkor k\u00f6nnyen azonos\u00edthat\u00f3 \u00e9s haszn\u00e1lhat\u00f3. \u00dagy t\u0171nik ugyanakkor, hogy b\u00e1r vannak el\u0151nyei, el lehet rontani a haszn\u00e1lat\u00e1t. L\u00e1ssuk, hogyan.<\/p>\n\n\n\n A f\u0151 probl\u00e9ma az, hogy els\u0151sorban a designerek probl\u00e9m\u00e1j\u00e1t oldja meg, \u00e9s nem annyira a felhaszn\u00e1l\u00f3k\u00e9t<\/strong> – v\u00e9lekedett kor\u00e1bban a Webdesigner Depoton<\/a> megjelent poszt szerz\u0151je, Benjie Moss. A gombnak ugyanis az lenne a feladata, hogy az \u00fagynevezett \u201ck\u00f6vetkez\u0151 l\u00e9p\u00e9st<\/em>\u201d, amit a felhaszn\u00e1l\u00f3 megtehet, vagyis az els\u0151dleges akci\u00f3t hozza el\u0151t\u00e9rbe. \u201cA floating action button represents the primary action in an application<\/em>\u201d – fogalmaz a Google material designr\u00f3l k\u00e9sz\u00fclt \u00fatmutat\u00f3ja<\/a>.<\/p>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/04\/gombok.png\")
<\/figure>\n\n\n\nHogyan \u00e9p\u00fcl fel egy gomb?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/gomb-felepitese.png\")
<\/figure>\n\n\n\nA gombok 4 t\u00edpusa<\/h2>\n\n\n\n
A norm\u00e1l gomb<\/h4>\n\n\n\n
![\"Egy](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/04\/kiemelkedo-gomb.jpg\")
Szellemgomb<\/h4>\n\n\n\n
![\"Szellemgombok\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/04\/szellemgomb.png\")
Ikon-gomb<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2022\/10\/ikon-gomb.png\")
<\/a><\/figure><\/div>\n\n\n\nLebeg\u0151 akci\u00f3gomb<\/h4>\n\n\n\n
A gomboknak 5 \u00e1llapota van<\/h2>\n\n\n\n
![\"Gomb](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/gomb-allapotok.png\")
<\/figure><\/div>\n\n\n\nMilyen tipikus helyzetekben jelenhetnek meg a gombok?<\/h2>\n\n\n\n
Els\u0151dleges \u00e9s m\u00e1sodlagos gombok \u0171rlapokn\u00e1l<\/h3>\n\n\n\n
![\"Els\u0151dleges](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/04\/elsodleges-masodlagos-gomb.png\")
Gombok a p\u00e1rbesz\u00e9dablakokban<\/h3>\n\n\n\n
Mekkora az optim\u00e1lis kontrasztar\u00e1ny a gombokn\u00e1l?<\/h2>\n\n\n\n
![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/04\/gomb-kontraszt.jpg\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/11\/kontraszt-elsodleges-masodlagos-gombnal.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/11\/fekete-gomb-kontraszt.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/11\/nagyobb-kontrasztu-masodlagos-gomb.png\")
<\/figure>\n\n\n\nMekkora legyen egy gomb?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/optimalis-gombmeret.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/gombmeret-proritas.png\")
<\/figure><\/div>\n\n\n\nMekkora legyen a gombok k\u00f6z\u00f6tti t\u00e1vols\u00e1g?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/optimalis-gombtavolsag.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/gombtavolsag.png\")
<\/figure>\n\n\n\nMekkora legyen a gombon l\u00e9v\u0151 sz\u00f6veg?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/szoveges-gombok-merete.png\")
<\/figure><\/div>\n\n\n\nT\u00e1vols\u00e1gok a sz\u00f6veges gombokn\u00e1l<\/h2>\n\n\n\n
![\"Megfelel\u0151](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/tavolsag-szoveges-gombok.png\")
Milyen legyen a gombon szerepl\u0151 sz\u00f6veg?<\/h2>\n\n\n\n
Haszn\u00e1lj cselekv\u0151 ig\u00e9ket!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/ige-gombon.png\")
<\/figure><\/div>\n\n\n\nFogalmazz pontosan!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/pontos-fogalmazas.png\")
<\/figure><\/div>\n\n\n\nMindennapi kifejez\u00e9seket haszn\u00e1lj!<\/h4>\n\n\n\n
Fogalmazz r\u00f6viden!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/hosszu-altalanos-szoveg-gombon.png\")
<\/figure><\/div>\n\n\n\nCsak az els\u0151 bet\u0171 legyen nagybet\u0171<\/h4>\n\n\n\n
Mikor \u00e9s hogyan jelezheted a t\u00f6lt\u0151d\u00e9si \u00e1llapotot egy gombn\u00e1l?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/08\/allapotjelzes-gombon.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/08\/allapotjelzes-gombon-02.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/08\/allpot-jelzese-gombon.png\")
<\/figure><\/div>\n\n\n\nMilyenek legyenek a nem-akt\u00edv gombok?<\/h2>\n\n\n\n
![\"nem](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/08\/nem-aktiv-gomb.png\")
<\/figure><\/div>\n\n\n\n![\"P\u00e9lda](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/08\/nem-aktiv-gomb-pelda.png\")
<\/figure><\/div>\n\n\n\nMi\u00e9rt ne haszn\u00e1lj inverz sz\u00edneket az akt\u00edv \u00e9s nem-akt\u00edv \u00e1llapot kifejez\u00e9s\u00e9re?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/01\/egyenlo-kontraszt.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/01\/helyes-kapcsolo-szin.png\")
<\/figure><\/div>\n\n\n\nHogyan jelezd a hover \u00e1llapotot egy gombn\u00e1l mobilon?<\/h2>\n\n\n\n
![\"Fodroz\u00f3d\u00e1si](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/09\/fodrozodasi-effekt.png\")
<\/figure><\/div>\n\n\n\n![\"Fodroz\u00f3d\u00e1si](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/09\/fodrozodasi-effekt-megjelenese.png\")
<\/figure><\/div>\n\n\n\nMi a gond a sz\u00f6veg-gombokkal?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/06\/szoveges-gomb.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/06\/szoveges-gomb-problema.png\")
<\/figure><\/div>\n\n\n\nMi lehet a megold\u00e1s?<\/h4>\n\n\n\n
Keretes gomb<\/h5>\n\n\n\n
![\"keretes](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/06\/keretes-gomb.png\")
<\/figure><\/div>\n\n\n\nHalv\u00e1nyabb sz\u00edn\u0171 gomb<\/h5>\n\n\n\n
![\"Halv\u00e1ny](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/06\/halvany-kitoltesu-gomb.png\")
<\/figure><\/div>\n\n\n\nMikor lehet \u00e9rtelme sz\u00f6veg-gombot haszn\u00e1lni?<\/h4>\n\n\n\n
![\"Csek\u00e9ly](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/06\/csekely-fontossagu-szoveg-gomb.png\")
<\/figure><\/div>\n\n\n\nMi\u00e9rt ne tedd egym\u00e1s mell\u00e9 az ellent\u00e9tes funkci\u00f3j\u00fa gombokat?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/02\/tul-kozel-levo-ellentetes-lehetosegek.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/02\/jobb-megoldas.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/02\/megnovelt-tavolsag-hiba-elkerulesere.png\")
<\/figure><\/div>\n\n\n\nMilyen legyen az ellent\u00e9tes funkci\u00f3j\u00fa gombok sorrendje?<\/h3>\n\n\n\n
Hogyan tervezz r\u00e1di\u00f3-gombokat a weboldaladra? <\/h2>\n\n\n\n
Mi is az a r\u00e1di\u00f3-gomb?<\/h3>\n\n\n\n
Mikor \u00e9rdemes haszn\u00e1lni?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2022\/12\/tobb-opcio.png\")
<\/a><\/figure><\/div>\n\n\n\nMikor ne haszn\u00e1ld?<\/h3>\n\n\n\n
Hogyan tervezd meg a r\u00e1di\u00f3-gombos list\u00e1t?<\/h3>\n\n\n\n
1. Legyen egyszer\u0171 \u00e9s j\u00f3l illeszkedjen a designba<\/h4>\n\n\n\n
2. Mindig legyen egy lehet\u0151s\u00e9g alap\u00e9rtelmezetten kiv\u00e1lasztva!<\/h4>\n\n\n\n
3. Ne tekintsd \u0151ket akci\u00f3-gomboknak!<\/h4>\n\n\n\n
![\"R\u00e1di\u00f3-gomb](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/radio-gomb-alkalmazasa.jpg\")
<\/figure><\/div>\n\n\n\nMi\u00e9rt nem f\u00e9rnek \u00f6ssze a r\u00e1di\u00f3-gombok \u00e9s a jel\u00f6l\u0151n\u00e9gyzetek egy \u0171rlapon? \u00c9s mi lehet a megold\u00e1s?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/03\/radio-gombok-es-jelolonegyzetek.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/03\/osszhangba-hozva.png\")
<\/figure><\/div>\n\n\n\nMilyen egy j\u00f3 „vissza” gomb?<\/h2>\n\n\n\n
Z\u00e1rja be az overlayt<\/h4>\n\n\n\n
Az egyedi vissza gomb poz\u00edci\u00f3ja<\/h4>\n\n\n\n
Az egyedi vissza gombod interakt\u00edvnak n\u00e9zzen ki!<\/h4>\n\n\n\n
\n\n\n\nHogyan alak\u00edtsd ki a \u201cvissza a tetej\u00e9re\u201d gombot<\/h2>\n\n\n\n
Mikor van sz\u00fcks\u00e9g ilyen gombra?<\/h4>\n\n\n\n
Hova \u00e9rdemes helyezned?<\/h4>\n\n\n\n
Kell-e sz\u00f6veg a gombhoz?<\/h4>\n\n\n\n
Hogyan helyezd el?<\/p>\n\n\n\nMekkora legyen?<\/h4>\n\n\n\n
Mik\u00e9nt jelenjen meg?<\/h4>\n\n\n\n
Mivel cser\u00e9lheted le a \u201cvissza a tetej\u00e9re\u201d gombot?<\/h3>\n\n\n\n
Navig\u00e1ci\u00f3 az oldal alj\u00e1n<\/h4>\n\n\n\n
Ragad\u00f3s men\u00fc<\/h4>\n\n\n\n
A \u201cHome\u201d gomb<\/h4>\n\n\n\n
Lebeg\u0151 akci\u00f3gomb: hogyan haszn\u00e1ld? Hol hib\u00e1zhatsz vele?<\/h2>\n\n\n\n
![\"lebego-akciogomb-mobilon\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/11\/lebego-akciogomb-mobilon.jpg\")
Mi a legnagyobb gond a lebeg\u0151 akci\u00f3gombbal?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/11\/evernote-lebego-akciogomb.gif\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/11\/atalakulo-lebego-akciogomb.gif\")
<\/figure><\/div>\n\n\n\n![\"Egy](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/08\/google-naptar-kapcsolo.jpg\")
![\"Windows](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/08\/microsoft-windows-kapcsolo.png\")