UX/UI handlede om brugerforståelse i form af research, sketching, idéudvikling og brugertests for at kunne træffe designvalg baseret på brugerindsigter. Her blev vi også introduceret til Figma, hvor vi arbejdede med moodboard, wireframing, mock-ups, styletile, og prototyping.
Mit styletile for den japanske UNIQLO, som jeg designede i Figma.
Den første opgave havde fokus på research og styletile. Opgaven bestod i at vælge en eksisterende, kendt hjemmeside og analysere dens visuelle udtryk og udarbejde et styletile ud fra det.
Jeg valgte UNIQLO, dels fordi jeg var interesseret i at arbejde med en japansk hjemmeside, men også fordi den designmæssigt er en af mine absolutte favorit¬sider.
Først foretog jeg en analyse, hvor jeg især lagde mærke til, hvordan Uniqlo bruger farver strategisk. Når produkter er på tilbud, anvender de en kraftig rød farve for at skabe blikfang.
Derudover bruger de sorte knapper som stærk kontrast til den primært hvide baggrund, når de ønsker at fremhæve bestemte handlinger. I andre tilfælde anvendes hvide knapper, for at holde det minimalistisk, så de ikke stjæler fokus fra herosektionen. Herosektionen fungerer som det primære fokuspunkt og bruges til at fremhæve Uniqlo’s brand, design og stil.
Jeg lavede mit styletile i Figma, og forsøgte så vidt som muligt at fange mine observationer på mit styletile, så de afspejler de visuelle greb og designprincipper, jeg identificerede under analysen.
Først og fremmest blev jeg introduceret til Figma. Herunder brug af auto layout, assets og generel navigation i programmet.
Ved at udarbejde styletile efter det eksisterende design, eller med andre ord vende processen på hovedet, fik jeg en bedre forståelse for, hvordan elementerne i et styletile fungerer som byggeklodser i designprocessen. Jeg blev dog også opmærksom på, at styletiles, som er statiske billeder, kan have svært ved at fange det fulde udtryk på mere dynamiske og videografiske websites som Uniqlo.
Lo-fi Prototype af siden om japanske skrifttegn. Klik
her
for at gå til siden.
Vælg fit-width og hide UI for den bedste oplevelse.
Selve opgaven gik ud på at lave en hjemmeside ud fra et emne der interesserede os. Vi skulle principielt gå fra idé til en fungerende hjemmeside. Det vigtigste var dog de arbejdsprocesser og overvejelser vi havde op til udviklingen af prototypen.
Vi skulle indlede projektet med en rapid ideation, hvor jeg på kort tid skrev en række forskellige idéer med. Efterfølgende udvalgte jeg de mest relevante idéer og vurderede fordele og ulemper ved hver enkelt. Via denne proces valgte jeg at arbejde videre med en hjemmeside om at lære Kanji.
Rapid ideation og idéudvikling til min prototype.
Herefter udarbejdede jeg et mindmap, hvor jeg udforskede alle relaterede idéer til en hjemmeside med mit emne. Baseret på egne interesser, besluttede jeg at jeg ville lave en side hvor man kan lære de japanske skriftsystemer.
Billede af mit mindmap over koncepter og idéer til hjemmeside, der relaterer sig til emnet "Kanji learning website".
Designprocessen blev påbegyndt med en grov skitse, som efterfølgende blev videreudviklet til en Lo-Fi prototype.
Jeg testede herefter denne prototype på tre personer ved hjælp af en think-aloud-test, med fokus på funktionalitet og forståelighed i sidens opbygning. Testresultaterne viste, at layoutet generelt fungerede tilfredsstillende, men at det ikke var tydeligt for brugerne, hvad de skulle gøre på siden hvor man valgte imellem de tre skriftsystemer, eller hvor de forventedes at starte. Derudover havde flere testpersoner vanskeligt ved at finde F.A.Q.-sektionen. Nogle ting at tage med mig til videreudviklingen af den endelige hjemmeside.
Efterfølgende lavede jeg moodboards ud fra nøgleordene simpel og autentisk, som var nogle af de målsætninger for min side, som jeg have fundet frem til via min research. Det ene kan ses herunder.
Moodboard ud fra nøgleordet: autentisktil hjemmeside.
Jeg udviklede også vektorgrafik i form af et logo, og valgte fonte der passede til hinanden, ved hjælp af FontJoy. I næste del af siden om Content, dykker jeg mere ned i min arbejdsproces, når jeg designer logoer.
Mit logo. Siden fik desuden navnet "Kotoba", som betyder "ord" på japansk.
Herfra kom jeg ikke rigtigt videre. Researchfasen tog overhånd og projektets tekniske omfang blev væsentligt større end jeg havde regnet med. En fuld implementering af min vision ville kræve mere end 2000 individuelle HTML-sider med forklaringer til hvert enkelte skrifttegn. Dette betyder i bund og grund, at jeg kom til at flytte mit fokus væk fra UX/UI, og fokuserede for meget på kvaliteten af mit indhold som læringsmateriale. Selvom jeg arbejdede med GitHub og versionsstyring, blev projektet ikke færdigudviklet, og jeg har derfor valgt at holde mit repository skjult.
Jeg lejede med idéen om at skifte emne. Her var jeg både inde over matcha og tennis. Se gerne mit andet indhold fra siden om Content for kort at se nogle af mine projekter.
I forløbet blev jeg mere eller mindre helt komfortabel med Figma, og kan forholdsvist let udarbejde alt fra moodboard, styletile til prototype.
Det mest udfordrende for mig var helt sikkert researchfasen og det at afgrænse mit ambitionsniveau. Det ved researchfasen der gav mig flest problemer, var spørgsmålet om hvornår resultaterne var “gode nok” til at kunne danne grundlag for hvordan jeg designede mit indhold.
For eksempel gav spørgsmålet om at finde den ”ideelle” måde at lære japansk på mig mange problemer. For overhovedet at kunne konkludere noget her, der ikke bare var baseret på mavefornemmelse og egne erfaringer, tænkte jeg at jeg burde inddrage forskning fra kognitiv psykologi, pædagogik og andetsprogstilegnelse. Det kunne f.eks. være studier i spaced repetition, visuel genkendelse versus aktiv genskabelse, samt hvordan motorisk læring påvirker indlæring af skriftsprog. Derudover ville jeg gerne have brugt længere varige studier og større kvantitative datasæt til at sammenligne forskellige læringsmetoder over tid, for at kunne måle på en reel læringseffekt. Men alt dette arbejde lå uden for opgavens tidsramme og omfang, så det var svært for mig at finde en balance mellem ”ordentlig” research og realistiske rammer for et studieprojekt, hvor formålet i højere grad var at træffe informerede designvalg og at få styr på de forskellige værktøjer.
Af det lærte jeg, at research ikke kun handler om at finde det perfekte eller endegyldige svar, men også om at arbejde inden for realistiske rammer og være bevidst om sine metoders begrænsninger. Til det kan man sige, at jeg har fået indsigt i at begrænset research kan være tilstrækkeligt til at lave en øvelse som denne, så længe man er tydelig omkring sine antagelser og afgrænsninger.
En løsning på problemet kunne f.eks. sagtens have været at acceptere, at det endelige produkt ikke blev fuldt færdigudviklet, og i stedet fokusere på at udarbejde et begrænset antal eksempelsider, som demonstrerede strukturen og designet. På den måde kunne jeg bedre have øvet det essentielle i forløbet.