Department of Science and Technology Institutionen för teknik och naturvetenskap
LiU-ITN-TEK-G-20/031-SE
Välkommen till Norrköping: Att
designa en användbar
applikation för att hjälpa
människor upptäcka Norrköping
Hanna Edhag
Ebba Fälth
LiU-ITN-TEK-G-20/031-SE
Välkommen till Norrköping: Att
designa en användbar
applikation för att hjälpa
människor upptäcka Norrköping
Examensarbete utfört i Grafisk design och kommunikation
vid Tekniska högskolan vid
Linköpings universitet
Hanna Edhag
Ebba Fälth
Handledare Ahmet Börütecene
Examinator Jonas Löwgren
Upphovsrätt
Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare –
under en längre tid från publiceringsdatum under förutsättning att inga
extra-ordinära omständigheter uppstår.
Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner,
skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för
ickekommersiell forskning och för undervisning. Överföring av upphovsrätten
vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av
dokumentet kräver upphovsmannens medgivande. För att garantera äktheten,
säkerheten och tillgängligheten finns det lösningar av teknisk och administrativ
art.
Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i
den omfattning som god sed kräver vid användning av dokumentet på ovan
beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan
form eller i sådant sammanhang som är kränkande för upphovsmannens litterära
eller konstnärliga anseende eller egenart.
För ytterligare information om Linköping University Electronic Press se
förlagets hemsida
http://www.ep.liu.se/
Copyright
The publishers will keep this document online on the Internet - or its possible
replacement - for a considerable time from the date of publication barring
exceptional circumstances.
The online availability of the document implies a permanent permission for
anyone to read, to download, to print out single copies for your own use and to
use it unchanged for any non-commercial research and educational purpose.
Subsequent transfers of copyright cannot revoke this permission. All other uses
of the document are conditional on the consent of the copyright owner. The
publisher has taken technical and administrative measures to assure authenticity,
security and accessibility.
According to intellectual property law the author has the right to be
mentioned when his/her work is accessed as described above and to be protected
against infringement.
For additional information about the Linköping University Electronic Press
and its procedures for publication and for assurance of document integrity,
please refer to its WWW home page:
http://www.ep.liu.se/
Linköpings Universitet | Institutionen för teknik och naturvetenskap Kandidatuppsats 16 hp | Grafisk Design & Kommunikation
VT 2020
Välkommen till Norrköping
Att designa en användbar applikation för att hjälpa
människor upptäcka Norrköping
Hanna Edhag
Ebba Fälth
Handledare: Ahmet Börütecene Examinator: Jonas Löwgren Norrköping 2020-06-08
Sammanfattning
Denna studie undersöker hur en användbar applikation för att hjälpa människor upptäcka staden Norrköping skulle kunna utformas. Designprocessen har utgått från användarens behov genom användartester, observationer och intervjuer med potentiella användare. Processen har också innefattat en förstudie, bearbetningsfas och detaljeringsfas där koncept och utformning för applikationen har utvecklats, utvärderats och utarbetats för att resultera i en interaktiv digital prototyp.
Studien ämnade att svara på frågan Hur kan en applikation med syfte att hjälpa människor att upptäcka intressepunkter platser, sevärdheter, evenemang och aktiviteter i Norrköping utformas för att användaren ska få en positiv användarupplevelse? . Resultatet visar att den framtagna prototypen för applikationen Välkommen till Norrköping ger användaren en positiv
Abstract
This study examines how a useable application to help people explore the city of Norrköping could be designed. The design process has proceeded with the users’ needs in mind through user tests, observations and interviews with potential users. The process has also included a pre-study, a processing phase and a detailing phase where the concept and the design for the application have been developed and evaluated which resulted in an interactive digital prototype.
The study intended to answer the question How can an application that aims to help people explore points of interest places, tourist attractions, events and activities in Norrköping be designed to give the user a positive user experience? . The result shows that the produced prototype for the application Welcome to Norrköping gives the user a positive user
experience and that the application would be helpful for exploring the city.
Innehållsförteckning
1. Inledning 6
1.1 Syfte och forskningsfråga 6 1.2 Avgränsningar 6
2. Teoretiskt ramverk 7
2.1 Aktivitetsguider och turistinformation 7 2.2 Interaktionsdesign 7 2.3 Användarupplevelse - UX 7 2.4 Gränssnittsdesign 8 2.5 Metaprincipen 8 2.6 Användbarhet 9 2.7 Mobila enheter 9 2.8 Designmönster 9 2.8.1 Vertical stack 9 2.8.2 Alternative views 10 2.8.3 Thumbnail-and-text lists 10 2.8.4 Thumbnail grid 10 2.8.5 Escape hatch 10 2.8.6 Generous borders 10 2.8.7 Prospective memory 10 2.8.8 Visual framework 10 3. Metod 11 3.1 Förstudie 11 3.1.1 Inledande studie 11 3.1.2 Semistrukturerade intervjuer 11 3.1.3 Storyboard 11 3.2 Bearbetningsfasen 12 3.2.1 Brainstorm 12 3.2.2 Kravspecifikation 12 3.2.3 Webbkarta 12 3.2.4 Inledande skisser 12 3.2.5 Lo-Fi-prototyp 13 3.2.6 Användartest med fokusgrupp 13 3.3 Detaljeringsfasen 13 3.3.1 Visuellt formspråk 13 3.3.2 Hi-Fi-prototyp 13 3.3.3 Användartest och värdering 14
4. Förstudie 15
4.1.1 Föredragen plattform 15 4.1.2 Intresse av individanpassning 15 4.1.3 Viktiga faktorer 15 4.1.4 Intresse av applikation 15 4.2 Semistrukturerade intervjuer 16 4.2.1 Intervju 16 4.2.2 Observation 17 4.3 Observation av befintliga applikationer 18 4.4 Storyboard 19 5. Designarbete 20 5.1 Bearbetningsfasen 20 5.1.1 Brainstorm 20 5.1.2 Kravspecifikation 20 5.1.3 Webbkarta 21 5.1.4 Inledande skisser 22 5.1.5 Lo-Fi-prototyp 22 5.1.6 Användartest med fokusgrupp 23 5.2 Detaljeringsfasen 23 5.2.1 Visuellt formspråk och Hi-Fi-prototyp 24 5.2.2 Användartest Hi-Fi-prototyp 25 5.2.3 Justering av prototyp efter användartest 27
6. Resultat och värdering 28
6.1 Slutgiltig design 28 6.2 Värdering av slutgiltig design 31
7. Slutsats 33
8. Diskussion 34
8.1 Validitet 34 8.2 Reflektion över designprocessen 34 8.3 Vidare studier 35
Referenser 36
Bilagor 36
Bilaga 1 - Inledande studie 37 Bilaga 2 - Intervjufrågor förstudie 43 Bilaga 3 - Urval av inledande skisser 44 Bilaga 4 - Lo-Fi-prototyp 45 Bilaga 5 - Användartest Lo-Fi-prototyp 46 Bilaga 6 - Digital skiss 47 Bilaga 7 - Användartest Hi-Fi-prototyp 48 Bilaga 8 - SUS-enkät 49
Bilaga 9 - Slutgiltigt prototyp 50
Figurförteckning
Figur 1 - Upplev Norrköpings startsida 17 Figur 2 - Upplev Norrköpings undersida Se & Göra 17 Figur 3 - Upplev Norrköpings filtreringsfunktion 18 Figur 4 - Storyboard 19 Figur 5 - Webbkarta 22 Figur 6 - Moodboard 24 Figur 7 - Styleguide 24 Tabellförteckning Tabell 1 - Kravspecifikation 21 Tabell 2 - Resultat SUS-enkät 26
1. Inledning
Allt fler turistbyråer läggs ner och informationen från de klassiska guideböckerna finns nu istället digitalt. Norrköping är en fantastisk stad med mycket att upptäcka, men informationen om stadens aktivitetsutbud är begränsat då den lokala turistbyrån lades ner för några år sedan. För att slippa behöva leta på flera olika internetsidor för att hitta den information man söker tror vi att en applikation som samlar Norrköpings aktiviteter, och gör det enkelt att hitta dessa, kan få fler människor att upptäcka staden.
I en mobilapplikation kan man samla information om stadens platser, sevärdheter, evenemang och aktiviteter hädanefter intressepunkter på en och samma plats. En mobilapplikation är ett praktiskt format som är lätt att ha med sig och ger snabb tillgång till information, du kan hitta information var du än befinner dig och är inte bunden till en turistbyrås öppettider.
Hjälpsamma funktioner kan ge användaren möjlighet att planera sin vistelse genom att spara intressepunkter denne vill utforska, se vägbeskrivningar till intressepunkter och få information om dessa. Med en sådan mobilapplikation kan turister och personer som är nya till staden upptäcka Norrköping på ett enkelt och smidigt sätt.
1.1 Syfte och forskningsfråga
Syftet med uppsatsen är att undersöka hur en applikation som ska användas för att hitta intressepunkter i Norrköping skulle kunna utformas, genom att ta fram en interaktiv digital prototyp. Utgångspunkten kommer att vara följande forskningsfråga:
● Hur kan en applikation med syfte att hjälpa människor att upptäcka intressepunkter platser, sevärdheter, evenemang och aktiviteter i Norrköping utformas för att användaren ska få en positiv användarupplevelse?
1.2 Avgränsningar
En applikation likt denna skulle kunna anpassas till flera olika enheter och format, men i denna uppsats kommer metoden mobile first appliceras. Arbetet kommer således enbart fokusera på att ta fram en digital prototyp av en applikation i smartphone-format.
2. Teoretiskt ramverk
I detta kapitel presenteras det teoretiska ramverk som kommer ligga till grund för uppsatsen.
2.1 Aktivitetsguider och turistinformation
Digitaliseringen i världen är ett faktum, och detta påverkar även turistbranschen. Fler och fler turister använder sig av digitala hjälpmedel för information och bokningar under sin resa, snarare än att gå till en fysisk turistbyrå. Detta resulterar i att flera fysiska turistbyråer i landet läggs ner och istället satsar på att hjälpa turister via internet och sociala medier Sveriges Radio - Allt fler traditionella turistbyråer slår igen , 2017 .
Upplev Norrköping är Norrköpings kommuns nuvarande webbsida för turistinformation. Den innehåller information om staden och är uppdaterad med aktuella och uppkommande aktiviteter. Webbsidan är anpassad för både desktop och mobilt format Upplev Norrköping, u.å. a .
2.2 Interaktionsdesign
Interaktionsdesign är att skapa användarupplevelser som förbättrar och expanderar tillvägagångssätt för hur människor kommunicerar, arbetar och interagerar. Fokus inom interaktionsdesign är att skapa praktiska lösningar. För att skapa dessa praktiska lösningar måste man ta hänsyn till vad människor är bra och dåliga på, involvera människor i designen och tänka igenom vad som kan bidra till värdefulla användarupplevelser. Interaktionsdesign handlar också om att förstå den efterfrågade funktionaliteten och begränsningarna för den produkt man utvecklar Preece, Rogers & Sharp, 2016 .
En viktig del av designprocessen är att förstå användaren och de behov som finns hos denna. Om designarbetet av en produkt sker med fokus på människan säkerställer man att
produkten sedan är meningsfull i den tänkta situationen med den tänkta användaren. Det finns inget värde i en produkt om den inte kommer till nytta eller används Arvola, 2014 . Denna princip kallas human centered design, och definieras i ISO 9241-210 som en iterativ process där man bland annat utvecklar en helhetsförståelse för användare och intressenter samt deras situation och upplevelser. Standarden poängterar även vikten av att användare och intressenter tas i beaktning genom hela designarbetet och att utvärdering av produkten sker med användaren i centrum, för att på bästa sätt kunna utveckla designen anpassad för brukssituationen Arvola, 2014 .
2.3 Användarupplevelse - UX
Användarupplevelse, på engelska user experience UX , handlar om hur människor känner för en slutprodukt och deras nöjdhet när de använder den. Det kan innebära allt ifrån hur
helhetsupplevelsen är, till små detaljer såsom hur ett knapptryck ger ifrån sig ljud vid klick. Det är viktigt att upplevelsen är av kvalitet. Viktiga aspekter när man skapar interaktiva produkter är användbarhet, funktionalitet, estetik, innehåll, utseende och känsla Preece, Rogers & Sharp, 2016 .
2.4 Gränssnittsdesign
Även vid gränssnittsdesign är det viktigt att ha användaren i åtanke och att tänka på både estetiken och funktionaliteten på samma gång. Att designa för digitala applikationer är komplext då många aspekter spelar stor roll och det finns inget etablerat sätt att göra det på. Ofta krävs det kunskaper från olika håll och idéer från både tekniska och estetiska perspektiv behövs för att utforma ett gränssnitt som ger en god användarupplevelse. Genom visuella språk, såsom tecken och symboler, är gränssnittsdesign en mellanhand för kommunikation och interaktion Schlatter & Levinson, 2013 .
2.5 Metaprincipen
Det finns en mängd olika designprinciper, men det finns tre stycken metaprinciper som är återkommande när det gäller att designa för applikationer. De tre principerna som påverkar applikationers utformning mest är kontinuitet, hierarki och personlighet Schlatter & Levinson, 2013 .
Kontinuitet
Visuellt språk, precis som talat språk, behöver vissa riktlinjer för att kunna kännas igen och uppfattas på ett visst sätt. Att designa ett kontinuerligt gränssnitt så att man snabbt förstår hur applikationen fungerar är av stor vikt för att folk ska vilja använda den. Kontinuitet handlar om att designa för användarens förväntningar på applikationen och se till att de integrerar utifrån dem. Genom att förstå vad användare förväntar sig kan man därefter skapa riktlinjer för det visuella språket Schlatter & Levinson, 2013 .
Det finns två typer av kontinuitet som man kan designa för: extern och intern kontinuitet. Extern kontinuitet betyder att olika applikationer är uppbyggda likt varandra och beter sig på samma sätt, medan intern kontinuitet betyder att sidor inom samma applikation ser lika ut
Schlatter & Levinson, 2013 .
Extern kontinuitet kan utnyttjas om målgruppen är van vid att använda andra specifika applikationer med ett visst gränssnitt. Intern kontinuitet är viktigt att tänka på för att
användaren ska förstå applikationen och användbarheten. Intern kontinuitet uppnås genom att det visuella språket ser likadant ut mellan sidorna inom applikationen, detta genom att skapa en kontinuitet i layout, färganvändning, typografi, bilder, kontroller och affordans. Om applikationen finns på flera plattformar är det väsentligt att de påminner om varandra så mycket som möjligt men att de är anpassade efter den specifika plattformen Schlatter & Levinson, 2013 .
Hierarki
Visuell hierarki är uppfattningen av vikten mellan olika visuella element i relation till varandra. Uppfattningen av hierarki är baserad på hur objekt är placerade, hur stora de är, färgval och den funktion elementet besitter. Elementens karaktär och position berättar hur viktiga de är baserat på hur de ordnas inom gränssnittet. Ofta ordnar man elementen efter det flöde användaren vill interagera med systemet eller applikationen för att uppnå deras mål eller behov Schlatter & Levinson, 2013 .
Personlighet
Med personlighet menas det intryck som en användare får av en applikation baserat på dess utseende, beteende och tillfredsställning. Människor skapar en uppfattning om applikationer, både medvetet och undermedvetet, precis som vi skapar uppfattningar och får intryck av andra människor. Som utvecklare och designer kan man inte skapa applikationens personlighet, utan det påverkas av användarens förväntningar, uppfattning och tidigare erfarenheter. Däremot kan man designa för att hjälpa användaren att skaffa sig en positiv uppfattning. Detta genom att använda designprinciper på ett tilltalande sätt som hjälper användaren att enkelt navigera och utföra det som applikationen finns till för Schlatter & Levinson, 2013 .
2.6 Användbarhet
Användbarhet enligt ISO 9241-11 1998 är den utsträckning i vilken en specificerad användare kan använda en produkt för att uppnå specifika mål, med ändamålsenlighet, effektivitet och tillfredsställelse, i ett givet användningssammanhang . Användbarhet handlade till en början om att utforma för effektivitet och tillfredsställelse, men idag handlar det också om att designa för samarbete, kunskapshantering, nöje, underhållning och
tillgänglighet mm. I och med detta har begreppet blivit bredare och fler begrepp har myntats för att förstå användbarhet Arvola, 2014 .
2.7 Mobila enheter
För att en enhet ska klassas som mobil bör den uppfylla tre krav: den ska vara lokaliserbar, platsoberoende och tillgänglig. Användaren har annorlunda förväntningar på en mobil enhet än på en stationär. På den mobila enheten vill de ha mer överskådlig och koncis
nyckelinformation, men det är fortfarande nödvändigt att den fullständiga informationen är inkluderad på något sätt, eftersom användaren ibland söker information enbart på den mobila enheten Nagel, 2015 .
2.8 Designmönster
Designmönster kan beskrivas som vanligt förekommande lösningar som testats och används för att lösa designproblem Cuello & Vittone, 2013 . De används bland annat inom
gränssnittsdesign och kan hjälpa till att göra det mer användbart och lättanvänt, genom att göra det enklare att förstå gränssnittet och interaktioner. Designlösningarna bör dock anpassas till varje specifikt projekt, då de inte ska ses som färdigutvecklade delar för alla slags projekt Tidwell, 2011 . Följande designmönster är ett urval av Jennifer Tidwells 2011 teorier.
2.8.1 Vertical stack
Mobila enheter har en begränsad yta för användargränssnittet och därför bör sidor inom applikationen placeras vertikalt. Innehåll som visas sida vid sida, dvs. horisontellt bör undvikas helt vid mindre format.
2.8.2 Alternative views
Vissa gånger är det till fördel att kunna växla mellan olika vyer över ett och samma innehåll. Detta för att användaren ska kunna läsa samma innehåll men med olika möjligheter och förutsättningar.
2.8.3 Thumbnail-and-text lists
Miniatyrbilder och mindre text i en lista är ett sätt ordna innehåll som är tilltalande för
användaren. Läsmöjligheterna i ett mindre format är sällan bra och genom att addera en bild är det lättare att differentiera texter från varandra och det bjuder därmed in till interaktion.
2.8.4 Thumbnail grid
Ett sätt att ordna innehåll är genom små visuella komponenter som identifieras av ikoner, bilder eller logotyper och placeras i ett rutnät. Att formatera innehållet på detta viset kan ibland differentiera och organisera detta på ett bättre sätt än i en lista. Komponenterna i rutnätet tenderar att likna varandra i storlek och stil.
2.8.5 Escape hatch
På sidor där det finns begränsat med navigering är det viktigt att ha en länk eller knapp för att navigera sig därifrån eller vidare till andra sidor. Att varje sida har minst en väg att rymma är viktigt för att användaren inte ska känna sig begränsad och fast på sidan.
2.8.6 Generous borders
På enheter med en touchskärm är det viktigt att knappar och andra interaktiva ytor har goda marginaler och tomma ytor runt omkring sig. Exakt hur stora dessa ytor ska vara varierar mellan användare och brukssituation.
2.8.7 Prospective memory
Prospektivt minne är något som kan implementeras i mjukvaruprogram genom att till exempel flagga e-mail eller spara framtida aktiviteter. Funktionen finns till för att man ska kunna planera saker i framtiden eller komma ihåg vart man avslutade förra gången.
2.8.8 Visual framework
Genom att designa varje sida med liknande layout, färger, typografi och språk skapas en tydlig och övergripande visuell stil för applikationen. Detta hjälper användaren att navigera då innehållet i applikationen lyfts fram tydligare.
3. Metod
Metoden som kommer användas för arbetet beskrivs i detta kapitel och utgår från de metoder som Mattias Arvola beskriver i sin bok Interaktionsdesign och UX - om att skapa en god användarupplevelse 2014 .
3.1 Förstudie
Förstudien i arbetet kommer följa Mattias Arvolas 2014 metoder för konceptfasen, och ersätter därmed denna. Förstudien anses motsvara de delar som finns representerade i konceptfasen och uppfyller därför samma syfte.
Syftet med förstudien är att ta reda på den information som behövs för att kunna skapa en målbild och börja skissa på konceptidéer. Detta görs genom undersökningar där insikter om användarens behov skapas, som vidare analyseras för att kunna specificera mål och avsikter
Arvola, 2014 . Inkluderat i förstudien är en inledande studie, vilken består av en
enkätundersökning samt semistrukturerade intervjuer och utformning av en storyboard.
3.1.1 Inledande studie
Den inledande studien kommer utgöras av en digital enkätundersökning med målet att ta reda på hur personer vanligtvis söker upp information om aktiviteter vid resor, samt om intresset för en applikation som samlar aktiviteter och sevärdheter finns. En enkät kan få stor spridning via sociala medier och kan därmed samla in ett stort antal svar. Den insamlade datan kommer användas som underlag för utformningen av den fortsatta förstudien.
3.1.2 Semistrukturerade intervjuer
För att få en inblick av användarens behov, tankar och känslor kommer semistrukturerade kvalitativa intervjuer med potentiella användare av applikationen att genomföras. Denna typ av datainsamling ger förståelse för problemområden som kan hjälpa designarbetet med inspiration och information Arvola, 2014 .
Inför intervjuerna kontaktas potentiella användare som kan delta i intervjuerna och frågor tas fram för att ta reda på information för att utveckla konceptidéer och ett användarscenario. Deltagarna kommer under intervjuerna att besvara frågor samt utföra ett antal uppgifter där de kommer bli observerade när de navigerar på hemsidan Upplev Norrköping . Hemsidan kommer användas som utgångspunkt för observation under intervjuerna då det är en befintlig plattform över intressepunkter i Norrköping. Deltagarna kommer bli informerade om intervjuns syfte och att deltagandet är anonymt.
3.1.3 Storyboard
Baserat på intervjuerna kommer ett användarscenario tas fram som vidare kommer illustreras i en storyboard. En storyboard kan visa på visionen med ett projekt och har potential att få med projektgruppen såväl som intressenter mot ett gemensamt mål. Det är också ett bra sätt att förmedla en känsla i en upplevd användarsituation. En storyboard kan ta form på olika sätt, den kan vara fotobaserad eller illustreras på ett enkelt sätt för att visa på hur en
3.2 Bearbetningsfasen
Syftet med denna fas är att ta fram idéer för applikationens generella funktioner och utseende. Detta genom att skissa och arbeta fram hur gränssnittet kan utformas och hur interaktionerna kan fungera. Denna fas handlar också om att strukturera innehåll och att ta fram en första prototyp av produkten.
3.2.1 Brainstorm
Det finns många olika metoder för brainstorming. Metoden som Arvola 2014 beskriver börjar med att varje deltagare i projektet får cirka tio minuter på sig att skriva ner så många idéer som möjligt kring ämnet. Sedan läser varje deltagare upp en idé var medan de andra lyssnar. Deltagarna påpekar högt vad de kommer att tänka på vid varje idé, vilket kan generera fler idéer. Ideérna som läses upp ska inte kritiseras och det är bara bra om de är nytänkande. Efter att alla idéer har lästs upp kategoriseras de genom att läggas i olika högar. Högen med flest lappar har en högst trovärdig arbetslinje Arvola, 2014 .
3.2.2 Kravspecifikation
En kravspecifikation är en lista över bestämmelser på vad användaren ska kunna göra i applikationen Arvola, 2014 . Denna baseras på resultatet av intervjuer och insikter från tidigare fas, där användarens behov och brukssituation kartlades. Kraven definieras och kategoriseras för att utgöra grunden för webbkartan Arvola, 2014 .
3.2.3 Webbkarta
En webbkarta visualiserar strukturen över en applikation eller webbsida baserat på kategorisering av innehållet. En webbkarta ritas upp hierarkiskt, vilket kan visas genom storlek och mättnad av de olika punkterna, vilka representerar innehållet. Mellan de olika punkterna ritas streck, detta för att man ska kunna förstå och se kopplingen mellan innehåll. Strecken mellan de olika punkterna utgör även en interaktionsstruktur, där man ser vilket innehåll som är tillgängligt från punkterna Arvola, 2014 . Webbkartan baseras på
kravspecifikationen och kommer att användas som utgångspunkt vid brainstorming.
3.2.4 Inledande skisser
När funktioner, innehåll och struktur för produkten är fastställt är det lämpligt att börja skissa på gränssnittet. Skisserna kan utgå från ett scenario där man fokuserar på de gränssnitt som ingår i scenariot eller uppgiften. Skisserna kan också vara skärmskisser som i kombination med en webbkarta ger en överblick för applikationens sk. tillståndsdiagram, som visar tillstånd som applikationen kan befinna sig i Arvola, 2014 . Projektets skisser kommer att utgå ifrån det sistnämnda, dvs. tillståndsdiagram. Skisserna kan sättas samman till ett gränssnittsflöde som visualiserar och beskriver övergångarna mellan tillstånden. Ett gränssnittsflöde är ett effektivt sätt att visa konstruktionen av prototyper på Arvola, 2014 .
3.2.5 Lo-Fi-prototyp
De inledande skisserna över gränssnittsflödet kommer att utvecklas till en Lo-Fi-prototyp som kommer ta form i en pappersprototyp. Till skillnad från de inledande skisserna är en
överblick av applikationen som visualiserar statiska skrämtillstånd. Det som ska testas med hjälp av en pappersprototyp är flödet, förståelsen och den generella idéen Arvola, 2014 .
Prototypen blir levande när en människa agerar dator medan en annan användare interagerar med prototypen. Personen som agerar dator lägger fram nya skärmkomponenter allt eftersom användaren navigerar genom prototypen Arvola, 2014 .
3.2.6 Användartest med fokusgrupp
För att testa Lo-Fi-prototypen kommer ett användartest med en fokusgrupp att utföras. En sådan utvärderingsmetod är till för att hitta förbättringar inom användargränssnittet utan att behöva genomföra flera tidskrävande användartester. Användartestet genomförs med hjälp av Lo-Fi-prototypen där en uppgift ska lösas. Användartestet kan till fördel genomföras med flera deltagare i samma diskussion då syftet är att upptäcka eventuella problem och diskutera användargränssnittet. Varje deltagare kommer att få utföra uppgifterna var för sig för att sedan tillsammans diskutera vad som är bra och vad som kan förbättras med prototypen. Den feedback som fokusgruppen ger bearbetas och utvärderas för att sedan implementeras i Hi-Fi-prototypen IDEO.org, 2015 .
3.3 Detaljeringsfasen
Syftet med detaljeringsfasen är att omvandla resultaten från bearbetningsfasen till en mätbar och färdig digital prototyp med en högre detaljeringsnivå. Denna fas börjar med att utforma ett visuellt språk och avslutas med en användartestning av prototypen Arvola, 2014 .
3.3.1 Visuellt formspråk
Framtagandet av det visuella formspråket kommer starta med en moodboard som ska spegla känslan och det visuella uttryck som applikationen ska ha. Moodboarden kommer sedan ligga till grund för en style guide som ska visa mer specifika komponenter som färger, teckensnitt, mönster, bildspråk och ikoner som kommer användas vid utformningen av applikationen.
3.3.2 Hi-Fi-prototyp
En Hi-Fi-prototyp, även kallad datorprototyp, är till skillnad från en Lo-Fi-prototyp mer detaljerad gällande både design och interaktion. Det som kan testas av en Hi-Fi-prototyp är produktens design och känsla men också effektivitet och generell användarupplevelse. Enligt Arvola 2014 är det bara nödvändigt att implementera och utveckla de funktioner inom gränssnittet som ska testas och låtsas som att resterande delar av prototypen är fungerande. För att göra Hi-Fi-prototypen levande används ofta ett datorprogram som lätt kan byta mellan produktens olika tillstånd. Beroende på vad man ska implementera i prototypen passar sig olika datorprogram bättre att utveckla prototypen i. Syftet med Hi-Fi-prototypen är att ge användaren en helhetsbild av produkten Arvola, 2014 .
3.3.3 Användartest och värdering
För att ta reda på om prototypen uppnår de uppsatta målen genomförs en sista användartestning som mäter designens helhet och användning. Till skillnad från
specifika mätningar utöver den generella användningen. Det kan handla om att man vill mäta hur fort en uppgift genomförs eller hur väl en användare klarar av uppgiften Arvola, 2014 .
Under användartestet genomför varje deltagare en rad uppgifter där antalet klick mäts, sk. degree of success Arvola, 2014 . Detta för att mäta hur bra användaren klarar av uppgifterna som ges. Uppgifterna som deltagarna kommer få under testet är fokuserade på att navigera i applikationen i en potentiell användarsituation. Under användartestet kommer deltagarna bli ombedda att tänka högt, detta för att upptäcka eventuella brister i interaktionen.
Efter användartestet kommer en utvärdering gällande testdeltagarens generella nöjdhet att genomföras, testdeltagarna kommer då att få besvara en standardiserad system usability scale-enkät hädanefter SUS . Albert och Tullis 2013 beskriver SUS och förklarar hur man använder sig av mätmetoden. SUS-enkäter är en vanligt förekommande metod för att bedöma den upplevda användbarheten av en produkt eller tjänst. Enkäten består av tio stycken frågor där varje svar på frågorna ska registreras på en skala 1-5 beroende på överensstämmelse i frågan. Resultatet kan räknas i poängenheter där hundra poäng representerar ett perfekt resultat. Albert och Tullis 2013 redogör också för hur resultatet av SUS-enkäterna beräknas, vilket är den metod som kommer följas.
4. Förstudie
Första delen av förstudien, den inledande studien se bilaga 1 , gav insikter i vad som är positivt och negativt med olika sätt för att söka information om aktiviteter. Det framkom att det fanns ett intresse för en applikation som samlar intressepunkter i en stad utefter ens egna intressen och förutsättningar. Resultatet från enkätsvaren användes som utgångspunkt för framtagandet av intervjufrågor till de semistrukturerade intervjuerna se bilaga 2 , där mer djupgående förståelse för potentiella användares behov anskaffades.
4.1 Inledande studie
Enkäten distribuerades genom att publiceras på designgruppens privata Facebook-konton. Totalt deltog 50 respondenter under de tre dagar enkäten var tillgänglig. Alla deltagarnas enkätsvar var anonyma.
4.1.1 Föredragen plattform
Majoriteten av respondenterna föredrog att använda sig av webbsidor i mobilformat 84%, 42 st för att söka information om aktiviteter. Ett stort antal svarande föredrog även webbsida på dator 60%, 30 st eller att fråga bekanta 60%, 30 st . Många ansåg att prata med bekanta kändes som en genuin och pålitlig informationskälla och enkätsvaren visade att höra andras åsikter och upplevelser av aktiviteter var av högt intresse. Många tyckte att webbsidor både i mobilt och stationärt format gav en stor bredd av information, men att mobilt format också var smidigt att ha med sig samt att det går fort att få tag på information. Respondenter som föredrog att söka upp information genom en guidebok såg fördelar i att det fanns begränsat med information men nackdelen att informationen kunde vara utdaterad. Majoriteten av respondenterna använder flera olika metoder för att söka upp information om aktiviteter under eller inför en resa.
4.1.2 Intresse av individanpassning
I enkäten ställdes frågan om respondenterna trodde att det skulle underlätta att använda en funktion som sorterade aktiviteter efter intressen och förutsättningar, varav majoriteten svarade Ja 74%, 37 st . En mindre andel svarade Vet inte 18%, 9 st och ännu färre svarade Nej 8%, 4 st . Respondenterna som svarade Ja ansåg att funktionen skulle bidra med snabbare sökningar och tyckte att individanpassning var en positiv aspekt. Medan de som svarade Nej tyckte att det skulle vara synd att missa aktiviteter man kanske inte visste om att man skulle uppskatta. Ett av de svaren löd Ibland vill man faktiskt se de aktiviteter som ‘inte’ skulle passa också. Man åker ju ofta bort för att göra nya saker.
4.1.3 Viktiga faktorer
De faktorerna som var viktigast när respondenterna sökte efter aktiviteter visade sig vara pris 90%, 45 st , avstånd 80%, 40 st , transportmöjligheter 60%, 30 st och kategori musik, sport, kultur etc. 66%, 33 st .
4.1.4 Intresse av applikation
Vid frågan Om det fanns en app till telefonen som sorterar aktiviteter efter dina intressen och förutsättningar, skulle du använda den om du skulle resa någonstans? svarade 35 st 70%
Ja , 13 st 26% svarade Kanske och 2 st 4% svarade Nej . Respondenterna som svarade Ja ansåg att det var smidigt och skönt med personlig anpassning. Respondenterna som svarade Kanske kände inte så stort behov av en sådan applikation, tyckte att det kunde bli för turistigt eller ville helst inte att ha så många appar i telefonen. En av respondenterna som svarade Nej menade att en bred sökning på internet är enklare än att ladda ner appar.
4.2 Semistrukturerade intervjuer
Intervjuerna hölls den 2 april 2020 med totalt 5 deltagare. Två av intervjuerna hölls med fysisk närvaro och tre av intervjuerna hölls genom digitala hjälpmedel. De personer som var
rekryterade för intervjuerna och observationerna var personer som under det senaste året har flyttat till Norrköping. Samtliga deltagare var förstaårs- eller andra års-studenter på Linköpings Universitet. Första delen av intervjun berörde deltagarnas kännedom om Norrköping innan de flyttade hit samt deras intresse av att upptäcka Norrköping som stad. Intervjuns andra del bestod av en observation av Upplev Norrköpings hemsida. Totalt tog varje intervju ca 15 minuter.
4.2.1 Intervju
Alla intervjudeltagarna hade bott i Norrköping under mindre än 2 års tid varav majoriteten under mindre än ett år. Tre av fem deltagare hade sedan tidigare besökt Norrköping vid ett fåtal tillfällen medan de två övriga aldrig varit i staden innan de flyttade dit.
Majoriteten av deltagarna sökte inte upp någon specifik information om aktiviteter i Norrköping innan de flyttade till staden. En av deltagarna uppgav att fokuset då låg på praktiska saker gällande flytten istället. En annan deltagare sade att denne hade en familjemedlem som bodde här sedan innan och fick tips via denna.
Tre av fem intervjudeltagare menade att de har utforskat staden under den tiden som de bott här, detta hade de gjort genom tips från kompisar och google-sökningar. En av dessa
deltagare sa att hen hade fått se mer av staden genom att hen jobbar i en annan stadsdel. De två som uppgav att de inte hade utforskat staden sa att de gärna hade velat göra det.
Fyra av fem deltagare uppgav att de gärna hittar på nya aktiviteter att göra på deras fritid. På frågan Hur hittar du nya aktiviteter att göra på din fritid? svarade de flesta att de söker upp information via internet genom sökmotorer eller Facebook-evenemang samt genom kompisar och människor i deras närhet.
De funktioner och komponenter som intervjudeltagarna skulle föredra i en applikation där man kan hitta aktiviteter i Norrköping var en karta, en sökfunktion, att man ska kunna sortera på intresse i en lista, tips på aktiviteter, rekommendationer och tydliga ikoner. En av
deltagarna svarade att denne skulle uppskatta ett bra och tydligt flöde. Denne hade också önskemål om att det skulle vara informationsrikt och att man t.ex. ska kunna se hur lång tid en aktivitet tar.
4.2.2 Observation
Figur 1: Upplev Norrköpings startsida Upplev Norrköping u.å. a
Majoriteten av deltagarnas första intryck av startsidan se figur 1 var att den var snygg, tydlig, harmonisk samt enkel att förstå. En av deltagarna tyckte att startsidan var plottrig förutom headern som visar de tre kategorierna tydligt.
Figur 2: Upplev Norrköpings undersida Se & Göra Upplev Norrköping u.å. b
Deltagarnas första intryck av kategorisidan Se & Göra se figur 2 varierade. Tre av fem deltagare ansåg att kategorisidan var svår att följa och att intressepunkterna i flödet inte var relevanta längre. Flera deltagare ansåg även att tydliga kategorier saknades. Två av fem deltagande ansåg att kategorisidan Se & Göra var enkel att förstå och att det var bra att de olika intressepunkterna hade markeringar med de kategorier som den tillhör.
Figur 3: Upplev Norrköpings filtreringsfunktion Upplev Norrköping u.å. b
Deltagarnas första intryck av filtreringsfunktionen se figur 3 var generellt att det saknades en tydlig hierarki i rubrikerna och att överrubrikerna var svåra att skilja från underrubrikerna. Många tyckte att den var enformig men enkel att använda. En av deltagarna önskade även att kategorierna skulle vara i alfabetisk ordning.
Utöver de kategorier som redan fanns i filtreringsfunktionen skulle deltagarna också vilja sortera intressepunkter efter plats, tid på året, tidpunkt, vad som finns i ens närhet, målgrupp och hur lång tid en aktivitet tar.
4.3 Observation av befintliga applikationer
Eftersom turistinformation förflyttat sig mer och mer till digitala plattformar se 2.8 gjordes en observation av befintliga applikationer för turistinformation och aktivitetsguider, för att få en uppfattning av hur dessa är uppbyggda och utformade. Applikationerna som observerades var Stockholm Travel Guide, Stockholm Travel Guide - Triposo, Stockholm - Travel Guide & Offline Map samt Stockholm City Travel Guide - GuidePal, som alla finns att ladda ned i App Store. Det som undersöktes i vardera applikation var sidornas struktur och innehåll, vilka funktioner som finns samt olika elements placering.
Det som var återkommande i samtliga applikationer var en lista samt en karta över
intressepunkter se 2.8.2 Alternative views ; en karta som visar positionen av den specifika intressepunkt som man klickat sig in på; fakta och information om staden och om varje specifik intressepunkt; samt en funktion för att filtrera intressepunkter. Flera av
applikationerna hade en funktion för att spara intressepunkter i en lista, vilket representerar designmönstret prospective memory se 2.8.7 . På flera av applikationers sidor för specifika intressepunkter fanns information om avståndet till denna, vägbeskrivning till platsen samt information om öppettider, inträdeskostnad och kontaktinformation. Alla applikationer hade en header med en sökfunktion och ett flertal hade även en menybar längst ner på skärmen, vilket visar på extern kontinuitet se 2.5 Metaprincipen .
4.4 Storyboard
Figur 4: Storyboard
Storyboarden illustrerar ett fiktivt scenario som är utgår från de insikter som kom upp i de semistrukturerade intervjuerna och observationerna. Scenariot representerar en
sammanställning av intervjupersonernas upplevelser och svar. Scenariot är följande:
En person flyttar till Norrköping. Personen har tidigare varit i staden vid enstaka tillfällen men har ingen större kännedom om vad man kan hitta på eller göra i Norrköping. Personen har en ledig helg i den nya staden och hen vill hitta på något. Personen har inga transportmedel, bortsett från kollektivtrafik, och har ingen stor budget då hen är student.
Personen googlar saker att göra i Norrköping och får upp mängder av förslag. Personen trycker sig in på en länk där hen hittar en lång lista på aktiviteter i staden. Personen bläddrar och bläddrar men känner sig överväldigad av alla de alternativ som finns.
Istället kontaktar personen en bekant som bor i Norrköping. Personen får tips av den bekanta om en aktivitet som skulle passa hen, frisbeegolf! Kul, tycker hen. Personen går och köper en frisbee och spelar frisbeegolf. Personen tänker att hen inte hade fått reda på aktiviteten om hen inte fått tips från sin bekanta. Personen önskar att det hade funnits ett snabbare och smidigare sätt att få reda på aktiviteter som passar hen.
5. Designarbete
I detta kapitel kommer designarbetet att redovisas i en successiv process.
5.1 Bearbetningsfasen
Bearbetningsfasen innefattande en brainstormsession där alla möjliga sorters tankar om applikationen kom upp. Dessa bearbetades och kategoriserades i kravspecifikationen för att vidare struktureras i en webbkarta. Utifrån detta gjordes sedan inledande skisser över gränssnittet som till sist mynnade ut i en pappersprototyp redo för användartester.
5.1.1 Brainstorm
Under den inledande brainstormsessionen togs idéer fram om applikationen gällande funktioner, gränssnitt och känsla med utgångspunkt i insikterna från föregående fas. Tre väsentliga tankar som kom upp under sessionen var följande:
- Känslan av applikationen ska vara som en kompis eller bekant som känner till Norrköping bättre än användaren. Förstudien visade att folk gärna frågar en vän om tips när de ska resa någonstans.
- Att kunna favoritmarkera intressepunkter som sparas i en lista ansågs som en användbar funktion då användaren ska kunna spara intressepunkter som denne är intresserad av till senare tillfälle.
- Att det borde inkluderas en informationssida om Norrköping där man kan läsa fakta och historia om staden.
5.1.2 Kravspecifikation
Baserat på intervjuerna i förstudien listades krav för applikationens funktioner och användning utifrån på de potentiella användarnas behov. Dessa innefattar att kunna se intressepunkter på en karta och att kunna söka i applikationen.
Återkommande mönster av funktioner som upptäckts i observationen av befintliga
applikationer lades till. Dessa funktioner ansågs även nödvändiga och grundläggande för den applikation som ska utformas i arbetet. Funktionerna infattade en sökfunktion, en
filtreringsfunktion, en karta som visar var intressepunkten är placerad, vägbeskrivning, sparade intressepunkter, information om var man kan boka eller köpa biljett till en aktivitet samt inställningar. Dessa lades till för att uppnå extern kontinuitet se 2.4 då applikationer ofta påminner om varandra gällande gränssnitt och innehåll. Det är viktigt med både extern och intern kontinuitet då användaren lättare kan känna igen sig och därmed navigera i applikationen.
Efter att ha tagit fram krav utifrån resultatet av förstudien och observationen slogs de samman med idéerna från brainstormsessionen, då de i stor utsträckning sa samma sak. Kraven
listades först generellt för att sedan delas in kategorier se tabell 1 .
Vid listning av kraven identifierades fyra olika kategorier: aktivitetsöversikt, aktivitetsspecifik, funktioner och övrigt. Den första kategorin innehåller olika sätt och vyer som
som ska finnas om varje enskild intressepunkt. Den tredje kategorin samlar de funktioner som applikationen kräver för att uppfylla användarens behov. Den fjärde och sista kategorin innehåller information om staden Norrköping.
Aktivitetsöversikt Aktivitetsspecifik Funktioner Övrigt
Kunna se alla intressepunkter i en lista samt i ett grid
Läsa information om aktiviteten: vad man gör, plats, pris, varaktighet osv Filtrera intressepunkter baserat på kategori, pris, avstånd mm Information om Norrköping där man kan läsa och ta del av fakta om staden.
Kunna se var
intressepunkter ligger på en karta
Få information om hur man bokar eller köper biljett till en aktivitet
Kunna göra inställningar
Kunna se på en karta
var den specifika intressepunkten samt vägbeskrivning dit
En sökfunktion för att få fram intressepunkter och information om dessa
Spara intressepunkter i
en lista
Tabell 1: Kravspecifikation
5.1.3 Webbkarta
Webbkartans struktur utgick från kategoriseringen av kraven som tidigare fastställts i kravspecifikationen se tabell 1 . I utformandet av webbkartan togs beslut om vilka sidor i applikationen som kommer ta störst hierarkisk plats i gränssnittet. Dessa var listan över intressepunkter, kartan över alla intressepunkter, sparade intressepunkter och information om staden. Listan och kartan fick utgöra de största punkterna då dessa anses uppfylla
applikationens huvudsyfte, att upptäcka intressepunkter i Norrköping, där listan fungerar som startsida. De andra två, tillsammans med den aktivitetsspecifika sidan, utgör mindre punkter då de inte har fullt lika stort hierarkiskt fokus i applikationen, men fortfarande är av stor vikt för syftet och användarupplevelsen. De minsta punkterna representerar funktioner och innehåll som man når via de olika sidorna.
Figur 5: Webbkarta
5.1.4 Inledande skisser
Applikationens övergripande struktur som fastställts i webbkartan användes som
utgångspunkt för de inledande skisserna, tillsammans med designmönster se 2.8 . Till en början skedde skissandet individuellt, sedan diskuterades, värderades och kombinerades skisserna gemensamt. De inledande skisserna se bilaga 3 illustrerade variationer av hur gränssnittet i applikationen skulle kunna se ut, där olika alternativ på utseende och placering av funktioner, knappar och listor togs fram. De inledande skisserna utgjorde sedan grunden för Lo-Fi-prototypen.
5.1.5 Lo-Fi-prototyp
Lo-Fi-prototypen gjordes i papper med skisser över användargränssnittet se bilaga 4 . Detaljeringsnivån hölls låg då fokuset låg på den generella idén och förståelse av flödet snarare än applikationens utseende. Det gör även att en större öppenhet för förändringar av delar i användargränssnittet behålls.
I Lo-Fi-prototypen inkluderades en lista och en karta med samma funktioner, både listan och kartan användes som alternativa vyer för att se intressepunkter. Dessa designbeslut är baserade på förstudien där ett stort intresse för en karta visades samt designmönstret alternative views se 2.8.2 . En filtreringsfunktion fanns med i pappersprototypen baserat på kravspecifikationen och förstudien, detta för att kunna sortera intressepunkter utefter ens intressen och förutsättningar. De parametrar som inkluderades i filtreringen i
pappersprototypen var kategori, avseende det område som aktiviteten sker inom t.ex. sport eller kultur samt pris, avstånd, antal deltagare och tid. En aktivitetsspecifik sida fanns också med och enligt kravspecifikationen skulle man på denna sida få tillgång till information om den specifika intressepunkten samt att man kunde favoritmarkera denna, se en
vägbeskrivning till intressepunkten samt slussas vidare till en hemsida där man kan boka eller köpa biljett. Det fanns även med en meny där man kunde se en lista över de intressepunkter
som favoritmarkerats samt inställningar för applikationen. Denna inkluderades för att spara utrymme på skärmen och det tycktes vara ett standardiserat sätt att samla funktioner.
Andra designmönster som användes i Lo-Fi-prototypen var thumbnail-and-text lists se 2.8.3 vid listvyn och designmönstret prospective memory se 2.8.7 då man kan favoritmarkera intressepunkter.
5.1.6 Användartest med fokusgrupp
Lo-Fi-prototypen testades separat av två deltagare och sedan diskuterade båda deltagarna upplevelsen tillsammans med designgruppen. Båda testpersonerna var designstudenter varav en är bekant med staden sedan tidigare. Testen tog 10 minuter per deltagare och sedan hölls en diskussion i ca 20 minuter. Innan testen blev deltagarna informerade om att deras svar var anonyma och att de när som helst fick avbryta testet om de ville.
Vid användartesten genomförde deltagarna fyra uppgifter som representerar ett användarscenario av applikationen se bilaga 5 . Under testen upptäcktes några
förbättringspunkter, exempelvis förtydligande av knappar eftersom de upplevdes vara för små och därmed uppstod tveksamhet angående om de var klickbara eller ej. Vid diskussionen framhävdes positiva delar i applikationen, bland annat att kartfunktionen i applikationen gör att man slipper söka upp själv var intressepunkten ligger, placering av intressepunkter utifrån användarens position samt att man kan spara aktiviteter på en samlad plats. En av deltagarna föreslog att det skulle vara bra med en hjälpfunktion som visar vad och hur man kan göra saker i applikationen, om man inte vet eller glömmer bort hur man navigerar i applikationen.
5.2 Detaljeringsfasen
Detaljeringsfasen inleddes med att skapa en digital skiss se bilaga 6 utifrån insikterna i användartestet av Lo-Fi-prototypen. Detta gjordes för att justera applikationens struktur och förbättra de delar som inte fungerade som tänkt i användartestet, och därmed ha en tydligare utgångspunkt inför skapandet av Hi-Fi-prototypen.
De förändringar som gjordes i den digitala skissen efter användartestet av Lo-Fi-prototypen var främst hierarkiska och interaktionsmässiga. Fyra centrala funktioner - aktivitetsöversikten, kartan, de sparade aktiviteterna och generell information om Norrköping - lades i en menyrad längst ner på sidan för enklare åtkomst och större hierarkiskt fokus. Därmed fick dessa fyra funktioner delat hierarkiskt fokus, snarare än bara aktivitetsöversikten och kartan som i Lo-Fi-prototypen, då dessa tillsammans speglar hela applikationens syfte. Den tidigare menyn ersattes med en inställningsknapp där användaren kan göra inställningar för applikationen, då den tidigare tänkta menyn inte var nödvändig när innehållet kunde placeras med smidigare åtkomst på ett annat sätt. Fler funktioner lades även till på sidan för en specifik intressepunkt. Dessa var möjligheten att visa intressepunkten på kartan samt att kunna boka eller köpa biljett till aktiviteten.
5.2.1 Visuellt formspråk och Hi-Fi-prototyp
För att skapa grafiska riktlinjer för utformningen av Hi-Fi-prototypen och därmed ge
ämnar att representera Norrköping som stad och kommer vara baserat på uttryck och objekt som förknippas med staden. En moodboard skapades för att visa en känsla och inspirera till det visuella formspråket.
Figur 6: Moodboard
Känslan från moodboarden togs med för att bestämma det visuella formspråket som
sammanfattades i en style guide. Style guiden presenterar de teckensnitt, färger samt stil på ikoner som applikationen kommer att innehålla, detta baserat på metaprincipens personlighet, hierarki och kontinuitet se 2.4 .
Figur 7: Style guide
Teckensnittet är stilrent och har tydliga former. Ikoner och knappar skapades med rundade hörn för ett mjukt och inbjudande uttryck. De rundade hörnen återfinns även på Norrköpings spårvagnars fönster.
De gula färgerna är inspirerade av industrilandskapet och dess byggnader. Gul är även en färg som sedan länge förknippas med Norrköping. Som bakgrund används en vit färg med gul ton, som tillsammans med den gråsvarta färgen skapar en relativt mjuk kontrast.
Styleguiden och likaså Hi-Fi-prototypen är utformade med hjälp av metaprincipen se 2.5 . För att skapa ett enhetligt uttryck genom hela gränssnittet är hierarki, kontinuitet och
applikationens personlighet i fokus vid utformningen. Applikationens personlighet är enkel men också mjuk och inbjudande. Formerna är runda men samtidigt utstickande och tydliga mot dess bakgrund då färgerna används kontrastrikt. Färgerna är ordnade hierarkiskt och dyker upp vid interaktion med prototypen för att användaren ska få återkoppling. Intern kontinuitet mellan applikationens olika gränssnitt uppnås genom upprepad användning av symboler, teckensnitt och bilder där de förekommer i samma storlek och layout. Layouten är hierarkiskt uppbyggd genom att objekt inom gränssnitten har olika storlek, färg, form och främst placering.
Prototypen ska återge en positiv känsla av Norrköping med dess gula färger, tydliga ikoner samt användningen av tilltalande bilder på staden och det breda utbudet av intressepunkter.
5.2.2 Användartest Hi-Fi-prototyp
Användartestet av Hi-Fi-prototypen genomfördes med 5 personer som alla fick utföra ett antal uppgifter som representerar ett potentiellt användarscenario se bilaga 7 , där antalet klick mättes. Efter användartestet fick alla deltagare besvara ett antal frågor samt fylla i en SUS-enkät se bilaga 8 . Deltagarna som testade Hi-Fi-prototypen var alla designstudenter som är relativt nya till staden. Användartesterna genomfördes under två dagar, varav 4 st den första dagen och ett dagen efter. Alla användartester genomfördes fysiskt där deltagare och designgrupp träffades på Campus Norrköping. Varje test tog ca 20 minuter totalt, varav användartestet tog 15 minuter och SUS-enkäten ca 5 minuter att fylla i efter användartestet. Innan varje användartest blev deltagaren informerad om att deras svar är anonyma, syftet med användartestet och att de fick avbryta testet när de ville.
Utförande av uppgifter
Det minsta antalet klick för att utföra uppgifterna i användartestet var 23 stycken.
Testdeltagarnas genomsnittliga antal klick var 29 stycken, vilket är 6 klick mer än det lägsta möjliga.
De flesta felklicken skedde i samband med filtreringsfunktionen eller i uppgiften där
deltagaren skulle spara Konstmuseet i favoriter. Svårigheterna i dessa moment låg i avsaknad av bekräftelse i filtreringen respektive brist i kontinuiteten mellan den generella kartan och kartan för en specifik intressepunkt.
Samtliga deltagare upplevde att det var lätt att navigera i applikationen och många tyckte att flödet var tydligt. Några deltagare påpekade att det var svårt att hitta filtreringsknappen och att den kunde ha varit mer utmärkande.
Den uppgiften som deltagarna upplevde som svårast var att filtrera intressepunkterna. En deltagare hade gärna sett att man skulle få mer bekräftelse när man klickar i sina val. En annan deltagare ansåg att det var oklart om ens val försvann eller behölls när man klickade sig tillbaka till filtreringsmenyn. I en senare uppgift observerades även att flera användare förväntade sig kunna komma tillbaka till intressepunktens specifika sida via kartnålen i vägbeskrivningen, på samma sätt som man kan nå en intressepunkts specifika sida via
kartnålen i den generella kartan. När de insåg att ett klick på kartnålen i vägbeskrivningen inte gav någon respons använde de istället bakåtpilen.
Samtliga deltagare tyckte att applikationens funktioner var relevanta, en deltagare
kommenterade att hen tyckte att hen fick upp ögonen för aktiviteter som hen inte visste om. En annan menade att det var bra att man kunde filtrera på kartan och filtrera på avstånd. Hen tyckte att det inte fanns något överflödigt i applikationen. En deltagare påpekade också att det var bra att man kan spara intressepunkter i favoriter.
Samtliga deltagare trodde att applikationen skulle underlätta för att upptäcka aktiviteter i Norrköping. Där en kommenterade att det bästa var att man kunde se vad som låg nära en själv medan en annan sade att det var bekvämt då hen tyckte att applikationens innehåll bidrog med all den information man behövde för att upptäcka staden.
SUS-enkät
Alla deltagare fick efter användartestet svara på en SUS-enkät se bilaga 8 för att undersöka deras generella nöjdhet. Samtliga frågor fick högsta eller näst högsta poäng och därmed landade medelvärdet av SUS-enkäterna på 95,5 se tabell 2 . Resultatet är beräknat med hjälp av Albert och Tullis 2013 metod för att beräkna SUS-resultat.
Fråga Testperson 1 Testperson
2 Testperson 3 Testperson 4 Testperson 5
Jag tror att jag skulle vilja använda
den här applikationen regelbundet. 4 4 5 3 5 Jag tycker att den här
applikationen är mer komplicerad än den behöver vara.
1 1 1 1 1
Jag tycker att applikationen är lätt
att använda. 4 5 5 4 5 Jag tror att jag skulle behöva
personlig teknisk support för att kunna använda applikationen.
1 1 1 1 1
Jag tycker att de olika funktionerna i applikationen fungerar väl
tillsammans.
Jag tycker det finns många saker som inte är konsekventa i den här
applikationen.
2 1 1 1 1
Jag tror att de flesta skulle lära sig den här applikationen ganska
snabbt.
5 5 5 5 5
Jag tycker att den här applikationen är besvärlig att
använda.
1 1 1 1 1
Jag känner mig väldigt säker och trygg på vad jag gör när jag
använder applikationen.
5 4 5 4 5
Jag behöver lära mig ganska mycket innan jag kan börja
använda applikationen.
1 1 1 1 1 Totalt 92.5 95 100 90 100
Medelvärde: 95.5
Tabell 2: Resultat SUS-enkät
5.2.3 Justering av prototyp efter användartest
Insikterna från användartesterna och frågorna sammanställdes och värderades för att sedan ligga till grund för justeringar av prototypen. De ändringar som gjordes efter användartestet var följande:
- Filtreringsknappen gjordes tydligare genom att skiljas från den direkta anslutningen till headern och minskas i bredd. På så sätt blir den en mer självständig komponent som enklare kan urskiljas i gränssnittet, eftersom fler av deltagarna hade svårt att hitta knappen tidigare.
- Möjligheten att ta sig tillbaka till en intressepunkts specifika sida från
vägbeskrivningen via kartnålen lades till. Detta för att det var förväntat av flera testdeltagare att använda den vägen samt för att bibehålla kontinuitet med den generella kartan.
- Bekräftelse i filtreringen lades till genom att addera en OK -knapp för att genomföra valet i filtreringen istället för att klicka på tillbakapilen, som på andra ställen i
applikationen används som escape hatch. Tillbakapilen kan insinuera att ens val blir ogjort, vilket gjorde ett par deltagare tveksamma på hur de skulle interagera med prototypen.
- En ram lades till runt knappar då det observerades under användartestet att flera
6. Resultat och värdering
I detta kapitlet presenteras det slutgiltiga resultatet samt en värdering av arbetet. I bilaga 9 finns en överblick av hela prototypen.
6.1 Slutgiltig design
Applikationen öppnas med en animation av en spårvagn som rullar in på skärmen samt texten Välkommen till Norrköping . Ett öppet och inbjudande inslag som ger en stark
Norrköpings-känsla.
Välkomstskärm
Guide
Efter den första välkomnande skärmen slussas man till en startskärm och en lista med intressepunkter se 2.8.3 Thumbnail-and-text-lists . Längst ner på sidan finns en menyrad där man kan nå applikationens huvudsidor: guiden, en karta, favoritmarkerade intressepunkter samt information om Norrköping. Man kan också ändra listan till en alternativ vy se 2.8.2 Alternative views där aktiviteterna istället är ordnade i en grid se 2.8.4 Thumbnail grid med större bilder och rubriker som ligger två-och-två bredvid varandra.
Guide lista Guide grid
På kartan kan man se en översikt av alla intressepunkter eller de intressepunkter som
filtrerats fram, vilket ger användaren ännu ett alternativt sätt att hitta intressepunkter se 2.8.2 Alternative views . Man kan även se sin egna position och var intressepunkterna ligger i förhållande till var man själv befinner sig. Från kartan kan man klicka på en kartnål för att komma till den intressepunktens specifika sida.
Karta
Filtreringsfunktion
Direkt under headern finns en filtreringsknapp där man kan filtrera de intressepunkter som visas. Knappen återkommer i alla tre vyer av intressepunkter - listan, griden och kartan se 2.8.8 Visual framework - och är placerad på samma ställe på dessa sidor för att uppnå kontinuitet se 2.4 Metaprincipen .
Filtreringsfunktion
När man favoritmarkerar en intressepunkt så hamnar denna på sidan favoriter som ligger i menyraden. Denna sida är en samlingsplats av intressepunkter som man är intresserad av, funktionen kan också användas som en kom-ihåg-funktion se 2.8.7 Prospective memory .
Favoritmarkering
Om Norrköping
På denna sida finns generell information om Norrköping, som exempelvis stadens historia, kultur och annan kuriosa. Här kan användaren få bakgrundsinformation om staden som kan komplettera resterande innehåll i applikationen, skapa en förhöjd upplevelse och samla all information på den digitala plattformen se 2.8 .
Om Norrköping
På de fyra huvudsidorna återkommer en header där man kan nå inställningar för
applikationen samt en sökfunktion. På resterande sidor ersätts funktionerna i headern med ett kryss eller en tillbakapil för att kunna gå bort från sidan.
Header
Intressepunktsspecifik sida
Varje enskild intressepunkt har en egen sida där användaren kan läsa information om intressepunkten, samt se öppettider, adress, kontaktuppgifter och annan nyckelfakta. På denna sida finns även funktioner för att kunna se intressepunkten på en karta i förhållande till användarens position och se en vägbeskrivning dit, bli slussad till en sida där man kan boka eller köpa biljett samt kunna favoritmarkera intressepunkten.
Intressepunktsspecifik Intressepunktsspecifik forts. Intressepunktsspecifik - se på karta
6.2 Värdering av slutgiltig design
Målet med användartestet av Hi-Fi-prototypen var att avgöra hur väl varje deltagare klarade av uppgifterna som gavs under testet. Det genomsnittliga antalet klick var 6 st fler än det minimala antalet klick. Med tanke på att deltagarna aldrig sett eller använt applikationen tidigare och därmed inte har någon inlärning för den, så anses antalet klick som deltagarna fick under användartestet som ett positivt resultat. Den medhavda feedbacken från
användartesterna gjorde att designen kunde utvecklas ytterligare på detaljeringsnivå.
Syftet med applikationen är att den ska användas och underlätta för att upptäcka
intressepunkter i Norrköping. Samtliga deltagare vid användartestet, vilka alla är potentiella användare, svarade att de trodde att applikationen skulle uppnå detta. I den mån att alla
deltagarna trodde och tyckte detta så anses designen ha uppnått sitt syfte och mål som helhet. Men däremot så har designen inte prövats ytterligare i praktiken, vilket skulle stärka antagandet.
Resultatet från SUS-enkäten fick medelvärdet 95,5 poängenheter. Enligt Albert och Tullis 2013 är 95,5 ett väldigt bra resultat av en SUS-enkät då 100 är det maximala värdet. Det vi kan avläsa från SUS-enkäten är att designen är välgjord och användarna tycks få en positiv användarupplevelsen av applikationen.
7. Slutsats
Arbetet av prototypen för Välkommen till Norrköping genomgick både teorier för
användarupplevelse och interaktionsdesign samt teorier inom design och visuell utformning, detta för att skapa en god helhet. Designarbetet började med att ta reda på om intresset för applikationen fanns samt vilket innehåll som de potentiella användarna önskade att inkludera. Det som upptäcktes var att intresset för vad som skulle bli Välkommen till Norrköping
existerade och att användare önskade lättillgänglig information om närliggande
intressepunkter i staden. Olika koncept togs fram och utvärderades för att sedan ta form i ett gränssnitt som förfinades genom skisser i flera olika steg, för att till slut byggas ut till den användbara prototypen. Utvecklingen av applikationen är succesivt utvärderat på olika detaljeringsnivåer genom användartester, intervjuer och observationer. Baserat på resultatet från dessa moment har förändringar skett som drivit arbetet framåt och till det bättre.
Med avseende till uppsatsens syfte har applikationen Välkommen till Norrköping utvecklats i form av en användbar digital prototyp för att besvara frågeställningen. Den interaktiva
prototypen fick mycket bra respons samt ett högt SUS-resultat vid användartester och därmed har en positiv användarupplevelse uppnåtts, vilket var det initiala målet med applikationen och arbetet i stort.
