[Plats för ev. illustration] Projektrapport inom Datateknik, Webbanvändbarhet, 7,5 poäng. Webbplats. Bergsåkers Pensionärers Biljardklubb

Transkript

1 MITTUNIVERSITETET Institutionen för informationsteknologi och medier (ITM) Lärare: Mikael Hasselmalm, Mattias Dahlgren Författarens e-postadress: Utbildningsprogram: Webbutveckling, 120 poäng Datum: [Plats för ev. illustration] Projektrapport inom Datateknik, Webbanvändbarhet, 7,5 poäng Webbplats Bergsåkers

2 Pensionärers Biljardklubb Sammanfattning Sammanfattning Målet med projektet var att vidareutveckla en webbplats som jag tidigare gjort åt Bergsåkers. Webbplatsen behövde göras mer användbar och det är också vad kursen handlar om. Resultatet blev en webbplats som på största möjliga sätt följer de regler och rekommendationer som finns för användbarhet. Jag valde att använda kurslitteraturen Användbarhetsboken [1] som grund tillsammans med E-delegationens Vägledning för webbutveckling [2]. Det viktigaste som ändrats är att jag lagt till en hjälpmeny med en panel för att välja textstorlek och en helt ny sektion Om webbplatsen. Jag har strukturerat om startsidan för att bättre presentera webbplatsen och förbättrat och förtydligat all interaktion, samt gjort layouten responsiv ner till mobilstorlek. När webbplatsen var klar utförde jag ett användbarhetstest med gott resultat. Testet påvisade en del brister i tydligheten vilka jag omedelbart rättade till. Jag är mycket nöjd med resultatet och tror att spelarna i biljardklubben kommer att ha stor glädje av webbplatsen. Based on the Mid Sweden University template for technical reports, written by Magnus Eriksson, Kenneth Berg and Mårten Sjöström. ii

3 1 Inledning Innehållsförteckning Sammanfattning.. ii 1 Inledning Övergripande syfte Konkreta mål Författarens bidrag Teori Definition av termer och förkortningar Metod Målgrupp Enkät Analys Webbprofil Tillvägagångssätt Test Utvärdering 6 3. Konstruktion Struktur CSS PHP Include Sidhuvud Hjälpmeny Huvudmeny Innehåll Sökväg Högerspalt Vänsterspalt Typografi Sidor Om webbplatsen Kontakt Startsida Nyheter Spelare Resultat. 12 1

4 1 Inledning Galleri Forum Logga in Redigera Formulär Knappar Övrigt Responsiv layout JavaScript Sajtikon Snabbkommandon Internationalisering Resultat Webbplatsen Navigering Om webbplatsen Kontakt Textstorlek Startsida Resultat Galleri Redigera Formulär Responsiv layout Utvärdering Resultat Ändringar Kompatibilitet Slutsatser Mål Utveckling Juridik Tillåtelse att använda någon annans material Upphovsrättslagen Personuppgiftslagen Korrekt information Källförteckning Bilaga A: Enkät

5 1 Inledning Bilaga B: Storyboard Bilaga C: Färger & Typsnitt. 29 Bilaga D: Struktur Bilaga E: Användartest. 31 3

6 1 Inledning 1 Inledning Uppgiften är att skapa en webbplats med fokus på användbarhet och jag har valt att vidareutveckla den webbplats [3] jag gjorde åt Bergsåkers under förra kursen, Web 2.0. Det började med en förfrågan från klubben om att göra en hemsida åt dem liknande den som Alnö Biljardklubb [4] har. Idén är att de aktiva i klubben och andra intresserade personer ska kunna följa med i vad som händer i klubben, främst genom nyheter och resultat. För att göra webbplatsen mer till en mötesplats finns också galleri och forum. Det finns många brister på webbplatsen vad gäller användbarhet. När jag skapade den låg fokus på att visa vad jag lärt mig i kursen Web 2.0, snarare än vad som faktiskt passade bäst för användarna. Det finns därför ett stort behov av förändringar innan webbplatsen kan börja användas på riktigt. 1.1 Övergripande syfte Målet med webbplatsen är att skapa en attraktiv mötesplats för medlemmarna i klubben, men också för spelare i andra klubbar. Det ska finnas uppdaterad information om allt som rör klubben och seriespelet. Webbplatsen ska vara tydlig och lätt att använda för alla. 1.2 Konkreta mål För att göra webbplatsen attraktiv krävs en modern och tydlig design, ett trevligt färgschema, genomtänkt typografi och ett intressant innehåll. För att innehållet på webbplatsen ska vara uppdaterat krävs att någon med kunskap och intresse kontinuerligt lägger till nytt material. Det blir därför några av spelarna i klubben som kommer att jobba med det och för att det ska fungera måste verktygen för uppdatering av sidorna vara lätta att använda och inte kräva speciella förkunskaper. För att webbplatsen ska vara lätt att använda för alla krävs en anpassning för användare med olika handikapp. 1

