Kapittel 7 – Menyvalg, skjema og dialogbokser

7.1 Innledning

Når man ikke kan lage gode modeller med Direkte Manipulasjon, er menyvalg og skjema et bra alternativ. Menyer er effektive, fordi de gjør at brukerne kan gjenkjenne kommandoene ved at de listes opp på en strukturert måte. Brukerne slipper å huske kommandosyntaksen, slik de må med et kommandobasert system. Dette gjør at menyvalg er spesielt effektivt for brukere med liten erfaring med systemet.

7.2 Oppgaverelatert organisering

Hovedmålet for designeren når det gjelder meny, skjema og dialogbokser er å lage en fornuftig, forståelig og bekvem organisering som i tillegg er lett å gjenkjenne og relevant til oppgaven brukeren skal gjøre.

7.2.1 Enkeltmeny

En enkeltmeny har kun én liste med to eller flere valg. Eller det kan være en rekke med checkbokser hvor brukeren kan velge flere elementer. Enkeltmenyer kan deles inn i flere grupper:

• Binær meny En binær meny er den simpleste meny av alle. Den består av kun to valg, for eksempel ja/nei, true/false, mann/kvinne. I kommandobaserte systemer blir disse valgene ofte representert av en enkelt bokstav, for eksempel B Black and white og C Color. Her kan brukeren velge mellom sort-hvitt bilde eller fargebilde ved å trykke enten B eller C. I grafiske brukergrensesnitt (GUI) blir ofte radioknapper brukt for slike menyer.
• Flervalgsmenyer og checkbokser En annen variant av enkeltmenyer er hvor brukerne kan velge flere elementer samtidig. Vanligvis brukes checkbokser til dette, som på en lottokupong.
• Rullegardin (pull-down) og pop-up meny Pop-up menyer dukker opp på skjermen når man klikker på et bestemt objekt. Siden pop-up menyer dekker en del av skjermen, er det ønskelig å ha en komprimert menytekst.
• Scrolling og todimensjonale menyer Noen ganger har man behov for en meny med flere elementer enn det er plass til i en rekke nedover skjermen. Én løsning er å lage en trestrukturert meny. Men det kan være mest hensiktsmessig å ha alt i én kolonne av og til. Man kan da lage en meny som kan scrolles, for eksempel en listboks. På websider kan det være mest hensiktmessig å bruke flere kolonner for å spare brukeren for mye scrolling.
• Alfabetiske scrollbarer Når en liste innholder veldig mange elementer blir det vanskelig å finne fram. Man kan da lage en alfabetisk scrollboks, hvor man først kan scrolle fram til den forbokstaven man er ute etter og begynne letingen der. Alfabetiske scrollbarer kan brukes på lister med veldig mange elementer før det blir uoversiktlig. Ti- og hundretusener elementer går fint.
• Innkapslede linker (Embeded links) Alle menyene ovenfor er explicit (faste, bestemte) menyer. Menyvalg kan også være innkapslet i tekst. Dette er prinsippet for hypertekstdokumenter. Dette har også blitt benyttet i flygerledersystemer, hvor man kan velge ut spesielle fly fra et oversiktsbilde (som viser hvor alle flyene over flyplassen befinner seg) og få opp detaljinformasjon om dette osv.
• Ikonbaserte menyer, verktøylinjer og paletter Disse menyene kan utføre handlinger med kun ett klikk. Dette er svært hensiktsmessig på funksjoner som er mye brukt.

7.2.2 Lineær sekvens og flermenyer

• Menyer med lineær sekvens leder brukerne gjennom en kompleks prosess med flere valg ved å presentere ett valg om gangen. Ofte brukt på installasjonsprogrammer og såkalte wizards.
• Flermenyer er bruk av tabkontroll, for eksempel som i skjemaet kantlinjer og skyggelegging i MS Word. Brukeren kan sette opp kantlinjer og skyggelegging i én operasjon. Rekkefølgen på valgene er helt fritt. Dette bidrar til en raskere bruk av menyene.

