Research Workshop

I denne workshop skulle vi få mere viden om metoder til researcharbejde. Vi var nødt til at lære at udføre feltarbejde gennem en research plan, og derfor skulle vi være i stand til at bruge de indsamlede data.

Research og data

Primær data / field research – dataindsamling der sigter mod at observere, interagere og forstå mennesker, mens de er i et naturligt miljø.

Kvalitativ metode –  indsamler oplysninger som søger at beskrive et emne hellere end at måle det. Tænk på indtryk, meninger og synspunkter.

Kvantitativ data – indsamler oplysninger fra eksisterende data og sender online-undersøgelser, online afstemninger, spørgeskemaer, hvis resultater kan afbildes i form af numeriske. Kvantitative data er struktureret og statistiske.

Sekundær data / desk research – data der er allerede eksisterer.

Intern og Eksterne –

3 felter for en researcharbejder Business, teknologi og bruger.

Business

  • Markedet
  • Klienter
  • Konkurrenter
  • Etc

Technology

  • Teknologier
  • Trends
  • Fremtid/nutid
  • Platform, meider, virkemidler

Users

  • Behov
  • Pains and gains
  • Drømme
  • Motivation
  • Mål
  • etc

Research Processen – overordnet

  • Definering af problem og research formål
  • Udvikling af en research plan
  • Indsamling af data
  • Analyse af data
  • Præsentations af findings

Refleksion:

I dette workshop har jeg lært at lave field research om teknologi hvor min gruppe skal interviewe folk i biografen. Vi har stillet spørgsmål på medarbejder og observeret bruger. Vi har også brugt KWHL til at skive alt hvad vi har fundet ud af efter udførte research. Research givet os bedre forståelse hvad for en teknologien blev brugt og hvor nemt brugeren anvende produktet.


Visual Proces

Design Thinking as design process. Designtænkning er en iterativ proces, hvor vi forsøger at forstå brugeren, udfordre antagelser og omdefinerer problemer i et forsøg på at identificere alternative strategier og løsninger, der måske ikke med det samme fremgår af vores oprindelige forståelsesniveau. Samtidig giver Design Thinking en løsning baseret tilgang til løsning af problemer. Det er en måde at tænke og arbejde på samt en samling praktiske metoder.

Det har fem faser, der hjælper med at navigere udviklingen fra at identificere en design udfordring til at finde og opbygge en løsning.

Discovery – vi få inspiration, lave research og indsamle information

Interpretation – Hvad er vores muligheder, hvordan løser vi problemet

Ideation – Vi generere ideer og forfin ideer.

Expirementation – Her laver vi wireframes og prototype og få feedback fra testpersoner.

Evolution – Hvis resultatet er godt så kommer vi at udvikler produktet hvis det ikke godt så kommer man tilbage til ideation fasen hvor vi kobler nye ideer.

Kilde: http://www.spencerauthor.com/what-is-design-thinking/

Divergent og Konvergent Tænkning

Divergent tænkning – er processen med at komme med nye ideer og muligheder – uden bedømmelse, uden analyse og uden diskussion. Det er den type tankegang, der giver dig mulighed for at være gratis, ‘gå stor’ og diskutere mulige nye måder at løse vanskelige udfordringer, der ikke har et enkelt / rigtigt / kendt svar.
Konvergent tænkning – er forbundet med analyse, bedømmelse og beslutningstagning. Det er processen med at tage en masse ideer og sortere dem, evaluere dem, analysere fordele og ulemper og tage beslutninger. Fokusere kun til det bedste løsning.

Kilde: https://psychologycompass.com/blog/creative/

Refleksion:

Vi har brugt design thinking as design process i vores Projekt 2 (Installations koncept HC Andersen Museum). For at guider os med vores projektet vi har brugt de fem faser på design thinking. Først har vi besøgt museum for at få inspiration, lave research om hvad for en teknologi de bruger og deres målgruppe. Efter det så brugte vi os Interpretation fasen hvor vi skal tænke på hvilken muligheder vi har. Men efter desk research for hvem besøgte musuem har vi fundet ud af at besøgende vil gerne være en del i udstillingen og vil have mere oplevelser end bare at kigge på og læse en lang tekst. Vi har generere mange ideer som muligt og kombinere det ting som giver mening. Men efter vi fik feedback så kommer vi igen for ideation fasen hvor vi kobler ny ideer. Vi kommer frem og tilbage i processen indtil vi har den bedste løsning til vores projekt. Vi har allesammen lært hvordan design thinking har brugt til dette projekt. Og nu har jeg bedre fortåelse af design thinking proces.

Usability Test / Brugertest

