UI (Interface Essentials) – Brugergrænseflader

Grundlæggende er interface essentials de komponenter og principper der anvendes i design af brugergrænseflader (UI) – En brugergrænseflade findes i både fysisk form men også på f.eks. web. En blender har også en brugergrænseflade ligesom et website har en brugergrænseflade.

En brugergrænseflade defineres ved at den giver brugeren mulighed for interagere med systemet – det kan være knapper på en website men også på hardware f.eks. en mikroovn, en stemme kan også defineres som en brugergrænseflade i en butik.

En brugergrænseflade skal være brugervenlig, intuitiv og effektiv.

En god brugergrænseflade (UI) består af flere vigtige elementer, der tilsammen skaber en intuitiv og behagelig brugeroplevelse. En god UI tager højde for at brugere har forskellige evner og sikrer at alle kan bruge systemet uden problemer. Her er nogle af de vigtigste aspekter:

Retningslinjer for UI:

• Systemstatus
• Systemet skal tale brugernes sprog
• Brugerkontrol
• Konsistens og standarder
• Fejlhåndtering

Systemstatus

Feedback på brugerhandlinger: Når en bruger udfører en handling, som at klikke på en knap eller sende en formular, skal systemet give en form for feedback, som f.eks. en indlæsningsindikator.

Statusindikatorer: Brug af visuelle indikatorer som indlæsningsikoner, progressionsbjælker eller statusmeddelelser kan hjælpe brugerne med at forstå, hvad der sker i baggrunden. For eksempel, når en fil uploades, kan en progressionsbjælke vise, hvor langt uploaden er kommet.

Fejlmeddelelser: Hvis der opstår en fejl, skal systemet straks informere brugeren om, hvad der gik galt, og hvordan de kan rette det. Dette kan være gennem pop-up-meddelelser, farvekodede advarsler eller tekstbeskeder.

Opdateringsmeddelelser: Informer brugerne, når der er opdateringer eller ændringer i systemet, som kan påvirke deres oplevelse. Dette kan være gennem notifikationer eller beskeder i appen.

Responsivitet: Systemet skal fungere på forskellige former for enheder f.eks. pc, tablet og smartphone.

Systemet skal tale brugernes sprog

Brug af velkendte metaforer: For eksempel, en papirkurv-ikon til at slette filer, som minder brugerne om en fysisk papirkurv.

Naturlig og logisk rækkefølge: Information og handlinger skal præsenteres i en rækkefølge, der giver mening for brugerne. For eksempel, når man udfylder en formular, skal felterne være arrangeret i en logisk rækkefølge.

Konsistent terminologi: Brug af ord og sætninger, som brugerne er fortrolige med, i stedet for tekniske termer eller jargon. For eksempel, “Gem” i stedet for “Persist”. Der skal være ensartede designelementer og interaktioner på tværs af hele brugergrænsefladen som hjælper brugerne med at forstå hvordan de skal interagere med systemet.

Brugerkontrol

Fortryd og annuller: Brugerne skal kunne fortryde deres handlinger og vende tilbage til en tidligere tilstand uden problemer. For eksempel, en “Fortryd”-knap i tekstbehandlingsprogrammer eller en “Annuller”-knap i formularer.

Nødudgange: Hvis brugerne befinder sig i en situation, de ikke ønsker at være i, skal de nemt kunne afslutte den. Dette kan være en “Tilbage”-knap eller en “Luk”-funktion, der er let tilgængelig.

Bekræftelsesdialoger: Før brugerne udfører en kritisk handling, som at slette data, skal systemet bede om bekræftelse for at undgå utilsigtede fejl.

Konsistens og standarder

Visuel konsistens: Brug de samme farver, skrifttyper og layout på tværs af hele applikationen. Dette hjælper brugerne med at genkende mønstre og forstå, hvordan de skal interagere med systemet.

Funktionel konsistens: Handlinger, der udføres på samme måde, skal have samme resultat. For eksempel, hvis en knap med et bestemt ikon betyder “slet” ét sted, skal det samme ikon betyde “slet” overalt i applikationen.