7 1 Inledning 1.3 Författarens bidrag 1.4 Teori Jag har skapat hela webbplatsen och dess innehåll själv. För att åstadkomma vissa funktioner har jag tagit hjälp av guider på nätet eller lärares exempel och detta finns då dokumenterat. Webbplatsen har tidigare redovisats som projekt i kursen Web 2.0, men det som jag tar upp i denna rapport är vad som förändrats för att göra den mer användbar. Användbarhet är ett begrepp som handlar om hur en webbplats kan användas till det den är tänkt. Att användaren på ett tillfredsställande sätt får ut det den kom för och att avsändaren på ett tillfredsställande sätt når fram med det den vill. För att lyckas med det måste alla delar fungera: information (text, språk, bild), utseende (navigation, läsbarhet, känsla) och teknik (funktion och interaktion). I Användbarhetsboken [1], definierar författaren användbarhet så här: användbarhet = nytta x användarvänlighet. 1.5 Definition av termer och förkortningar I rapporten finns många referenser till speciella kapitel i källorna. För att underlätta dessa referenser har jag bestämt mig för följande förkortningar. Referenserna skrivs inom parants i slutet på meningen. AB:1.1.1 R1 Referens till Användbarhetsboken [1]. Sifforna talar om vilken rubrik det handlar om. Referens till Vägledning för webbutveckling [2]. R står för riktlinje och siffran talar om vilken riktlinje det handlar om. 2

8 2 Metod 2 Metod För att kunna skapa en användbar webbplats måste jag ta reda på vilka användarna är. Jag började därför med en målgruppsanalys. 2.1 Målgrupp Enkät Användarna är spelarna i biljardklubben i första hand. I andra hand spelare i andra klubbar och i tredje hand utomstående som kan vara intresserade av att veta mer. Eftersom det är en pensionärsförening vet jag redan nu att de flesta användare är över 70 år och jag vet också att majoriteten är män. För att ta reda på lite mer om min målgrupp gjorde jag en enkät som de fick svara på, se bilaga A. Genom enkäten hoppades jag få reda på vilka förutsättningar användarna har vad gäller teknik som skärm och webbläsare, samt personliga förutsättningar som syn- och rörelsenedsättning och till sist och vad de önskar hitta på webbplatsen. Av spelarna i klubben som har dator och använder internet var det 8 stycken som kunde svara på min enkät. Samtliga har en skärmstorlek mellan tum och navigerar med musen i första hand. Ingen har Javascript avstängt och trots spelarnas ålder har ingen någon synnedsättning. Endast en är färgblind. Webbläsaren som dominerar är som väntat Internet Explorer. Endast en av spelarna använder inte IE, han använder istället Chrome. En spelare använder sig av IE samt Chrome och Opera och en spelare använder IE och Firefox. Jag hade också ställt en fråga om vilken version det är på webbläsaren, men kunde tyvärr inte få några svar där. Två av spelarna kan tänkta sig att besöka webbplatsen via mobilen. 3

9 2.1.2 Analys 2 Metod I målgruppen sitter ingen på skärm mindre än 15 tum så där är storleken inget problem. Men några kan tänka sig att besöka webbplatsen via mobilen så den måste anpassas för mobiler. Ingen har någon synnedsättning men med tanke på åldersgruppen som webbplatsen riktar sig till måste jag ändå ta hänsyn till att användare kan ha dålig syn. Även färgblindhet är en faktor att beakta då målgruppen består helt av män och 1 på 8 är färgblinda enligt min enkät. Vad gäller rörelsehinder eller problem att använda sig av musen för att navigera visar enkäten att det inte finns någon i målgruppen som lider av detta. Med tanke på att alla i målgruppen är aktiva biljardspelare så är också risken för att någon är rörelsehindrad ganska liten. Men återigen med tanke på åldersgruppen så finns risken att familj och bekanta till spelarna kan vara rörelsehindrade så en viss hänsyn måste ändå tas. Ingen som svarade på enkäten hade stängt av JavaScript så det är antagligen inte så vanligt i målgruppen men det vore bra om de viktigaste funktionerna på webbplatsen kan fungera även utan JavaScript. Den vanligaste webbläsaren är Internet Explorer och det är därför viktigast att allt fungerar och ser bra ut där. En bra bit efter kommer Chrome och därefter Firefox och Opera. Även dessa webbläsare måste webbplatsen klara av. Det var synd att jag inte fick några svar på frågan om webbläsarversion, men får helt enkelt gå på allmän statistik där. Enligt StatCounter Global Stats [5] har 96 % av svenskarna Chrome, Firefox5+, IE8-10, Safari eller Safari ipad. Alla versioner av Chrome och alla versioner efter Firefox 5 uppdateras automatiskt utan att användarna behöver göra någonting så där kan man utgå från de nyare versionerna. Det är dessa webbläsarversioner som webbplatsen måste fungera i. 4

10 2 Metod Bild 1. Tabell från StatCounter Global Stats [5] som visar de populäraste webbläsarna i Sverige. 2.2 Webbprofil Nästa steg var att börja fundera på webbplatsens utseende. Jag började med att arbeta om de gamla skisserna i Adobe Illustrator så att de såg ut som originalsidan och sedan utvecklade jag dessa skisser till jag blev nöjd med utseendet, Bilaga B. Loggan hade jag skapat sedan tidigare och jag höll fast vid de färger som jag satt på webbplatsen från början. För att göra det lättare skapade jag ett färgschema och en lista över typsnitt som används, se bilaga C. Vad gäller användbarhet och handikappanpassning har jag valt att så långt som möjligt följa de rekommendationer som finns i Användbarhetsboken [1] och på Vägledning för webbutveckling [2]. 2.3 Tillvägagångssätt Efter målgruppsanalysen och webbprofilen var det dags att börja fokusera på användbarheten. Tidigare i kursen, innan jag påbörjade detta projekt, läste jag igenom Användbarhetsboken [1] som är vår kurslitteratur. Men för att kunna använda mig av de regler och rekommendationer som finns i boken fick jag i början av projektet 5

