Webdagene 2008: Skjemaer som brukerne elsker 0

Anders Fagerhus fra IXD begynner foredraget med å demonstrere ulike skjemaer og siterer Homer Simpson i innledningen:

“Just because I don’t care doesn’t mean I don’t understand!”

Kunder fyller ut skjema fordi de ønsker å oppnå noe, men de er også skeptiske og late, fortsetter han. Å utforme skjema er et arbeid i å gjøre skjemaet lett å fylle ut. Skjemautfylling skal være så smertefri som mulig. I foredraget sitt gikk Fagerhus gjennom viktige momenter, og svaret på hvordan man lager skjemaer som brukerne elsker ga han nesten med en gang: det finnes ingen fasit.

Anders Fagerhus

Mange er flinke på skjemadesign fordi de lever av dette – hva hadde youtube vært uten gode skjemaer, spør Fagerhus. Det beste er å ikke stille spørsmål i det hele tatt, fortsatte han. I et skjema er det derfor viktig å stille så få og presise spørsmål som mulig.

Han viser til Amazon.com og betalingsprosessen der, og illustrerer hvordan de kutter bort det som er irrelevant da. ‘Hide the ejector seat’  – fjern det som kan ta brukeren vekk fra prosessen.

Layout. Han snakker om viktigheten av å ha en enkel ‘scan line‘ som gjør det enkelt for brukeren å skanne innholdet. Han demonstrerer forsiden av VG.no og Guardian for å vise forskjeller i skannbar layout.

Typografi. Så trekker han frem typografi, hvordan samme tekst og font kan vises forskjellig, og hvor mye det har å si for lesbarheten. Vi leser ord som visuelle elementer fremfor bokstaver i en rekkefølge, og han viser en video av tekst hvor bokstavene i ordene er stokket om men fortsatt lesbare.

Tenk på dialogen du skaper med brukeren, fortsetter han. Skill ut informasjon ved hjelp av gruppering, enten ved hjelp av nærhet eller tilstedeværelse gjennom for eksempel fargebruk. Leseren går ut i fra at en H1 overskrift i HTML er viktigere enn en H4. Rammer kan også benyttes til å gruppere, like så linjer eller luft mellom feltene. Vi må tenke hvillket type innhold som skal grupperes. Overdreven bruk av farger kan virke mot sin hensikt.

Han snakker om fokuspunkter, der hvor øyet vårt stopper og fokuserer. Det kan fort bli mye støy om ikke grupperingsteknikker brukes riktig. Farger kan oppleves forskjellig, de blir påvirket av lys og omstendigheter rundt. Begrens derfor bruken av farger til gruppering.

Så går han igjennom labels, altså merkelappen til input-feltene, og kommenterer teknikker knyttet til disse samtidig som han illustrerer de ulike:

Venstrejustering av labels

Høyrejustering av labels

Toppjuserterte labels

Bunnjusterte og midjusterte labler fungerer ikke godt og bør som regel unngås.

Design av retning. Det vil alltid være én bruker som gjør feil, det er derfor viktig å tenke retningssans når du designer. Skal skjema være over flere sider, eller skal alt være på en side? Hvordan kan jeg skrive dette som en dialog eller naturlig måte? Fagerhus svarer slik på sitt eget spørsmål: Der hvor du tar naturlige pauser i språket, er det naturlig å dele inn informasjonen.

Det er også viktig at tabulatoren ikke jukser, den må bevege seg riktig gjennom hele skjemaet, for mange benytter denne tasten for å navigere skjemaer.

Størrelse på felter. Selv om margjusterte felter kan se pent ut layoutmessig, forteller det brukeren noe om hvor mye informasjon som er forventet at feltet skal inneholde. Han eksemplifiserer det med at felt for postnummer bør være korte for ikke å forvirre brukeren.

Tenk på handling. Gjør ‘primary action’ stor og tydelig. Avbryt-funksjoner bør derfor også tones ned. Pass også på hvor du plasserer ‘primary action’, slik at ikke en registreringsprosess avbrytes feilaktig fordi cancel-knappen er plassert nærmest handlingsrekken til brukeren.

Mange tror at stjerne betyr påkrevd felt, men andre bruker stjerne på felter som er valgfritt. Som generell regel bør skjema der påkrevde felter er i overvekt ha markert valgfrie felter, og omvendt; der hvor fleste parten av feltene er valgfrie bør de påkrevde markeres. Sørg bare for at stjernetegnet er godt forklart, bruk også hjelpetekster.

Hjelpetekster bør uansett brukes når det er noe som er vanskelig å forstå. Facebook forklarer for eksempel hvorfor de trenger bursdagsinformasjonen din. Hjelpetekstene kan plasseres enten etter eller under feltene, eller rundt om på siden. Hvis du imidlertid må forklare veldig mye av skjemaet ditt bør du gå igjennom designet på ny og se om det er godt nok designet. Folk responderer best på grafikk av spørsmålstegn når det skal kommuniseres hjelpefunksjoner.

Feilmeldinger. Feilmeldinger gis best med direkte tilknytning til feltet som er feil, både med forklarende tekst og bruk av farger. Det er mye mer gunstig enn en generell pop-up. Mange brukere kan også overse feilmeldingen hvis den bare vises øverst på siden, uten annen referanse til aktuelt felt enn en tekstbeskrivelse.

Fagerhus avslutter med å snakke om viktigheten av god feedback. Han viser skjermbilder fra registreringsskjemaet til World of Warcraft og poengterer at WoW aldri hadde hatt 10 millioner brukere om de ikke hadde gitt tydelig og beskrivende tilbakemelding når kredittkortnummeret er feil utfylt…