Gränssnittsdesign

Kursen handlar om interaktionen mellan dator och människa med fokus på designaspekterna i utveckling av användbara, tillgängliga och tilltalande gränssnitt.

Planerat

Kunskap om projektformen och erfarenhet av att arbeta i projekt är mycket nyttigt att ha med sig i såväl universitetsstudier som arbetsliv och till och med privat. I arbetsområdet lär vi oss att formulera syfte och mål samt grovplanera och bryta ned grovplanering till arbetsmoment i en tidsplan. 

Centralt innehåll

Arbetsområdet behandlar följande centrala innehåll.

• Projektformen

• Att formulera syfte & mål

• Att definiera målgrupp

• Att genomföra grovplanering

• Att sätta upp milstolpar

• Att formulera en projektplan

• Att dokumentera löpande

Tidsram

(En grov tidsplanering för att utstaka när vi ska vara klara med arbetsområdet och vilken examinationsform vi ska använda oss av. ) 

 

Vecka	Lektion 1	Lektion 2
34		Kursintroduktion
35	Projektformen	Projektformen
36	Uppgift Projektplanering

 

Examinationsform

Individuell skrivuppgift.

 

Prototypat

...

Centralt innehåll

I arbetsområdet kommer vi att arbeta med att utveckla kunskap inom följande:

• Förståelse för vad en prototyp är och vad dess roll är

• Förståelse för olika typer av prototyper

• Färdighet i att använda prototypverktyget Figma

Tidsram

Vecka	Lektion 1	Lektion 2
36		Figma - introduktion
37	Härma gränssnitt	Unikum & analys
38	Jobba med flera artboards	Interaktivitet och animation
39	Uppgift i par	Uppgift i par

 

Examinationsform

Uppgift i par att ta fram en interaktiv prototyp

 

Lärandematris

 

Snyggt

...

Centralt innehåll

I arbetsområdet kommer vi att arbeta med att utveckla kunskap inom följande:

• Vad som gör olika saker estetiskt tilltalande

• Grunder i bildbehandling

• Vilken effekt val av bilder har och hur man kan tänka kring det

• Hur symmetri och linjering samverkar

• Hur färger och våra associationer fungerar

Tidsram

Vecka	Lektion 1	Lektion 2
40	Färger	Bildbehandling
41	Bildbehandling	Bildval och komposition
42	Grid, linjering & konventioner	Layout och balans
43	Stilguide	Examination under lektion

 

Examinationsform

Att individuellt granska och analysera ett gränssnitt och dokumentera detta.

 

7 uppdrag

Vi kommer ni att omsätta allt vi gjort hittills i kursen på en gång. Vi kommer att dela in gruppen i sju grupper och sedan arbeta med helt skilda uppdrag. Det betyder att vi inte kan snegla på andra och seglar utan livlina. 

 

Det som är nytt är att vi även ska dokumentera det vi gör förutom att leverera ett gränssnitt. 

Centralt innehåll

I arbetsområdet kommer vi att arbeta med att utveckla kunskap inom följande:

 

• Färdighet i att definiera mål och syfte

• Färdighet i att planera med grovplanering och tidsplan

• Färdighet i att dokumentera och utvärdera

• Förståelse för vad en prototyp är och vad dess roll är

• Förståelse för olika typer av prototyper

• Färdighet i att använda prototypverktyget Figma

• Färdighet i att använd principer för visuell design

• Färdighet i att arbete med bildbehandling

• Färdighet i att skapa stilguide

Tidsram

Vecka	Lektion 1	Lektion 2
45	Designprocessen	Uppstart, idéverkstad, projektplan
46	Presentera för kund/ägare, arbete	Arbete
47	Dokumentation, arbete	Dokumentation
48	Arbetspass, deadline	Presentation i tvärgrupp

Examinationsform

Arbetsområdet examineras genom inlämning av prototyp, dokumentation och stilguide samt presentation i tvärgrupp. 

 

Smart

Det är nu äntligen dags att inte enbart göra snygga saker utan även smarta sådana! Detta arbetsområde fokuserar på begreppet användbarhet och reder ut skillnaden mellan användbar, användarvänlig och tillgänglig. Vi kommer även gå igenom relevanta juridiska lagar såväl som designmässiga lagar. 