11 2 Metod bläddra igenom den på nytt. Jag antecknade då vilka delar som behövde förändras på min webbplats för att göra den mer användbar. Jag hade därmed en lista med saker som jag sedan betade av eftersom. Efter det gick jag vidare till Vägledning för webbutveckling [2] och gick igenom hela listan med riktlinjer för att se om det var något jag missat. Högst upp på listan (R1) står att man ska utgå från WCAG 2.0 nivå AA så gick även igenom principerna som finns där. Till sist validerade jag alla sidor inklusive CSS med W3C:s valideringsverktyg. 2.4 Test Eftersom jag började med en redan befintlig webbplats så fanns möjligheten att börja med ett test direkt. De två spelare som kommer att jobba med uppdatering av informationen på sidan fick testa lägga till material. Det visade sig snabbt att det inte räcker med verktyg för att lägga till material utan att det också krävs möjlighet att ta bort material. Det är lätt hänt att mata in felaktiga uppgifter och det måste vara lätta att ta bort dessa direkt. En annan sak de önskade var att inmatad data ska finnas kvar i formulären efter att den skickats eftersom de ofta matar in liknande data direkt efter och skulle vilja slippa fylla i alla fält varje gång. Det visade sig också att högermenyn inte var tillräckligt tydlig då de inte direkt förstod hur man skulle göra för att hitta sidorna för att lägga till nyheter och bilder. Insåg också att det skulle vara bra med en instruktionsmanual där jag kan förklara hur allt på webbplatsen fungerar. 2.5 Utvärdering För att utvärdera hur användbar jag lyckats få min webbplats kommer jag att utföra ett användartest när webbplatsen är klar. Detta kommer att gå till så att jag ger mina testpersoner olika uppgifter att utföra på webbplatsen samtidigt som jag står bredvid och tittar. Testpersonen ska utföra uppgifterna och samtidigt tänka högt så att jag kan få reda på vad han/hon tänker under de olika momenten. 6

12 3 Konstruktion 3 Konstruktion 3.1 Struktur 3.2 CSS Sidan än kodad i Notepad++ och layouten är uppbyggd med HTML5 element. Strukturen består av wrapper (innehålldsruta), header (sidhuvud), helpmenu (hjälpmeny), nav (meny), section (sidans innehåll), rightbox (undermeny), leftbox (innehåll) och footer (sidfot). Bilaga D: Struktur. Tabeller används endast för att presentera data (R83, riktlinje 83 i Vägledning för webbutveckling [2]). Listor är skapade med avsedda HTML-element och rubriker med h-element (R104, R105). Webbplatsen följer standarden för HTML5 och både HTML och CSS validerar enligt W3C (R80, R84). Sidans utseende bestäms genom CSS-filerna (R82). Där finns bl.a. kod för storlek, placering, färg, och formatering för rubriker, brödtext, länkar, mm. Jag använder mig som tidigare av webbtypsnitt för att få det utseende som jag vill ha utan att behöva göra bilder av texten. Jag har tre webbtypsnitt som används till menyn och till rubrikerna. Det finns separata CSS-filer för galleri och utskrift (R96), samt två filer för större textstorlek. I CSS-filerna finns all design för hur webbplatsen ska se ut. Inget sådant finns inlagt i andra filer. Däremot är alla sidor länkade till samma CSSfiler så att de ser likadana ut. 3.3 PHP include För att underlätta hantering och redigering av de olika sidorna använder jag mig av PHP include för en del av head-elementet samt hela sidhuvud och sidfot. Det betyder att det finns en fil var för dessa delar som jag sedan länkar till på alla sidor i Webbplatsen. 7

13 3 Konstruktion Jag använder också PHP include för att infoga innehållet från filen album.php när ett nytt album skapas. 3.4 Sidhuvud Webbplatsens sidhuvud ligger i HTML5-elementet header och infogas på alla sidor genom PHP include. Därmed finns den huvudsakliga navigationen med på alla webbplatsens sidor (R31). Jag har försökt vara så logisk och tydlig som möjligt i designen av navigeringen för att göra det lätt för användarna att hitta (R28) Hjälpmeny Överst i sidhuvudet har jag lagt till en hjälpmeny (helpmenu) med två knappar, en till Om webbplatsen och en till Kontakt. Till höger om dessa knappar finns en kontrollpanel för att ställa in textstorleken på sidan (AB:12.1.2, Användbarhetsboken [1] kapitel ). Kontrollpanelen består av 3 knappar som genom JavaScript (styleswitcher.js) aktiverar 3 olika stilmallar. Med hjälp av cockies sparas användarens inställning så att man bara behöver välja en gång. För att åstadkomma detta följde jag en guide på webben [6]. Det svåraste med panelen var att designa dess utseende. Lade ner många timmar på att placera knapparna rätt i förhållande till resten av hjälpmenyn och få till aktivt val och hover Huvudmeny Huvudmenyn ligger i HTML5-elementet nav och ser i stort sätt likadan ut som tidigare. Menyn består av en horisontell lista med länkar som med hjälp av CSS stylats att se ut som knappar. För att förtydliga vart knappen längst till höger i menyn leder har jag lagt till både alt- och title-text samt texten Redigera till vänster om knappen. Dessutom har loggan blivit en länk till startsidan (AB:32.4.1). 3.5 Innehåll Webbplatsens innehåll ligger i HTML5-elementet section och är indelat i två spalter: rightbox och leftbox. Ovanför spalterna finns en sökväg och en huvudrubrik h1. 8

