Maria Holmgren

TRITA-NA-E04043

Peka bara på Harry Boy– ett användargränssnitt för fingerstyrda

bordsterminaler på travbanan

NADA

Numerisk analys och datalogi Department of Numerical AnalysisKTH and Computer Science100 44 Stockholm Royal Institute of Technology

SE-100 44 Stockholm, Sweden

Maria Holmgren

TRITA-NA-E04043

Examensarbete i människa-datorinteraktion om 20 poängvid Programmet för maskinteknik,

Kungliga Tekniska Högskolan år 2004Handledare på Nada var Henrik Artman

Examinator var Kerstin Severinson Eklundh

Peka bara på Harry Boy– ett användargränssnitt för fingerstyrda

bordsterminaler på travbanan

SAMMANFATTNING

I examensarbetet, som denna rapport avhandlar, tas ett användargränssnittfram för spel på en fingerstyrd pekterminal. De spel som avses är ATG’sspel på hästar varav mest fokus lagts på spelen ”V75” och ”Vinnare &Plats”. Examensarbetet omfattar förstudier, design och användarstudier,heuristisk undersökning samt implementering i JSP (JavaServer Pages). Iförstudierna ingår en kontextuell undersökning i den restaurangmiljö vidtravbanan där gränssnittet ska finnas, samt en fokusgrupp med spelare. Idesignprocessen har metoden Parallelldesign använts vilket resulterade i tvåolika prototyper. Metoden ”tänka högt” har använts i användartesterna somutförts dels på pappersprototyper och dels på PowerPoint-prototyper. Re-sultatet av examensarbetet blev ett användargränssnitt som är mycket lättatt använda både för erfarna spelare och dem som aldrig spelat förut. Denimplementerade prototypen i JSP visar hur användargränssnittet kan kopp-las till ATG’s spelsystem.

Just point at Harry Boy -

A finger-based graphical user interface for touch-screen terminals at horse racing tracks

ABSTRACT

In this Masters’s project a graphical user interface (GUI) for a touchscreendevice used for betting on horses is presented. The betting games in ques-tion are those of Swedish ATG. Focus is on the popular games ”V75” and”Vinnare & Plats”. This Master’s project consists of preliminary studies,design and user tests, heuristic evaluation and implementation with JSP(JavaServer Pages). The preliminary studies consist of a contextual inquirythat took place in a restaurant environment next to the racing tracks and aplayerbased focusgroup. The method parallel design has been used in thedesign process which resulted in two different prototypes. In the user teststhe method ”thinking aloud” has been utilised on both paper andPowerPoint prototypes. The result of this study is a GUI that is very easy touse for both experienced and novice users. The implemented prototypepoints at how the GUI can be connected to the underlying system.

FÖRORD

Denna rapport avhandlar ett examensarbete vid NADA, Kungliga TekniskaHögskolan. Examensarbetet har gjorts på ATG, AB Trav och Galopp, iSundbyberg. Handledare på NADA har varit Henrik Artman. Handledarepå ATG har varit Kaj Adolfsson och Martin Sandahl. Vissa tester och un-dersökningar har gjorts i samarbete med Bodil Carlsson som också gjort sittexamensarbete på ATG.

Jag skulle vilja tacka mina handledare, Martin, Kaj och Henrik, för allhjälp. Jag skulle också vilja tacka Lars Bergström och alla andra trevligapersoner på ATG’s IT-avdelning för ett roligt halvår. Ett stort tack till allasom deltagit i användartester och undersökningar och slutligen ett varmttack till Kjetil Falkenberg Hansen för ovärderligt stöd och Bodil Carlssonför gott samarbete.

BildöversiktBild 1 – Bild på ATG’s kupong för spelet V75. Spelas på 7 lopp. Kupongen finns hos

ombud och på banan. ................................................................................................. 3

Bild 2 – Bild på ATG’s kupong för spelet Vinnare & Plats. Spelas på ett lopp i taget. ........... 4

Bild 3 – Övergripande systemhierarki. ................................................................................... 17

Bild 4 – Mall för varje sida i gränssnittet................................................................................ 17

Bild 5 – Huvudmeny med profiler. ......................................................................................... 17

Bild 6 – Spelmeny med dagens spel, samt genväg till övriga spel som är öppna. .................. 18

Bild 7 – Slutgiltig prototyp. Översikten i V75-spelet. Spelet är färdigt att spelas. ................. 18

Bild 8 – Slutgiltig prototyp. Avdelningssida i V75. Två hästar är valda. ............................... 18

Bild 9 – Slutgiltig prototyp. Första sidan i VINNARE & PLATS där lopp väljs........................ 19

Bild 10 – Slutgiltig prototyp. Loppsida i VINNARE & PLATS där en häst eller flera väljs. ..... 19

Bild 11 – Slutgiltig prototyp. Insatssida i VINNARE & PLATS. Här väljs om spelet ska varaVinnare, Plats eller både och. .................................................................................. 19

Bild 12 – PowerPoint-prototyp för Alt. A............................................................................... 20

Bild 13 – Pappersprototyp för översikt, Alt. B. ...................................................................... 20

Bild 14 – Pappersprototyp för avdelningssida, Alt. B............................................................. 20

Bild 15 – Slutgiltig prototyp. Avdelningssida i reservläge. Två reserver och en ordinarievald. ......................................................................................................................... 21

Bild 16 – Bild på huvudmenyn. .............................................................................................. 26

Bild 17 – Bild på spelmenyn. .................................................................................................. 26

Bild 18 – Bild på översiktssidan i V75. .................................................................................. 26

Bild 19 – Bild på avdelningssidan i V75................................................................................. 27

Bild 20 – Bild på bekräfta spelsidan i V75. ............................................................................ 27

Bild 21 – Bild på kvittosidan i V75. ....................................................................................... 27

TabellöversiktTabell 1 – Några befintliga Java-klasser utvecklade av ATG................................................. 12

Tabell 2 – Spelaktiviteter från fokusgruppen.......................................................................... 15

Tabell 3 – Spelaraktiviteter för Vinnare & Plats..................................................................... 16

Tabell 4 – Spelaraktiviteter för streckspel, V75, V65, V5 och V3. ........................................ 16

Tabell 5 – Två hjälpklasser. .................................................................................................... 24

Innehåll

1 INLEDNING...........................................................................................................................................1

2 DE OLIKA SPELEN..............................................................................................................................3

2.1 V75, V65, V5, och V3......................................................................................................................3

2.2 Vinnare & Plats, Dagens Dubbel, Trio och Raket............................................................................4

2.3 Harry Boy.........................................................................................................................................4

2.4 Programblad och information...........................................................................................................4

3 RELATERAD FORSKNING................................................................................................................5

3.1 Direktmanipulation...........................................................................................................................5

3.2 Pekskärmen ......................................................................................................................................5

3.3 Riktlinjer för design .........................................................................................................................6

3.4 Publika informationssystem .............................................................................................................6

3.5 Utvärdering ......................................................................................................................................7

4 METOD...................................................................................................................................................9

4.1 Förstudier .........................................................................................................................................9

4.1.1 Kontextuell undersökning: Kupongspel på bana...................................................................9

4.1.2 Fokusgrupp.............................................................................................................................9

4.2 Design ............................................................................................................................................10

4.2.1 Parallelldesign......................................................................................................................10

4.2.2 Prototyp................................................................................................................................10

4.3 Användarstudier och utvärdering ...................................................................................................10

4.3.1 Testpersoner .........................................................................................................................10

4.3.2 ”Tänka högt” ........................................................................................................................11

4.3.3 Heuristisk utvärdering..........................................................................................................11

4.4 Implementering ..............................................................................................................................11

4.4.1 JSP........................................................................................................................................12

4.4.2 JavaScript .............................................................................................................................12

4.4.3 Struts ....................................................................................................................................12

5 RESULTAT OCH SLUTSATSER......................................................................................................15

5.1 Förstudier .......................................................................................................................................15

5.1.1 Kontextuell undersökning: Kupongspel på bana.................................................................15

5.1.2 Fokusgrupp...........................................................................................................................15

5.2 Design och slutgiltig prototyp ........................................................................................................16

5.3 Två olika gränssnittsprototyper ......................................................................................................20

5.4 Användarstudier och utvärdering ...................................................................................................21

5.4.1 ”Tänka högt” ........................................................................................................................21

5.4.2 Jämförelse mellan båda gränssnittsalternativen ...................................................................22

5.4.3 Heuristisk undersökning.......................................................................................................23

5.5 Implementerad prototyp .................................................................................................................24

5.5.1 Vyerna..................................................................................................................................25

5.5.2 UserContainer ......................................................................................................................25

5.5.3 Huvudmenyvy......................................................................................................................25

5.5.4 Spelmenyvy..........................................................................................................................26

5.5.5 Översiktsvy ..........................................................................................................................26

5.5.6 Avdelningsvy .......................................................................................................................26

5.5.7 Bekräfta-spelvy ....................................................................................................................27

5.5.8 Kvittovy ...............................................................................................................................27

6 DISKUSSION .......................................................................................................................................29

7 REFERENSER .....................................................................................................................................31

BILAGA 1......................................................................................................................................................33

BILAGA 2......................................................................................................................................................58

1

1 INLEDNING

En typisk onsdagskväll på trav/galoppbananbörjar det första loppet vid 18.30-tiden. Totaltska tio lopp starta och de spel som kan spelasdenna kväll är V65, DAGENS DUBBEL, V3,VINNARE & PLATS och HARRY BOY. I de förstaloppen springer de oerfarna hästarna och detförsta spelet startar efter tredje loppet. I varjelopp springer som mest femton hästar och föreloppen visar dessa upp sig, eller defilerar, ochvärmer upp inför tävlingen. Det finns flera spelvarje dag på olika banor runt om i landet ochman behöver inte befinna sig på banan för attspela, det går även bra att lämna in sitt spel hosett ATG-ombud eller spela direkt på Internet(ATG.se, 2003).

Vid de flesta trav/galoppbanor finns restau-ranger av varierande prisklass. Restaurangernaligger oftast utplacerade för att få bästa utsiktöver målstrecket. Här sitter man och äter mid-dag samtidigt som hästarna springer förbi utan-för de stora glasväggarna. Vid varje bord kanca fem personer dinera och stolarna är placera-de runt det halvcirkulära bordet så att man kanfölja med i loppen. Maten delar plats med spel-kuponger, vilka man lämnar in i kassan närspelstopp börjar närma sig. Tv-skärmar visarnärbilder av loppen och vinststatistik.

Det finns utrymme för att underlätta och göradetta restaurangbesök roligare. Tanken är att ensjälvbetjäningsterminal på bordet ska vara ettalternativ till proceduren att fylla i kuponger

och lämna in dessa. En terminal skulle innebäraatt man i lugn och ro lägger sina spel och attman slipper resa sig från bordet för att gå tillkassan. Man behöver inte trassla med kupongerutan interagerar direkt med terminalen. Termi-nalen ska innehålla all nödvändig informationsom behövs för att spela. Dessutom ska den va-ra underhållande och inbjuda till att surfa runtbland resultat och nyheter. Det är viktigt attpersoner som aldrig har spelat förut snabbt ochlätt kan lägga ett spel, vilket inte alltid är så lättatt göra med kuponger. Även personer som ärgamla rävar i hästspelandet, men bara spelatmed kupong, ska utan att tveka kunna spela påsitt invanda sätt.

Eftersom miljön knappast lämpar sig för varesig mus eller tangentbord är en pekskärmster-minal ett naturligt val. För att slippa hålla redapå pekpenna, stylus, och för att inte riskera attskärmen förstörs av kulspetspennor borde an-vändargränssnittet vara anpassat för fingerstyr-ning.

En terminal av denna typ behöver självklart ettanvändargränssnitt som gör att det blir enkeltoch effektivt att spela och det är med dennabakgrund som det föreliggande examensarbetetär definierat. Uppgiften är att utforma ett an-vändargränssnitt så att det passar både nya ocherfarna spelare och sedan att göra en imple-menterad prototyp för att koppla ihop gränss-nittet med ATG’s emulator för spelsystemet.

2

3

2 DE OLIKA SPELEN

Inom travsporten fanns, under den tid då examensarbetet pågick, nio olika spel av vilkaV75, V65 och DAGENS DUBBEL kanske är de mest kända. Här ges en introduktion till spel-proceduren och en kort beskrivning av alla spel.

Spelförfarandet ser generellt ut på följande sätt.Man väljer en häst genom att dra ett streck överdess nummer på en spelkupong, se Bild 1.Detta förfarande är bakgrunden till spelarter-men att ’strecka en häst’ vilken är mycket ut-bredd bland spelare. I rapporten används’strecka’ och ’välja’ en häst synonymt. Iblandtas hästar ur tävlingen innan loppet startar, vil-ket kallas att de blir strukna, och därför finnsmöjligheten att välja reserver bland övriga

hästar i loppet. På kupongen väljs reserver påsamma sätt som ordinarie hästar, men endasttvå reserver per lopp kan väljas, första respekti-ve andra reserv. Kupongen lämnar man in i nå-gon av kassorna på banan. För de mindre spel-en (bl.a. VINNARE & PLATS och DAGENSDUBBEL) kan man muntligen tala om spelform,insats och häst och slippa fylla i en kupong.Spelet registreras i spelsystemet och kunden fårett kvitto.

Bild 1 – Bild på ATG’s kupong för spelet V75. Spelas på 7 lopp. Kupongen finns hos ombud och på banan.

2.1 V75, V65, V5, OCH V3

I ett V75-spel väljs de hästar som bedöms hastörst chans att vinna i sju olika avdelningar. Enavdelning motsvarar ett lopp. Det är möjligt attstrecka en eller flera hästar i en avdelning ochju fler hästar man streckar desto dyrare blirspelet. Kostnaden för spelet beräknas genom attmultiplicera antal hästar, vilket kallas antal ra-der, i varje avdelning. Således kostar ett speldär endast en häst valts i varje avdelning1x1x1x1x1x1x1x0,5 = 0,5 kr, om radpriset är0,5 kr. Längst ner på kupongen finns en ruta föratt välja antal system. Antal system flerfaldigar

spelet. Om någon av de hästar som streckats ien avdelning vinner så har man ett rätt ochmålet är att ha alla rätt. Vinst ges även på sexrätt och fem rätt. Streckfördelningen visar iprocent hur många som redan streckat på enhäst. Odds är ett mått för vinstutdelningen persatsad tia. En häst med högt odds anses ha litenchans att vinna, men ger större utdelning omden skulle göra det.

Andra spel som spelas på samma sätt som V75är V65, V5 och i V3 där sex, fem respektive trelopp ingår.

4

Bild 2 – Bild på ATG’s kupong för spelet Vinnare & Plats. Spelas på ett lopp i taget.

.

2.2 VINNARE & PLATS, DAGENSDUBBEL, TRIO OCH RAKET