Centralt innehåll

I arbetsområdet kommer vi att arbeta med att utveckla kunskap inom följande:

• Förståelse för användbarhet och vad som skapar användbarhet

• Förståelse för tillgänglighet och vad som krävs för det såväl designmässigt som juridiskt

• Konventioner och best practice kring ex beställningsprocessen och inloggning

• Principer kring användbarhet

• Arbetsprocessen att designa om och arbeta iterativt för att successivt öka användbarheten i ett gränssnitt

Tidsram

Vecka	Lektion 1	Lektion 2
49		Användbarhet
50	Tillgänglighet	Lagar och lagrum
51	Informationsarkitektur
2		Principer för användbarhet
3	Principer för mobilappar	21 lagar kring användbarhet
4	6 Gems of UX	Repetitionspass
5	Prov i Inspera under lektionen	ReDo #2

 

Examinationsform

Arbetsområdet examineras genom prov i Inspera på allt vi gjort i kursen så här långt men med fokus på detta arbetsområde. 

Arbetsområdet tillåter även förbättringar på tidigare gränssnitt i och med ReDo #2 ifall man vill ta chansen att komplettera det teoretiska med tillämpning av principerna vi gått igenom. 

 

Testat

I allt vi gjort hittills har vi arbetat med begränsad testning som vi främst genomfört själva eller med kompisar. Vi ska nu lära oss om automatiserad testning men framför allt arbeta med riktig testning med riktiga människor.

Vi kommer i examinationen i detta arbetsområde att samarbeta med gymnasiesärskolan och de kommer att vara vår testgrupp tillsammans med era familjer.

Centralt innehåll

I arbetsområdet kommer vi att arbeta med att utveckla kunskap inom följande:

• Vad testning är och kan vara

• Bra sätt att arbeta med testning

• Automatiserade testverktyg

• Användartestning

• Dokumentation av testning

Tidsram

Vecka	Lektion 1	Lektion 2
6	Testning	Dokumentation och testprotokoll
7	Testning av HowNow (uppgiften)	Möte med testpersonerna
9	Arbetspass	Arbetspass
10	Arbetspass	Arbetspass, deadline
11	Uppföljning av HowNow

 

Examinationsform

Arbetsområdet examineras genom den dokumentation som produceras under testningen. 

 

Episkt

Under resterande del av kursen ska ni skapa ett episkt gränssnitt och dokumentera det.

Slutprojekt

Du har chansen att visa hela processen - från idéskiss, problemformulering och definition av målgrupp till genomförande och testning av interaktiv prototyp för att slutligen dokumentera och lämna över prototyp och dokumentation. Vi testar alltså samtliga kunskapskrav i projektet.

Centralt innehåll

• Projektplanering med förstudie, bakgrund, formulering av problem,  definition av målgrupp, grovplanering och milstolpar. 

• Skapande av interaktiv prototyp.

• Användartestning och informationsarkitektur.

• Principer för användbarhet och visuell design.

• Inkluderande gränssnitt.

• Konventioner och formspråk.

• Utvärdering och förbättring av projektplan, produkt och dokumentation. 

Övergripande planering

Nedan finns en övergripande planering för uppgiften. Uppgiften omfattar 12lektioner och kommer examinera allt vi gjort hittills i kursen. 

Tidsram

Vecka	Lektion 1	Lektion 2
11
12
13
14
15
16
17
18
19
20
21

 

Deadlines

I tabellen finner ni vilka tider som gäller för uppgiftens tre milstolpar. Alla deadlines gäller för när söndag övergår till måndag. Således är söndagar kl 23:59 den sista möjliga inlämningstiden. Samtliga inlämningar görs på Classroom och jag kommer skicka tillbaka till er efter inlämningen när jag tittat på det. 

 

Vecka	Beskrivning	Inlämning
11	Projektöverblick	Projektplan Löpande logg
15	Delleverans	Reviderad projektplan Löpande logg .xd-fil Länk till projektet på xd.adobe.com
20	Skarp leverans	Reviderad projektplan Löpande logg .xd-fil Länk till projektet på xd.adobe.com Dokumentation

 

