Nööpide kujundamise näpunäited: lihtne, väike ja eluliselt tähtis
Me räägime disainis palju detailidest. See on mõjuval põhjusel. Isegi väikseimatele detailidele tähelepanu pööramine võib kujunduse muuta või lõhkuda.
Täna uurime sügavamalt ühte neist üksikasjadest ja uurime võimalusi nuppude kujundamiseks, mida kasutajad soovivad klõpsata (või koputada). Ehkki nupud võivad olla teie kujunduses üks väikseimaid elemente, on need üks olulisemaid. Kuidas sa saaksid kasutajaga toimingutest teada anda? Kuidas nad siis selles tagasisideahelas teavet edastaksid?
Mõelge korraks tagasi ühele suurele kaebusele varajases etapis lamedate disainilahenduste kohta: kasutajad ei teadnud, mis oli ja mis polnud disainilahenduses interaktiivne. Seega on suurepärase nupu kujunduse tähtsus.
Tutvuge disainiressurssidega
See peaks välja nägema puudutatav
Kasutajad peaksid nägema kujunduses nuppu ja mõtlema, et neil on vaja kätt sirutada ja seda puudutada. Kuigi ekraanil saab klõpsata peaaegu suvalisel suuruse nupul, on puutetundliku seadme nupu suurus ja polsterdamine selle jaoks esmatähtis.
Keskmisel kasutajal on sõrmeotsa suurus 8–10 millimeetrit. Seda silmas pidades on sihtmärk 10 kuni 10 millimeetrit suurepärane algne sihtmärk puutetundliku seadme nuppude jaoks. (See on pisut väiksem kui klaviatuuri tavalised klahvid.)
Siin on mõned disainitoimingud, mida saate teha ka selleks, et element näeks puudutatav.
- Peen vari võib elemendi taustal ära tõsta, et see tunneks kasutajale veidi lähemal olevat.
- Nööpide suurenenud polsterdus muudab nende klõpsamise lihtsamaks ja aitab kasutajal elementi suunata.
- Värvilised hõljuki- või lülitustoimingud saavad kasutajatele reaalajas näidata, mida nad teevad, ja tähendada toimingut.
Värviküsimused
Nööpide värv peab kogu veebisaidi kujunduse ajal olema eriline. See on hea koht konkreetse aktsentvärvi kasutamiseks ja kasutamiseks ainult nupuvajutuste jaoks.
Nööpide värv peaks olema hele ja köitev. Põhjus on, et nii paljudes kujundustes on kollased, sinised või rohelised nupud. Neid on lihtne näha ja ülejäänud disainist eristuda. Tõeliselt eristuva nupu jaoks valige värv, mis on kujunduse põhivärvi täiendav paar (värvirattal on vastandid).
Teine värviprobleem on bränd. Soovite valida nupu värvi, mis sobib teie värvipaleti ja kaubamärgi identiteediga. Pole tähtis, kui palju soovite, et nupu värv kujunduses eristuks, peaks see toimima teie peamise värvilahendusega - mitte vastu.
Suurus on veelgi olulisem
Tee suureks!
Nupud vajavad pisut varikat, nii et kasutajad tõmmatakse ekraanile kohe. Kummitusnuppude suundumus - millel puudub selge nupu värv - on keskendunud pikslite arvu osas suurtele nuppudele, kuid sellel puudub visuaalne kaal. Nupp peab olema mõlemas osas suur. (See on üks põhjus, miks trend on moest välja langenud.)
Siiski on keeruline koht, kui nupp ulatub täiuslikust suurusest piinlikult suureks. Täpselt see, millal see juhtub, sõltub muude kujunduselementide ulatusest, kuid teate kindlasti, millal see juhtub. Kui nupp on kõik, mida kujunduses näete, on tõenäoline, et see on liiga suur.
Paigutus on võti
Kuhu kujundus peaks nupu minema? Kas on mõni asukoht, mis aitab klikke rohkem kui teised?
Enamikul juhtudel peaksid nupud järgima sisu, mille nad on kavandatud täiendama.
- Vormi lõpus
- Tegevuskutse sõnumist paremal
- Lehe või ekraani allosas
- Keskel sõnumi all
Miks just sellised paigutused? Sest see järgib loomulikku tegevusviisi ja viisi, kuidas kasutajad veebisaite loevad ja nendega suhelda saavad.
Keskenduge kontrastile
Kõigi kujunduselementide puhul on kontrast oluline kaalutlus. See kehtib nii elemendi enda sees kasutatavate võtete kui ka elemendi ning selle kujunduses ja selle ümbruse vahelise suhte kohta.
Ärge unustage mõelda selles kahes keskkonnas järgmiste tehnikate peale:
- Värv
- Tüübi kaal ja suurus
- Elementide suurus
- Kuju, nagu see on taustaga seotud
- Läbipaistvus või animatsioon
- Varjud või granaadid
- Valge ruum ja polster
Kasutage standardset kuju
Nuppude puhul peaksite kaaluma ainult kahte kuju:
- Ringid. Ümmargune nupp on populaarseks saanud tänu Material Design ja Material Lite kontseptsioonidele. Mis tahes sarnase esteetika korral töötab ümar nupp kujundusega ja sobib kasutaja mustriga.
- Ristkülikud. See vaikekuju peaks olema kõigi nuppude valik, välja arvatud juhul, kui te kasutate ülaltoodud näites ringi. See on see, mida kasutajad teavad ja on harjunud. Enamik nupu ristkülikuid on tavaliselt vähemalt kaks korda laiad kui pikad (mõnikord kolm või neli korda laiemad). Kasutajad näevad seda kuju ja teavad kohe, mida teha. Ehkki mõned võivad väita ümardatud nurkade ja 90-kraadiste nurkade eeliseid, on kumbki teie disainistiilist lähtuvalt sama sobiv.
Ütle kasutajatele, mida teha
Iga nupp peaks sisaldama tekstijuhendit, mis ütleb kasutajatele täpselt, mida see nupp teeb. Soovite, et keel oleks lühike ja lihtne ning see peaks ühtima ülejäänud veebisaidi kujundusega.
Seejärel täida see lubadus. Järgmine asi, mis hüppab, peaks kasutajale teatama, et nad on jõudnud sihtkohta. Ükskõik, kas tegemist on vormi esitamise, ostu sooritamise või lihtsalt mõnele teisele lingile liikumisega, peaks kasutaja nupuga suheldes saama soovitud tulemuse. (Kui ei, siis veenduge, et tagasisides on näidatud viga, et saaksite teada, millised parandused peavad veebisaidi kujundamisel toimuma.)
Nupusõnumite näited hõlmavad järgmist:
- Kliki siia
- Looge kohe konto
- Proovige seda tasuta
- Lisa ostukorvi
- Loe rohkem
Andke nuppudele visuaalne tähtsus
Enamik kujundusi on täidetud väikeste kasutajaliidese elementidega. Üks lõks, mis juhtub, on nende elementide kujundamine lükatakse edasi, kuni projekt on peaaegu valmis. Ja siis valite kõigi UI elementide jaoks ühe kujunduse, koos mõne väikese erinevusega.
Ärge takerduge sellesse ohtlikku olukorda.
Kujundus peaks nupud välja nägema ainult nupud! Mitte ühelgi teisel kujundusel ei tohiks olla sama kuju, värvi ja visuaalset kaalu nagu nupul. Nad peavad olema erinevad. Mõelge nuppude jaoks stiili loomisele, mis on suurem kui ükski teine kujunduse sarnane element, või kasutage aktsentvärvi, mis sobib ainult nuppude jaoks. Need tehnikad aitavad muuta nuppu eriliseks ja rõhutada selle kasutamist.
Järeldus
Kas hakkate mõnda oma nupu kujundamise valikut ümber mõtlema? Kas arvate, et saate luua midagi, mis klikke paremini soodustab?
Proovige mõnda neist näpunäidetest, hoides oma veebisaidi analüüsil silma peal, et näha täpselt, millistele kujundusmuutustele teie kasutajabaas reageerib. Kasutage seda teavet, et saaksite tulevaste projektide jaoks veelgi rohkem klõpsatavaid nuppe luua.
