Anpassning av en hemsida för mobilt bruk

Transkript

1 LiU-ITN-TEK-G--14/045-SE Anpassning av en hemsida för mobilt bru Eri Thorngren Department of Science and Technology Linöping University SE Norröping, Sweden Institutionen för teni och naturvetensap Linöpings universitet Norröping

2 LiU-ITN-TEK-G--14/045-SE Anpassning av en hemsida för mobilt bru Examensarbete utfört i Grafis design och ommuniation vid Tenisa högsolan vid Linöpings universitet Eri Thorngren Handledare Jonas Lundberg Examinator Tommie Nyström Norröping

3 Upphovsrätt Detta doument 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 extraordinära omständigheter uppstår. Tillgång till doumentet innebär tillstånd för var och en att läsa, ladda ner, sriva ut enstaa opior för ensilt bru och att använda det oförändrat för iceommersiell forsning och för undervisning. Överföring av upphovsrätten vid en senare tidpunt an inte upphäva detta tillstånd. All annan användning av doumentet räver upphovsmannens medgivande. För att garantera ätheten, säerheten och tillgängligheten finns det lösningar av tenis och administrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed räver vid användning av doumentet på ovan besrivna sätt samt sydd mot att doumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är ränande för upphovsmannens litterära eller onstnärliga anseende eller egenart. För ytterligare information om Linöping University Electronic Press se förlagets hemsida Copyright The publishers will eep 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 revoe this permission. All other uses of the document are conditional on the consent of the copyright owner. The publisher has taen 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 wor is accessed as described above and to be protected against infringement. For additional information about the Linöping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its WWW home page: Eri Thorngren

4 Institutionen för datavetensap Department of Computer and Information Science Anpassning av en hemsida för mobilt bru Ett examensarbete av Eri Thorngren Handledare Jonas Lundberg Examinator Tommie Nyström

5 Sammanfattning Ett företag som bedriver hunduppfödning når många av dess under via Internet och befintliga webbsida. Att en webbsida även fungerar på mobila enheter blir mer och mer vanligt då surfing via Smartphones och Tablets växer explosionsartat och år för år tar upp en allt större del av det totala användandet av Internet surfing. Detta examensarbete syftade till att via en dedutiv metod ta fram en prototyp baserat på studier inom mobil designprocess, mobilt användbarhet samt en gransning av relaterade mobila hemsidor som redan finns på marnaden. Arbetet belyste de aspeter som bör tas i beatning för design inom ett mobilt användningsområde. Begränsningar av särmstorle, tid, mindre uppmärsamhet etc. gjorde det vitigt att sidan designades med avseende för detta ändamål och arbetets mål var att sapa en prototyp för hur en mobil version av sidan sulle unna se ut. Frågor gällande rätt mängd information på mobilhemsidan samt passande designmönster låg i fous för att lösningen sulle vara användarvänligt men samtidigt innehållsmässigt tillfredsställande. En prototyp sapades och testades via valitativa intervjuer. Då antaganden gällande prototypens design till viss del beräftades uppom även, via användarnas feedbac, behov av att göra vissa ändringar. Resultatet av rapporten belyste viten av hur strutur och siduppbyggnad måste brytas ned från en webbsida och återsapas för att passa i ett mobilt användningsområde. Samt hur användandet av orreta designmönster och rätt mängd innehåll, rävdes för att sapa en snabb, lättanvänd och innehållsmässigt orret sida för användning i ett mobilt sammanhang.

6 Innehållsförtecning 1. Inledning Bagrund Problembesrivning Syfte och frågeställning Metodbesrivning Avgränsningar Förstudie Tidiga eran Smartphones (mobil PDA) iphone 3 2. Teori Designprocess Målgrupp, syfte och innehåll Wireframe Mönster Prototyp Användbarhet ISO Nielsen Tillämpning av användbarhet i mobil ontext PACMAD Val av definition Empiri Val av webbappar Gransning av befintliga webbappar toyota.se/mobile/ m.bmw.se volvocars.se honda.se/cars Sammanfattning av Empiri Innehåll Navigering Uppgiftshantering, hastighet Användbarhet, ontexten & ognitiv belastning Felhantering Metod Designprocess Målgrupp, syfte och innehåll Wireframe 34

7 4.1.3 Val av mönster & prototyp Användbarhet Prototyptest Resultat av prototyptest Ändringar Resultat & slutsats Frågeställning Frågeställning Validitet och generaliserbarhet Disussion till vidare forsning 49 Referenser 51 Bilaga 1 53 Bilaga 2 55 Bilaga 3 64

8 1. Inledning 1.1 Bagrund Att unna surfa på sin mobiltelefon anses idag som en självlarhet. Sedan introduceringen av Wireless Application Protocol (WAP) för mobiltelefoner 1997 där endast enla sidor med text och länar unde sapas har utveclingen snabbt gått framåt (Nielsen & Budiu, 2012). Idag an man handla, boa hotell samt göra det mesta en traditionell hemsida larar diret i sin mobiltelefon. Tac vare utveclingen samt lanseringen av smartphonen har användningen av mobilsurfing dubblerats år för år och ligger nu på 27% ontra användandet av datorer (gs.statcounter.com 2014). Företag ser denna trend och det tillhör oftast ovanligheten att inte hamna på en mobil version (fortsättningsvis hänvisad som webbapp) när man använder sin mobiltelefon för att nå den önsade hemsidan. Att företag tar fram webbappar ses som en nödvändighet då användare, rättfärdigat, ommer räna med att en hemsida ommer fungera även på deras mobila enheter (Castledine, Eftos & Wheeler 2011). 1.2 Problembesrivning Utveclingen inom mobiltelefoni har banat väg för ett stort antal appliationer som an användas av männisor på resande fot. Då mobiltelefonen är utformad för att möjligöra användning vart man befinner sig, hänger därför en stor del av framgången för en webbapp på hur den påverar användarens mobilitet under användningen (Harrison et al. 2013). Exempelvis an en webbapp inte räva så pass mycet uppmärsamhet så att användaren måste stanna upp för att unna naca (i dator term; lica) på en län när han promenerar. På grund av sillnader i bland annat en mobiltelefons upplösning och särstorle är det en nödvändighet att sidan anpassas på ett orret sätt för att vara ompatibel med telefonen (Castledine, Eftos & Wheeler 2011). För att lycas med utformandet av en webbapp an inte bara innehållet säras ned utan snarare måste appens funtioner delvis överlappa och omplettera motsvarande PC-versionens funtioner (Barbara, 2007). En bedömning för att avgöra vad, samt hur mycet som an visas på särmen samtidigt är således vitigt för att uppnå ett lycat resultat. Den mobila miljön i sig innebär att användandet påveras ytterligare via ontexten produten används i, samt övrig ognitiv belastning. Då en webbapp slutligen hanteras med ort uppmärsamhet, ontra den fulla upplevelsen av en PC version (Barbara, 2007) är hastighet en vital del i framtagandet. Målet är att ge användaren vad han vill ha, snabbt. (Castledine, Eftos & Wheeler 2011). 1

9 1.3 Syfte och frågeställning Syftet med detta examensarbete är att designa en webbappsprototyp för Arbetet redogör för beslutsfattande inom mängden information att inludera i den nya sidan, samt övriga designval som påverar webbappens användbarhet i en mobil inramning. Detta arbete avser att svara på frågeställningen: - Hur anpassas en sida för att visa lämpligt innehåll i ett mobilt användningssammanhang (mobil ontext)? - Hur optimeras användbarhet (usabillity) för användaren av webbappen? 1.4 Metodbesrivning Projetet utgår från en dedutiv metod där teorier inom ämnet ligger till grund för en hypotes som via observationer testas mot verligheten (Bryman, 2002). Befintlig litteratur och studier inom användbarhet, med vit på fördjupad forsning inom ämnet mobil usability, i samband med rön om designprocess ligger som teoretis grund för arbetet. För att öa validiteten i arbetet används funna riterier i teoriavsnittet vid gransningen utav existerande webbappar på Internet (empiri). Teori samt empiri utmynnade sedan i ett designförslag av en prototyp (hypotes). Prototypen testades via testanvändare och via valitativa intervjuer bedömdes sedan ifall en godtagbar lösning hade sapats. Feedbacen från testanvändarna unde således härleda om frågeställningen i ap. 1.3 hade besvarats. 1.5 Avgränsningar Arbetet begränsades till att endast sapa en prototyp för hur en designlösning an se ut för Arbetet specificerar inte programmeringslösningar, CSS eller HTML odning utan redogör endast för designvalen i prototypen. Prototypen är endast utformad för vertialt läge då det oftast är i detta läge telefoner används, samt att problematien i webbdesign för mobiler ofta involverar bristen på pixlar i bred, inte höjd (Tidwell, 2010). Ett mer utförligt test av flera olia mobiltelefoner med olia upplösningar och prestanda hade varit att önsa, men på grund av tidsbrist valdes endast en iphone 4 ut för att genomföra samtliga testerna. Tester av appen sedde i en och samma ontrollerade miljö. 2

