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).
Tid och plats
För campusstudenter: Torsdagen den 7 maj 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: Torsdagen den 7 maj 13:15-16:00 via Adobe Connect:
Syftet med workshopen
Syftet med dagens workshop är att ni ska pröva på hur man kan använda sig av checklistor för att analysera sitt eget och andras gränssnitt i avsikt att identifiera förbättringspunkter. Checklistorna hjälper er att betrakta ert (och andras) gränssnitt ur olika perspektiv och genom att fokusera på ett perspektiv i taget att gå på djupet i analysen av gränssnittets layout, struktur, estetik, funktion och användarupplevelse.
Mål för workshopen
- Att få insikt i nyttan med att använda checklistor för att identifiera förbättringspunkter
- Att få insikt i hur olika de perspektiv som tas upp bidrar till att skapa en bättre helhet och en bättre användarupplevelse
- Att identifiera förbättringspunkter för ditt gränsnitt
Dokumentation/redovisning
Identifierade förbättringspunkter för varje steg samt sammanfattning av reflektion ska läggas ut på sidan för slutuppgiften senast 1 vecka efter workshopen – se instruktioner nedan.
Checklistor – kort beskrivning
Checklistor hjälper oss att strukturera vår analys av vårt gränssnitt. De hjälper oss att fokusera på en del i taget. Givetvis är det viktigt också att titta på helheten – på helhetsupplevelsen. Det är alltid helheten som möter användaren av ett gränssnitt – och det är därför helheten är det som är det viktigaste. Men genom att medvetet välja att fokusera på en del i taget, så kan man gå på djupet på just den delen och identifiera förbättringspunkter som man annars kanske hade haft svårt att hitta. För varje identifierad förbättringspunkt behöver vi dock ställa oss frågorna: 1) kommer detta att bidra till en bättre användarupplevelse (helhet); och 2) Är det värt den extra tid och resurser som det kommer att krävas att göra den förändring det innebär. Genom att använda checklistor för att fokusera vår analys så identifierar vi potentiella förbättringspunkter, men ansvaret är alltid vårt som utvecklare att avgöra om det är en förändring som bör göras.
Inte tillämpbart på mitt gränssnitt…
I och med att ni har många olika typer av applikationer så kan det vara så att en del punkter på checklistorna inte är tillämpbart för just ditt projekt. Fokusera i så fall på de punkter som passar på ditt projekt och hoppa över de övriga. Det kan också vara så att du för delar (eller hela) av gränssnittet inte kommit så pass långt i din design av gränssnittet att det går att bedöma vissa saker. Välj inte bort punkter för lättvindigt dock. Fundera igenom ordentligt på vilket sätt varje punkt kan vara relevant för ditt projekt innan du väljer bort någon av dem.
Arbete individuellt/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 samtliga övningar. 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 och i gruppmomenten så är fokus på diskussion.
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.
Fokus på överordnad struktur
Steg 1.1 Överordnad struktur – diskussion kring begrepp 10 minuter – i grupp
Syfte: Konkretisera vad de olika listade begreppen innebär för att fördjupa er insikt i på vilket sätt de bidrar till användarupplevelsen.
- Diskutera i tur och ordning för vart och ett av nedanstående begrepp vad de innebär och på vilket sätt de påverkar användaren och dennes användarupplevelse – på vilket bidrar det till en positiv användarupplevelse när gränssnittet är i balans, är symmetriskt, regelbundet, förutsägbart, sekvensiellt uppbyggt och enkelt; och på vilket sätt motverkar det en positiv användarupplevelse när det är i obalans, är osymmetriskt, oregelbundet, oförutsägbart, icke-sekvensiellt uppbyggt och krångligt?
- Balance
- Symmetry
- Regularity
- Predictability
- Sequenciality
- Simplicity
Steg 1.2 Överordnad struktur – analys av eget gränssnitt 10 minuter – individuellt
Syfte: Identifiera förbättringspunkter för överordnad struktur (layout) för eget gränssnitt. Syftet med samtliga övningar i dagens workshop är att medvetet bestämma sig för att titta på sitt gränssnitt ur ett perspektiv i taget. Begränsa dig därför till just överordnad struktur för denna övning.
- Analysera ditt eget gränssnitt utifrån begreppen i listan. Du har kanske redan ett gränssnitt som är någorlunda balanserat, regelbundet, förutsägbart osv som helhet, men den här övningen är till för att identifiera småfel genom att fokusera på överordnad struktur separat för att därigenom hitta förbättringspunkter som tar gränssnittet från okej till riktigt bra. Se till att du fokuserar på just layout och överordnad struktur för denna övning.
Steg 1.3 Överordnad struktur – analys av andras gränssnitt 20 minuter – i grupp
Syfte: Identifiera förbättringspunkter för layout/överordnad struktur med hjälp av ett utifrånperspektiv (de andra i gruppens perspektiv).
- Analysera de andras gränssnitt i tur och ordning och för en punkt i taget genom att använda utskrifter/bilder på era skärmbilder. Från den inledande diskussionsövningen och erfarenheten att tillämpa begreppen på ditt eget gränssnitt bör du nu ha en fördjupad förståelse för respektive begrepp som du nu ska använda för att analysera de andras gränssnitt. Under analysen av ditt eget gränssnitt ska du vänta med att delta aktivt i diskussionen tills de andra i gruppen har sagt sitt – annars är risken att det blir du som styr analysen och syftet med detta steg i övningen är att andra med ett utifrånperspektiv ska betrakta ditt gränssnitt för att se det med färska ögon. Detta för att undvika den hemmablindhet som man oundvikligen får för de gränssnitt man har skapat själv.
- Avsluta varje analys genom att försöka identifiera minst 3 (gärna fler) förbättringspunkter för varje gränssnitt inom området layout/överordnad struktur – även om ni hittar andra saker att förbättra, ska fokus i denna övning vara just på layout och överordnad struktur, så begränsa er till detta område.
Fokus på funktionella detaljer i gränssnittet
Steg 2.1 Detaljer – analys av FUNKTIONELLA detaljer i eget gränssnitt 10 minuter – individuellt
Syfte: Att identifiera förbättringspunkter genom att analysera funktionella detaljer i eget gränssnitt.
- Analysera ditt eget gränssnitt utifrån nedanstående frågeställningar:
- Val av gränssnittskomponenter - har du valt rätt typ av gränssnittskomponent (länk, knapp, listruta, dropdown etc) för varje funktion i ditt gränssnitt. Se över varje aktiv del i gränssnittet och ställ dig frågan om du har valt rätt komponent för just denna funktion – är den lämplig, är dess funktion lätt att förstå och lätt att använda, är den effektiv och ger den bra unyttjande av skärmyta för aktuell plattform. Reflektera över vilka alternativ som är möjliga och om det finns någon annan typ av komponent som skulle vara mer lämplig.
- Gruppering av funktioner - har du grupperat dina funktioner och komponenter på ett ändamålsenligt sätt som gör det lätt för användaren att få översikt, förstå vad man ska göra och att använda komponenterna; och har du använt luft, linjer, rutor eller andra grafisk indelare för att göra denna gruppering tydlig för användaren. Notera att här finns en koppling till den överordnade struktur/layouten som vi tittade på i föregående övning, men här ska fokus vara på grupperingsfrågor.
Steg 2.2 Detaljer – analys av FUNKTIONELLA detaljer i andras gränssnitt 20 minuter – i grupp
Syfte: Att identifiera förbättringspunkter genom att analysera funktionella detaljer i andras gränssnitt.
- Analysera i tur och ordning varandras gränssnitt utifrån samma frågeställningar som i föregående steg.
- Försök att identifiera minst 3 (gärna fler) förbättringspunkter för varje gränssnitt. Se till att fokusera på val av gränssnittskomponenter och gruppering.
Fokus på estetiska detaljer i gränssnittet
Steg 3.1 Detaljer – analys av ESTETISKA detaljer i eget gränssnitt 10 minuter – individuellt
Syfte: Att identifiera förbättringspunkter genom att analysera estestiska detaljer i eget gränssnitt.
- Analysera ditt eget gränssnitt utifrån nedanstående frågeställningar:
- Val av färger - hur har valet av färger gjorts? – harmonierar färgerna med varandra, passar val av färger till tema för applikation och för identifierad målgrupp?
- Grafiska element - hur har valet av grafik gjorts och hur väl passar det temat och funktionen för din applikation. Är grafiken välgjord eller finns det saker som kan förbättras för att tydliggöra syfte, tema och/eller funktion och för att höja det estetiska intrycket?
- Få saker att hänga ihop eller sticka ut - har du i ditt val av färger och design av grafiska detaljer gjort det tydligt för användaren vilket syfte och funktion din applikation har och vilket syfte och funktion enskilda element/delar av applikationen har? Används färger som sticker ut på ett meningsfullt och medvetet sätt för att dra användarens blick till det man vill att användaren ska uppmärksamma. Har du t ex använt dig av Unity – enhetlighet/skillnad, Proximity – närhet/avstånd, och/eller Placement and proportions – förutsägbart/överraskande i din grafiska design för att tydliggöra funktion för användaren? Finns det saker du kan förbättra i den estetiska designen av gränssnittet för att tydligare signalera dess funktion och syfte och/eller förhöja användarupplevelsen?
Steg 3.2 Detaljer – analys av ESTETISKA detaljer i andras gränssnitt 20 minuter – i grupp
Syfte: Att identifiera förbättringspunkter genom att analysera estetiska detaljer i andras gränssnitt. Notera att det inte är tänkt att gränssnitten ska vara färdigdesignade i detta läge av kursen. Därför kommer det naturligt att vara så att det finns mycket att “kritisera”. För den som analyserar är det viktigt att du inte är för artig – övningen är till för att identifiera förbättringspunkter så kritisera på. För den som får feedback på sitt gränssnitt är det viktigt att du tar kritiken för vad det är – förslag på saker som kan förbättras för att göra någonting bra ännu bättre. Finkänslighet och känsliga tår är kontraproduktivt i sammanhanget. Ha en öppen inställning till övningen så ger den bäst resultat.
- Analysera i tur och ordning varandras gränssnitt utifrån samma frågeställningar som i föregående steg. Utnyttja utifrånperspektivet och undvik därför att styra diskussionen när det gäller din egen applikation. Du får dock givetvis svara på frågor som hur valet av färger har gjorts och annat som inte kan utläsas direkt i gränssnittet.
- Försök att identifiera minst 3 (gärna fler) förbättringspunkter för varje gränssnitt. Se till att fokusera på färger och grafik.
Användbarhet
Steg 4.1 Användbarhet – diskussion kring användbarhetsmål 10 minuter – i grupp
Syfte: Konkretisera vad de olika listade användbarhetsmålen innebär för att fördjupa er insikt i på vilket sätt de bidrar till användarupplevelsen.
- Diskutera i tur och ordning för varje av nedanstående begrepp vad de innebär och på vilket sätt de påverkar användaren och dennes användarupplevelse – på vilket bidrar det till en positiv användarupplevelse och på vilket sätt kan det förhindra en positiv användarupplevelse?
- Effektivitet (Effectiveness och Efficiency) – hjälper gränssnittet användaren att göra något som användaren vill göra/få utfört (Effectiveness) och hjälper gränssnittet användaren att göra det som han/hon gör med hjälp av applikationen på ett effektivt sätt som går snabbt och smidigt (Efficiency)?
- Lätt att lära och lätt och komma ihåg (Learnability och Memorability) – är gränssnittet utformat så att det är lätt att lära sig för förstagångsanvändaren och lätt att komma ihåg så att man kan utnyttja det första inlärningstillfället nästa gång man använder applikationen. (Notera att det inte är ett självändamål att ett gränssnitt ska vara lätt att lära sig – beror på syfte och målgrupp.)
- Kul/underhållande (Fun/entertaining) – är gränssnittet kul/underhållande att använda. (Notera att det inte är ett självändamål att en applikation ska vara kul och underhållande – beror på syfte och målgrupp.)
- Tydlighet (Affordance) – signalerar gränssnittet tydligt vad applikationen är till för och signalerar varje komponent sin funktion så att det är tydligt vad den komponenten är till för?
Steg 4.2 Användbarhet – analys av eget gränssnitt 10 minuter – individuellt
Syfte: Identifiera förbättringspunkter utifrån listade användarbarhetsmål för eget gränssnitt.
- Analysera ditt eget gränssnitt utifrån begreppen i listan.
Steg 4.3 Användbarhet – analys av andras gränssnitt 20 minuter – i grupp
Syfte: Identifiera förbättringspunkter utifrån listade användbarhetsmål med hjälp av ett utifrånperspektiv (de andra i gruppens perspektiv).
- Analysera de andras gränssnitt i tur och ordning och för en punkt i taget. Under analysen av ditt eget gränssnitt ska du vänta med att delta aktivt i diskussionen tills de andra i gruppen har sagt sitt.
- Avsluta varje analys genom att försöka identifiera minst 3 (gärna fler) förbättringspunkter för varje gränssnitt.
Reflektion
Steg 5.1 Reflektion resterande tid – i grupp
Syfte: Reflektera över hur checklistor av de slag som ni har använt idag kan tillföra vid utvecklingen av ett gränssnitt.
Diskutera följande och anteckna det som gäller för din applikation (ska redovisas på sidan för slutuppgiften – se nedan):
- Vilka typer av förbättringspunkter identifierades i respektive övning?
- Vilka checklistor var mest användbara – och varför?
- Hur kompletta kändes checklistorna – täckte de var för sig upp sitt eget område (överordnad struktur, funktionella detaljer, färg och form och användbarhetsmål); och gav de tillsammans en bra helhet med saker att tänka på vid utformningen av ett gränssnitt – Vad saknas?
- På vilket sätt är checklistor användbar som metod vid gränssnittsutveckling?
Dokumentation/redovisning på sidan för slutuppgiften
Syfte: Att presentera produkterna från workshopen.
På sidan för slutuppgiften ska följande presenteras:
- Identifierade förbättringspunkter för din applikation från varje övning (både de som du identifierade själv och de från övningarna i grupp – märk ut i vilket steg som förbättringspunkten identifierades). Om det är många punkter, så kan du sammanfatta eller göra ett urval av de viktigaste punkterna för varje övning.
- Sammanfattning (kortfattat – punktvis eller i löpande text) av dina reflektioner från den avslutande övningen i workshopen (steg 5.1 Reflektion)
Obs! Dokumentationen 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 grupp).
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 Skype eller chatten användas, men det är bara i undantagsfall.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:
- Klicka på drop down-knappen i sharing-podden (den där det står Share My Screen)
- Välj Share document
- Ladda upp dokumentet
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.
Typ av dokument som laddas upp
Det finns stöd för powerpoint (ppt/pptx), pdf och bildformat (jpg och png). Lämpligt är att använda sig av png-bilder eller en samlingsfil i PDF-format.
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 – listor på förbättringspunkter samt sammanfattning från reflektionsövningen – och lägga ut dem på sidan för slutuppgiften. Du ska utöver detta också också skriva en mer detaljerad beskrivning/reflektion kring punkterna i reflektionsövningen, motsvarande c:a en A4-sida text (läggs också ut på sidan för slutuppgiften).
