Share
Vandaag zullen we onderzoeken welke vormvalidatie is en waarom u, Joe Webdesigner, zou het moeten schelen. Hier is een voorproefje: het is een van de gemakkelijkste manieren om de bruikbaarheid van uw ontwerpen te verbeteren en de meeste webontwerpers vergeten dit de hele tijd! We zullen ook enkele voorbeelden van goed formuliervalidatieontwerp presenteren. Lees jonge sprinkhanen ... er wacht kennis op.
In de context van een menselijke relatie, is validatie wanneer u de behoefte voelt om te horen dat u gelijk hebt; In de context van een webformulier is validatie wanneer de vorm u vertelt dat u ongelijk hebt. Om specifiek te zijn, formuliervalidatie is het proces waarbij een webformulier controleert of de informatie die erin is ingevoerd correct is.
Bijvoorbeeld:
Je krijgt het idee ... validatie zorgt er gewoon voor dat de gebruiker geen fout heeft gemaakt.
Het is echter menselijk om fouten te maken en helaas is uw webformulier waarschijnlijk niet vrijgesteld voor menselijke fouten. Hier speelt validatie een rol in een gebruikersvriendelijke vorm. Een eenvoudige visuele herinnering aan de gebruiker dat iets niet goed is ingevuld, kan het verschil maken tussen de vreugde van een succesvol ingevulde formulier en de intense frustratie van het moeten raden wat er mis ging.
Het primaire principe van goede formuliervalidatie is deze: "Praat met de gebruiker! Vertel wanneer ze iets fout hebben!"
Het integreren van validatie in uw webontwerpen is niet moeilijk ... maar de overgrote meerderheid van ontwerpers neemt er nooit ontwerpen voor op. Waarom? Omdat ontwikkelaars zich vaak zorgen hoeven te maken over validatie in de laatste fase van een project.
Dit creëert een scenario waarin jij, Joe Webdesigner, een van de meest cruciale aspecten van de gebruikerservaring toevertrouwt aan een ontwikkelaar die waarschijnlijk niet weet of interesseert voor de manier waarop de validatie moet worden ontworpen. Heck, in veel gevallen zullen ontwikkelaars niet eens de moeite nemen met iets dat verder gaat dan de meest corrigerende formuliervalidatie ... wat gebruikers gefrustreerd kan maken.
Dit is geen opgraving bij ontwikkelaars of zo (en er zijn veel geweldige ontwikkelaars die dit met vlag en wimpel aankunnen), maar laten we aannemen dat de ontwikkelaar geen aandacht besteedt omwille van het argument.
Bestudeer de volgende afbeelding:
Wat is er mis met dit formulier? OK - het formulier is zichzelf 'aan het valideren' door de gebruiker te vertellen dat er iets mis is ... maar de gebruiker moet raden wat het is.
Het primaire principe van goede formuliervalidatie is deze: "Praat met de gebruiker! Vertel wanneer ze iets fout hebben!"
Laten we de volgende afbeelding eens bekijken:
Veel beter toch? Nu krijgt de gebruiker de informatie die hij nodig heeft om het probleem op te lossen. Dit is een vereenvoudigd voorbeeld, maar let op hoe de integratie van een basissysteem de bruikbaarheid met sprongen verbetert.
Nu u begrijpt wat validatie is, wilt u dit hopelijk toepassen op uw webformulieren. Er zijn over het algemeen drie fouten die gebruikers tegen kunnen komen in uw vorm:
Dit is waarschijnlijk het grootste probleem dat gebruikers tegen zullen komen. Heb je ooit een formulier ingevuld om erachter te komen dat je een illegaal teken in het veld voor de gebruikersnaam hebt gezet of een spatie in een webadres gebruikt? Dat is waar formatteringsvalidatie in het spel komt.
De meeste velden in een webformulier zijn alleen alfanumeriek, maar als u een e-mailadres, webadres, telefoonnummer of wachtwoordveld hebt, hebt u mogelijk een specifieke opmaak nodig. U kunt waarschijnlijk de syntaxis van elk veld raden. Opmaakvalidatie is dus effectief als u specifieke informatie in gedachten heeft.
Deze fouten gebeuren wanneer een gebruiker vergeet / nalaat een veld in te vullen dat u hebt opgegeven als "verplicht".
Dit gebeurt wanneer u moet controleren of de ene waarde gelijk is aan de andere. Dit is vooral belangrijk in aanmeldingsformulieren, omdat u gebruikers niet wilt toestaan in te loggen als hun wachtwoord niet overeenkomt met het juiste wachtwoord.
Het kan ook worden gebruikt om gebruikers hun e-mailadres of wachtwoord opnieuw te laten typen wanneer het van vitaal belang is dat ze geen fouten maken.
Hoewel u uw formulier op duizend verschillende manieren kunt stylen, zijn er over het algemeen drie basisstappen om uw gebruiker te helpen het validatieprobleem op te lossen:
Kleur is een van de beste tools te gebruiken bij het ontwerpen van validatie. Omdat het werkt op een instinctueel niveau, toe te voegen rood naar foutmeldingen, of groen succesberichten zijn ongelooflijk krachtig.
Nabijheid is een ander belangrijk hulpmiddel - houd specifieke meldingen in de buurt van de probleemvelden en houd berichten over het hele formulier uit de buurt van afzonderlijke velden. Als u aangepaste "skin" -oplossingen kunt maken die deze strategieën nog duidelijker maken (zoals het feit dat de melding eruitziet alsof deze fysiek aan een specifiek veld is gekoppeld), doet u het nog beter.
Het is ook een goede gewoonte om uw gebruikers van tevoren te vertellen waar ze fouten kunnen maken. Veel websites bevatten een zijbalk met instructies over hoe het formulier moet worden ingevuld. Andere hebben de juiste syntaxis die wordt beschreven onder het label. Beide methoden werken, net zo lang als het er is.
Zoals we in het onderstaande gedeelte 'Hoe validatie werken' vermelden, wilt u 'instant validation' ook uitvoeren wanneer het mogelijk is.
Nu we de theorie van formuliervalidatie hebben doorgenomen ... laten we hier enkele voorbeelden van in actie bekijken!
Let er tijdens het lezen op dat de oplossing altijd eenvoudig is: een tooltip, een bericht in een notitiegedeelte of een stuk platte tekst. Zolang u de meldingen dicht bij het probleemveld houdt, kunt u deze op elke gewenste manier ontwerpen, villen of stylen. Het enige om te onthouden is dat je de gebruiker echt wat advies geeft.
Laten we graven in:
ThemeForest brengt onmiddellijk een foutmelding onder het veld. Succesvolle inzendingen krijgen zelfs een groen "succes!" bericht.
Frexy gebruikt een eenvoudige, maar effectieve aanpak: kleur het veld dat fout is en voeg hieronder een heldere meldingstekst toe. Bewerken: Zoals Boba opmerkte in de opmerkingen, kan de groene kleur voor sommige gebruikers misleidend zijn, maar u moet de merkbekendheid en bruikbaarheid in evenwicht houden met uw eigen smaak.
Twitter voegt een bericht toe aan de rechter rechterkant van het veld om een fout aan te geven. Het doet dit onmiddellijk ... en ze voegen zelfs kleur toe aan het reactiesysteem om de boodschap te benadrukken!
Mint valideert niet alleen de formuliervelden onmiddellijk, maar ook beide positief en negatief feedback ... het is bijna alsof u een gesprek voert met het formulier!
FancyForm is een formuliergereedschap dat laat zien hoe nuttig het kan zijn om feedback in de vorm van pictogrammen daadwerkelijk te leveren.
Virb voegt een helder bericht toe als je iets verkeerd hebt gedaan. Bonus punten: Virb laat je niet eens een niet-toegestaan karakter typen! Probeer het gewoon ... ze durven je.
WordPress geeft je een basisboodschap ... maar wat bijzonder is, is dat de vorm zelf eigenlijk is shakes wanneer u de verkeerde informatie invoert.
InvoiceMachine gebruikt de eenvoudigste benadering. In plaats van tekstuele hulp kleurt het de achtergrond in rood om een probleem aan te duiden. Houd er rekening mee dat een tekst-tooltip wanneer de gebruiker zweeft over het formulier dit nog meer zou verbeteren.
WPCoder laat zien dat een eenvoudige Javascript-popup ook prima werkt.
Yahoo gebruikt een humoristische benadering ... in plaats van een basisfout terug te geven wanneer een verjaardag niet klopt, geven ze je een beetje een attitude.
Vanuit een technologisch oogpunt zijn er twee verschillende manieren om validatie in een vorm te integreren:
Client-side validatie biedt het meest gebruiksvriendelijke alternatief, omdat het de feedback live en direct kan weergeven, zodat de gebruiker onmiddellijk hun fout kan herstellen. Een groot nadeel van client-side validatie is echter dat het over het algemeen afhankelijk is van een soort JavaScript. Daarom, als de gebruiker JavaScript heeft uitgeschakeld, zal hij de live-validatie niet zien. Zorg er dus voor dat u nog steeds kunt terugvallen op server-side validatie
Je kunt veel meer lezen over de technologische kant van validatie op onze netwerksite, Nettuts!
De beste vormen zijn die anticiperen op gebruikersgedrag. Het is belangrijk om een formulier te plannen en te begrijpen hoe een gebruiker fouten kan maken voordat deze wordt gebouwd. Waarom? Omdat als u op een probleemlocatie kunt anticiperen, het eenvoudig is om een oplossing te ontwerpen waarmee gebruikers er voorbij kunnen komen. Het kan echter duur zijn om het validatieontwerp tot het laatste moment te laten repareren nadat de codering is voltooid. Als u wat extra tijd neemt om strategieën en styling voor uw formulieren te ontwerpen, bespaart u op de lange termijn tijd, geld en frustratie.
Accentsconagua