10 1.6 Förstudie För att bättre förstå problematien runt mobilsurfing ges här en förlaring av mobiltelefonin samt det mobila nätets utvecling under åren Tidiga eran Mobiltelefoner om att utrustas med teni att visa webbsidor redan i slutet av 90- talet. Innan dess användes mobiltelefoner mestadels till att ringa, sica sms och spela spel. Men i och med att GSM (Global System for Mobile communications) -nätet fic tillsottet GPRS (General Pacet Radio Service), tillät detta nu mobiltelefoner att sica och ta emot datapaet, till exempel i form av bildmeddelanden MMS (Multimedia Messaging Service). Genomslagsraften i det nya systemet blev doc inte särsilt stor och tjänster som WAP (Wireless Application Protocol), vilet möjliggjorde tillgång till World Wide Web, om mest att användas till att för nedladdning av bagrundsbilder, ringsignaler och spel (M3, 2012). Tidigare nämnda tjänster samt möjligheten att exempelvis ontrollera sitt bansaldo gic doc smidigare att utföra via sms (Short Messages Service) som redan hade funnits på marnaden flera år. Bristande marnadsföring, låg hastighet och högt pris ses som anledningar till att mobil surfing inte slog igenom mer under denna period (Fling, 2009) Smartphones (mobil PDA) Från början av millenniesiftet bidrog det nya 3G nätet (även allad UMTS, Universal Mobile Telecommunications System) till en väsentlig sillnad i surfhastighet jämfört mot det traditionella GSM nätet. Från de 56b/s som GPRS larade av unde nu det nya nätet i teorin leverera 2Mb/s (NE, 2013). Resultatet innebar att större datamängd unde tas emot i form av bilder, musi etc. Tenisa framsteg såg nu allt fler PDA (Personal Digital Assistant) enheter med stöd för telefoni och smartphonen blev född. Dessa enheter erbjöd användaren ofta en större särm samt qwerty tangentbord fanns flera mobila webbrowsers på marnaden, men utseendet silde sig doc väsentligt från det traditionella utseendet av sidan på en PC (Schmiedl et al 2009). Trots de tenologisa framstegen och tillströmning av nya atörer stod försäljningen av smartphones doc endast på ca 10% av den mobila marnaden (Fling 2009) iphone Apples intåg på marnaden med iphone ändrade helt synen för vad mobil tenologi innebar (Fling, 2009). Då telefoner med touchfuntion och även appar doc redan fanns innan iphones lansering, om Apple ändå att revolutionera marnaden med sättet de visade hur tenologin unde användas. iphone öppnade ögonen för hur underhållande, lättanvänd och produtiv användningen av den mobila webben unde vara (Forbes, 2011). Enligt en undersöning 2008 av New Yor Times hade 85% av ägarna utav en iphone använt telefonen för få tillgång till information och nyheter via Internet. För den övriga smartphonemarnaden låg samma siffra på 58%, samt 13% för den totala mobiltelefonimarnaden. När iphone 3G senare samma år lanserades började Apple även dubblera sin närvaro på Internet varje vartal (Fling, 2009). 3

