Hvis ingen i din organisasjon har fokus på punktene nedenfor, så bør du ta tak i det snarest.

Det er ditt ansvar.

1. Tre enkle oppgaver

Gå til nettsiden din og skriv ned 3 konkrete oppgaver kundene dine må klare på nettsiden din for at din bedrift skal eksistere. Det kan være; å utføre en bestilling,  registrere seg, finne et telefonnummer, skrive ut en oppskrift eller noe annet. Du trekker kanskje på smilebåndet og tenker at dette ikke gjelder ditt nettsted. Da tar du feil! Hvorfor besøker folk ditt nettsted? Hva ønsker de å oppnå? Skriv det ned. Når du har skrevet ned tre oppgaver som de besøkende må klare, så er du klar for neste steg.

2. En brukertest i måneden

Utfør en brukertest i måneden og se hvor enkelt kundene dine klarer de 3 oppgavene. Det trenger ikke koste skjorte og det tar ca. 4 timer i måneden. Hvis du ikke har tid til det, så prioriterer du feil – så enkelt er det. Alle nettsteder har utfordringer når det gjelder brukervennlighet.  Kjøp den siste boken til Steve Krug;  Rocket surgery – made easy og utfør en brukertest per måned. Sett av en formiddag hver måned, involver ledelsen og sett i gang. Det lønner seg!

3.Kontinuerlige quick-fixer

Jared Spool, en av verdens ledende autoriteter på «usability» har gått så langt som å si at han aldri har sett en større «redesign» som har funket.

Jeg har vært med på et par redesign-prosjekter som har fungert bra, men det er quick-fixene som har gitt de beste resultatene. Man starter med en mindre del av et nettsted, identifiserer forbedringspunkter og implementer som et helvete – idag.

Folk sier at man må være tålmodig og at ting kan vente til neste større release eller at det er funksjonalitet som kommer til høsten. Det er feil. Ikke la deg lure. En av de store generalene fra 2. verdenskrig sa: «A good plan, violently executed now, is better than a perfect plan next week». Det stemmer.

Hvis du klarer å fokusere på disse tre enkle oppgavene, så har du store sjanser til å lykkes med nettsatsningen.  Hvis ingen i din organisasjon jobber med disse tingene, så har du et problem som jeg anbefaler deg å ta tak i. Jeg begynner å jobbe fokusert med disse 3 punktene i neste uke og kommer til å blogge om fremdriften både her på Stammen og på Hurtigrutens web team blog. Kom gjerne med innspill og spørsmål.

• Om General George Patton
• Rocket Surgery – Made Easy

Selvom du ikke er utvikler håper jeg at dette innlegget vil vise deg at skjemavalidering ikke trenger å være vanskelig å få på plass. Når du har lært det du trenger å vite om feilmeldinger, så kan du tipse utviklerne i ditt prosjekt om de mer tekniske aspektene ved feilmeldinger. Det er også konkrete eksempler nedover i inlegget som du kan prøve, så ikke la deg skremme av at du ikke kan JavaScript, det er veldig lite av det her.

Validatious – et JavaScript valideringsbibliotek

I dette innlegget viser jeg bruk av Validatious, et lite bibliotek for å validere skjemaer med JavaScript. Jeg skrev og slapp Validatious som et open source bibliotek i fjor etter å ha jobbet med skjemavalidering i en rekke prosjekter. Validatious kan brukes uavhengig av hvilket JavaScript-rammeverk du ellers bruker (det vil altså fungere med jQuery, Prototype og andre).

Validatious har funksjonalitet for å snappe opp valideringsregler fra klassenavn i HTML. Sammen med CSS for å style feilmeldinger og et lite script for å konfigurere oppførsel kan du komme langt selvom du ikke er noen JavaScript-ekspert.

Validatious gir mekanikken, ikke designet

Målet med Validatious var å samle logikken bak skjemavalidering på en plass, ikke å lage en ferdig pakke for feilmeldinger – hvordan disse skal kommuniseres er prosjektavhengig. Validatious gir deg ikke noe design og har ingen preferanser på hvordan skjemaene dine ser ut, så disse tingene trenger du fortsatt å bruke tid på å tenke ut. Validatious gjør det derimot enkelt å få på plass validering på klientsiden.