14 3 Konstruktion Sökväg Under huvudmenyn har jag lagt till en sökväg för att tydliggöra var på webbplatsen man befinner sig (R27, AB:32.20). Sidor längre bak har klickbara länkar, men det har inte sidan man befinner sig på Högerspalt Till höger på varje sida finns en undermeny. Idén är densamma som tidigare men den har fått ett förbättrat utseende med rubriker för att förtydliga vart länkarna leder. Samt tydligare markering av aktuell sida och hover/focus. Den har också blivit bredare för att rymma längre rader och därmed också ge innehållet i vänsterspalten lite kortare radlängd. Sidorna Hem och Kontakt har ingen undermeny utan högerspalten innehåller där text istället och är därför ännu bredare Vänsterspalt Till vänster finns själva innehållet. Antingen ligger det i en ruta med ram runt hela (leftbox) eller så är det uppdelat i flera rutor med ramar runt varje (outerleftbox + innerleftbox). Vänsterspalten har bara en min-width vilket gör att den fyller ut sidan och sedan minskar om man gör fönstret mindre. För att ge plats åt högerspalten har den en högermarginal i motsvarande bredd Typografi Typsnitten är inte några av de vanliga då jag valt att använda GoogleFonts [7] för att ge webbplatsen ett mer unikt utseende, men jag har ändå fokuserat på läsbarheten. Har valt ganska stor text i utgångsläget och med kontrollpanelen för textstorlek kan man öka den ytterligare. Dessutom är radavståndet det dubbla (R39). Jag har haft målgruppen och webbplatsens syfte i åtanke när jag skrivit texterna (R8). Har försökt hålla texten så tydlig och begriplig som möjligt (R10). Även rubrikerna är viktiga för att göra det lättare att hitta i texten så jag har försökt göra dem så tydliga som möjligt (R61). Minskade radlängden i vänsterspalten för att göra texten mer lättläst (AB:12.4.2), dessutom kan man själv minska radlängden ytterligare genom att krympa webbläsarfönstret (AB:12.4.3). 9

15 3 Konstruktion 3.6 Sidor Har valt att inte lägga till särskild information om när sidan senast uppdaterades eller granskades (R23, R79) eftersom det redan finns sådan information på de ställen där det behövs. Varje nyhet och foruminlägg är daterade och resultaten är märkta med år eller vecka Om webbplatsen För att samla information som handlar om webbplatsen på samma ställe skapade jag en sektion som heter just Om webbplatsen (R19). Länken till sidan finns i hjälpmenyn och leder till en användarmanual för hur man använder webbplatsen. I undermenyn finns också sidorna, Tillgänglighet, där man kan läsa om hur webbplatsen är anpassad för att vara tillgänglig för alla, Juridisk information, där det står om hur webbplatsen använder cockies (R20), Webbkarta, en lista över webbplatsens alla sidor, samt Webbutvecklare, där det står om mig som gjort webbplatsen. Tidigare fanns sidorna Cockies och Copyright tillsammans med Kontakt under Övrigt i sidfoten, men genom att samla informationen i Om webbplatsen tycker jag att det blir mer logiskt och med länken i hjälpmenyn blir informationen lättare att hitta Kontakt Bredvid länken Om webbplatsen i hjälpmenyn finns Kontakt. Den har flyttats upp från sidfoten för att bli lättare att hitta. Precis som tidigare finns kontaktinformation till höger och ett kontaktformulär till vänster. Filen heter kontakt.php. När formuläret skickats presenteras den skickade informationen på en ny sida, mail.php. Formuläret har användaranpassats som alla andra formulär på webbplatsen och sidan är nu också responsiv som övriga sidor Startsida Här har jag gjort en hel del förändringar jämfört med tidigare. Sidan bestod då av tre spalter: Nyheter, Resultat och Kalender. Detta är nu ersatt med en högerspalt motsvarande undermenyn på de andra sidorna. Och till vänster om denna ligger två rutor, den ena med rubriken Senaste nytt ovanför den andra som har rubriken Nya 10

16 3 Konstruktion resultat. Precis som tidigare används JavaScript för att här visa det senaste från sidorna Nyheter och Resultat. En anledning till att jag var tvungen att göra om layouten på startsidan var att det tidigare inte fanns möjlighet att få den särskilt responsiv då de tre spalterna hade en gemensam bakgrundsbild för att få det att se ut som spalterna var lika långa. Högerspalten innehöll tidigare en kalender som nu är ersatt med information om klubben och webbplatsen. Kalendern var på engelska, eftersom det var den enda jag kunde hitta som gick att bestämma en stor del av utseendet på. Detta var inte särkilt användbart då en stor del av användarna inte kan så bra engelska. Jag funderade på att byta ut kalendern men insåg att den inte var viktig. De händelser som planeras inom klubben är inte så många, utöver de återkommande träningarna och matcherna, och kan därför med fördel hellre skrivas in som nyheter. De återkommande träningarna och matcherna finns istället i sidfoten tillsammans med en länk till en google-kalender så att möjligheten i alla fall finns att använda en kalender. Visar det sig i framtiden att de vill ha en kalender direkt på webbplatsen så kan jag lägga till det då. Jag ändrade också namnet i menyn från Hem till Start. Detta helt enligt riktlinje 30 i Vägledning för webbutveckling [2] där det står såhär: Använd namnet startsida för webbplatsens första sida och Start kan användas i en länkstig och meny för att inte göra dem onödigt långa Nyheter Sidan fungerar på samma sätt som tidigare genom en databaskoppling där nyheter hämtas från databasen med MySQL och skrivs ut på sidan med PHP. Tidigare fanns tre nyhetssidor, en för varje sökning: Senaste, Årets, och Alla. Detta har jag gjort om, så att allt finns på samma sida (nyheter.php) och en JavaScript-funktion styr vilken sökning som visas. 11

