C-uppsats i Informatik
Sammanfattning
Sedan internet introducerades för världen har tillväxten av antalet användare aldrig avtagit. Senast förra året (2010) uppskattades över 2 miljarder internetanvändare. Många företag utnyttjar potentialen som internet har, detta har lett bland annat till fenomenet e-handel. Ett av företagen var Runelandhs. Idag utvecklar Runelandhs en webbsida där man kan beställa hem möbler, allt från en stol för vardagsrummet, till lyftverktyg för industrin. Det stora sortimentet (ca 9000 artiklar) ska få plats på webbsidan, vilket kan ge upphov till förvirring när användaren ska leta efter en specifik produkt. Utvärderingar av Runelandhs nuvarande webbsida visade att navigeringen och användbarheten är viktiga faktorer, men saknades. En stor målgrupp för Runelandhs visade sig vara män i medelsåldern (omkring 50-årsåldern), vilket också är en faktor i min forskning. Jag valde att lösa problemet genom att ge Runelandhs ett förslag på ett filtersystem byggt på målgruppsanalyser, navigeringsteorier från Alan Cooper och Jakob Nielsen, och designprinciper från Donald A. Norman. Med hjälp av detta utformades en prototyp för att filtrera bland Runelandhs kontorsstolar. Jag har jobbat deduktivt, kvalitativt och delvis kvantitativ under forskningens gång, det vill säga att grunderna för min studie är baserade på teorier. Det har varit intressant för mig att jobba på det här sättet eftersom man inte behöver någon form av användartester eller intervjuer för att lyckas.
Förord
Innehållsförteckning
1 Introduktion _______________________________________________ 6 1.1 Bakgrund _____________________________________________ 7 1.2 Problemformulering _____________________________________ 8 1.3 Avgränsning ___________________________________________ 9 2 Teori ___________________________________________________ 10 2.1 Medelsåldergruppen och Internet __________________________ 10 2.2 Navigering och användbarhet _____________________________ 11 2.2.1 Alan Coopers teorier _______________________________ 11 2.2.2 Jakob Nielsens teorier ______________________________ 13 2.3 Designprinciper _______________________________________ 131
Introduktion
I början av 1990 talet började fenomenet "Internet" träda fram för världen. Det var inte många som hade någon aning om vilka möjligheter internet kunde öppna upp och hur stort det skulle bli. Knappt ett decennium senare hade internettrafiken totalt exploderat i sin tillväxt, hela 100 % per år och när mätningar på antalet användare gjordes förra året, visade det sig att det finns närmare 2 miljarder internetanvändare över hela världen (Internet World Stats, 2011-05-08). Internetanvändningen utvecklas jämt och ständigt och under de senaste åren har sociala nätverk, bland annat Facebook, öppnat upp kommunikationen över hela jordklotet. Man kan klart och tydligt se potentialen med internet och det används till olika ändamål, bland annat marknadsföring. Företag ser detta som en möjlighet att utnyttja internet till att bland annat sälja sina produkter genom webbsidor eller liknande.
1.1
Bakgrund
Första gången jag kom i kontakt med uppdraget med Runelandhs var via ett mail som vidarebefordrat från programansvarige för Interaktionsdesign, Morgan
Rydbrink. Brevet (Bilaga 1) fångade mitt intresse, eftersom jag var med i ett projekt precis innan examensarbetet, som bland annat involverade utformning av ett
gränssnitt där vi fördjupade oss inom navigering och stuktur. Projektet (Larsson, Paramanathan, Samuelsson, Van, 2011) gav positiva resultat och majoriteten av användarna tyckte att gränssnittet var lättanvänt och logisk. Efter att ha fått positiv feedback, motiverade det mig till att vilja fortsätta i samma riktning. Jag kontaktade genast uppdragsgivaren, Susanna Wall, och vi bestämde tid för ett möte några veckor innan kursen började.
Runelandhs har funnits sen mer än 40 år tillbaka och växer för varje dag som går. I deras väldiga sortiment finns ca 9 000 artiklar, allt från bänkar för hemmet till lyftverktyg för industrin. En utav svårigheterna här kan vara att hitta rätt produkt bland det väldiga sortimentet. Kraven för att kunna underlätta för kunden att hitta rätt produkt, fanns även i Runelandhs effektkarta (ett verktyg för att titta på vilka insatser i ett utvecklingsarbete som kommer att ge störst effekt och således nå målen). Detta var bland annat en anledning till att Runelandhs bestämde sig för att göra en storsatsning i form av en e-handelsida, där det ska bli lättare för kunden att hitta rätt produkt. En webbsida finns i dagsläget men en ny kommer att lanseras om ett par månader, och det är där jag kommer in i bilden.
guldet med produkten användaren är ute efter. Med hjälp av verktyget filtrerar man fram guldet (i detta fall produkten).
Jag kunde inte riktigt bestämma mig just då, det var både för och nackdelar för varje system. Jag tog beslutet att gå på filtersystemet efter att ha funderat på vad som passade mig bäst. Produktvisningen verkade för komplext för mig och ett
examensarbete på 10 veckor, då Runelandhs har ett enormt utbud av olika sorters produkter. Det skulle vara för omfattande att försöka generalisera ett sätt att kunna presentera alla produkter, därför tyckte jag att det var bättre och rimligare att ge förslag till ett filtersystem som är mer generaliserbart än produktvisning.
Problemet som Runelandhs har i dagsläget med sin webbsida, är att en stor målgrupp anser att navigationen inte är självklar, vilket i sin tur påverkar
användbarheten. Det framkom i en undersökning som gjordes genom ett formulär som fanns på Runelandhs webbsida, där kunderna fick möjlighet att utvärdera och tycka till om sidan. Djupare i varför navigationen och användbarheten inte var så bra som det borde kan jag inte skriva om eftersom jag har skrivit på ett avtal om
sekretess. Men det jag får berätta är att en stor målgrupp av Runelandhs kunder visade sig vara män i 50-årsåldern, vilket jag kommer ha som grund till min studie.
1.2
Problemformulering
Med tanke på tiden som jag har på mig att utföra mitt arbete och på grund av att jag inte fått tillgång till användare, så har jag valt att arbeta deduktivt vilket innebär att jag kommer att utgå ifrån teorier och tidigare forskningar som har gjorts. Jag kommer alltså endast jobba teorietiskt med hjälp av tidigare forskningar och designprinciper för att utforma filtersystemet. Under designprocessen av
filtersystemet kommer jag att tänka på vilka mål jag ska sikta mot, vilket har lett fram till följande frågeställning: Hur utformar man ett filtersystem för att förbättra
1.3
Avgränsning
Avgränsningarna gjorde jag ganska tidigt tillsammans med min handledare, Jeanette Svanholm, och Susanna Wall. Vi kommer att jobba mot en stor målgrupp (som statistiken visar på Runelandhs webbutvärdering), det vill säga män i 50-årsåldern, där jag också kommer rikta in mig mot navigation och användbarhet. Prototypen för filtreringssystemet som kommer att skapas under examensarbetet kommer vara av typen Flash, vilket bland annat används för att skapa webbapplikationer. Filtersystemet kommer att nå ett medium-fidelity stadie, vilket betyder att det inte kommer vara möjligt att implementera filtret skarpt i den verkliga webbsidan. Utseendet kommer vara näst intill klar, kanske något som ska finputsas innan man utvecklar systemet till nästa steg (high-fidelity prototyp).
Systemet kommer att skapas efter ett scenario, vilket innebär att den endast kommer ha de funktioner som är nödvändiga för att slutföra en sökning. Det kommer alltså inte finnas tillräckligt med tid att göra ett fullt funktionellt system. Jag har också valt att följa Runelandhs grafiska profil vilket innebär att jag inte kommer att använda några andra typsnitt och element än de som jag blivit tilldelade, vilket jag ser som en fördel. Inga intervjuer eller användartester kommer att utföras i denna forskning, eftersom jag inte fått tillgång till några användare.
2
Teori
De steg som jag kommer undersöka i denna rapport är hur medelsåldersgruppen (Hälsorådgivningen, 2011) förhåller sig till internet (Findahl, 2010), och hur man skapar ett gränssnitt med fokus mot användbarhet och navigation. Genom att kombinera dessa två teoretiska områden tror jag att jag ska kunna skapa ett
gränssnitt som är lämpade för den valda målgruppen. Till hjälp har jag valt ut några av de större namnen inom interaktionsdesign. Eftersom jag tidigare har arbetat med just navigation och struktur så tror jag därför att samma sorts teorier också kommer att fungera i det här fallet, med några modifikationer.
Alan Cooper som är en av de mest kända inom branschen, skrev boken ”About Face 3.0” där han har användbarheten och designprocessen som tyngd. Tillsammans med teorier från Donald Norman (Sharp, 2007), kommer jag kombinera
designprinciperna från båda parterna för att utforma ett gränssnitt. När det gäller navigationen, har jag åter igen valt Alan Cooper men tillsammans med Jakob Nielsen, som är speciellt inriktad mot att utvärdera webbsidor. Hans bok "Prioritizing Web Usability" tar upp både bra och dåliga gränssnitt och berättar samtidigt om hur användarna förhåller sig till olika webbsidor.
2.1
Medelsåldergruppen och Internet
Vid mätningar som gjordes talister i Sverige som använder är kvinnor i gruppen
sajter som Blocket.se.
locka denna målgrupp till att handla online. de mindre datorkunniga
känner sig speciellt duktiga på datorer.
inte var några större skillnader på datorkunnighet mellan kvinnor och män i 60 årsåldern (Findahl, 2010).
2.2
Navigering
Det finns mycket att tänka på innan man ska börja utforma ett gränssnitt. Till att börja med
gränssnittet.
2.2.1 Alan Coopers teorier
Första kontakten med ett gränssnitt sker genom det visuella, med Cooper pratar om ett logiskt flöde
attläsa litteratur i västvärlden (ovanifrån och ner, från vänster till höger).
Figur 1: Vänstra modellen
s.300.
Cooper har även ett par tumregler som sägs förbättra navigationen i ett gränssnitt. Med förbättring menar han till exempel att snabba på interaktionen, det vill säga att man inte behöver ta en längre tid på sig att an
ätningar som gjordes 2010, uppskattades det finnas omkring 1 miljon 50 som använder internet och det är ungefär lika många
gruppen (Findahl, 2010). Av dessa utnyttjar 84 % internet
sajter som Blocket.se. Detta visar hur stor möjlighet företagen har att genom nätet locka denna målgrupp till att handla online. Dock lutar 33 % av alla 50
mindre datorkunniga. Det är alltså var tredje person i målgruppen som inte känner sig speciellt duktiga på datorer. Findahls undersökningar visade även att det inte var några större skillnader på datorkunnighet mellan kvinnor och män i 60
(Findahl, 2010).
Navigering och användbarhet
Det finns mycket att tänka på innan man ska börja utforma ett gränssnitt. undersöks hur interaktionen sker mellan användaren och
Alan Coopers teorier
Första kontakten med ett gränssnitt sker genom det visuella, med andra ord, ögonen. er pratar om ett logiskt flöde, se figur 1, som man ska följa, på samma sätt som
litteratur i västvärlden (ovanifrån och ner, från vänster till höger).
: Vänstra modellen visar ett logiskt flöde, till skillnad från den högra
Cooper har även ett par tumregler som sägs förbättra navigationen i ett gränssnitt. Med förbättring menar han till exempel att snabba på interaktionen, det vill säga att man inte behöver ta en längre tid på sig att använda sig av gränssnittet. I kapitel 11
omkring 1 miljon 50-är ungef50-är lika många män som det
84 % internet för köp/sälj Detta visar hur stor möjlighet företagen har att genom nätet av alla 50-talister mot person i målgruppen som inte Findahls undersökningar visade även att det inte var några större skillnader på datorkunnighet mellan kvinnor och män i
60-Det finns mycket att tänka på innan man ska börja utforma ett gränssnitt. hur interaktionen sker mellan användaren och
andra ord, ögonen. som man ska följa, på samma sätt som litteratur i västvärlden (ovanifrån och ner, från vänster till höger).
från den högra, Cooper, 2007,
Cooper har även ett par tumregler som sägs förbättra navigationen i ett gränssnitt. Med förbättring menar han till exempel att snabba på interaktionen, det vill säga att
(Cooper, 2007) beskrivs de sex stegen på hur man går tillväga, nedan har jag gjort en förkortad version.
Reduce the number of places to go - Ju färre ställen man kan gå till i gränssnittet,
som till exempel fönster och sidor, desto mer bidrar det till en förbättrad orientering för användarna.
Provide signpost - Att använda sig av samma typ av objekt i gränssnittet gör att den
blir konsekvent, det vill säga att objekten blir igenkännbara för användarna.
Provide overviews - Gränssnitt som erbjuder översikt bidrar här åter igen, till en förbättrad orientering. Användarna vet exakt vart de befinner sig och även vart de har varit. Exempel på detta är så kallade "brödsmulor".
Provide appropriate mapping of controls to function - Det är viktigt att det finns
klara och tydliga kontroller för varje funktion, för att inte förstöra interaktionsflödet. Effekten som ges i samband med interaktionen ska vara densamma som användaren förväntas få.
Inflect your interface to match user needs - Med detta vill Cooper säga att man
bör ha de funktioner som används oftare än övriga funktioner, placerade på
lättillgängliga ställen medan de övriga funktionerna kan ligga någonstans där de inte stör användarna.
Avoid hierarchies - Man ska även undvika att utforma sitt gränssnitt på djupet men
istället på bredden. Exempel på djup är att användarna går ner på olika nivåer i gränssnittet, medan bredden håller användaren i samma nivå rakt igenom.
2.2.2 Jakob Nielsens teorier
Det är lätt hänt att man förhastar sig när man utformar ett gränssnitt, och därför missar man vad användaren är ute efter. Jakob Nielsen tar upp ämnet Match the Site
Structure to User Expectations, i sin bok (Nielsen & Loranger, 2006, s.173) och
förklarar att det vanligaste misstaget företagen gör är att de skapar gränssnittet efter sina egna önskemål. Han säger också att det inte spelar någon roll om sidan ser bra ut om innehållet inte är riktad mot användarna. Ett sätt att gå tillväga är att
exempelvis gå efter produktegenskaper där användaren kan associera till, istället för vilken tillverkare produkten har. Det är alltså lättare för användaren att relatera till produkten när man har produktegenskaperna framför sig, men om man endast skulle ha produkttillverkarna att välja mellan, då kanske användaren inte alls vet något om produkten matchar dess önskemål.
2.3
Designprinciper
Beroende på vad man ska utforma kommer designprocessen se annorlunda ut. Alan Cooper är oerhört erfaren om hur detta går till. Han beskriver i princip hur man tar sig från start till mål genom olika metoder och teorier (Cooper, 2007). Det finns ingen design för absolut harmonisk interaktion enligt Cooper, men det finns riktlinjer som hjälper en på traven. Jag ska beskriva ett par punkter som jag tyckte passade bra till just detta arbete.
2.3.1 Alan Coopers designprinciper
Follow users' mental models - Här riktar man fokus mot användarnas mentala
uppfattning om vad systemet egentligen gör. Som till exempel när mobiltelefonen ringer, så skickas signaler från sändaren, till ett flertal olika telefonmaster och till slut når signalerna mobiltelefonen. Men denna tekniska kunskap kommer inte hjälpa användaren att använda telefonen. Istället är det mer intressant i detta fall för användaren att veta hur man tar emot samtalet.
såpass få funktioner som möjligt, men ändå tillräckligt många funktioner för att användaren ska förstå.
Enable users to direct, don't force them to discuss - Som principen säger att man
kort och gott ska undvika dialoger och istället vägleda användaren. Metaforiskt menar Cooper att gränssnittet används som ett verktyg.
Provide modeless feedback - Gränssnittet ska ge möjlighet att se vilka funktioner
som finns, utan att störa användarnas interaktivitet. Till exempel om man skriver ett dokument, så är det smidigt att veta vilken sida man befinner sig i, utan att behöva leta efter sidräknaren.
I kombination med Coopers designprinciper hittade jag även några av Donald Norman (Sharp, 2007), vilka jag kommer att skräddarsy till ett mer precist gränssnitt för den valda målgruppen.
2.3.2 Donald A. Normans designprinciper
Consistency - Ett konsekvent (eng. consistent) gränssnitt har oftast likadana element eller utseende, vilket gör det lättare för användaren att komma ihåg vad de olika funktionerna gör. Har man flera olika utseenden i gränssnittet tar det längre tid för användaren att förstå och lära sig.
Feedback - Efter en handling, till exempel att ha tryckt på en knapp, så ska något hända. Händelsen ska visa att användaren medvetet har påverkat handlingen. Detta kallas för feedback. Feedback kan vara exempel på att ljudnivån ökas när man vrider upp volymen.
Constraints - Begränsningar används när man vill vägleda användaren och
samtidigt undvika misstag. Vissa funktioner öppnas inte förrän man har valt rätt inställning, om man tar vissa gräsklipparen som exempel. Vissa gräsklippare kräver att man har tryck ner en spärr innan motorn går igång, alltså är spärren en typ av begränsning.
3
Metod
Metoden har inte alltid varit självklar under tiden jag har arbetat med filtersystemet, mer kan ni läsa om i metodvalet. Det slutade med att jag valde att jobba deduktivt, kvalitativt och delvis kvantitativt då omständigheterna ändrades med tiden.
3.1
Vetenskaplig ansats
Vad innebär att man jobbar deduktivt? Det är så att man helt enkelt följer det som finns dokumenterat, såsom teorier, det som står i artiklar, och så vidare.
Man utgår ifrån premisser (teorier), och drar sedan en slutsats av dessa, som i exempel 1.1. Informationen finns alltså redan, till skillnad från om jag hade valt att arbeta induktivt. Man kan säga att ett exempel på ett induktivt sätt att jobba, är att gå ut och frågar folk om de gillar mina kläder. Jag har absolut inga teoretiska grunder för att veta om de gör det.
Premiss 1: Katter kan spinna.
Premiss 2: Albin är en katt
Slutsats: Albin kan spinna.
Exempel 1.1: Genom två premisser kan jag dra slutsatsen att Albin kan spinna.
3.2
Metodval
De metoderna jag har valt har fungerat bra eftersom de inte är lika tidsdrivande som om jag hade valt att jobba på ett annat sätt. Genom att jobba deduktivt behövde jag till exempel inte gå ut i stan och samla information från folk, vilket kan ta mycket tid. Även när det gäller det kvalitativa och kvantitativa sättet som jag har jobbat inte heller tagit så mycket tid. Informationen fann jag genom artiklar, böcker och webbsidor och därefter sammanställde jag det på ett trovärdigt sätt. Bortsett från tiden så passade metoderna bra för min forskning. Designprinciperna och teorierna som jag fann vid studierna kunde tillämpas i filtersystemet och stämde bra överens.
3.3
Metodreflektion
På gott och ont har metoderna ändrat sig drastiskt under arbetets gång. Jag började med att planera fältstudier, användartester och intervjuer. Tyvärr kunde dessa metoder inte genomföras. Anledningen till att jag inte kunde utföra metoderna är dels på grund av att Runelandhs inte kunde få tag i någon som ville ställa upp på fältstudier, där jag ville undersöka och observera hur deras kundservice fungerar. Användartesterna och intervjuerna planerade jag att omkring tio personer skulle räcka till att fastställa ett resultat, vilket fungerade i förra forskningen. jag försökte till och med hitta testpersoner från företaget som jag är anställd hos, men fick inget svar. Trots att min planering inte gick att slutföra känner jag mig nöjd med det jag har åstadkommit med. Det är en av sakerna som man måste räkna med i forskningar, att det inte alltid går som man har tänkt sig.
3.4
Målgruppsanalys
man, och kan användas till att utveckla produkter och tjänster, som passar just till målgruppen.
3.5
Genomförande
I detta avsnitt ska jag beskriva hur jag har gått tillväga med hur jag har jobbat för att utforma filtersystemet.
3.5.1 Förstudier
I ett dokument med resultat av undersökningar på webbsidan fann jag två figurer, som visade att majoriteten av användarna tyckte att navigationen och
användarvänligheten ligger högt i webbsidans betydelse. Men tyvärr var dessa två kriterier inte lika tillfredställande. På grund av sekretess får jag inte visa figurerna i rapporten.
Det finns massor av e-handelssidor idag, och sättet att organisera och kategorisera sina artiklar är näst intill oändliga. Jag begav mig ut i det väldiga internet och sökte efter någon form av söksystem i olika företag. Ett mål att sikta mot är ett företag med ett brett sortiment. Komplexiteten av sökningssystemen varierade mycket mellan olika webbsidor, men då hittade jag en sida som jag kunde hämta inspiration av. Acer.com har ett bra filtersystem som jag har tänkt göra en kvalitativ undersökning av och titta närmare på. Det som kommer göras är att jag kommer undersöka vad det är som är speciellt med söksystemet, och hur jag ska kunna dra nytta av det till mitt filtersystem. Jag kommer även att titta på prisjakt.nu, eftersom det är ett stort filtersystem bakom produktsökningen. Därefter kommer webbsidan jämföras och och se vad för skillnader och likheter webbsidan har med filtersystemet.
3.5.2 Prototyp
Efter teoriundersökning, målgruppsanalys och förstudier så kände jag att jag hade tillräckligt med information för att börja utforma gränssnittet. Det var lätt att komma igång, då jag redan hade bestämt mig för att använda samma grafiska profil som Runelandhs kommande webbsida. Programmen som användes för att skapa filtersystemet var Adobe Illustrator och Adobe Flash.
Grafiken gjordes först genom Adobe Illustrator, och sparades ner som bilder i formatet jpeg. Sedan importerades bilderna in till Adobe Flash. Här jobbar man i en "scen", där man lägger in bakgrund, knappar, bilder osv. För varje steg i scenariot (se resultatet) gjorde jag en "keyframe", vilket betyder sida i Adobe Flash. Kort förklarat så är steg 1 på keyframe 1, steg 2 på keyframe 2, och så vidare. Med hjälp av enkla koder (ActionScript 3.0) kan man genom att trycka på specifika knappar gå vidare till nästa steg.
3.6
Reliabilitet
4
Resultat
4.1
Förundersökning
Jag har valt att undersöka två olika söksystem för att jämföra och se vilka för och nackdelar varje söksystem har. Jag har även undersökt Runelandhs utbud av kontorsstolar, för att kunna se hur jag ska strukturera upp mitt filtersystem som passar stolarna.
4.1.1 Acer.com
Det som slog mig var att jag tidigare hade använt mig av ett smidigt filtersystem, och det kom från sidan Acer.com’s drivrutinsökning. Drivrutinsökningen börjar med att man väljer vad för sorts produkt man behöver hjälp med, till exempel om det gällde bärbara datorer, stationära datorer och så vidare. Direkt efter valet dök en annan ruta upp, och då frågades vad för familj datorn tillhörde. Sökningen blev alltså mer specifik för varje steg som jag tog mig genom i systemet. Till sist nådde jag sista steget, där jag faktiskt hittade den modellen jag sökte efter. Det är på samma sätt jag har byggt mitt filtersystem, men istället använde jag stolarnas egenskaper för att filtrera fram rätt produkt. Fördelen med detta är att man får en guidning från början till slut, där sökningen började brett, för att sedan bli mer specifik ju längre in i processen man kommer. Nackdelen med detta är om användaren inte alls vet vad för sorts dator det är och är tvungen till att välja något av valen för att komma vidare. Likheterna mellan drivrutinsökningen och mitt filtersystem var att man fick en vägledning genom sökprocessen och till slut kan hitta den produkten man söker efter.
4.1.2 Prisjakt.nu
bred valmöjlighet och sortering av produkter. Samtidigt som att man lätt kan se hur många träffar som matchar ens önskemål efter varje val av sökning. Nackdelarna kan dock vara att det är för mycket på en gång att söka på, att det inte finns en klar startpunkt att börja sökningen på. Likheterna jag fann var att efter varje steg ändrades produkterna efter de önskemål som användaren har valt, samtidigt som man ser hur många produkter som passar användaren.
4.1.3 Runelands kontorsstolar
Jag gjorde även en kvantitativ undersökning på Runelandhs webbsida där jag letade efter likheter mellan stolarna. Jag började med att undersöka varenda kontorsstol som fanns och vad för sorts egenskaper som jag kunde generalisera bland alla dessa. Under tiden skrev jag ner informationen i ett dokument (bilaga 2) som jag senare använde till gränssnittet. Dessa egenskaper fick jag fram; armstöd, nackstöd, material, sitthöjd och priser.
4.2
Målgruppsanalys
4.3
Prototyp
Jag har skapat filtersystemet efter ett scenario som består av fem steg. Dessa steg kommer att filtrera fram de stolar som matchar användarens önskemål.
Filtersystemet integrerades i den kommande webbsidans gränssnitt för att se hur det färdiga systemet kommer se ut, men på grund av sektretess får jag inte lov att visa webbsidans gränssnitt, och är därför tvungen till att endast demonstrera
filtersystemet.
Steg 1: Armstöd
Steg 2: Nackstöd
Steg 3: Material
Steg 4: Höjd
Steg 5: Prisklass
Filtrering slutförd:
5
Analys
Här kommer jag visa hur jag kommit fram till min design av filtersystemet. Eftersom jag jobbat strikt deduktivt kommer jag jämföra filtersystemet med teorierna som jag valt. De olika analyserna följer samma ordning som teorierna.
5.1
Navigation
5.1.1 Alan Cooper
Det jag nämnde först i navigationsavsnittet var att användaren först navigerar med ögonen. Jag placerade de olika elementen i den ordningen som teoretiskt bidrar till ett logiskt flöde (figur 2), man börjar alltså längst upp till vänster och navigerar neråt på samma sätt som man läser en tidning.
Figur 2: Designad efter logiska navigationen.
För att komplettera teorier kring en förbättrad navigering har jag skrivit om hur tolkningarna gjordes i filtersystemet:
Reduce the number of places to go - Inga pop-ups, fönster, eller liknande
Provide signpost - Gränssnittet är statiskt. Oavsett vart du är i sökprocessen ser gränssnittet likadant ut.
Provide overviews - Stegen talar om hur långt man är i sökprocessen. De
nästkommande stegen är nertonade, för att inte störa användaren samtidigt som man kan se hur många steg som återstår.
Provide appropriate mapping of controls to function - Processen sker stegvis, det
vill säga att användaren börjar logiskt på steg 1 och går sedan vidare till steg 2. Stegen som blir aktiverade blir tillgängliga för användaren, för att sedan fortsätta sin filtrering. På detta vis vägleds användaren under processens gång.
Inflect your interface to match user needs - Alla funktioner som är nödvändiga finns tillgängliga på plats, och eftersom filtersystemet inte har andra uppgifter än att filtrera fram rätt stolar, så behövdes inte ytterligare funktioner.
Avoid hierarchies - Som teorin visar så har jag bara utformat filtersystemet på
bredden, användaren behöver inte gå ner i olika nivåer under sökningens gång för att reducera förvirring.
Om användaren råkar trycka fel eller ångrar sitt val finns det möjlighet till att ångra. Skulle det vara så att man vill börja om sökningen från början kan knappen "Återställ" användas (figur 3).
5.1.2 Jakob Nielsen
I metodstycket pratade jag om hur jag fick fram egenskaperna till stolarna. Teorin bakom det är "Match the Site Structure to User Expectations" av Nielsen. Stolarna har olika tillverkare, men i detta fallet är användarna intresserade av vad för
egenskaper stolarna ska ha. På så sätt kan användaren associera egenskaperna till produkten de söker efter. Dessa egenskaper fick jag fram:
Stöd - Både arm eller/och nackstöd fanns att välja bland kontorsstolarna.
Material - När det gäller stolarnas klädsel så fanns det två olika material för
sätesklädseln, tyg och skinn/läder.
Sitthöjder - Sitthöjderna varierade ganska mycket från stol till stol, men det gick att
gruppera in de i olika höjder, för en jämnare sökning.
Prisklasser - Och sist men inte minst så är stolarna i olika prisklasser.
Prisvariationerna var stora, från ett par hundralappar till några tusen, men jag lyckades gruppera in priserna ändå.
5.2
Designprinciper
5.2.1 Tolkningar av Coopers designprinciper
Follow users' mental models - Här följde jag mina egna instinkter, då jag inte
kunde få tag i vad för ordning stegen skulle komma. Men ordningen som jag tyckte kändes mest naturliga blev följande: armstöd, nackstöd, material, sitthöjd och
priser.
Less is more - Minimalistiskt, det var ordet jag sökte efter när jag hörde begreppet.
Det ska vara så få funktioner och element som möjligt, men samtidigt tillräckligt många för att kunna göra en sökning. En kontinuerlig sökning med samma funktion tror jag skulle fungera.
Provide modeless feedback - Här jag valt att använda så kallat "hoover" för att förse användaren med feedback. Med andra ord betyder det att någon sorts effekt sker när man håller musen över en funktion, till exempel en knapp. På detta sättet kan användaren genom att dra musen över olika element och se om det går att interageras med, utan att behöva trycka på funtionen. Så här ser det ut i filtersystemet (figur 4).
Figur 4: En "hoover" effekt (från vänster till höger).
5.2.2 Tolkningar av Normans designprinciper
Consistency - Stegen har exakt likadana interaktionssätt, vilket gör att användaren känner igen sig under hela sökningen för att öka interaktionsflödet.
Feedback - Antalet produkter ändras visuellt efter varje val i stegen, och på så sätt märker användaren att systemet ger respons på valen som gjorts.
Constraints - Nertoningarna av stegen begränsar användaren till att fullfölja
processen för att få en så precis sökning som möjligt. Detta gör även att de blir mer fokuserade mot varje enskilt steg, samtidigt som användaren vägleds under
filterprocessen.
Visibility - De viktigaste funktionerna finns direkt framför en i filtersystemet.
Sökningen sker i det inramade området där alla funktioner finns för att slutföra sökningen. Användaren behöver inte leta efter de viktigaste funktionerna utan att finns tillgängligt på samma ställe.
6
Diskussion
Min uppdragsgivare Runelandhs, har en webbsida som ska lanseras inom kort. De behöver ett nytt filtersystem som ska underlätta för användaren i den specifika målgruppen (män i 50-årsåldern) att hitta rätt produkt. Genom teorier, artiklar och undersökningar (Acer.com och prisjakt.nu) har jag lyckats med att ge förslag till ett användbart filtersystem som är lämpad för den valda målgruppen.
Jag är nöjd med resultatet som jag fick av mina metoder och med hjälp av teorierna trots att arbetsgången inte alls blev som jag först planerat. Det förvånar mig också att det finns så få undersökningar angående personer i medelåldern och teknik. Men trots det har jag kunnat utforma ett gränssnitt som ska fungera för den valda målgruppen. Susanna och produktansvarige på Runelandhs tror att filtersystemet som jag har gjort under dessa veckor skulle kunna fungera i deras kommande webbsida.
Problemformuleringen var väldigt exakt och precis, vilket har gett mig ett tydligt mål att sikta mot. Och jag känner att jag har passerat målet med min forskning. Jag har dock inte kunnat utföra några användartester eller intervjuer, vilket jag önskar kunde göras. Men metoderna som jag har tillämpat baseras i grunden på de användarcentrerade metoderna. De har blivit förfinade av de stora namnen inom interaktionsdesign och formades till designprinciper. Dessa metoder fungerade minst lika bra som om jag skulle använt den planerade metoden. Men hur hade resultatet sett ut ifall jag arbetade induktivt istället?
6.1
Slutsats
Hur utformar man ett filtersystem för att förbättra navigeringen för en medelåldersgrupp vid artikelsökning?- Så lät min frågeställning för forskningen.
Svaret på det är att man utformar filtersystemet med hjälp av teorier kring navigering och användbarhet, designprinciper och målgruppsanalys.
Det som utmärker detta filtersystem är att till skillnad från de söksystem som jag har undersökt, så har fokusen lagts på navigationen och användbarheten, vilket erbjuder en vägledning under filterprocessen samtidigt som den förser användaren med en tydlig översikt när det gäller produktträffar och sökning. Därför tror jag att detta filtersystem passar utmärkt till Runelandhs ändamål.
6.1.1 Navigering och användbarhet
För att summera hur navigeringskapitlet tillämpades i arbetet ska jag berätta lite om hur jag har resonerat kring mina resultat på de olika teoripunkterna. När det gäller
reduce the number of places to go var det naturligt för mig att skapa ett filtersystem
efter det. Ett filtersystem har bara ett mål, att ta fram användarens önskemål och därför behöver man bara en sektion för att utföra uppgiften, som jag även tänkte på med punkten avoid hierarchies. Gränssnittet ändrar inte på sig så mycket under filterprocessen, så provide signpost implementerades i form av att oavsett vad för steg man befinner sig i så ska man känna igen sig. Jag tyckte det passade eftersom användare i målgruppen kan ha svårt att minnas olika funktioner, därför tyckte jag att ett konsekvent design fungerade bra.
Översikten (provide overviews) får man alltid framför sig. Filtret i sig fungerar som en översikt då man alltid kan se vilka steg som finns. För att leda användaren genom filterprocessen användes provide appropriate mapping of controls to function genom att börja på första steget och successivt gå genom alla fem steg för att få en så nära produktträff som möjligt. När jag letar efter produkter på nätet kollar jag oftast på vad för specifikationer produkten har, det kändes som en självklarhet att göra på samma sätt här tillsammans med punkten inflect your interface to match
user needs. Det var inte så svårt att lista ut vilka egenskaper en kontorsstol har och
6.1.2 Designprinciper
Det finns många likheter mellan navigationen samt användbarhet med
designprinciperna. En av Alan Coopers principer follow users' mental models från designprincipen påminner väldigt mycket om inflect your interface to match user
needs. Dessa två punkter betyder i princip samma sak, att man ska tänka på vilket
sätt som användaren beter sig vid användning av en tjänst. Jag svarade med att utforma principen med hjälp av produktegenskaper, vilket är det effektivaste sättet. Det ska inte finnas för mycket onödigt på skärmen, speciellt när man bara ska utföra något som är så enkelt som att söka efter en produkt som passar en. Principen less is
more förklarar nästan sig självt, när man inte ska ha för många element som kan
störa användaren. Jag har försökt att utforma filtersystemet så kort och simpelt som möjligt för att reducera riskerna för förvirring. Men att utforma ett enkelt system ska man även tänka på att instruera användaren till olika val, och där kommer principen
enable users to direct, don't force them to discussin. En liten fråga under varje steg
ska vara tillräcklig för användaren att förstå vad som ska väljas.
Nästa fråga kommer då hur man vet vilka funktioner som går att välja? Med hjälp av
provide modeless feedback kommer användaren på ett enkelt sätt kunna se vilka
funktioner som är interaktiva, utan att behöva riskera att aktivera funktionen av misstag. En "hoover" effekt är ett exempel på principen, vilket jag valde att använda i filtersystemet.
Consistency hör ihop med navigationens provide signpost, där designen strävar efter
ett konsekvent flöde som betyder att stegen som man går igenom fungerar på samma sätt. Constraints vägleder användaren på ett sätt där man endast behöver tänka på ett steg i taget, istället för att öppna upp alla steg på en gång och kan riskera att förvirra användaren.
6.1.3 Målgruppsanalys
Undersökningarna som jag gjorde till Runelandhs målgrupp visade sig inte vara så avvikande som jag trodde. Majoriteten av män i 50-årsåldern handlar på nätet, och det visar sig att det kognitiva och minnet fungerar bra ända fram till 60-årsåldrarna, men för att vara på den säkra sidan så följde jag teorier kring äldre, att minnet kan vara nedsatt och därför anpassades filtersystemet efter fakta. Därför tror jag att detta systemet kommer passa målgruppen eftersom med hjälp av designprinciperna och teorierna kunna förminska förvirring och öka interaktionsflödet. Användaren ska inte behöva lära sig flera nya funktioner utan istället interagera med ett konsekvent gränssnitt. Med dessa slutsatser skulle jag tro på att filtersystemet kan fungera för bredare målgrupper än bara till Runelandhs målgrupp, till exempel så riktas systemet inte bara till män utan också till kvinnor eftersom det inte är någon skillnad i interaktionsväg mellan könen.
6.2
Förslag till fortsatt forskning
8
Referenser
Böcker:Cooper, A (2007) About Face 3: The Essentials of Interaction Design, John Wiley
& Sons, Indianapolis.
Sharp, H (2007) Interaction Design: Beyond Human-Computer Interaction, 2nd Edition, John Wiley & Sons, West Sussex.
Nielsen, J., Loranger, H. (2006) Prioritizing Web Usability, New Riders
Publishing, Berkeley, CA.
Avhandling/uppsats:
Larsson, D., Paramanathan, S., Samuelsson, H., & Van, H (2011) Utformning av
ett användbart retursystem för e-handeln, Institutionen för datavetenskap, fysik och matematik, Linnéuniversitetet i Kalmar.
Elektroniska källor:
Runelandhs, Tillänglig: <http://www.runelandhs.se/> (2011-05-11). Acer, Tillänglig: <http://www.acer.com/> (2011-05-11).
Prisjakt, Tillgänglig <http://www.prisjakt.nu/ > (2011-06-10).
Findahl, O (2010) Äldre svenskar och Internet 2010, .SE, Tillgänglig:
<http://www.iis.se/docs/Aldre_svenskar_och_internet_2010.pdf> (2011-05-11).
1177, Tillgänglig:
<http://www.1177.se/Tema/Liv-och-halsa/Aldrande/Att-bli-aldre/> (2011-05-19).
Svenska Dagbladet, Tillgängligt:
9
Bilagor
Bilaga 1: Brev från Runelandhs
RunelandhsRunelandhs har funnits i Kalmar i mer än 40 år och kan med all rätt kalla sig ett av Sveriges starkaste namn inom företagsprodukter för kontor, lager, verkstad och produktion. Runelandhs började med sin försäljning av industriella maskiner som sedan övergick till ett mycket bredare sortiment.
Runelandhs är ett distansföretag inom kontor och industri, som nu håller på att gå från ett företag med fokus på katalog till att sätta mer fokus på e-handel. En större satsning på webbplatsen sker just nu och nya webbplatsen lanseras snart. Den nya webbplatsen är framtagen tillsammans med byrån Stendahls och detta arbete berättar vi gärna mer om.
Uppdraget
I och med att nya webbplatsen lanseras startar också en vidareutveckling av denna. Där vi ska titta på olika utvecklingsmöjligheter, för att sedan gå vidare med det som ger bäst effekt.
Här skulle vi på Runelandhs vilja ha er hjälp att titta på möjligheter att presentera produkterna ännu bättre, hjälpa kunderna att ta ett köpbeslut snabbare och hitta rätt produkt. Detta skulle kunna vara allt ifrån en produktväljare, till något annat typ av stöd.
Uppdragets omfattning diskuterar vi gärna med er, så att vi hamnar på en bra nivå och inom ert intresseområde.
Uppdragsgivare Susanna Wall
susanna.wall@runelandhs.se 070-318 8846
Jag kommer att vara uppdragsgivare från vår sida och träffar er gärna för att berätta mer. Vi är också öppna för andra förslag.
Bilaga 2: Priser, sitthöjder, stöd och material
Skinnstolar
Stol Goxoa (a) Skinnstol Design( Kontorsstol ParisTygstolar
Kontorsstol ergonomiskt ( Kontorsstol Lente ( Sverigestolen 817 ( Sverigestolen 814 ( Sverigestolen 9080 ( Sverigestolen 818 ( Ullmanstolen (a, Kontorsstol Due Kontorsstol Sunny ( Kontorsstol H20 (a Kontorsstol Ego Kontorsstol Ramsö ( Kontorsstol Oknö ( Kontorsstol Wayne Kontorsstol Ronna ( Kontorsstol Sign Kontorsstol Slim Kontorsstol Jenna ( Kontorsstol Jenna swing ( Kontorsstol Soft Light (Kontorsstol Ronna m. nackstöd Pilatesstol
Sadelstol Solo
a = Armstöd
n = Nackstöd
Bilaga 2: Priser, sitthöjder, stöd och material
Skinnstolar
Priser Lägsta sitthöjd