VINNARE & PLATS-spel kan man spela på allalopp och då väljer man på en häst (eller flerahästar) i ett lopp och anger insats, se Bild 2.Man kan antingen spela ”Vinnare”, om mantror att hästen kommer vinna eller ”Plats” omman tror att den kommer att hamna på första tilltredje plats. I DAGENS DUBBEL gäller det atthitta vinnarna i två olika lopp och i TRIO gällerdet att hitta 1:an, 2:an och 3:an i samma lopp.De lopp som ingår i DAGENS DUBBEL och TRIOär bestämda på förhand. RAKET-spelet går ut påatt välja upp till sju lopp och spela ”Vinnare”eller ”Plats” på dessa. Om man vinner flyttasvinsten över som insats i nästa lopp. Detta germöjlighet att vinna stora summor med en liteninsats.

2.3 HARRY BOY

Om man inte kan något om hästar kan manvälja att spela HARRY BOY. Här behöver maninte välja själv vilka hästar man ska streckautan ATG’s spelsystem tar fram de mest troligavinnarna (lågt odds) samt några hästar medhögt odds för att få ett spel som kan ge hög ut-

delning. HARRY BOY kan spelas på de flestaspelen.

2.4 PROGRAMBLAD OCHINFORMATION

De allra flesta spelare köper ett programblad. Iprogrambladet finns information om loppen,vilka lopp som ingår i vilka spel, vilka hästarsom springer i vilka lopp samt information omhästarna och vilka kuskar som kör.

Det finns många aspekter med att spela på häs-tar. Man kan bedöma hästens chanser att vinnagenom att iakttaga dagsformen under den såkallade värmningen innan loppet startar. Ettlågt startnummer innebär att hästen startar långtin mot mitten och får ett försprång framför demsom starter längre ut. Ibland är starten flygande,d.v.s. hästarna går runt i en ring tills startsignalljuder. Kusken har naturligtvis en mycket avgö-rande roll för hur bra hästen presterar och tidi-gare resultat både för kusk och häst är viktig in-formation. Vem som tränar hästen kan ocksåpåverka spelarens val. Det finns alltså mycketinformation runt spelet som spelaren på ett en-kelt sätt vill få tillgång till.

5

3 RELATERAD FORSKNING

Här redogörs för några relevanta studier som påverkat arbetet. Dessa handlar om direkt-manipulation, pekskärmen som interaktionsverktyg, generella riktlinjer för design, speci-ella riktlinjer för system som skall finnas i en publik miljö, samt riktlinjer som tagits framför utvärdering av användargränssnitt

3.1 DIREKTMANIPULATION

Shneiderman myntade termen ’direktmanipula-tion’ (DM) år 1983. DM innebär visuell repre-sentation av objekt eller aktioner vilka ger di-rekt visuell återkoppling och är reversibla(Shneiderman, 1997). DM bygger alltså på fy-siska aktioner som att peka på t.ex. knapparistället för komplex syntax. Shneiderman be-skriver vidare vilka fördelar direktmanipulationhar om ett gränssnitt utformas på detta sätt.Några av dessa fördelar är att

• systemet blir lätt att lära för nybörjare,

• det blir lätt att komma ihåg hur saker skagöras,

• mindre fel görs och färre felmeddelandenbehövs,

• användaren känner kontroll över systemet,

• användaren känner sig trygg i systemet,vilket ökar lusten att utforska.

Shneiderman menar att gränssnitt med direkt-manipulation är bättre kandidater för avancera-de användargränssnitt än adaptiva, autonomaintelligenta agenter då dessa inte medger attanvändaren själv styr systemet.

3.2 PEKSKÄRMEN

Pekskärmen är antagligen den mest intuitivahårdvaran för interaktion mellan människa ochdator och särskilt lämpad för direktmanipula-tion. Det finns några viktiga fördelar och nack-delar med att använda pekskärm. Dessa be-skrivs bl.a. i Shneiderman (1993): pekskärmenär det snabbaste pekverktyget, ingen extra

hårdvara som mus eller tangentbord behövs(vilket sparar plats), de är slitstarka och lämparsig för frekvent användning. Några av nackde-larna är kostnaden för skärmen och att skärmendelvis döljs av resten av handen. Några andranackdelar som beskrivs i Waloszek (2000) ärlåg precision, vilket kommer sig av att fingrethar en stor kontaktyta med skärmen, samt attskärmen blir smutsig av fingeravtryck.

Wilson m.fl. utförde 1995 ett experiment påmålyta, target, där de jämförde två storlekar,20*20 mm och 14*14 mm (Wilson, Interrieden& Liu, 1995). I detta försök ingick några olikauppgifter bland annat att skriva in numeriskavärden med hjälp av fingrarna på ett virtuellttangentbord. Resultaten visade att den störremålytan både resulterade i snabbare tempo ochmindre feltryckningar. Andra försök har ocksåvisat att större målytor är att föredra. Att måly-tan ska vara stor innebär att det ryms mindre påskärmen och kan vara en nackdel.

Försök har också gjorts på målytans form, bl.a.Breinholt och Krueger (1996), och på målytansplacering på skärmen, bl.a. Leahy och Hix(1990). Dessa försök visade att formen på må-lytan är relativt oviktig så länge den är kontinu-erlig och att målytans placering på skärmen ärflexibel. Dessa faktorer är dock viktiga ur ettdesignperspektiv. I ”Interaction Design Guidefor Touchscreen Applications” (Waloszek,2000) finns praktiska riktlinjer för hur knapparska utformas, placeras och grupperas med hän-syn till deras funktionalitet. Några av de vikti-gaste designreglerna när det gäller fingerstyrdapekskärmar är:

• Tryckbara element, t.ex. knappar av olikaslag, bör inte vara mindre än 2*2 cm. An-ledningen till detta är att ett finger ska fåplats och att minska risken för feltryck-ningar.

6

• Avstånd mellan tryckbara element får intevara mindre än 3 mm.

• Pekning är lättare än dragning, t.ex. är detbättre att ha en upp/ner-pilknapp för attvälja bland fler alternativ än en traditionellrullist.

• Använd en ljus bakgrund, för att inte fin-geravtryck ska reflekteras.

• Om möjligt undvik textinmatningar, ettvirtuellt tangentbord på skärmen med2*2 cm stora bokstäver kräver stor plats.Ett numeriskt tangentbord tar mindre platsoch är således något bättre.

3.3 RIKTLINJER FÖR DESIGN

Shneiderman (1997) ger åtta grundlägganderiktlinjer som ska beaktas vid design av använ-dargränssnitt. Dessa riktlinjer, vilka är empiris-ka, måste anpassas till applikationen i fråga.

1. Sträva efter konsekvens. Om gränssnittet ärkonsekvent kan användarens kunskaper tas tillvara på ett bättre sätt genom att hon kännerigen sig. Detta gäller på alla nivåer i gränssnit-tet. Liknande sekvenser eller aktiviteter skafölja samma mönster. Knappar med liknandefunktion ska vara lika till utseende. Terminolo-gin i menyer, på knappar och i hjälpfunktionerska vara konsekvent genom hela applikationen.

2. Låt den vana användaren använda genvägar.När systemet har blivit en rutin kommer använ-daren att vilja att det går fortare och att interak-tionerna blir färre. Det bör då finnas möjlighettill någon form av genvägar, t.ex. snabbkom-mandon.

3. Tillhandahåll informativ återkoppling. Braåterkoppling minskar osäkerheten hos använda-ren och förebygger fel på ett enkelt sätt.

4. Formge sekvenser så att de har tydliga börjanoch slut. Strukturen ska hjälpa användaren attförstå vad som kommer att hända i nästa steg.

5. Ge enkel felhantering i vanligt språk somger information om vad som gått snett och hurdetta kan lösas. Lägg inte skulden på använda-ren.

6. Ge möjlighet att enkelt ångra en handling.Användaren ska inte behöva göra om förmycket om hon gjort fel i ett steg.

7. Gör det möjligt för erfarna användare attkänna kontroll över systemet. Användaren skakänna att hon kan styra systemet och inte tvärt-om.

8. Minimera arbetsminnesåtgången. Då män-niskan har svårt att hålla mer än 7±2 enheter iminnet samtidigt (Miller, Dix et al., 1997) skasystemet vara sådant utformat att användareninte ska behöva komma ihåg längre sekvenser.Om det finns olika val bör inte valmöjligheter-na överstiga nio. Information bör delas upp ienheter som är lätta att överskåda.

3.4 PUBLIKA INFORMATIONS-SYSTEM

Det gränssnitt som tas fram inom ramen fördetta examensarbete kan på många sätt ses somett publikt informationsystem. Publika infor-mationssystem finns överallt i samhället ochnågra exempel är bankomater, bokningssystempå tågstationer och flygplatser och information-skiosker på museum. Speciella krav ställs pådessa system då de måste vara intresseväckan-de, engagerande och extremt lättanvända för attbli nyttjade och uppskattade. I Kules et al.(2003) beskrivs hur ett digitalt fotoalbum an-passas för att bli ett publikt informationssys-tem. Här presenteras också riktlinjer för att fåomedelbar användbarhet (immediate usability)vilket är nödvändigt för ett publikt informa-tionssystem. Den första av fyra riktlinjer är attväcka intresse och ta fram det mest intressantaoch demonstrera detta som en slags introduk-tion. Den andra riktlinjen är att systemet skavara så lätt att använda att en nybörjare kan ar-beta självständigt efter att ha observerat en ex-pertanvändare i 15-60 sekunder. Den tredjeriktlinjen handlar om engagemang när använda-ren interagerar med systemet och hur detta en-gagemang kan bibehållas. Den fjärde riktlinjenär att systemet snabbt och enkelt återställs ochförbereds för en ny användare, när en använda-re avbryter interaktionen. Utöver de åtta gene-rella riktlinjerna bör alltså dessa tas i beaktningnär användargränssnittet utformas.

7

3.5 UTVÄRDERING

Jakob Nielsen (Dix et al., 1997) formulerarföljande empiriska heuristiker som kan använ-das vid utvärdering av användargränssnitt:

• Synbar systemstatus. Systemet ska ge an-vändaren en ständig visuell återkoppling påvad som händer i systemet inom rimlig tid.

• Överensstämmelse mellan system ochverklighet. Systemet ska kommuniceramed användarens språk i ordval, fraser ochkoncept, och inte med systemorienteratspråk. Följ befintliga konventioner och låtinformationen presenteras i en naturlig ochlogisk ordning.

• Användarstyrning och frihet. Användareväljer ofta fel funktioner av misstag ochbehöver en enkel väg bort från oönskadetillstånd utan att behöva arbeta sig igenomomfattande dialoger. Använd ”ångra” och”gör om”.

• Enhetlighet och standarder. Användarenska inte behöva undra om olika ord, situa-tioner eller handlingar betyder samma sak.Följ plattformsspecifika standarder.

• Felförebyggande. Det är viktigare att ut-forma systemet så att fel undviks än att habra felmeddelanden.

• Igenkännande istället för ihågkomman-de. Gör objekt, kommandon och val synli-

ga. Användare ska inte behöva minnas in-formation från en dialog till en annan. An-vändarinstruktioner ska vara synliga ellerlätt åtkomliga så fort användaren behöverdem.

• Flexibel och effektiv användning. Kort-kommandon, osynliga för ovana användare,ökar effektiviteten för expertanvändare, ochanpassar systemet för både erfarna och oer-farna användare. Möjliggör snabba åt-komster och genvägar till ofta utfördahandlingar.

• Estetisk och minimalistisk design. Dialo-ger ska inte innehålla information som äröverflödig eller som sällan är nödvändig.All extra information konkurrerar med denrelevanta informationen och förminskardess relativa synlighet.

• Hjälp användare att känna igen, dia-gnostisera och åtgärda fel. Felmeddelan-den ska uttryckas i klartext (utan kod), klartoch tydligt indikera problemet och kon-struktivt ge förslag till en lösning.

• Hjälp och dokumentation. Även om detbästa vore att systemet skulle kunna använ-das utan hjälp eller dokumentation, så kandet vara nödvändigt att ha. Det ska vara en-kelt att söka efter denna information, denska vara inriktad på användarens uppgift,den bör tala om vilka konkreta steg sommåste utföras för att utföra en uppgift, ochhjälpen får inte vara för omfattande.

8

9

4 METOD

Detta kapitel behandlar de metoder och tillvägagångssätt som använts för att ta fram ettändamålsenligt användargränssnitt samt för att implementera en prototyp. Kapitlet äruppdelat i fyra delar: förstudier, design, användartester och utvärdering, samt implemen-tering. Förstudierna och vissa delar av användartesterna har planerats och utförts till-sammans med Bodil Carlsson.

4.1 FÖRSTUDIER

Framtagande av gränssnitt görs med fördel medanvändarens medverkan redan från start. Tan-ken med förstudierna är att de ska ge förståelseför hur spelet fungerar samt hur spelare gör närde spelar. De ska ge information om kontexteni vilken spelet bedrivs och omkringliggande as-pekter med spelet. De ska också ge informationom vilka aktiviteter spelarna utför och i vilkenordning de görs, samt vilka fakta som önskastillgänglig i de olika skederna av spelet. Förstu-dierna ska också ge en förståelse för de pro-blem eller svårigheter som eventuellt kan finnasmed att spela och hur miljön påverkar detta.Tillsammans med funktionella krav ska dessainsikter ligga till grund för den första designenav användargränssnittet.

Två olika metoder ingår i förstudierna: en kon-textuell undersökning och en fokusgrupp. Denkontextuella undersökningen utfördes i en avserveringarna vid travbanan och fokusgruppenbestod av vana spelare.

4.1.1 Kontextuell undersökning:Kupongspel på bana

En kontextuell undersökning utförs i den kon-text, miljö, som det tänkta systemet ska finnas(Usor, 2003). Metoden bygger på tre principer,kontext, intervjuarens fokus och samarbetemellan intervjuare och testperson. Det är svårtatt få en riktig bild av de problem eller tillväga-gångssätt som finns hos systemet, i detta fallkupongspelande, om man inte gör undersök-ningen i rätt miljö. Intervjuarens fokus är de fö-reställningar hon har om situationen. Det ärviktigt att inte fastna i felaktiga föreställningarutan kunna vara flexibel och byta fokus vartef-ter nya förutsättningar dyker upp. Den tredjeprincipen om samarbete bygger på att låta an-

vändaren ha rollen av expert inom sitt områdeoch att föra en öppen och informell dialog.

Anledningen till att denna metod valdes är föratt den miljö som gränssnittet kommer att an-vändas i är ganska tuff, d.v.s. ljudnivån kan va-ra hög, och det kan finnas störande momentsom medför avbrott i spelet och som sänkerkoncentrationsförmågan. Man kan anta att detkrävs mer av gränssnittet som ska användas påen restaurang vid travbanan än om det hade an-vänts i en lugn och stillsam miljö.