Brugervenlighedtest er en metode til evaluering af et produkt eller websted brugeroplevelse. Brugbarhedstest reducerer risikoen for at opbygge den forkerte ting. Det sparer penge, tid og andre dyrebare ressourcer. Det finder problemer, når de stadig er lette og billige at løse.

Fire trin til at udførelse en brugbarhedstest

  1. Opret en tidsplan
  2. Letter Testen
  3. Analysere sagsdata
  4. Opret testrapport

Her fik vi en opgave om at teste brugervenlighed af selvbetjeningsystem i kantinen i vores skole. Vi har to testpersoner som skal udføre en scenarie som de skal købe en bolle og bruge selvbetjeningsystem. Vi er alle tre i gruppen hvor en er moderator, observatorer og jeg optager en film og billeder. Det tager 15 min af det hele scenarie. Efter de to har gennemført scenarie spurgte vi om hvordan var deres oplevelse og var det tilfreds med systemet. De to testpersoner har forskellige feedback. En sagde at det svært at finde rundt i brugerfladen, overskueligt, dog lidt misvisende ift. “mærkater” . Feedback fra testpersoner

Testperson 1: Det er svært at manøvre rundt i selvbetjeningssystemet. Forventningen var, at det var lidt nemmere, samt at der var vejledning. Det er også uorganiseret og meget forvirrende layout.

Testperson 2: Overskueligt, men misvisende knapper og dårligt layout. Forventningen var at det bare fungerede. Synes at det fungerede, bortset fra mærkaterne.

Forbedringer efter feedback: Layout, knapper, skannings ikon (MobilePay), farveskema, mere æstetik. “Total”-knappen ændres til “Betal”

Refleksion:

I dette opgave fik vi teste mange forskellige ting. I min gruppe fik vi at teste brugervenlighed af selvbetjeningsystem i kantinen i vores skole. Vi har to testpersoner som skal udføre en scenarie. De skal købe en bolle og brug selvbetjeningservice. En har det svært ved at betal fordi han har dækket mobilepay scanningen med sin tallerken. Og den anden har udført scenarie fint. Vi fik feedback fra testpersonerne som sagde at deres system var meget forvirrende og uorganiseret. På baggrund af feedback ved vi nu hvad skal forbedres i selvbetjeningsystem.

Foto Opgave

Jeg er ikke særlig god til at styr kamera men vi tager mange billeder som jeg kan vise her og hvordan det ser ud efter redigering og manipulering af billederne.

Original Foto

Figur 1,2,3,4,5: Portrait , landscape og produkt billeder taget i UCL Seebladsgade, Odense 22 November 2019

Processen:

Vi var tre i gruppen hvor som udgangspunkt bruge Canon EOS 7D kamera til at optage portræt, landscape og produkt billeder. Nogle billeder vi havde taget var varmt og koldt. Det vil sige at varme giver mere rød og gul og det kolde farver giver blå og turkis. Vi havde også taget noget mørke billeder fordi lys virkede ikke nogle gange. Og vi har prøvet at tage billeder med focus på, så billederne ser centreret og ikke sløring.

For at optage gode billeder skal vi lære at tage billeder med manuelle indstillinger; blænden, lukketid og ISO’en. Det her påvirker ens fotografi. Men jeg mangler stadig en forståelse i dette område.

Blænden: Indstillingen på kameraet som justerer mængden af lys.

Lukketid: Er mængden af tid hvor kameraet er åben og lukke lys ind, hvor billedet bliver optaget.

ISO: Er Billedsensoren.

Resultaterne efter redigering af billederne.

Figur 1,2,3,4,5: Redigering resultat af Portræt , landscape og produkt billeder taget i Bjørnemosevej 108, Odense 28 November 2019.

Refleksion:

Jeg vil gerne blive bedre med at tage gode billeder i fremtiden. Fordi jeg elsker også at tage billeder speciel når vi er i udlandet eller kigger på naturen.

I forbindelse med denne opgave har jeg i hvert fald lært at redigere og manipulere billeder. Jeg har brugt Adobe Lightroom Classic for at redigere billederne’s lys, farve, effekts, detail, osv. Hvis jeg ønske at mine billeder bliver mere lys så justere jeg light indstillinger. Eller effekts og hvis jeg vil ændre farve så justere jeg color indstillinger.

Jeg ønske mig at mine billeder bliver lysere i forgrund og mere mørkere i baggrund. Det derfor jeg justere light stillinger til black og white. Jeg har også brugt effekt til at min portræt har en balance mellem forgrund og baggrund. Jeg har ikke brugt photoshop så meget. Men jeg leger med billederne når få jeg tid.

Program

Adobe Photoshop, Adobe Lightroom, Kamera: Canon EOS 7D

