KÄ RLEKENS nya hemsida

Transkript

1 HÖGSKOLAN I KRISTIANSTAD Internetpublicering och webbdesign 1 KÄ RLEKENS nya hemsida Rapport till slutuppgiften i kursen Internetpublicering och webbdesign 1 MIA NORSTEDT VT 2014

2 Innehåll 1. Inledning...s Beskrivning av bandet... s Beskrivning av målgrupp... s Att skapa en hemsida...s Designprocessen... s Användarvänlighet... s Usability engineering... s Contextual design... s Tidigare användarstudier... s Kritiker... s Five Second Test... s Kärlekens hemsida...s Min designprocess... s Användarvänligheten på Kärlekens hemsida... s Det praktiska... s Kritikern... s Five second test... s Click test... s Nav flow test... s Sammanfattning... s Källor... s. 13 2

3 1. Inledning 1.1. Beskrivning av bandet Bandet består av sju stycken anställda på Kommundelsskolan i Småstaden. Några av medlemmarna framträdde första gången på skolans cabaret 1998 med en hip hop-låt om skolan som de skrivit själva. Framträdandet och låten blev mycket omtyckt av kollegor och elever på skolan. Inför skolstarten samma år anordnas en kommundelsfestival med bland annat uppträdanden. Några dagar innan ställde ett av banden in sitt uppträdande och dessa personer i bandet Kärleken bestämde sig för att hjälpa till. De träffades och gjorde hip hopversioner av några av sina favoritlåtar, framför allt progghits. Detta uppträdande blev också mycket populärt och medlemmarna bestämde sig för att fortsätta att spela och utveckla bandet, bland annat genom att skriva egna låtar. I och med den ökande användningen av sociala media och det faktum att det blivit lättare att sprida till exempel videos på Internet har de på senare tid blivit kända även utanför Småstaden och människor från hela Sverige har hört av sig och visat intresse för bandet, deras skivor och produkter, speldatum med mera. För att tillmötesgå dessa fans bestämde sig bandet för att anlita en webbdesigner för att skapa en hemsida. Bandet ville att sidan skulle återspegla deras karaktär och stil och inte vara för allvarlig. Deras texter handlar om rättvisa, alla människors lika värde, HBTQ-frågor och de tar tydligt avstånd från främlingsfientlighet, frågor som de även jobbar med i annat arbete inom kommunen. Enligt kravspecifikationen ville även bandet att följande skulle finnas med: Bilderna från senaste konserten Information om kommande spelningar Kontaktuppgifter till bandets medlemmar En beskrivning av bandet och dess medlemmar En webbshop där man kan beställa bandets produkter Möjlighet för fans att komma i kontakt med varandra 1.2. Beskrivning av målgrupp Antagligen tack vare blandningen av den musikstil och genre som bandet själva beskriver som hip-hop-progg har de ett brett spektrum av fans. Åldersspannet sträcker sig från eleverna på skolan där de jobbar, vilka är mellan sex och sexton år, till boende i kommunen som sett dem spela på festivaler och som är upp till hundra år. Då spridningen är så stor måste man utgå ifrån att informationskompetensen hos målgruppen varierar och därför ska hemsidan 3

4 vara lättnavigerad och enkel att förstå. Framför allt när det gäller eleverna på skolan är det troligt att de kommer att surfa på sidan på sina mobiltelefoner eller surfplattor för att titta tillsammans medan vuxna kanske tittar på laptop hemma och de yngsta barnen kanske på familjens stationära dator. Därför ska hemsidan fungera i olika upplösning på flera olika enheter. 4