17 3 Konstruktion Spelare Tidigare fanns en sida som hette Spelare där alla spelare i klubben presenterades med kontaktuppgifter. Denna information fanns också under Medlemslistor i sidfoten, men tanken var att på sidan Spelare skulle det finnas mer info om varje spelare och även bilder. När jag nu gick igenom webbplatsen på nytt så kom jag fram till att denna sida inte fyllde någon viktig funktion och att det bästa för att hålla webbplatsen relevant var att ta bort denna sida. Informationen under Medlemslistor finns kvar Resultat Galleri Sidan fungerar på samma sätt som tidigare genom en databaskoppling där resultat hämtas från databasen med MySQL och skrivs ut på sidan med PHP. Sidorna som finns under Seriespel är dessa: Tabell (restabell.php), Matcher (resmatcher.php) och Delmatcher (resdelmatcher). Under Klubbspel finns: Klubbmästerskap (reskm.php), Vårcupen (resvarcup.php), och Skinkcupen (resskinkcup.php). Jag valde att byta ut det galleri som fanns sedan tidigare mot ett fancybox-galleri [8]. Detta för att det tidigare galleriet inte fungerade i små webbläsarfönster. Till galleriet hör filerna: galleri.php och album.php (i mappen include), samt mapparna: fancybox och images. Filen galleri.php består som tidigare endast av en databaskoppling som tar fram namnen på de album som finns och sedan skickas besökaren till det första albumet. Filen album.php är den fil som innehåller själva galleriet och denna läggs som tidigare in med PHP Include i den nya fil som skapas när ett nytt album skapas. Alla galleribilder finns i mappen images och stilmallen: jquery.fancybox.css, som bestämmer galleriets utseende, ligger i mappen fancybox/source. 12

18 3 Konstruktion På sidan redbilder.php kan man ladda upp bilder till galleriet och jag har också lagt till möjlighet att ta bort bilder. Denna sida kommer man till genom att klicka på Bilder i undermenyn efter att man loggat in. Precis som tidigare använder jag mig av ett exempel från läraren Mattias Dahlgren för att skala om bilderna och spara dem i en mapp på servern. Jag hade också lagt till uppladdning av information till databasen och gjort så att en ny sida skapas automatiskt om ett nytt album skapas Forum Forumet består som tidigare av en sida: forum.php. Genom PHP och MySQL skickar och hämtar sidan data till och från databasen. Här har jag snyggat till och förtydligat formulären. Jag har t.ex. lagt till etiketter på alla formulärfält istället för att använda mig av placeholder som tidigare (AB:52.16). Tidigare var knappen Kommentera, som öppnar kommentarformuläret, inte en riktig länk utan bara en box med onclick som körde en JavaScript-funktion. På det sättet gick det inte att sätta fokus på knappen genom att navigera med tabbtangenten och det gick alltså inte att komma åt kommentarformuläret utan att använda musen. Detta har jag rättat till genom att göra om knappen till en länk. Jag har också gjort om utseendet på kommentarformuläret så att det ligger i samma ruta som originalmeddelandet, istället för en egen ruta som det var tidigare. Knappen Kommentera har bytt färg för att skapa mer kontrast och fått en pil bredvid samt understrykning när man för musen över för att förtydliga att den går att klicka på. Även Skicka knapparna har blivit tydligare med text som säger vad de gör istället för pilar som det var tidigare. Jag har också lagt till validering av formulären genom både JavaScript [9] (validatingform.js) och PHP [10] (formvalidator.php), vilket resulterar i tydliga felmeddelanden ifall information saknas eller har fyllts i på fel sätt Logga in Hit kommer man genom att klicka på knappen längst till höger i huvudmenyn. Filen heter login.php. Tidigare skickades man till en 13

19 3 Konstruktion annan sida om fel uppgifter lämnades i loginformuläret men det har jag tagit bort. Jag hittade en enkel lösning att få ett felmeddelande att visa sig på samma sida istället Redigera När användaren loggat in skickas denne vidare till sidan redresultat.php under rubriken Redigera. I menyn till höger finns Nyheter (rednyhet.php), Spelare (redspelare.php), Bilder (redbilder.php) och Logga ut! (logout.php). Valboxarnas alternativ läses in från databasen genom MySQL och skrivs ut i formulären med PHP. När ett formulär är korrekt ifyllt och användaren klickar på Lägg till så skickas informationen till databasen. Är det ett formulär med en Ta bort -knapp så raderas vald information från databasen när användaren klickar på knappen. När användaren klickar på en knapp sparas den inmatade informationen i variabler vare sig den är korrekt eller inte. Sedan skrivs värdet på variablerna ut i formuläret så att den senaste inmatningen finns kvar. 3.7 Formulär Jag har satt etiketter på alla formulärfält (AB: ) utom på valboxarna som istället inleds med en instruktion i avvikande utseende (AB:52.4.2). Där det finns många alternativ i valboxen har jag grupperat dem med elementet <optgroup> (AB:52.4.5). Jag har tagit bort attributet maxlength och fångar istället inmatningsfel när formuläret kontrolleras (AB:52.6.1). Har också försökt att anpassa testfältens storlek efter förväntat svar (AB:52.6.2, R59). Även formulärens design följer Användbarhetsbokens regler (AB:52.17). Arbetsriktningen är från vänster till höger, uppifrån och ner. Jag använder inte så många olika sorters kontroller och vänsterkanten är rak. Det finns två olika funktioner som kontrollerar inmatade uppgifter. Med JavaScript [9] (validatingform.js) kontrolleras att alla fält är ifyllda. För att kontrollera att det är rätt typ av information som är ifylld använder jag ett PHP-Skript för formulärvalidering [10] (formvalidator.php). 14

