IT-Universitetet i Göteborg Grafiska gränssnitt, 6 p 031027 PDA-program till vakter Projekt 3: Icke-traditionella gränssnitt Grupp1: Vilhelm Bergman Hanna Friberg Björn Nord Ulrika Olsson Marlene Sjöberg
Innehållsförteckning Introduktion...3 Målgrupp...3 Metod...3 Arbetsfördelning...4 Resultat...4 Menyalternativen...5 Larmkarta...5 Visa bokningar...5 Visa logg...7 Visa vakter...8 Rond - karta...9 Rond - detaljer...10 Larm...12 Allmänt om programmet...17 Layout...18 Ikoner...18 Färgval...18 Inmatningsdon...18 Användartest på målgrupp...19 Diskussion...19 Referenser...20 2
Introduktion Detta projekt gick ut på att skapa ett gränssnitt som passar in i en icke-traditionell miljö. Det kan röra sig om gränssnitt som skall kunna användas under mer extrema förhållanden, så som till exempel mörker, stressiga miljöer, stor eller liten display. Till uppgiften hörde också att vi inte fick använda en vanlig dator och tangentbord eller mus. Med andra ord var det upp till oss att välja vilken miljö vi ville har för vårt gränssnitt, samt vilken typ av inmatningsdon som skulle användas. Vi har valt att skapa en PDAapplikation för vakter som hanterar larm och går ronder. Inmatningsdon är knappar och penna. Applikationen ligger på konceptuell nivå. Målgrupp Målgruppen för applikationen är vakter. PDA: n är tänkt att användas av dem när de utför sina arbetsuppgifter, så som att hantera larmutryckningar och att gå ronder. Metod Vi började med att diskutera de olika tänkbara miljöerna och vilken typ av applikationer man skulle kunna tänkas behöva använda där. Vi gick igenom de olika alternativa miljöer som var föreslagna var för sig. Vi funderade på scenarios i miljöerna. Vi fastnade för mörker och stormade idéer. Till slut beslutade vi oss för att göra en applikation för PDA till vakter som de kan ha med sig när de kontrollerar larm och går ronder. Vi började med att fundera vilken typ av miljö de befinner sig i. Vi kom fram till att vakterna arbetar i både ljus och mörker. Arbetsmiljön blir stressig om larm går. Till detta hör att PDA: ns display är liten. När vi arbetade vidare på idén märkte vi att det nog inte var så viktigt för vakterna att ha en applikation som är anpassad till mörker. Detta baserades på ett antagande vi gjorde om att det inte är så viktigt att bevara deras mörkerseende eftersom att de relativt sett inte befinner sig så mycket i mörker. Sålunda lämnade vi tanken att anpassa applikationen därefter. Vi valde att lägga fokus i projektet på den lilla displayen. Vidare koncentrerade vi oss på att tänka ut vad en vakt kan tänkas göra i sitt arbete och till vilket av detta han/hon skulle kunna behöva en mobil apparat. Vi arbetade personasaktigt. Vi kom fram till att en vakt, i stora drag, går ronder och kontrollerar larm som har utlösts. Till detta, beslutade vi, ville vi utveckla en prototyp. Vi beslutade också att utveckla den på skissnivå och att inte implementera något. Efter skissande av kartor med larm och diverse andra attribut fortsatte vi med att lista allt på hur vi ville att applikationen skulle fungera och vilka funktioner den skulle ha. Vi bearbetade, förkastade och omarbetade dessa förslag på en tavla och gick tillslut vidare till att plocka in dem i varianter på gränssnitt. Vi fortsatte med att skissa på hur olika delar skulle kunna se ut. Skisserna förde vi över till datoriserade versioner. När vi hade en stomme klar satte vi oss ned och diskuterade kring denna. Vad händer om det kommer 100 larm samtidigt? Var i applikationen kan problem uppstå då? Hur visar vi mycket på en liten skärm? Vad är viktigast att visa om det händer många olika saker samtidigt? Var finns styrkor och svagheter med applikationen som den ser ut nu? Och så vidare. Vi gjorde ett snabbt användartest på vårt gränssnitt för att se om personerna kunde förstå vad som visades på de olika bilderna. Vi ville bland annat se om de ikoner vi hade skapat var förståeliga. Vi 3
ville också se hur de olika färgkodningarna vi hade gjort uppfattades. Vi fick i detta skede använda oss av andra personer än av målgruppen. För vår del förde testet med sig nya frågor. Färgkodningen skulle kunna uppfattas på olika sätt och vi var tvungna att ta ställning till den. Vi fortsatte jobba och diskutera parallellt. Hela projektet har varit präglat av en iterativ process där vi har arbetat fram designförslag som på ett konstruktivt sätt ifrågasatts och antingen förkastats, accepterats eller omarbetats. Arbetsfördelning Vi har alla varit med och utvecklat konceptet. Vi har alla diskuterat och skissat tillsammans. Vi har suttit i grupp och jobbat kontinuerligt och påverkat programmets framväxt. Dock har för de mesta Vilhelm och Björn skött tangenterna. Marlene har haft hand om våra användartester. Ulrika har skapat ikonerna. Hanna har skrivit rapporten. Resultat Projektet resulterade i olika bilder på en applikation för vakter. När vakten öppnar PDA: n visas en karta på det område som hon/han ansvarar för. Denna vy fungerar som default och visas alltid så länge som inget larm går eller om vakten inte är inne på ett annat menyalternativ. Se bild 1. Bild 1. Larmkarta i utgångsläge. 4
Menyalternativen Vi börjar med att gå igenom de olika menyalternativen. Längst ner ligger en menyrad med olika alternativ. Man kan välja mellan följande: Larmkarta, Rond - karta, Rond - detaljer, Visa vakter, Visa logg, och Visa bokningar, se bild 2. Bild 2. Menyalternativ. Larmkartan är vald. Larmkarta Larmkarta är den defaultkartan som alltid visas. Den här bilden är utgångspunkten för applikationen. Här visas en karta på det område som vakten ansvarar för. Se bild 1. Visa bokningar I Visa bokningar kan man kolla upp vilka salar som är bokade. Denna funktion är kopplad till själva områdets bokningssystem för salar (om det finns ett, vilket det gör i vårt exempel). Vi gjorde en avvägning om att det kan vara bra för en vakt att veta om det finns folk i byggnaderna och då också vilka personer det är. Om det skulle gå ett larm kan vakten kolla upp om salen är bokad. Om det till exempel är anställda som har råkat sätta igång ett larm kan de kontakta vakten och ange hemligt lösenord. Detta innebär att vakten 5
inte behöver skynda sig till platsen. Vad det gäller själva gränssnittet så har vi valt en trädstruktur som expanderar när man klickar på plustecknet, se bild 3. Bild 3. Bokningar. Vi har använt oss av enclosure, som Björk (2000) tar upp i sin artikel. Detta passade utmärkt, då det vi vill visa ligger just ute i trädet. Vi tyckte att just detta fungerar bra att nästla informationen med enclosure, eftersom vi vill visa mycket information på liten yta. I exemplet ser vi att bokningar är gjorda i ED-huset, M-huset och i MC2. Vi ser att det finns bokningar på våning 1 till 6 i ED-huset. Plustecknet visar att det finns bokningar gjorda och att man kan expandera trädet. På våning 5 ser vi att bokningar är gjorda i salarna 5205, 5211, samt 5213. Vi ser också mellan vilka tider bokningarna gäller. De hus/salar där det inte finns några bokningar visas inte. För att få vidare information om bokningen klickar man på den blå informationsikonen med pennan. Se bild 4. Då visas en popupruta med salsnummret som titel. Man ser mellan vilka tider rummet är bokat, av vem, klassifikation av personen (exempelvis student, lärare, anställd), samt vilket syfte personen har med bokningen. Popuprutan tas bort med hjälp av döljknappen. Man använder pennan till detta alternativt en knapp som är avsedd för popuper. 6
Bild 4. Bokningar med informationspopup. Visa logg Om vi går vidare bland menyalternativen och väljer Visa logg så får vi upp en textbaserad logg där olika händelser finns registrerade. Händelserna registreras i tidsordning, se bild 5. Om ett larm går ser man följande information i loggen: tidpunkt, byggnad, sal, samt den ikon som representerar larmet. Om någon vakt drar sitt passerkort registreras tidpunkt, byggnad, sal, passerkort och namn. När ett larm åtgärdas registreras tidpunkt, att det gäller ett larmskåp och dess nummer. Det står också vilket hus och vilken sal vilket typ av larm som blev åtgärdat, samt vaktens namn. För att få fram en skillnad mellan de olika händelserna valde vi att separera dem från varandra med hjälp av ränder i grått. I vårt exempel ser vi att det gick ett larm kl. 20:10 och att det skedde i ED-huset i sal 6215. Larmikonen säger oss att det är en dörr som har öppnats. Vidare ser vi att vakten Elsa Johansson har dragit sitt passerkort i ED-huset i sal 6210 kl. 20:32. Vi ser också att Elsa åtgärdade ett larm i ED-huset sal 6215 genom att återställa det i larmskåp 6220. 7
Bild 5. Visa logg. Visa vakter I menyalternativet Visa vakter kan man se vilka vakter som arbetar just nu. Man ser namn på personerna samt deras ID-nummer. Man ser också när de gick på sitt pass och när de ska gå av. Man ser även vilka områden de ansvarar för. Precis som ovan använder vi separering med ränder i grått. Detta är genomgående i programmet där det finns den här typen av text. Just nu arbetar tre vakter. Se bild 6. 8
Bild 6. Visa vakter. Rond - karta Menyalternativet Rond används när vakten går sin rond och läser av vissa utvalda kontrollpunkter. Om vi startar vid alternativet Rond karta, så får vi upp en översiktsbild på var kontrollpunkt finns. Vi symboliserar denna punkt med en orienteringskontroll. Vi ville mappa tanken om kontroll till det som vakten gör där, nämligen läser av en kontrollpunkt, se bild 7. Den kontroll som vakten skall till är den som visas. När kontrollen är gjord visas nästa kontroll på kartan. På så sätt ser vakten vart nästa punkt finns. Ronden gås i en viss bestämd ordning. När vakten kommer inomhus visas en karta på inomhusmiljö. 1 1 Menyalternativer Rond karta skall egentligen ha en vit titelruta med texten Rond karta så att man vet var man befinner sig. 9
Bild 7. Karta över ronden. Rond - detaljer Om man väljer Rond detaljer så ser vi att bilden utgår från samma bild som bokningar och bygger på samma tanke. Detta är en principskiss på hur det skulle kunna se ut. När vakten går sin rond, som i exemplet i ED-huset, så har hon/han olika kontrollpunkter att gå till, se bild 8. Om vi tittar på exemplet så ser vi att det på våning 5 finns tre sådana punkter. Vid varje punkt kan vakten använda PDA: n till att via en inbyggd modul och IR-teknik läsa av streckkoderna vid varje punkt. När en punkt är avläst lagras informationen. Om avläsningen gick bra kommer en grön ok-ikon i form av en bock att visas efter punktens namn. Om avläsningen inte godkändes visas istället en röd kryssikon. Om den röda ikonen visas måste avläsningen vid den punkten göras om tills den gröna ikonen visas. I exemplet ser vi att vakten har gått två ronder. Varje punkt blev godkänd. Vakten är nu inne på sin tredje rond och har just fått problem med den sista avläsningen, som inte godkändes. De ronder som är avklarade är nedtonade, medan den rond vakten är på är färgstark. Här har vi haft med Tuftes (1990) tankar i resonemanget. Med hjälp av ikonerna kan vakten kontrollera att avläsningarna blev godkända och att hon/han inte har glömt bort någon av punkterna. Vi anser att denna funktion kan fylla flera syften. Dels kan ledningen se att jobbet är gjort. Om det skulle vara så att en rond inte fullföljs kan ledningen se detta och förstå att det kan ha hänt vakten något. De kan då 10
kontakta henne/honom. Dels är den ett stöd för vakten om att avläsningarna blev godkända. Genom att använda PDA: n till detta så ersätter den befintlig apparatur för detta ändamål. På så sätt slipper vakten bära omkring på flera olika enheter. Om det sker ett larm under tiden som vakten går sin rond slipper vakten byta mellan enheter, utan har allt i ett. När vi utformade ikonerna utgick vi från standarddesign, så som att grönt står för ja, ok och rött för nej, stopp. Detta gäller även själva figurerna. Vi ville också ha en avgränsad form på ikonerna, vilket resulterade i en svagt rundad form med skuggningar. Bild 8. Kontrollpunkter på ronden. På bild 8 ser vi att det ligger en rad med röda flikar lägst ner över menyraden. Detta är larmflikar som kommer upp när ett larm går. Man hör också ett pip. Om man befinner sig på andra menysidor än larmkartan så är det på detta sätt som man alltid får reda på att ett larm har gått. Genom detta blir man uppmärksammad om att ett larm har gått, utan att man tappar bort sig var man befinner sig i menyn. Genom att använda knapptryckning kan man bläddra mellan flikarna. Man kommer då till den aktuella larmkartan. 11
Larm Om man har framme defaultkartan larmkarta och det går ett larm så ser det ut som på bild 9. När ett larm går dyker det upp en popupruta med information om larmet. Vi ser att ett larm har gått i ED-huset på Rännvägen 6. Genom att titta på larmikonerna ser vi att det har gått 1 brandlarm, 6 datorlarm, 3 dörrlarm och 3 rörelsesensorlarm. Vidare får vi information om att larmen finns i tre olika salar; 6215, 6219 och 6217. Salarna är ordnade i prioriteringsordning. Prioriteringen ser vi också på den röda färgen i cirklarna (prioritet kommer förklaras senare). Den blåa informationsikonen säger oss att två av salarna är bokade av någon. Genom att klicka med pennan på ikonen kommer vi till bokningen under Visa bokningar om vi vill se mer. För att ta bort popuprutan klickar man på döljknappen med pennan, eller använder en avsedd toggelknapp. Bild 9. Larmkarta med larmpopup. Om vi tar bort larmpopupen ser vi en översiktsbild på var i området larmet har gått, se bild 10. I detta fall var det i ED-huset, som är markerat på kartan. Det ser vi på fliken ovanför menyraden. Vi ser också att larmet är på våning 6. Den röda färgen är mappad till prioritet. Larmet i HC våning 1 har högst prioritet och har den rödaste färgen. Sedan kommer ED våning 6 och sist Kårhuset våning 2. Den röda toningen går också igenom på kartorna. Prioriteten bestäms av olika faktorer, så som kostnad på utrusning i olika salar 12
och typ av larm. På flikarna finns en klocka som visar hur gammalt larmet är. Larmet i Kårhuset är det senaste som vi kan se. Det näst senaste är larmet i HC och det äldsta larmet är i ED. Ju mer blå färg, desto äldre larm. Tiden fylls alltså på automatiskt ju längre tiden går. Det kan finnas äldre larm som man kan se om man bläddrar bland flikarna. Det kan dock aldrig finnas ett larm med högre prioritet som inte syns, för de högst prioriterade larmen sorteras alltid in till vänster så att man lätt skall se dem. Om det tillkommer ett larm längre bort bland flikarna (vilket gör att de inte syns) så visas det genom att pilen till höger blinkar i rött. Bild 10. Karta på larm i ED våning 6. På bild 11 kan vi se hur det ser ut om vi bläddrar till larmet i HC våning 1. Här ser vi också den mappade färgen. 13
Bild 11. Karta på larm i HC våning 1 Om vi går vidare och klickar på alla-fliken i larmfliksraden, så hittar vi en karta med alla larm inritade, se bild 12. Egentligen ser vi bara två larm. Det tredje ligger utanför området och indikeras istället med en pil uppe till vänster (åt larmets riktning). Färgen på pilen är mappad till larmets prioritetsfärg, det vill säga lägst prioritetsfärg i detta fall. Vi ser också att det finns två andra vakter i området. Vakternas ID-nummer är 1 och 2. Den runda ringen representerar att vakt 1 är utomhus och att det är gps som används vilket ger oss kontinuerlig uppdatering av vaktens position. Vakt 2 är inomhus och representeras av en fyrkant. Det betyder att avläsningen går på senaste kända passerkortsdragning och att positionen alltså inte är exakt. 14
Bild 12. Karta med alla larm i området. 15
Om vi zoomar in på ED våning 6 så ser vi att det har gått tre larm i det området, se bild 13. På samma sätt som prioriteten syns på flikarna ser vi prioritet på rummen. Rum 6215 har högst prioritet eftersom det är rödast, sen kommer 6219 och sist 6217. Bild 13. Inzoomat larm i ED. Om vi vill studera larmen närmare, kan vi zooma in ännu mer, se bild 14. Då ser vi med hjälp av larmikonerna att det har gått tre dörrlarm, fyra datorlarm och ett brandlarm. Rum 6215 har högst prioritet. Om det skulle gå ett larm utanför kartan kommer en röd pil att visas i riktningen, som en larmindikator och man kan då förflytta sig dit via mittenknappen. Den blå trekanten på kartan symboliserar en larmlåda där vakten återställer larm. Larmlådan måste vara utsatt på kartan för att den skall vara lätt att hitta. 16
Bild 14. Störst inzoomingsnivå på larmen. När alla larmen är åtgärdade försvinner flikarna ett efter ett tills det inte finns några kvar och larmkartan är tom. Man hamnar då tillbaka på defaultkartan. Allmänt om programmet Larmpopupen visas bara den först gången som ett larm kommer i det området. Denna avvägning grundar sig i att om det kommer 50 larm mer eller mindre samtidigt i ett område kommer vakten ha fullt sjå med att klicka bort popuprutor och inte få en chans till att se på larmkartan. För att komma runt detta visas den endast en gång. Vill man sedan se den igen använder man toggelknappen som finns avsatt för ändamålet. Håller man in knappen syns popupen, släpper man så försvinner den. När ett larm kommer piper PDA: n till. Detta anser vi vara viktigt, så man inte kan förutsätta att vakten tittar på PDA: n hela tiden. Pipet är som ett komplement till larmflikarna. Som synes i programmet så har vi valt att gruppera larmen, se bild 14. Larm inom ett visst område (ett område kan till exempel vara ett våningsplan, som i detta fall) visas alla under samma flik. Detta gjorde vi för att komma runt problemet att få en ny flik för varje ny larmsensor som går. Det skulle ha resulterat i allt för många flikar att bläddra bland 17
och vakten skulle förlora översikten. Vår tanke var också att det kan vara bättre att se alla intilliggande larm på en och samma karta än att behöva bläddra sig fram, vilket inte heller skulle hjälpa till för att få en översikt om larmen. Layout Vi har strävat efter en så enhetlig layout som möjligt, både vad det gäller färg och form. Vårt mål har varit att inte komma med några överraskningar, utan att återanvända både färg och form i så hög utsträckning som möjligt. Ikoner Vi ville ha olika typer av ikoner för larm och för annat (kontrollpunkt, information, ok och nej). Tanken är att man inte skall kunna blanda ihop dem. Därför skapade vi ikoner utifrån två olika färg- och formkoncept, i stället för att utgå från en gemensam grund. Larmikonerna har en svart bakgrund med gula figurer på. De andra ikonerna har en vit bakgrund med färg på. På rondkartan har vi valt en vitorange ikon som ser ut som en orienteringsskärm. Vi ville mappa tanken om kontroll till det som vakten gör där, nämligen läser av en kontrollpunkt. Färgval De genomgående färgerna i programmet är grått, rött, blått och vitt. Kartorna är i grunden gråa. Vi valde den färgen, då vi ville kunna lägga larm, ikoner, text och dylikt på utan att bakgrunden tog uppmärksamheten. Den gråa färgen går också igenom på de textbaserade sidorna, se till exempel bild 5. Vi ville komma åt visualisering med hjälp av separering, som Tufte (1990) talar om. Den röda färgen finns i det som har med larm att göra, då rött oftast förknippas med fara. Larmflikarna är rödtonade och är mappade till de olika typerna av kartor och de olika rum som larmen gått i. Toningen är beroende på vilken prioritet som larmet har. Högprioriterade larm har den rödaste färgen, den näst prioriterade larmet näst rödast färg osv. I detta program har vi antagit tre olika prioriteter. Den röda färgen är också mappade till översiktskartan med alla larm på. Där kan man se de olika prioriteterna utritade på byggnaderna. Färgen mappas också till larmindikationspilen. Den tonade röda färgen går också igenom på larmpopupen. Här mappas dock inte prioriteten, men att det finns olika prioriteter på larm symboliseras av toningen från stark röd till svag röd. Den blåa färgen har vi valt att ha till menyn, informationspopup, informationsikonen, klockan, larmskåpet och för att visa vakternas positioner. Färgen kändes som ett bra komplement till de andra färgerna. Tanken var också att ha den röda färgen till det som var mer akut, och det blåa till det mindre akuta. Larmskåpet kan tyckas vara väldigt angeläget att hitta, men vi valde ändå att ge det en blå färg. Detta för att kunna särskilja larmskåpet från själva larmen. Inmatningsdon I programmet kan man använda både pennan och knapparna. Vi har valt att använda penna för de delar av programmet som inte innebär någon stress och är lugna. Pennan används till att välja menyalternativ. Pennan används på bokningar för att se mer 18
information, samt att dölja den popuprutan. Man kan även om man vill dölja larmpopupen, men eftersom det är en mer stressig situation rekommenderar vi att den knapp som finns avsatt till ändamålet används, eftersom det går snabbare. Vi har valt att använda knappar som inmatningsdon när det är mer stressigt och när det måste gå snabbt. Man ska inte vara beroende av att man inte har tappat sin penna. Knappen nederst till vänster är en toggelknapp för larmpopupen och informationspopupen. Den stora mittenknappen användas om man vill navigera runt på kartan. Först flyttar man kartan och efter det att man har tryckt in knappen kan man zooma in och ut (man trycker på uppåt och nedåt). Genom att använda hjulet på PDA; ns vänstra sida navigerar man mellan våningarna i byggnaderna. Knapparna uppe till höger och nederst till höger bläddrar mellan larmflikar. Om man till exempel är inne på bokningar och det går ett larm behöver man inte leta reda på pennan för att välja om alternativ i menyn, utan då kan man använda knappar och bläddra direkt bland flikarna som kommer upp. Användartest på målgrupp Vi användartestade konceptet på en Securitasvakt. Han berättade att som det fungerade nu så får han bara information i en komradio om i vilket område ett larm har gått, men inte mycket mer än så. Han uppskattade därför larmkartorna. Han tyckte också att det var bra att man kan se vilka andra vakter som jobbar. Ett problem som vakten upplevde på sitt jobb var när ett larm har gått och det skall stängas av. Om han inte känner till området så väl måste han lägga ned stor energi att leta efter larmlådan med återställningskappar i. Han saknade alltså en hint i vårt koncept om var larmlådorna sitter. Testet resulterade i att vi lade till en symbol i inomhuskartan om var en av larmlådorna sitter. Diskussion Applikationen är tänkt att fungera i små områden, så väl som i stora. Det finns ingen sådan begräsning. Vi har valt en typ av område för att visualisera hur programmet kan fungera. Detta område satte sina möjligheter. I en annan typ av område kanske det inte går att boka salar till exempel, vilket gör att den funktionen tas bort. Vi har diskuterat mycket fram och tillbaka om prioritet kontra tid. De här aspekterna har vi varit tvungna att omvärdera under resans gång. Även om det är bra att veta att det har tillkommit ett larm, så är de ändå viktigare att åtgärda de larmen som orsakar mest skada. Vi har helt enkelt av denna orsak att prioritera prioritet framför tid. Vi har också diskuterat om hur mycket övervakning av vakten vi ville ha med. Vi fick ställa övervakning mot trygghet. Vi gjorde avvägningen att i ett jobb som detta var tryggheten mer viktig än att man skulle känna sig integritetskränkt. Bland annat finns andra vakter utsatta på larmkartan som visar alla larm. Ledningscentralen kan också se om ronderna är gjorda. Framtida möjligheter till utveckling av programmet skulle kunna vara att skicka/ta emot meddelanden, använda den som en mobiltelefon, kontakta polis och se det som visas på övervakningskameror då det går ett larm. 19
Referenser Björk, S (2000). Hierarchical Flip Zooming: Enabling Parallel Exploration of Hierarchical Visualizations. Proceedings of Advanced Visual Interfaces (AVI). Tufte, ER (1990). Envisioning Information. Graphics Press. 20