7.2.3 Trestrukturerte menyer

Når antallet valg i menyen blir stort, og det blir vanskelig å organisere menyen med teknikkene ovenfor, kan man samle valg med lignende kategori under hverandre i en trestruktur. Selv en slik organisering fører til uenigheter. Ikke én strukturering passer alle brukerne, men over tid vil brukerne venne seg til strukturen. Trestrukturering gjør at nybegynnere kan finne fram i store mengder valg.

Dybde er antall nivåer. Bredde er antall valg per nivå. Når dybden kommer opp i et antall av fire til fem, er det fort gjort at brukerne går seg vill i menystrukturen.

7.3 Sekvensen på hvordan valgene presenteres

• Tid Kronologisk rekkefølge etter tid
• Numerisk Stigende eller synkende rekkefølge
• Fysiske egenskaper Stigende eller synkende etter lengde, areal, volum, temperatur, vekt osv

Når det ikke finnes noen direkte sammenheng mellom valgene kan man sortere etter:

• Alfabetisk Stigende eller synkende rekkefølge
• Grupper valg som har lignende handling Bruk mellomrom eller strek for å skille gruppene
• Frekvens De mest brukte valgene kommer først
• Viktighet De viktigste valgene kommer først

7.4 Responstid og frekvens på displayet

• Responstid er den tid det tar for systemet å begynne visning av informasjon som respons på et valg brukeren har gjort.
• Frekvens på displayet (display rate) er her hvor raskt menyene blir vist.

· Dype menyer blir irriterende hvis responstiden er treg, fordi man må gjøre mange valg før man kommer til kommandoen man ønsker å utføre.

· Hvis responstiden er treg, bør designeren plassere flere elementer per nivå for å redusere antallet nivåer man må bla seg gjennom.

· Brede menyer (lang liste) blir irriterende hvis displayraten er treg, pga all teksten og grafikken som må vises per nivå.

· Hvis displayraten er treg, bør designeren plassere færre elementer per nivå.

· Hvis både responstiden og displayraten er treg, er bruk av menyer generelt irriterende. Da blir kommandobasert grensesnitt mer aktuelt.

7.5 Rask bevegelse i menyer

Selv med kort responstid og høy displayrate kan erfarne brukere bli irriterte hvis de må gjennom mange menyvalg for å gjøre en enkelt handlig. I stedet for å lage et kommandobasert grensesnitt for erfarne og ekspertbrukere, kan vi forbedre menyen.

1. Tilby typeahead-teknikk

2. Gi menyene en tast som tilordnes navnet, for eksempel Fil

3. Tilby makromuligheter

7.5.1 Menyer med typeahead: BLT tilnærmelsen

Brukeren trenger ikke å vente på at menyene blir vist. Man kan bare taste inn en tekststreng på tastaturet for å foreta menyvalgene. Denne teknikken har blitt kjent som BLT-tilnærmelsen, der BLT står for bacon, lettuce and tomato sandwich. Denne teknikken krever at brukerne husker tekststrengen i hodet, men hvis de glemmer disse er det bare å se på menyene igjen. Teknikken er svært hensiktsmessig når responstiden eller displayraten er treg.

7.5.2 Menynavn eller bokmerker for direkte tilgang

Brukerne kan følge menyene, men hvis de vet navnet på menyvalgene kan de skrive dette inn og gå dit direkte. Denne teknikken er hensiktsmessig når brukerne har behov for å huske bare noen få navn.

Dette ligger svært nær teknikken som brukes i web browsere, bokmerker. Her kan brukerne lagre en internettadresse i en liste. Ved å klikke på oppføringen til denne adressen, har det samme funksjon som å skrive den inn. Bakdelen med denne teknikken er at listen fort blir veldig lang og uoversiktlig. Designeren må da tilby en hierarkisk struktureringsmulighet.

7.5.3 Makroer og verktøylinjer