Arbetssätt

Ni arbetar individuellt med denna uppgift.

 

Ni dokumenterar löpande vad som sker. I början av varje pass ni arbetar lägger ni en rubrik med dagens datum och kommentar kring vad som ska göras. Sedan skriver ni löpande vad som görs i loggen och lägger med länkar och resurser. Den är ert anteckningsblock där ni klottrar ned tankar, tillfälliga anteckningar etc. I slutet av passet skriver ni en mening om vad ni lyckades med och vilka nya problem som uppstod eller kvarstår. Exempel på detta finns i mallen. 

 

Eftersom testning kräver att ni träffar er målgrupp och genomför testning på just dem så kommer inte lektionstiden att räcka till eller passa i tid. Ifall ni behöver ta två arbetspass till att testa under en eftermiddag eller en lördagsförmiddag så meddelar ni helt enkelt att ni uteblir och att ni arbetar med testning. Glöm inte att fylla i loggen kring testning samt att dokumentera er testning. 

Kravspecifikation

Under nedanstående rubriker finns beskrivet vilka krav som finns kring uppgiften. Detta är ramarna för uppgiften.

Projektplan

Projektplanen ska först upprättas och sedan revideras löpande under projektet med logg kring beslut som tas.

 

Projektplanen ska även utvärderas i samband med projektavslut. Detta sker alltså i projektets absoluta slutfas. I verkligheten görs detta efter att projektet avslutats och levererats men då det är kunskapskrav som hänger samman med projektet så ska ni göra det i samband med slutleveransen. 

 

En projektplan skrivs i Dokument och kan ta stöd av Kalkylark.

Interaktiva prototyper

Projektet ska resultera i två prototyper som båda fyller funktion i projektet. Prototyperna ska göras i XD och båda prototyperna ska finnas i samma XD-fil. Alla funktioner behöver inte och bör inte heller finnas i båda prototyperna. 

 

Förutsättningar för prototyper

• Prototypen genomförs i Adobe XD

• Projekten ska döpas enligt: Projektnamn (johkel123, episkt 1920).xd

• Pekskärm i stående format med upplösning 1080 x 1920 px. Pekskärmen är avsedd att sitta monterad på något sätt, ex på en vägg vid en entré, vid en träningsmaskin eller en tävlingsgren. 

• App på smartphone med upplösning ca 350 x 700 px. Du bestämmer själv om det är för iOS, Android eller annat och de exakta dimensionerna. 

Dokumentation

Att kunna förstå och planera, revidera och utvärdera ett projekt utefter kunden, målgruppen och de tekniska förutsättningarna som är givna. 

Dokumentation

• Du följer den mall som presenterats i kursen och som finns tillgänglig separat.

• Du genomför din dokumentation antingen skriftligt eller som video (screencast). 

• En skriftlig dokumentation görs i Dokument enligt den mall som finns.

• En inspelad video följer samma rubriker som den skriftliga men du kan spela in din röst samtidigt som du spelar in skärmen.

• Du använder dig av korrekt svenska och ett gott språk med korrekta facktermer.

Testning

• Du genomför testning och dokumenterar urval, genomförande och resultat. 

• Du följer rubrikerna som finns i mallen och lägger till egna efter behov. 

• Du sparar ditt dataunderlag, exempelvis anteckningar eller renskrivna ljudfiler. 

Löpande logg

• Du skriver en enkel sammanfattning för varje arbetspass kring vad du gjort och vilka problem som uppstått

• Du använder den löpande loggen för att samla länkar, tankar mm som du behöver. Den är din yta för anteckningar och allmänt slask som kan komma till användning. 

Läroplansmål

Syfte

• Förmåga att planera, genomföra och utvärdera projekt för att utveckla gränssnitt till applikationer.
• Kunskaper om digital bild, video och text och digitalt ljud samt hur det anpassas till ett gränssnitt.
• Förmåga att skapa en estetiskt tilltalande och målgruppsanpassad design av gränssnitt.
• Förmåga att skapa ett användarvänligt gränssnitt samt kunskaper om vilka principer som styr det.
• Kunskaper om på vilket sätt integritet och etik har betydelse för utformningen av datorsystem och gränssnitt.
• Kunskaper om lagar och andra bestämmelser inom området.