Undersökningen utfördes av två personer därbägge antecknade och förde dialog med fyraspelare samtidigt. Tidpunkten för undersök-ningen var en vardagskväll efter arbetstid me-dan spelen pågick och platsen var en av serve-ringarna vid banan. Spelarna ombads att spelasom de brukar och berätta vad de gjorde ochförklara hur de spelar. Fokus var att se om spe-larna samarbetar då de spelar, om de spelar ettspel i taget eller flera spel samtidigt, samt sevilka störande moment som finns och hur detpåverkar spelandet.

4.1.2 FokusgruppFokusgrupp är en diskussionsmetod som går utpå att användare i grupp diskuterar ett givetproblem (Usor, 2003). Diskussionen ska varafri, från användarens perspektiv, men en mode-rator ska se till att fokus hålls inom några väl-definierade områden.

Målet med fokusgruppen var att få idéer om enövergripande struktur för användargränssnittet.Det område som fokus låg på var att identifieraaktiviteter förknippade med spelet, grupperadessa aktiviteter och hitta en logisk ordning ochflöden mellan dem.

10

De frågeställningar som söktes svar på var:

• Vilka spelaktiviteter följs av vilka?

• Vilka olika ”vägar” finns?

• Vilken information vill man ha åtkomligsamtidigt som en viss spelaktivitet?

• Vilka svårigheter finns med kupongsys-temet?

Anledningen till att vana spelare valdes var attfå hjälp att förstå hur spelen går till och att tatillvara ev. bra egenskaper hos dagens kupong-spelande och överföra dessa till det nya använ-dargränssnittet. Generellt bör fokusgrupper be-stå av minst sex användare (Nielsen, 1997),men det gick inte att få ihop fler än tre använ-dare samtidigt vid ett tillfälle. Utöver dessa trefanns en moderator och en assistent som an-tecknade. Endast en fokusgrupp, vid ett tillfälle,blev genomförd då den ansågs ge tillräckligtmycket bakgrundsmaterial för att börja med de-signen. Förutom diskussion om spelen fick an-vändarna skriva ner aktiviteter på Post-it-lapparoch gruppera dessa. Detta gjordes för att ingeninformation skulle gå förlorad samt för att få ettkonkret material att arbeta vidare med.

4.2 DESIGN

Det som legat till grund för designen är de re-sultat som erhållits från fokusgruppens möte,resultat från den kontextuella undersökningen,funktionella krav från ATG’s sida samt riktlin-jer som finns för framtagande av användbaraanvändargränssnitt. En omfattande kravspecifi-kation upprättades av Carlsson och Holmgren(2003) för användargränssnittet där de samladekraven ställts upp. Denna är ett internt doku-ment för ATG och tas inte med i denna rapport.

Shneidermans åtta riktlinjer (1997), har använtsvid gränssnittsdesignen för att få ett användbartgränssnitt. Andra praktiska riktlinjer som an-vänts är de i Waloszek (2000). Dessa riktlinjerhar varit grundläggande i designprocessen.

4.2.1 ParallelldesignDå förstudierna gjordes gemensamt med BodilCarlsson valdes metoden parallelldesign. Var

sitt gränssnitt togs fram oberoende av varandra.Bodil Carlssons alternativ betecknas Alt. A ochmitt alternativ betecknas Alt. B. Målet med pa-rallelldesign är att få så stor mångfald i desig-nen som möjligt och sedan välja ut de delarsom fungerar bäst och få en förbättrad design(Usor, 2003). De två olika gränssnittsalternati-ven gjordes bara på övergripande struktur avsystemet och på spelet V75.

4.2.2 PrototypFör att snabbt komma igång med användartes-ter utvecklades pappersprototyper. Att arbetamed pappersprototyper är ett utprövat och ef-fektivt arbetssätt (Snyder, 2003). En av förde-larna med papper är att användarna lättare kanändra och kommentera direkt i prototypen, vil-ket kan vara ett bra sätt för användaren attåskådliggöra sina synpunkter.

Nackdelen med pappersprototyp är att åter-kopplingen blir mycket långsam och att det ärsvårt att avgöra om användaren kommer attuppfatta systemet som tillräckligt snabbt. Där-för bestämdes att en prototyp i MicrosoftPowerPoint av det resulterande gränssnittetskulle utvecklas då en PowerPoint-prototyp kansimulera pekskärmens funktioner och ge ettsnabbare tempo och mer trovärdigt beteende.

4.3 ANVÄNDARSTUDIER OCHUTVÄRDERING

För att testa prototypernas användbarhet utför-des användartester och utvärderingar.

De metoder som användes var ”Tänka högt”samt heuristisk utvärdering. Användartesternautfördes delvis tillsammans med Bodil Carls-son. Den heuristiska utvärderingen utfördes till-sammans med en assistent utan speciella kun-skaper inom gränssnittsdesign eller Människa-Dator-Interaktion (MDI).

4.3.1 TestpersonerEftersom användarmålgruppen är mycket bred,bedömdes det som lämpligt att dela in testper-soner i följande kategorier: erfaren spelare, ny-börjare och förstagångsspelare. Till en erfarenspelare räknas den som spelat mycket och kanspelreglerna och vet hur information kring

11

spelet används. Den erfarna spelaren har mångakrav på vad som bör kunna göras i systemetoch vilken information som ska finnas tillgäng-lig. En nybörjare har spelat en eller två gångeroch förstår spelet men har inga eller få krav påvad som ska kunna göras. Förstagångsspelarenkänner inte till vad spelet går ut på eller hurman spelar.

En förhoppning var också att några av testper-sonerna skulle vara ovana vid datorer, men ty-värr hittades inga datorovana testpersoner.

4.3.2 ”Tänka högt”Metoden ”Tänka högt” går ut på att testperso-ner ska ”tänka högt” när de löser uppgifter,d.v.s. ska berätta vad de gör, hur de känner försystemet och hur de tänker gå tillväga. Dennametod ger en mängd information om problemsom uppkommer under testets gång som an-vändarna kanske inte skulle kommit ihåg vidintervjun efter testet (Usor, 2003). Användar-testet gick till så att testpersonerna informera-des muntligen om testet och syftet med det.Testpersonerna fick muntligen och skriftligenveta de uppgifter som de skulle utföra medhjälp av prototypen. Två uppgifter gavs, attspela ett V75-spel och att spela ett VINNARE &PLATS-spel. När testet utfördes m.h.a. pap-persprototypen fick användarna direkt peka på”skärmen” men när den utfördes m.h.a. Power-Point-prototypen fick testpersonerna användamus. Anledning till detta var att testet genom-fördes utan pekskärm. Det skulle blivit för svårtoch långsamt att simulera pekskärm genom attlåta försöksledaren klicka på musen samtidigtsom användaren klickat på skärmen.

Tillsammans med uppgiften fick testpersonenett programblad (beskrivs i Kap. 2.4). I pro-grambladet var de hästar som skulle väljas in-ringade med rött. Förstagångsspelarna fick enkort förklaringstext om spelet och de erfarnaspelarna fick en extra uppgift. Den extra upp-giften innebar att även välja reserver för ettlopp, något som inte är så vanligt att nybörjarebryr sig om. Alternativt kunde uppgiften utförtsutan programblad med bara en lista på de hästarsom skulle streckas i varje lopp. Att ha en listamed hästar bedömdes inte som svårare än attanvända programblad och även då all informa-tion som finns i programbladet bör finnas påterminalen så ska de som har programblad lätt

kunna använda dessa tillsammans med gräns-snittet.

En generell regel är att ha mellan fem och åttatestpersoner, förutsatt att de ges liknande upp-gifter. Nielsen och Landauer har visat att dettaär tillräckligt då antal nya problem som upp-kommer drastiskt minskar efter fem till sex an-vändare (Snyder, 2003).

Sammanlagt testades gränssnitten på nio perso-ner, fem i den första omgången och fyra i denandra. Första omgången utfördes testen på enpappersprototyp och andra omgången på enPowerPoint-prototyp. Av testpersonerna i förstaomgången var en erfaren spelare, tre nybörjareoch en förstagångsspelare. I andra omgångenvar tre av testpersonerna erfarna spelare och ennybörjare.

Användartesterna ägde inte rum i den rättamiljön, d.v.s. restaurangen, då det var svårt attfå dit testpersonerna. De ägde i stället rum itestpersonernas hem eller arbetsmiljö. Dåstörsta delen av användartesterna ägde rum un-der semestertid var det svårt att få testpersoner.Strategin för att få tag i dessa var genom per-sonliga kontakter.

4.3.3 Heuristisk utvärderingSom ett komplement till användartesterna föratt fånga upp eventuella användbarhetsproblemutfördes heuristiska undersökningar. Denheuristiska undersökningen är en struktureradanalys där varje del av gränssnittet analyserasgenom att se om vissa heuristiker är uppfyllda.De tio heuristiker som använts är Jakob Niel-sens (Dix et al., 1997).

Heuristisk undersökning har gjorts på det förstagränssnittsutkastet av Alt. B samt den senasteversionen av samma alternativ. Enligt Nielsen(Usor, 2003) ska en heuristisk utvärdering helstbestå av tre personer eller fler. Detta var intemöjligt vid tillfället. Den har istället gjorts avtvå personer, varav den andra personen inte harspeciella kunskaper inom MDI.

4.4 IMPLEMENTERING

Målet med den implementerade prototypen varatt det skulle vara möjligt att spela ett V75 spel.

12

Den implementerade prototypen skulle kopplastill en befintlig emulator. Emulatorn har sammagränssnitt som ATG’s riktiga spelsystem, vilketinnebär att prototypen skulle kunna kopplas tillspelsystemet på på samma sätt.

Användargränssnittet ska så långt det är möjligtlikna prototypen som tagits fram i tidigare ske-de och fungera så som den är tänkt att fungera.

Förutsättningar för implementationen är de Ja-va klassbibliotek som ATG utvecklat. Dessamöjliggör skapandet av kupongobjekt till deolika spelen, samt att hämta information omspel, lopp och hästar. Här beskrivs bara lite kortom några viktiga klasser, se Tabell 1.

Tabell 1 – Några befintliga Java-klasserutvecklade av ATG.

Klass Beskrivning

Lopp Innehåller alla lopp för ett visstdatum och visst spel. Ur loppenkan objektet Start hämtas. Startrepresenterar en häst somspringer i loppet. Här finns bl.a.hästnamn.

Kupong

Spelkupong

V75-kupong

Representerar en kupong ochhar metoder för att streckahästar i olika avdelningar, kollavilka hästar som är streckade,kolla om kupongen är korrektifylld m.m.

SpelUtbud Klass för aktuella spel. Härfinns metoder för att hämta allaspel från en kalender.

Vad Ett vad är ett registrerat spel ispelsystemet. Här finns meto-der för att hämta serienummeroch registreringsdatum för ettspel.

Vidare beskrivs kort de olika tekniker som an-vänts för implementering av användargränss-nittet.

4.4.1 JSPJSP (JavaServer Pages) är en mall för web-sidor som använder Java-kod för att genereraett HTML-dokument dynamiskt. JSP-tekniken

ger möjlighet att blanda HTML med Java-kod(Hanna, 2003; JSP, 2003).

För att enkelt efterlikna den tillgängliga proto-typen så väljs HTML-kod. Detta gör att de bil-der som skapats för prototypen mycket enkeltkan återanvändas och gränssnittets utseendeenkelt kan byggas upp med tabeller. Eftersomdet redan finns ett bra underlag med Java-klasser så är JSP ett naturligt teknikval. Alter-nativt skulle gränssnittet kunna gjorts som enren Java-applikation.

En viktig del av JSP är så kallade Tag libraries.Med dessa flyttas koden ut i Java-objekt ochstora mängder kod blandat med HTML kanundvikas. De klasser som implementerar funk-tionaliteten hos tagen kallas Tag Handlers.Fördelen med att använda tags är att sidornablir mer överskådliga och lättare att förstå förden som inte kan Java och bättre om t.ex. enHTML-editor ska användas.

4.4.2 JavaScriptJavaScript är ett lättviktsprogrammeringsspråk,så kallat scriptspråk, som utvecklats av Netsca-pe för webben och skrivs ofta direkt i HTML-sidan (Netscape Devedge, 2003). JavaScript ut-vecklades för att öka interaktiviteten hosHTML-sidan bl.a. genom att tillföra sidan dy-namik och förbättrad design. JavaScripten kanreagera på händelser, som musklick, och hante-ra dessa. De kan användas för att läsa och skri-va HTML och för att validera data.

I prototypen har JavaScripten använts för att fådynamik i JSP-sidan.

4.4.3 StrutsStruts är ett ramverk för att bygga web-applikationer enligt MVC, Model-View-Controleller Modell-Vy-Kontroller på svenska (Cava-ness, 2002; Struts, 2003). MVC är ett design-mönster som ursprungligen härstammar frånSmalltalk.

MVC separerar logiken från presentationen ge-nom att dela upp applikationen i tre delar, mo-dell, kontroller och vy. Kontrollen hanterar vadsom ska ske eller delegerar ut förfrågningar, imodellen finns logiken och i vyn den grafiskaframställningen.

13

I Struts yttrar sig MVC-mönstret genom att vy-er oftast är JSP-sidor, kontrolldelen sköts avactionclasser och actionforms och logikenfinns t.ex. i Java-klasser eller databaser.

Vyer. Vyer i Struts utgörs ofta av JSP-sidor.Dessa kan innehålla statiska delar som HTMLoch XML. För att få dynamik används ofta Taglibraries. Dels de tags som finns i JSP, delsStruts-specifika tags, samt egendefinieradetags. I prototypen används JavaScript i störreutstreckning än tags för att få dynamiska sidor.Anledningen till detta var att det blev enklareoch gick snabbare.

Actionclasser. En actionclass tillsammansmed bl.a. actionform har rollen av kontroller iMVC-modellen. Denna klass tar emot paramet-rar, utför nödvändiga handlingar och lämnarkontrollen vidare till t.ex. en JSP-sida, eller enannan actionclass eller liknande. Vyn och ac-tionclassen mappas (kopplas ihop) i en XML-fil.

Actionform. Actionformen representerarHTML-forms och tar hand om inparametrar ochutparametrar från dessa. Actionformen kan be-skrivas som brandvägg mellan HTTP och ac-tionclassen (serversidan).

14

15

5 RESULTAT OCH SLUTSATSER

Detta kapitel presenterar de resultat och slutsatser som erhållits från de olika undersök-ningar och tester som utförts inom de tre delarna förstudier, design och användartestersamt utvärdering. Kapitlet innehåller också en genomgång av den prototyp som imple-menterats.

5.1 FÖRSTUDIER

Här presenteras de resultat som förstudiernagett. Dessa har legat till grund för de ursprung-liga designidéerna för användargränssnittet.

Den kontextuella undersökningen på banan hargett inblick i spelsituationen och visat hur spe-lare spelar i rätt miljö. Resultatet från fokus-gruppens möte blev en mer konkret plan överhur ett spel går till.

