4 vormi disaini UX näpunäiteid, mida peaksite teadma (näidetega)

Me kaldume mõtlema vormidele kui lihtsalt kasutajaandmete kogumise vahendile, kuid need on mõnikord ka üks viis ainus viis, meie kasutajatele võta meiega ühendust. Tõenäoliselt on mõistlik mõelda, et saame kasutajaid teha armastus vormide täitmine, kuid see on kindlasti võimalik leida lahendusi, mis neid liiga palju ei ärritaks, ja aidata neil protsessi käigus.

Võrgu sirvimisel leiame mõnikord üllatuslikke lahendusi, mis on programmiliselt korrektsed, kuid on kavandatud kõige tõenäolisemalt Paljud kasutajad loobuvad saidist halva kasutuskogemuse tõttu.

Kui meie vormid on hästi välja töötatud, saame mitte ainult meie kasutajatele, vaid ka taustaprogrammi meeskonnale, kes sellega hakkama saavad palju vähem kasutaja sisendvigu. Seega vaatleme selles artiklis, kuidas me saame minimeerige kasutaja sisendvead ja ikkagi hoida meie kasutajaid õnnelikena.

Kasutajate vajaduste prognoosimine

Veebisaitidel ja rakendustel on erinevad kasutajate alused ja eesmärgid, ja isegi samas asukohas võib olla mitmeid vorme, mis koguvad erinevaid andmeid, et nimetada kõige sagedasemaid:

• Sisselogimisvormid
• Registreerimisvormid
• Kasutajaprofiili vormid
• Uudiskirja registreerimise vormid
• Checkout vormid
• Kasutajauuringud
• Kontaktivormid
• Kommentaaride vormid
• Otsinguvormid

Kõik need vormitüübid nõuavad erinevaid asju. Kassavormi kujundamisel on oluline tagada kasutajatele usaldusväärsus turvalisuse kohta, samas kui kommentaarivormide puhul on hea mõte lisage emotikonid või muud meetodid, mis võimaldavad kasutajatel väljendada oma tegelikku tuju.

Kuid isegi sarnaseid vormi tüüpe võib olla vaja kujundada erinevalt, kuna kõik saidid omavad unikaalne kasutaja baas. Enne projekteerimisprotsessi alustamist on alati hea mõte prognoosida, mida meie kasutajad vajavad, ja kujundada vastavalt.

Näide: sotsiaalsed sisselogimised kasutajate vajadustele

Codepeni sisselogimisvorm sisaldab kolme sotsiaalset sisselogimist Githubiga ülaosas. See valik oleks enamiku saitide puhul ebamõistlik.

Aga see on ideaalne Codepenile, kuna nende kasutajate baas koosneb arendajatest, kellest paljud soovivad sisse logida oma Githubi kontodega, või ühendada nende arenduskontod üksteisega korraga.

Mõtle mobiilile esimesena

Mobiil- ja töölaua kasutajatel on erinevad vajadused, kuid nii vormide täitmine on mobiiliekraanil palju suurem väljakutse, käsi žeste kasutamine kui füüsilisel klaviatuuril, a mobiil-esimene lähenemine võib meid edasi tuua, kui soovime kujundada kasutatavaid vorme.

Lisaks töötavad paljud mobiilsides hästi töötavad kasutajaliidese vormid hästi ka töölaual.

Näide: koputatavad juhtelemendid

Kõrge kvaliteediga mobiilivorme ei saa ette kujutada nähtavad juhtseadised mille kohta mobiilikasutajad saavad lihtsalt puudutada sõrmedega.

Veebidisainikonverentsi uudiskirja registreerimisvorm „Event Apart“ kohandub vastavalt sellele, kuidas mobiilikasutajad ekraanile pääsevad - see sisaldab kaks kergesti puudutavat sisendvälja ja a sõrmeotsa suurusega nupp.

Teksti sisestusväljad on tavalisest kõrgemad, nii et mobiilikasutajad saavad neid hõlpsasti puudutada ja suur, oranž nupp, kus on märgi ikoon, julgustab kasutajaid vormi esitama.

Saidi töölaua versioon kasutab sama vormi disaini, kuna see näeb samuti hea välja ja töötab hästi suurematel ekraanidel.

Näide: kulutatav sisend

Mobiilivormide kujundamisel on alati oluline kaaluda, kuidas me saame seda teha minimeerida meie kasutatavat ruumi. The kuluv sisend UI disainimuster on viimasel ajal muutunud üsna populaarseks ning see töötab eriti hästi mobiilsides.

Booking.com kasutab seda mustrit oma mobiilse saidi otsinguvormis. Kui kasutaja puudutab otsinguvälja, siis see laieneb jätke rohkem žestidele ruumi, ja selle all on ka soovitusega valikute nimekiri.

Kui kasutaja väljalülitub, siis see kahaneb ja lisateave kaob.

Näide: Morphing nupp

Morphing nupud võtke kuluv sisendmuster veel ühe sammu võrra edasi, kuna kasutajad näevad kõigepealt nuppu, mis siis vormi kui nad seda puudutavad.

Alljärgnev pilt on The Startup'i suurepärasest artiklist uuendusliku vormi kujundamise kohta, mis pakub ka palju muid loomingulisi lahendusi.

Sissetuleva sisendi kasutuselevõtu hõlbustamine

Pikad vormid hoiavad kasutajaid ära. Parim, mida me teha saame küsida ainult sisendit, mida me tõesti vajame. See ei ole oluline mitte ainult kasutaja kogemuse seisukohast, vaid ka kasutajad võivad kõhklemata anda liiga palju isiklikke andmeid privaatsusega seotud probleemid.