5 2. Att skapa en hemsida 2.1. Designprocessen Designprocessen börjar med en vision. Oftast börjar det som något intuitivt, en känsla eller en bild av hur man vill att den färdiga produkten ska se ut. Denna vision utgör grunden för det kommande planeringsarbetet och designen av webbsidan och hjälper till när man ska organisera innehållet och sina idéer. Sedan är det dags att åskådliggöra visionen, både för sig själv och en eventuell kund, genom att skapa en slags bro mellan visionen och den färdiga produkten. När man kommit så här långt kan man utifrån det material och de tankar man har formulera en specifikation som listar det innehåll och de funktioner man vill ha på sidan samt hur man vill att dessa ska se ut (Löwgren och Stolterman, s. 17ff.). När man sätter ihop sin specifikation och sållar bland idéer och innehåll gör man en funktionsanalys och delar upp dem i fyra kategorier. I den första hamnar nödvändiga funktioner, sådant som måste finnas med för att det ska fungera. I den andra kommer det önskvärda, det som man skulle underlätta användningen av sidan men som inte är nödvändigt. I tredje kategorin hamnar det icke önskvärda, sådant som inte ska vara med på sidan. I den sista kategorin hamnar det som man ännu inte vet vilken kategori det tillhör (Löwgren och Stolterman, s. 78 f.). För att åskådliggöra visionen av den färdiga produkten vilket kan användas som mall och för att visa för eventuella kunder hur man tänker sig slutprodukten kan man använda sig av en rad olika verktyg. Ett sätt är att rita bilder över designen. Bilder hjälper till att visualisera produkten. En gränssnittsskiss visar hur det är tänkt att sidan ska se ut för användaren. Man kan också göra en dynamisk pappersprototyp. Då ritar man upp de sidor som ska finnas på siten och visar vad som händer när man interagerar på sidan. Denna illustration kan man också göra digitalt. Ett annat sätt är att beskriva med ord i ett scenario hur sidan ska användas. För att ge en bra överblick kan man kombinera två av dessa kanaler i en storyboard där man kombinerar en gränssnittsskiss med ett skriftligt scenario (Löwgren och Stolterman, s. 78 f.). Ett sätt att säkerställa att man inte missar något väsentligt i designen är att ta på sig de sex hattarna som med sina olika färger representerar olika aspekter av processen. Den vita representerat ett neutralt pappersark som innehåller den data man har och ställer frågor som Vad vill vi ha? Vad har vi? Hur får vi det vi vill ha? Den röda står för känslor och intuition och fokuserar på det estetiska, vad besökarna kommer att tycka om, vad som väcker känslor 5

6 hos dem. Den svarta hatten är kritikerns hatt som påpekar vad som inte fungerar och varför, den gula är optimismen som försöker se en lösning, det skulle kunna gå om... den gröna hatten står för kreativitet och syftar till att komma med nya idéer och den blåa har ett ovanifrånperspektiv som hjälper till när man kört fast genom att få en överblick över hela situationen (Löwgren och Stolterman, s. 97 f.). När designprocessen väl påbörjats kommer man att behöva kompromissa en del. Alla visioner kommer inte att gå att förverkliga och det kanske känns som att sidan inte blir så bra som man först hoppats. Ju mer man jobbar med designen desto längre ifrån sin vision finns det risk att det känns som att man kommer. När man stöter på dessa problem måste man tänka utanför boxen och komma med nya kreativa lösningar. Detta kommer sannolikt att ske under hela designprocessen då skapandet inte är en linjär process och man kommer hela tiden att stöta på nya problem, komma på nya idéer och ändra designen i takt med att man ser hur idéerna ter sig i verkligheten (Löwgren och Stolterman, s. 17 ff.). För att bestämma vilken design som passar bäst och hur denna skapas kan man gå tillväga på lite olika sätt. Det finns i grova drag två vägar att gå man kan titta på det som redan gjorts eller komma på något helt nytt. I det första fallet finns det information att tillgå i form av litteratur eller personer att intervjua eller studera. När det gäller det senare får man när man själv kommit på vad som skulle kunna finnas prova sig fram och se hur det fungerar i verkligheten. I den processen kan man också ta hjälp av andra och använda metoder som till exempel workshops eller brainstorming. Ett bra angreppssätt i båda fallen och egentligen i alla steg är att fråga sig varför? Varför vill jag göra så här? Varför vilket hjälper till att motivera designen och sålla bort idéer som kanske inte är så bra (Löwgren och Stolterman, s. 65 ff.) Användarvänlighet En designers jobb är att utforma webbsidan så att den passar med besökarnas sätt att agera framför datorn. Det finns flera sätt att använda för att ta reda på hur användarna faktiskt agerar framför webbsidan Usability engineering För att få reda på hur användare faktiskt navigerar på en sida har man försökt hitta mätbara metoder som kan användas för att undersöka detta. Det finns en metod som grundar sig på psykologi där man låter användare slutföra uppgifter på sidan medan man mäter hur stor andel 6