Et eksempel

Last ned Validatious og sett opp følgende testfil:

Legg merke til det andre scriptet: Standard-feilmeldingene i Validatious er på engelsk, så vi må laste inn en egen fil med norske meldinger. Denne fila kan du hente her. Senere skal vi se hvordan vi kan ta bedre kontroll over feilmeldingene.

Med litt rask CSS ser dette skjemaet omtrent ut som dette:

Skjemaets utgangspunkt

Det er to måter å bruke Validatious til å validere skjemaer:

1. Ved å kode validering med JavaScript
2. Ved å legge til klassenavn og andre attributter i HTML-en for skjemaet

For de fleste brukstilfeller kan du lage en godt tilpasset løsning kun ved å endre på HTML-en din og skrive CSS for å style meldingene. Dette er strategien vi går for i dette innlegget. Det finnes en god del dokumentasjon av hvordan du kan gjøre disse tingene fra JavaScript på validatious.org.

Legg validering på et skjema

Følgende er et utsnitt av skjemaet jeg bruker som eksempel, det er stylet til å ligne registreringen til Yahoo! som ble fremhevet som best practice i Philips innlegg:

  
Om deg
  

    

      Fornavn
      
    
    

      Etternavn
      
    
    

      E-post
      
    
  
  [SNIP]

Et relativt simpelt skjema. For å legge validering på dette skjemaet med Validatious er det to ting som må til:

1. Skjemaet må markeres som validerbart med class="validate"
2. Feltene må tilordnes valideringsregler via class-attributtet

I dette tilfellet ønsker vi at alle feltene skal være påkrevd, og vi ønsker å sjekke at e-post er en gyldig e-postadresse:

  
Om deg
  

    

      Fornavn
      
    
    

      Etternavn
      
    
    

      E-post
      
    
  
  [SNIP]

Med disse enkle endringene får vi validert skjemaet når vi trykker på registrer-knappen. Som du kan se vises det her én feilmelding per felt som feiler (selvom e-post har to regler som ikke er tilfredsstilt):

Skjema med feilmeldinger

Prøv eksempel #1

Legg forøvrig merke til at dersom du sender inn skjemaet tomt så vil du få feil på samtlige felter. Om du nå legger litt tekst i eksempelvis fornavn-feltet og tabber videre til neste felt vil du legge merke til at Validatious rydder vekk feilmeldingen umiddelbart. Dette kan du skru av om du ikke liker det. Dersom du hopper videre til e-post-feltet og skriver inn en tekst som ikke er en gyldig e-post-adresse vil du se at feilmeldingen ikke forsvinner, men oppdateres når du går ut av feltet.

Litt bling, takk

Skjemaet har validering, det er vel og bra, men feilmeldingene ligner ikke på Yahoos feilmeldinger. Det kan vi fikse greit. Det er mulig å ta fullstendig kontroll over hvordan feilmeldinger legges inn i HTML-dokumentet, men for å sette deg igang har Validatious en standardløsning. Du kan bruke et verktøy som Firebug for å se hva Validatious gjør, men jeg kan også fortelle deg det:

1. div-elementet rundt felt som feiler merkes med klassenavnet
   "error"
2. Først i div-elementet legges det til en ul med
   klassen "messages"
3. Inne i ovenfornevnte ul legges feilmeldingene inn i hvert
   sitt li-element

I utgangspunktet viser Validatious som sagt én feilmelding per felt, men det er mulig å be den om å sette inn et gitt antall, eller alle.

Vi kan sprite opp feilmeldingene med litt CSS:

/* Feilmeldinger */
.error {
    background: url(error_arrow_bg.gif) -50px 0 no-repeat;
    position: relative;
}

.error label span {
    background: url(smileyliamandroundedcorners_v5.png) no-repeat;
    background-position: -1px -120px;
    color: #c00e0c;
}

.error .messages {
    color: #c00e0c;
    list-style: none;
    left: 435px;
    margin: 0;
    position: absolute;
    top: 1px;
}

