Jyllinge Skole

From rtgkomArkiv
Jump to: navigation, search

Workshop: Menneske-Maskine[edit]

  • 2016-01-11: VELKOMMEN TIILBAGE til MediaLab på RTG. Sidste gang prøvede vi kræfter med nogle af de basale værktøjer indenfor grafisk design. Det blev til en række rigtig fine characters:


<html>

<img src="http://rtgkom.dk/~jan/jyllinge/grp1.png" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp2.png" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp3.png" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp4.png" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp5.gif" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp6.png" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp7.png" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp8.gif" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp9.gif" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp10.gif" height="200"> <img src="http://rtgkom.dk/~jan/jyllinge/grp11.png" height="200">

</html>


Denne gang skal vi undersøge, hvordan man kan designe (ikke kode) grafikken på en app, så den bliver sjov og nem at bruge. Det handler med andre ord om det, man kalder "brugergrænseflader".....

Brugergrænseflade[edit]

Brugergrænsefladen er der, hvor mennesker møder- og interagerer med et system som f. eks, et computerprogram. Det er en vigtig og ikke altid lige let opgave at designe en brugergrænseflade, der gør det nemt for en person at forstå og benytte en applikation. Det kræver, at man kender noget til brugervenlighed, grafisk design og forskellige teknikker og måder at arbejde på, når man skal finde frem til den gode løsning. Det skal introduceres på denne workshop.

Tidsplan:[edit]

Planen for dagen ser ca. således ud:


9:00 - 9:10 Goddag

9:10 - 9:40 Oplæg og eksempler

9:40 - 10:00: Persona/Scenariobeskrivelse

10:00 - 10:15: Pause

10:15 - 10:30: Gennemgang og opsamling

10:30 - 11:15: Rough og flowchart

11:15 - 11:30: Gennemgang

11:30 - 12:00 Frokost

12:00 - 12:15: Oplæg om prototyping

12:15 - 13:00: Udvikling af papirprototyper

13:00-13:10: Pause

13:10 - 13:50: Afprøvning og optimering

13:50 - 14:00: Afrunding


Persona og Scenario[edit]

For at hjælpe sig selv med at holde styr på, hvem der skal bruge app'en (målgruppen) og hvad det helt nøjagtig er, den skal leve op til, bruger vi to teknikker: Persona og scenariobeskrivelse.

Persona er et detaljeret portræt af den typiske bruger. Man skal altså beskrive hvordan man forestiller sig denne person med forskellige opdigtede fakta (opdigtet men så realistiske, som muligt). Når du fremstiller og beskriver en persona skal du bl. a. have disse ting med:

  • navn
  • alder
  • bopæl
  • familieforhold
  • interesser
  • typiske hverdagsaktiviteter (vaner)
  • evt. holdninger og væremåde

Fremstillingen af din persona kan både være i ord og billeder


Scenario er så en beskrivelse af, hvordan du forestiller dig din persona bruger din app og hvad han/hun får ud af det. Scenariobeskrivelsen er en lille kort fortælling, hvor du gennemgår et forløb med din hovedpersons interaktion med appen. Her beskriver du hvad brugeren gør og hvilke opgaver han/hun får løst.

Scenariobeskrivelsen er en kort (ca. 10 linier) prosatekst (prosa: fortællende...). Det er ok at supplere med illustrationer.

Rough og Flowchart[edit]

<html> <img src="http://rtgkom.dk/~jan/billeder/rough.png" width="500" style="float:right; margin-left:7px;">
</html> Nu skal designet tage form og allerførst skal du prøve idéer af. Idéerne skal have lov at flyde så frit som muligt, men det også vigtigt at de noteres. Det gør du ved at fremstille en masse små hurtige skitser - roughs af hvordan du tænker app'ens forskellige sider kan se ud. Det er vigtigt at der tegnes hurtigt og at der laves mange. Sørg for at komme komme godt rundt i forskellige gode og dårlige indfald. Bagefter, når du sammen med gruppen sidder med bunken kan du og dine kammerater være kritiske og vælge ud....

....hvilken idé lever bedst op til persona/scenario?

Flowchart er et skema eller diagram over, hvordan appen hænger sammen funktion for funktion. Vi laver ikke et rigtigt dataflowchart, men snarrere et storyboard der viser de forskellige skærmbilleder og hvordan der navigeres mellem dem.

Prototyping[edit]

Når du (sammen med din gruppe) har besluttet dig for hvordan, appen skal fungere og hvad den skal indeholde, skal der laves den 1. prototype. En prototype er kort fortalt en foreløbig udgave af produktet, som giver mulighed for at afprøve, om idéerne og designet fungerer i praksis. Vi benytter os af en særlig form for prototype: Papirprototype

Teknikken er smart, fordi man ved hjælp af den relativt nemt og hurtigt kan finde ud af om, app'en giver mening.

<html> <iframe width="480" height="360" src="https://www.youtube.com/embed/GrV2SZuRPv0" frameborder="0" allowfullscreen></iframe>
<iframe width="640" height="360" src="https://www.youtube.com/embed/V8LNDqMIapY" frameborder="0" allowfullscreen></iframe> </html>


