Použiteľnosť pre Dummies: čo by mali byť tlačidlá na webe

Ideálne tlačidlá sú, keď návštevníci stránok nie sú rozptyľovaní nimi, ale sú neustále kliknutí. Dobré tlačidlo by malo vyzerať prirodzene a organicky, aby ho užívateľ nehodnotil na úrovni vedomia, ale automaticky nasledoval zadaný hovor. V tomto článku sa dozviete, čo by mali byť perfektné tlačidlá na webe.

Kedy použiť tlačidlá namiesto odkazov

Prakticky na každom zdroji nájdete viac odkazov ako tlačidlá. Tlačidlá sú obrázky, ktoré je potrebné vynaložiť na ich vytvorenie. Spojenie môže byť vykonané za sekundu. V tomto prípade prepojenia a tlačidlá riešia takmer identické úlohy. Kedy musím používať tlačidlá a kedy môžem používať odkazy?

Ak stránka používa príliš veľa tlačidiel, načítava sa pomaly. Okrem toho sa užívateľ môže po zobrazení niekoľkých výziev na akciu zmiasť. Preto použite tlačidlá, keď potrebujete povzbudiť používateľa, aby pre vás vykonal dôležitú akciu: nákup, prevzatie, registrácia atď. Vo všetkých ostatných prípadoch, vhodné odkazy.

Ako rozlíšiť dôležitú akciu od menej dôležitej? Opýtajte sa sami seba: "Má zamýšľaný účinok na moju firmu alebo moju stránku?"

Dôležité akcie zvyčajne vyžadujú aktívne úsilie používateľa. Musí sa zaregistrovať, komentovať, objednať, atď. Menej dôležité opatrenia si nevyžadujú aktívne úsilie. Užívateľ sa presunie zo stránky na stránku a spotrebuje obsah.

Ako správne používať prechody

Návrhári používajú prechody, aby poskytli prirodzený vzhľad prvkov rozhrania. Keď svetelný zdroj osvetľuje objekt zhora, vytvára prirodzený svetelný efekt a dáva objektom hĺbku. Užívateľ vníma osvetlené oblasti objektu čo najbližšie k svetelnému zdroju a tmavé oblasti ako vzdialené.

Pri vytváraní tlačidiel nezabudnite:

  • Človek vníma tlačidlo zapnuté v hornej časti a zatemnené v spodnej časti, ako konvexné.
  • Osoba vníma tlačidlo, ktoré sa rozsvieti v spodnej časti a stmavne na vrchu, ako konkávne alebo stlačené.

Užívateľ by mal vidieť vyvýšené tlačidlo, kým ho nestlačí. Ak užívateľ stlačí tlačidlo, mal by ho vidieť konkávne. Tento efekt sa dá dosiahnuť pomocou gradientov.

Ako urobiť tlačidlo presvedčivé

Tlačidlá takmer vždy obsahujú CTA, ale užívatelia nie vždy na ne kliknú. Ak chcete zvýšiť možnosť kliknutia, musíte presvedčiť tlačidlá. Čo to znamená z hľadiska použiteľnosti?

  • Použite prechody, tiene a zaoblené rohy, aby bolo tlačidlo realistické.

Čím je tlačidlo reálnejšie, tým častejšie na neho používatelia kliknú. Efekt trojrozmerného tlačidla môžete dosiahnuť s prechodmi, tieňmi a zaoblenými rohmi. Osoba počas dňa automaticky stlačí desiatky tlačidiel: zavolá výťah, zapne televízor alebo klimatizáciu, odpovie na telefónne hovory atď. Čím viac skutočného tlačidla na stránke vyzerá, tým väčšia je šanca, že ho používateľ klikne automaticky.

  • Použite kontrastné farby.

Kontrastná farba priťahuje pozornosť používateľa. Ideálna farba je tá, ktorá okamžite privedie návštevníka na vedomie tlačidlo. Upozorňujeme, že farba tlačidla musí byť v kontraste s pozadím stránky a farbou textu na samotnom tlačidle.

  • Urobte tlačidlo dostatočne veľké, ale nie neprirodzene obrovské.

Veľkosť je dôležitá, pokiaľ ide o tlačidlá. Čím väčšie tlačidlo, tým ľahšie priťahuje pozornosť používateľa. Keď zvýšite tlačidlo, nezabudnite úmerne zväčšiť veľkosť písma CTA. Nepreháňajte to veľkosťou. Tlačidlo by nemalo vizuálne absorbovať obsah.

  • Použite urgentné slová

Teraz, dnes, okamžite, jedným kliknutím tieto a ďalšie slová vytvárajú efekt naliehavosti. Použite ich v texte na tlačidle na stimuláciu kliknutí.

  • Zjemnite CTA

Užívatelia môžu odmietnuť vašu ponuku z rôznych dôvodov. Napríklad považujú produkt za príliš drahý, nerozumejú jeho hodnotám a podstate. V tomto prípade vám pomôžu mäkké volanie k akcii. Ponúknite používateľom demo verziu, bezplatné obdobie používania, ďalšie informácie o produkte atď.

  • Používajte správne veľké a malé písmená.

Ak sa vaša CTA skladá z dvoch slov, napíšte oboje veľkým písmenom. Veľké písmená zobrazujú výzvu. Ak sa vaša CTA skladá z troch slov alebo viac, napíšte prvé slovo veľkým písmenom a zvyšok napíšte malými písmenami. V tomto prípade je text vnímaný ako dialóg. Vzorce vyzerajú takto: hard CTA = jedno alebo dve slová + každé slovo s kapitálom; soft CTA = tri slová alebo viac + s kapitálom len prvý.

  • Ilustrácia výziev na akciu