7 som slutför uppgiften, hur lång tid det tar samt hur många fel som begåtts. Detta för att se hur användarvänligt sidans gränssnitt är. Genom att genomföra mätningen flera och jämföra antalet fel som begås samt hur lång tid uppgiften tar att genomföra mellan gångerna får man fram hur lätt designen är att lära sig. Man kan också mäta hur flexibel designen är genom att se hur många människor i en heterogen grupp som kan klara uppgiften. För att få fram hur användarna själv upplever designen använder man sig av intervjuer eller enkäter (Löwgren och Stolterman, s. 148). Användarundersökningar där man studerar agerandet framför datorn har fått kritik för att de dels fokuserar på ytliga som rör gränssnittet och som bara rör delar av sidan i en begränsad miljö vilket inte återspeglar hur användarna skulle bete sig i verkligheten. Att göra sådana undersökningar kan också ta tid och fokus från andra saker som är viktiga att fundera över som har betydelse för designens användarvänlighet. (Löwgren och Stolterman, s. 91 ff.) Contextual design Denna typ av undersökning grundar sig i etnografin och genomförs med hjälp av fältstudier. För att få en förståelse för hur användarna faktiskt upplever webbsidan och agerar framför den observerar man hur användarna beter sig framför datorn. (Löwgren och Stolterman, s. 66) Tidigare användarstudier Då det kan vara tidskrävande och kostsamt att göra undersökningar med riktiga användare finns det metoder man kan använda som tagits fram med hjälp av olika användarstudier som gjorts tidigare och som visar hur användare agerar framför datorn vilka man kan använda sig av när man ska bedöma användarvänligheten på sidan (Löwgren och Stolterman, s. 91 ff.) Kritiker Man kan be någon eller några vänner och bekanta att agera kritiker. De får helt enkelt gå igenom sidan med kritiska ögon för att upptäcka vad som skulle kunna förändras, var användarna skulle kunna stöta på problem och liknande. (Löwgren och Stolterman, s. 95) Five second test För att få en bild av hur användarna uppfattar webbsidan kan man låta dem göra ett Five Second Test. Då visas en del av sidan i fem sekunder och sedan får användaren svara på ett antal frågor om vad de såg och tänkte på som Vad tror du att sidan vill förmedla? (Usability hub). 7

8 3. Kärlekens hemsidan 3.1. Min designprocess Jag är en person som har lättare att tänka i ord än i bilder så därför använde jag mig av ett par olika textbaserade listor för att strukturera upp mina tankar och min vision vad gäller hemsidan. Jag började med att skapa ett html-dokument för varje sida jag från början ville ha med på webbplatsen och började med att placera ut innehållet i kravspecifikationen. Därefter la jag till övrigt innehåll jag ville ha med och började koda sidorna och stilmallen. I takt med att sidorna började fyllas med kod skapade jag en att göra-lista i ett separat dokument som hela tiden förändrades under arbetsprocessen i takt med att sidan växte fram och jag kunde se mina tankar ta form. I början följde jag boken Learning Web design och W3schools tutorial men när sidorna började få struktur övergick jag till att söka fram koden för det jag ville fixa till för tillfället. Mot slutet hade jag kommit till det stadium då jag själv experimenterade fram lösningar på problem och för att få saker att se ut som jag ville ha dem. I början följde processen logiska steg men i och med att sidan växte fram och idéerna blev allt fler samt behövde testas fram började skapandet gå mer i cirklar. Idéer dök upp och hamnade på listan medan jag försökte lösa det problem jag för tillfället jobbade med. Olika lösningar prövades, idéer förkastades av olika anledningar, det vanligaste för att det helt enkelt inte såg bra ut och det näst vanligaste för att jag inte hittade något sätt att genomföra den på med de kunskaper jag har, till exempel krävde vissa saker kunskaper i Java eller PHP, vilket jag inte har. När jag hade layouten klar för mig började jag fylla sidorna med innehåll vilket genererade nya problem som behövde lösas och nya idéer att förverkliga. För att inte missa något försökte jag tänka med de olika hattarna några gånger under processens gång, framför allt innan jag strukturerade upp layouten, innan jag fyllde sidan med innehåll och när sidan kändes klar. Min sexårige son som visade mycket intresse för sidans framväxande skötte frågandet av varför vilket fick mig att tänka till flera gånger på varför jag egentligen gjorde saker som jag inte reflekterat över när jag bestämde hur det skulle se ut Användarvänligheten på Kärlekens hemsida För att undersöka användarvänligheten på hemsidan använde jag mig av flera olika kanaler och verktyg och vi testade hemsidan i olika enheter, skärmstorlekar och webbläsare. 8