Bemærk, at man både kan udarbejde papirprototypen i hånden (tegning og udklip m.m.) og ved hjælp af grafiske værktøjer. Pointen er, at der ikke skal ofres store resourcer på arbejdet, da man jo skal afklare fejl og problemer ved sit design tidligt.

Hvis I når det, kan i prøve POP APP som er en fix lille app, der kan få jeres papirprototype frem på jeres smartphone eller tablet: https://popapp.in/

Test[edit]

Når du har en prototype, har du muligheden for at lave en afprøvning (det er faktisk derfor, man laver prototyper!) Når du tester (afprøver), handler det om at finde ud af om appen rent faktisk opleves ka anvendes som I havde forventet, da I lavede scenariobeskrivelsen. Derudover er der også nogle generelle hensyn der handler om brugervenlighed. Brugervenlig handler om 5 ting (hvis man spørger Jacob Nielsen):

  1. Learnability: Hvor hurtigt lærer man at at løse basale opgaver i app'en....?
  2. Efficiency: Når man har lært at løse opgaverne - hvor hurtigt går det så?
  3. Memorability: Kan man huske hvordan det fungerede, når vender tilbage til appen efter et stykke tid?
  4. Errors: Hvor mange fejl begår brugeren og hvor nemt er det at komme ud af en fejl?
  5. Satisfaction: Oplever man det som en fed app (er den "lækker at bruge)?

Ved at observere en, der prøver din papirprototype, kan du se hvordan det går med kriterierne ovenfor. Det kan være han/hun skal hjælpes lidt, og man skal også sørge for at stille brugeren nogle opgaver og få ham/hende til at "tænke højt"





<html>

<img src="http://rtgkom.dk/~jan/billeder/sketch-screen.png" height="250" style="float:right; margin-left:12px; border: solid 12px white;"> </html>

Workshop: Fra Blyant til Skærm[edit]

  • 2015-11-30:VELKOMMEN I RTG MEDIALAB!

Denne jeres første dag i MediaLab kommer til at gå med en workshop, hvor I skal prøve kræfter med nogle af de basale teknikker indenfor design til computerbaseret kommunikation. Overskriften, "Fra blyant til skærm" antyder, at I både skal arbejde med tegning i hånden og ved hjælp af grafikprogrammer. Målet med dagens arbejde er at designe og give liv til en "character":

Chararacterdesign[edit]

En character er en designet figur, der skal spille en rolle i f. eks. et computerspil eller en tegnefilm (Mario er en berømt en af slagsen). Det kunne også være den gennemgående karakter i et computerprogram, der gør, at man knytter sig til det og måske opbygger et personligt forhold til det. Det er en stor udfordring at designe en character, der kan vække følelser og identifikation - især hvis den f. eks. skal fungere gennem en lille skærm på en smartphone. På denne workshop skal vi prøve kræfter med de udfordringer.

Tidsplanen[edit]

- ser ca. således ud:

9:00 - 9:15 intro til skolen, dagen o.s.v.

9:15 - 10:00 tegneworkshop

10:00 - 10:15 pause

10:15 - 10:40 gennemgang, opsamling samt oplæg til characterdesign

10:40 - 11:30 designskitser

11:30 - 12:00 frokost

12:00 - 12:15 gennemgang og opsamling

12:15 - 12:30 introduktion til værktøj/software

12:30 - 13:45 rentegning og animation på computer

13:45 - 14:00 afrunding

Tegneteknik[edit]

Vi kommer til at øve os i at bygge form og udtryk op blandt andet ved at sammensætte grundfigurer. Det handler også om at få gang i blyanten på en måde, så der kommer liv og spændstighed i stregen. Det kan godt være lidt svært, men vi giver det nogle forsøg. <html>

<img src="http://rtgkom.dk/~jan/billeder/tegneeksempel.png" width="400">

</html> Meningen er, at I skal bruge nogle af disse grundteknikker til at tegne og udvikle en character.

Design[edit]

Ved hjælp af nogle af de tegneteknikker, der er blevet afprøvet, skal I designe en character ud fra et udleveret brief.

Værktøjer[edit]

Når jeres design skal rentegnes, kommer vi til at stifte bekendtskab med både bitmap- og vektorgrafik (det bliver forklaret).

<html>

<img src="http://rtgkom.dk/~jan/billeder/vektor.png" height="250">   <img src="http://rtgkom.dk/~jan/billeder/bitmap.png" height="250">

</html>

Vi kigger nærmere på programmerne Inkscape (som er et vektorbaseret tegneprogram) og Gimp (som er et pixel/bitmap-baseret billedredigeringsprogram). Begge disse værktøjer er gratis og open source d.v.s. du helt frit kan downloade, installere og anvende dem som du har lyst. Vi skal bruge dem til dels at rentegne vores design med og dels til at prøve om vi kan få liv i vores character.

Her får du en kort introduktion til Inkscape:

<html> <iframe width="480" height="360" src="https://www.youtube.com/embed/tspfFP8cGpA" frameborder="0" allowfullscreen></iframe> </html>

Når du har fået rentegnet dit design i Inkscape, skal du prøve om du kan gøre det "levende". Her ser du hvordan det kan gøres ved at bruge programmet GIMP:

<html> <iframe width="480" height="360" src="https://www.youtube.com/embed/ar8tidI2xL8" frameborder="0" allowfullscreen></iframe> </html>