20 3 Konstruktion När formulären inte är korrekt ifyllda dyker ett felmeddelande upp, som tydligt informerar användaren om vad som är fel (AB: , R2) Knappar Alla knappar ser ut som knappar (AB:52.9.3) och inga knapptexter är gjorda som bilder (AB:52.9.1). Utseendet på knapparnas bakgrund styrs med CSS och knapptexten är vanlig text. Några knappar har ingen knapptext: knapparna i kontrollpanelen för textstorlek och Redigera -knappen, men dessa har både alt-text och title-text (AB:52.9.2). Jag har också varit noga med att döpa knappen efter vad den gör, exempelvis Skicka, Logga in, Lägg till och Ta bort (AB: , R60). 3.8 Övrigt Responsiv layout Webbplatsen har fått en responsiv layout som fungerar i alla fönsterstorlekar ända ner till mobiltelefon (R91). Detta har jag löst genom att i stilmallen och då sätta olika regler för olika storlekar JavaScript Webbplatsens viktigaste funktioner är inte beroende av JavaScript (R93). Det går att besöka webbplatsen och se allt och utföra alla uppgifter utan att ha JavaScript aktiverat Sajtikon Webbplatsen har fått en sajtikon, även kallad favicon (AB:17.2.1). En liten version av loggan som syns i adressfältet och i bokmärkes/favoritmenyn Snabbkommandon Har lagt in stöd för de vanligaste snabbkommandona och även lagt till de sidor som måste finnas på en webbplats (R68, AB:45.2). En lista på webbplatsens snabbkommandon finns under Om webbplatsen och Tillgänglighet. 15

21 3 Konstruktion Internationalisering Webbplatsen följer W3C:s rekommendationer [11] angående internationalisering. 16

22 4 Resultat 4 Resultat 4.1 Webbplatsen Webbplatsen har genomgått många förändringar till det bättre och har nu fokus på användbarhet rakt igenom Navigering En av de stora skillnaderna ligger i navigeringen där jag lagt till en hjälpmeny överst, en sökväg under huvudmenyn och förtydligat undermenyn genom design och rubriker. Tanken med hjälpmenyn var att lyfta fram dess innehåll så att det blir lättare att hitta, jämfört med dess tidigare placering i sidfoten. Sökvägen hjälper besökaren att lokalisera sig bland webbplatsens sidor. Bild 2. Huvudmenyn, hjälpmenyn och sökvägen (breadcrumbs) Om webbplatsen Om webbplatsen är en ny sektion som tillkommit för att samla information som handlar om hur webbplatsen fungerar och vad den innehåller. Dit kommer man genom en länk i hjälpmenyn eller från startsidan där det finns information om och länk till sidan Kontakt Länken till kontaktsidan har flyttats från sidfoten upp till hjälpmenyn vilket gör den mer framträdande och lättare att hitta. Har också lagt till en länk på startsidan i samband med informationen om klubben Textstorlek Längst till höger i hjälpmenyn finns en kontrollpanel för att välja textstorlek. Besökarna kan välja hur stor text de vill ha och jag kan ändå 17

23 4 Resultat ha kontroll på hur innehållet presenteras. På så vis undviks problem med att allt innehåll inte får plats och kanske inte syns när texten förstoras Startsida Startsidan har också genomgått stora förändringar. Startsidan är den första sidan man kommer till och ska vara en introduktion till webbplatsen. För att åstadkomma detta finns på startsidan en presentation av klubben och webbplatsen i högerspalten. Där finns också länkar till Kontakt och Om webbplatsen. Rubrikerna Senaste nytt och Nya resultat ger en kort presentation av de viktigaste sidorna och har länkar som leder besökaren vidare Resultat Här presenteras precis som tidigare resultat och tabeller från seriespel och klubbens interna matcher. Här har rubrikerna i undermenyn gjort mycket för att förtydliga skillnaden mellan seriespel och klubbspel. Efter att spelarna själva fått tycka till har sidan Dagens Vinnare tagits bort och Delmatcher lagts till Galleri Med det nya galleriet kan man titta på bilder även i små webbläsarfönster och galleriet fungerar också i mobiltelefoner utan problem. Tidigare gick det inte att se hela de stora bilderna om webbläsarfönstret var för litet och det största problemet var att det inte gick att stänga ner den stora bilden Redigera För att redigera materialet på webbplatsen klickar användaren på knappen längst till höger i huvudmenyn. Är användaren inte redan inloggad skickas han/hon till en login-sida, annars direkt till Redigera - sidan där man kan lägga till och ta bort olika matchresultat. Under Lägg till/ta bort i menyn till höger kan man välja andra saker på sidan att redigera: Nyheter, Spelare, Bilder och Forum. Under Sluta Redigera i samma meny finns Logga ut!. 18