To možno vykonať pomocou ikon, šípok a ďalších prvkov. Vďaka tomu je CTA presvedčivejšia. Napríklad šípka na tlačidle ukazuje používateľovi, že po kliknutí prejde na inú stránku.

  • Použiť efekty vznášania

Vizuálna zmena tlačidla pri presune kurzora na neho presvedčí používateľa, aby vykonal akciu. Čo by sa malo zmeniť? Môžu to byť prechody, zmena farby písma alebo zmena vzhľadu kurzora. Ak napríklad prejdete kurzorom na tlačidlo, kurzor sa dá zmeniť z neutrálnej šípky na ruku v ukazovacom geste.

Prečo tlačidlá OK už nie sú v poriadku

Vývojári rozhrania často používajú tlačidlá ako „OK“, „Zrušiť“, „Áno“, „Nie“ atď. Ak používate počítač, tieto tlačidlá sa zobrazujú každý deň.

Tieto tlačidlá nemajú nič spoločné s akciou, ktorú používateľ vykoná. Aby bol váš signál jasnejší a presvedčivejší, spojte CTA s požadovanou / plánovanou akciou používateľa.

Prečo by mali byť konverzné tlačidlá umiestnené v pravom dolnom rohu stránky.

Na túto otázku môžete odpovedať po štúdiu grafu Gutenberga.

Diagram ukazuje, že stránka je rozdelená na štyri časti. Šípky označujú pohyb návštevníkov. Horný ľavý a pravý spodný kvadrant stránky dostáva od používateľa najväčšiu pozornosť. Spodný ľavý kvadrant dostáva najmenšiu pozornosť. Preto je lepšie umiestniť tlačidlo konverzie v pravej dolnej časti stránky.

Prečo by v dialógových oknách malo byť tlačidlo požadovanej akcie vpravo

V dialógových oknách fungujú tlačidlá požadovanej akcie ("Kúpiť", "Pokladňa", "Áno", "OK" atď.), Keď sú umiestnené vpravo. Poznačte si nasledujúci obrázok:

Ak je tlačidlo požadovanej akcie vľavo, používateľ si ho najprv všimne. Nie je to však potrebné, kým nepreskúma všetky dostupné možnosti. Návštevník si všimne tlačidlo požadovanej akcie a potom upozorní na tlačidlo alternatívnej akcie. Aby si mohol vybrať možnosť „Áno“, jeho pozornosť sa musí vrátiť na tlačidlo požadovanej akcie.

Keď je tlačidlo pre požadovanú akciu vpravo, cesta konverzie sa skráti o jeden krok:

Keď je tlačidlo pre požadovanú akciu na pravej strane, pozornosť používateľa sa najprv zastaví na sekundárnej možnosti a potom sa presunie na požadovanú možnosť.

Keď je tlačidlo pre požadovanú akciu na ľavej strane, užívateľ sa stretne s tromi vizuálnymi opravami na ceste k konverzii. Keď je tlačidlo požadovanej akcie vpravo, počet vizuálnych fixácií sa zníži na dve.

Ako vybrať tlačidlo požadovanej akcie

V dialógových oknách má zmysel vizuálne zvýrazniť tlačidlo požadovanej akcie. V tomto prípade priťahuje a udržuje pozornosť používateľa.

Ak chcete vizuálne zvýrazniť tlačidlo konverzie, môžete použiť nasledujúce metódy:

  • Použite bohatú farbu pre tlačidlo požadovanej akcie a alternatívnu akciu pre tlačidlo, ktoré je nenasýtené.
  • Použite farbu pozadia pre tlačidlo alternatívnej akcie. Všimnite si dialógové okno Skype na obrázkoch vyššie. Tlačidlo alternatívnej akcie "Koniec" sa spojí s pozadím.
  • Vytvorenie alternatívneho tlačidla akcie ako odkazu.
  • Pomocou efektu priehľadnosti, vďaka ktorému alternatívne tlačidlo akcie vyzerá neaktívne.

Prečo by ikony mali mať priehľadné pozadie

Ikony zvyšujú efektívnosť používateľského rozhrania. Ľudia vnímajú vizuálne vzory ikon desaťtisíckrát rýchlejšie ako text. Platí to vtedy, keď sú obrázky zobrazené na priehľadnom pozadí.

Keď je pozadie ikon nepriehľadné, rýchlosť vnímania informácií používateľom prudko klesá. Pozadie vytvára vizuálny šum, ktorý robí všetky ikony rovnaké. Namiesto okamžitého skenovania vizuálnych informácií musí užívateľ čítať a interpretovať obrázky, ktoré sú typické pre prácu s textom.

Použitie nepriehľadného pozadia pre ikony možno porovnať s textom písaným veľkými písmenami: to sťažuje skenovanie vizuálnych vzorov a znižuje rýchlosť vnímania.

Ako používať šípky a bodky

Šípky na tlačidlách označujú používateľa, aby dokončil akciu po prechode. Napríklad kliknutím na tlačidlo môže návštevník zadať objednávku, vybrať produkt, prihlásiť sa na odber newsletteru.

Šípky v menu označujú dostupnosť ďalších možností.

Body na tlačidlách av menu označujú dostupnosť ďalších možností a neúplnosť akcie.

Šípky a bodky vytvárajú intuitívne tlačidlá a ponuky.

Tlačidlá musia byť viditeľné a presvedčivé.

K tomu musia dizajnéri vybrať rozloženie pravého tlačidla, použiť prechody a bohaté farby, aplikovať efekty vznášania, kontrasty a správne výzvy na akciu. Účinnosť tlačidiel je vylepšená pomocou šípok, elipsy a ďalších vizuálnych prvkov. Tlačidlá by mali byť dostatočne veľké, ale nemali by vizuálne absorbovať okolitý text.

Zanechajte Svoj Komentár