Aktivitet

Brugergrænseflader og interaktion

Brugergrænsefladen er den del af et digitalt artefakt, vi som brugere kan interagere med gennem forskellige input- og outputteknologier.

I nedenstående video bliver begreberne brugergrænseflader og interaktion udfoldet i forhold til teknologiforståelse.

Videoen kan bruges af læreren som inspiration til en gennemgang af begreberne for klassen, eller den kan ses sammen med eleverne.

© Styrelsen for Undervisning og Kvalitet

Undervisningsaktivitet: Animerede ikoner

I denne aktivitet kan eleverne først arbejde med at undersøge velkendte, animerede ikoner, som vises, når et program for eksempel indlæses eller ved download af filer. 

På baggrund af deres undersøgelser kan eleverne derefter designe deres egen version af et animeret ikon. Til sidst kan eleverne konstruere en model af deres egen version i programmet CodingLab på Skoletube.

Formålet er, at eleverne bliver bevidste om, hvordan ikoner er en del af den samlede brugergrænseflades stilistiske udtryk, og at de arbejder detaljeret med, hvordan forskellige ikoner kommunikerer til brugerne.

 

Målgruppe og tidsforbrug

Aktiviteten er målrettet mellemtrin og udskoling.
Dele af aktiviteten kan dog tilpasses til indskolingen. Se forslag under “Tilpasning”.

Anslået tidsforbrug: To lektioner. 
Hvis eleverne også skal konstruere deres egne designs i CodingLab, estimeres aktiviteten til at vare yderligere to lektioner. 

 

Tilrettelæggelse

Den første del af aktiviteten, som handler om undersøgelser og egne designs, kan gennemføres uden forkundskab. Den supplerende aktivitet, hvor eleverne skal konstruere deres designs i CodingLab, kræver viden om blokprogrammering. Du kan fravælge denne del, hvis dine elever endnu ikke har arbejdet med CodingLab eller lignende programmer.

Materialer

  • Computer/iPad og følgende programmer: CodingLab på Skoletube (eller Scratch online) samt billedsøgning
  • Analoge materialer: papir, post-its og tegneredskaber.
  • Eksempler på animerede ikoner i Scratch (CodingLab på SkoleTube)
    Eksempel 1
    Eksempel 2
    Eksempel 3
    Eksempel 4

 

Aktivitetens opbygning

Aktiviteten er opbygget i tre faser, hvor den sidste kan fravælges. Du kan indlede med at vise videoen fra begrebsguiden og drøfte indholdet fælles i klassen. Hvis sproget er en udfordring for dine elever, kan du stoppe centrale steder undervejs og sikre, at de har forstået indholdet.

1: Undersøgelse
Eleverne kan arbejde i mindre grupper og kan gennem billedsøgning på nettet undersøge forskellige animerede ikoner. Eleverne kan for eksempel søge på “loading icon”, da det giver mange velkendte resultater. De kan også prøve at søge på “dynamic icon”, “download icon” eller “animated icon”, som vil give lidt andre resultater.

Derefter kan eleverne forestille sig, hvilken type afsendere der kunne tænkes at benytte de enkelte ikoner. Måske signalerer nogle ikoner noget formelt og forretningsmæssigt, mens andre signalerer noget uformelt, der har med underholdning at gøre. 

Eleverne kan så vurdere, hvilke ikoner der fungerer godt, og hvilke der fungerer mindre godt. Hver gruppe kan dernæst udvælge:

  •  tre eksempler, de synes, er særligt gode.
  •  tre eksempler, de ikke bryder sig om.

Eleverne skal kunne begrunde deres valg. Måske handler det om æstetik, eller om hvor tydeligt der kommunikeres. Grupperne kan matches op parvist og fremlægge deres undersøgelse

