Kaip sukurti gražų internetinės svetainės mygtuką ir kokios taisyklės

Kokie yra gražūs internetinės svetainės mygtukai? Kažkas pasakys, kad jie turėtų būti ryškūs ir pritraukti dėmesį, kiti sakys, kad jie turėtu būti mirgantis. Mūsų nuomone gražūs svetainės mygtukai, tai tokie mygtukai, kurie dera prie internetinės svetainės ir svetainės puslapio.

Nepamirškite apie svetainės mygtukų funkcijas ir vietą. Įdėjus gražų mygtuką nelogiškoje vietoje arba užkimšus dizainą nenaudingais elementais, vartotojas gali palikti svetainę. Mūsų straipsnyje mes jums pasakysime, kaip sukurti gražų mygtuką svetainei ir kokios taisyklės tam yra.

Internetinės svetainės mygtukų užduotis

Svetainės mygtukų paskirtis yra akivaizdi ir savaime suprantama: jie reikalingi norint juos spustelėti. Ryškus, akį traukiantis mygtukas yra daug efektyvesnis nei subtilus blankus mygtukas. Žinoma, viską reikia matuoti: puslapis, kuriame yra įvairių spalvų mygtukų ir netgi animuotų, vartotoją tiesiog gąsdina. Nesuprasdamas, kaip naršyti šioje sąsajoje, jis uždarys išteklių neatlikdamas nė vieno tikslinio veiksmo. Todėl tokį sąsajos elementą kaip mygtuką reikėtų naudoti matomoje ekrano srityje ir ne daugiau kaip du mygtukus. Veiksmai, už kuriuos jie yra atsakingi, vartotojui turėtų būti aiškūs iš pirmo žvilgsnio.

Svetainės mygtukai yra suskirstyti į tris tipus ir kiekvienas turi savo HTML žyma:

– Nuorodos mygtukas sukurtas naudojant žymą. Šis gražus svetainės mygtukas atkreipia dėmesį į objektą, motyvuoja eiti į norimą puslapį.
– Veiksmo mygtukas. Tai mygtukas, atsakingas už konkretų veiksmą: formos pateikimą, modalinio lango atidarymą, failo atsisiuntimą ir kt.
– Vaizdo mygtukas turi patrauklia vaizdo foto, kuri gali būti png, jpg ar gif formato ir turi turėti veiksmo mygtuką. Žemiau foto

Kaip sukurti gražų internetinės svetainės mygtuką

Gražaus mygtuko privalumai prieš paprasta nuorodą

Daugelyje svetainių teksto nuorodų skaičius gerokai viršija mygtukų skaičių. Svetainės mygtukai yra grafiniai elementai, kuriuos sukurti reikia šiek tiek pasistengti, o nuorodos sukūrimas užtrunka vos kelias sekundes. Nuorodų ir mygtukų užduotys yra beveik identiškos. Todėl svarbu suprasti, kada mygtukas yra tinkamas, o kada įprasta nuoroda.

Paprasta taisyklė: „Turime pradžiuginti savo klientus bet kokiomis prieinamomis priemonėmis!”

Daug mygtukų svetainės puslapyje ne tik vizualiai perkrauna puslapį ir atitraukia vartotojo dėmesį, bet ir sulėtina apkrovą. Neturėtų būti per daug raginimų veikti! Todėl mygtukas reikalingas tik ten, kur reikia priversti vartotoją atlikti konversijos veiksmą: sumokėti už užsakymą, užsiprenumeruoti, atsisiųsti failą, užsiregistruoti ir pan. Visais kitais atvejais pakanka nuorodų.

Kokie yra kriterijai, kaip atskirti svarbius veiksmus nuo nesvarbių? Tiesiog užduokite sau klausimą, ar numatomas veiksmas turės įtakos svetainės ir viso verslo rezultatams.
Svarbūs veiksmai, kaip taisyklė, yra susieti su vartotoju, kad reikia stengtis: susikurti paskyrą portale, užpildyti formą, parašyti komentarą, nusipirkti produktą. Mažiau svarbiems veiksmams ir pastangoms reikia mažiau (pavyzdžiui, pereiti iš vieno puslapio į kitą).

9 taisyklės, kaip naudoti gražius mygtukus svetainėje.

1, Įdėkite mygtukus patogiose ir vartotojui gerai žinomose vietose.

Atminkite, kad svetainės našumas priklauso ne tik nuo vietos, bet ir nuo mygtukų tvarkos, ypač jei tai yra suporuoti mygtukai (pvz., „Pirmyn“ ir „atgal“). Vizualiai pabrėžkite tikslą arba pagrindinį vartotojo veiksmą.

2, Svetainės mygtukai yra gražūs ir kontekstiniai.

