Projekt 3 :: Bush Icke-traditionella grafiska gränssnitt Mikael Onsjö, Sofie Persson, Behzad Charoose, Johan Magnuson

Projekt 3 :: Bush Icke-traditionella grafiska gränssnitt Mikael Onsjö, Sofie Persson, Behzad Charoose, Johan Magnuson

Inledning... 3 Syfte... 3 Grundläggande design (spelregler)... 4 Strategi... 4 Tillvägagångssätt... 4 Programmeringsspråk... 5 Design... 5 Gränssnitt på storskärm... 5 Gränssnitt på PDA... 7 Första fönstret... 8 Andra fönstret... 9 Tredje fönstret... 10 Diskussion... 11 Referenslista... 12 2

Inledning Med tanke på att det idag blir allt mer vanligt med projektorer i vår vardag, i skolmiljön, i arbetsmiljön men även i våra hem ville vi skapa en slags gemensam aktivitet som flera människor tillsammans skulle kunna utöva. Dessutom blir det nu för tiden allt vanligare att människor har en Internetuppkopplad PDA (Personell Digital Assistant) med sig mobilt. Med tanke på det som Lundgren S, pratade om blir det också allt vanligare att datorer byggs in i vardagliga artefakter som medför att det också blir allt vanligare med små displayer runt omkring oss. [3, s.9]. Det var här någonstans som våra tankar till spelets struktur uppkom. Vår grupp kom överens om att göra ett spel som skulle kunna spelas via en PDA och en storskärm, vilket blir lite av en utmaning men samtidigt roligt. Vi diskuterade och fantiserade om hur spelet skulle se ut, genom att rita skisser på ett papper. Det är viktigt att börja helt från början, vara öppen för alla förslag på eventuella idéer, utan att tänka på hur det skall fungera rent tekniskt. Vi kom fram till att vi ville skapa ett handelsspel som kan erbjuda minst två eller fler spelare att spela spelet. Spelet erbjuder endast två ageranden från spelarna, att köpa och sälja aktier. Det blir en spännande upplevelse för spelarna att vinna eller förlora pengar genom att köpa och sälja aktier. Olika spelare har olika intresse i varje resurs och pengar och tid är avgränsade. Slutligen funderade vi lite på passande namn till spelet och kom till slut fram till att det skulle heta Bush. Syfte Programmet skall gå enkelt och snabbt att lära sig, då olika människor med olika bakgrund ska kunna spela spelet. Designen skall vara anpassad för att kunna användas på en PDA och projektor. Krav vi ställer upp: Hög learnability, spelet ska vara lätt att lära sig Spelbart för minst 2-10 spelare Spelbart med utrustning: projektor, dator och Internet En PDA med Internet per spelare speldesignmönster vi vill ha med: Uppmuntra till social interaktion Tidsbegränsat (10 minuter) Fartfyllt (det händer något hela tiden som tvingar spelaren till handling) Se till så att det händer saker tydligt på den stora skärmen så att spelarna även tittar på den. 3

