Veebisaidi kasutajaliidese nuppude kujundamise kunst: 10 suundumust ja näpunäidet
Suurepärane nuppude kujundamine on asi, millest enamik veebisaidi kasutajaid kunagi ei mõtle ... sest kui see töötab hästi, on see peaaegu nähtamatu. Parimaid nuppe on lihtne klõpsata või koputada, neil on ilmne funktsioon ja need aitavad kasutajatel kujundusega suhelda ilma mõtlemata.
See on üsna lihtne valem, kuid seda võib olla keeruline kujundada, kui jätta see järelmõtteks.
Täna vaatleme nuppude kujundamise suundumusi ja mõned näpunäited, mis aitavad teil kujundada kasutajaliidese nuppu, mida inimesed ikka ja jälle klõpsavad. Andke oma nupule kujundus hoog sisse nende näpunäidete, suundumuste ja ideede abil, et inspiratsiooni ammutada.
Tutvuge disainiressurssidega
1. Hoidke see lihtne
See kõik tuleb tagasi disaini teoorias selle klassikalise fraasi juurde: pidage seda lihtsaks, lolliks (või kui rumal, kui soovite).
Veebisaidi nuppude kujundus ei erine. Nuppude kujundus ei pea olema liiga keeruline. See peaks olema ilmne ja funktsionaalne. Mõnikord võivad seda takistada muud kujundussuundumused ja see võib mõjutada teie veebisaidi konversioone.
Niisiis, kui tegemist on nupu kujundusega, mõelge nii - ja ärge seda üle mõelge. Nupp peaks välja nägema nagu nupp. See on nii lihtne.
2. Pakkuge palju kontrasti
Peaaegu sama oluline kui tuvastatava nupu omamine on selle nähtavuse tagamine.
Kummitusnuppude stiilid kiirelt kahandatud ja pleekinud piltide peal on seetõttu, et nuppude kontrastsus ei olnud piisavalt eristatav. Kasutajad ei leidnud neid kohe.
Ärge peitke halva kontrastsusega nuppe. Pange need silma paista ja karjuda rohke värvi- ja ruumikontrastiga, nii et need seisaksid ekraanil silma teistest elementidest. Jätke nuppude ümber palju polsterdust, et need saaksid hingata.
See teeb nuppude hõlpsamaks kasutajatele klõpsatavate elementide leidmise ja tuvastamise ning ka füüsiliselt hõlpsamaks klõpsamise ilma vale elemendi kogemata saamise teel.
3. Kasutage värvi
Kas olete kunagi märganud, mitu nuppu on punased või oranžid? Põhjus on see, et erksad värvid juhivad neid elemente tähelepanu ja julgustavad tegutsema.
Värvi kasutamine on ka üsna trendikas disainitehnika. Alates erksavärvilistest kuni lihtsate kaldega nööpidega võib värv olla üks lihtsamaid viise, kuidas aidata inimestel kujundusega suhelda.
4. Kirjutage mikrokoopia, mis loob ootusi
Ärge tehke seda viga: nupp, millel on sõnad „Klõpsake siin“. (Kui rämps on see?)
Nupukujunduses olev mikroskoopia peaks looma selge ootuse, mis klõpsuga juhtub. Teatage kasutajatele, mida nad järgmisena saavad. See võib olla andmete sisestamiseks sama lihtne kui „Esita”, klõpsates lingil „Lisateave” või vaadates videot. Olenemata toimingust, rääkige sellest kasutajatele mikroskoopia abil.
See teave võib aidata luua usaldust kasutajate suhtes ja suurendada konversioonide hulka toimingute / interaktsioonide abil, mida kasutajad peavad soovitavaks.
5. Suhelge peene animatsiooniga
Nuppude kujundamisel on trend, kus veebisaidid kasutavad kahte nuppu üksteise kõrval. Üks on täidetud, üks on kummitusstiil. Mõlemad sisaldavad hõljukanimatsiooni, mis rõhutab veelgi kahte klõpsatavat valikut.
Animatsioon võib aidata nuppudele tähelepanu juhtida ja isegi klõpse julgustada. Nuppude hõljumise animatsiooni lisamiseks on muutunud üldtunnustatud kasutajamustriks ja see annab kasutajatele lihtsa näpunäite, mida nad peaksid kasutama.
Ärge ainult minge üle parda. Niputamine, keerutamine, vilkuvad nupud on tüütumad kui kasulikud.
6. Tehke see piisavalt suureks, et seda koputada
Nupud peaksid sisaldama klõpsatavat (koputatavat) ala, mille läbimõõt on vähemalt 10 millimeetrit ja suurem on alati OK. See nõuanne pärineb MIT Touch Labi uuringust, kus vaadeldi sõrmepadja suurust seoses puuteseadmetega.
Paneme selle perspektiivi. Tüüpiline klahv füüsilisel arvutiklaviatuuril on 15 millimeetrit 15 millimeetrit. See on hea eesmärk. (Ärge unustage arvestada erinevate ekraanisuurustega, et teie nupp väikestel ekraanidel ei eksiks.)
Kui peate kasutama väiksemaid nuppe, kaaluge sellele laia klõpsuraadiuse lisamist. Kui kasutaja jätab nupud ise vahele, on selle ümber piisavalt ruumi, et soovitud toiming ikkagi toimuks. (Teie veebisaidi külastajad tänavad teid.)
7. Kasutage tuttavat stiili
Siin on mõned üldised nupunistiilid, millega kõik on tuttavad. Kasutage ühte neist.
- Ristkülikukujuline täidetud nupp, mille sees on ruudukujulised servad ja tekst
- Ristkülikukujuline täidetud nupp ümarate servade ja tekstiga sees
- Ristkülikukujuline täidetud nupp koos nähtava varjuga (ülal)
- Ristkülikukujuline kummitusnupp
- Lihtsad ringnupud, mida kasutatakse kõige sagedamini paremas alanurgas toe, abi või vestluse tähistamiseks
8. Pange eeldatav koht
Nupud ei pea mitte ainult ilmuma ja eeldatavalt toimima, vaid peavad paiknema ka kohas, kus kasutajad neid otsivad.
- Kodulehtede puhul hõlmab see nuppude paigutamist peamise pealkirja või tekstiploki alla. Nupud jäävad tavaliselt tekstiga joondatud või ekraani keskele.
- Vormide puhul ilmuvad sisestuste järel nupud. Mõned üksikud sisestusvormid joondavad sama rea nuppu sisendist paremal.
- Üldised CTA-nupud kuvatakse otse nende viidatud sisu all.
- Video või mängu esitamise või käivitamise nupud asuvad sageli eelvaate ekraanil keskel.
- Ostukorvi või poodnupud asuvad üldiselt paremas ülanurgas.
9. Ära unusta tagasisidet
Kas nupp reageerib suhtlemisele? Veenduge, et nupuliidese kujunduses oleks ilmne tagasiside silmus.
Esitage visuaalne või juhis, et nupp on oma töö teinud. Mõni nupp nõuab rohkem tööd kui teised. Nupud, mis lingivad näiteks teisele lehele või veebisaidile, annavad tagasisidet selle kohta, et nupp on toiminud, kui uus leht laaditakse. Vormi esitamise nupp võib kuvada ekraanil tänusõnumi, kui teave on õigesti esitatud.
10. Kasutage nuppe tahtlikult
Liiga palju nuppe loob kaose.
Kasutage nuppe, kus neil on mõtet. Ärge koormake kujundust nuppudega üle kogu koha. Kasutajatel pole selget ettekujutust sellest, kus ja mis on kõige tähtsam klõpsata.
Salvesta nupud kasutamiseks veebisaidi eesmärkide saavutamiseks. Need peaksid suunama külastajaid elementide juurde, mis on teie üldises kujunduses kõige olulisemad.
Järeldus
Veebisaidi nupp on element, mis teisendab teie tegevusele kutsumise tulemuseks. Võtke aega selle kujunduse läbimõtlemiseks, värvidest funktsioonini ja lõpetades mikroskoopiaga. Testinuppude kujundus, et tagada teie liideses kõige funktsionaalsem versioon.
Kui teil on nupp, mis töötab, ärge langege trendide lõksu ja muutke kujundust. Nuppude puhul peaks funktsioon olema esmatähtis.