Dette er en litt rask hack som ikke er spesielt godt sjekka i mange browsere, men fungerer for å illustrere poenget. Denne gangen ser feilmeldingene litt stiligere ut, og det er ikke mye arbeid vi har lagt ned i dette:

Design på feilmeldinger

Lek med skjema #2

Litt positiv feedback, takk

Etter at brukeren har vært gjennom den prøvende opplevelsen det er å få kjeft av websiden vår kan det være hyggelig å backe opp med litt positiv feedback når et felt som har hatt feil blir rettet. På samme måte som et felt blir merket med klassenavnet "error" når det inneholder feil er det mulig å få et felt merket med klassenavnet "success" i det øyeblikket det rettes opp. Dette kan vi bruke til å gi brukeren et hint om at vi nå er fornøyd. For å gjøre dette må vi først gi Validatious et hint om klassenavnet vi ønsker:

Denne legges til etter script-elementet som inkluderer Validatious. Deretter legger vi til noen linjer CSS:

.success {
    background: url(checkbullet.gif) 320px 0 no-repeat;
}

En kjapp liten tweak som kanskje eller kanskje ikke er det du er ute etter:

Positiv feedback

Lek med skjema #3

Instant feedback, takk

I Yahoos skjema får du umiddelbar feedback når du gjør noe gæernt. Det kan vi få til også her ved å legge til en ny one-liner i script-blokken som konfigurerer Validatious (den vi nettopp innførte). Den skal se sånn ut:

v2.Field.prototype.instant = true;

Med denne på plass vil du få feedback etter hvert felt. Om feltet er OK får du en grønn hake ved siden av det, er det problemer får du beskjed om hva som er feilen.

Instant feedback

Lek med skjema #4.

Bedre feilmeldinger

Validatious tilbyr et sett med gode standardmeldinger, men standardmeldinger kan svært sjelden konkurrere med tilpassede feilmeldinger. La oss si at vi ikke var så fornøyde med feilmeldingen som dukker når vi taster inn en e-postadresse som ikke er gyldig. Vi kan da gi en bedre melding på to måter. Den enkleste er å gi input-elementet et title-attributt som gir en tilpasset melding:

  E-post
  

Med dette kan vi se at vår tilpassede feilmelding brukes i stedet for de innebygde meldingene. Lek med skjema. Hvorvidt dette er en god feilmelding er kanskje en annen diskusjon, men jeg er bare utvikler – vi vet ikke sånt.

Dersom vi bare ønsket å hjelpe Validatious med feltnavnet kan vi gjøre dette også. Standardmeldingen som genereres for manglende fornavn er «Fornavn er påkrevd». «Fornavn» snappes opp fra labelen foran feltet. Ved å gi denne et
title-attributt kan vi bruke et annet feltnavn i feilmelding enn det som vises i labelen:

  Fornavn
  

Lek med skjema.

Lær mer

Vi har sett basic bruk av Validatious, men den kan mer enn dette:

• Sjekk at minst ett av en gruppe felter er fylt ut
• Velg fra en samling ferdigbygde
  valideringsregler
• Valider komplekse
  regler med JavaScript
• Sørg for at kun enkelte knapper validerer skjemaet (ikke valider på
  «tilbake»-knappen i en prosess o.l.)

Og masse mer. Sjekk validatious.org for mer informasjon eller ta kontakt om du har spørsmål og eller kommentarer (gjerne via kommentarene nedenfor).

Dersom det er interesse for det følger jeg gjerne opp med et nytt inlegg ved en senere anledning der jeg kan vise validering av mer komplekse skjemaer samt bruk av eksempelvis jQuery for å lage enda mer bling – type animerte feilmeldinger eller lignende.

Disclaimer: Skjemavalidering med JavaScript

Det er viktig å forstå at input av sikkerhetsgrunner alltid må verifiseres på serveren uavhengig om du også gjør det på klienten. Dette innlegget handler om å bedre interaksjonen i skjemaer i en webløsning ved å bruke JavaScript til å
validere input «on-the-fly». Formålet er å gjøre bruk av tjenesten din til en mer lystbetont øvelse, ikke validere input for sikkerhet.