5.1.1 Kontextuell undersökning:Kupongspel på bana

Miljön i restaurangen är stressig och bullrig.Det är mycket spring fram och tillbaka tillluckorna där man lämnar in sina kuponger.Kassorna finns inte i restaurangen men det ärinte så många meter att gå. Strax innan ett loppska starta, d.v.s. vid spelstopp, och efter ettlopp precis avgjorts är det ofta lång kö till dem.De flesta äter middag eller vistas i baren samti-digt som de spelar, men när loppen går är detmånga som lämnar borden för att gå närmareoch se bättre.

Man sitter gärna med ett gäng kompisar ellerarbetskamrater och ofta spelar man ett eller fle-ra spel tillsammans för att det inte ska bli sådyrt och för att få samlad expertis. Många görockså sina egna ”hemliga” spel utöver de ge-mensamma. Ett VINNARE & PLATS-spel spelasoftast ensamt medan V75 eller V65 ofta spelasgemensamt.

Det är vanligt att man växlar mellan flera olikaspel samtidigt. Ofta lägger man ett spel åt sidanför att fylla i ett annat och går sedan tillbaka tilldet första vid ett senare tillfälle. När man spelarnågra gemensamma och några egna spel kandet bli ganska många spel som ligger i kupong-högen. Det gäller att hålla reda på när spelstopp

är för de olika spelen för att inte missa att läm-na in något i tid.

Sättet att fylla i avdelningarna skiljer sig åt.Några spelare föredrar att fylla i avdelningarnai loppordning, men de flesta väljer att börjamed att fylla i de lopp där man vill ha en spik(d.v.s. en häst som man tror är säker vinnare).Några ringar först in de hästar som ska väljas iprogrambladet och för sedan över detta till ku-pongen i loppordning.

De flesta spelar bara de spel som går den kväl-len på banan där de sitter, men några passar påatt spela andra spel som är öppna på andra ba-nor i landet, eftersom det kostar extra att spelahos ett ombud.

Kupongerna är inte speciellt anpassade för ny-börjare. På baksidan står hur de ska fyllas i mende inte är självförklarande och även en vanspelare kan göra misstaget att strecka fel.

5.1.2 FokusgruppResultatet från fokusgruppens diskussion pre-senteras lättast i tabellform. Spelarna identifie-rade först de aktiviteter som är förknippat medhästspel. Dessa fjorton aktiviteter står (utanordning) i Tabell 2.

Tabell 2 – Spelaktiviteter från fokusgruppen

Välja lopp Titta på värmning

Välja insats Ta reda på hästnamn

Fundera ut ca insats Ta reda på placeringar

Välja häst Välja spelform

Ta reda på kusk Ta reda på startform

Titta på odds Titta på kupong

Titta på radinfo,d.v.s. pris per rad

Räkna ut totalbeloppför spelet

16

Diskussionen gick sedan vidare till att försökaorganisera aktiviteterna. Spelarna var i höggrad överens om den ordning som visas i ta-bellerna nedan.

Vid de olika spelformerna görs olika aktivite-ter, därför väljs spelform först. Tabell 3 visaraktiviteter för VINNARE & PLATS-spelet ochTabell 4 visar aktiviteter för alla streckspel,d.v.s. V75, V65, V5 och V3.

Tabell 3 – Spelaraktiviteter för Vinnare & Plats.

Aktivitet Önskad tillgänglig information

1 välj lopp startform, flygande eller i nummerordning

2 välj hästnummer hästnamnplaceringarvärmningkusk

3 välj insats odds

Tabell 4 – Spelaraktiviteter för streckspel, V75, V65, V5 och V3.

Aktivitet Önskad tillgänglig information

1 fundera ut ca insats, d.v.s. hur stortsystem eller hur många rader

radinformationpris per rad

2 fundera på häst hästnamnplaceringarvärmningkusk

3 välj lopp med denna häst

4 välj häst hästnamn

5 välj nytt lopp, välj flera hästar

Under alla steg ville spelarna dessutom haöversikt över kupongen och aktuellt totalbe-lopp.

Den viktigaste svårigheten med kupongspelan-de som identifierades var att fylla i kupongenrätt. På kupongen står endast avdelningsnum-mer, ej loppnummer, vilket ibland gör att dessablandas ihop. Det kan också hända att fel hästarblir streckade då det inte finns några hästnamnpå kupongen.

DAGENS DUBBEL, RAKET eller TRIO diskutera-des inte med fokusgruppen. Anledningen varatt det inte fanns tillräckligt med tid.

5.2 DESIGN OCH SLUTGILTIGPROTOTYP

Här presenteras designen på det slutgiltiga an-vändargränssnittet. Bild 3 visar schematiskt hursystemet är uppbyggt.

17

Huvudmeny

informationspelskola

spelmeny

V5 V75 VP mm

Bild 3 – Övergripande systemhierarki.

Nedan, se Bild 4, visas en mall för de kompo-nenter som ska finnas på varje sida om intespecialfall föreligger.

Bild 4 – Mall för varje sida i gränssnittet.

Tanken med att ha en mall är att få ett konsek-vent gränssnitt. Det ska alltid gå att ta sigsnabbt till huvudmenyn eller spelmenyn då manofta växlar mellan olika spelare och olika spelvilket överensstämmer med resultaten från denkontextuella undersökningen. Tillbaka-knap-pen ska alltid finnas för att lätt kunna ångra detsenaste man gjort. Kontextuell hjälp ska alltidfinnas tillhands (Hjälp-knappen) och informa-tion om spelet, t.ex. odds och startlistor skaockså finnas tillgänglig (Sportinfo-knappen).Informationen är också tänkt att vara kontextu-ell då användaren, i de allra flesta fall, vill haodds eller startlistor på det lopp hon är inne påeller för det spel hon håller på att lägga. Det skaockså finnas möjlighet att söka sådan informa-

tion om andra spel och lopp genom denna gen-väg.

För att spegla olika knappars funktionalitet görsde visuellt olika. Utgångspunkten är att knapparsom exekverar något eller för användaren fram-åt i spelet görs hårda och fyrkantiga. Det gällert.ex. spela-, bekräfta- och fortsätt-knappen.Knappar som visar val görs mjuka och avrun-dade, t.ex. knappar för att välja hästar, genvägtill spelmenyn och sportinfo-knappen. Färgeranvänds sparsmakat. ATG’s grafiska guide an-vänds, bl.a. ska spela-knappen vara grön. Föratt få bra återkoppling när en hästknapp trycktsner ska denna bli ”nedtryckt”, vilket åstadkomsgenom att göra den mörkgrå.

Det första som möter spelaren är det som kallashuvudmeny, se Bild 5. I den kontextuella un-dersökningen var en slutsats att spelarna spelartillsammans men också lägger egna spel. Där-för har huvudmenyn flera valbara profiler. Sä-kerhetskrav gör att man bara kan lägga spel påsin egen profil, men det går fortfarande attspela tillsammans om man kommer överens omvem som ska lägga spelet på sin profil. En ge-mensam profil vore bra men det är inte möjligti dagsläget p.g.a. säkerheten i spelsystemet.

Bild 5 – Huvudmeny med profiler.

När en profil valts kommer man till en spelme-ny, eftersom användaren, enligt resultaten frånfokusgruppen, börjar med att välja spel, se Bild6. Då majoriteten av dem som spelar på bananspelar på de spel som pågår där och då, visat iden kontextuella undersökningen, koncentrerasdenna sida till att visa dagens spel på aktuellbana. Möjlighet finns också att spela andraöppna spel. Eftersom det också framgick i den

18

kontextuella undersökningen att det är vanligtatt växla mellan spel finns också möjlighet attspara spel och hämta upp dem från spelmenyn.Ditt konto-knappen ska leda till informationom användarens ATG-konto där bl.a. kontout-drag ska vara tillgängligt. Sportinfo-knappenska leda till huvudsidan för de sportinforma-tionssidor där bl.a. resultat från avgjorda spelska finnas. Dessa sidor är inte utformade.

Bild 6 – Spelmeny med dagens spel, samt gen-väg till övriga spel som är öppna.

V75 och VINNARE & PLATS-spelen har legattill grund för designen av de andra spelen föratt få konsekvens i de olika spelen. Att just des-sa spel har valts som utgångspunkt beror på attde är de viktigaste och vanligaste spelen hosATG.

När man valt V75 i spelmenyn kommer man tillen översikt, se Bild 7. Översikten visar vilkahästar som är streckade och vilka som är reser-ver. Det finns knappar som leder till de sju oli-ka avdelningarna, se Bild 8. I fokusgruppenville spelarna först ”fundera ut kostnad” ochsedan ”fundera ut häst”. Dessa aktiviteter ärmer diskussionsartade än överförbara till kon-kreta aktioner i gränssnittet. Här kan de infor-mationssidor som finns vara till hjälp för attvälja hästar och tillsammans kan spelarna dis-kutera hur stort spel de vill göra. Nästa aktivitetvar att välja lopp och sedan välja häst. Dessaaktiviteter resulterade i översiktssidan där allaavdelningar (lopp) kan väljas och avdelningssi-dan där hästar kan väljas. Eftersom lopp kontraavdelning kan vara förvirrande står både lopp-nummer och avdelningsnummer på knapparna.

Bild 7 – Slutgiltig prototyp. Översikten i V75-spelet. Spelet är färdigt att spelas.

Det optimala hade varit att ha information omodds, kusk och startform i avdelningssidan, ef-tersom aktiviteten ”fundera ut häst” även görsunder spelets gång. Detta fick tyvärr inte plats,men knappen Sportinfo leder direkt till dennainformation. Möjlighet finns att lägga till i vartfall kusk efter hästnamnen om en större skärmväljs eller om mindre text är godtagbar. I över-siktssidan finns knappar för att spara spelet,spara till senare, vilket gör att spelet kanhämtas upp från spelmenyn. Ta bort allahästar-knappen rensar spelet så att ett nytt kanpåbörjas. Pilknapparna till höger ökar ellerminskar antal system. Nedanför dem visas enuppdaterad kostnad för spelet. I avdelningssi-dan finns knappar som leder till föregående ochnästa lopp samt Alla V75-lopp som leder till-baka till översikten. Här syns också antal raderoch kostnad för spelet.

Bild 8 – Slutgiltig prototyp. Avdelningssida iV75. Två hästar är valda.

19

VINNARE & PLATS-spelet utformas också efterde aktiviteter som fokusgruppen definierade.Först väljs lopp, Bild 9, sedan häst, Bild 10,och till slut insats, Bild 11.

Bild 9 – Slutgiltig prototyp. Första sidan iVINNARE & PLATS där lopp väljs.

Bild 10 – Slutgiltig prototyp. Loppsida iVINNARE & PLATS där en häst eller flera väljs.

Bild 11 – Slutgiltig prototyp. Insatssida iVINNARE & PLATS. Här väljs om spelet ska varaVinnare, Plats eller både och.

Designen av alla spel presenteras lite kort här,men i Bilaga 1 finns de presenterade med bil-der. De spel där flera lopp ingår, V65, V5, V3och RAKET, är uppbyggda som V75. Designenav TRIO och DAGENS DUBBEL underbyggs inteav fokusgruppens resultat eftersom dessa spelinte blev diskuterade. Dessa har designats efterliknande principer som VINNARE & PLATS ochV75. I DAGENS DUBBEL ingår två lopp sominte är valfria och därför finns ingen sida därlopp väljs, som i VINNARE & PLATS, men efter-som det bara ingår två lopp så kommer maninte till en översikt utan direkt till första loppet.TRIO spelas endast på ett förbestämt lopp, ochspelaren hamnar direkt i loppsidan för att väljade hästar som hon tror blir 1:a, 2:a och 3:a.Som designen ser ut nu väljer man 1:a, 2:a och3:a i ordning. Både DAGENS DUBBEL och TRIOavslutas med en sida som påminner omVINNARE & PLATS-sidan där insats väljs. Härfinns möjlighet finns att göra om valen. IDAGENS DUBBEL innebär det att genvägar finnstill bägge loppen och i TRIO innebär det attgenvägar finns till sidorna där 1:a, 2:a och 3:aväljs.

Då tanken är att spelarna ska hyra eller låna enterminal, hämta denna i en kassa och bära medsig den till bordet har inte så stor vikt lagts vidatt göra en intresseväckande introduktion i själ-va gränssnittet, vilket är nödvändigt för publikainformationssystem/kiosker (Kules et al.,2003). Designen har först och främst utgått frånatt gränssnittet ska vara funktionellt och lättan-vänt och i mindre grad hur det kan utformas för

20

att vara underhållande och roligt att använda isig.

5.3 TVÅ OLIKA GRÄNSSNITTS-PROTOTYPER

Här beskrivs de första grässnittsutkasten somledde fram till den slutgiltiga prototypen vilkenpresenterades i föregående kapitel. De två olikadesignförslagen som togs fram oberoende avvarandra skilde sig inte så mycket åt. Anled-ningen var antagligen att förstudierna gjortstillsammans och en gemensam föreställning ta-git form. Det blev naturligt att bara ta fram ettalternativ gemensamt för VINNARE & PLATS,då detta spel är relativt okomplicerat och akti-viteterna som identifierats för spelet lätt kundeöverföras till designen. Att förslagen inte skildesig åt har både fördelar och nackdelar. En för-del var att det blev enklare att motivera denövergripande strukturen som presenterades ikapitel 5.2 eftersom båda utvecklarna var över-ens om den. Nackdelen är kanske att mångfal-den som parallelldesign ska ge inte blev så storoch att fler designförslag på VINNARE & PLATSkanske hade visat att det fanns bättre sätt att lö-sa designen.

I V75 var den viktigaste skillnaden förutomordval och olika funktioner spelets uppbygg-nad. Alt. A (B. Carlsson) baserades på flikar, seBild 12, och Alt. B (mitt) baserades på nya si-dor, se Bild 13 och Bild 14. Det var svårt att tabort något av alternativen från början, då an-vändarna var mycket oeniga. Svårigheten låg iatt bedöma en viktig faktor, nämligen snabbhet,när prototypen bara fanns på papper. Iställetgjordes bägge pappersprototyperna om tillPowerPoint-prototyper för att lättare kunnauppskatta fördelar och nackdelar. Här visas denförsta PowerPoint-prototypern på Alt. A samtden första pappersprototypen på Alt. B.

Bild 12 – PowerPoint-prototyp för Alt. A.

Bild 13 – Pappersprototyp för översikt, Alt. B.

Bild 14 – Pappersprototyp för avdelningssida,Alt. B.

21

5.4 ANVÄNDARSTUDIER OCHUTVÄRDERING

Här presenteras resultaten från de användartes-ter som gjorts på bägge gränssnittsalternativensamt vilka ändringar som gjorts på dessa. Denförsta omgången med användartester gjordes påtvå olika pappersprototyper. Den andra om-gången gjordes på motsvarande PowerPoint-prototyper.