2: Designopgave
Grupperne kan nu få til opgave at lave en utraditionel version af et animeret ”loading” ikon. Designprocessen kan stilladseres således:

  1. Start eventuelt med at vise de fire små eksempler, der er lavet i Scratch som inspiration (se links under ”Materialer”).
  2. Giv dernæst tre minutters tænketid, hvor alle elever hver især overvejer, om de kan finde på helt andre måder at illustrere ”loading” på, end dem, de netop har undersøgt via søgning på nettet
  3. I grupperne kan eleverne skiftes til at beskrive en idé, som ikke er sagt før. Hver idé kan skrives ned eller tegnes på en post-it, inden turen går videre. 
  4. ​​Grupperne kan derefter kigge på deres samlede idéer – er der mon nogle idéer, der kan grupperes, fordi de ligner hinanden? Måske kan de smeltes sammen til en idé?
  5. Grupperne kan opstille kriterier for, hvad der er vigtigt for dem i et nyt design, og rangordne disse.
    Det kan for eksempel være:
     
    1. Æstetisk
    2. Let at afkode
    3. Åbenlyst utraditionelt
    4. Synliggør processen (hvor længe endnu?)
    5. Underholdende
       
  6. Eleverne kan igen se på deres idéer og vurdere, om der er en idé, der særligt matcher deres kriterier? Hvis ikke, indledes en ny runde, hvor hver elev i gruppen efter tur kan fjerne en idé fra den samlede mængde idéer, indtil der kun er en tilbage, som gruppen kan arbejde videre med.
  7. Hvert gruppemedlem kan lave sin egen skitse over, hvordan idéen kan konkretiseres.
  8. Hver elev kan derefter fremlægge deres egen skitse over den valgte idé.
  9. Gruppen kan på baggrund af de individuelle skitser samarbejde om at lave en fælles skitse.

Aktiviteten kan afsluttes ved at matche grupperne parvis, så hver gruppe præsenterer deres fælles skitse for en anden gruppe. Her kan grupperne redegøre for, hvilket kriterium de har fundet vigtigst, og hvordan det kan ses i deres skitse. 

3: Konstruktion
I denne fase kan eleverne omsætte deres design til et digitalt artefakt ved hjælp af for eksempel CodingLab, som findes på SkoleTube. Da opgaven med at lave et animeret ikon fordrer, at eleverne både kender til de grafiske værktøjer, eventuelt brug af penneværktøjet, samt en del forskellige kodeblokke, er det vigtigt, at eleverne er fortrolige med CodingLab eller et lignende program.. 

De fire små eksempler, der linkes til under “Materialer”, kan eventuelt deles med eleverne, så de kan se, hvordan eksemplerne er bygget op, inden de selv skal konstruere deres egen version.

 

Udvidelser og forslag til videre arbejde

Aktiviteten kan udvides på følgende måder:

  • Eleverne kan arbejde på samme måde med andre brugergrænseelementer. Det kan for eksempel være lyde eller andre typer ikoner. 
  • Eleverne kan arbejde med at redesigne brugergrænseflader fra apps eller hjemmesider, som, de synes, er kedelige. 
  • Eleverne kan arbejde mere overordnet med analyser af hjemmesider ud fra for eksempel KISS-principperne og Gestaltlovene. Du kan finde mere information om disse på www.tek-lærer.dk under interaktionsdesign.

 

Tilpasning

I indskolingen kan du vælge at arbejde med animerede ikoner fælles på klassen. Her kan eleverne byde ind med, hvordan de tolker de forskellige eksempler, der fremkommer af en søgning på nettet: Hvad fortæller ikonerne, og hvornår bruges de? Kender eleverne andre eksempler?

Derefter kan eleverne tegne idéer til, hvordan man kunne lave ikoner på helt andre måder. Når eleverne har tegnet, kan alle tegninger hænges op. 

Til sidst kan klassen slutte af med en fælles snak om, hvorfor der som regel bruges stiliserede ikoner. I kan for eksempel tale om, hvad fordelen er ved at bruge let genkendelige ikoner.

 

Inspiration

På emu.dk findes 20 forløb, som er udarbejdet til forsøgsfagligheden teknologiforståelse. Videoen øverst på siden kan med fordel anvendes til at udfolde begreberne brugergrænseflader og interaktion, hvis du anvender et af de 20 undervisningsforløb. Det er særligt oplagt at komme ind på brugergrænseflader og interaktion i forbindelse med forløbene: 

 

Kreditering

Aktiviteten og begrebsguidevideoen er udviklet af Eva Petropouleas, CFU Absalon, Malte von Sehested, CFU KP og Mark Holler, CFU UCN.

Siden er opdateret af emu-redaktionen
Rettigheder:

Tekstindholdet på denne side må bruges under følgende Creative Commons-licens - CC/BY/NC/SA Kreditering/Ikke kommerciel/Deling på samme vilkår. Creative Commons-licensen gælder kun for denne side, ikke for sider, der måtte henvises til fra denne side.
Billeder, videoer, podcasts og andre medier og filer på siden er underlagt almindelig ophavsret og kan ikke anvendes under samme Creative Commons-licens som sidens tekstindhold.