Dette frustrerer meg litt nå:
Spamfilteret på kommentarene fungerer ikke optimalt.
(02.12.2010)
Disse anbefaler jeg:
| \ ReadWriteWeb.com | \ |
| \ IAllenkelhet.no | \ |
| \ Kuttisme.no | \ |
| \ TopicObserver.com | \ |
| \ UXMatters.com | \ |
| \ UsabilityPost.com | \ |
| \ Frilunsj.no | \ |
| \ JustAddWater.dk | \ |
| \ Alistapart.com | \ |
| \ Bekkelund.net | \ |
Du er her:
- Forsiden
- Brukervennlighet
- Validere skjema med JavaScript - brukervennlig?
Validere skjema med JavaScript - brukervennlig?
Martin Gjesdal, 10. februar 2009
Jeg var en gang webutvikler og laget mange valideringsrutiner for skjemaer. Alle rutinene kicket inn etter posting av skjema, selvfølgelig. Selv om JavaScript var en etablert teknologi også den gang (2001-2002), var det ingen som tenkte på noe annet enn post-validering.
Derfor var det fin-fint når vi begynte med JavaScript-validering. Det betød at skjemaet ikke ble sendt før visse kriterier i skjemaet var oppfylt. Kjempegreit for brukere også, som slipper å klikke på tilbake-knappen hver gang de skal oppdatere skjemaverdier.
Denne metoden er i seg selv ikke brukerfiendtlig, men jeg har i det siste sett eksempler på misforståtte implementasjoner. Den gode syretesten på dette er å sende inn tomt skjema. Man får da kanskje beskjed om at et spesifikt felt mangler utfylling, selv om det er opp til flere obligatoriske felter i skjemaet.
Jeg fyller så ut feltet som sprettopp-boksen ber meg om og sender inn skjema på ny. Nå er det et nytt felt som skal til pers. Jeg fyller ut dette og sender inn igjen. Nå kommer en liste over syv felter som må fylles ut.
Når dette blir implementert feil, fører det altså til litt lugging i maskineriet. Jeg tror det er veldig irriterende for brukere som ikke forstår helt sammenhengen i slike skjemaer når de blir mast på på ny og på ny. Slike JavaScript-løsninger må lages skikkelig. Og når de fungerer, så er det faktisk en fryd - jeg kjenner en liten usability-tåre danne seg i øyekroken når det virkelig fleskes til :-)
(jeg ønsker ikke å peke på hvilket skjema eksempelet mitt er hentet fra, men det gjelder mange skjemaer der ute)
Søk
Sist kommenterte artikler
- Wireframing for voksne
- Konverteringsrate Dyreparken 04.02.2012
- Ingen hovedmeny? Uhørt! 04.02.2012
Kommentarer
Kenneth Dreyer
Hva med å peke til hvrodan det gjøres skikkelig da?
Martin Gjesdal
Jeg har lett og lett, men finner bare flere dårlige eksempler, hehe. Har listet dem opp under.
Min drømmeløsning er en opplisting av alle felter som mangler umiddelbart. Jeg tror mange av de understående fungerer for de fleste brukere, men det blir litt klamt når det kommer to bokser oppå hverandre eller at du blir lurt til å tro at du "bare jeg fyller ut neste felt så er jeg i mål".
Mine kritiske vinklinger er basert på at jeg submitter tomme skjemaer. Og det skjer jo ikke alltid :-)
http://bit.ly/30ab9u
http://bit.ly/4V0WV
http://bit.ly/rOZw
Trond K. Pettersen
Enig i at det er utrolig provoserende når slike ting gjøres latterlig dårlig.
Ikke at jeg ønsker å se deg gråte, Martin, men her er et eksempel på hvordan det kan gjøres meget bra (som enkelt kan tas i bruk av hvem som helst):
http://www.validatious.org/learn/examples/registration_html
(Via http://www.cjohansen.no/).
Trond K. Pettersen
Btw: hvorfor denne fascinasjonen for bit.ly? For meg synes slike "obfuscated" URLs lite brukervennlig.
Heldigvis finnes det Firefox add-ons som motvirker slikt ;)
(https://addons.mozilla.org/en-US/firefox/addon/8636)
PS. Hadde vært fint om bloggen din laget lenker av URLer i kommentarer, slik at jeg slapp å kopier og lime inn i nettleserens adressefelt ;)
Martin Gjesdal
Godt eksempel, Trond, men jeg har to innvendinger: "Confirm password" er huket av som ok, selv om jeg ikke har fylt ut noe, skjønt den er jo per definisjon lik passordet (som ikke er godkjent). I tillegg er det ikke optimalisert for Firefox, det er noe grafikkbug nederst.
Ellers må dette være en de bedre måtene å gjøre dette på.
Hvis vi skal snakke om å bli rørt til tårer av god skjema-usability, synes jeg fremdeles at StoreBrand forsikring holder et høyt nivå på sine skjemaer. Selv etter 2 år på luften. Unike etter min mening.
Martin Gjesdal
Angående bit.ly: Noen av linkene var for lange, hehe.
Angående lenker: Ja, jeg vet. Det er litt av "straffen" for å mekke bloggen selv, hehe. Skal få sett på det.
Trond K. Pettersen
Enig. Reagerte på "Confirm password", jeg også, men dette er jo strengt tatt bare et eksempel på hva en *kan* gjøre med det gitte JavaScript-biblioteket. Det er ikke et reelt skjema. En kan fint sette opp egne regler for gyldighet. Det samme gjelder stylesheet og cross-browser kompabilitet på den fronten.
Liker også at det validerer etter hvert som en fyller ut skjemaet, og at meldinger gis som inline HTML fremfor pop-ups, alert-bokser, eller annet rask.
Enig i at Storebrand har meget bra design og informasjonsarkitektur. Har dog hørt rykter om at det er så som så med enkelte vel så viktige saker i maskineriet (lånekalkulatorer osv.) ... de kapret heller ikke forsikringspremiene mine :D
Christian
Som opphavsmannen bak både Validatious og Storebrand-feilmeldingene følte jeg meg kallet til å kommentere :)
Validatious-eksempelet er som poengtert kun et eksempel på hva som er mulig. Validatious er et JavaScript-rammeverk for klientsidevalidering, det har ikke noe innebygget design, det er hele poenget. MEN, jeg har lenge hatt planer om lage noen bedre eksempler, men så var det dette med tiden da...
Storebrand-skjemaene er et godt eksempel på hvordan ting kan funke når man har en god designer med seg (designet her er Teodors www.teodor.no). Man kan enkelt sette opp Storebrand-lignende skjemaer med Validatious - alt som kreves er CSS og minimalt med JS-konfigurering.
Jeg har som dere skjønner absolutt tro på klientsidevalidering, men er selvfølgelig enig i at det må gjøres riktig. Her er designet utrolig viktig.
Martin Gjesdal
Godt design er viktig på all slags type skjemaer og tilbakemeldinger. Jeg leser for tiden Luke Wroblewski sin bok "Web Form Design". Meget interessant, der står det mye om hvordan meldinger bør overbringes brukeren, anbefales! http://www.lukew.com/resources/articles/web_forms.html