24 4 Resultat Tidigare fanns bara möjlighet att lägga till material, men efter att användarna önskat möjlighet att även ta bort material så har jag lagt till denna funktion. Har också lagt till en funktion för att ta bort inlägg och kommentarer från forumet. När användaren försöker skicka material så töms vanligen formuläret men jag har sett till att den senaste inmatningen alltid finns kvar. På så vis behöver användaren inte börja om från början ifall något blivit felaktigt ifyllt. Även information som skickats stannar kvar i formuläret så ifall användaren har liknande information att mata in direkt efteråt så behöver han/hon inte heller då börja från början Formulär Jag har jobbat mycket med att få till tydliga formulärfält och fungerande felmeddelanden. I Användbarhetsboken finns många regler och rekommendationer angående formulär och jag har försökt ta till mig av dem alla. Största skillnaderna jämfört med tidigare är att jag lagt till etiketter på alla formulärfält istället för att förlita mig på platshållartexten. Den finns fortfarande kvar, men bara som extra förtydligande om hur fältet ska fyllas i. Valboxarna har ingen etikett men inleds som tidigare med en instruktion. Här har jag förtydligat genom att ge instruktionen ett avvikande utseende, nämligen kursiv och ljusare grå. Där det finns många alternativ i valboxen har jag lagt till mellanrubriker för att göra det mer överskådligt. När användaren klickar på knappen för att utföra en uppgift kontrolleras formuläret först med JavaScript. Om information saknas eller är felaktigt ifylld dyker en ruta upp som talar om vad som är fel. Om informationen går igenom den första kontrollen eller om användaren har JavaScript avstängt så kontrolleras informationen med PHP. Om information saknas eller är felaktigt ifylld dyker ett felmeddelande upp under formuläret. Har försökt formulera felmeddelandena så tydligt som möjligt och har gett dem en röd färg för att fånga användarens uppmärksamhet. 19

25 4 Resultat Om informationen går igenom PHP-kontrollen dyker ett meddelande upp i grön färg som talar om att informationen skickats Responsiv layout En annan sak som jag lagt ner mycket arbete på är att göra designen responsiv hela vägen ner till 320px bredd som är storleken på en iphone. Med 3 olika stilmallar för de olika textstorlekarna blev det många ändringar i layouten för att få innehållet att flyta snyggt när fönsterstorleken minskar. 4.2 Utvärdering För att utvärdera hur användbar webbplatsen är utförde jag ett användartest med två personer. Detta gick till så att jag gav testpersonerna olika uppgifter att utföra på webbplatsen samtidigt som jag satt bredvid och tittade och lyssnade när de berättade hur de tänkte. I bilaga E finns uppgifterna som testpersonerna utförde Resultat Användartestet visade att det var lätt att hitta hur man ställer in textstorleken. Båda mina testpersoner hittade länken till Om webbplatsen i startsidans högerspalt. Det var alltså en bra idé att lägga en länk även där och inte bara ha den i hjälpmenyn. Att hitta kontaktinformationen var heller inget problem. Däremot fastnade en av testpersonerna på instruktionstexten till kontaktformuläret och missuppfattade vilken information som skulle skrivas in. Att hitta till forumet och skriva en kommentar gick bra för båda mina testpersoner. Däremot förstod den ena inte vad det andra formuläret var till för, där man skriver nya inlägg. Båda testpersonerna hittade till matchresultaten utan problem. Att lägga till en ny match gick också bra, förutom att den ena inte förstod innebörden av platshållartexten för vecka ( V eller VV ). Båda skrev också in datumet utan streck mellan siffrorna vilket inte godkändes och de förstod först inte varför. 20

26 4 Resultat Att redigera nyheter och spelare gick utan problem. Att lägga till och ta bort bilder gick också bra, men en av testpersonerna förstod inte att man antingen skulle välja ett album eller skapa ett nytt Ändringar Användartestet resulterade i några saker som behövde ändras. Jag tog bort instruktionen till kontaktformuläret eftersom den bara gjorde det förvirrande. Ändrade också etiketterna i formuläret från Namn och E-post till Ditt namn och Din E-post. För att förtydliga formuläret för att skriva nya inlägg i forumet så lade jag till en rubrik Skriv nytt inlägg!. Ändrade också etiketterna Signatur och Meddelande till Avsändare och Inlägg. I formuläret för att lägga till en seriematch ändrade jag platshållartexten från V eller VV till Och jag gjorde om så att man kan skriva datumet även utan streck. Till sist lade jag in en text som förklarar att man antingen ska välja ett album eller skapa ett nytt när man laddar upp en bild Kompatibilitet Enligt min målgruppsanalys måste webbplatsen fungera i IE8-10, Safari 5.1-6, Safari ipad och nyaste versionen av Firefox och Chrome. Jag har själv utfört uppgifterna från användartestet ovan i de senaste versionerna av alla dessa webbläsare och allt fungerade utan problem. 21