Brukere som benytter menyvalg veldig mye vil foretrekke makrofunksjoner for å tilordne en sekvens av menyvalg til et lite program som kalles makro. Makroene kan senere kjøres, og de utfører da sekvensen med menyvalg som er lagret. Makroer kan ofte tilordnes en knapp på verktøylinjen for rask tilgang.

7.6 Meny layout

7.6.1 Tittel

Valg av tittel/navn på menyene er en vanskelig oppgave, som krever nøye gjennomtenking. Et viktig moment er konsistent navngiving. Når en bruker velger ”Linker” fra en meny på en hjemmeside, skal siden som kommer opp ha overskriften ”Linker” og ikke noe annet som for eksempel ”Her er viktige steder på nettet”. Samme prinsipp gjelder i designing av programmer.

7.6.2 Språket i menyene

· Konsistent terminologi Vær svært nøye med å velge en terminologi som brukergruppen kan forstå. Lag en liste over ord som skal brukes, slik at man lettere kan ha en konsistent språkbruk.

· Forskjell mellom valgene Sørg for at hvert valg er forskjellig fra alle andre. Ikke bruk setninger/ord med omtrent samme betydning. Dette gjør at brukerne blir i tvil om hva de skal velge. Grupper heller lignende valg.

· Konsis terminologi Ikke bruk lange setninger for å forklare et valg hvis ett ord kan være nok. For eksempel er det bedre å bruke kun ”Dyr” enn ”Informasjon om dyr”.

· Stikkord til venstre Prøv å la det relevante ordet komme først, for eksempel ”Size of type” i stedet for ”Set the type size”. Dette gjør at brukeren kan finne det valget han er ute etter mye raskere, fordi man skumleser menyvalgene. Det er da naturlig at man leser det første ordet først.

7.6.3 Grafisk layout og design

Designeren bør ha en liste over følge ting for å kunne lage en konsistent layout på menyene:

• Tittel Noen liker at tittelen på en meny er sentrert, men venstrejustert tittel er også vanlig.
• Justering av elementene Det er vanlig at elementene i en meny er venstrejustert. En blank linje eller en strek lager grupperinger av menyvalgene. Hvis man har behov for å bruke flere kolonner på én meny, bør rekkefølgen av valgene følge kolonnene. Det er lettere å skumlese nedover en kolonne enn bortover rader.
• Instruksjoner Instruksjonene bør være identiske for alle menyene, og bør være plassert på samme sted.
• Feilmeldinger Alle feilmelinger bør ha konsistent terminologi, og bør plasseres på samme sted.

7.7 Skjema

Når vi har behov for å angi data som navn, tall osv, er tastaturet en velegnet innenhet. Når mange felt med data skal angis, er skjema en teknikk å foretrekke.

7.7.1 Retningslinjer for designing av skjema

