Skip to content

Når bruker man hvilke type objekter?

helemork edited this page Jun 17, 2019 · 3 revisions

Vær konsistent, vær knapp (less is more) og test brukergrensesnittet. Pensumdump fra emne ved NTNU

Input-elementer

Checkboxes

Benyttes når brukeren kan gjøre flere valg (0..N) fra et fra et sett med muligheter.

  • Vertikal liste.
  • Enkeltstående checkboxes benyttes når det kun er ett valg brukeren kan gjøre.
  • Kan være en fordel å bruke mer enn en kolonne dersom listen er lang (unngår scrolling), eller dersom sammenligning av termer er nødvendig.
  • Bruk positive og aktivt latide beskrivelser knyttet til en checkbox. (Jeg aksepterer x)
  • Det er viktig at brukeren enkelt kan forstå konsekvensen av valgene sine.

Radio buttons

Brukes i tilfeller hvor brukeren kun kan gjøre ett valg av flere mulige (valgene er gjensidig utelukkende)

  • Vertikal liste (spesielt hvis det er mange valgmuligheter)
  • Radio buttons fremfor dropdown menyer hvis det er få alternativer å velge mellom.
  • Alle alternativene er synlige, lett å sammenligne og mer effektivt.
  • Dekk hele mulighetsrommet.
  • Presenter valgmuligheter som logisk hører sammen i én gruppe.
  • Tydelige skiller mellom ulike grupper (bruk ”luft” i mellom).
  • I en gruppe med radio buttons skal et av alternativene være forhåndsvalgt.
    • Hvis en har grunnlag for å tro at de fleste brukerne vil velge ”gris” settes dette som forhåndsvalgt.
    • Gir økt effektivitet.
    • Kan brukes til å lede uerfarne brukere til å gjøre trygge valg (f.eks. mht sikkerhetsinnstillinger).
    • ”Ingen” eller ”andre” kan gjøres til en eksplisitt valgmulighet.

Dropdown lists

Brukes nå brukeren kan velge ett alternativ av flere mulige, men det er for mange valg til å få plass ti radio buttons.

  • Tydeliggjør hvilket alternaUv som er valgt.
  • Brukeren kan ikke se alle valgmulighetene i en dropdown liste - må scrolle
  • Pass på at en nedtrukket liste ikke dekker over annen relevant informasjon i brukergrensesnittet.
  • ”Auto-complete”/søkefelt kan effektivisere bruken.
  • Unngå mange nivåer (maks. 2) sånn som i tegneprogrammer.
  • Krever mer fin-motorikk, og må gjenta mange steg dersom det trykkes feil.

Buttons (knapper)

Knapper fyrer aksjoner når de trykkes på.

  • Tydeliggjør for brukeren hvilken aksjon/handling en knapp leder gir deg
    • entydig tekst, symbol
  • Ikke endre hvilke aksjoner en knapp leder til
    • En lagre-knapp er og blir en lagre-knapp.
    • OK: Lukker og lagrer data
    • Cancel: Lukker uten lagring av data.
    • Close: Kun tillgjengelig (enabled) dersom ingen data er fylt inn.
    • Apply: lagrer data uten å lukke.

Toggles

Tilstandsknapper: velge tilstander.

  • Når en toggle-button trykkes er konvensjonen at tilstandsendring skjer umitidlerbart;
  • For radio buttons og checkboxes skjer endringen først etter brukeren bekrefter valget (ved f.eks. å klikke på en OK eller Apply)
  • Konsekvensen av å klikke på en toggle må være lav.
  • Innenfor en gruppe av toggles kan enkelte valg settes til å være gjensidig utelukkende (f.eks superscript og subscript).
  • Gjenkjennbarhet er viktig, bruk lett forståelige symboler

Textfields

brukes for for å vise dynamisk tekst, altså tekst som kan endres.

Andre element: Inneholder også list boxes, date fields

Navigasjonselementer

Sliders

Brukes for å sette og/eller vise en verdi innenfor et nummerisk intervall (øvre og nedre grenseverdi).

  • Kun for å velge nummeriske verdier. (Ikke ”fugl, katt, hund, kanin og gris").
  • Ikke spesifikke verdier - kun anslagsvise
  • Vanskelig å sette spesifikk verdi dersom intervallet har høy granularitet
  • Krever finmotorikk, spesielt vanskelig i touch-grensesnitt.
  • Vurdere andre kontrollelementer dersom høy granularitet er nødvendig.

Andre element: icons, pagination, scroll bars

Informasjonselementer

Lables

brukes for å vise statisk tekst i brukergrensesnitet.

Message boxes

Brukes for å gi brukeren viktige tilbakemeldinger han/hun må ta stilling til. Bør tydeliggjøre: Hva som har skjetid/vil skje, hvorfor og hva brukeren kan gjøre.

Andre element: Tool tips, icons, progress bars, notifications, modal windows

Containers

Tab controls

Gjør det mulig å skifte mellom ulike viewes i en gitt kontekst.

  • Bruk hvis viktig at brukeren hele tiden må se en bestemt del av brukergrensesnittet
  • Informasjon og aksjoner som kan gjøres på en tab må logisk høre sammen.
  • På PC bør Tab-raden bør fortrinnsvis ligge på toppen av panelet.
  • Begrens antallet tabs!

Andre element: Panels, Accordion