udtryk idéer, grænseflader og userflows visuelt

I mange sammenhænge giver det rigtig god mening at arbejde med at konkretisere idéer gennem visualiseringer af brugergrænseflader og sammenhænge mellem elementer, herunder userflow. Det gælder fx apps, spil og websites. Her er det en rigtig god idé at indlægge faser, hvor eleverne arbejder med begrebskort, skitser og prototyper undervejs i processen, så de får konkretiseret og testet deres idé på flere måder, før de går i gang med selve kodningen.

De tre metoder egner sig til forskellige faser i en designproces. Mens begrebskort er velegnede i starten, hvor eleverne afsøger et problemfelt for at kunne komme nærmere på og afgrænse problemstillinger, vil skitsen ofte være en første løs konkretisering af en evt. løsning på en valgt problemstilling. Efterhånden som skitsen forfines med detaljer vil den tage form af en decideret prototype. Nedenfor gennemgås kort om alle tre metoder.

Se evt. også siden om brugertests, som kan give idéer til, hvordan eleverne kan teste deres idé flere gange undervejs ved hjælp af netop begrebskort, skitser og prototyper.

Gå til Brugertest

Begrebskort er velegnede til at få overblik over komplekse problemfelter. Begrebskort minder om mindmaps, men indeholder også beskrivelser af, hvordan de forskellige begreber og ord hænger sammen. I videoerne nedenfor får du en kort introduktion til, hvad det er, og hvordan du laver dem. I video 2 benyttes desuden en liste over forbindelsesord. Det er en god idé at have sådan en, indtil eleverne er fortrolige med metoden.

Når først eleverne har fået rammesat den problemstilling, de vil arbejde med, skal de i gang med at finde på og designe løsninger. Her kan skitsering være et virkelig stærkt redskab i den indledende fase.

Skitsering er løsere end prototyping og har grundlæggende et andet formål. Det er først og fremmest et tænkeværktøj, hvor man afprøver forskellige idéer, laver om, udvider og måske ind i mellem helt forkaster en idé. Når der nogen gange tales om throw away prototyping, så refererer det altså ikke til prototyper, men derimod hurtige skitser, som man bruger til at tænke med og gerne smider væk, efterhånden som man får udviklet sin idé.

Dernæst er skitser et kommunikationsredskab, når man arbejder i grupper. Her kan skitser hjælpe eleverne med at eksternalisere idéer, som er svære at formidle rent mundtligt. Helt overordnet giver skitser også en visualisering af, hvordan idéens hovedelementer hænger sammen. Hvis der fx er tale om et website, vil en skitse fx vise de enkelte sider og hovedelementer, og hvordan de hænger sammen, altså hvordan en bruger kan gå fra en side til en anden (userflowet) ved fx at trykke på en knap.

I videoen her nedenfor ses, hvordan der kan arbejdes professionelt med (meget detaljerede) skitser og papirsprototyper. Det er selvfølgelig to professionelle designere, der demonstrerer, men elever kan sagtens arbejde på samme måde med begge elementer.

digital prototyping (hi-fi)

Der findes rigtig mange værktøjer til at lave digitale prototyper på. Nogle er gratis, mens andre tilbyder en gratis trial periode eller koster enten et engangsbeløb eller abonnement. Du kan læse om en række af dem på denne blog: top-10-prototyping-tools.

POP by Marvel giver mulighed for at importere papirprototyper og digitalisere dem, og er rigtig fin som videreudvikling af papirprototyper. App'en kan downloades her: https://marvelapp.com/pop/

Derudover kan du kigge nærmere på AppLab (se link under siden app- og spiludvikling), som er meget nemt at lave mockups i, og hvor eleverne kan arbejde videre med at kode enkelte elementer eller hele deres projekt efterfølgende.

Du kan også kigge på Justinmind, som giver mulighed for 30 dages full trial og derefter adgang til en mindre gratis version. I dette program er det ret let at lave flotte digitale prototyper, både til web og apps. Find programmet her: https://www.justinmind.com/