11 Lanseringen av iphone blev startsottet för den förändring av undbeteendet som marnaden rävde (Forbes, 2013). Användningen av smartphones steg år för år, och i augusti 2013 passerade försäljningen för första gången vanliga mobiltelefoner med 51,8% av marnadsandelarna världen över. ( Med hjälp av smartphonens framgång, vidareutvecling av mobilnät i form av turbo 3G och 4G samt surfplattans lansering har andelen webbsurfing fördubblats årligen sedan början 2010-talet (statcounter.com). Idag ser ca 27% av all världens webbsurfande med hjälp av mobila enheter. Figur 1 Mobil vs destop vs tablet. ( ) 4

12 2. Teori 2.1 Designprocess Designprocessen för utveclandet av en webbsida involverar mer än bara aspeter om utseende. Designen av sidan bär ansvaret för interationen mellan användaren och produten, inte bara för utseende och änslan (Kirov, 2013). Detta apitel avser att redogöra stegen i en mobil designprocess. "Design is a funny word. Some people thin design means how it loos. But of course, if you dig deeper, it's really ho it ors. - Steve Jobs Målgrupp, syfte och innehåll Innan innehållet i en webbapp an bestämmas är det vitigt att änna användarnas behov, uppgifter samt sammanhanget webbappen ommer användas i (Tidwell, 2011). Tidwell besriver vidare syftet med en mobilhemsida annorlunda emot en traditionell. Användarna av en mobilsida an omma att använda sidan på ett speciellt sätt då hon inte ommer ha samma rav som för webbversionen. En webbapp bör därför vara onstruerad med följande användningssituationer i batane: Jag ehö er eta e sa just u, s a t. Jag har ågra i uter ö er så u derhåll ig. A slut ig so ialt. O det är ågot jag ehö er eta, i for era ig. Vad är rele a t för platse jag efi er ig i just u? Castledine et al. (2011) menar att målet för alla hemsidor och webbappar borde vara att leverera det bästa innehållet och användarupplevelsen för användaren. Att bedöma vad användaren ommer vilja få ut av appen anses där vara den vitigaste aspeten i designprocessen. Castledine besriver tre nycelfrågor man bör ställa om den tilltänta användaren i förstadiet av designprocessen: Vad vill användaren? Vad förväntar de sig? Vad vill vi ge dem? Vid bedömning av appens innehåll bör fous läggas på de uppgifter som den tilltänta användaren vill uppnå. I utveclingsstadiet besrivs en urvalsprocess där tjänsterna appen an inludera ställs mot de tilltänta användarnas mål via användningen av webbappen. Här måste val av funtioner strippas från originalet och taneställningen om minsta gångbar produt, d.v.s. vila funtioner som är väsentliga för att appen sall vara till någon nytta alls, bör beatas (Fling 2009). Att hitta rätt balans mellan information och gränssnitt som sa visas i appen är en svår övervägning. För mycet detaljer an leda till att gränssnittet bli rörigt och förvirrande. För lite detaljer an doc innebära att användaren inte ommer hitta den information 5

13 han eller hon söer. Detta innebär att inte endast reducera information på sidan utan s arare att redu era lotter (Castledine et al 2011). Tidwell poängterar viten av att reducera en sida till dess ärna och att endast fousera på de uppgifter användaren ommer vilja få ut av besöet. Onödiga bilder och sidofält bör slängas och varumärningen göras minimal. Tidwell belyser även viten av att låta användare få tillgång till hela sidan om så önsas. En webbversionsnapp bör därför placeras någonstans i designen Wireframe En wireframe är det första steget där en lösning sissas fram. Det är inte en visuell design av projetet (Mendoza, 2013). Meningen med en wireframe är att sapa ett format och flöde för den mobila appen. Här läggs grundarbetet ut och designomponenter, i from av navigering, formulär, textfält definieras. Via en wireframe definieras innehåll samt interationer i appen. Wireframes används även för att få ett berättande i appen. Hur ommer användaren välomnas in i appen? Vad ommer de att göra där? (Mendoza, 2013). Innan en wireframeprocess an inledas måste riterier som särmens upplösning, vila interationer användaren an göra samt vilen plattform appen är utveclad för definieras. Först då an ett användargränssnitt med innehåll och navigering börja sissas för att låta saparen få en första inblic i hur lösningen an omma att se ut. Särmstorle och upplösning I en wireframe måste valet eller valen av flera särmstorlear vara tydligt definierade. Input Det är även vitigt att lart largöra för input gesterna i wireframen. Exempel an vara svepningar, inzoomning, utzoomning samt 2 seunders nipningar. Olia enheter, responsiv design I en wireframe relateras normalt responsiv design, dvs. en sidas förmåga att anpassa innehåll baserat på enhetens specifiationer i form av upplösning. Då upplösningen doc tidigare definierades räver ändå en webbaserad lösning att appen an stödja en viss avvining i upplösning och storlet (Mendoza, 2013). I wireframen bör således exempel på hur marginaler an utöas och reduceras beroende på olia enheter vara definierade. Denna rapport endast avser att sapa en prototyp för iphone 4 bortses denna aspet. 6

14 Flöde (screen flow) Något som aratäriserar en mobil wireframe är bristen på särmstorle. Att omvandla handlingar för en sida till ett flöde (med ett visst antal steg) är en lösning då målet för en mobil användarlösning är att begränsa uppgifter till lagom stora bitar. Exemplet nedan visar hur processen att titta på bilmodellen Prius via Toyotas webbsida har delats upp från ett steg i webbversionen till två steg för mobilversionen då webbsidans alla valmöjligheter inte sulle unna få plats i webbappen. Figur 2 Toyotas webbsida. ( ) Länen hittas ovan omgående på webbsidan. Figur 3 Toyotas webbapp. ( ) Länen hittas här istället via två steg i navigeringen för webbappen. 7

15 2.1.3 Mönster För att sapa den mest optimala upplevelsen behöver man börja med en definierad uppsättning mönster som redan är framgångsria (Mendoza, 2013). I detta apitel presenteras ett antal mönster passande för mobila appliationer tillsammans med dess för och nacdelar. Lista Listnavigering är det mest vanliga designmönstret för mobila appliationer. Information på sidan listas via mönstret från topp till botten och låter användaren svepa genom innehållet. Mönstret sapar navigations hierari som låter användare arbeta sig ner en trädstrutur. Exemplet i figur 4 (nedan) visar hur användaren via mönstret presenteras för ett antal rubrier och längre ned får välja artilar att läsa. Figur 4 Lista. Build Mobile Websites and apps for smart devices. First edition. Sida: 20 (2011) Fördelar Flexibel nog att hantera stora mängder data Välbeant och enel att använda Nacdelar Naturligt hieraris 8

16 Användarna måste gå tillbaa till början för att ändra sövägar (Castledine, Eftos & Wheeler 2011) Hamburgarmeny En hamburgarmeny eller panelmeny med dess tre horisontella linjer an linas med en dropdown-meny som i expanderat läge har möjlighet att visa många navigationsval. Vissa appar tillåter onstant tillgång till denna meny via en svepning från vänster till höger alternativt höger till vänster. Andra räver en nacning på själva ionen för att få tillgång till menyn. Figur 5 Hamburgarmeny. ( ) Fördelar Menyn syns bara då den är expanderad. Tar liten plats i headern Ionen är fixerad och alltid synlig Lätt igenännlig Nacdelar Visar inte atuell sida i ontraherat läge (Mendoza, 2013) Karusell Ett arusellmönster innebär att innehåll på sidor presenteras sida vid sida och låter användaren svepa fram och tillbaa emellan dem. Mönstret används ofta då mycet information visas i ombination med lite interation på sidan. Alla fönster är vanligtvis av potentiellt intresse för användaren, därav störs han eller hon inte av att bläddra igenom flera stycen sidor tills rätt styce nås. 9

17 Figur 6 Karusellmönster för iphones vädertjänst. weather_hourly_forecasts.png ( ) Fördelar Enel att använda Använder hela särmen för att visa innehåll Kräver en naturlig rörelse för navigation (svepning) Nacdelar All information behöver få plats på den ensilda särmen samtidigt Alla sidor måste se onceptuellt liadana ut Användarna måste gå ett steg framåt i sevensen, det går inte hoppa framåt fler steg samtidigt (Castledine, Eftos & Wheeler 2011) Bottennavigering Botten navigering är en meny under flödet som endast är synlig när sidan scrollas ned. Denna typ av navigering används för sidor där vissa navigeringsvertyg måste finnas, fast dessa är av låg prioritet för användaren. Huvudmålet med sidan är att visa nytt färst innehåll, inte navigering. Fördel med denna metod är att den sparar plats för innehåll och nacdelen att navigationen sätts i symundan. 10

18 Figur 7 Bottennavigering. ( ) Fördelar Lämnar plats för hela särmen att visa innehåll Får plats med många menyval då det inte råder platsbrist Nacdelar Försvårar navigering (Mendoza, 2013) Flifälts navigering Fli-nappar presenterar en lista av val, antingen via text eller thumbnails. Fli-nappar är användbart för att snabbt etablera strutur i navigeringen. Det låter användarna enelt flytta mellan olia ategorier i navigeringen, och fungerar även som ett anare då användaren ser vilen atuell ategori som är vald. 11

19 Figur 8 Flifälts navigering. Build Mobile Websites and apps for smart devices. First edition. Sida: 19 (2011) Fördelar Erbjuder en välbeant navigering till användaren Erbjuder enelt sifte mellan olia ategorier Indierar atuellt ategori i navigeringen Nacdelar Platt hierari, sanar möjlighet för undersidor Syns alltid på särmen, tar upp plats Hanterar bara upp till fem nappar effetivt, och är otymplig vid fler. (Castledine, Eftos & Wheeler 2011) Prototyp Definitionen av en prototyp är processen av att sapa ett provexemplar innan slutversionen sapas. Tac vare en prototyp an användarnas interation med den mobila appliation mätas och detta ränas som en ritis del i optimeringen av en mobil upplevelse. Målet med prototypen är att ge positiv feedbac av innehållet samt användbarheten. Pappersprototyp En pappersprototyp an användas för att snabbt samla in information eller sapa fler 12

20 idéer (Mendoza, 2013). I denna metod används ett pappersar med utsrivet sal av enheten för att sissa ned en svartvit design av layouten. Pappersmodeller tillför många egensaper som an hjälpa till att få insit i hur gränssnittet påveras. Exempelvis an ett tangentbord lippas till och överlappa designen, en sida an göras scrollbar etc. Sisser går i processen över till datorgenererad grafi och efter alla sidor är sapade an en färdig prototyp presenteras. En stor fördel med pappersprototyper är dess mobilitet. Att sapa en spelortslinande protot p för appliatio e, där alla sär ar represe teras av ett ort öjliggör för tester i ett mobilt sammanhang, exempelvis på ett tåg eller i en par (Mendoza, 2013). 2.2 Användbarhet Då extra vit ommer läggas för användbarheten i webbappen redogörs här befintlig forsning inom ämnet. Det finns inte en överensommen definition av användbarhet då flera författare har föreslagna definitioner och ategoriseringar av användbarhet. I denna rapport används begreppet användbarhet att fousera på användargränssnittet. - Hur enel och effetiv produten är att använda. Nedan ges några definitioner av begreppet ISO International Standards Organisation (ISO) är en internationell standard som utarbetats i samarbete med flera olia parter och är en del av en större standard. Modellen är en sampling ritlinjer för användarvänlighet och användarcentrerad design. Där definieras användbarhet som: De utsträ i g till ile e spe ifi erad a ä dare a a ä da e produt för att uppnå specifia mål, med ändamålsenlighet, effetivitet och tillfredsställelse, i ett givet a ä d i gssa a ha g ISO-standarden definieras av tre nycelord som finns med i bedömningen av användbarheten hos en produt: Kraftfullhet Detta nycelord besriver i vilen utsträcning ett mål eller en uppgift är uppnådd. Effetivitet Här besrivs till sillnad från raftfullheten den grad av ansträngning som rävts för att slutföra och uppnå målet eller uppgiften. Ju mindre ansträngning desto bättre effetivitet. 13

21 Tillfredsställelse Detta nycelord refererar till graden av tillfredsställelse och positiva änslor som produten frambringar då den används. ISO-modellen understryer även att användbarhet är beroende utav ontexten av användningen och att nivån på användbarhet beror på särsilda omständigheter då en produt används. Kontexten av användning består av användare, uppgifter och utrustning samt den fysisa och sociala miljön som den tänta produten ommer att användas inom ( Figur 9 ISO-modellen. ( ) Nielsen Nielsen definierar användbarhet: Användbarhet är en valitetsattribut som bedömer hur enelt användargränssnitt är att använda. Ordet "användbarhet" hänvisar ocså till metoder för att förbättra enelanvändning under designprocessen. ( Användbarheten bedöms med fem stycen omponenter: Lärbarhet Hur lätt är det för användaren att utföra grundläggande uppgifter för första gången? 14

22 Effetivitet När användarna väl lärt sig designen, hur snabbt an de då utföra uppgifter? Minnesbarhet När användarna återvänder till systemet efter en period, hur lätt an användarna då hitta tillbaa till samma tempo? Fel Hur många fel gör användaren, hur allvarliga felen, samt hur lätt är det att återhämta sig från dessa fel? Tillfredsställelse Hur behagligt är det använda systemet? Nielsen definierar även att ett systems pratisa acceptans är beroende av flera attribut. Nyttan med en produt inluderar förutom användbarhet även attributet funtionalitet, dvs. egensapen av ett system att möta raven från användaren. Om en produt misslycas med funtionaliteten spelar således användbarheten ingen roll då användaren inte an uppnå önsat resultat. I den pratisa acceptansen finns även riterier för att systemet bl.a. sall vara ompatibelt med existerande system, att systemet är pålitligt och säert i den utsträcningen att användaren an acceptera systemet fullt ut. Social godtagbarhet är även en aspet för ett systems acceptans, se figur 10 nedan. Figur 10 Neilsens system acceptans 15

23 2.3 Tillämpning av användbarhet i mobil ontext Zhang & Adipat (2005) belyser i deras forsning utmaningarna de unia funtionerna mobila enheter utgör i användbarheten av mobila appliationer. Följade listade problem måste beatas i utveclingen av en hemsida i ett mobilt sammanhang: Mobil ontext - När en mobil appliation används är inte användaren bunden till en enda plats. De an även interagera med fol i sin omgivning, föremål och element som an distrahera sin uppmärsamhet. Anslutningar - Anslutningar an ofta vara långsamma och opålitliga på mobila enheter. Detta an påvera prestanda för webbappar som utnyttjar dessa funtioner. Liten särmstorle Fysisa begränsningar för mobila enheter, i synnerhet särmstorle, an avsevärt påvera användbarheten av mobila appliationer. Olia upplösning - Mobiltelefoner har oftast en begränsad särmupplösning gentemot traditionella datorer. Låg upplösning an därför försämra valiteten på information som visas på särmen av en mobil enhet. Begränsad processorraft Mobiltelefoner har ofta sämre processorapacitet samt mot datorer. Detta an begränsa appliationer lämpliga för den mobila enheten. Data inmatning Inmatningsmetoden för mobiltelefoner siljer sig från dem för datorer och räver en viss nivå av färdighet. Detta problem öar sannoliheten för felatig inmatning och minsar hastigheten för datainsamling. (Zhang, Adipat 2005) PACMAD ISO-modellen och Nilesen härstammar till stor del från utvecling av traditionella datorprogram. Till exempel var Nielsens arbete till stor del på utformningen av teleomsystem, snarare än datorprogram (Harrison et a 2013). Tillomsten av mobila enheter har presenterat nya användbarhetsutmaningar som är svåra att modellera med traditionella modeller av användbarhet. Forsning från Harrison et al (2013) menar att mobilitet öar den ognitiva belastning och ställer därför högre rav för användarvänlighet på mobila appliationer. Det är därför nödvändigt att omplettera tidigare användbarhetsmetoder och tillgodoräna hur ognitiva aspeten diret påverar användarvänligheten. Forsning från Harrison et al. syftar vidare på att många befintliga modeller för användbarhet inte anser rörlighet och dess onsevenser, såsom ytterligare ognitiv belastning. Detta försvårar arbetet för användbarhets utövare, som därför måste definiera deras uppgiftsmodell för att explicit inludera mobilitet. 16

24 PACMAD-modellen syftar till att omplettera några av de brister existerande användbarhetsmodeller har för design av mobila appliationer. Modellen bygger på befintliga teorier i användbarhet men är anpassad speciellt för appliationer som an användas på mobila enheter (Harrison et a 2013). PACMAD-modellen innehåller attributen för både ISO-standard och Nielsens modell och även introducerar attribut av ognitiv belastning som är av särsild betydelse för mobila appliationer. Figur 11 PACMAD ( ) PACMAD-modellen identifierar tre fatorer Användare, Uppgift och Användningssammanhang som alla bör beatas vid utformningen av mobila appliationer. Var och en av dessa fatorer ommer att påvera den slutliga utformningen av gränssnittet för den mobila appliationen. Användare Det är vitigt att täna på att slutanvändaren av en appliation under utveclingsprocessen. Då mobila appliationer är små an inte traditionella inmatnings metoder som tangentbord och mus användas. Designern måste därför finna ett alternativt inmatningssätt. En annan fator som bör beatas är användarens tidigare erfarenhet. Om en användare är expert på den valda uppgift då de sannolit att han eller hon ommer föredra ortommandon för att utföra denna uppgift. Nybörjare tvärtemot föredra ett gränssnitt som är intuitivt och enelt att navigera och som gör det möjligt för dem att upptäca vad de behöver. Denna avvägning måste beatas vid utformningen av appliationen. Uppgift Uppgift definieras som målet användaren försöer åstadomma med den mobila appliationen. Under utveclingen av appliationer an ytterligare funtioner läggas till för att möjliggöra för användaren att åstadomma mer med programvaran. Denna extra funtionalitet ommer på beostnad av användbarhet eftersom dessa 17

25 extrafuntioner öar omplexiteten i programvaran och därmed an användarens ursprungliga mål bli svårare att åstadomma. Kontext (Användningssammanhang) Kontext, dvs. miljö i vilen användaren ommer att använda programmet, hänvisar inte bara till en fysis plats utan inluderar ocså andra sammanhang. Exempel på detta an vara användarens interation med andra männisor, användandet av andra föremål (t.ex. en bil), samt andra uppgifter användaren samtidigt försöer genomföra. Eftersom mobila appliationer an användas medans användaren utför andra uppgifter är det vitigt att täna på effeterna av att nyttja den mobila appliationen i lämplig ontext. Utöver detta identifierar PACMAD ocså sju attribut som speglar användbarheten av ett program: Verningsgrad, Effetivitet, Tillfredsställelse, Lärbarhet, Minnesvärdhet, Fel och Kognitiv belastning. Var och en av dessa egensaper har en inveran på den övergripande användbarheten av appliationen. Verningsgrad Verningsgrad är förmågan hos en användare att slutföra en uppgift i en given ontext (ett givet sammanhang). Verningsgrad mäts genom att utvärdera huruvida deltagarna an lösa en uppsättning specificerade uppgifter via ja eller nej. Effetivitet Effetivitet är förmågan för användaren att slutföra samma uppgift (i föregående steg) med snabbhet och precision. Detta attribut speglar produtiviteten för användaren när hon använder programmet och an mätas på ett antal olia sätt exempelvis tiden det tar, eller antal muslic som rävs, för att slutföra uppgiften. Tillfredsställelse Tillfredsställelse är den upplevda omfort och trivseln som ges användaren under användning av programvaran. Detta återspeglas i attityden hos användaren gentemot programvaran. Detta mäts vanligen subjetivt och varierar mellan de ensilda användarna. Enäter och andra valitativa metoder används vanligtvis för att mäta en användares attityder till en programvara. Lärbarhet I vilen tat en användare an få unsap om ett system. En appliation sall vara lätt att lära sig behärsa och lärbarhet speglar hur lång tid det tar en användare att unna använda denna effetivt. Minnesvärdhet PACMAD-modellen lånar här definitionen från Nielsen där minnevärdhet är förmågan hos en användare att minnas hur man använder en appliation på ett effetivt sätt. Appliationen anse inte används på en regelbunden basis och an ibland endast användas sporadist. Det är därför nödvändigt för användare att omma ihåg hur man använder programmet, efter en period av inativitet, utan att behöva lära om sig det. 18

26 Fel PACMAD-modellen utvidgar besrivningen av fel från Nielsen. Här inluderas en utvärdering av de fel som görs av användaren medan appliationen används. Detta gör det möjligt för utveclare att identifiera de mest besvärliga områdena för användarna och för att förbättra dessa områden i efterföljande steg av utvecling. Fel attributet speglar annars Nielsens definition i syftet att återspegla hur väl an användaren slutföra önsade uppgifter utan fel. Användare bör göra få fel under användning och att om de gör fel bör de enelt att unna återhämta sig från dem. Kognitiv belastning Det vitigaste bidraget i PACMAD-modellen är tillägget av ognitiv belastning som attribut av använd arhet. Till sill ad frå statio ära progra a a vä dare av mobila appliationer utföra ytterligare uppgifter under användning, t.ex. att promenera. Kognitiv belastning införs därför och avser den mängd av ognitiv bearbetning som rävs av användaren för att använda appliationen. I traditionella användbarhetsstudier är de ett vanligt antagande att användaren utför endast en enda uppgift och an därför oncentrera sig helt på den uppgiften. I mobila sammanhang är det doc vitigt att beata de onsevenser användandet av den mobila enheten ommer att ha på användaren medans ytterligare uppgifter utförs. Exempelvis an en användare använda en stereo samtidigt som han eller hon ör bil. I detta scenario är det vitigt att den ognitiva belastningen som rävs av den mobila appliationen, i detta fall stereon, inte inverar på den primära uppgiften. Då appliationer används i ett mobil sammanhang påverar såväl hennes förmåga att röra sig, (vara mobil) och att använda den mobila appliationen. Därför är det vitigt att beata båda dimensionerna när man studerar användbarheten av mobila appliationer. 2.4 Val av definition Efter gransning av alla modeller valdes PACMADs definition som användbarhetsmodell. Då denna modell innehåller attributen för både ISO-standard och Nielsens modell och även lägger fous på mobilitet ansågs den mest relevant för rapportens syfte. Kriterierna i modellen ommer i resultatdelen ligga som grund för test av den övergripande användbarheten av appliationen. 19

27 3 Empiri 3.1 Val av webbappar En undersöning av relaterade webbappar utfördes för att få en insit inom trenderna för webbappars utformning och designlösningar. Gransningen av webbapparna utgic från riterier funna ur teori avsnittet. Nycelfrågor inom: navigering, uppgiftshantering och snabbhet, felhantering och orrigering, ontext och ognitiv belastning låg som underlag för gransningen. Vid urvalet av webbappar var viten att finna sidor med linande strutur av innehåll relevant. Då är en sida som presenterar information om företaget, nyheter, urval av deras avelprogram etc. drogs paralleller med biltillverare. Båda branscher utrycer ett behov av att presentera (gärna ett flertal) bilder på dess produter, samt möjligöra användaren för mer detaljerad information om dessa. - För draedram.com i form av beslätade valpar och stamtavla och för bilindustrin utrustningsnivåer, färgval etc. Bägge typer av sidor är utformade för att marnadsföra ett någorlunda snarlit antal produter. Då ett lädföretag exempelvis har hundratals produter erbjuder istället en biltillverare ca 20 stycen. - Ungefär lia många avelshundar som enneln i fråga har. Biltillverares webbappar innehåller lit draedram.com ingen undorg. På måfå valdes de fyra biltillverarna; Toyota, BMW, Volvo personvagnar samt Honda ut för gransning. Här sågs inget behov av att särsilja tillverarna efter land eller prislass. Alla webbsidor gransades fullt ut och jämfördes med deras respetive webbappar. För att förenla bedömningen av webbapparnas innehåll, navigation, hastighet, användbarhet och felhantering valdes ett antal nycelfrågor ut. Frågorna onstruerades i syfte att bedöma nycelfatorer för ett lycat gränssnitt definierat ur teorin. Nycelfrågor för gransning av sidor: 1. Hur mycet innehåll finns i webbappen? 2. Hur är appens navigering uppbyggd? 3. Hur enelt och snabbt uppfylls definierade uppgifter med webbappen? 4. Hur är användbarheten i appen och hur påverar ontexten samt ognitiv belastningen densamma? 5. Hur lätt är det för användaren att annars orrigera fel? 20

28 3.2 Gransning av befintliga webbappar toyota.se/mobile/ Figur 12 Toyotas webbsida. ( ) Figur 13 Toyoyas webbapp. ( ) 21

29 Innehåll Toyotas webbapp erbjuder användaren endast de mest grundläggande funtioner i form information av bilmodeller, ampanger, nyheter, boning av provörning samt begagnad bildatabas. Många egensaper från webbversionen är således bortplocade som möjligheten att logga in, läsa historia, garanti information etc. Navigering Layouten använder sig av listnavigering där informationen staplas på varandra. Med undantag för bilder som an scrollas i sidled ser all scrolling i vertialläge. Menyn är av hamburgaretyp där en nacning expanderar ett område med ategorival. På startsidan finns även dessa val att hitta under huvudnyheten. Hamburgerionen utgör tillsammans med tre fasta nappar en thumbnailmeny med valen: Meny, Boa provörning, Sö återförsäljare samt Dela. I headern visas en sidarta över vila länar som följts. Via denna an användaren välja att baca ett önsat antal steg i sin navigering. Uppgiftshantering, hastighet Att utföra grundläggande handlingar, exempelvis hitta närmaste återförsäljare eller se en specifi modell i viss färg går snabbare eller lia snabbt som att göra dessa på webbsidan. Användbarhet, ontexten, ognitiv belastningen Sidan har i allmänt väl tilltagen nappstorle vilet underlättar navigering under svåra omständigheter eller under störelsemoment. Under stara ljusförhållanden utomhus an sidan ändå navigeras utan större svårigheter då dess vita bagrund hjälper till att ursilja text tydligt. Sidan är lättförståelig i och med sidartan an alla steg återsapas. Felhantering Navigeringshistorien tillåter användaren att se en överblic över sövägen och an alltid navigera tillbaa ett steg antingen via att lica på föregående län, (alternativt browsern:s tilldelade tillbaanapp). Vidare an Toyota logotypen naca på för att nå tillbaa till starsidan i alla lägen. Dessa tre möjligheter bidrar till att användaren enelt an nå tillbaa ett steg eller till förstasidan om fel har gjort. 22

30 Figur 14 Knappstorle Toyota ( ) 23

31 3.2.2 m.bmw.se Figur 15. BMW webbsida. ( ) Figur 16. BMW webbapp. m.bmw.se/m/mobi/se/sv/index.cml ( ) 24

32 Innehåll BMWs webbapp innehåller mer information jämfört med Totoyas i form av möjligheten att beställa atalog, nedladdningsmöjligheter etc. Sanas gör möjligheten att se bilmodeller i önsad färg. Navigering Meny görs synlig antingen via att naca på Meny-ionen eller via att scrolla ned sidan där samma menyval finns tillgängliga via botten navigering. Nederst finns även ett söfält. Att välja bilmodell görs endast möjligt via startsidan där de olia modelllasserna finns uppradade via listnavigering på mitten av sidan. Tillbaanapp eller surfhistori finns inte tillgängligt och för att omma tillbaa till startsidan räver att menyn först öppnas, då företagets logotyp döljs med undantag för startsidan. Sidan tillämpar flitigt expanderbara fält för utöad information. Uppgiftshantering, hastighet Att hitta information som närmaste återförsäljare eller bränsleförbruning på en viss modell tar längre tid jämfört med webbversionen då många steg måste gås igenom i webbappen. Användbarhet, ontexten, ognitiv belastningen Under störelsemoment an änslan av att vara vilse på sidan vara påtagande. Om låt säga telefonen lämnas över till en annan användare finns det ingenting som berättar hur denna sida nåddes eller hur man bacar ett steg (med undantag för iphones fysisa tillbaanapp). Länarna hade unnat göras större för att förminsa missförstånd och öat snabbheten speciellt i användning under svåra förhållanden. Att följa länen BMW 5- SERIE TOURING i figur 16 räver t.ex. att användaren nacar på Läs mer nappen istället för bilden i sig vilet även förväntas fungera. Felhantering Avsanaden av en tillbaanapp, histori eller hemnapp i headern försvårar då användaren vill börja om från början i navigeringen. Problemet förvärras p.g.a. att modellutbudet endast an nås via sidans startsida. 25

33 3.2.3 volvocars.se Figur 17. Volvos webbsida. ( ) Figur 18. Volvo webbapp. ( ) 26

34 Innehåll Volvos webbapp innehåller mest information jämfört med Toyota och BMWs. I webbappen finns förutom tidigare biltillverares innehåll även utöad information om bilmodeller samt tjänster för sötsel, underhåll etc. Navigering Sidan använder sig av en hamburgarmeny i höger del av headern. Denna ion är även synlig om sidan sulle scrollas ned då den ligger i ett övre lager. Lit BMWs webbapp listas modellutbudet med hjälp av thumbnails på startsidan. Nederst på alla sidor finns sociala länar till Faceboo, Instagram etc. En Volvologotyp som agerar län till startsida finns i toppen av alla sidor fast försvinner via scrollning nedåt. En arusellnavigerat bildspel finns på sidans startsida där atuella ampager listas. Uppgiftshantering, hastighet I testerna att finna närmaste återförsäljares telefonnummer samt att visa en specifi modell i viss färg går det i bägge fall snabbare att utföra uppgifterna via webbappen ontra webbsidan. Användbarhet, ontexten & ognitiv belastningen Överlag har sidan orret storlesanpassade ioner och länar vilet underlättar navigeringen då man exempelvis promenerar. Vissa undantag finns doc där utformningen unde ha löst smartare. Då nappstorleen för pilarna i arusellnavigeringen (figur 18) doc ligger över de 44*44 pixlar Appel reommenderar som minimun för nappstorle [1] är det lätt att av misstag naca vid sidan av. Att istället möjligöra för användaren att lica på ett större fält i vartdera hörn sulle eliminera problemet. Viss inonsevens finns för länar i webbappen där en användare i ena fallet tillåts att lica på hela bilden av en artiel för att följa en län. Medans det i andra fallet är nödvändigt att naca på texten Läs Mer. Felhantering Lit BMWs webbapp finns ingen tillbaanapp eller sidhistori. En lättåtomlig menynapp där många valmöjligheter, inlusive startsidan, finns underlättar doc i navigeringen. 27 [1]

35 3.2.4 honda.se/cars Figur 19. Honda webbsida. ( ) Figur 20. Honda webbapp. ( ) Innehåll Honda Cars webbapp innehåller exat samma mängd information som dess ordinarie webbsida och är därav störst av alla sidor i studien. Via webbappen ges fullständig information om exempelvis bilarnas specifiationer samt utrustningsnivåer samt möjligheter att, lit de andra sidorna, visa närmaste återförsäljare etc. 28

36 Navigering Menyn visas genom filfältsnavigering med fyra stycen ategorier en bit ned på sidan. Först när en ategori har valts visas en fast hamburgarmeny där underval finns representerade. Det går inte att välja ett annat huvudval eller att baca via hamburgarmenyn utan detta görs via en botten navigering som innehåller samma länar som hamburgarmenyn med utöning av alla huvudval. När önsad modell är vald används dropdownlistor för att ge en snabbare översit av valmöjligheterna för önsad bil. Nederst på alla sidor finns sociala länar samt ontat och policy information etc. Överst på sidan finns ett söfält och logotypen agerar hemnapp. Uppgiftshantering, hastighet Då webbappen och webbsidan är liadant uppbyggda an det tänas att tiden det tar att hitta samma information är liadan. Doc medför det stora mängden information i webbappen att mycet scrollande rävs för att hitta rätt information och detta gör således webbappen långsammare än sin webbversion. Användbarhet, ontexten & ognitiv belastningen Navigationen försvåras av det många menystegen (huvudmeny, undermeny samt dropdownlista). Särsilt under störelsemoment eller överräcande av mobiltelefonen till en annan användare sapar detta problem i att få en översit över man är på sidan. Sidan använder av väl tilltagna nappstorlear. Navigeringen hade möjligtvis unnat göras enlare med att göra hela bilder licbar istället för endast läntexten (se figur 21). Felhantering Lit de flesta onurrenterna finns ingen tillbaanapp eller sövägs histori. Då användaren är i behov av att nå toppen eller botten av sidan för att ta sig tillbaa i navigationen bidrar sidans stora innehåll till att det räver mycet scrollande för att orrigera ett misstag. En onstant hamburgarmeny (lit Volvo) med fler menyval hade underlättat i felhanteringen. 3.3 Sammanfattning av Empiri I detta apitel sammanfattas gransningen av webbappar i olia ategorier. Målet med sammanfattningen är att, via Mendozas teori (ap. 2.13) identifiera välfungerande designlösningar för att i ett senare sede implementera dem i den egna prototypen. 29

37 Sammanfattande tabell över gransningen Figur 21. Sammanfattning Innehåll Innehållet i de olia webbapparna silde signifiant då t.ex. BMW prioriterar ett stort galleri och även nedladdningsbara bilder, medan Toyota väljer mindre bilder och istället framhäver mer specifiationer och priser. I gransningen fastslogs att det inte finns någon regel över hur mycet, och vilen information, webbappar sall innehålla. Via gransningen gavs snarare en fingervisning gällande antalet sidor och produtinformation Navigering De flesta sidor har på ett eller annat sätt implementerat en hamburgarmeny i ombination med en listvy som lösning för dess navigation. Via att implementera en sådan meny sparar saparna bl.a. plats då menyn är förhållandevis liten samt ger användaren en lättigenännlig lösning enligt apitel Vidare används expanderbara fält samt dropdownlistor för att spara plats på de sidor som inte an visa all information samtidigt. Toyota är den enda sidan som visar en 30

38 söväg över navigationen. Alla företag använder deras logotyp som hemnapp och vissa lägger även in en län för detta i hamburgarmenyn Uppgiftshantering, hastighet Toyotas hemsida upplevs som snabbast men är även den med minst innehåll. Tvärtom upplevs Hondas som långsammast där det stora innehållet bidrar till mycet scrollande samt expandering av dropdownlistor. I bedömningen av webbapparna märs således ett samband, där innehållet påverar hastigheten av att få fram information Användbarhet, ontexten & ognitiv belastning Länarnas utförande varierar gentemot de olia apparna. Då Toyotas webbapp tillåter att hela bilder nacas, förlitar sig övriga appar oftast endast på läntexten. Detta bidrar till viss frustration om en användare är van vid att han eller hon sall u a issa te te e ä då färdas till rätt sida. Alla utom Honda använder svepning som standardgäster att bläddra mellan bilder. Menyns placering siftar från att vara placerad på höger sida till vänster sida i de gransade apparna. Här sulle fler appar behöva gransas för att härleda en slutsats över vilen sida som är vanligast föreommande för menyns placering Felhantering Toyotas webbapp upplevs som enlast i felhanteringen där dess sövägsfält låter användaren baca önsat antal steg och samtidigt ger en översit var han eller hon är. Övriga appar i gransningen verar förlita sig på den inbyggda tillbaanappen i webbrowsern. 31

39 4. Metod 4.1 Designprocess Målgrupp, syfte och innehåll Webbsidan draedram.com innehåller följande tio stycen ategorier och undersidor: Peingese, 18 undersidor Pomeranian, 29 undersidor Valpar, 55 undersidor Nyheter - Showresultat, 46 undersidor Pomeranian historia, 9 undersidor Peingese historia, 17 undersidor Exporter, 26 undersidor Galleri - Ariv - Webbsidans utseende via webbläsaren Chrome: Figur webbsida 32

40 Genom att följa frågeställningen i apitel lades ritlinjer för vad webbappen sulle inludera och vila ategorier och undersidor som sulle behållas. Webbsidans syfte är enligt ägaren att ommunicera företagets uppfödning av hundraserna Peingese och Pomeranian, sälja hundvalpar samt sprida nyheter om deras utmärelser, exporter och nya tillsott i enneln. Cira 200 undersidor presenterar information om både ennelns egna hundar, men även bortgångna hundar samt redan sålda valpar. Enligt ritlinjerna om minsta gångbar produt av Fling (2009) togs vissa sidor bort i ett tidigt stadium. Ritlinjerna för målgrupp, syfte och innehåll i apitel finlipade syftet med webbappen i samråd med ägaren där följande förväntningar för användaren definierades; Den tilltänta användaren förväntas att unna läsa och se bilder på ennelns avelshundar samt valpar. Nyheter om valpar, utställningar etc. sa finnas tillgängligt samt ontatuppgifter och sociala extras. Möjlighet till att nå den traditionella webbsidan sa ocså finna tillgänglig. Bedömning av vad som ansågs relevant att behålla till den mobila versionen baserades på valificerade gissningar gällande om vad den tilltänta användaren vill uppnå med besöet. - Detta enligt bl.a. Flings (2009) taneställningar om vila funtioner som är väsentliga för att appen sall vara till nytta (se ap ). Följande ändringar implementeras: Möjligheten att läsa om hundrasernas historia strös, då den tilltänta användaren inte bedöms vilja läsa en djupgående historia utan snarare presenteras färs information och bilder. Peingese och Pomeranian ger användaren information om ennelns avelshundar och besriver vila uppfödarlinjer som ligger baom valpar, i form av stamtavla, samt listar vinnartitlar. För att underlätta visningen av hundar delades hanar och tiar upp i underategorier. Webbsidans ategori Valpar lägger ibland ut hundar som är tillsalu och listar även sålda valpar. Doc hamnar valpar tillsalu även på Nyhetssidan. Den egna ategorin Valpar bedömdes därför som överflödig och används istället som en underategori för den atuella rasen tillsammans med Hanar och Tiar. Sidan Showresultat listar resultat ifrån hundutställningar som enneln besöt och ansågs tillsammans med webbsidans Arivavdelning inte nödvändig för webbappen då atuella vinster ändå hamnar i nyhetsavdelningen. Även avdelningen Exporter bedömdes som inatuella nyheter då denna sida sällan uppdateras, utan snarare listar tidigare framgångar med hundar som sålts till 33

41 andra länder. Galleriet presenterar blandade bilder från såväl utställningar och insicade bilder från under. Denna ategori bedömdes unna underhålla användare och agera lämplig som tidsfördriv, samtidigt presenterar den till viss del information om företaget. Således behölls ategorin. Lit webbapparna i empirin sapas en ontatinformationslän på den nedre delen på alla sidor. Här placeras även länar till standardwebbsidan samt sociala medier och en startsida-napp Wireframe Särmstorle och upplösning Detta arbete avser att sapa en prototyp för användning av en webbapp för en iphone 4. Nedan definieras särmstorle och upplösning: Apple iphone 4 Display: Retina ios 3.5" (88.9mm) Upplösning: pixlar Figur 23. iphone4 Input Denna prototyp ommer basera användningen endast via standardgesterna nacning & svepningar. Olia enheter, responsiv design Denna rapport avser att endast sapa en prototyp för en specifi enhet och bortser därför från detta steg Flöde (screen flow) På standard webbsidan listas i avdelningarna Peingese och Pomeranian samtliga hanar och tiar samtidigt. En hoverover län underlättar där navigeringen genom att 34

42 visa en thumbnail av den atuella hunden. Då detta inte är möjligt i webbappen delas därför flödet in i underategorierna Hanar, Tiar och nytillomna ategorin Valpar. Detta medför att användaren t.ex. slipper se alla tiar av en ras då han eller hon bara är intresserad av att se hanar. På startsidan, och även alla andra sidor, an användaren via en botten navigering alltid se länarna Kontat, Starsida, sociala medier samt Webbversion. Webbappens sidarta fic således följande strutur: Figur 24. Sitemap, webbappen Val av mönster & Prototyp När sidans strutur hade definierats påbörjades sissningen av prototypen. Här undersötes olia lösningar för navigation och presentation av innehåll för användaren. Målet med prototypen är att ge positiv feedbac av innehållet samt användbarheten i senare prototypstest. Fous lades på att sapa en välfungerande layout baserade på en uppsättning framgångsria mönster från empirin (se apitel 4.1.2). Alla unia sidor representerades i sisserna med undantag av ett popup-fönster. 35

43 Figur 25. Första sisser 36

44 Då sidorna var definierade implementerades sisserna i en mer detaljerad prototyp, sapad i Adobe Photoshop CS6. Startsida När sidan besös når användaren startsidan (figur 26) bestående av nyhetsartilar som scrollas automatist via ett arusell mönster. Detta mönster valdes då många biltillverare använde detta mönster för att snabbt väca intresse på startsidan. Vidare har mönstret en hög igenännande fator och an presentera information med en naturlig svepning, (Castledine 2011). Ett flertal artilar presenteras här för användaren och han eller hon an i egen tat scrolla och välja att läsa om någon av artilarna via att naca på storyn. Den underliggande menyn listas via list navigering med tillhörande thumbnails för att användaren snabbt sall få en uppfattning om sidans strutur. Denna medför doc en naturlig hierari över napparna men detta ompenserades genom att placera napparna efter samma hierari som webbsidan. Vid val av Pomerainan eller Peingese expanderas de tre underategorierna Hanar, Tiar och Valpar (figur 27). I botten av sidan listas napparna Kontat, Startsida, sociala medier samt en webbversions-län. Valet av botten navigering föll på dess förmåga att hjälpa användarens navigering utan att inräta på utrymme för innehåll (Mendoza 2013). Figur 26. Startsida Figur 27. Expansion av ras 37

45 Meny Webbappens meny an när som helst nås via en expanderbar hamburgarion belägen högst upp till vänster i headern. Lösningen användes på grund av lättigenännlighet och det fatum att den spar plats då den inte är expanderad (Mendoza, 2013). Sidan menyionen sulle hamna på slumpades då ingen lar bild över orret position unde fastställas via empirin. När användaren nacar på ionen glider menyn ned och flyttar ned den atuella sidan i underant (figur 28). Knapparna från bottennavigeringen inluderades även i denna vy då det ändes logist att inludera alla navigationsval i systemets meny. Figur 28. Hamburgarmeny 38

46 Hundlistor Vid val av en hundategori (t.ex. Peingese Hanar) presenteras användaren via listnavigering med atuella hundar i ategorin. På grund av dess förmåga att hantera stora mängder data ansågs den som mest passande för att lista de olia hundarna i ategorierna. Återige a hierari li pro le atis så här åste företaget ra gord a vilen hund som de vill framhäva mest. I detta fall följdes hundarnas placering från webbsidan då denna ansågs som mest passande. Figur 29. Hundlista Atuell hund Val av hund resulterar i en presentation av atuell hund med bilder i arusell mönster följt av information om hunden. Mönstret valdes eftersom att alla bilder av hunden är av potentiellt intresse för användaren (Castledine, Eftos & Wheeler 2011). Användaren an via nappar under informationen se hundens Stamtavla samt, i mån av sådana, Avommor. Dessa expanderar i ett popup-fönster som an stängas ned via att naca på rysset eller att baca via tillbaanappen i webbrowsern. 39

47 Figur 30 Atuell hund Figur 31. Stamtavla/avommor Galleri Galleriets utseende i webbappen är lit webbsidan baserat på ett antal thumbnails i gridform. Metoden användes då den passar listat material med visuell representation (Tidwell 2010). Thumbnailbilderna gjordes även mer vadratisa än deras originalupplösning för att underlätta nacning. När en thumbnail nacas förstoras upp och ger användaren möjlighet att minimera eller bläddra till nästa bild via pilarna till höger och vänster (figur 33). 40

48 Figur 32. Galleri Figur 33. Galleri popup-fönster Nyheter Nyhetssidan består av samma bilder i arusellbildspelet på startsidan. Valet av denna metod för representation av nyheter föll relativt naturligt då sidan enligt ägaren sällan presenterar två eller tre nyheter samtidigt. Vidare underlättar denna metod för användaren att änna igen en nyhetsartiel som eventuellt symtades på startsidan. Även här måste ev. nyhetsartilarna sorteras i rangordning då den översta är mest hieraris. 41

49 Figur 34. Nyheter Kontat Kontatlänen belägen i bottennavigeringen visar information om företagets adress i Google Maps samt ontatuppgifter. Ett popup-fönster med informationen valdes på grund av att informationen är tillgänglig från varje sida med endast en nacning. Således borde det vara lia enelt att omma tillbaa till sidan den nåddes ifrån. Brist på information på sidan bidrog även till att en egen sida ändes överflödig. 42

50 Figur 35. Kontat 4.2 Användbarhet Prototypstest Då en gångbar prototyp sapats testades den via en pappersprototyp och valitativa intervjuer. Metoden valdes för att se hur ritiga användare interagerar med prototypen och hur den unde förbättras (Mendoza, 2013). Prototypen var i samma sala som en iphone 4 för att få en verlighetstrogen produtänsla. Pappersar med de olia sidorna placerades ovanpå en verlig iphone för att tterligare öa ha ds o ä sla. Testerna utfördes på fem stycen testanvändare och övervaades samt transriberades utav en observatör. Testerna bestod av sex olia uppgifter baserade utifrån möjliga användningsscenarion. Personerna ombads att täna högt när de angrep problemen i fråga. Navigeringen hanterades via att observatören fysist bytte papperssidor samt scrollade sidor i tat med försöspersonens input. 43

51 Prototyptesterna ägde rum mellan den 12e och 13e maj och testpersonerna bestod alla av studenter från Linöpings Universitet som behärsade svensa. Tre av testpersonerna var vinnor och resterande två var men. För att få en bredare målgrupp valdes personer i olia åldrar ut för testerna. Detta på grund av att användare av ennelns sida inte tillhör någon speciell åldersgrupp. Enligt ägaren består målgruppen av hundförsäljning allt emellan 17 till 80 år. Tenivana hos den tilltänte användaren är således ocså svår att fastslå och denna fator bortsågs i användartesterna. De utvalda testpersonerna fic i uppdrag att först besriva deras första intryc av starsidan och därefter utföra följande uppgifter baserade på möjliga användningsscenarier: Uppgift 1: Läs valfri nyhetsartiel Uppgift 2: Läs om Peingesehunden Grayports Mad About the Boy Uppgift 3: Se stamtavla för samma hund. Uppgift 4: Titta på valfri bild i Galleriet Uppgift 5: Hitta företagets Faceboo sida Uppgift 6: Hitta företagets mailadress Efter personerna åtagit sig uppgifterna så ställdes omedelbart frågan om vad som sulle unna förbättras i webbappen. Vidare ställdes ett antal frågor baserade på PACMAD sju attribut som speglar användbarheten av ett program. En fråga angående minnesvärdhet strös då användaren inte an testas huruvida han eller hon ommer ihåg hur man använder programmet efter en period av inativitet. Frågor som ställdes efter användaretesterna: Verningsgrad. Huruvida uppgifterna an lösas. Effetivitet. Snabbheten i navigeringen, om det tar det lång tid att nå önsad sida. Tillfredsställelse. - Huruvida användbarheten och designen i webbappen är tillfredsställande. Lärbarhet. Om systemet är lätt att lära sig använda. Fel. Om det är lätt att göra fel, och i så fall hur lätt man an åtgärda det. Kognitiv belastning. Om det är lätt att använda webbappen mobilt Resultat av prototyptest Vad är första intrycet av starsidan? Alla utom en testanvändare tycte första intrycet var bra och lättförståeligt. Funtionerna verade uppenbara och man fic en bra översådlig bild över sidan. En användare hade åsiter gällande den helvita bagrunden. Personen uttrycte att den var för ljus. 44

52 Uppgift 1: Läs valfri nyhetsartiel Alla användare utom en fann omgående Nyheter via napparna på startsidan och inte via menynappen. Alla användare utom en fann även en nyhetsartiel de väljer att naca på och läsa vidare. Uppgift 2: Läs om Peingesehunden Grayports Mad About the Boy Endast en användare väljer att via hamburgarmenyn gå från den atuella nyheten han befann sig på till Peingese Hanar. Övriga användare valde att via iphonens tillbaanapp eller startsidenappen i botten gå tillbaa till startsidan. Via dess nappar hittar de Peingese Hanar och tillslut den angivna hunden. Alla löser uppgiften. Uppgift 3: Se stamtavla för samma hund Alla användare hittade utan problem hundens stamtavla. Två använder rysset för att sedan stänga ned popup-fönster medan övriga bacar via webbrowserns tillbaanapp. Uppgift 4: Hitta företagets Faceboo sida Användarna hittar alla via botten navigeringen företagets Faceboo sida utan större problem. Uppgift 5: Titta på valfri bild i Galleriet Återigen använder alla användare utom en startsidans nappar istället för hamburgarmenyn. Alla personer lycas naca upp en bild och samtliga förstår även att det går att svepa till nästa/föregående bild via pilarna i anterna. Uppgift 6: Hitta företagets mailadress Via olia sidor finner alla ontatnappen i botten och därmed mailadressen marerad i blå läntext. En testanvändare gör förutsättningen att en nacning på artan leder till företagets adress via Google Maps. Vad an göras bättre? - Testanvändarna uppmanades diret efter testet att föreslå vad som sulle unnas göra bättre både designmässigt och användarmässigt. En användare uttrycte förvirring i samband med de (enligt henne) omplicerade hundnamnen som listat i Peingese Hanar. Användaren menar att det var svårt att förstå att de i själva veret var hundar. De fyra användare som inte hade rört hamburgarmenyn informerades om nappens funtion och tillfrågades om hur nappen sulle unna görs mer tydlig då det var uppenbart att de helt missat den. Tipsen från användarna bestod av att göra nappen större, flytta dess placering till höger, till att lägga till ordet Me redvid appe. Alla f ra i stä de ed att de 45

53 inte hade någon aning om nappens funtion men att de sulle använt den om de hade änt till den. Nedan redovisas resultatet av verningsgrad samt de frågor, baserade på PACMAD sju attribut som speglar användbarheten av ett program, som ställdes till testanvändarna Verningsgrad - Här listas resultatet huruvida testanvändarna unde lösa uppgifterna Figur 36. Verningsgrad Effetivitet 1. Är a igeri ge s a, tar det lå g tid att å ö sad sida? Alla användare ansåg att webbappen upplevdes snabb med tane på att få menysteg rävdes för att nå önsad sida. Att det fanns tillgång att nå startsidan från varje sida bidrog till att spara tid i navigeringen. Menyvalen i webbappen upplevdes som optimerade för syftet. Tillfredsställelse 2. Är a vändbarheten och designen i webbappen tillfredsställa de? Användarna uttrycte allmän tillfredställelse över designen och användbarheten. Designen var enligt vissa användare inte diret avgörande för webbappens huvudsyfte. Men förutom vissa anmärningar på färgval fanns inga större invändningar. Lärbarhet 3. Är syste et lätt att lära sig a ä da? Alla testanvändare ansåg att det gic fort att lära sig systemet. Fel 4. Är det lätt att a a fel, o h i så fall att å gra sig? Ingen användare lagade på nappstorle eller missvisande länar och att det inte är lätt att göra fel i navigeringen. Om ett fel sulle begås menade alla att det via webbrowserns tillbaanapp sulle baca för att naca på rätt län/napp. 46