Workshop I – paper prototyping och personas

Notera att deltagande i denna workshop är obligatoriskt. Om du av någon anledning inte kan delta ska du ta kontakt med kursansvarig (se också instruktioner längst ned på denna sida).

PDF campus PDF distans

Tid och plats

För campusstudenter: Onsdagen den 8 april 09:15-12:00.  Vi samlas i Ny104 och fördelar sedan ut oss bland rummen Ny104, Ny110 och Ny111 för gruppövningarna.

För distansstudenter: Onsdagen den 8 april 13:15-16:00 via Adobe Connect:

Syftet med workshopen

Syftet med dagens workshop är att ni ska få prova på två mycket användbara tekniker för gränssnittsutveckling: paper prototyping och personas. Paper prototyping används för att enskilt eller i grupp spåna kring gränssnittsidéer och gränssnittsdesign på ett snabbjobbat och lättrörligt sätt. Personas hjälper utvecklaren att förstå användaren och hålla fokus på att applikationen är till för användaren.

Mål för workshopen

  • Att få insikt i nyttan med att använda paper prototyping för utveckling av applikationer och användargränssnitt
  • Att få insikt i nyttan med att använda personas för att hålla fokus på användarnas perspektiv vid applikationsutveckling
  • Att börja utforma din applikations gränssnitt för slutuppgiften genom användning av ovanstående två tekniker

Dokumentation/redovisning

Allt material skapas under tiden för workshopen. Framtaget material ska läggas ut på sidan för slutuppgiften senast 1 vecka efter workshopen – se instruktioner nedan.

Paper prototyping – kort beskrivning

Papper och penna används till denna workshop. Syftet med paper prototyping som teknik är att det ska vara snabbjobbat och skissartat för att undvika att man fastnas i en viss lösning för tidigt. Lägger man för mycket tid på grafiska detaljer, detaljer i layout och funktionalitet så är risken att man bygger fast sig i en lösning som inte är så användaranpassad och funktionell som den skulle kunna vara. Om man istället använder sig av snabba skisser som diskussionsunderlag för att mejsla fram sin funktionella, layoutmässiga och estetiska design så minskar man risken för den typen av fastlåsning. 

Personas – kort beskrivning

Personas är en teknik för att modellera användare. Den sammanfattar centrala egenskaper, attityder, behov och preferenser för användarna i den målgrupp man riktar sig mot. Man kan ha en persona, ett par eller många personas. Antalet beror på vilken/vilka målgrupper man vänder sig till och hur homogena/heterogena dessa grupper är. För att vara användbar behöver det vara en korrekt bild av dessa användare och man måste akta sig så att personan inte blir en karikatyr eller stereotyp. Det ska kännas som en riktig människa för att uppfylla sin funktion som är att hjälpa till att hålla fokus på användarnas behov och önskemål. Personan används för att att spåna kring funktionalitet och form och som ett kommunikationsredskap för att beskriva applikationens funktionalitet och syfte från ett användarperspektiv inom utvecklingsgruppen och också med parter utanför utvecklingsgruppen.

Arbete individuell/arbete i grupp

I de stegvisa instruktionerna nedan är det angivet att vissa moment ska göras individuellt och andra i grupp. Det innebär inte att ni inte får diskutera och samarbete även i de individuella övningarna. Tvärt om – det är bara positivt att ni gör så i framtagandet av pappersprototyper och skapandet av era personas. Skillnaden mellan momenten som är uppmärkta som individuellt respektive grupp är att för de individuella momenten är fokus på att producera något (en pappersprototyp eller en persona) som är specifikt för ert eget projekt och i gruppmomenten så är fokus på diskussion och att lära från varandra.

Särskilda instruktioner för distansstudenter

Särskilda instruktioner för distansstudenter finns längre ner på denna sida.

Instruktioner

Inledning 10 minuter – i helklass

Syfte: Beskriva upplägg och syfte för dagens workshop.
Upplägg: Efter inledningen så delas klassen in i grupper. Vi använder samma grupper som ni har i mjukvaruutvecklingskursen (för er som inte läser denna kurs parallellt så delas ni in i en egen grupp eller placeras i en av dessa befintliga grupper). Sedan följer man instruktionerna nedan för de olika övningarna. Lärare kommer att förflytta sig mellan grupperna och observera, svara på frågor och delta i diskussioner.

Prototyping

Steg 1.1 Paper Prototyping – rita upp gränssnittet 20 minuter – individuellt