• Meningsfull tittel Identifiser emnet. Ikke bruk dataterminologi.
• Forståelige instruksjoner Beskriv brukerens oppgaver i en kjent terminologi. Vær kortfattet; hvis mer detaljerte forklaringer er nødvendig, lag noen hjelpeskjermer som nybegynnere lett kan nå. For eksempel skriv kun ”Adresse:” i stedet for ”Skriv inn adressen:”. I engelskspråklige systemer bruk ”type” når det gjelder innskriving av data, og ”press” når det gjelder trykking på taster som TAB, ENTER, F1 osv. Siden ENTER vanligvis forbindes med spesialtasten, unngå å bruk dette ordet i sammenhenger som for eksempel ”Enter the adress”. Bruk heller ”Type the adress”.
• Logisk gruppering og rekkefølge på feltene Felt som hører sammen skal stå ganske tett. Bruk et mellomrom for å skille grupper av felt. Rekkefølgen på feltene skal være logisk, for eksempel poststed etter postnummer.
• Visuelt utsende på skjemaet La feltene dekke skjemaet. Ikke plasser mange felt i ett område og la andre områder være tomme. Rett justering av feltene gir et profesjonelt utsende, og er med på å gjøre skjemaet forståelig. Hvis brukerne jobber med et tilsvarende skjema på papir, skal feltene plasseres likt som på papiret.
• Bruk kjente ord til forklaringene av feltene Hvis for eksempel feltet poststed blir kalt hjemsted vil brukerne bli frustrerte, og misforståelser vil oppstå. HUSK: Der feil kan gjøres, blir feil gjort.
• Konsistent terminologi Lag en liste med ord som brukes, slik at man ikke bruker ulike ord med samme eller omtrent samme betydning på ulike steder i skjemaet.
• Størrelse på feltene Brukerne skal kunne se på størrelsen på feltene hvor mange tegn som kan/skal skrives inn. For eksempel kan man bruke understrek for å vise antall tegn i tekstbaserte grensesnitt. I grafiske grensesnitt må lengden på tekstbokser og lignende tilpasses lengden av det som skal skrives inn.
• Forståelig flytting av markøren Bruk TAB tasten eller piltastene.
• Feiloppretting av enkelttegn og hele felt Tilby bruk av BACKSPACE og INSERT tastene.
• Motarbeid feil før de oppstår Dersom dette er mulig skal man unngå at brukeren taster inn tekst i inputfelt for tall og lignende.
• Feilmeldinger på uaksepterte verdier Hvis brukeren taster inn en feil verdi, skal han få beskjed om dette idet fokus forlater det aktuelle feltet.
• Valgfrie felt skal merkes Skriv ”Valgfritt/Optional” bak valgfrie felt. Motsatt har det blitt en standard å markere felt som ikke er valgfrie med en ”*”.
• Eksempel på akseptabel verdi Hvis dette er mulig, vil det være en fordel om et eksempel på akseptabel verdi vises på en konsistent plass i programmet, for eksempel nederst i vinduet. Dette eksempelet skal vises så lenge fokus er i det aktuelle feltet.
• Målsignal Det skal være klart for brukerne hva man skal gjøre når man er ferdig. Generelt skal ikke skjemaet lukkes automatisk når siste felt er innskrevet.

7.7.2 Listbokser og combobokser

Hurtig valg fra lister kan oppnås med combobokser. Disse tilbyr mulighet for inntasting av innledende tegn, hvorpå comboboksen scroller til den første oppføringen som passer med inntastingen. Vanligvis er lister sortert alfabetisk for å støtte dette, men det kan av og til være hensiktsmessig at oppføringene i listen er gruppert etter visse kriterier.

7.7.3 Kodede felt

Når data skal listes opp i kolonner kreves forskjellig justering på inntasting enn på visning av dataene. Tekst skal være venstrejustert på både inntasting og visning. Tall skal være venstrejustert på inntasting, men høyrejustert på visning. Desimaltall skal være justert etter desimalkomma på visning. Unngå visning av nuller foran tallet.

Tilby spesielle format der dette kreves:

• Telefonnummer: _ _ _ _ _ _ _ _
• Mobilnummer: _ _ _ _ _ _ _ _
• Tid: _ _ : _ _ _ _ (9:45 AM eller PM)
• Dato: _ _ / _ _ / _ _ (04/22/98 betyr April 22, 1998)
• Pengebeløp: Kr _ _ _ _ _.00

7.8 Dialogbokser

Dialogbokser skal dukke opp i nærheten av det området de er relatert til. Det er derfor en risiko for at de dekker relevant informasjon. Dialogbokser skal derfor være så små som mulig for å dekke et så lite område av informasjon som mulig. Prøv også å unngå at dialogboksene dukker opp oppå informasjon som er relevant for dialogboksen.

Når oppgavene blir komplekse, kan det være ønskelig å benytte såkalte tabbed dialog boxes. Disse kan ha mellom 2 og 20 folder. Eksempel på en tabbed dialog box er skjemaet Kantlinjer og skyggelegging i Microsoft Word. En fare med denne teknikken er at brukerne kan få problemer med å finne det de er ute etter.