Grundläggande design (spelregler) Spelet är ett handelsspel där olika speldeltagare individuellt spelar mot varandra. Spelet går ut på att köpa och sälja aktier inom olika marknader och givetvis också att försöka gå med vinst. Alla speldeltagare samlas i samma lokal och spelar på varsin PDA. Gemensamt i lokalen finns det en projektor som genererar spelplanen och all generell information för samtliga speldeltagare på en storskärm. Varje speldeltagare tilldelas varsin färg, speldeltagarna vet bara vilken färg de själva har, men inte vilken färg som tillhör vilken spelare i övrigt. Färgerna symboliserar olika företag som visas på den stora generella projektorn., Stor vikt måste förstås läggas vid utformningen av ikoner, symboler och färgval etc. ( Icke- Traditionella Grafiska Gränssnitt [3, s.17]). De olika företagens marknader går upp och ner som det gör på börsen, vilket genereras av en slumpmässig spelmotor. Varje företag symboliseras av en rund ring på spelplanen som växer när det går bra för företaget och minskar när det går sämre. Varje speldeltagare blir också tilldelade en summa pengar som de fritt får disponera och investera i vilka aktier de vill. Aktierna som tillhör ett visst företag har givetvis samma färg som det företaget de tillhör, eftersom spelarna måste kunna veta vilka aktier som tillhör vilket företag när de ska avgöra om det är en god eller dålig prognos för att köpa aktierna. Varje speldeltagare ska försöka samla på så många aktier som möjligt i den färg som de tilldelats, alltså i det företaget som de tilldelats, och samtidigt också försöka att mota de övriga speldeltagarna från att köpa aktier i sina färger, genom att vara snabb att acceptera erbjudanden som ges. På den generella projektorn finns det information som visar vilka färger/deltagare som har många aktier av sin egen färg, och även vilka övriga färger av aktier de äger. Personerna bakom färgerna är som tidigare nämnts dold och därför vet inte deltagarna vilken person det går bra för eller sämre för. Spelets livslängd är 10 minuter. Spelarna kan komma in i spelet när som helst under de 10 minuterna. Två personer kanske börjar spela samtidig, de har då 10 minuter på sig att spela. Om en flera spelare kommer in och deltar i spelet efter 4 minuter har de endast 6 minuter på sig att spela. Strategi Spelet går ut på att tjäna så mycket pengar som möjligt, vilket leder till att alla spelarna vill köpa samma aktier, de aktier som går bra. För att få någon annan slags struktur på spelet valde vi att tillämpa ytterligare en strategi. Vi bestämde att varje enskild spelare skulle tilldelas varsin färg, vilket innebar att de aktier med samma färg som spelaren tilldelats är bra att köpa för den spelaren. Varje spelare ska alltså försöka köpa så många aktier som möjligt i sin egen färg, vilket ger högre utdelning än om de samlar på någon annan färg. För att kunna få loss kapital och göra lite vinster under spelets gång är det även viktigt att investera i företag som går bra och sälja när det är lämpligt. Tillvägagångssätt Efter att ha haft genomgång av vad projekt tre skulle innehålla var vi i gruppen överens om att vi ville göra någonting med storskärmar. Vi satte oss därför ner och började spåna efter möjliga alternativ. Vi diskuterade vad för slags program vi ville göra och i vilket syfte. Vi kom fram till att vi ville göra ett slags strategispel som skulle vara enkelt 4

uppbyggt och enkelt att spela. Vi beslöt oss därför att beröra ett ämne som de flesta människor vet vad det är, handel. Då dök idén om aktier upp, vilken vi alla tyckte var bra. Vi beslutade oss snabbt för att en storskärm skulle vara den gemensamma spelplanen som spelarna skulle utgå ifrån när de spelar spelet. Varje spelare skall ha varsin PDA som visar den individuella spelarens information. Efter detta började vi diskutera regler, strategi och syfte med spelet. För att underlätta samarbetet i gruppen arbetade vi efter gemensam systemering, vi skissade och ritade olika designalternativ för att få en gemensam förståelse inom gruppen [2; s.16]. Att tjäna så mycket pengar som möjligt var ett givet syfte inom det område som spelet berör. Den individuella informationen för varje speldeltagare skulle i och med detta vara, vilka aktier spelarna äger, hur mycket pengar de har och den generella vilka erbjudanden som finns att köpa, väldigt enkelt! Den här informationen skulle alltså finnas på spelarnas PDA:er. Med tanke på detta tyckte vi att det var lämpligt att dela upp gränssnittet i tre områden, efter spelarnas möjlighet till handling. Vilken information skulle den gemensamma storskärmen generera? Vi diskuterade fram och tillbaka och kom fram till att vi ville att företagen skulle synas med någon slags grafisk symbol på storskärmen. Först tänkte vi på fyrkanter men var överens om att de tar upp för stor plats på planen. Då tänkte vi på trianglar, vilka vi tyckte var lite krångliga att rita. Vi beslutade oss därför för att skapa runda prickar som symboler för företag, vilket kändes både naturligt och enkelt. Vi beslutade också att prickarna skulle ha olika färger för att spelarna skulle kunna skilja på de olika företagen. I övrigt hade vi tankar på att spelplanens bakgrund skulle visa en karta som symbol för marknaden, vilket vi ritade. Efter hand kom vi istället på att det hade varit snyggare med en bild på en riktig karta som bakgrund, vilket också ändrade och även har kvar i vår slutliga version. När de flesta besluten var tagna började vi att implementera spelet. Programmeringsspråk Programspelet är baserat på Java eftersom det är plattformsoberoende språk, så att applikationer skall kunna köras på olika enheter utifrån samma källkod. Kravet för att java skall kunna köras på olika plattformar är att varje plattform har en virtuell maskin. Java program påverkar inte på maskinkod, så användare blir inte bekymmer om hårdvara (PC/ PDA). Design Gränssnitt på storskärm På storskärmen genereras data med hjälp av en projektor, som endast visar information, och går alltså inte direkt att interagera med. Den fungerar endast som en slags informationsförmedlare om vad som händer på marknaden. Storskärmen förmedlar information om när ett företag minskar eller ökar i omsättning som i sin tur ger spelarna en indikation om när det är dags att köpa och sälja aktier. Fleranvändarmiljöer, fler än en användare tittar på den stora skärmen och interagerar indirekt med den genom att köpa och sälja aktier via sin PDA. Kombinationer av whiteboard/skärm, t ex. DynaWall kan användas 5