Syfte: Presentera din applikations funktionalitet och hur gränssnittet i sin struktur och grundläggande form presenterar denna funktionalitet för användaren.

  1. Rita (penna och papper) upp skärmbilder som presenterar din applikations huvudsakliga funktioner. Stilen ska vara översiktlig och skissartad. Skissen ska presentera funktionerna utan för mycket detaljer så att fokus blir på grundfunktionalitet och layout, hellre än på grafisk utformning och detaljer. Vid behov kan korta beskrivande texter, pilar och liknande användas för att beskriva funktionaliteten. Formen är inte viktig utan bara se till att få ned något på papper!

Steg 1.2 Paper prototyping – första intryck 20 minuter – i grupp

Syfte: Använda paper prototyping för att presentera och därmed kommunicera din applikationsidé till andra (och därmed samtidigt till dig själv :-) ). Det skissartade utseendet hjälper till att hålla fokus på koncept och huvudstrukturer.

  1. Presentera i tur och ordning era applikationer för varandra med era pappersprototyper som presentationsunderlag. Det ska vara korta presentationer med fokus på de grundläggande funktionerna utan för mycket detaljer. Syftet är att ge snabb översikt för de andra i gruppen vad er applikation är tänkt att användas för och ge återkoppling kring era första intryck till varandra.
För distansstudenter: Ladda upp din skiss som bildfil – se instruktioner nedan i avsnitt Särskilda instruktioner för distansstudenter för hur uppladdning till Adobe Connect går till.

Personas

Steg 2.1 Personas – skapa personas 20 minuter – individuellt