Animationsopgave

Jeg brugte illustrator til at tegne mit story board. Først brugte jeg en cirkel til hovedet. Og derefter en cirkel i øjnene og munden. Jeg brugte tekst til at skrive og firkantede til fotografiet.

My Story Board

Figure 1: My Story board using illustrator taken at Bjørnemosevej 108, Odense, September 15 , 2019.

Animate CC

Jeg lavede en simpel animation. Jeg brugte et symbol til at opbygge et ansigt i. Vælg for eksempel -Insert-ny symbol-head og lav et nyt symbol med et øje og mund også. Derefter satte jeg mit symbol hoved på det aktive lag og tilføjede øjne og mund. Fra venstre indsætter jeg en nøgleramme til et sekund og skaber en mellemlinje for øjnene. Nu ruller øjnene bare. Bagefter fik jeg munden til at åbne(brugt free transform) og sige haaaaaalooooo med bagrund lyd.

Billedet hopper bare frem og tilbage. Jeg brugte motion tween for det billede.

Filer til Animation

Her er de filer som projektet består af:

  1. Animate kildekode filen.
  2. Html dokument med animationen.
  3. Javascript fil med javascript koden.
  4. Lyd filen i mp3 format.
  5. Billeder i animationen.

Program

Adobe Illustrator, Adobe Animate, Visual Studio code and Audacity

Animation Workshop

I have used timing principle in my animation. I used illustrator to draw my animation. And I choose to used my logo (for now) to animate with the circles. I suppose to animate a circle that looks like a button but I changed my mind. Because button gives more excitement of what will gonna happen next when you pressed the button but then I realized I do not have enough time to do some more spritesheet. Thats why I made a circles of two with different sizes and looks like its turning around til it reaches the end (littleplay logo). To be honest I have a problem with my animation at first because I forgot to check “use artboard” when I export my drawings.

Here is my Storyboard

Figure: 1 My story board image taken at UCL Seebladsgade Odense, November 29, 2019.

It was actually easy to do the drawings because I have the guides and the right sizes of my spritesheet. But the one that took my time was “what” and “how”. What means, what should I animate that satisfies me and my viewers? At first I was thinking to animate a flower that blooms. It could look very realistic but then I came to “how” question. Thats why I have changed my mind many times until I ended up with circles that goes round. I actually calls it “life goes on with my logo at first and in the end”.

About the code, I have a class named sprite_circle. My drawings has 400px width and 400px height each sprites. I used background property for my image for my exported drawings from illustrator and no repeat. No repeat means it shows only one image and no padding. The animation lasts for 3 seconds with a 12 steps then starts over again endlessly (infinite).

My keyframes only shows how my animation play it part on my website. It has a 0% background position with 0px; and 100% background-position with -4800px. This means that all spritesheets shows only on one place. I took the number of -4800px from my artboard size from illustrator.

My Animation Links http://littleplay.dk/animation_with_css/final_result/logo_animation.html

Program

Adobe Illustrator, Visual Studio code and Filezilla

HTML5 & CSS

Opgave

  1. Opgaven består I, at vi skal lave et lille website, der inkluderer en hovedside/forside og mindst 3 undersider.
  2. Der skal være en menu på hver side, så alle sider hænger sammen som et website – se p. 266 i grundbogen
  3. Websitet skal indeholde billeder, tekst, overskrifter, forskellige titler til hver side, og det skal styres af et eksternt css.
  4. Du skal uploade dit website til din server. Og bagefte afleverer du linket til forsiden på ItsLearning.
  5. Websitet skal bruge html5 struktur elementer (se i din bog p.100 ff eller spørg Google, hvis du er i tvivl;-) )
  6. Alle sider skal validere – https://validator.w3.org/
  7. Alle sider skal validere – https://validator.w3.org/

Links til min lille website

  1. HTML WEBSITE

Reflektioner:

Når man lave kode er det vigtigt at man skal følg regler til alle elementer man bruger. F.eks Hvis der er H1,H2 så skal man ikke lave det om som H7,H8 eller p1,p2,p3. Så får man fejl i sin side. Det er nemt for mig at lave kode med HTML og css. Hvis jeg sidder fast så finder jeg løsning fra nettet. Det hjælper mig rigtig meget. For mig er det ikke svært at lave kode. Men hvis der er en fejl som jeg kunne ikke se så er det en kæmpe problem. Fordi i html lille fejl eller stor fejl det er det samme problem, den side virker ikke. Især når man skal uploade den til din server. Det er vigtig at huske, tjekke hvor dine filer ligger før man uploade den filer til serveren ellers kunne du ikke finde den. Det sjov ting er at når jeg lave kode og det virker det giver glad men hvis det ikke fungere så er det bare hell. Det derfor man skal altid tjekke sin tags hvis den er lukket, eller du har glemt at gem den osv…