27 5 Slutsatser 5 Slutsatser 5.1 Mål Jag tycker att jag nått mitt mål. Jag har skapat en attraktiv webbplats som är tydlig och funktionell. Den förmedlar den information och den känsla som jag tänkt. Det finns goda möjligheter att hålla informationen uppdaterad genom administrationssidorna som jag anpassat för att vara så lätta att använda som möjligt. Jag har försökt göra den tillgänglig på alla sätt som jag kan. Jag följer så många rekommendationer som möjligt från Användbarhetsboken, Vägledning för webbutveckling och WCAG. Alla sidor går igenom W3C:s validering av HTML och CSS och webbplatsen fungerar och ser likadan ut i alla webbläsare. 5.2 Utveckling För att göra det tydligare att välja eller skapa album nytt vid uppladdning av bilder skulle jag här vilja lägga till radioknappar som gör att man bara kan välja det ena eller det andra och beroende på val ska man kunna välja album från en valbox eller skriva in namnet på det nya albumet i ett textfält. Det skulle också vara bra om bilderna fick ett nytt namn vid uppladdning så att det inte finns någon risk att det redan finns en bild med samma namn. Som det är nu får man då ett felmeddelande och måste själv byta namn på bilden där den är sparad i datorn innan det går att ladda upp den. En annan sak som jag planerar att förändra är databasen. Det är många vyer för att få fram tabellerna som gör den stor och svår att överskåda. Det måste finnas något bättre sätt att lösa detta. 22

28 5.3 Juridik 5 Slutsatser Tillåtelse att använda någon annans material Det finns inget material på webbplatsen som jag bett om lov från någon annan för att använda Upphovsrättslagen Innehåll på webbplatsen som faller under upphovsrättslagen är exempelbilderna i galleriet. Dessa har jag laddat ner från foter.com och jag följer de regler som finns för att använda bilderna Personuppgiftslagen Uppgifterna om spelarna i klubben faller under personuppgiftslagen men de uppgifter som finns på sidan har godkänts av personerna själva Korrekt information Den information som finns på sidan kommer från klubben. 23

29 Sammanfattning Källförteckning [1] Tommy Sundström, Användbarhetsboken. Upplaga 1:6. Studentlitteratur AB, Lund [2] Vägledning för webbutveckling Alla riktlinjer. Se Hämtad [3] Bergsåker s webbplats som den såg ut innan detta projekt. Se Hämtad [4] Alnö Biljardklubbs webbplats. Se Hämtad [5] StatCounter, Top 12 Browser Versions. Se Välj Stat: Browser Version (Partially Combined) och Region: Sweden. Hämtad [6] Alistapart, Alternative Style. Se Hämtad [7] Google, Fonts. Se Hämtad [8] Fancyapps, fancybox. Se Hämtad [9] w3schools, JavaScript Form Validation. Se Hämtad [10] HTML Form Guide, PHP Form Validation Script. Se Hämtad [11] W3C, Internationalization. Se Hämtad

30 Bilaga A: Enkät Bilaga A: Enkät Antal som svarat på enkäten är 8 stycken. 1. Hur stor skärm har du till datorn? Mindre än 15 tum 0/8. (0 %) tum. 8/8. (100 %) Större än /8.. (0 %) 2. Vilken webbläsare använder nu när du surfar på internet? Internet Explorer.. 7/8. (87,5 %) Firefox... 1/8. (12,5 %) Chrome.... 2/8.... (25 %) Opera.... 1/8. (12,5 %) Safari.... 0/8.. (0 %) 3. Vilken version av webbläsaren har du installerad? Inga svar. 4. Har du stängt av JavaScript? Ja, JavaScript är avstängt. 0/8.. (0 %) Nej, jag har inte stängt av 0/8.. (0 %) Vet inte. 8/8.. (100 %) 5. Har du internet i mobilen och kommer besöka webbplatsen via den? Ja.. 0/8.. (0 %) Nej 6/8.. (75 %) Kanske.. 2/8.(25 %) 6. Hur navigerar du på datorn? Musen.. 8/8 (100 %) Tangentbordet 0/8.. (0 %) Ibland är det svårt att styra musen och klicka. 0/8.. (0 %) 7. Har du någon synnedsättning som gör att det vara svårt att läsa på skärm? Ja.. 0/8.. (0 %) Nej 8/8. (100 %) 8. Är du färgblind? 25

31 Bilaga A: Enkät Ja.. 1/8..(12,5 %) Nej 7/8..(87,5 %) 9. Vad vill du hitta på webbplatsen? Ett svar: Biljard. 26

32 Bilaga B: Storyboard Bilaga B: Storyboard 27

33 Bilaga B: Storyboard 28

34 Bilaga C: Färger & Typsnitt Bilaga C: Färger & Typsnitt Färgschema: #F2F2F2 #CCC # # #1E1E1E #F6F7CD #D9E021 # D1D11E #93A017 Typsnitt från Google Fonts: font-family: 'Roboto', sans-serif font-weight: 300, 400, 500 font-family: 'Oswald', sans-serif; font-weight: 300; font-family: 'Redressed', cursive; 29

35 Bilaga D: Struktur Bilaga D: Struktur 30

36 Bilaga E: Användartest Bilaga E: Användartest 1. Gör textstorleken större. 2. Hitta information om hur man använder webbplatsen. 3. Hitta kontaktinformation och skicka ett mejl via formuläret. 4. Kommentera ett inlägg i forumet. 5. Titta på matchresultat från serien. 6. Lägg till en seriematch och ta sedan bort matchen. 7. Skriv en nyhet och ta sedan bort nyheten. 8. Lägg till en spelare och ta sedan bort spelaren. 9. Ladda upp en bild i ett befintligt album och ta sedan bort bilden. 10. Ladda upp en bild och skapa ett nytt album, ta sedan bort bilden. 31