Share
I dag skal vi undersøke hvilken form validering er og hvorfor du, Joe Webdesigner, burde bryr seg om det. Her er en teaser: Det er en av de enkleste måtene å forbedre bruken av designene dine, og de fleste webdesignere glemmer det hele tiden! Vi vil også presentere noen eksempler på god form validering design. Les på unge gresshopper ... kunnskap venter.
I sammenheng med et menneskelig forhold er validering når du føler behov for å bli fortalt at du har rett; I sammenheng med et webskjema er validering når skjemaet forteller deg at du har feil. For å være spesifikk, skjema validering er prosessen der et webskjema sjekker for å se om informasjonen som er inntatt i den, er riktig.
For eksempel:
Du får ideen ... validering bare sørger for at brukeren ikke har gjort en feil.
Det er menneskelig natur å gjøre feil selv, og dessverre er webskjemaet sannsynligvis ikke unntatt for menneskelig feil. Det er her validering spiller det er en del i en brukervennlig form. En enkel visuell påminnelse til brukeren om at noe ikke er fylt på riktig måte, kan gjøre hele forskjellen mellom glede av en vellykket utfylt form og den intense frustrasjonen om å måtte gjette hva som gikk galt.
Det primære prinsippet om god form validering er dette: "Snakk med brukeren! Fortell når de har noe galt!"
Integrering av validering i webdesignene dine er ikke vanskelig ... men det store flertallet av designere inkluderer aldri design for det. Hvorfor? Fordi validering ofte blir igjen for utviklere å bekymre seg om i de siste faser av et prosjekt.
Dette skaper et scenario hvor du, Joe Webdesigner, overlater en av de mest avgjørende aspektene av brukeropplevelsen til en utvikler som sannsynligvis ikke vet eller bryr seg hvordan validering skal utformes. Heck, i mange tilfeller vil utviklere ikke engang bry deg om noe utover de mest rettslige form validering ... som kan la brukerne frustrert.
Dette er ikke en grave på utviklere eller noe (og det er mange flotte devs som vil håndtere dette med flygende farger), men la oss anta at dev ikke betaler oppmerksomhet for argumentets skyld.
Undersøk følgende grafikk:
Hva er galt med dette skjemaet? Sikker - skjemaet er "validering" selv ved å fortelle brukeren at noe er galt ... men brukeren er igjen å gjette hva det er.
Det primære prinsippet om god form validering er dette: "Snakk med brukeren! Fortell når de har noe galt!"
La oss undersøke neste grafikk:
Mye bedre riktig? Nå blir brukeren gitt den informasjonen de trenger for å fikse problemet. Dette er et forenklet eksempel, men legg merke til hvordan integrering av et grunnleggende responssystem forbedrer brukbarheten ved hopp og grenser.
Nå som du forstår hva validering er, vil du forhåpentligvis søke på webformene dine. Det er generelt tre feil som brukerne kan komme inn i ditt skjema:
Dette er trolig det største problemet brukerne vil møte. Har du noen gang fylt ut et skjema for å finne ut at du har satt en ulovlig karakter i brukernavnet eller brukt et mellomrom i en webadresse? Det er der formatering validering kommer inn i spill.
De fleste felt i et nettform er bare alfanumeriske, men hvis du har et e-post-, webadresse, telefonnummer eller passordfelt, kan det hende du må ha en bestemt formatering. Du kan antagelig gjette syntaksen til hvert felt. Så formatering validering er effektiv hvis du har bestemt informasjon i tankene.
Disse feilene skjer når en bruker glemmer / forsømmer å fylle ut et felt du har angitt som "nødvendig".
Dette skjer når du må sjekke om en verdi er lik en annen. Dette er så viktig i innloggingsskjemaer, spesielt fordi du ikke vil tillate brukere å logge inn hvis passordet ikke stemmer overens med den riktige.
Det kan også brukes til å få brukerne til å skrive inn e-post eller passord når det er viktig at de ikke gjør en feil.
Mens du kan stile skjemaet ditt på tusen forskjellige måter, er det generelt tre grunnleggende trinn for å hjelpe brukeren til å fikse valideringsproblemet:
Farge er et av de beste verktøyene å bruke når du utformer validering. Fordi det fungerer på et instinktivt nivå, legger du til rød til feilmeldinger, eller grønn til suksessmeldinger er utrolig kraftig.
Nærhet er et annet viktig verktøy - hold spesifikke varsler nær problemfeltene og hold beskjeder om hele skjemaet vekk fra noen enkeltfelt. Hvis du kan lage tilpassede "hud" -løsninger som gjør disse strategiene enda mer opplagte (som å gjøre varselet ser ut som det er fysisk knyttet til et bestemt felt), vil du gjøre enda bedre.
Det er også en god praksis å fortelle brukerne på forhånd hvor de kan opprette feil. Mange nettsteder inkluderer en sidefeltboks med instruksjoner om hvordan skjemaet skal fylles ut. Andre har riktig syntaks beskrevet under etiketten. Enten metode virker, så lenge det er der.
Som vi nevner i delen "hvordan validering fungerer" nedenfor, vil du også ønsker å kjøre "umiddelbar validering" når det er mulig.
Nå som vi har gått gjennom teorien om form validering ... la oss se på noen eksempler på dette i aksjon!
Mens du ser på disse, merk at løsningen alltid er enkel: et verktøytips, en boks i varsling eller et enkelt tekst. Så lenge du holder varslene nær i nærheten av problemfeltet, kan du designe, hud eller stilte dem slik du vil. Det eneste du må huske er at du faktisk gir brukeren noen råd.
La oss grave i:
ThemeForest gir umiddelbart en feilmelding under feltet. Vellykkede oppføringer får selv en grønn "suksess!" budskap.
Frexy bruker en enkel, men effektiv tilnærming: Farg feltet som er galt, og legg til lyst underretningstekst nedenfor. Rediger: Som Boba bemerket i kommentarene, kan den grønne fargen være misvisende for noen brukere, men du må balansere merkevarebygging og brukervennlighet til din egen smak.
Twitter legger til en melding til høyre for feltet for å indikere feil. Det gjør det øyeblikkelig ... og de legger til og med farge til responssystemet for å understreke meldingen!
Mint validerer ikke bare skjemafeltene umiddelbart, de gir også begge positiv og negativ tilbakemelding ... det er nesten som om du har en samtale med skjemaet!
FancyForm er et skjemaverktøy som viser hvor nyttig det kan være å faktisk gi tilbakemelding på nettet i form av ikoner.
Virb legger til en lys melding når du har gjort noe galt. Bonuspoeng: Virb vil ikke engang la deg skrive inn en ukjent karakter! Bare prøv det ... de tør deg.
WordPress vil gi deg en grunnleggende melding ... men det som er spesielt er at selve skjemaet egentlig rister når du skriver inn feil informasjon.
FakturaMachine bruker den enkleste tilnærmingen. I stedet for tekstlig hjelp, farger den bakgrunnen i rød for å bety et problem. Husk at et tekstverktøy når brukeren svinger over skjemaet, vil forbedre dette enda mer.
WPCoder viser at en enkel Javascript popup kan fungere like bra også.
Yahoo bruker en humoristisk tilnærming ... i stedet for å returnere en grunnleggende feil når en bursdag er feil, de gir deg litt holdning.
Teknologisk sett er det to forskjellige måter å integrere validering i et skjema på:
Valideringen av klientsiden gir det mest brukervennlige alternativet fordi det kan vise tilbakemeldingen direkte og øyeblikkelig, slik at brukeren umiddelbart kan rette feilen. En stor ulempe mot validering av klientsiden er imidlertid at den vanligvis er avhengig av en slags JavaScript. Derfor, hvis brukeren har JavaScript slått av, vil de ikke se live validering. Så vær sikker på at du fortsatt kan falle på server-side validering
Du kan lese mye mer om den teknologiske siden av validering på vårt nettsted, Nettuts!
De beste skjemaene er de som forventer brukernes atferd. Det er viktig å planlegge et skjema ut og forstå hvordan en bruker kan gjøre feil før det blir bygget. Hvorfor? Fordi hvis du kan forutse et problemfelt, er det enkelt å designe en løsning for å hjelpe brukerne til å komme forbi det. Men å forlate valideringsdesignet til siste minutt kan det være dyrt å fikse når kodingen er fullført. Å ta litt ekstra tid til å designe strategier og styling for skjemaene dine, vil spare tid, penger og frustrasjon i det lange løp.
Accentsconagua