Mõnikord aga me veel peavad minema pikemate vormidega. Sel juhul on see hea mõte viiluta need väiksemateks tükkideks, ja teenida tükke järjestikuste ekraanidena.

Paljud e-kaubanduse saidid (nt Amazon) kasutavad seda lahendust, et vähendada ostukorvi tühistamise määrasid.

Kui soovime lihtsustada vormiväljade täitmist, on pöidla reegel vähendada häireid ja kasutajate tegevusi nii palju kui võimalik.

Näide: isikupärastatud sisend-valija

Erinevad sisu valijad, näiteks kuupäeva valijad või värvivalijad, ei hõlma mitte ainult õiget sisendit, vaid teevad ka vormi atraktiivsemaks, ja oluliselt vähendada kasutaja vigu.

Todoistide nimekiri annab personaliseeritud näpunäiteid selle päeva valija sees, kui kasutaja paistab päeva jooksul.

Näiteks allpool oleval pildil on kasutajal näha, et 31. augustil on tal juba 2 nõuetekohast ülesannet ja ta võib seda teavet ülesannete õige kuupäeva määramisel arvesse võtta. See on suurepärane idee rakendusele, kus tootlikkus on kasutaja peamine mure.

Näide: Lohistamise sisend

Drag-and-drop kujundused tavaliselt töötavad failide üleslaadimise väljad hästi, eriti kui kasutajad peaksid pildid üles laadima.

Nad tõenäoliselt ei vähenda tavapärase üleslaadimise nupuga kasutaja tegevusi, kuid nad teevad seda palju lihtsamaks valige, millist faili kasutaja soovib üles laadida, seeläbi vähendada vale faili esitamise võimalust.

WordPress.com pakub elegantset ja intuitiivset kasutaja sisestusliidest oma postiredaktori vormis. The vähe pisipilte ja juba üleslaaditud failide visuaalne esitus veelgi aidata kasutajatel kiiresti üles laadida.

Näide: ülekatted häirete kõrvaldamiseks

Kui kasutajad vormi lõpuleviimisel häirivad, on nad rohkem vigu tekitanud ja kergemini ärritunud

Sisu ülekatted on suurepärane alternatiiv minimalistlikule kujundusele. Neid kasutatakse keerukamate saitide poolt mis soovivad kuvada erinevat tüüpi teavet samal ekraanil.

Allpool oleval pildil saate näha Booking.com töölaua versiooni. Kui kasutajad liiguvad otsinguvormis, saab ülejäänud sisu kaetud hallikas kattega neid aidata keskenduge vormi täitmise protsessile.

Anna kasutajatele tagasisidet

Andes õiget tagasisidet õigel ajal võib oluliselt parandada kasutajate kogemusi.

Vormi kujundamisel on olemas kaht tüüpi kasutaja tagasisidet:

1. Tagasiside on antud enne vormi esitamine - selleks, et vähendada vigu ja loobuma määrad, näiteks edenemise jälgijad, vahetu sisendi valideerimine, mis annab kasutajatele kohe õige sisendi või abitööriistade näpunäited
2. Tagasiside on antud pärast seda vormi esitamine - et kasutajad teaksid nad tegid vea, näiteks veateated

Selline kasutajate tagasiside, mida meie kasutajad vajavad, sõltub meie sihtrühma omadustest ja meie saidi eesmärgist.

Näide: edenemise jälgija

Üle ühe lehekülje pikemad vormid, näiteks küsitlused ja enamik e-kaubanduse väljavõtte vorme, võivad kaasa aidata edenemise jälgija disaini muster. Edu jälgijad annavad vahetu visuaalne tagasiside kasutajatele nende staatuse kohta ja julgustada neid protsessi edasi liikuma.

SnapSurveys uuringu looja veebirakendus näitab vähest edenemise jälgijat ülaltoodud nuppude kohal, et kasutajad saaksid seda teha loomulikult silma peal.

ta jälgib, et jälgija ei kasuta ühtegi märgist, vaid seda, kuidas see on loodud teeb selle eesmärgi selgeks - ringide arv näitab sammude arvu, juba teostatud sammud muutuvad siniseks ja kasutajad saavad kergesti näha, mitu sammu on nende ees ees.

Näide: reaalajas valideerimine

Body Shop kosmeetika jaemüüja kasutab reaalajas valideerimine kasutajaprofiili vormis vigade kõrvaldamiseks ja vormi täitmise protsessi UX parandamiseks.

Sisendeid kontrollitakse, kui kasutajad vormi täidavad, ning õigeid ja valesid vastuseid näitab kohe kergesti eristatavad ikoonid veidi paremal, kuid siiski nähtaval alal.

Näide: Ekspressiivsed abivahendid

Arusaadav mikrokoopia on ka oluline osa eduka kasutajate tagasiside vormi kujundamisel. Määratluse kohaselt koosneb veebisaidi mikroskoopia väikesed teksti tükid kasutatakse erinevates elementides - sildid, nupud, veateated, tööriista jne.

Barclay'i pangagrupp vastab oma sisselogimisvormile küsimustele, mida kasutajad võivad potentsiaalselt küsida hästi kavandatud töövihikud mis sisaldavad kergesti mõistetav mikrokoopia.

Vahendid on vähe peidetud? ikoonid mitte häirida kasutajaid kes teavad, kuidas sisselogimisvormi täita, kuid olema alati kohal kasutajatele, kes pole kindlad.

Mõned töövahendid isegi sisaldavad väike visuaalne märkega deebetkaart et kasutajad saaksid kergesti leida sisselogimisvormile sisestatavad andmed.