9 Det praktiska Vi började med att testa sidan i olika webbläsare. Jag hade använt mig av Firefox i min laptop under hela designprocessen och tyckte att sidan såg bra ut. Det visade sig dock att den inte gjorde i Chrome på en dator med annan skärmstorlek. I Explorer fungerade den dock fint. På surfplattan den testades på flyttades allt innehåll också runt och såg konstigt ut men den använde också Chrome som webbläsare så jag drog slutsatsen att problemet låg där. Fortsättningsvis använde jag då Chrome istället för att kontrollera sidan. Det visade sig att problemet var att jag angett all placering i procent istället för pixlar. Efter det fungerade sidan tillfredsställande på alla enheter vi testade den i, datorer, smartphones och surfplattor samt i de tre webbläsarna Explorer, Chrome och Firefox. Jag fick tips om en sida som skulle visa webbsidan som den ser ut i flera webbläsare men den hade tyvärr lagts ner Kritikern Nästa steg var att släppa in kritikern. I det här fallet var det en vän som kan en del om webbdesign och som man alltid kan lita på berättar vad som är dåligt. Han kom med flera användbara tips och besatt dessutom surfplattan som användes för att kolla layouten. Bland annat påpekade han att sidorna inte hade något namn vilket inte är så bra ur användarsynpunkt. Han är dessutom färgblind och kollade därför att mitt färgval inte utgjorde några svårigheter att navigera på sidan, vilket de inte gjorde Five Second Test Jag skapade ett test på Usability Hub som jag annonserade ut på sociala media, vilket var bra eftersom testet var på svenska och jag fick in tio svar. Frågan: Vad tror du att sidan handlar om? fick följande svar: kärlek (2), musikrelaterat (6), en blogg om HBTQ-frågor och livet (1) och Lego (1). Sidan fick ett snittbetyg på 3,3 vad gäller layout. Det mest framträdande med sidan uppgav respondenterna var bilderna (3), färgerna (4), kärlek (1), loggan (1) och lego (1). När det gällde loggan verkade det råda vissa språkliga tvetydigheter om vad som räknas som en sådan vilket resulterade i att två personer uppgav att de lagt märke till den, tre personer att de nog lagt märke till den, fyra personer att de inte sett den och en person passade. För att få fler svarande skapade jag även detta test på engelska. Tre personer svarade, en trodde att sidan handlade om bilddelning och två att det rörde sig om HBTQ-frågor, en person passade. Kvaliteten på sidan fick låga betyg, 1, 25 i snitt. Det mest framträdande på sidan fick fem svar av de fyra personerna tre av svaren sade fotot och två loggan. Tre av personerna uppger att de lade märke till loggan och en gjorde inte det. 9

10 Click Test Jag hade lite svårt att bestämma mig för hur jag skulle göra med bandets diskografi. Eftersom vi inte hade någon musik kändes det onödigt att skapa en egen sida för den men samtidigt ville jag att man skulle hitta den. Därför gjorde jag ett klicktest där man på första sidan skulle klicka på det stället där man trodde att man skulle hitta bandets diskografi. Två personer genomförde testet och båda klickade rätt Nav Flow Test Jag gjorde ett test för att se om man förstod hur man skulle skapa ett konto för att logga in på sidan för Fans. Två personer genomförde testet varav den ena misslyckades och den andra lyckades. Personen som misslyckades hade klickat på bilden av bandet på första sidan, vilket kan ha varit ett felklick. I det andra testet skulle man klicka på de ställen man skulle välja för att genomföra en beställning. Även det testet hade två svarande där den ena lyckades genomföra hela processen medan den andra i det andra steget föll bort då hen klickade på en av produkterna i shopen istället för att välja beställningsformuläret. Kanske tänkte man att det skulle ge mer information om produkten, förstora bilden eller liknande. Jag valde att man bara fick ett klick på sig på båda testen vilket i efterhand kanske inte var så smart då besökaren kanske vill utforska sidan och inte är så målfokuserad som jag var. Anledningen till att de svarande var så få beror sannolikt på att jag valde att göra testerna på svenska eftersom innehållet är på svenska. Det medförde att tänkbara respondenter föll bort och jag fick nöja mig med de länkar jag publicerade på sociala media. Detta skedde väldigt sent i min process och därför hade jag inte tid att rekrytera fler vänner och bekanta. 10