Kontrollrumsmiljöer, exempelvis trafikledarcentraler Kännetecknas ofta av att medlemmarna sitter inne med unik information som måste överföras till dem som behöver den (via pull, inte push ) Div internetapplikationer där alla sitter vid en egen (fysisk) skärm men ser samma vy. ( Icke- Traditionella Grafiska Gränssnitt [3; s.15] ). Företagen symboliseras som vi tidigare beskrivit av ringar på storskärmen, vilka är synliga för alla spelarna. I och med att vi hade tänkt att storleken på spelplanens ringar skulle symbolisera omsättningen på respektive företag skulle ringar också minska i omfång när det gick dåligt för företaget och öka i omfång när det gick bättre. För att kunna visa någon slags prognos har vi valt att det ska bildas en grå ringa runt själva företagsringen som är större än den, om det kommer att gå bra för företaget. Om den grå ringen är mindre än företagsringen i omfång betyder det däremot att företagets prognos inte ser bra ut. I den slutliga versionen av spelet valde vi att göra ringarna, som symboliserar företagen, lite mer transparenta. Anledningen var att vi vill försöka få bort känslan av glass och godis med cirklar av starkt mättade och olika färger. Det här framhävde också kartan mer under cirklarna, vilket också gör det möjligt att se ringar eller företag som överlappar varandra. Kartans mättade färger tonade vi också ner eftersom vi ville stödja Edwards Imhof s regler om färgval [4; s.82-90]. Det finns ännu en ring, vilken är fast och lika stor för alla företag, varje aktie kostar nämligen ett visst belopp i skatt, understiger utdelningen skatten tjänar man inte på att äga den, tvärtemot så förlorar man på den. Denna ring är alltså något av en kritisk nivå för företaget. Till vänster om kartan finns det också ett informationsfält som visar vilka färger/speldeltagare som är med och spelar, hur stor andel varje spelare har i sin egen färg samt hur mycket pengar de har i kontanter. Det här gör det möjligt för spelarna att se vilken utav de andra färgerna/spelarna som har många aktier i sin egen färg. Det här leder till att spelarna kan anta vilken färg/spelare det går bra för samt vilken spelare som det går mindre bra för. Vi har valt mörk färg på informationsfältet eftersom det blir tydligare att läsa informationen om det uppstår kontrast mellan bakgrunden och spelarnas olika färger samt den vita texten. 6