5.4.1 ”Tänka högt”Det visade sig att det var enkelt att göra deuppgifter testpersonerna fick. Alla testperso-nerna klarade dem utan att fråga om hjälp. Ing-en markant skillnad i utförande märktes mellanförstagångsspelare, nybörjare eller erfarna spe-lare. Detta var bra eftersom en applikation somdenna ska vara oerhört enkel att använda. Attanvändarna inte behövde se en expertanvändareanvända systemet för att klara av uppgifternavisar att det inte finns ett så stort behov av engenomgående introduktion till gränssnittet.Vissa moment var dock oklara och skapadeonödig förvirring. Här följer några av de vikti-gaste resultaten.

I första utkastet av Alt. B fanns en OK-knapp iavdelningssidan, se Bild 14, vilken skulle be-kräfta att de hästar som var markerade skulleväljas och leda vidare till översikten där de val-da hästarna syntes. Knappen skapade viss för-virring och testpersonerna ansåg inte att dengav dem någon nyttig information. Den byttesut mot en Återgå till V75-loppen-knapp föratt se om detta var mer tydligt. Andra omgång-en tester visade att detta inte heller var ett lyck-at val av namn då användarna uppfattade knap-pen som att gå tillbaka i spelet och inte gåframåt.

I Alt. B visade det sig vara tröttsamt att gå till-baka till översikten varje gång när man marke-rat hästar i en avdelning. En genväg till nästalopp infördes i avdelningssidan. Efter andraomgången med tester gavs ytterligare en gen-väg, till föregående lopp. Knappen Återgåtill V75-loppen bytte namn till Alla V75-lopp vilket testanvändarna tyckte var bättre.

I första versionerna av gränssnitten ledde re-server-knapper till en egen sida som såg lika-dan ut som vanliga avdelningssidan med un-

dantag av rubriken. Detta var inte bra främst avden anledningen att de hästar som redan streck-ats som ordinarie inte syntes i denna sida. Re-server-knappen i båda alternativen, utformadesistället som en tillståndsknapp. När dennaknapp hade tryckts ner var det möjligt att mar-kera hästar vilka då blev tydliga reserver ge-nom att texten reserv 1 respektive reserv 2syntes på knapparna. Den knapp som försttrycktes ned blev automatiskt reserv 1 och denandra som trycktes ned blev reserv 2. I reserv-läget går det även att avmarkera reserverna. Destreckade hästarna syntes samtidigt som reser-verna, se Bild 15.

Bild 15 – Slutgiltig prototyp. Avdelningssida ireservläge. Två reserver och en ordinarie vald.

Spara-knappen skapade förvirring främst i Alt.A då testpersonerna trodde att de var tvungnaatt spara de markerade hästarna för varje flik,se Bild 12. I Alt. B skapade den mindre förvir-ring men det var oklart för många vad dengjorde. Den bytte namn till spara spel ochspara till senare. Namnet Spara till se-nare var mer populärt hos användarna och val-des därför.

Rensa system och Harry Boy-knappen, och iviss mån spara till senare, skapade oklar-heter i Alt. A. Testpersonerna uppfattade olikaom dessa knappar gällde globalt, d.v.s. för helasystemet (kupongen) eller lokalt, d.v.s. bara föraktuell flik (lopp).

Testpersonerna var oeniga om vilket alternativsom var bäst, intuitivt tyckte de att Alt. A bordevara snabbare men att det var mera rörigt. Alt.

22

B var mer lättförståeligt och det var bra mednamn på hästarna.

När gränssnitten gjordes om till PowerPoint-presentationer i andra omgången tester visadedet sig att testpersonerna inte uppfattade tids-skillnaden mellan Alt. B och Alt. A som så stor.

Något som kom fram tydligt i den andra om-gången, främst bland de vana spelarna, var atthästnamnen var mycket viktiga. Ofta vissteman vilken häst man ville satsa på, men intevilket nummer den hade.

En slutsats är att knappar generellt inte bör hanamn som Spara, Rensa osv. Trots att dessafinns i många system så var de inte alltid själv-förklarande i denna applikation. Det är bättreatt ha längre namn som mer specifikt förklararvad som görs. T.ex. var Spara till senareeller Spara spel bättre än bara Spara. Knapp-texten Ta bort alla hästar var bättre än Ren-sa.

I spelmenyn görs skillnad på de spel som är di-rektspel (spel på aktuell bana, aktuell dag) ochde spel som inte går på den bana spelaren be-finner sig på eller de som inte går den dagen.Denna uppdelning var inte klar i första utkastetav huvudmenyn. Där fanns endast knappar förnågra spel och en knapp som hette Övrigaspel. Men i och med att texten ”Dagens spel påSolvalla” lades till samt att knappen Övrigaspel bytte namn till Övriga spel som äröppna blev den uppdelningen mycket klarare.

Huvudmeny-knappen är inte så bra och inget braalternativ till den har tagits fram. Testpersoner-na tyckte att den snarare såg ut som en rubrikän en knapp som leder till huvudmenyn. Denborde byta namn och utseende. Kanske är tillhuvudmeny ett bättre förslag eller så borde hu-vudmeny tas bort helt och bytas ut mot någotsom mer syftar mer till byte av profil eller spe-lare.

De andra spelen är inte testade och fler an-vändartester borde göras på gränssnittet där allaspel ingår och där uppgiften för testpersoneninnebär att växla mellan spel på ett realistisktsätt. Detta är ju ett viktigt moment i spelförfa-randet. Framförallt bör TRIO och DAGENSDUBBEL testas eftersom dessa inte har stöd från

fokusgruppen och skiljer sig väsentligt från bå-de VINNARE & PLATS och V75.

5.4.2 Jämförelse mellan båda gränssnitts-alternativen

Här redogörs för nackdelar och fördelar med detvå olika gränssnittsalternativen.

Alt. A, se Bild 12.

Fördelar:

• Lättare att växla mellan lopp. Det krävs en-dast en knapptryckning för att komma tillvalfri avdelning. Det finns behov av attsnabbt kunna lägga ett spel om det är korttid till spelstopp.

• Igenkänning från internetspelet Interbet(ATG, 2003) vilket använder fliksystem.De som använder Interbet är vana vid flik-system för avdelningarna.

Nackdelar:

• Inga hästnamn får plats. Om gränssnittetgjorts för pekskärm med stylus, penna,skulle det funnits plats för hästnamn ellerom en större skärm kan användas kan häst-namnen eventuellt få plats på knapparna.

• Global/lokal problematik med HarryBoy-,Rensa- och Spara till senare-knapparna.Användarna blev förvirrade och hade olikauppfattningar om dessa knappar gällde helasystemet eller bara en avdelning.

Alt. B, se Bild 7 och Bild 8.

Fördelar:

• Hästnamnen får plats bredvid hästnumren.

• Ingen problematik med Globala/lokalaknappar. Då detta alternativ har två sidorfinns ingen oklarhet om att Ta bort AllaHästar- och Spara till senare-knapparna gäller för hela systemet i över-sikten.

Nackdelar:

• Inte lika smidigt att växla till valfri avdel-ning. Det krävs en knapptryckning till nästa

23

lopp eller föregående lopp, men två knapp-tryckningar till annan valfri avdelning.

Eftersom det tydligt framgått att hästnamn ärmycket viktigt och att användarna inte uppfattarAlt. B som märkbart långsammare så valdesdetta alternativ. Detta alternativ är också merlikt VINNARE & PLATS spelet i sin uppbyggnadvilket gör det mer konsekvent mellan spelen.

5.4.3 Heuristisk undersökningHär presenteras de viktigaste resultaten från deheuristiska undersökningarna. Resultaten ärgrupperade efter de tio heuristikerna vilka ärindelade i fyra grupper. Bilder på de delar avgränssnittet som nämns i texten finns i Bila-ga 1.

Grupp 1: Synbar systemstatus, felförebyg-gande, enhetlighet och standard, igenkän-nande istället för ihågkommande. Knapparsom det inte ska gå att trycka på ser inaktivera-de ut genom att vara gråskuggade. Exempel påsådana knappar är spela-knappen, vilken finnsi alla spel, knappar med loppnummer som ledertill lopp som redan startat, Ta bort alla häs-tar och Spara till senare-knapparna som ärgråa när inga hästar är valda. Detta ger en godsynbar systemstatus och hindrar användarenfrån att göra fel genom att trycka på dessa vidfel tillfälle. Att använda gråskuggade knapparär också standard på de flesta plattformar.

För att se vilken profil som är aktuell för till-fället finns alltid namnet på profilen på sammaställe (under huvudmeny-knappen) på alla sidor.Detta hindrar användaren att försöka lägga spelpå ”fel” profil som i slutändan inte är möjligtdå användaren måste slå in rätt pinkod när spel-et ska bekräftas.

I V75-översikten visas kostnad för spelet vilkenuppdateras varje gång som antal system ändras.Detta ger bra återkoppling om den kanske vik-tigaste informationen för användaren. Kostna-den ändras också när hästar avmarke-ras/markeras. I första versionen visades intekostnaden i avdelningssidan men detta lades tillför att användaren ska kunna se hur kostnadenändras när hon lägger till hästar. Detta bidrarockså till att användaren slipper komma ihågkostnaden.

V75-översikten visar all information om speletanvändaren vill ha innan hon trycker på spela-knappen. Samma information visas i bekräftaspel-sidan där spelet ska bekräftas, se Bilaga 1punkt 8. Detta minskar risken för att ett felak-tigt spel (från användarens sida) ska skickas tillspelsystemet.

I Avdelningssidan på V75 i första versionenförde reserver-knappen till en ny sida där re-server kunde markeras. Detta var inte så bra.Användaren måste då komma ihåg vilka hästarhon valt som ordinarie. I sista versionen är re-server-knappen en tillståndsknapp. När dennatrycks in blir sidan i reservläge, detta syns påreserver-knappen och i rubriken. Om hästarmarkeras blir dessa första respektive andra re-serv. Ordinarie hästar syns fortfarande somnedtryckta. Detta ger en bättre synbar system-status, minskar risken att välja fel hästar ochanvändaren behöver inte komma ihåg ordinariehästval.

Grupp 2: Överensstämmande mellan systemoch verklighet. I spelmenyn visas banans ak-tuella spel. Dessa spelknappar ser exakt ut somrespektive spelkupongs logotyp, de har sammafont, färg och design. Detta för att användarnaska känna igen spelen. Texten ”Dagens spel påSolvalla” bekräftar att det är spel som sker justnu.

Vissa begrepp har tagits från spelet t.ex. antalsystem och antal rader. Dessa är kända förvana spelare men inte för förstagångsspelare.De är dock intuitiva p.g.a. visuell återkoppling,t.ex. antal system multiplicerar upp kostnadenoch antal rader ökas/minskas då hästar marke-ras/avmarkeras. Valda hästar har inte tagitsfrån det muntliga spelarspråket där de kallas”streckade hästar”, men det är ett intuitivtspråkval. Anledningen att antal system ochantal rader tagits från spelarspråk men intevalda hästar är att de förstnämnda inte harnågon bra motsvarighet i vanligt språk medanvalda hästar är en bra motsvarighet till”streckade hästar”, som inte alls är självklar förförstagångsspelare utan härstammar från ku-pongen.

Översiktssidan och avdelningssidan i V75 på-minner inte om verklighetens kupong, av denanledningen att kupongen inte är så lätt att fylla

24

i för en förstagångsspelare. Det är även lätt fören van spelare att fylla i fel. Däremot påminneravdelningssidan om programbladet där allahästar presenteras i nummerordning och mednamn.

Grupp 3: Flexibilitet och effektiv använd-ning, och användarstyrning och frihet. Detfinns inte så många genvägar främst av denanledningen att varje genväg, om den ska vara iform av en knapp, tar stor plats. Genväg tillspelmeny och huvudsida finns alltid för att un-derlätta att byta spel eller byta spelare vilket ärmycket viktigt. Detta var en av slutsatserna frånden kontextuella undersökningen på banan. Iförsta utkastet fanns ej genvägar mellan loppeni avdelningssidorna, se Bild 14, i nya versionenfinns genväg till föregående lopp samt till nästalopp. Detta gör det snabbare för de som väljerhästar i loppordning.

Eftersom den mesta informationen, detaljeradestartlistor, odds mm, inte fick plats på över-siktssidan eller avdelningssidan finns alltid engenväg, Sportinfo-knappen, till sådan infor-mation. Denna måste vara kontextuell för attlättare få fram den information som behövs justpå den aktuella sidan. Dessa informationssidorhar inte utformats.

Det bör undersökas om det finns behov av flergenvägar. Ett alternativ som inte utretts är attanvända gestikkontrollerade snabbkomandon.

Grupp 4: Estetisk minimalistisk design ochhjälpdokumentation. Att alla sidor uppfyllerkravet om minimalistisk design är viktigt efter-som det råder mycket begränsad platstillgångdå skärmen är relativt liten och komponenternamåste vara anpassade för fingerstyrning. Givet-vis måste gränssnittet bli mer estetiskt tilltalan-de och designas om utifrån de mallar som nufinns för utseendet.

Kontextuell hjälp ska alltid finnas tillgänglig,men hjälptexter har inte utformats.

5.5 IMPLEMENTERAD PROTOTYP

Den del av gränssnittet som har implementeratsär huvudmenyn, spelmenyn och spelet V75.Det som är möjligt att göra i den implemente-rade prototypen är följande:

• Gå in på en profil

• Välja V75 i spelmenyn

• Markera valfria hästar och reserver i de oli-ka avdelningarna

• Se en översikt över valda hästar och reser-ver

• Välja att spela ett färdigt spel

• Erhålla ett kvitto på det lagda spelet

Här presenteras hur implementeringen avgränssnittet gjorts. Först redogörs lite allmäntför hur de olika komponenterna har använts ochsedan presenteras varje sida i prototypen meden beskrivning av hur de är uppbyggda. För tvåav vyerna, översiktsvyn och avdelningsvynfinns exempelkod i Bilaga 2.

I Tabell 5 beskrivs två hjälpklasser som imple-menterats.

Tabell 5 – Två hjälpklasser.

Klass Beskrivning

LoppGenerator En klass som genererarlopp för aktuellt datum pårätt bana. Loppobjekteninnehåller i sin tur Star-tobjekt vilka har all infor-mation om hästarna.

InfoOmLopp Loppen som genererats iLoppGeneratorn sparas iett infoOmLoppobjekt.

JavaScripten används för att ändra knappars ut-seende genom att byta bilder när knappentrycks ner. De kan lagra tillfälliga värden ochbyta vyer och skicka med parametrar till vyer-na. När en sida laddas om hämtas informationfrån Java-objekt (i sessionen) och variabler iJavaScripten uppdateras. Java-kod bygger uppsidan medan JavaScript ändrar den när någotsker. Dynamiken kunde lösts på annat sätt medactionforms och Tag libraries.

Tag libraries har inte används så mycket, i vartfall inte några egendefinierade. För att sätta

25

