navigation, design och interaktion som beskrivs nedan. I samband med detta skissade vi olika lösningsförslag för att se hur de skulle kunna se ut på skärmen. Därefter skapade vi en dynamisk pappersprototyp av den operativa bilden. Första versionen av designprogrammets gränssnitt im- plementerades i enlighet med pappersprototypen, varför skärmbilderna av denna går bra att titta på för att lättare följa med i följande resonemang. Dessa skärmbilder finns i bilaga D. Skärmbilderna från svarsapplikatio- nen finns i bilaga E.
6.2.1 Design
Designen bör vara enkel och ren. Till detta finns flera orsaker, bland annat att webbsidorna ska gå fort att ladda, och att en ren och enkel design har större chans att se ut som önskat i flertalet webbläsare. En enkel och ren design borde även vara lättare att ta till sig för en ny användare.
Teckensnittet ska vara tydligt att läsa varför vi valde Verdana i förs- ta hand och av webbläsaren valt teckensnitt utan serifer i andra hand. Normalt skriver vi svart text i tolv bildpunkter på vit bakgrund. Rubri- ker skrivs i större fetmarkerad stil och på rubriknivå ett och två är texten färgad i en mörk röd ton för att ytterligare öka läsbarheten.
Länkar är färgade i en nedtonad blå färg och inte understrukna. När länkarna nås av muspekaren eller blir aktiva genom tabulering till dem får de en understrykning samt en annan textfärg för att uppmärksamma användaren på att en länk har påträffats.
Vi valde att vara sparsamma i vårt användande av bilder på våra webb- sidor för att göra sidorna snabbladdade och för att underlätta för webblä-
6.2. Första versionen av den operativa bilden 43
sare som inte stödjer bilder och synskadade användare med handikapp för vilka bilderna endast är i vägen.
Sidornas innehåll ramas in av en ljust beige bakgrund på vilken sidhu- vudet och sidfoten skrivs ut. Detta hoppas vi ger ett intryck av en sam- manhållen webbplats även vid hög skärmupplösning. Sidhuvudet och sidfoten markerar även sidans början respektive slut vilket enligt Tajak- ka [10] är bra för förståelsen.
Knappar för att skicka formulärdata har webbläsarens standardutse- ende för tydlighetens skull.
De icke-funktionella kraven nummer fem och sju är de som tydligast berör designen. Krav fem innebär att applikationen ska vara lätt att an- vända och förstå, medan krav sju säger att val av begrepp, koncept och metaforer ska upplevas konsekvent med användarnas verklighet.
6.2.2 Interaktion
Både navigationen och designen ingår i interaktionen eftersom en stor del av interaktionen handlar om att navigera med hjälp av länkar och upp- fatta den text som webbsidan innehåller. Men förutom detta finns en hel del formulär som användaren måste fylla i för att kunna använda appli- kationerna fullt ut och här sker mycket interaktion. Även validering av formulärdata, felhantering och applikationernas statusrapporter hör till interaktionen.
Till interaktionen hör krav fem och sex samt åtta till elva bland de icke- funktionella kraven i kravspecifikationen.
6.2.3 Navigation
Navigation finns egentligen bara i designapplikationen. I svarsapplikatio- nen finns endast ett möjligt flöde.
Viktiga egenskaper hos navigationen är att det ska vara enkelt att för- stå var på webbplatsen man befinner sig, samt hur man kan ta sig vidare till andra platser. Ett sidhuvud och en sidfot kan hjälpa till för att använda- ren ska få en uppfattning om vilken applikation eller webbplats han eller hon befinner sig på. Men det är även viktigt att mer precist veta var man befinner sig och vart man kan gå.
De huvudalternativ för layout av navigationen som vi såg var en ho- risontell meny i överkant eller en vertikal meny till vänster. Vi trodde att de enda alternativen är till vänster eller överst eftersom de flesta av våra
tilltänkta användare normalt läser från vänster till höger och uppifrån och ner. Det ska vara enkelt att identifiera menyn på webbsidorna.
Det första alternativet med en horisontell meny överst lämpar sig bätt- re för få element än för många element. Detta eftersom det inte finns så mycket plats där då menyelementen placeras efter varandra horisontellt, vilket de lämpligtvis gör. Om webbplatsen har många länkar för naviga- tion får de bättre plats i en vertikal meny.
Den vertikala menyn tar vanligtvis upp mera skärmyta vid ett fåtal ele- ment eftersom hela den spalt där menyn finns blir blockerad. Våra appli- kationer skulle enligt funktionsanalysen endast innehålla ett fåtal länkar på huvudnivån och därför ansåg vi att en horisontell meny var lämplig.
En meny som bygger på metaforen med arkivflikar var vid examensar- betet genomförande vanlig på webbplatser och vi tyckte att den fungerade alldeles utmärkt för att uppfylla de två ovan nämnda kraven. En fliknavi- gation på huvudnivå kan även byggas ut med till exempel ytterligare en fliknivå nedanför huvudnivån eller bara enkla textlänkar.
Det krav i vår kravspecifikation som berör navigationen är främst nummer fem bland de icke-funktionella kraven som säger att applikatio- nen ska vara lätt att förstå och använda.
6.2.4 Skisser och prototyper
Under arbetets gång framställdes främst skisser av olika design- och na- vigationsidéer för att presentera applikationernas funktioner, information och resultat för användarna. Detta eftersom de är lätta att framställa och mycket kommunikativa.
Skisserna har främst varit ett hjälpmedel för oss själva att kommunice- ra och bedöma gränssnitt, medan den dynamiska pappersprototypen har använts för att utvärdera gränssnitten, se stycke 6.3.
Vi gjorde ingen pappersprototyp till svarsapplikationen eftersom möj- ligheten till användarbeslut i denna appliktion är starkt begränsad.
En vy av pappersprototypen finns i bilaga C.