Gränssnitt på PDA För att navigera runt i PDA:n ska spelarna traditionsenligt använda en penna. Allra överst i gränssnittet står namnet på spelaren, spelarens individuella färg samt hur mycket pengar spelaren har tillgång till. I övrigt är spelets gränssnitt på PDA:n uppdelat i 3 huvudområden, fönster. I och med att vi skulle göra ett så enkelt spel som möjligt valde vi också att inte belasta spelarens uppmärksamhet på en massa, ur vårt perspektiv, onödiga funktioner. I översta fönstret i gränssnittet visas vad spelaren äger, i andra fönstret visas de aktier som spelaren bjuder ut och i det understa fönstret visas vilka aktier som erbjuds att köpa. Anledningen till att vi har valt att lägga dem i den här ordningen är att det primära i spelet grundar sig på hur mycket spelaren har att handla aktier för och därför kommer det fönstret först. Det andra fönstret tillhör också spelaren, han bestämmer vilka erbjudanden som han eller hon vill erbjuda andra spelare, därför anser vi att det är lämpligt att placera det som nummer två. De här två områdena tillhör den enskilda spelaren och grundar sig på dess val medan det understa fönstret grundar sig på de övriga spelarnas val. Det sista fönstret på PDA:n visar då vad övriga spelare erbjuder och i det här fönstret kan bara spelaren interagera med programmet genom att acceptera ett erbjudande. Spelaren kan i det här fönstret alltså inte lägga till data utan endast ta bort. Spelarnas uppmärksamhet är givetvis också riktad till den generella informationen på storskärmen. 7

Första fönstret Överst i gränssnittet, i det första området, finns information som visar hur många och vilka aktier deltagaren äger. Aktierna symboliseras av små runda prickar i olika färger och varje prick motsvarar en aktie. Här visas vilka aktier (vilka färger) speldeltagaren äger. Hur mycket aktien är värd visas inte eftersom det beror på hur mycket de andra deltagarna är villiga att ge och det kan inte vi räkna ut. Anledningen till att vi valde att symbolisera aktierna med prickar var att vi blev inspirerade av I-lands tangible interfaces 1 och ville därför framlocka en känsla av att kunna flytta objekten mellan olika korgar. I och med det här kan spelarna med hjälp av ett pekdon flytta de aktier de vill sälja från det översta fönstret till säljfönstret. Eftersom en speldeltagare kan samla på sig en hel del aktier under spelets gång blir det svårt att få plats med alla aktierna i gränssnittet. Vi valde därför att göra prickarna (aktierna) mindre så att det får plats med så många som möjligt i fönstret samt att använda en rullningslist som gör det möjligt att visa ytterligare prickar om antalet aktier skulle bli väldigt stort. Först hade vi tänkt att alla aktierna skulle fortsätta på samma rad efter varandra färgvis men efter ett tag valde vi att lägga alla aktier som tillhör samma färg på varsin rad. Dels för att vi tyckte att det är bättre att inte blanda ihop färger på samma rad och dels för att vi tyckte att det blir enklare när spelarna ska sälja sina andelar. 1 Tangible interfaces låter ett fysiskt ting symbolisera data, så att man kan föra över data bara genom att flytta på en sak i rummet [1]. 8