ihop JSP-sidor används tiles tagen. Det skullekunna bli snyggare kod om man bara användersig av tag libraires, eftersom det separerarHTML från Java-kod. Separeringen gör att do-kumentet blir lättare att förstå för utomståendesom kan HTML men inte Java. Här valdes dockatt blanda Java och HTML för att det var lättareoch gick snabbare då det tar tid att skiva tag-handlers. Dessutom kan det förutsättas att depersoner som kommer att komma i kontakt medprototypen när den är färdig kan Java. Vidareutveckling av den skulle dock kunna vara attbåde använda standard tag libraires och defini-era egna, och på så sätt slippa Java-kod direkt iJSP-sidorna. Tag libraries skulle kunna ersättamycket av JavaScripten.

Actionforms har inte använts dels för att sparatid och dels för att det inte fanns så stort behovav det i denna applikation. Det blev enklare attundvika forms och ta in parametrar direkt i ac-tionclassen och där göra nödvändiga kontroller.I prototypen finns en actionclass för varje vy.Denna bestämmer vad som ska ske innan vynvisas upp.

5.5.1 VyernaVyerna byggs efter en mall (selfservicede-fault.jsp) där det finns fyra olika ställen att läg-ga in JSP-sidor. Anledningen till detta är bl.a.för att kunna göra en JSP-sida enbart med Ja-vaScript-funktioner. Denna sida läggs i HTML-headern eftersom JavaScript-funktioner måsteligga i en header. Överdelen av gränssnittet,med huvudmeny-knapp, spelmeny-knapp ochhjälp-knapp ser för de flesta vyer likadan ut,därför finns en ställe där överdelen kan läggas.Sedan finns det plats för en mellandel och enfotdel. Med olika JSP-sidor är det lätt att åter-använda kod. Till exempel har översiktsvynoch avdelningsvyn samma JSP-sida som över-del. I överdelen finns en rubrik som ska varaolika beroende på vilken sida som presenteras.Detta löses genom att i UserContainern (seKap. 5,2,2) spara en rubrik som ändras i de oli-ka actionclasserna.

Prototypen består av sex vyer. Dessa är huvud-vyn, som motsvarar huvudmenyn i pappers-prototypen, spelmenyvyn, som motsvarar spel-menyn, oversiktsvyn som motsvarar översikts-sidan, avdelningsvyn som motsvarar avdel-ningssidan, bekräfta spelvyn som motsvarar si-

dan där spelet bekräftas, samt kvittovyn sommotsvarar kvittosidan.

5.5.2 UserContainerEtt UserContainer-objekt innehåller främst in-formation om användaren, t.ex. namn, lösenord,om denna är inloggad m.m. UserContainernläggs i ett sessionsobjekt vilket gör att all in-formation som finns i UserContainern är till-gänglig under hela användarens session.

Här sparas, för enkelhetens skull, all informa-tion som ska vara tillgänglig under en session.Detta är ett spelKupongobjekt, ett infoOmLop-pobjekt, ett spelUtbud, ett Vad, aktuellt avdel-ningsnummer samt en rubrik. Genom att läggakupongen här kan den plockas fram antingen ien JSP-sida eller i en actionclass, ändras ochsedan läggas tillbaka. Det finns sju avdelningar,men en avdelningsvy, och för att hålla reda påvilken avdelning som ska visas sparas en av-delningsvariabel i UserContainern.

Det skulle vara fullt möjligt att implementerafler spel samt möjliggöra för flera spelare sam-tidigt. Ett spelUtbud- och infoOmLoppobjektkan då läggas som applikationsobjekt och be-höver inte sparas i UserContainern.

5.5.3 HuvudmenyvyHuvudmenyn blev mycket enkel, se Bild 16.Den består av en huvudsida, en överdelssidasamt en sida med JavaScript-funktioner. Ennamnknapp, t.ex. Bodil (Bild 16), laddar uppspelmenyvyn. actionclassen hämtar ett spelut-bud för aktuellt datum och bana. I actionclas-sen skapas också en loppgenerator som genere-rar aktuella loppobjekt vilka läggs i ett in-foOmLoppobjekt som i sin tur läggs in i User-Containern.

26

Bild 16 – Bild på huvudmenyn.

5.5.4 SpelmenyvySpelmenysidan är också enkel, se Bild 17. Härfungerar bara den knapp, V75, som laddar uppöversiktsvyn.

I actionclassen sköts inloggning med använ-darnamn och lösenord. Detta är hårdkodat mendet skulle vara lätt att utveckla så att användar-namn och lösenord skickas in som parametrartill actionclassen för att skapa olika spelare.

Bild 17 – Bild på spelmenyn.

5.5.5 ÖversiktsvyÖversiktsvyn, se Bild 18, består av fyra JSP-sidor: En som innehåller JavaScript-funktioner(Oversikt_functions.jsp), en överdelssida (Hea-der.jsp), en huvudsida (Oversikt.jsp) samt enfotsida (Footer _Oversikt.jsp).

I motsvarande actionclass, (OverviewAction-.java), skapas en ny V75kupong, om det inte

redan finns en sådan, och aktuellt datum hämtasur spelutbudet. Actionclassen kan ta emot pa-rametrarna avdelningsnummer, valda hästaroch reservhästar och om parametrar skickas inhämtas kupongen från UserContainern och dehästar och reserver som skickats in streckas idenna. Om en avdelningsparameter skickats inbyts avdelningsnummer i UserContainern.

I Oversikt.jsp hämtas kupongen ut och iHTML-tabeller skrivs vilka hästar som ärstreckade och reserver ut för varje avdelning.Bilder med knappar för varje avdelning läggsut. Dessa knappar laddar upp rätt avdelningsvygenom att skicka med ett avdelningsnummersom parameter. Pilknapparna till höger i sidanändrar en lokal JavaScript-parameter och kost-naden för spelet uppdateras i en JavaScript-funktion.

Oversikt_footer innehåller bl.a. en spela-knapp. Denna är grå då kupongen inte är spel-bar och byts till en grön om kupongen är spel-bar. Den gröna knappen laddar upp spelavynoch skickar med parametern antal system.

Bild 18 – Bild på översiktssidan i V75.

5.5.6 AvdelningsvyAvdelningsvyn, se Bild 19, består precis somöversiktsvyn av fyra JSP-sidor. Bägge harsamma överdelssida (Header.jsp). Ytterligarefinns en funktionssida (Avdelning_functions-.jsp), en huvudsida (Avdelning.jsp) och en fot-sida (Footer_ Avdelning.jsp). Avdelningvynsactionclass (AvdelningAction.java) kan ocksåta emot parametrar för hästar, reserver, avdel-ningsnummer samt antal system. Den kan ock-

27

så sätta streck, byta avdelningsnummer samtändra antal system i kupongen.

Först i Avdelning.jsp hämtas kupongen ochaktuellt avdelningsnummer från UserContai-nern. Om det redan finns hästar som är strecka-de eller reserver i denna avdelning skickas des-sa in till en JavaScript-vektor som håller redapå vilka hästar som är markerade (funktionensetHastar). Hästnamn hämtas från InfoOm-Lopp-objektet i UserContainern och en Java-loop lägger ut knappar och hästnamn. Ur ku-pongen fås vilka hästar som är streckade ochför dessa läggs det ut en mörkgrå ”tryckt”knapp istället för en ljusgrå. Om hästen är mar-kerad som 1:a eller 2:a reserv läggs istället re-servknappar ut. Alla knapparna är kopplade tillen JavaScript-funktion (changeKnapp) sombyter till ”tryckt” eller ”otryckt” bild och läggertill hästnumret eller tar bort det ur JavaScript-vektorn när dessa trycks ner. Kostnad för spelethämtas från kupongen.

I avdelningsvyns fotsida (Avdelning_Footer-.jsp) finns knappar till föregående och nästa av-delning, dessa är kopplade till en JavaScript-funktion som laddar avdelningsvyn igen ochskickar in ett nytt avdelningsnummer som pa-rameter till avdelningens actionclass.

Bild 19 – Bild på avdelningssidan i V75.

5.5.7 Bekräfta-spelvyBekräfta-spelvyn, se Bild 20, är uppbyggd avtre JSP sidor: överdelssida vilken är sammasom översiktsvyn och avdelningsvyn använder,en huvudsida och en funktionssida. På samma

sätt som i översiktsvyn skrivs alla hästar ochreserver ut i tabeller. Knappen bekräfta spelladdar upp kvittovyn och skickar med en pin-kod som parameter och knappen avbryt laddarupp översiktsvyn.

I actionclassen kan parameter för antal systemtas emot.

Bild 20 – Bild på bekräfta spelsidan i V75.

5.5.8 KvittovyKvittovyn, se Bild 21, är uppbyggd på sammasätt som bekräfta spelvyn. Även den skriver uthästar och reserver i tabeller. I dess actionclassskickas kupongen till emulatorn med den pin-kod som skickats in från spelavyn och ett vadhämtas ut om spelet registrerats. Vadet läggs iUserContainern. Ur Vad-objektet hämtas senserienummer och datum för kupongen och dettaskrivs ut på sidan.

Bild 21 – Bild på kvittosidan i V75.

28

29

6 DISKUSSION

Att införa pekskärm och ett modernare spelsättän kupongspel kan visa sig vara en värdefullsatsning för både spelare och ATG. Testperso-nerna uttryckte entusiasm under testerna avgränssnittet, och de verkade känna sig säkra,men också att det var roligt att spela på dettasätt. Att valen i designprocessen har blivit styr-da av praktisk hänsyn har inte medfört attgränssnittet känns stelt och tråkigt.

I efterhand hittar man moment som kunde be-handlats annorlunda. Mer kraft kunde lagts nerpå att hitta en bra strategi för att få tag i testper-soner. Det var svårt att få tag i spelare genomkontakter och fler personer i fokusgruppen hadevarit önskvärt. Ett ytterligare möte med fokus-gruppen skulle ordnats för att diskutera restenav spelen, eftersom dessa designades utan bak-grundsmaterial.

Å andra sidan kan man argumentera att desig-nen av VINNARE & PLATS blev onödigtstyrd av användarnas aktiviteter från fokus-gruppen och utförandet på kupongen. Här kan-ske mer möda skulle lagts på att tänka vidareoch effektivisera spelförfarandet. Många spelarflera VINNARE & PLATS både på sammalopp och på flera lopp, och måste då åtminstonegå igenom hela spelproceduren två gånger i rad.Det kunde istället utformats så att fleraVINNARE & PLATS spel kunde lagts samti-digt, d.v.s. flera hästar i olika lopp med olikainsatser kunde valts och ett ”paket” med fleraVINNARE & PLATS-spel skickats iväg. Fördem som bara lägger ett VINNARE & PLATS itaget blir den nuvarande designen enklast möj-ligast, men det kanske blir mödosamt om fleraVINNARE & PLATS ska läggas.

För vidare utveckling skulle fler användartesterkunna utföras där det ska ingå att växla mellanspelen som man gör i verkligheten på banan.Framför allt borde vidare användartester ut-

forska hur det är att vara flera spelare som delarpå en terminal. Kommer spelarna tycka att detär bra att spela samtidigt eller kan det kännasfrustrerande? Om många spel ska läggas kanskedet blir stort tryck på terminalen, så en intres-sant fråga är hur många spel en typisk restau-rangbesökare lägger på en kväll. Vidare kanman diskutera hurvida det blir lätt och lägga si-na egna ”hemliga” spel utan att de runt omkringser. Detta beror självklart på val av skärm, vil-ken storlek den har, i vilken vinkel det är möj-ligt att se bilden och hur lätt det är att flyttaterminalen.

Framtida tester skulle kunna göras på den imp-lementerade prototypen. Det är fullt möjligt attimplementera flera spel samt möjliggöra förflera användare att spela samtidigt. Prototypenmåste då användas med en pekskärm eftersomdet skulle bli omständligt att flytta runt en mus.

En annan aspekt som inte utretts eller testats ärhur roligt och engagerande gränssnittet är, ellerhur stor betydelse det har att det skall vara det.De som spelar tycker, får man förmoda, atthästspelet i sig är roligt och spännande, så hurpåverkar gränssnittet spelupplevelsen? Omgränssnittet skulle vara tråkigt, finns det risk föratt spelare föredrar att använda kuponger avgammal vana. Å andra sidan får inte för mycketav fokus ligga på att gränssnittet ska vara un-derhållande i sig, om detta resulterar i ett mind-re effektivt gränssnitt.

Jag tror att det föreliggande gränssnittet är ro-ligt att använda för att det snabbt, enkelt och ef-fektivt går att lägga spel. Därmed är det en brakandidat för att ersätta dagens kuponger på re-staurangerna och det kan vara en utgångspunktför att designa gränssnitt till nya terminaler förspel, som kiosker, PDA eller mobiltelefoner.

30

31

7 REFERENSER

ATG.se: AB Trav och Galopp websida för Internetspel. http://www.atg.se,datum: 2003-12-15

Breinholt, G. & Krueger, H.: Evaluation of key shapes on a touchscreen simulation of a spe-cialized keypad. Applied Ergonomics, 27, 1996

Cavaness, C.: Programming Jakarta Struts. O’Reilly & Associates, Farnham, UK, 2002

Carlsson, B. & Holmgren, M.: Exjobb MMI Kravspecifikation, intern rapport, ATG, 2003

Dix, A. et al.: Human-Computer Interaction. Pearson Education Limited, Harlow, England,1997

Hanna, P.: JSP 2.0. The complete Reference. McGraw-Hill/Osborne, Berkeley, USA, 2003

JSP: JavaServer Pages Technology documentation. http://java.sun.com/products/jsp/docs.htmldatum: 2003-12-15

Kules, B., Kang, H., Plaisant, C., Rose, A. & Shneiderman, B.: Immediate Usability: A casestudy of public access design for a community photo library. Online publication, Human-Computer Interaction Lab/University of Maryland, USA, 2003

Leahy, M. & Hix, D.: Effect of touch screen target location on user accuracy. Proceedings ofthe Human Factors and Ergonomics Society 34th Annual Meeting, 1990

Netscape Devedge: JavaScript documentation. http://devedge.netscape.com/central/javascript/datum: 2003-12-15

Shneiderman, B.: Designing the User Interface: Strategies for Effective Human-ComputerInteraction (3rd Edition). Addison-Wesley, Reading, USA, 1997

Shneiderman, B.: Sparks of Innovation in Human-Computer Interaction. Ablex Pub., U.S.,Exeter, UK, 1993

Snyder, C.: Paper Protytyping: The Fast and Easy Way To Design and Refine User Inter-faces. Elsevier Science, San Francisco, USA, 2003

Struts: The Jakarta Project. Struts documentation. http://jakarta.apache.org/struts/doc-1.0.2/datum: 2003-12-15

Usor: A Collection of User Oriented Methods. http://sunrize.nada.kth.se/usordatum: 2003-12-15