Prototyping Workshop

Dating app for børn

Concept: Legeaftale

Institutionsbaseret app:

En app der gå ind under f.eks. en børnehave. Man skal være meldt ind i børnehaven, dermed opstår der et sikkerhedsnet der gør at det ikke er alle fra det offentlige som har adgang til app’en (hvilket der kunne opstår problemer ved). 

Formål:

Er at lave et system hvor der kan arrangeres legeaftaler inden for børnehavens grænser, men potentielt udenfor børnehave tiden. Så i stedet for at aftale en legeaftale i børnehaven, så kunne man gøre det over app’en hvor alle forældre fra børnehavens telefonnumre allerede står på.  

Legeaftale-Appen

Features

  1. børns profil
  2. rating
  3. interreser
  4. særlige hensyn
  5. familie tab (familie oversight)
  6. kalender

Page 1: Find din institution

  1. logo
  2. search-bar

Page 2: Login screen

  1. username/password
  2. checkbox:husk mig
  3. login

Page 3: Profilopsætning barn

  1. navn
  2. alder
  3. postnummer
  4. særlige forhold og hensyn
  5. interrese etc.

Prototype links

  1. Her er linket til Wireframe 
  2. Her er linket til Prototype

Reflektioner:

Vi har valgt at lave en dating-app til børn, fordi vi troede, at den ikke var opfundet endnu, og det er nyt for forældrene og institutionen. Dating-appen til børn er sikker at bruge til både forældre og børn, fordi de oplysninger, vi får, er forbundet fra børneinstitutionen. Vores øverste prioritet er børnesikkerheden ved at bruge vores app, så ingen “outsiders” kan bruge vores app, og mest af alt er det kun forældre, der kan logge ind.

Vi var ikke hel færdig med prototypen fordi de tre andre var til Hamborgtur. Jeg kunne ikke fortsæt fordi vi var jo fire i gruppe og det vigtig for mig at høre hvad de andre siger og hvad for en logo vi skal bruge så nogen ting. Det derfor prototypen er ufærdig. Men det er nemt at lave det. Det eneste udfordring var vi kunne ikke beslutte os hvad for en logo vi skal bruge til vores app.

Gruppe: Frederikke, Edna, Casper, Mathis

Typography

Mens jeg kørte til Babysam tæt på rosengårdcenteret så jeg denne reklame undervejs. Det fanger min opmærksomhed meget hurtigt på grund af det er ikke så tydeligt at læse noget tekst.

Figure 1: Reklamer ved rosengårdcentret taget i Ørbækvej 75 , Odense, September 28, 2019.

Mens jeg kørte til Babysam tæt på rosengårdcenteret, så jeg har denne reklame undervejs. Det var min opmærksomhed meget hurtigt på grund af teksten var ikke så tydeligt at læse.

Design og Typography

Normal Reklame

  1. Den første ting, der fanger mit øje, var den hvide baggrund af tallet 34 og derefter de ekslusivt i Normale tekster.
  2. Den næste ting var de lodrette tekster og de hvide streger.
  3. Margen er ikke lige og for meget  unødvendige hvide streger.
  4. De brugte for mange skrifttyper og har et dårligt hierarki.
  5. Uorganiseret information.
  6. Den normale virksomhed antager at være normal i alle vinkler, men jeg synes, deres reklame skal forbedres i typografi og design.

Forslag til Forbedringer

Normal Reklame

  1. Brug en simpel fonts til overskrift og brødtekster for nem læsning.
  2. De hvide baggrunde skal passe til nummeret 34 og de eksklusivt i Normale tekster.
  3. Fjern de hvide streger.
  4. Lodret tekst skal ændres til vandret for nem læsning.
  5. Margenen på den blå baggrund skal være lige.
  6. Brug et logo ad gangen.
  7. Fjern overskydende tekster, der ikke er relevante.
  8. Gør oplysningerne mere tiltalende.
  9. Organiser oplysningerne i ret sted.

Reflektion:

Typografidesign er meget afgørende at bruge. Du skal kende dit formål, inden du vælger den rigtige typografi af dit produkt. Men selvfølgelig betyder størrelserne også noget, og det er det også med leading, kerning og tracking. Og sans serif-skrifttyper, der normalt bruges af mange til at lave websider, fordi det er let for brugerne at læse en tekst. Men serif ser godt ud i udskrivning af fx-reklamer, flyers osv. Ikke alle skrifttyper passer til ens formål. Så overvej at finde den rigtige typografi til dit produkt, så dine brugere forstår, hvilken besked du sender.