Vårt resultat Vår första version aktier Innan vi knäckte idén med flyttbara prickar som symboler för aktier hade vi ett annat alternativ. Vi skissade först ett gränssitt som bestod av en prick med färg, siffror och dollartecken, vilket verkade bra i början. Efter att ha tänkt igenom hur affärerna i spelet skulle gå till (mer förklaring i avsnittet; andra fönstret) började vi dock spåna efter andra alternativ och till slut kom vi fram till den lösning vi har idag. Tidigare version 3st $12 $100 Spelarens köppris 5st $10 $300 Aktier Antal Utdelning aktier Andra fönstret Gränssnittets andra område visar de aktier som speldeltagaren själv har valt att lägga ut till försäljning. Då visas antal prickar och dess färg samt hur mycket en aktie kostar per styck. Spelarna kan ha flera erbjudanden till salu på olika aktier samtidigt. Erbjudandena delas då upp på olika rader i fönstret, en rad är ett erbjudande alla aktier på en och samma rad har samma styckpris. Även här finns det en scroll-funktion som gör att spelarna kan se alla sina erbjudanden samtidigt, eftersom det är möjligt för spelarna att ligga ute med så många erbjudanden de vill. När spelarna vill sälja aktier i form av att lägga ut erbjudanden, markerar de vilka aktier som ska säljas i det översta fönstret. Där efter klicka de på dem dra ner dem, med hjälp av pennan från översta fönstret till det undre säljfönstret. Då hamnar aktierna som erbjudanden till övriga spelare. Eftersom övriga spelares erbjudanden visas i det understa fönstret kan det för en del människor verka naturligt att släppa aktierna i det understa fönstret. Därför har vi implementerat funktionen så att de aktier som är markerade hamnar i det mellersta fönstret, dina erbjudanden, oavsett om spelaren släpper dem i det tredje fönstret, andras erbjudanden. För att interagera med spelet, skulle spelarna i det här läget först välja färg på de aktier de ville sälja och sedan skriva in antal och pris. Den här designen skulle ta ganska mycket längre tid än det nuvarande gränssnittet markera och dra eftersom spelarna skulle vara tvungna att ständigt fylla i information på något sätt. Eftersom vårt spel är tidsbegränsat anser vi att markera och dra går smidigast. 9

Första skissen 3st $100 5st $300 $19 Andra skissen aktier antal aktier pris/styck aktiepris/styck aktier Anledningen till att vi har valt att sätta ut styckpris på aktierna i ett erbjudande är att spelarna enkelt ska kunna jämföra aktievärdet på dem. Varje gång en spelare ska sätta pris på sina aktier som han eller hon ska bjuda ut har vi valt att det ska dyka upp ett dialogfönster, där användaren ska fylla i styckpris på sina aktier, priset borde anges med hjälp av en horisontell rullningslist eftersom det är svårt att skriva in siffror i en PDA. Vi diskuterade ett annat förslag som gick ut på att ha en ruta med värden i och när spelarna ska sätta ett pris trycker de på pilar vid sidan om rutan, som de höjer och sänker värdet med. Vi ansåg dock att detta inte var något bra alternativ eftersom värdet i rutan skulle börja på noll och då kan någon annan spelare hinna köpa aktierna för noll kronor, innan spelaren hinner sätta något pris. Av tidsmässiga skäl valde vi i prototypen att ha ett vanligt textfält. Anledningen till att vi valde att sätta priset före aktieprickarna och inte efter, var att antalet aktier som spelarna vill bjuda ut kan vara ganska många. Priset skulle i så fall hamna långt till höger i raden av erbjudandet och då skulle de övriga spelarna var tvungna att scrolla för att se priset, vilket inte hade fungerat så effektivt. Nu ser spelarna priset direkt och kan då snabbt avgöra om de är intresserade av att göra någon affär. Priset som anges är per aktie, vi avsåg också ange totalt pris för hela erbjudandet till höger i listan, men inte heller detta hann vi med i prototypen. Anledningen till att lägga det totala priset till höger skulle vara att undvika förvirring med styckpriset. Tredje fönstret I det tredje fönstret visas andra spelares erbjudanden av aktier som ligger ute till försäljning. Först står priset på aktierna och sedan antal prickar som är till salu. Varje rad i säljfönstret är ett erbjudande och den som bjuder på ett erbjudande måste köpa hela erbjudandet, det vill säga hela raden med prickar. Vi har alltså valt att inte låta köparen kunna ta delar av ett anbud dels eftersom det är säljaren som skall sätta villkoren och dels för att det skulle krångla till gränssnittet för mycket att ha med den alternativa möjligheten. $ 20 Olika erbjudanden och dess pris $ 25 $ 15 $ 30 10

