GUI – Grundelementer i Grafiske Brugergrænseflader

GUI, UI, WIMP, WYSIWYG, post-WIMP osv er forskellige betegnelser for en grafisk brugergrænseflade og dens nærmeste familie. Menneskets interaktion med computeren begyndte ikke med lækre ikoner, glidende overgange og swipe-to-pay, men med terminalvinduer, kommandolinjer, indviklede tastaturgenveje, osv. Så opfandt nogen musen, internettet, WWW, touchscreen, osv, hvilket betyder, at meget af det digitale, som vi omgiver os med, foregår gennem en form for grafisk interface. Et user interface, kan bestå af mange typer elementer, og det er dem, du skal have styr på.

• GUI – Graphical User Interface / Grafisk brugerfalde eller grafisk brugergrænseflade:
  • En grafisk grænseflade, der formidler og præsenterer brugerens interageren med en computer.
  • Grænsefladen præsenteres på en skærm; bestående af tekst og grafik – dette kan manipuleres med fx en mus eller tastatur.
  • Et styresystem eller et program har en grafisk brugerflade – ofte fyld med små billeder= ikoner, vinduer og knapper som præsenterer mulige kommandoer og mulige funktioner
  • I dag er næsten alle digitale interfaces GUIs.

• UI – User interface
  • Interaktionen mellem menneske og maskine.
  • Kan være hardware og software (ikke forveksles med styresystemer)
  • Mennesker interagerer med en bestemt type maskine (smartphone, tablet, computer, software og systemet generelt)
  • Interface elementer inkluderer, men er ikke begrænset til:
    • Input Controls: afkrydsningsfelter, radioknapper, dropdown lister, listekasser, knapper, skifter, tekstfelter, datofelt
    • Navigationselementer: breadcrumb, skyder, søgefelt, pagination, skyder, tags, ikoner
    • Informative komponenter: værktøjstips, ikoner, statuslinje, meddelelser, meddelelsesbokse, modale vinduer
      Containere: accordeon

• NUI – Natural users interfaces
  • Specialiserede GUI’er, der opererer ved hjælp af talegenkendelse og bevægelsesdetektering.

• WIMP
  • WIMP står for “Windows, icons, menus, pointers”, angiver en interaktionsstil ved hjælp af disse elementer i brugergrænsefladen.
  • I et WIMP system:
    • Windows: Et vindue kører et selvstændigt program, der er isoleret fra andre programmer, der (hvis i et multiprogram-operativsystem) kører på samme tid i andre vinduer.
    • Icons: Et ikon fungerer som en genvej til en handling, computeren udfører (for eksempel udføre et program eller en opgave).
    • Menus: En menu er et tekst- eller ikonbaseret udvælgelsessystem, som vælger og udfører programmer eller opgaver.
    • Pointers: Pegeren er et skærmbillede, der repræsenterer bevægelse af en fysisk enhed, som brugeren kontrollerer for at vælge ikoner, dataelementer osv.

 

Hvorfor er ovenstående et godt eksempel på GUI?

• Man ser en helt masse ikoner, som repræsenterer mulige kommandoer og funktioner.
• Der er delt i bokse – der er afspil boksen, som har samlet musik, slides og film i én boks –> grupperet
  • Listekasser
• Informative komponenter: værktøjstips, ikoner, statuslinje, meddelelser, meddelelsesbokse, modale vinduer
• søgefelt
• Datofelt
• dropdown lister