Syfte: Beskriva användarna som kommer att använda din applikation för bättre förståelse för vem din användare är och för att kommunicera denna bild av användaren till andra.

  1. Välj ut 1 eller 2 bilder på personer som ska representera dina typiska användare. (Resurs – bildgalleri: http://photobucket.com/martinspersonas Har du en tydlig målgrupp räcker det med 1 bild. Har du flera målgrupper kan du välja ytterligare en till bild. Vi begränsar oss till högst 2 personas för denna övning, men använd gärna personas-tekniken för att fortsätta arbeta med tekniken för att analysera och förbättra ditt gränssnitt.
  2. Fundera kring vilka allmänna egenskaper som dina respektive personas har för att få en känsla för vilken typ av personer det är (så att det blir lättare att sedan leva dig in i hur de ser på din applikation). Fyll i egenskaperna i separat persona-mall (se nedan).
  3. Fundera kring vilka specifika egenskaper som är särskilt relevanta för din persona i relation till din applikation – skriv ned de viktigaste och/eller mest utmärkande i persona-mallen.
  4. Gör en bakgrundsteckning för vem din persona är. Eftersträva att göra denna beskrivning personlig så att man får en känsla för att det är en riktig person som den handlar om (ingen karikatyr eller steretyp). Fyll i i persona-mallen.
  5. Fyll i övriga fält i persona-mallen.
För distansstudenter:
Länk till persona-mallen för distansstudenter (välj ett av formaten):
Notera att du bara kan ladda upp dokument till Adobe Connect som powerpoint (ppt/pptx), pdf eller bildformaten jpg och png. Använder du doc- eller rtf-mallen så behöver du göra om denna till pdf innan du laddar upp (undvik att använda skärmdelning då det inte går att använda ritfunktionerna då). Du kan också ta en skärmdump och ladda upp resulterande bildfil.

Steg 2.2 Personas – presentera era personas för varandra 20 minuter – i grupp

Syfte: Låta de andra lära känna din/dina persona/personas och därmed få insikt i hur du ser på din målgrupp. Också att förändra personan för att göra det till en bättre representant för målgruppen genom den feedback som du får från de andra i gruppen.

  1. Presentera i tur och ordning era personas för varandra. Kom ihåg att målet är personan ska känna som en riktig person. Diskutera gärna personans egenskaper och huruvida det är en bra representation av målgruppen för applikationen. Uppdatera personan, lägg till eller ta bort saker utifrån synpunkterna som kommer fram.
För distansstudenter: Ladda upp din persona som powerpoint-dokument, pdf eller skärmdump (bildfil).

Redigering

Steg 3.1 Redigering – Redigering av pappersprototyper och personas 20 minuter – individuellt

Syfte: Att modifiera pappersprototyper och personas utifrån de intryck och den feedback som ni har fått hittills.

  1. Redigera dina pappersprototyper – kanske lägga till lite detaljer, ändra vissa detaljer eller ta bort vissa detaljer – och redigera din/dina personas på liknande sätt.

Persona Walk-through

Steg 4.1 Persona walk-through – Testa din design med personas 40 minuter – i grupp

Syfte: Att testa din applikationsidé och gränssnittskoncept genom att låta personan använda din pappersprototyp. Det är en gruppövning och ni ska utnyttja era olika perspektiv och erfarenhetsbakgrunder, men ni ska alla eftersträva att sätta er in i hur personan ser applikationen – att se applikationen (som den representeras av pappersprototypen) ur personans ögon. Målet är att få förståelse för användarens perspektiv och att identifiera förbättringspunkter i den konceptuella designen, i funktionsutbudet, i sättet som funktionaliteten presenteras för användaren och i interaktionsflödet (sättet som användaren går från funktion till funktion).

  1. Välj ut en av dina personas (om du har flera). Välj den som är den bästa representanten för din huvudsakliga målgrupp.
  2. I tur och ordning, gör en funktionsgenomgång – även kallat walk-through – där ni tillsammans guidar en persona genom funktionerna i din applikation. Ni ska alla eftersträva att sätta er in i personans roll och försöka se applikationen genom dennes ögon. En person i gruppen tar huvudansvaret för att guida personan genom applikationen – och denna person ska vara någon annan än du själv när det är din applikation som gås igenom (för att undvika den funktionella fastlåsning ditt utvecklar- och ägandeperspektiv kan ge). Trots att det är en person som tar huvudansvaret för att leda personan, så ska ni alla vara delaktiga – och aktiva – i denna övning genom att diskutera vad personan gör och hur denne kan tänkas uppfatta applikationen. Ställ gärna också frågor till personan. Den som leder personan ska använd berätta-högt metoden (talk-aloud method) som går ut på att man berättar högt vad man (i rollen som personan) tänker i varje steg. Övriga deltagare betraktar och kommenterar.
För distansstudenter: Ladda upp nya versioner av personas och skisser för användning vid walk-through övningen.

Reflektion

Steg 5.1 Reflektion resterande tid – i grupp

Syfte: Reflektera över vad teknikerna paper prototyping, personas och personas walk-through tillför ett utvecklingsprojekt och vad det har tillfört specifikt för din applikation.
Diskutera följande och anteckna det som gäller för din applikation (ska redovisas på sidan för slutuppgiften – se nedan):

  • Vilka förbättringar kan göras för att presentera funktionaliteten bättre för tänkt målgrupp?
  • Vilka förbättringar kan göras i applikationens funktioner (funktionsutbud)?
  • Vilka förbättringar kan göras för att förbättra interaktionsflödet för applikationen?
  • Vilka andra lärdomar kan du dra från övningen med personas och paper prototyping som kan ge förbättringar för användarupplevelsen?
  • Hur kan du använda dig av teknikerna paper prototyping och personas fortsättningsvis i ditt pågående projektarbete?

Dokumentation/redovisning på sidan för slutuppgiften

Syfte: Att presentera produkterna från workshopen.
På sidan för slutuppgiften ska följande presenteras:

  • Pappersprototypen
  • Framtagna personas
  • Sammanfattning (kortfattat – punktvis eller i löpande text) av dina reflektioner från den avslutande övningen i workshopen

Obs! Sammanfattningen ska finnas på kurssidan senast 1 vecka efter workshopen.

Särskilda instruktioner för distansstudenter

Workshop i Adobe Connect med break out groups

För distansstudenter så kommer denna övning att genomföras med hjälp av Adobe Connect. Vi kommer att använda oss av funktionen break-out groups för att dela in er i grupper (samma indelning i grupper används som för mjukvaruutvecklingskursen – och för er som inte läser den kursen parallellt så kommer ni att placeras i en egen grupp).

Break out groups fungerar på det sättet att värden för mötet (läraren) fördelar in deltagarna i separata mötesrum. När det blir dags för de gruppvisa övningarna så kommer ni alltså att fördelas i de olika grupperna av läraren. Läraren kommer att växla mellan grupperna, men du kan alltid skicka meddelanden till läraren oavsett vilken grupp han deltar i för tillfället.

Ljud i Adobe Connect för gruppövningarna

Det finns stöd för ljud (audio) och video (webcam) i Adobe Connect. Video är frivilligt, men ni ska använda er av ljudkommunikation för att prata med varandra. Läraren kommer att gå mellan de olika rummen och hjälpa till, svara på frågor och delta i övningarna och för att det ska fungera behöver ni använda er av kommunikationsfunktionerna i Adobe Connect (i motsats t ex att använda er av Skype för ljudet). Om ni inte får ljudet att fungera så kan chatten användas, men det är bara i undantagsfall.

OBS! Aktivera inte ljudet förrän förrän ni har fördelats i break out groups.

Om alla aktiverar ljud (och video) innan fördelningen i break out groups så kan det bli onödigt segt och bli fördröjningar i ljudet. För att aktivera och ställa in mikrofonen (och andra ljudinställningar), använd Audio Setup Wizard… under Meeting-menyn. Headset rekommenderas för bästa ljud in och ut. Om du inte har tillgång till headset så rekommenderas du att stänga av din mikrofon när du inte pratar för att undvika ekon och missljud.

Uppladdning av dokument och Whiteboard-funktioner

I och med att ni kommer att jobba med egenskapade dokument som skapas under workshopen så behöver dessa laddas upp till mötesrummet i Adobe Connect. Detta gör man genom att använda delningsfunktionen – Sharing pod. För att ladda upp dokument till sharing-podden gör man så här:

  1. Klicka på drop down-knappen i sharing-podden (den där det står Share My Screen)
  2. Välj Share document
  3. Ladda upp dokumentet
Man kan också klicka på snabbmenyn längst upp till höger i sharing-podden och sedan välja Share>Document för att komma uppladdningsfunktionen. Denna är enklare att använda när man ska växlar mellan dokument (när ni växlar mellan era olika dokument i gruppen).

Genom att klicka på Draw-knappen i övre listen på sharing-podden så aktiverar man whiteboard-funktionerna som gör att man kan rita och skriva ovanpå bilden som laddas upp. Ni ska aktivera dessa funktioner och rekommenderas att använda dem aktivt för att kommentera varandras uppladdade filer och även göra egna noteringar.

Typ av dokument som laddas upp

Ni kommer att skapa pappersprototyper och persona-beskrivningar i denna workshop. Dessa behöver delas ut till de andra i gruppen via sharing-podden. De behöver således laddas upp i sharing-podden i något lämpligt format. Det finns stöd för powerpoint (ppt/pptx), pdf och bildformat (jpg och png).

För personasbeskrivningen ska ni använda er av den mall som finns här på workshophandledningen. Den sparas lämpligtvis i PDF-format och kan sedan laddas upp i sharing-podden.

För pappersprototypen finns några olika alternativ. Grundtanken med paper prototyping är att man ska jobba snabbt och skissartat och det är svårt att få till det på annat sätt än att använda just penna och papper. För att få in skissen i datorn så behöver digitaliseras på något sätt. Har du en scanner kan du använda den. Annars fungerar det bra med att ta ett fotografi – med digitalkamera eller med mobilen. Om du av någon anledning inte kan använda någon av de här möjligheterna så kan du rita direkt i Photoshop, Illustrator eller annat ritprogram. Rita då på frihand med musen. Det viktiga är inte att det blir snyggt utan att du får med det centrala i gränssnittet vad gäller struktur och funktion. Tips: tänk på att när pappersprototypen ska digitaliseras så kan det vara bra att använda lite mörkare färg och lite grövre stift än man annars skulle behöva göra för att få bra kvalitet på den digitala kopian.

Tid för tekniskt strul

I och med att det är flera moment i hanteringen av break out groups, ljudinställningar och uppladdning av dokument som kan strula till det här i den här workshopen så kan det bli så att ni inte hinner använda lika mycket tid till varje moment som de föreslagna tiderna anger. Prioritera i så fall övningen med Persona Walk-through som är den centrala övningen för workshopen.

Instruktioner för dig som inte kunnat delta i den obligatoriska workshopen

Notera: Deltagande i workshop är obligatorisk och giltig anledning ska finnas om man inte deltar. Ta kontakt med kursansvarig om du inte kan delta. Saknas giltig anledning kommer detta att påverka betygsbedömningen för slutuppgiften.

Instruktioner: För dig som inte kunnat vara med på workshopen så ska workshopen genomföras på egen hand. Du ska skapa de produkter som efterfrågas för redovisningen – pappersprototyp, personas och reflektioner och lägga ut dem på sidan för slutuppgiften. Du ska utöver detta också beskriva din Persona walk-through (steg 4) i textform, alltså skriva ned det som din persona tänker högt i varje steg i applikationen. Det ska vara en detaljerad genomgång motsvarande åtminstone en A4-sida text.

Välkommen till CoursePress

en utav Linnéuniversitets lärplattformar. Som inloggad student kan du kommunicera, hålla koll på dina kurser och mycket mer. Du som är gäst kan nå de flesta kurser och dess innehåll utan att logga in.

Läs mer lärplattformar vid Linnéuniversitetet

Studentkonto

För att logga in behöver du ett studentkonto vid Linnéuniversitet.

Läs mer om att hämta ut studentkonto

Inloggning LNU