10 huskeregler
til udvikling af industrielle brugerflader
Som arbejdende i industrien, er det ikke en mulighed at blive forsinket, eller lave fejl, på grund af et langsomt eller ikke brugeroptimeret interface. Vigtigheden i responstid og opbygningen af brugerfladen kan både være med til at minimere fejlprocenten og optimere effektiviteten for brugeren.
Oplevelsen af skærmen som betjening på et produkt, er ofte med til at definere tilfredsheden af produktet. Derfor er det vigtigt at kvaliteten og funktionerne på skærmen også afspejler kvaliteten og de gode funktioner som produktet der betjenes, indeholder.
Hos 3PART har vi i flere år arbejdet med at forbedre brugeroplevelsen af betjeningen. Vi har et stort kendskab til HMI standarden ISA 101, som har nogle vigtige regelsæt for udvikling af digitale skærme i industrien.
01
Tænker du over de farver du anvender til de forskellige funktioner? Bruger du virksomhedens identitets farver? Måske du bruger rød/grøn ved inaktiv/aktiv. Det vi oplever er, at mange glemmer at tænke over udfordringen med at adskille farverne fra hinanden. Det er vigtigt at bruge farver, der har tilstrækkelig kontrast ratio. Det vil sige, hvor stor kontrasten er mellem de farver du anvender ovenpå eller ved siden af hinanden. Man kan altid tjekke kontrasten på sit farveskema her.
Dine valgte farver skal have en kontrast ratio på over 4,5 og minimum AA allerhelst AAA til brug på udendørs skærme. Flere end vi måske lige går og tror, er farveblinde. Der er forskellige typer af farveblindhed. I illustrationen herunder kan du se hvordan rød, gul, grøn, orange, mørkeblå og lyseblå ser ud, hvis man er farveblind. Fælles for alle typer af farveblindhed er, at det kan være meget svært at skelne mellem grøn og rød. Så hvis I anvender grøn til god status, og rød til alarmstatus, vil en farveblind have meget svært ved at afkode det.
Skinner solen altid der hvor brugerfladen befinder sig, eller regner det ofte? Arbejder brugeren altid med handsker på? En vigtig faktor, der skal indtænkes under udviklingen af en brugerflade, er konteksten. Det har stor betydning om brugeren skal bære sikkerhedsbriller, der kan dugge, eller handsker, der stiller krav til størrelsen på knapperne.
Gennemsnitsalderen på brugeren. Ser du som udvikler måske lidt mere skarpt end de gør? Tænk også over om man dækker for en del af skærmen, hvis man kun bruger højre hånd til at navigere på skærmen. Det er derfor en god ide at lave forskellige brugsscenarier inden man starter udviklingen, så alle faktorer bliver husket gennem hele udviklingsforløbet.
02
03
På hvilken afstand skal din digitale skærm kunne aflæses? Måske er der nogle områder der er vigtigere at kunne læse på afstand end andre? Husk at tilpasse størrelsen efter det arbejde der skal udføres tæt på skærmen, og det der skal kunne aflæses på afstand. Tabellen herunder giver et indblik i hvilken størrelse din tekst minimum skal have. Husk at vind, vejr og vinkling af skærmen også har indflydelse på tekststørrelsen.
I dag står en digital brugerflade på et produkt sjældent alene. Ofte er supporten en del af udbyderens hjemmeside. Brugerfladen kan måske også fjernstyres fra et kontrolrum eller lignende. For at sikre den bedste brugeroplevelse, er det vigtigt at tænke i at have konsistens og ligheder mellem alle de punkter, hvor brugerfladen er i kontakt med brugerne. Sørg for at anvende de samme farver.
Placer navigationen på samme måde. Hvis en funktion ligger et bestemt sted på skærmen, skal det optimalt placeres samme sted i kontrolrummet. Ved at sørge for den røde tråd, samt holde en konsistent navigation, kan brugeren arbejde mere effektivt og ofte hurtigere når de anvender systemet.
I dag er vi vant til hurtige telefoner og internet, så hastigheden for hvor hurtigt systemer loader og giver feedback, er altafgørende for den gode brugeroplevelse. Når man refresher et system eller skifter mellem sider, forventer brugeren en load tid på maximum 1 sec.
De dele af systemet, der går under kritiske skærme, må have en load time på max 4 sec. (fx skærme, hvor man laver den helt stor opsætning og brugeren oplever at, her skal systemet arbejde meget for mig). Som udbyder af systemerne, kan man købe sig lidt tid til de langsommere systemer ved at give brugeren feedback. Gør opmærksom på at arbejdet er sat i gang, fx via animation i den knap der er klikket på, eller en load bar, der fortæller at systemet arbejder på sagen.
04
05
Placer navigationen genkendeligt. Hjernen arbejder i mønstre, så når man har den samme handling, skal den placeres samme sted. Hvordan går du tilbage eller slukker systemet? Det minimerer fejl og optimerer hastigheden, hvis man lader sig inspirere af hvordan de store spillere som alle kender, gør.
Placer for eksempel lukning af vinduer øverst i højre hjørne som vi genkender det fra Outlook og Windows. Hvis du har din menulinje i bunden eller toppen, må den ikke pga. pladsmangel eller andet, lige pludselig flyttes til siden. Den skal altid være hurtig at komme til. Når man som bruger navigerer i et system, kan det ligge på rygraden at komme rundt i programmet, hvis du bruger det dagligt. Men hvis brugerne er skiftende og man ikke anvender det dagligt, er det en god ide at holde brugeren i hånden, ved at fortælle hvor de befinder sig.
Der kan man anvende breadcrums eller pagination til tydeligt at vise, hvor brugeren er i systemet. Se eksemplerne herunder:
Jo mere white space – altså tom plads – du har på din skærm, jo mere plads har du til at fylde skærmbillederne ud med informationer og funktioner? – Forkert!
-Mere white space, betyder overskuelighed og det medfører at brugeren hurtigere kan orientere sig på det enkelte skærmbillede og dermed blive mere effektiv. Systemet vil blive langsommere at betjene jo mere indhold det har, fordi det tager længere tid at afkode alle informationerne. Derfor er det vigtigt med space. Hold dine skærmbilleder så simple som muligt.
HMI standarden fremhæver, at du kun må have én vigtig funktion pr. skærm. Hvis funktionen er noget som ikke må glemmes, skrives forkert eller kræver stor opmærksomhed, så er det vigtigt at skærmen ikke bugner med information, men at det som er vigtigt, har plads nok. Vigtigheden kan også tydeliggøres, ved at differentiere i størrelser på tekster eller baggrundsblokke.
06
Har du fremhævet de vigtigste informationer så de er nemme at overskue? Ofte kommer vi til at presse alt for mange funktioner og informationer ind på for lidt plads. Så mister brugeren hurtigt overblikket og det øger den tid brugeren skal bruge på at afkode informationerne. I nogle tilfælde er det fordelagtigt at bruge illustrationer og ikoner til forklaringer.
Det kan også ofte spare nogle kroner til oversættelse af tekster. Gennemtænk valget af de ikoner og illustrationer du anvender. HMI Standarden fremsætter at det er langt hurtigere at afkode elementer, hvis du har 2 koder du kan aflæse. Det vil sige at have både et ikon og en tekst.
Nogle ikoner har vi så mange steder i vores hverdag, at de ikke kræver en tekst, hvor det andre steder vil være langt mere effektivt, hvis der tilhører en tekst til ikonet. Test selv på de nedenstående ikoner. De giver måske alle mening for mig, men du kunne måske hurtigere forstå mit budskab, hvis jeg havde sat en tekst til de tre øverste ikoner (indhent, parametre, lancering), hvorimod de tre nederste ikoner er så ofte anvendt, at de forklarer sig selv.
07
08
Gør det tydeligt hvad, der er aktivt. Hvis der er funktioner på siden, som lige nu er inaktive eller hvis den givne bruger, ikke har adgang til alle funktioner, så sørg for at gøre det tydeligt. Enten ved at brugeren slet ikke får vist funktionen, eller tydeligt får vist at den inaktiv. Som fx ved at bruge grå toner eller transparens.
Hvis du har et system, der bruges med mus og tastatur, er det en lille ekstra ting, men med god oplevelse for brugeren, hvis en knap, fane eller tekst, der er mulig at klikke på, skifter karakter (gøres større/en bestem farve) når musen køres over funktionen.
Hvis brugeren altid skal kigge det samme sted efter alarmer, er det nemmere at opdage alarmen. Reserver gerne et område på brugerfladen, til beskeder og alarmer. Sørg for at være meget specifik omkring, hvornår det er en meddelelse om driften og hvornår det reelt er en alarm, der kræver en handling fra brugeren. Sørg for ikke at komme med for mange forstyrrende alarmer, som reelt kunne have været en dæmpet besked der ikke forstyrrer brugeren. Der findes en standard fra ISA for alarmer, den kan du læse mere om her.
Det er også vigtigt, hvordan man beskriver alarmer. Ønsker du, at det er alarmer som brugeren selv løser, så skal der mere end en fejlkode til. Sørg for at gøre plads i systemet til en manual og evt. løsninger til fejl visualiseret fx i videoer. Det gør, at driften hurtigere kan komme tilbage til normalt, fremfor hvis brugeren skal ind på et kontor og finde den manual der fulgte med til maskinen.
09
10
Er din brugerflade en touchskærm, er det vigtigt at overveje størrelsen på knapperne. De må ikke være så små, at du enten trykker på den ved siden af, eller skal trykke to gange for at få den aktiveret.
Området der skal rammes, skal minimum være 10 mm. Hvis du bruger en knap med tekst til en toggle knap, så skal den tekst der står på knappen være det som aktiveres når man klikker på knappen. Hvis du har en knap, der hedder auto/manuel, skal der derfor stå manuel, hvis systemet er i auto.
Hvis systemet er til touch brug, vil det ofte være nemmere at aktivere noget med toggle knappen, der ses som variant 4. Fremfor de små checkboxes og radiobuttons (variant 1 & 2).