Waloszek, G.: Interaction Design Guide for Touchscreen Applications (Experimental).http://www.sapdesignguild.orgdatum: 2003-12-15

Wilson, K. S., Interrieden, M. & Liu, S.: A comparison of five user interface devices designedfor point-of-sale in retail industry. Proceedings of the human Factors and Ergonomics Soci-ety 39th Annual Meeting, 1995

32

33

BILAGA 1

34

1 HUVUDMENY .....................................................................................................................................35

2 SPELMENY..........................................................................................................................................36

3 SPARADE SPEL ..................................................................................................................................37

4 V75 OCH V65 -ÖVERSIKTSIDA ......................................................................................................38

5 AVDELNINGSSIDA MED HÄSTAR ................................................................................................39

6 RESERVER I AVDELNING ..............................................................................................................40

7 DETALJERAD ÖVERSIKT...............................................................................................................41

8 BEKRÄFTA SPEL...............................................................................................................................42

9 KVITTO................................................................................................................................................43

10 VINNARE & PLATS ...........................................................................................................................44

11 VINNARE & PLATS -VALT LOPP ..................................................................................................45

12 VINNARE & PLATS -INSATSSIDA .................................................................................................46

13 V5 OCH V3 -ÖVERSIKTSSIDOR.....................................................................................................47

14 RAKET -ÖVERSIKTSSIDA...............................................................................................................48

15 RAKET -AVDELNINGSSIDA ...........................................................................................................49

16 RAKET -INSATSSIDA........................................................................................................................50

17 TRIO......................................................................................................................................................51

18 TRIO – HÄSTSIDA .............................................................................................................................52

19 TRIO-INSATSSIDA ............................................................................................................................53

20 DAGENS DUBBEL..............................................................................................................................54

21 DAGENS DUBBEL -INSATSSIDA....................................................................................................55

35

1 HUVUDMENY

Huvudmenyn är den första sida som spelaren ser. Här kan man skapa nya profiler ge-nom att trycka på ny spelare och dra sitt ATG-kort. För att logga ut spelare trycks Logga utspelare och sedan en knapptryckning på den spelare som ska loggas ut. Det ska ocksågå att logga ut alla spelare.

Nybörjaren kan välja att gå en spelskola i demoform. För att komma åt information omresultat, startlistor m.m. väljs Sportinfo. Här leder Sportinfo till en tänkt huvudsida för in-formation.

Hjälp-knappen ger kontextuell hjälp.

36

2 SPELMENY

När spelaren trycker på sin profil visas en spelmeny. Här kan den aktuella spelaren väljade olika spel som den aktuella banan har. För att välja spel som går på andra banor ellerandra dagar väljs Övriga spel som är öppna.

Sportinfo-knappen har samma funktion som motsvarande knapp i huvudmenyn.

För att komma åt kontotjänster väljs Ditt Konto. Kontosidorna ska visa saldo och vinstsamt ge möjlighet att göra transaktioner. Flera tjänster kan läggas till där. Sparade speloch inlämnade spel förklaras i nästa punkt.

37

3 SPARADE SPEL

Sparade spel ger möjlighet att titta på de spel man har sparat. Öppnas ett spel så kom-mer man till spelets översiktssida och kan där ändra i spelet eller spela det. Här kan detläggas till en knapp för att spela alla färdiga spel. Det tredje spelet i exemplet är inte fär-digt och är därför är texten grå.

Inlämnade spel ser ut på liknande sätt som sparade spel. Men där kan man inte välja attspela utan endast välja att se kvitto. Det ska också finnas datum när varje spel registre-rats och genväg till resultat om spelet är avgjort.

38

4 V75 OCH V65 -ÖVERSIKTSIDA

Översikt för V75 ser ut på detta sett. Här finns genväg till huvudmenyn samt till spelme-nyn. Sportinfo-knappen ger möjlighet att välja startlistor, odds och streckfördelning föraktuellt spel samt Resultat, som är en genväg till resultat för avgjorda spel. Nederst påsidan visas exempel på hur sportinfo (t.h.) och hjälpmenyerna (t.v.) kan se ut.

Spara till senare sparar spelet vilket sedan kan hämtas upp i spelmenyn genom att väljasparade spel.

39

5 AVDELNINGSSIDA MED HÄSTAR

Om ett lopp väljs från översikten möts spelaren av denna vy. Här syns valbara hästarmed namn och nummer. Strukna hästar syns men texten är överstruken. (Det är möjligtatt välja strukna hästar).

För att komma tillbaka till översikten väljs Alla V75-lopp. För att gå vidare till andra loppväljs föregående lopp eller nästa lopp.

En häst väljs genom ett tryck och knappen förblir ”nedtryckt” för att visualisera att hästenär vald. ”Antal rader” och ”kostnad” uppdateras när hästar markeras eller avmarkeras.

40

6 RESERVER I AVDELNING

Om reserver väljs går man in ett reservläge där de hästar som väljs blir markerade på ettannorlunda sätt än de ordinarie hästarna. Den första hästen som väljs blir automatisktreserv 1 och den andra blir reserv 2. Här är häst nr tio vald som ordinarie och två ochsex som reserver. Eftersom detta är det sista loppet i V75 finns ingen nästa lopp-knapp.

41

7 DETALJERAD ÖVERSIKT

En mer detaljerad översikt kan väljas från V75:s huvudsida. Här visas även hästnamnen.Man välja att spela spelet eller att spara det eller att gå tillbaka till översikten.

42

8 BEKRÄFTA SPEL

Om man väljer att spela i översikten visas denna sida där man får skriva in sin pinkod föratt spelet ska kunna skickas till spelsystemet. Här bekräftas spelet eller avbryts. Omspelet avbryts kommer man tillbaka till översikten. Om spelet blir godkänt visas ett kvitto.

43

9 KVITTO

Ett digitalt kvitto visas när spelet är godkänt av spelsystemet. Kvittot kan hämtas framfrån inlämnade spel i spelmenyn.

44

10 VINNARE & PLATS

När VINNARE & PLATS- spelet valts visas denna sida där de olika loppen kan väljas.

45

11 VINNARE & PLATS -VALT LOPP

Här kan en eller flera hästar markeras. Fortsätt leder till insatssidan, se nästa punkt.

46

12 VINNARE & PLATS -INSATSSIDA

Slutligen väljer man om spelet ska vara ett Vinnare, plats eller Vinnare och Plats-spel.Om både ”Vinnare” och ”Plats” väljs dubbleras den insats man angivit eftersom speletfungerar så. Alla lopp leder tillbaka till loppsidan där ett nytt lopp kan väljas.

47

13 V5 OCH V3 -ÖVERSIKTSSIDOR

Dessa spel fungerar på samma sätt som V75 men med färre lopp. Avdelningssidorna serut på samma sätt som V75ans avdelningssida, se punkt 6 . Här visas översiktssidorna.

48

14 RAKET -ÖVERSIKTSSIDA

I raketspelet kan alla lopp väljas men max 7 stycken. Här väljs också antal system ochinsats.

49

15 RAKET -AVDELNINGSSIDA

Om man trycker på en av loppknapparna kommer man till denna sida. Alla lopp leder till-baka till översikten. Här kan Vinnare eller plats väljas. Det finns också genvägar till före-gående och nästa lopp.

50

16 RAKET -INSATSSIDA

När det andra loppet också valts leder fortsättknappen till denna översikt där insats kanväljas.

51

17 TRIO

I Trio väljs ett lopp på samma sätt som i VINNARE &PLATS. På denna bild har två av loppenredan avgjorts och användaren har tryckt på ett av de loppen.

52

18 TRIO – HÄSTSIDA

Här väljs den häst som man vill ha på första plats. Fortsätt leder till en ny sida som ser li-kadan ut men där 2.an väljs och på samma sätt väljs 3.an.

53

19 TRIO-INSATSSIDA

När den sista hästen valts visas denna översikt. Här finns möjlighet att ändra sina valgenom att gå in på 1:a, 2:a eller 3:a.

54

20 DAGENS DUBBEL

I dagens dubbel ingår två lopp. Här visas det första. Fortsätt leder till det andra loppet.

55

21 DAGENS DUBBEL -INSATSSIDA

När det andra loppet också valts leder fortsätt-knappen till denna översikt där insats kanväljas.

57

58

BILAGA 2

59

Oversikt_functions.jsp

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %><%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %><%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

<script type="text/javascript">var antalvar summavar totsumma

function setAntalSystem(int){ antal = int}function setSumma(int){ summa = int/antal}function changeToAvdelning(avdelning){

<!-- Här ska man flyttas till avdelning.jsp-->location="http://localhost:8001/selfservice/avdelning.do?avd="+avdelning+"&antSystem="+antal

}function changeAntSystem(val){

if(val == 1){

antal = ++antal}if(val == 2 && antal >= 2){

antal = --antal}window.document.systemform.systemArea.value = "System:"+ antaltotsumma=antal*summawindow.document.summaform.summaArea.value = totsumma

}function getAntalSystem(){

return antal}function getSumma(){

return summa*antal}function spela(){

location="http://localhost:8001/selfservice/spela.do?antSystem="+antal}

60

function BytVy(vy){

if(vy==1) {

location="http://localhost:8001/selfservice/huvudsida.do" } if(vy==2) { location="http://localhost:8001/selfservice/spelmeny.do" }

}</script>

61

Header.jsp

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles" prefix="tiles" %><%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %><%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %><%@page import="se.atg.selfservice.view.*" %><%@page import="se.atg.selfservice.Constants" %>

<!-- Koppla bilder till huvudmenyvy och spelmenyvy---><%UserContainer userContainer = (UserContainer)session.getAttribute(Constants.USER_CONTAINER_KEY);String label = userContainer.getLabel();%><td>

<html:img height="70" alt="" page="/images/huvudmenyn.gif" width="235" onclick="BytVy(1)" border="0" /></td><td>

<html:img height="71" alt="" page="/images/spelmeny.gif" onclick="BytVy(2)" width="125" border="0" /></td><td width=200/>

<html:img height="70" alt="" page='<%="/images/Streckspelbilder/V75Rubriker/"+label+".gif"%>' width="120"border="0" />

</td><td>

<html:img height="68" alt="" page="\images\info.gif" width="88" border="0" /></td>

62

Oversikt.jsp

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %><%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %><%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %><%@page import="se.atg.selfservice.view.*" %><%@page import="se.atg.selfservice.Constants" %><%@page import="se.atg.jacpot.kupong.V75Kupong" %>

<%UserContainer userContainer = (UserContainer)session.getAttribute(Constants.USER_CONTAINER_KEY);V75Kupong kupong = (V75Kupong) userContainer.getKupong();int antal = kupong.getAntalSystem();int summa = kupong.kalkyleradTotalInsats()/100;%><script type="text/javascript">

<%= "setAntalSystem("+antal+")" %></script>

<script type="text/javascript"><%= "setSumma("+summa+")" %>

</script>

<TABLE border="3"><TR>

<TD height="60" width="60"></TD> <TD height="70" width="80" align="center">

<html:img ImageName="avd1" alt="" page="/images/Streckspelbilder/knapp_avd_1.gif"onclick="changeToAvdelning(1)" height="60" width="80" border="0" />

lopp 4</TD><TD height="70" width="80" align="center">

<html:img ImageName="avd2" alt="" page="/images/Streckspelbilder/knapp_avd_2.gif"onclick="changeToAvdelning(2)" height="60" width="80" border="0" />

lopp 5 </TD> <TD height="70" width="80" align="center">

<html:img ImageName="avd3" alt="" page="/images/Streckspelbilder/knapp_avd_3.gif"onclick="changeToAvdelning(3)" height="60" width="80" border="0" />

lopp 6 </TD> <TD height="70" width="80" align="center">

<html:img ImageName="avd4" alt="" page="/images/Streckspelbilder/knapp_avd_4.gif"onclick="changeToAvdelning(4)" height="60" width="80" border="0" />

lopp 7 </TD> <TD height="70" width="80" align="center">

<html:img ImageName="avd5" alt="" page="/images/Streckspelbilder/knapp_avd_5.gif"onclick="changeToAvdelning(5)" height="60" width="80" border="0" />

lopp 8 </TD>

63

<TD height="70" width="80" align="center"><html:img ImageName="avd6" alt="" page="/images/Streckspelbilder/knapp_avd_6.gif"onclick="changeToAvdelning(6)" height="60" width="80" border="0" />

lopp 9 </TD>

<TD height="70" width="80" align="center"><html:img ImageName="avd7" alt="" page="/images/Streckspelbilder/knapp_avd_7.gif"onclick="changeToAvdelning(7)" height="60" width="80" border="0" />

lopp 10 </TD> </TR> <tr height="100"> <td width="70">Valda hästar</Td>

<% for(int j = 1; j< 8; j++) { %> <td align="left"> <% int [] hastar = kupong.streckade(j); for (int i = 0; i < hastar.length; i++) { out.println(" "+ hastar[i] ); if(i==4){ %> <br> <% } if(i==9){ %> <br> <% }

}%></td><% } %>

</tr><tr height="55">

<td> 1:a Reserv </td><% for(int h = 1; h< 8; h++) { %>

<td> <% int [] reserv1 = kupong.reserver(h); if (reserv1.length != 0) { out.println(reserv1[0]);

} %> </td>

<% } %></tr><tr height="55">

<td> 2:a Reserv </td><% for(int h = 1; h< 8; h++) { %>

<td> <% int [] reserv1 = kupong.reserver(h); if (reserv1.length != 0) { out.println(reserv1[1]);

} %> </td>

<% } %></tr>

</TABLE>

64

<form name = "summaform"><table>

<tr><td> Antal Rader: <%= kupong.antalRader()%> </td>

<td width="675" align=right>Summa:

<input type="text" name = "summaArea" size="7" fontsize="5" disabled="true" value=""</td>

</tr></table></form>

<form name = "systemform"><table class="system">

<tr><td>

<html:img ImageName="pilupp" alt="" page="/images/Streckspelbilder/pilupp.gif"onclick="changeAntSystem(1)" height="64" width="64" border="0" />

</td></tr><tr>

<td><input type="text" name = "systemArea" size="7" fontsize="5" disabled="true" value="">

</td></tr><tr>

<td><html:img ImageName="pilner" alt="" page="/images/Streckspelbilder/pilner.gif"onclick="changeAntSystem(2)" height="60" width="60" border="0" />

</td></tr>

</table></form>

<script type="text/javascript">window.document.systemform.systemArea.value = "System:"+ getAntalSystem()window.document.summaform.summaArea.value = getSumma()

</script>

65

Oversikt_Footer.jsp

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %><%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %><%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %><%@page import="se.atg.selfservice.view.*" %><%@page import="se.atg.selfservice.Constants" %><%@page import="se.atg.jacpot.kupong.V75Kupong" %>

<%UserContainer userContainer = (UserContainer)session.getAttribute(Constants.USER_CONTAINER_KEY);V75Kupong kupong = (V75Kupong) userContainer.getKupong();%><table>

