Bruk av kontrollelementer i design av grafiske brukergrensesnitt TDT4180, vår 2017 Yngve Dahl IDI, NTNU
GUI-kontrollelementer Kontrollelementer, komponenter, widgets. Har si; opphav fra Xerox Parc på 70-tallet. Xerox Alto/Star Er i stor grad bli; standardiserte De ser like ut på tvers av plalormer. Tilbyr lik oppførsel på tvers av plalormer. Brukergrensesnittet til Xerox Star
GUI-kontrollelementer Brukergrensesni;et bygges gjennom å kombinere ulike typer kontrollelementer Teksfelter, knapper, sjekkbokser, lister, slidere etc. Tilbys i toolkits. Alle basiskomponenter har: Klasse og superklasse Dataverdi(er) Egenskaper Hendelser Kontrollelementene gir brukeren mulighet Ul å interagere med applikasjonen.
Metaforer
Grupper av kontrollelementer Input-elementer Checkboxes, radio bu;ons, dropdown lists, list boxes, bu;ons, toggles (togglebu;ons), texts fields, date fields Navigasjonselementer Sliders, icons, paginauon, scroll bars Informasjonselementer Labels, Tool Ups, icons, progress bars, nouficauons, message boxes, modal windows Containers Panels, Tabbed controls, Accordion
Kontrollelementer og brukskvalitet Bruk av standardiserte kontrollelementer i et GUI garanterer ikke høy brukskvalitet. I stor grad avhengig av at konvensjonen for anvendelse følges.
Hva sier konvensjonen?
Kilde http://www.nngroup.com
Checkboxes Beny;es når brukeren kan gjøre flere valg (0..N) fra et fra et se; med muligheter. Vanligvis best å presentere som en verukal liste. J L
Checkboxes Enkeltstående checkboxes beny;es når det kun er e; 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. J
Checkboxes Bruk posiuve og akuvt ladde beskrivelser kny;et Ul en checkbox. Det er vikug at brukeren enkelt kan forstå konsekvensen av valgene sine.
Radio bu;ons Brukes i Ulfeller hvor brukeren kun kan gjøre e7 valg av flere mulige (valgene er gjensidig utelukkende) Vanligvis best å presentere som en verukal liste (spesielt hvis det er mange valgmuligheter) Bruk radio bu;ons fremfor dropdown menyer hvis det er få alternauver å velge mellom. Alle alternauvene er synlig. Le; å sammenligne alternauvene. Mer effekuvt. J L L
Radio bu;ons Sørg for å dekke hele mulighetsrommet. Presenter valgmuligheter som logisk hører sammen i én gruppe. Lag tydelige skiller mellom ulike grupper (bruk luc i mellom). I en gruppe med radio bu;ons skal e; av alternauvene være forhåndsvalgt. Hvis en har grunnlag for å tro at de fleste brukerne vil velge gris se;es de;e som forhåndsvalgt. Gir økt effekuvitet. Kan brukes Ul å lede uerfarne brukere Ul å gjøre trygge valg (f.eks. mht sikkerhetsinnsullinger). Ingen eller andre kan gjøres Ul en eksplisi; valgmulighet.
Hva er design-problemet? Feil bruk av checkboxes Valgene utelukker hverandre. To spørmål er unødvendig. E; spørsmål med Ulhørende checkbox er nok. L
Bu;ons (knapper) Knapper fyrer aksjoner når de trykkes på. Tydeliggjør for brukeren hvilken aksjon en knapp leder Ul gjennom entydig tekst, symbol eller begge deler. Ikke endre hvilke aksjoner en knapp leder Ul. En lagre-knapp er og blir en lagre-knapp.
Bu;ons (knapper) Hva er konsekvensen av å trykke på Save og Close i de;e Ulfellet? Forslag Ul ny løsning: OK: Lukker og lagrer data Cancel: Lukker uten lagring av data. Close: Kun Ulgjengelig (enabled) dersom ingen data er fylt inn. Apply: lagrer data uten å lukke.
Toggles Tilstands-knapper: Beny;es for å velge Ulstander. F.eks. Tekseormatering IOS Når en toggle-bu;on trykkes er konvensjonen at Ulstandsendring skjer umiddlerbart; For radio bu;ons og checkboxes skjer endringen først e;er brukeren bekrecer 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 se;es Ul å være gjensidig utelukkende (f.eks superscript og subscript).
Toggles Gjenkjennbarhet er vikug. Bruk le; forståelige symboler
Dropdown lists Brukes når: brukeren kan velge e7 alternacv av flere mulige (som radio bu;ons). det er for mange valg Ul å få plass Ul radio bu;ons.
Dropdown lists Tydeliggjør hvilket alternauv som er valgt. Obs! Brukeren kan oce ikke se alle valgmulighetene i en dropdown liste må scrolle) Pass på at en nedtrukket liste ikke dekker over annen relevant informasjon i brukergrensesni;et. Auto-complete kan effekuvisere bruken.
Dropdown lists Eksempel på auto-complete (fra h;p://www.norwegian.no) J
Dropdown lists Unngå mange nivåer (maks. 2). Krever mer fin-motorikk. Brukeren må gjenta mange steg dersom han eller hun trykker feil. L
Message boxes Brukes for å gi brukeren vikuge Ulbakemeldinger han/hun må ta sulling Ul. Bør tydeliggjøre: Hva som har skjedd eller vil skje. Hvorfor Hva brukeren kan gjøre. L L J
Tab controls Gjør det mulig å skice mellom ulike viewes i en gi; kontekst. Hensiktsmessig dersom det er vikug at brukeren hele Uden må se en bestemt del av brukergrensesni;et. F.eks. presentasjonen i Powerpoint, eller siden i et Word-dokument. VikUg at informasjon og aksjoner som kan gjøres på en tab logisk hører sammen. På PC bør Tab-raden bør fortrinnsvis ligge på toppen av panelet.
Tab controls Begrens antallet tabs! L
Sliders Brukes for å se;e og/eller vise en verdi innenfor et intervall (øvre og nedre grenseverdi). SUlle inn lydvolum. Rangere Brukes for å velge nummeriske verdier. Ikke bruk sliders dersom mulighetsrommet f.eks. består av fugl, ka;, hund, kanin og gris.
Sliders Ikke egnet Ul å se;e spesifikke verdier; kun anslagsvise Vanskelig å se;e spesifikk verdi dersom intervallet har høy granularitet. Krever finmotorikk. Spesielt vanskelig i touch-grensesni;. L Vurdere andre kontrollelementer dersom høy granularitet er nødvendig.
Lables vs texeields Labels brukes for å vise stacsk tekst i brukergrensesni;et. F.eks. Beskrive ulike kontrollelementer i brukergrensesni;et L Bruk texeields for å vise dynamisk tekst. J
Gjenkjennbarhet Kontrollelementer må være gjenkjennbare. Eksempel: Radio bu;ons er små og runde, og har en tydlig markert runding inni når de er valgt. J Endring av kontrollelementers utseende skaper usikkerhet mht Ul bruksmåte. L
Hva er problemet med denne web-siden? Lables ser ut som knapper.
Oppsummering Følg konvensjonene for bruk av kontrollelementer. Vær konsistent. Less is more! Test brukergrensesni;et