Mygtukai neturėtų išeiti iš bendro svetainės dizaino ir firminio prekės ženklo tapatumo! Sąmoningai rinkitės spalvas ir stilius.
Taigi, jei jūsų sąsaja sukurta remiantis plokščio dizaino principais, prie jos nepridėkite „stiklo“ „Apple“ stiliaus tūrinių mygtukų. Pažaiskite su logotipo dizaino ypatybėmis, pasirinkite tinkamas formas, spalvas, tipografiją.

3, Antriniai mygtukai turėtų būti mažiau pastebimi.

Meniu informacija, valdikliai, slankikliai ir kiti paslaugų elementai turėtų likti antrame plane. Jie gali būti suprojektuoti tuo pačiu stiliumi (pavyzdžiui, kampai gali būti suapvalinti tuo pačiu spinduliu), tačiau užpildo spalva ar gradientas, kraštų, šešėlių išvaizda ir kt gali skirtis.

4, Būkite atsargūs su neryškiais šešėliais.

Kurdami gražius svetainės mygtukus, naudodami CSS, interneto dizaineriai laikosi vadinamojo šešėlių dėsnio: šešėlis visada atrodo geriau, kai šviesesnis elementas yra tamsesniame fone. Jei situacija priešinga, būkite atsargūs su šešėliais, kad neliktų netvarkingos, beformės dėmės.

5, Vienodas antrosios, trečiosios, ketvirtosios eilės elementų stilius.

Kurdami sąsają su gausiu funkcijų rinkiniu, turėtumėte laikytis vienos vaizdinės kalbos. Tai padarys svetainę ne tik gražia, bet ir suprantama bei hierarchiška.
Beje, mygtukų dydžiai, užpildas, šriftas ir reljefo gylis taip pat turėtų mažėti, nes elemento svarba mažėja – siekiant sumažinti jo vizualinį svorį.

6, Būkite atsargūs su vaiduoklių mygtukais.

Tai yra mygtukai, kuriuos sudaro tik brūkšnys ir tos pačios spalvos kraštas (fonas yra skaidrus). Jie gali išnykti, ir tai nėra kalbos figūra, o faktas, kurį patvirtina tinkamumo naudoti tyrimai: vartotojai ne visada juos pastebi, o kartais negali perskaityti ant jų esančio užrašo. Sunkiau juos pritaikyti sąsajoje nei įprasti HTML mygtukai, skirti svetainei (su nepermatomu užpildu).

Dizaineriai randa išeitį padarydami užpildą baltą – tai lengviausia padaryti. Tačiau ryški nuotrauka arba pagrindinio elemento užpildymas gali paveikti mygtuką, kad jo visiškai nematytų. Be to, mygtukas vaiduoklis yra mažiau svarus ir prasmingas, palyginti su įprastu mygtuku.

7, Nerašykite svetainės mygtuke teksto Gerai ar panašiai.

Svetainės dizainui netinka tokie paprasti mygtukai kaip „Taip“, „Ne“, „Atšaukti“, „Gerai“ ir kiti, kuriuos kasdien spaudžiame kompiuterio sąsajoje, nes jie niekaip neapibūdina vartotojo atlikto veiksmo. Kad būtų lengviau stebėti metriką, susiekite savo raginimo veikti su konversijos veiksmu ir mygtukų antrašte.

8, Geriausia mygtukui vieta yra apatiniame dešiniajame puslapio kampe.

Tai galima įrodyti naudojant Gutenbergo diagramą. Vizualiai puslapis susideda iš keturių segmentų, o rodyklės rodo vartotojo žvilgsnio judėjimą. Labiausiai žmonės atkreipia dėmesį į viršutinį kairįjį ir apatinį dešinįjį puslapio kampus, tačiau apatini kairyjį kvadratą vartotojas praleidžia beveik nesustodamas. Taigi konversijos mygtukų išdėstymo rekomendacijos.

– Modaliniuose languose tikslinį mygtuką geriau įdėti dešinėje pusėje.
– „Užsakyti“, „Mokėti“, „Siųsti“ ir kiti mygtukai veiks geriau, jei bus įdėti dešinėje lango pusėje.

Kairėje esantys mygtukai atkreipia dėmesį greičiau, tačiau kadangi vartotojas dar nematė visko iki galo, jis mygtuko nespustelėja. Ir kai jis susipažino su visais variantais, jo žvilgsnis jau artėja prie alternatyvaus pasirinkimo mygtuko, kurį lengviau spustelėti, nei grįžti atgal ir ieškoti pirmojo mygtuko.

Todėl optimali tokia tvarka: kairėje – antrinio pasirinkimo mygtukas, dešinėje pabaigoje – konversijos mygtukas.

Turite klausymų ar reikalingos svetainės kūrimo ar kitos paslaugos, susisiekite su mumis telefonu arba per kontaktų formą

internetinės svetainės