<tr><td>

<html:img height="68" alt="" page="/images/tillbaka.gif" width="115" border="0" /> </td> <td> <html:img height="72" alt="" page="/images/spara.gif" width="129" border="0" /> </td> <td> <html:img height="73" alt="" page="/images/ta_bort.gif" width="130" border="0" /> </td> <td> <html:img height="72" alt="" page="/images/Streckspelbilder/detalj_ovr.gif" width="131" border="0" /> </td> <td> <html:img height="71" alt="" page="/images/HarryB.gif" width="91" border="0" /> </td> <% try { if(kupong.isKorrektIfylld()) { %> <td> <html:img height="95" alt="" page="/images/spela_gron.gif" width="171" border="0" onclick="spela()"/> </td> <% } } catch (Exception e) { %>

<td> <html:img height="95" alt="" page="/images/spela_otryckbar.gif" width="171" border="0" /> </td> <% } %> </tr><table>

66

OverviewAction.java

package se.atg.selfservice.action;import java.util.Date;import java.util.StringTokenizer;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import se.atg.jacpot.kupong.Kupong;import se.atg.jacpot.kupong.V75Kupong;import se.atg.jacpot.spelutbud.SpelUtbud;import se.atg.selfservice.Constants;

/** * @author maria.holmgren * */public class OverviewAction extends SelfServiceBaseAction {

/** * * @param aMapping ActionMappnings * @param aForm den formböna som skall användas * @param aRequest HttpServletRequest * @param aResponse HttpServletResponse * @return den action forward som är aktuell. * @throws Exception kastar ett exception när en kupong är fel ifylld. */private V75Kupong kupong;private int avd;public ActionForward execute(

ActionMapping aMapping,ActionForm aForm,HttpServletRequest aRequest,HttpServletResponse aResponse)throws Exception {

String label = "Rubrik_V75";getUserContainer(aRequest).setLabel(label);if (!getUserContainer(aRequest).kupongIsCreated()) {

kupong = new V75Kupong();SpelUtbud mySpelUtbud = getUserContainer(aRequest).getSpelUtbud();kupong.setDatum(mySpelUtbud.getV75Program().getDatum());getUserContainer(aRequest).setKupong(kupong);System.out.println("Här skapas kupong");

}if (aRequest.getParameter("hastar") != null) {

System.out.println("Det finns hästar");String hastar = aRequest.getParameter("hastar");kupong = (V75Kupong) getUserContainer(aRequest).getKupong();avd = getUserContainer(aRequest).getAktuellAvd();kupong.rensaAvdelning(avd);StringTokenizer st = new StringTokenizer(hastar , ",");while (st.hasMoreTokens()) {kupong.setStreck(avd , Integer.parseInt(st.nextToken()));System.out.println("en häst");

67

}getUserContainer(aRequest).setKupong(kupong);System.out.println("Hästar är streckade");System.out.println(kupong.toString());

}if (aRequest.getParameter("reserver") != null) {

String reserver = aRequest.getParameter("reserver");StringTokenizer st = new StringTokenizer(reserver , ",");int reserv1 = Integer.parseInt(st.nextToken());int reserv2 = Integer.parseInt(st.nextToken());if( reserv1 != 0 && reserv2 != 0) {

int [] list = {reserv1, reserv2};System.out.println("reserver 2 olika");kupong.setReserver(avd , list);

}if( reserv1 != 0 && reserv2 == 0) {

int [] list = {reserv1, reserv1};System.out.println("reserver");kupong.setReserver(avd , list);

}}String parameter = aMapping.getParameter();ActionForward forward = aMapping.findForward(Constants.SUCCESS);

return forward;}

}

68

Avdelning_functions.jsp

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %><%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %><%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

<script type="text/javascript">var reservmod=false<!-- Hjälpvektor-->var hastar = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)<!-- Vektor som innehåller valda hästar samt reservvektor-->var hast = new Array()var reserv = new Array(0,0)var reserv1Finns = falsevar reserv2Finns = false

function setHastar(hastNr){

hastar[hastNr-1] = 1}function setReserver(nr1, nr2){

if(nr1 != 0){

reserv[0] = nr1reserv1Finns = true

}if(nr2 != 0){

reserv[1] = nr2reserv2Finns = true

}}

function changeKnapp(nr, pressedSrc, unPressedSrc){

temp="knapp"+String(nr)if (hastar[nr-1] == 0){

if(reservmod){switchReserv(temp, nr, unPressedSrc, false)}else{document [temp].src = pressedSrchastar[nr-1]=1;}

}else{

if(reservmod){switchReserv(temp, nr, unPressedSrc, true)}

69

else{document [temp].src = unPressedSrchastar[nr-1]=0;}

}

}function switchReserv(temp, nr, unPressedSrc, streckad){

if (reserv[0] == nr && !streckad){

document [temp].src = unPressedSrcreserv[0] = 0reserv1Finns = false

}else if (reserv[1] == nr && !streckad){

document [temp].src = unPressedSrcreserv[1] = 0reserv2Finns = false

}else if (!streckad){

if(!reserv1Finns){

reserv[0] = nrreserv1Finns = true;document [temp].src = "C:/cvs-utveck-ling/speltjanst/modules/selfservice/src/images/reserv1.gif"

}else if(reserv1Finns && !reserv2Finns){

reserv[1] = nr reserv2Finns = true;

document [temp].src = "C:/cvs-utveck-ling/speltjanst/modules/selfservice/src/images/reserv2.gif"

}}

}function changeReserv(){ if (!reservmod) {

reservmod = true;reserverknapp.src = "c:/cvs-utveckling/speltjanst/modules/selfservice/src/images/reserver2.gif"

}else{

reservmod=false;reserverknapp.src = "c:/cvs-utveckling/speltjanst/modules/selfservice/src/images/reserver1.gif"

}}

70

function laggInHastar(){

for(var i=1; i<hastar.length+1; i++){

if(hastar[i-1]==1) {hast.push(i)

}}

}function changeAvd(avdelning){

<!-- Här ska en request skickas till lopp.jsp med en --><!--parameter för det avd nr som man ska till samt hästar --><!--och reserver-->

laggInHastar() loca-tion="http://localhost:8001/selfservice/avdelning.do?avd="+avdelning+"&hastar="+hast+"&reserver="+reserv

}function changeToOversikt(){

laggInHastar() <!-- Här ska man flyttas till oversikt.jsp--> location="http://localhost:8001/selfservice/oversikt.do?hastar="+hast+"&reserver="+reserv

}function BytVy(vy){

if(vy==1) {

location="http://localhost:8001/selfservice/huvudsida.do" } if(vy==2) { location="http://localhost:8001/selfservice/spelmeny.do" }

}</script>

71

Avdelning.jsp

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %><%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %><%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %><%@page import="se.atg.selfservice.view.*" %><%@page import="se.atg.selfservice.Constants" %><%@page import="se.atg.jacpot.kupong.V75Kupong" %><%@page import="se.atg.jacpot.spelutbud.SpelUtbud" %><%@page import="se.atg.jacpot.spelutbud.V75Program" %><%@page import="se.atg.selfservice.util.InfoOmLopp" %>

<h2><fmt:message key="label.avdelning"/></h2>

<%// Hämta kupong från UserContainern och kolla vilka som är streckadeUserContainer userContainer = (UserContainer)session.getAttribute(Constants.USER_CONTAINER_KEY);int avd = userContainer.getAktuellAvd();V75Kupong kupong = (V75Kupong) userContainer.getKupong();int [] hast = kupong.streckade(avd);

// Om hästar är streckade ska de 1: Få en annan knapp 2: Markeras som// streckade i javascriptet som håller reda på vilka som är streckadefor (int i = 0; i < hast.length; i++) { %>

<script type="text/javascript"><%= "setHastar("+hast[i]+")" %></script>

<% } %>

<%// Gor samma sak som ovan med reservernaint reserv_1 = 0;int reserv_2 = 0;int [] reserver = kupong.reserver(avd);if(reserver.length != 0) {

reserv_1 = reserver[0];reserv_2 = reserver[1]; %><script type="text/javascript"><%= "setReserver("+ reserv_1+","+ reserv_2 +")" %></script>

<% } %>

<Table><%// Hämta från spelutbud hur många hästar det finns.V75Program v75Program = userContainer.getSpelUtbud().getV75Program();int antalh = v75Program.getAvdelning(avd).getAntalHastar();int ant = antalh+1;

// Hämta hastnamn ur infoobjektet i UserContainernInfoOmLopp info = userContainer.getInfo();String[] hastnamn = info.getHastNamn(avd);

72

for(int i=1; i<hastnamn.length+1; i++) { if(hastnamn[i-1] != null) { String pressedSrc=null; String unPressedSrc=null; unPressedSrc="'c:/cvs-utveckling/speltjanst/modules/selfservice/src/images/knapp_"+i+".gif'" ; pressedSrc="'c:/cvs-utveckling/speltjanst/modules/selfservice/src/images/knapp_"+i+"_tryckt.gif'" ;

if(i == 1 | i == 5 | i == 9 | i == 13) { %><tr>

<% } %> <% if (kupong.isStreckad(avd , i)) { %> <td>

<html:img ImageName='<%="knapp" + i%>' page='<%= "/images/knapp_"+ i +"_tryckt.gif" %>'onclick='<%="changeKnapp("+i+", "+pressedSrc+", "+unPressedSrc+")"%>' border="0" width="70"height="70" />

</td> <% } else { if (i == reserv_1) { %> <td>

<html:img ImageName='<%="knapp" + i%>' page='<%= "/images/reserv1.gif" %>'onclick='<%="changeKnapp("+i+", "+pressedSrc+", "+unPressedSrc+")"%>' border="0" width="70"height="70" />

</td> <% } else if (i == reserv_2) { %> <td>

<html:img ImageName='<%="knapp" + i%>' page='<%= "/images/reserv2.gif" %>'onclick='<%="changeKnapp("+i+", "+pressedSrc+", "+unPressedSrc+")"%>' border="0" width="70"height="70" />

</td> <% } else { %> <td>

<html:img ImageName='<%="knapp" + i%>' page='<%= "/images/knapp_"+ i +".gif" %>'onclick='<%="changeKnapp("+i+", "+pressedSrc+", "+unPressedSrc+")"%>' border="0" width="70"height="70" />

</td> <% } } %>

<td width="110" height="60" > <%= hastnamn[i-1] %> </td> <%if (i==4) { %>

</tr> <% } %> <%if (i==8) { %>

</tr> <% } %> <%if (i==12) { %> </tr> <% } %> <%if (i==15) { %> </tr> <% } %>

<% }} %>

</Table>

73

<Table class="reserv"><tr>

<td><html:img ImageName="reserverknapp" page="/images/reserver1.gif" width="133" height="81" bor-der="0" alt="" onclick="changeReserv()" />

</td></tr><tr>

<td align="center">Summa: <%= kupong.kalkyleradTotalInsats()/100 %>

</td></tr>

</Table>

74

Avdelning_Footer.jsp

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %><%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %><%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %><%@page import="se.atg.selfservice.view.*" %><%@page import="se.atg.selfservice.Constants" %>

<!-- Hämta avd från UserContainer--><%UserContainer userContainer = (UserContainer)session.getAttribute(Constants.USER_CONTAINER_KEY);int avdnr=userContainer.getAktuellAvd();int avdInnan=avdnr-1;int avdEfter=avdnr+1;%>

<table><tr>

<td> <html:img height="68" alt="" page="/images/tillbaka.gif" width="115" border="0" /> </td> <td width="150" style="padding: Opx" align="center" /> </td> <td><br><td/> <% if(avdnr!=1) { %> <td>

<html:img ImageName="foregoendeLopp" height="75" alt="" page="/images/foregaende_lopp.gif"onclick='<%= "changeAvd("+avdInnan+")" %>' width="130" border="0" />

</td> <% } else { %> <td width="130"></td> <% } %> <td>

<html:img ImageName="tillLoppen" height="97" alt="" page="/images/Streckspelbilder/AllaV75-lopp_knapp.gif" onclick="changeToOversikt()" width="176" border="0" />

</td> <% if(avdnr!=7) { %> <td>

<html:img ImageName="nastaLopp" height="75" alt="" page="/images/nasta_lopp.gif" onclick='<%="changeAvd("+avdEfter+")" %>' width="130" border="0" />

</td> <% } %> </tr></table>

75

AvdelningAction.java

package se.atg.selfservice.action;import java.util.StringTokenizer;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import se.atg.jacpot.kupong.Kupong;import se.atg.jacpot.kupong.V75Kupong;import se.atg.selfservice.Constants;

/** * @author maria.holmgren * */public class AvdelningAction extends SelfServiceBaseAction {

/** * * @param aMapping ActionMappnings * @param aForm den formböna som skall användas * @param aRequest HttpServletRequest * @param aResponse HttpServletResponse * @return den action forward som är aktuell. * @throws Exception kastar ett exception när en kupong är fel ifylld. */private V75Kupong kupong;int avd;public ActionForward execute(

ActionMapping aMapping,ActionForm aForm,HttpServletRequest aRequest,HttpServletResponse aResponse)throws Exception {if (aRequest.getParameter("hastar") != null) {

String hastar = aRequest.getParameter("hastar");kupong = (V75Kupong) getUserContainer(aRequest).getKupong();avd = getUserContainer(aRequest).getAktuellAvd();kupong.rensaAvdelning(avd);StringTokenizer st = new StringTokenizer(hastar , ",");while (st.hasMoreTokens()) {kupong.setStreck(avd , Integer.parseInt(st.nextToken()));System.out.println("en häst");}getUserContainer(aRequest).setKupong(kupong);}

if (aRequest.getParameter("reserver") != null) {String reserver = aRequest.getParameter("reserver");StringTokenizer st = new StringTokenizer(reserver , ",");int reserv1 = Integer.parseInt(st.nextToken());int reserv2 = Integer.parseInt(st.nextToken());if( reserv1 != 0 && reserv2 != 0) {

int [] list = {reserv1, reserv2};System.out.println("reserver");kupong.setReserver(avd , list);

}

76

if( reserv1 != 0 && reserv2 == 0) {int [] list = {reserv1, reserv1};System.out.println("reserver");kupong.setReserver(avd , list);

}}if (aRequest.getParameter("avd") != null) {

String avdnr = aRequest.getParameter("avd");getUserContainer(aRequest).setAktuellAvd(avdnr);String label = "Rubrik_V75-" + avdnr;getUserContainer(aRequest).setLabel(label);

}if (aRequest.getParameter("antSystem") != null) {

String antal = aRequest.getParameter("antSystem");kupong = (V75Kupong) getUserContainer(aRequest).getKupong();kupong.setAntalSystem(Integer.parseInt(antal));System.out.println("antal system");getUserContainer(aRequest).setKupong(kupong);

}String parameter = aMapping.getParameter();ActionForward forward = aMapping.findForward(Constants.SUCCESS);

return forward;}

}