Dette er det tredje og sidste blogindlæg om designprincipper for brugerflader. Bliv klogere på blandt andet gitter, justering, gentagelser, kontrast og brug af “negativt rum”.
Vi begynder med at se nærmere på fordelene ved at bruge et gitter – som ofte kaldes “grid” i software – i designfasen.
Et gitter er, som navnet antyder, et system af lodrette og vandrette linjer, der inddeler et layout i rækker og kolonner. Gitteret hjælper designeren med at organisere, strukturere og skabe balance i layoutet.
Gitteret er med til at sikre, at alle elementer er placeret og justeret på en ensartet måde hele vejen gennem brugerfladen.
Generelle principper for design
De generelle designprincipper kan bruges i alle former for design, også brugerflader til industrielle applikationer. Nogle af de mest almindelige principper omhandler:
- Justering
- Nærhed
- Hierarki
- Balance
- Gentagelse
- Kontrast
- Fremhævning
- Farver
- White space / “negativt rum”
Lad os kigge nærmere på de enkelte designprincipper, og hvorfor de hver især hjælper med at designe bedre og mere effektive brugerflader, der mindsker risikoen for, at operatører begår fejl.
De enkelte designprincipper
Justering handler om at placere elementer på en velorganiseret måde, der skaber balance, sammenhæng og “orden” i designet. Med justering kan man forbinde relaterede elementer som fx tekst og symboler for at give operatøren kontekst.
Nærhed bygger på, at elementer, som er placeret tæt på hinanden, vil blive opfattet som relateret til hinanden. Princippet kan bruges til at skabe visuelle relationer, hierarkier og balance. Omvendt kan designeren vælge at placere et element længere væk fra andre for at få det til at skille sig ud og tiltrække sig opmærksomhed.
Hierarki giver visuelle hentydninger og hjælper med at organisere elementer, fremhæve de vigtigste og i det hele taget skabe klarhed i designet. Typiske værktøjer til at etablere et hierarki er størrelse, typografi og form.
Balance handler om at skabe orden med en brugerflade, som er behagelig at se på og derfor bliver opfattet som godt organiseret og struktureret. Man kan arbejde med både symmetrisk og asymmetrisk balance, fx ved at placere elementer “spejlet” omkring en central akse, eller bruge forskellige størrelser, former m.m. på en måde, der skaber balance uden at være symmetrisk.
Gentagelse handler om at genbruge elementer i designet for at skabe sammenhæng og øge genkendelsen. Former, farver, typografi, kolonner og gitre kan bruges til at skabe gentagelser.
Kontrast bruges til at skabe “visuel spænding,” som kræver opmærksomhed og hjælper med at engagere brugeren. Kontrast kan opnås på flere måder, fx ved at bruge lys sammen med mørke, varme med kølige farver, forskellige størrelser og forskellige former – fx runde ved siden af firkantede.
Fremhævning bruges til at skabe et fokuspunkt i designet, som naturligt leder brugerens øjne til et vigtigt element. Typiske måder at fremhæve på er fx at ændre størrelsen på et element i forhold til de øvrige, bruge negativ (inverteret) tekst og at give det vigtigste element en fremtrædende plads på HMI-skærmen – fx i midten eller i forgrunden.
Farver kan både fremhæve elementer og understøtte designets overordnede, æstetiske udtryk. Men pas på – forkert brug af farver kan have en negativ effekt, blandt andet ved at distrahere operatøren.
ISA 101-standardens anbefalinger for brug af farver:
- Pumper, ventiler osv. bør vises i designet med monokromatiske farver, typisk grå.
- Til baggrundsfarver bør man vælge en grå farve med tilpas meget kontrast i forhold til elementerne i forgrunden.
- Lyse, stærke farver bør kun bruges til at tiltrække operatørens opmærksomhed i tilfælde af ikke-normal drift.
- Hvid bør bruges til at indikere, at et element er i “tændt” position, og mørk grå til at indikere “slukket.”
White space – også kaldet “negativt rum” – kan bedst beskrives som den del af designet, hvor der ikke er placeret ikoner, knapper, tekst eller andre elementer. Det giver plads, luft og balance i designet – og gør det nemt for operatøren at læse og se de vigtige informationer.
Negativt rum bruges til at fremhæve kritiske elementer ved at lade dem skille sig ud, og til at give komplekse, informationstunge brugerflader et mere enkelt og indbydende udtryk.
Navigation: Lodret eller vandret?
Navigation er en central del af enhver brugerflade, og de to mest udbredte typer af navigation er vandret og lodret (eller horisontal og vertikal.)
De har hver deres styrker og begrænsninger. Det er designerens opgave at vælge den navigationstype, som i den konkrete applikation er den bedste til at hjælpe brugerne med hurtigt og nemt at finde det, de har brug for.
Vandret navigation er den nok mest udbredte type og ses oftest med en menu øverst på siden med links til forskellige sektioner i brugerfladen.
Fordelen ved vandret navigation er, at den for mange er velkendt og derfor let at finde. Dog er der en grænse for, hvor mange menupunkter, der kan vises. Desuden kan vandret navigation være mindre ideel på små skærme og/eller til store brugerflader.
Lodret navigation: Optræder typisk med en kolonne i siden af skærmbilledet. Styrken er, at lodret navigation har plads til flere links/menupunkter. Den er nem at bruge, fordi den har en fast plads til venstre. Desuden føles lodret skanningsretning mere naturligt for de fleste brugere. Til gengæld optager den mere plads på skærmen.
I nogle tilfælde kan designeren vælge af kombinere begge typer.
Style guide: En håndbog for designet
Når man designer brugerflader, er det vigtigt at sikre et konsistent og professionelt design gennem hele projektet. Her er en designhåndbog, også kaldet en style guide, et uundværligt værktøj.
En style guide vil typisk indeholde retningslinjer for:
Ikoner: Størrelse, farver, anvendelse osv.
Farvepalet: Primære og sekundære farver, farver på alarmer, vejledning til brugen af farver i forskellige sammenhænge m.m.
Skrifter: Typer, størrelser, vægt og retningslinjer for brugen af skrifter i forskellige kontekster.
Style guiden kan også indeholde retningslinjer for andre designelementer som fx billeder, pumper, ventiler, rør etc. – inklusive deres størrelse og placering.
Dette blogindlæg er det tredje og sidste i en serie, der sætter fokus på design af brugerflader til industrielle applikationer og ISA 101-standarden.
Du kan læse de to tidligere indlæg om designprincipper for brugerflader her:
Tænk på brugerne når du designer løsninger til industriel automation
og her:
ISA 101: En standard for design af brugerflader i industriel automation
Tilføj en kommentar