Centralt innehåll

• Gränssnitt för en applikation.
• Genomförande av förstudier genom problemformulering utifrån kundönskemål, identifikation av målgrupper och typanvändare, undersökning av tekniska förutsättningar och liknande applikationer samt formulering av målsättningar och framgångskriterier.
• Typsnitt, färgscheman och principer för layout av gränssnitt.
• Informationsarkitektur och användarvänlig navigation.
• Faktorer som möjliggör kommunikation av specifika budskap.
• Principer för användbarhet samt metoder för att testa användbarhet.
• Krav på ett inkluderande gränssnitt. Riktlinjer, principer, tekniker och testning för tillgänglighet.
• Datorsystem (ubicomp) och gränssnitt i vardagen.
• Frågor som rör integritet och etik.
• Lagar och andra bestämmelser inom området.

Kriterier

• Eleven gör en genomarbetad projektplan för att utveckla ett gränssnitt till en applikation. Projektplanen innehåller en problemformulering utifrån kundönskemål, identifikation av målgruppen och dess behov samt projektets tekniska förutsättningar. Eleven värderar med nyanserade omdömen sin projektplan.
• Eleven gör en enkel projektplan för att utveckla ett gränssnitt till en applikation. Projektplanen innehåller en enkel problemformulering utifrån kundönskemål, identifikation av målgruppen och dess behov samt projektets tekniska förutsättningar. Eleven värderar med enkla omdömen sin projektplan.
• För att utveckla gränssnittet hämtar eller skapar eleven texter, bilder och eventuell annan media samt infogar dessa i gränssnittet till applikationen. Eleven bearbetar gränssnittet på några olika sätt enligt principer för visuell design. Resultatet är tillfredsställande anpassat till användarens behov utifrån några principer för användbarhet. Detta gör eleven genom att anpassa den visuella designen och interaktionen så att gränssnittet har en tillfredsställande kvalitet i fråga om uppfattningsbarhet och användbarhet också för användare med funktionsned­sättningar. Dessutom för gränssnittet fram kundens önskade budskap på ett tillfredsställande sätt.
• För att utveckla gränssnittet hämtar eller skapar eleven texter, bilder och eventuell annan media samt infogar dessa i gränssnittet till applikationen. Eleven bearbetar gränssnittet på något sätt enligt principer för visuell design. Resultatet är tillfredsställande och anpassat till användarens behov utifrån någon enkel princip för användbarhet. Detta gör eleven genom att anpassa den visuella designen och interaktionen så att gränssnittet har en tillfredsställande kvalitet i fråga om uppfattningsbarhet och användbarhet också för användare med funktionsned­sättningar. Dessutom för gränssnittet fram kundens önskade budskap på ett tillfredsställande sätt.
• Eleven följer några av de vedertagna konventioner som finns för den plattform som hon eller han arbetar med. Eleven utvecklar en huvudsakligen interaktiv prototyp med tillfredsställande resultat i fråga om funktion, utseende och användbarhet. Dessutom testar eleven prototypens användbarhet med några enkla metoder. Prototypen kompletteras med en stilguide som täcker några av designens viktigaste delar.
• Eleven följer någon av de vedertagna konventioner som finns för den plattform som hon eller han arbetar med. Eleven utvecklar en huvudsakligen interaktiv prototyp med tillfredsställande resultat i fråga om funktion, utseende och användbarhet. Dessutom testar eleven prototypens användbarhet med några enkla metoder. Prototypen kompletteras med en stilguide som täcker någon av designens viktigaste delar.
• Eleven gör en enkel dokumentation av sitt arbete samt utvärderar med enkla omdömen sitt arbete och resultat utifrån projektplanen. I utvärderingen diskuterar eleven översiktligt hur det egna gränssnittet förhåller sig till generella principer för hur en god användarupplevelse skapas.
• Eleven redogör översiktligt, utifrån några exempel i vardagen, för på vilket sätt integritet och etik har betydelse för utformningen av datorsystem och gränssnitt. Dessutom hänvisar eleven i sin redogörelse till lagar och andra bestämmelser inom området.
• Eleven använder med säkerhet terminologi inom området.