11 4. Sammanfattning Det finns många olika sätt på vilka man kan förenkla sitt arbete med designen och strukturera idéer och innehåll samt presentera dessa för någon annan. Då jag själv är en person som har lättare att tänka i text än i bilder är det här med att göra pappers- eller digitala prototyper, gränssnittsbilder eller på andra sätt rita upp en webbdesign inget för mig, särskilt inte då man inte behöver presentera sina tankar för kunden innan man skapar sidan. Jag vill heller inte påstå att jag gjorde ett direkt scenario utan mer en slags dynamisk tankekarta eller lista som hela tiden utvecklades, förändrades och omstrukturerades. Jag kastades hela tiden mellan detta finns och jag vill ha det, hur gör man? och såhär skulle jag vilja göra, går det?. jag försökte vara kritisk och analyserande genom hela processen men levde i ärlighetens namn inte riktigt upp till det man borde göra, kill your darlings utan hade kvar till exempel färgerna trots kritik om att de var vedervärdiga eftersom de inte förstör sidans funktion i det här fallet. Användarvänligheten testades på många olika sätt. Det jag trodde skulle bli det stora problemet, att få sidan att se bra ut i olika enheter som mobil, surfplatta och dator visade sig istället bli ett webbläsarproblem och jag är lite förvånad över att Chrome inte klarade att visa sidan lika bra som Explorer och Firefox utan krävde mer justeringar. Det jag var orolig med när det gällde färgvalet var att det skulle ställa till det för personer med olika nedsättningar i färgseendet vilket det lyckligtvis inte verkar göra. De olika testmöjligheterna på Usability Hub var väldigt hjälpsamma och det är synd att jag inte nyttjade dessa tidigare så att jag hann lägga ner mer tid och tanke kring testen. Kärleken ville att sidan skulle återspegla de teman som var viktiga för dem samt inte vara för allvarlig. Det var med detta i åtanke som jag valde färgsättningen på sidan. Huruvida det var det man hade i åtanke när 40 % av de som gjorde det svenska femsekunderstestet hade i åtanke eller inte vet jag inte men jag tror knappast att någon tänkte på sidan som allvarlig. En av de sakerna som är viktiga för bandet är HBTQ-frågor och mycket tack vare loggan var det också 21 % som uppgav att de trodde att det var sidans huvudtema, vara 50 % av de som gjorde det engelskspråkiga testet. Ingen av de engelskspråkiga uppfattade att sidan handlade om ett band eller ens musik medan 60 % av de som gjorde det svenska testet uppfattade det. Antagligen hade det framgått tydligare om bilden hade varit en annan. Det testresultat som väcker mer frågor än det besvarar är ratingen som på det engelskspråkiga testet var väldigt lågt, 1,25 % medan det på den svenska var 3,3 %. Kanske beror det på att den första gruppen 11

12 inte förstod texten och att det drog ned betyget, men jag tror inte att det påverkar så mycket. Det skulle kunna vara en kulturell skillnad vad gäller design eller helt enkelt det faktum att de som gjorde det svenska testet är vänner, bekanta eller vänners vänner som helt enkelt ville vara snälla. Jag skulle såklart ha ställt följdfrågan som man ska ställa sig genom hela processen varför? 12

13 5. Källor Litteratur Löwgren, J. och Stolterman, E. (2004). Thoughtful Interaction Design. A Design Perspective on Information Technology, Cambridge, Massachusetts, MIT Press. Niederst Robbins, J. (2012). Learning Web Design. A Beginner s Guide to HTML, CSS, Javascript, and Web Graphics, Sebastopol, O Reilly, 4:e uppl. Webbsidor Kärlekens hemsida. [ ] Usability Hub. [ ] W3School. [ ] 13