Ekstern konsistens: Brug standarder og konventioner, som brugerne allerede kender fra andre applikationer. For eksempel, en “hamburger”-menu (de tre vandrette linjer) er en velkendt måde at indikere en skjult menu på.

Sproglig konsistens: Brug de samme termer og sætninger konsekvent. Hvis du bruger ordet “konto” ét sted, skal du ikke skifte til “profil” et andet sted for at beskrive det samme koncept.

Fejlhåndtering

Klar og præcis fejlmeddelelse: Fejlmeddelelser skal være skrevet i et klart og forståeligt sprog uden teknisk jargon. De skal præcist beskrive, hvad der gik galt, og hvordan brugeren kan rette fejlen. For eksempel, i stedet for at sige “Fejl 404”, kan man sige “Siden blev ikke fundet. Tjek venligst URL’en og prøv igen.”

Konstruktive løsninger: Fejlmeddelelser bør ikke kun informere om, hvad der gik galt, men også give brugeren en vejledning til, hvordan de kan løse problemet. For eksempel, hvis en bruger indtaster en forkert adgangskode, kan meddelelsen foreslå at nulstille adgangskoden.

Forebyggelse af fejl: Designet skal hjælpe med at forhindre fejl, før de opstår. Dette kan inkludere funktioner som automatisk udfyldning, validering af input i realtid, og klare instruktioner. For eksempel, hvis en bruger skal indtaste en dato, kan en datovælger hjælpe med at sikre, at datoen er i det rigtige format.

Visuel indikation af fejl: Brug visuelle signaler som farver, ikoner eller tekst for at gøre det klart, hvor fejlen er opstået. For eksempel, hvis et obligatorisk felt i en formular er tomt, kan det markeres med en rød kant og en advarselstekst.

Tilbageførsel af handlinger: Giv brugerne mulighed for at fortryde eller rette deres handlinger. For eksempel, en “Fortryd”-knap efter at have slettet en fil kan give brugeren mulighed for at gendanne filen, hvis de slettede den ved en fejl.

Typer af brugergrænseflader

• Grafisk brugergrænseflade (GUI): Dette er den mest almindelige type, hvor brugerne interagerer med visuelle elementer som knapper, ikoner og menuer -baseret på genkendelse f.eks. telefonsymbol = opkald, floppydisc = Gem og papirkurv = slet. Det er et dobbelt medium, da det kræver mus/tastatur for at ineragere.
• Kommandolinje-grænseflade (CLI): Brugerne interagerer med systemet ved at skrive kommandoer. Dette er ofte brugt af webudviklere og IT-professionelle.  Det er ofte i DOS man skriver kommandoerne.
• Menudrevet grænseflade: Brugerne navigerer gennem en række menuer for at udføre handlinger f.eks. pengeautomater. 
• Formularbaseret grænseflade: Brugerne udfylder formularer for at interagere med systemet, f.eks. onlineformularer.
• Berøringsbaseret grænseflade (NUI): Interaktion sker gennem berøringsbevægelser på berøringsskærme f.eks. på smartphones og tablets. Ansigtsgenkendelse er også NUI.
• Stemmestyret brugergrænseflade (VUI): Brugerne interagerer med systemet gennem stemmekommandoer f.eks. virtuelle assistenter så som SIRI eller Google. F.eks. siger man “Hey Google, spil Britney Spears” -> Systemet svarer “Spiller Britney Spears”
• Virtual Reality Interface (VRI): Brugerne interagerer med et virtuelt miljø gennem VR-headsets og kontroller f.eks. i VR-spil og simulatorer.
• Gestusbaseret grænseflade: Interaktion sker gennem fysiske bevægelser, som f.eks. med spillekonsoller såsom Nintendo Wii.
• WYSINWYG = What You See Is What You Get
• Natural Language Interface (NLI) nu og fremtidens it – AI.

Wireframes og brugergrænseflader (UI) er ikke det samme, men de er tæt forbundne i designprocessen

V