Fönstret för andras erbjudande och fönstret för egna erbjudanden är uppbyggda likadant. Anledningen till att vi inte valde att lägga spelarens egna erbjudanden i samma fönster som övriga spelares erbjudanden var att vi tror att det kommer att förvirra spelarna om båda funktionerna skulle finnas i samma fönster. Köpa och sälja är de enda ageranden som går att göra i spelet och det är därför viktigt att skilja på dem i gränssnittet. När du köper aktier markerar du den rad av erbjudanden som du vill köpa och drar dem upp till det översta fönstret, där alla aktier som spelaren äger finns. Det går till på liknande sätt som när du lägger ut erbjudanden till försäljning; markera, dra och släpp. Diskussion Det här spelet har möjligheter att utvecklas i framtiden, eftersom spelet är mycket enkelt att använda. Användarna kan ha olika bakgrund, olika kunskaper och kan utnyttja dagens teknik, t ex PDA, för att spela spelet. Fördelen med PDA är att den är oerhört smidig samt att den är mobil, vilket medför att användarna kan ha med sig den och spela på olika platser. Spelet är enkelt och innehåller inga krångliga funktioner eller menyer att lära sig, däremot måste användarna hänga med i spelet för att tiden är begränsad. Det behövs snabba beslut och reaktioner för att kunna sälja och köpa aktier, det kan nästan bli lite stressigt. Med anledning av att stora skärmar kan bidra till att det blir jobbigt för användarna att behöva röra ögonen fram och tillbaka över en stor yta har vi tänkt på att använda färg och olika storlekar för att tydliggöra informationen [3; s.6]. Trots att vi har valt att nyttja en stor skärm för den gemensamma spelplanen tror vi inte att det blir jobbigt för spelarna att röra ögonen över ytan, eftersom den viktiga informationen är lätt att finna. Skärmen ska även ses på avstånd, vilket minskar den vinkel man behöver röra ögonen. Det är intressant att användare skall kunna spela tillsammans i samma spelmiljö. Vilken av spelarna som har vilken färg är anonymt, vilket skapar en mer dramatisk situation. Vi tycker att idén med att dra och släppa är ett väldigt enkelt sätt för spelarna att interagera med programmet. Det ger en bättre förståelse eftersom det känns mer fysiskt att flytta ett objekt genom att markera det och flytta det genom att dra det med pennan till den plats spelaren vill ha det på. Vi har under vår utveckling tänkt och arbetat mycket med själva interaktionen mellan människa och dator. Aktierna visas också fysiskt i vårt gränssnitt eftersom de symboliseras av flyttbara prickar och har en speciell färg, vilket ger spelarna en enkel förståelse av hur många och vilken sort av aktier de gör affärer med. På den stora skärmen visas även företagen som symboliseras av ringar och som ändrar storlek beroende om det går bra eller dåligt för företaget. Det här medför att människor, till exempel barn, som inte ännu kan läsa har möjlighet att spela eftersom de endast behöver titta på ringarnas storlek. Spelet involverar inte mängder av text att läsa och förstå för att kunna utföra spelet och det är där styrkan i spelets enkelhet finns. Vi har givetvis också tänkt på hjälpfunktioner för spelarna. Hade vi haft mer tid skulle vi ha utvecklat ett stöd för spelarna att enkelt kunna ta hjälp vid situationer när något är oklart. Det här skulle även innebära feedback från systemet till användarna. Till exempel, om en spelare försöker att köpa aktier trots att han eller hon inte har tillräckligt med pengar, skulle det vara bra om en varning visas på spelarens PDA som uppmärksammar användaren på att denne inte har tillräckligt med pengar för att utföra köpet av aktierna. 11

Vi borde dessutom ha mer information i gränssnittet om vad de olika områdena på PDA:n är, så att en användare kan spela utan manual eller introduktion, men det var inte detta vi valde att lägga fokus på i projektet. Referenslista 1. Video; I-land, An interactive landscape for creativity and innovation, German National Research Center for Information Technology and Darmstedt school of Design 2. Webbdesign 1, Att tänka på 2003.09.08, Sus Lundgren 3. Icke-traditionella grafiska gränssnitt, 2003.10.08, Sus Lundgren 4. Tufte Edward R, Invisioning Information, 2001, USA, Graphics Press 12