Visualisering av steriliseringsprocess på

Fresenius Kabi

Handledare: PG Holmlöv

Författare: Aline Gorabi & Maria Pless

Institutionen för informatik och media

Examensarbete 15 hp

Uppsala Universitet - HT17

Sammanfattning

Denna studie ämnar undersöka hur en webbapplikation kan utformas för att

visualisera data på ett effektivt och användbart sätt. Undersökningen syftar även till

att undersöka vilka element och metoder i visualisering som bidrar till att ge förståelse

för information som visualiseras i form av ett gränssnitt. Frågeställningen som

uppsatsen avser att besvara är hur kan en webbapplikation utformas för att visualisera

data på ett effektivt och användbart sätt? För att besvara frågeställningen har en

webbapplikation utvecklats som visualiserar data i steriliseringsprocessen för

läkemedelstillverkaren Fresenius Kabi. Den metod och forskningsstrategi som har

använts för studien är Design Science. Insamling av data och krav har gjorts genom

deltagande observationer i produktionen. För att skapa en webbapplikation som är

användbar och anpassad till den miljö den är ämnad för har Jakob Nielsens

användbarhetsprinciper, Stephen Fews designriktlinjer, Rick Borups teori samt teori

om webbstandarder använts som underlag för utvecklingen. Visualiseringen av

webbapplikationen och dess användbarhet har utvärderats med hjälp av

expertutvärderingar som grundar sig på Steve Krugs riktlinjer samt Jakob Nielsens

graderingsskala för utvärdering. I uppsatsens diskussion presenteras överväganden

och förslag på vidare forskning. Slutsatsen som presenteras är att utveckling av en

webbapplikation med fokus på visualisering kan utformas på ett användbart och

tydligt sätt genom att utföra en noggrann kravinsamling och väl utförda

expertutvärderingar med användarna. Genom att granska tidigare forskning och

teorier som berör användbarhet och design kan en visuell framställning av befintlig

data bli ett användbart verktyg som kan användas för att optimera

produktionsprocesser i framtiden.

Nyckelord:

Design Science, Visualisering, Produktion, Utveckling

Abstract This study aims at investigating how a web application can be designed to visualize

data in an efficient and useful manner. The study also aims at investigating which

elements and methods of visualization contribute to understanding information that is

visualized in the form of an interface. The question that the essay is about to answer is

how a web application can be designed to visualize data in an efficient and useful

way? To answer the question, a web application has been developed that visualizes

data in the sterilization process. The research strategy used for the study is Design

Science. Data collection and requirements have been collected through participatory

observations in production at Fresenius Kabi. In order to create a web application that

is useful and adapted to the environment it is intended for, Jakob Nielsen's usability

principles, Stephen Few's design guidelines, Rick Borup’s theories and theory of web

standards have been used as the basis for development. The web application and its

usability have been evaluated using expert evaluations based on Steve Krug's

guidelines as well as Jakob Nielsen's rating scale. The paper's discussion presents

considerations and proposals for further research. The conclusion presented is that the

development of a web application that emphasizes visualisation can be designed in a

useful and clear manner by performing a thorough collection of requirements and

well-performed expert evaluations with users. By reviewing previous research and

theories related to usability and design, a visual representation of existing data can be

a useful tool that can be used to optimize the production processes in the future.

Keywords:

Design Science, Visualization, Production, Development

Förord Stort tack till våra handledare Axel Burström, Jenny Söderström, Johnny Westlund

och PG Holmlöv som möjliggjort utförandet av denna studie samt även bidragit med

användbar handledning och expertis.

Begreppsdefinitioner:

Visualisering: I denna studie används begreppet visualisering för hur befintlig data

kan visualiseras i form av grafer och annan information genom en webbapplikation.

Steriliseringsprocess: Steriliseringsprocessen är en del av processen i tillverkningen

av intravenösa näringslösningar hos läkemedelstillverkaren Fresenius Kabi.

Steriliseringen sker med hjälp av autoklaver för att kunna sterilisera de intravenösa

näringslösningarna.

Delprocess: Steriliseringsprocessen består av fyra delprocesser. Dessa delprocesser

står för de olika moment som genomförs för att de intravenösa näringslösningarna ska

steriliseras. Delprocesserna består av: Tid till autoklav, tid till att stänga dörr till

autoklav, tid till att öppna dörr till autoklav och tid till att autoklav är tom.

Autoklav: Används för att sterilisera ett objekt, i detta fall de intravenösa

näringslösningarna.

Flöde: Produktionen har fyra flöden som genomgår steriliseringsprocessen, dessa

flöden är: FMCB1, FMCB2, FFX4 och FMCB5. Dessa flöden går alltså parallellt med

varandra och genomgår samma typ av steriliseringsprocess.

Fresenius Kabi: Läkemedelstillverkare där examensarbetet utförts.

Användbarhet: Hur användning av webbapplikationen tillfredställer ändamålet.

Expertutvärdering: En utvärdering som utförs av ett antal experter inom området.

De går enskilt igenom webbplatsen för att senare diskutera resultaten.

Visual Studio: Programutvecklingsmiljö från Microsoft som används för att bygga

PC-applikationer, i denna studie har Visual Studio använts för utveckling av

webbapplikationen.

Webbapplikation: Ett program som använder sig av webbläsare och webbteknologi

för att utföra uppgifter och funktioner.

Innehållsförteckning

1.Inledning......................................................................................................................................11.1Introduktion........................................................................................................................................11.2Forskningsproblem...........................................................................................................................11.3Syfte........................................................................................................................................................21.4Forskningsfråga..................................................................................................................................2

2.Bakgrund......................................................................................................................................32.1FreseniusKabi....................................................................................................................................32.1.1Stereliseringsprocess...................................................................................................................................3

2.2Visualisering........................................................................................................................................4

3.Teori...............................................................................................................................................63.1Visualiseringavdata.........................................................................................................................63.1.1StackedBars.....................................................................................................................................................83.1.2PieChart.............................................................................................................................................................83.1.3Placeringavgrafer........................................................................................................................................83.1.4Visuellaskillnader.........................................................................................................................................93.1.5Valavfärg..........................................................................................................................................................93.1.6Navigering......................................................................................................................................................10

3.2Användbarhet..................................................................................................................................60

4.Metod...........................................................................................................................................134.1Formuleringavforskningsstrategi...........................................................................................134.2Datainsamlingsmetod...................................................................................................................144.3Avgränsningar..................................................................................................................................154.4Kravsinsamling................................................................................................................................154.5Genomförandeavexperutverdering........................................................................................16

5.Kravpåwebbapplikation.....................................................................................................185.1Dataset................................................................................................................................................185.2Kravinsamling..................................................................................................................................18

6.Designavwebbapplikation..................................................................................................206.1Visuellaval........................................................................................................................................206.2Användbarhet..................................................................................................................................22

7.Beskrivningavwebbapplikation.......................................................................................237.1Utevcklingsprocess.........................................................................................................................23

8.Expertutlåtande.......................................................................................................................28

9.Analys..........................................................................................................................................31

10.Diskussionochslutsats.......................................................................................................3410.1Diskussion.......................................................................................................................................3410.1.1Fortsattfoskning......................................................................................................................................36

10.2Slutsats.............................................................................................................................................36

11.Källförteckning......................................................................................................................39

12.Bilaga1.....................................................................................................................................42

13.Bilaga2.....................................................................................................................................43

14.Bilaga3.....................................................................................................................................45

15.Bilaga4.....................................................................................................................................47

1

1. Inledning I inledningen presenteras en kortfattad introduktion om studiens område. Därefter redogörs

studiens forskningsproblem, syfte och frågeställning.

1.1 Introduktion

Dagens samhälle använder sig idag av en stor mängd information och kunskap, som ständigt

växer i takt med komplexiteten av verksamheter och dess processer. Det krävs därför att

dessa stora mängder av information struktureras för att kunna mottas med förståelse av

användare. Det existerar ett flertal tekniker för att förmedla information till dess användare.

När det gäller data är visualisering en teknik som hjälper till att strukturera information och

förstå relationerna mellan dess element. Det ger även användaren möjlighet att själv kunna

selektera och hitta information på ett användbart sätt (Tergan & Keller, 2005, ss.1-2). Det

existerar dock vissa utmaningar med visualisering av data. En problematisk aspekt är att det

inte finns några generella kriterier om vad som utgör en bra visualisering. De flesta

människor har en egen uppfattning om vad som är ett bra gränssnitt och som ger bäst

förståelse och informationstillgänglighet. Det blir därför en utmaning att utforma ett

gränssnitt som är tydligt, strukturerat och användbart för alla användare (Chen, 1999, ss.1-2).

1.2 Forskningsproblem Dagens industrier har idag ökade krav på att ha lönsamma anläggningar samtidigt som

industriprocesserna blir allt mer komplexa. För att industrierna ska ha möjlighet att uppfylla

dessa krav krävs det att i ett tidigt stadium upptäcka och åtgärda avvikelser och problem som

uppstår i processerna. Det blir därmed en prioritet att eliminera dessa avvikelser för att snabbt

kunna återgå till ett normalt driftläge (Osvalder m fl, 2011). Denna studie ämnar att

undersöka hur en webbapplikation kan utformas för att visualisera data på ett effektivt och

användbart sätt. För att närma sig studiens syfte kommer en webbapplikation att utvecklas för

läkemedelsföretaget Fresenius Kabi och dess produktion. Detta blev aktuellt då Fresenius

Kabi inte hade någon visuell data för produktionen, vilket ledde till ett uppdrag från deras

sida i form av detta examensarbete. Visualiseringen kommer ske av steriliseringsprocessen

och dess data som används i produktion. Information om flödet och dess avvikelser kommer

att visualiseras i form av en webbapplikation som är kopplad till en databas som behandlar

denna information. Detta för att upptäcka och identifiera avvikelser och stopp i produktionen

2

i ett tidigare stadium, vilket bidrar till att snabbare kunna återgå till normalläget för

produktionen. Webbapplikationen kommer även att användas för att analysera data över tid

för att identifiera brister i processen och effektivisera produktionsarbetet. Det som skapar

intresse att genomföra denna undersökning är att dels skapa och utforma det visuella på ett

sätt som skapar bäst förståelse och effektivitet hos användarna.

1.3 Syfte Denna studie ämnar att undersöka hur en webbapplikation kan utformas för att visualisera

data på ett användbart sätt för att effektivt kunna tolka data. Undersökningen syftar även till

att undersöka vilka element och metoder i visualisering som bidrar till att ge förståelse för

information som visualiseras i form av ett gränssnitt. Som underlag för att kunna utföra detta

kommer vi att använda oss av Stephen Fews riktlinjer och Rick Borups teori som bygger på

vidare forskning från Edward Tufte. Dessa kommer kombineras med Steve Krugs och Jakob

Nielsens riktlinjer för expertutvärdering av webbapplikationen. För att ta sig an syftet

kommer en webbapplikation att utvecklas till produktionen hos läkemedelsföretaget

Fresenius Kabi. Då företagets steriliseringsprocess av läkemedel omfattar en större mängd

data för respektive delprocess kommer webbapplikationen att utvecklas i syfte att visualisera

den data som används inom steriliseringsprocessen. Genom visualisering kan data enkelt

delas inom företaget internt via intranätet, vilket kommer göras genom en webbapplikation

som kommer visualisera data som finns i en befintlig databas. Studien fokuserar på

visualisering och därför tas inte kopplingar till databasen och befintlig data som använts upp

på djupare nivå. Genom att följa krav och specifikationer som de har ställt på

webbapplikationen så kommer vi med hjälp av relevant teori och metod utveckla

webbapplikationen på ett användbart sätt som hjälper användarna att effektivt tolka och

analysera data. Vi kommer att använda oss av de tekniker och verktyg som visat sig vara

mest lämpliga efter att vi gjort en litteraturstudie kring design och användbarhet vid

utveckling av en webbapplikation. Fokus kommer läggas på det visuella i applikationen.

1.4 Forskningsfråga

- Hur kan en webbapplikation utformas för att visualisera data på ett effektivt och

användbart sätt?

3

2. Bakgrund I detta kapitel redogörs det för studiens bakgrund genom en beskrivning om

läkemedelstillverkaren Fresenius Kabi och produktionsprocessen som ska visualiseras samt

bakgrund till utveckling av webbaserade system och visualisering.

2.1 Fresenius Kabi Fresenius Kabi är ett globalt, marknadsledande företag specialiserat på klinisk nutrition,

infusionsterapi och medicinsk teknik. Med ca 35 000 medarbetare runt om i världen har de

med sitt motto “Caring for life” i uppdrag att tillhandahålla läkemedel och teknologi som ska

användas till vård av patienter. I Uppsala finns en av deras produktionsanläggningar där

tillverkning av bland annat intravenösa näringslösningar sker. Denna studie ämnar att

visualisera steriliseringsprocessen av de intravenösa näringslöningarna. Visualiseringen

kommer ske med hjälp av utveckling av en webbapplikation som sedan kommer att användas

av bland annat operatörer och annan personal på Fresenius Kabi (Fresenius Kabi, 2018).

I dagsläget finns data för de olika stegen i steriliseringsprocessen av de intravenösa

näringslösningarna. Dessa data redogör för tiden för varje individuellt processteg. Det finns

totalt fyra processteg i steriliseringsprocessen. Det existerar data men i dagsläget finns den

inte tillgänglig för operatörerna som arbetar med denna process dagligen. Genom att

visualisera dessa data och redogöra visuellt för tiden för steriliseringsprocessen samt tiden för

varje processteg i sig, möjliggör detta att operatörerna samt chefer på olika nivåer kan ta del

av informationen i syfte att förbättra och optimera arbetet som utförs.

2.1.1 Steriliseringsprocess Steriliseringsprocessen består av fyra delprocesser. Den första delprocessen innefattar när

korrekt antal intravenösa näringslösningar är redo att steriliseras ska de förflyttas från enheten

de befinner sig på, vilket är enheten för ett specifikt flöde. Totalt finns det i dagsläget fyra

flöden, dessa är: FMCB1, FMCB2, FFX4 och FMCB5. När korrekt antal är uppfyllt förflyttas

näringslösningarna in i en autoklav för sterilisering. Den andra delprocessen syftar på när de

intravenösa näringslösningarna befinner sig i autoklaven tills att steriliseringen i autoklaven

påbörjas. Från att de intravenösa näringslösningarna befinner sig i autoklav och steriliseras

tills att steriliseringen i autoklaven är färdig och de är redo att lastas ur autoklav står för den

tredje delprocessen. Från att de steriliserade intravenösa näringslösningarna är redo att lämna

4

autoklav och tills att korrekt antal näringslösningar befinner sig på nästa enhet är den fjärde

och sista delprocessen i steriliseringsprocessen. För hela steriliseringsprocessen finns det mål

på en tid som hela steriliseringsprocessen bör ta. Men även delprocesserna har individuella

mål för hur lång tid varje enskild delprocess bör ta.

2.2 Visualisering Data är viktig information och kunskap som kan existera i olika former, exempelvis i form av

siffror, bilder, text eller grafer. Visualisering av data handlar ofta om att transformera data till

information i form av visuella bilder. Målet med att visualisera data är att kommunicera

information tydligt och effektivt genom grafer och visuella bilder. Med hjälp av visualisering

kan data snabbt och effektivt förstås av användare. Genom att visualisera data på ett bra och

tydligt sätt kan användare fokusera på viktig information och budskap snarare än metodik

eller andra mindre relevanta aspekter. Fördelen med visualisering är även att kunna

presentera en större mängd siffror eller data på en liten yta samtidigt som det tydliggör vilken

information som är av betydelse. Användare får även möjligheten att jämföra olika delar av

ett visst data genom att skapa sammanhängande grafer med en stor mängd data samt att

visualisering gör det möjligt att på ett enkelt sätt kunna presentera data både översiktligt och

på detaljnivå (Dong m fl, 2010, ss.1-2).

Analys av data innebär ofta jämförelse av komplexa objekt. Med de allt större mängderna

data och komplexiteten i data växer efterfrågan på system som hjälper till med dessa

jämförelser. Systemen och andra befintliga verktyg stödjer uttryckligen dessa jämförelser

utöver att en användare behöver titta på varje objekt individuellt. Men jämförelserna ska även

kunna ske oberoende av vad dessa objekt är. Även om det i dagsläget finns en mångfald av

system och tillvägagångssätt så kan förståelsen för jämförande visualisering underlätta

utveckling av andra jämförande visualiseringsverktyg (Gleicher m fl. 2011, s.1).

Medan visualisering traditionellt har fokuserat på verktyg för att undersöka enskilda objekt

har de senaste åren sett ett ökande antal system som är uttryckligen utformade för att hantera

jämförelser mellan komplex data. De erbjuder dock endast begränsad hjälp för att försöka

tillhandahålla jämförande visualisering i större utsträckning men varje scenario verkar kräva

5

en särskild anpassad lösning, dock kan vägledning genom att studera andra applikationer

hjälpa till med designval (Gleicher m fl. 2011, s.1).

Webbapplikationen som ska utformas i denna studie ska vara tillgänglig i produktion för

operatörerna, men även för chefer som inte arbetar i produktion men vill ta del av

informationen webbapplikationen tillhandahåller. Dessa är viktiga aspekter som bör beaktas

noggrant då informationen webbapplikationen ska vara lika användarvänlig för alla parter.

Alla som använder applikationen ska kunna förstå vad som förmedlas och hur det kan

användas.

Som tidigare nämnt har Fresenius Kabi i dagsläget fyra olika flöden som genomgår

steriliseringen av de intravenösa näringslösningarna. Vår ambition är att visualisera samtliga

flöden på en startsida för att sedan kunna navigera till andra sidor för ytterligare information

om respektive flöde.

6

3. Teori

I detta kapitel kommer det teoretiska ramverket som används i uppsatsen att presenteras,

vilket är Nielsens användbarhetsprinciper för designutveckling, Rick Borups teori och

Stephen Fews riktlinjer för design.

Visualisering är ett tillvägagångssätt för att utforska data och presentera resultat. Edward

Tufte har gett ett stort bidrag till den kunskap och grund som finns idag för visualisering.

Denna kunskap uttrycks emellertid i principer och riktlinjer snarare än formella teorier (Chen

m.fl, 2008, s.4).

3.1 Visualisering av data Visualisering förekommer både vid visualisering av information och av data. Visualisering av

information fokuserar på användandet av visualiseringsmetoder som underlättar för

människan att förstå och analysera data. Det sker en omvandling av abstrakt data till

interaktiva visualiserade gränssnitt. Detta förstärker den visuella kognitionen hos människan

som gör det möjligt för användaren att ta in information om strukturer, relationer och hur

olika data är beroende av varandra. Visualisering av data handlar om att presentera data

systematiskt med tillhörande variabler och attribut. Detta underlättar för användaren att förstå

och tolka data och även dess relationer. Det är av vikt att presentationen av data är visuellt

tilltalande, beskrivande och framställd på ett effektivt sätt som gör det enkelt för användaren

att ta in och tolka data (Khan, 2011, s.1, 3, 7).

Visualisering av information och visualisering av data står varandra nära och har många

likheter. Det existerar dock ett flertal tekniker för respektive typ av visualisering för att

framställa information och data. Visualisering av information använder sig bland annat av

visualiseringsteknikerna ”Parallel Coordinates” och “Tree Map” som används för att visa ett

flertal individuella element genom flera dimensioner respektive hierarkisk presentation av

information och data. Vid visualisering av data är tabeller en vanligt förekommande teknik

som används och som har haft stor betydelse inom forskning och dataanalys. Tabeller är

organiserade med rader och kolumner som betonar relationer i ett strukturerat format. Andra

tekniker som används vid visualisering av data är olika typer av grafer. Bland annat kan data

presenteras i form av pie charts, bar charts, histogram och scatter plots. Syftet med

7

användning av grafer för att visualisera data kan grundas i att antingen presentera eller att

utforska data. När data presenteras är det av vikt att välja vilken information som ska

framföras och hur den ska visualiseras för att tilltala användarna. Hur information uppfattas

och förstås av användaren är även något som bör tas hänsyn till för att informationen ska

uppfattas på ett önskvärt sätt. Vid visualisering av data med hjälp av grafer är det av stor vikt

att välja en typ av graf som är anpassad till de data som presenteras, annars finns det en risk

att informationen är svår att tolka och analysera. Exempelvis bör inte ovarierad kontinuerlig

data visualiseras i en pie chart precis som varierad kategoriserad data inte bör visualiseras i

form av boxplot (Khan, 2011, ss.7-8, 3-6).

Det är skillnad mellan visuell framställning i form av grafer för presentation och grafer för

utforskande vilket ligger i både form och praktik. Grafer som framställs för presentation

(presentationsgrafik) är generellt statisk, där en enda graf ritas för att sammanfatta den

information som ska presenteras. Dessa bilder bör vara av hög kvalitet och inkludera

fullständiga definitioner och förklaringar av de visade variablerna och av grafens form.

Presentationsgrafik är som bevis på matematiska teorier då de inte kan ge några tips om hur

ett resultat uppnåddes, men erbjuder övertygande stöd för sin slutsats. Utforskande grafer

används däremot för att leta efter resultat och de bör vara snabba och informativa snarare än

långsamma och exakta. En presentationsgrafik kan dras för visning av potentiellt tusentals

läsare medan tusentals utforskande grafik kan dras för att stödja dataundersökningarna av en

enda analys (Chen m.fl, 2008, ss. 4-5)

En av de mest kraftfulla teknikerna för visualisering innebär visning av flera grafer samtidigt,

vilka antingen har olika delar av data som tas från ett större dataset eller olika visuella

framställningar av ett gemensamt dataset. Edward Tufte kan ses som en grundare för

visualisering med hjälp av en bildskärm som använder en serie med grafer ordnade

tillsammans så att de kan jämföras. Varje graf representerar en annan delmängd av data som

hör till ett fullständigt dataset som kan ses tillsammans och jämföras. Ett annat

tillvägagångssätt vid visning av flera grafer samtidigt använder var och en för att undersöka

en annan aspekt av ett gemensamt dataset. Exempelvis kan flera grafer, av olika slag visas

samtidigt för att undersöka flera aspekter av ett dataset samtidigt som vi kan upptäcka

anslutningar i de data som kanske inte skulle upptäckas om graferna hade betraktats separat.

Visuellt framställande av data på detta sätt kan snabbt få fram analytiska insikter som blir

tillgängliga för våra ögon (Borup, 2015, ss. 9, 11-12).

8

3.1.1 Stacked Bars

Stacked Bars är staplade stapeldiagram som är rätt val när man behöver visa flera instanser av

en helhet och dess delar men med vikt på helheten (Few, 2006, s.117). Andy Kirk beskriver

även Stacked Bars som självförklarande och att dessa är lämpliga vid visualisering av data

som syftar till att visa delar av en helhet, precis som Few betonar. Kirk menar att det

speciellt är färger och placering av de olika delarna av helheten som gör det tydligt för

användaren att läsa av Stacked Bars. Han påpekar dock att det kan finnas en viss problematik

med Stacked Bars, då det inte finns någon gemensam startlinje för det staplade datat förutom

det första datat som visas (Kirk, 2012, s.161).

3.1.2 Pie Chart

Pie Chart diagram kan ses som den typ av diagram som kommunicerar mindre effektivt än

andra medel. Pie Chart diagram är utformade för att visa helhets information men

stapeldiagram har visat sig vara mer effektiv för denna typ av kommunikation. Visualisering

av data i form av en Pie Chart menar Borup (2015) är ett lämpligt sätt att presentera delar av

en helhet, vilket styrker argumentet att använda sig av denna typ av visualisering för denna

typ av data.

3.1.3 Placering av grafer

När man vet vilka objekt som hör samman i förhållande till vad som ska visualiseras och

visas är ett lämpligt sätt att placera dessa nära varandra men ändå tydligt avgränsas från de

andra omgivande grupperna. Att använda position för att gruppera objekt visuellt är en

strategi som uppfattas snabbt (Few, 2006, s.139). Dong m fl. (2010) menar även att visuellt

framställande av grafer samt bilder av annan form gör det möjligt att visuellt framställa en

översikt av data men även på detaljnivå. Även Borup (2015) menar rätt placering av grafer

kan få användaren att uppfatta det som visualiseras snabbare.

Few (2006) betonar även att för mycket information eller för många subtila graderingar kan

distrahera användaren från dennes primära eller omedelbara mål. Rick Borup (2015) lyfter

även fram vikten av att undvika överflödig information och icke nödvändiga element för att

minimera risken att användaren förlorar fokus från de uppgifter användaren är ämnad att

utföra. Då denna studie ämnar att visualisera fyra olika flöden med dess

9

steriliseringsprocesser är det viktigt att placering av graferna och grupperingen av dessa blir

tydlig samt att inte informationen blir överflödig.

3.1.4 Visuella skillnader

Olikheter i utseende uppmanar oss alltid att, medvetet eller omedvetet att söka efter

betydelsen av dessa skillnader. Allt som betyder samma sak eller fungerar på samma sätt

borde se ut på samma sätt som det förekommer. Även något så subtilt som mörka axelinjer på

en graf och linjer med ljusa axlar på en annan kommer att leda användaren till att denna

skillnad som faktiskt är godtycklig är signifikant (Few, 2006). Bilder eller grafer har visat sig

vara mer effektiva för att undvika misstolkningar då de uppfattas snabbare än en text eller

siffror (Borup, 2015, s.38).

Det är viktigt att upprätthålla konsistens, inte bara visuellt i utseendet av hela

webbapplikationen men också i valet av hur data visualiseras i form av grafer etc. Om två

delar av data involverar samma typ av kvantitativa förhållanden (som en tidsserie, vilket i

denna studie är historik över ett dygn tillbaka) som är avsedda för liknande användning (i

detta fall möjliggörandet av historik ett dygn tillbaka) ska du använda samma typ av

bildskärm för båda (exempelvis stapeldiagram vilket är det som använts för denna studie).

Variation bör inte ske i detta fall för objektets skull då de är av samma sort men olika flöden.

Alternativet som väljs ska alltid vara det som bäst kommunicerar data och dess meddelande,

även om det betyder att webbapplikationen består av samma typ av graf överallt (Few, 2006,

s.143).

3.1.5 Val av färg Färg är potentiellt ett av de mest effektiva sätten att visa data. I praktiken är det också en av

de svåraste att få rätt. En bra kontroll för färgscheman är Colorbrewer av Cynthia Brewer.

Colorbrewer kan ge förslag på färgscheman som både blandar sig väl och skiljer mellan olika

kategorier. Det finns många faktorer i valet av färg som måste tas hänsyn till. Bland annat att

vissa människor är färgblinda, färger kan ha särskilda föreningar (exempelvis, röda för fara

eller för förluster) och färg kan vara en fråga om personlig smak (Chen m.fl, 2008, s.69).

Few (2006) menar att ett problem som kan förekomma är fel användning av färg när

utseendet på webbapplikationen bestäms. Färger som är ljusa eller mörka kräver mer

10

uppmärksamhet, då många ljusa eller mörka färger snabbt kan bli visuellt utmattande. Vid val

av färg bör följande riktlinjer has i åtanke:

● Ljusa färger bör användas minimalt, helst endast för att markera data som kräver

uppmärksamhet.

● Förutom innehåll som kräver uppmärksamhet, använd mindre mättade färger som de

som är övervägande i naturen.

● En diskret blek bakgrundsfärg bör användas istället för en helt vit för att ge en mer

lugnande, mindre starkt kontrasterande yta på vilken data visuellt kan förekomma.

För att fånga användarens uppmärksamhet på viktig information och data, bör det på något

sätt stå ut från mängden, vilket kan ske exempelvis genom färg (Borup, 2015, s.5).

3.1.6 Navigering Placering av grafer och text på samma sida eller på motstående sidor är värdefull av praktiska

skäl. Det är opraktiskt att behöva navigera mellan sidor fram och tillbaka om grafer och text

har ett samband men är placerade på olika sidor. Det är dock inte alltid möjligt att undvika

detta (Chen m.fl, 2008, s 68). Webbapplikationer som visualiserar någon form av data bör i

första hand visas på en enda skärm utan att användaren behöver scrolla eller navigera för att

visa olika typer av data som hör ihop. Studier som genomförts kring visualisering av data har

visat att när data och information visas tillsammans där användaren får en hel överblick har

en bättre effekt än när endast delar av informationen visas på samma gång. Människan kan

endast behålla en viss mängd information samtidigt i korttidsminnet, vilket innebär att det

finns risk att en del information förloras om användaren måste scrolla för att få ta del av all

information. Det är dock oftast en fördel att låta användaren navigera för att få mer specifik

eller detaljerad information om en viss data, detta gör det lättare för användaren att ta in

informationen då den ligger i fokus till skillnad från en överblick med all data. Det är alltså

av stor vikt att göra rätt val vid placering och navigering av information och data för att få

bästa effekt (Few, 2006, s.39-40). Krug (2006) menar även att annan viktig information bör

vara max två klick bort, för att enkelt vara tillgänglig för användaren.

3.2 Användbarhet Vid utformning av en webbapplikation finns det flera aspekter man ska ta hänsyn till för att få

11

en så användbar webbapplikation som möjligt. Steve Krug (2006) menar bland annat att

viktig information endast ska vara max två klick bort, att informationen på

webbapplikationen ska vara på användarens språk men även att man ska vara så konsekvent

som möjligt. Webbapplikationen bör vara självklar i det den ska förmedla i den mån att den

förklarar sig själv. Användaren bör kunna förstå vad det är och hur det ska användas utan att

behöva lägga någon tid på att försöka förstå vad syftet med webbapplikationen är. Allt

möjligt på en webbapplikation kan få oss att stanna upp och tänka i onödig omfattning istället

för det som egentligen ska fånga vårt intresse. Genom att öka tydligheten vid utformningen

av en webbapplikations gränssnitt kan detta förhindras. Om detta inte görs kan varje tanke vi

lägger på att försöka förstå webbapplikationen läggas på vår kognitiva arbetsbelastning som

distraherar användaren från det den skulle utföra (Krug, 2006). Användarvänligheten som

Krug beskriver anser vi vara en viktig grund till val av visualiseringen för en

webbapplikation. En webbapplikation som ska användas för att tolka data bör vara användbar

för att kunna vara ett effektivt verktyg i den miljö som den avser att vara, vilket har lett till att

dessa aspekter är en viktig del för denna studie.

Användbarheten av en webbapplikation är en egenskap med stor betydelse för hur enkel

applikationen är att använda för användarna. Nielsen menar att en webbapplikation som är

svår att använda eller inte tydligt förmedlar vilka funktioner som existerar riskerar att

användare lämnar applikationen. Företag som använder sig av interna webbapplikationer som

används av de anställda riskerar att produktiviteten och effektiviteten av arbetet minskar om

webbapplikationerna är svåranvända eftersom inlärningen blir längre och användandet mer

tidskrävande. För att undvika användbarhetsproblem hos användarna har Nielsen (2012) tagit

fram fem användbarhetsprinciper som bör tas hänsyn till vid designprocessen.

● Learnability innebär hur enkelt det är för användare att utföra en enkel uppgift första

gången de använder sig av systemet.

● Efficiency syftar till hur snabbt användare kan utföra uppgifter när de väl har lärt sig

designen.

● Memorability beskriver hur lätt det är för en användare att komma ihåg hur systemet

fungerar efter en period utan att ha använt det.

● Errors syftar till hur många fel användare gör, hur stora dessa fel är och hur enkelt det

är att rätta till dessa.

● Satisfaction innebär hur subjektivt nöjda användarna är vid användning av designen.

12

Dessa fem principer används ofta som underlag vid testning av design och webbapplikationer

tillsammans med begreppet utility som beskriver nyttan med systemet, det vill säga om det

innehåller de funktioner som behövs (Nielsen, 2012).

I denna studie är användbarhet en viktig del då visualisering sker för att användarna ska

kunna använda en webbapplikation på ett enkelt sätt och effektivt kunna tolka data. Detta

leder till att användbarhet är viktig faktor att ha i åtanke vid visualisering.

Webbapplikationen som utvecklas i denna studie ska vara tillgänglig i produktion för

operatörerna som kan använda den dagligen, men även för chefer som inte arbetar i

produktion men vill ta del av informationen webbapplikationen tillhandahåller.

Webbapplikationen ska därför visuellt kunna ge en snabb överblick för beslutsfattare vilket

betyder att kontextuell information behöver sorteras och placeras på ett sätt som klargör

betydelsen får mål men även historik över hur det har fungerat. Dessa är viktiga aspekter som

bör beaktas noggrant då informationen webbapplikationen ska vara lika användbar för alla

parter.

13

4. Metod

I detta kapitel kommer val av metod och metodologiska överväganden att presenteras. Det

kommer redogöras för hur utvecklingsprocessen av webbapplikationen genomförts i

förhållande till den metod som valts.

4.1 Formulering av forskningsstrategi Denna uppsats och utvecklingsprocess kommer att använda Design Science som metod.

Forskningsstrategin Design science är bäst lämpad till detta arbete då vi ska utveckla en

webbapplikation med fokus på visualisering och resultatet kommer bli praktiskt användbart.

Teorier om webbutveckling behandlar ofta praktisk kunskap vilket gör det passade för oss att

kunna dokumentera det inom ramen för Design Science.

Design Science syftar till att skapa och utvärdera artefakter inom IT som lösningar på

organisatoriska problem som har identifierats. Framtagandet av tekniska möjligheter och

produkter genom innovation görs för att effektivt kunna analysera, designa och använda

informationssystem. Paradigmet Design Science är i grunden ett problemlösande paradigm

och har sitt ursprung i teknik och vetenskap som berör det artificiella (Hevner, 2004). Briony

Oates (2006) benämner Design Science som Design and Creation Research i sin bok

Researching Information Systems and Computing. Han menar att det existerar ett antal

etablerade principer som bör ligga till grund för de olika design- och utvecklingsmomenten

vid systemutveckling. Dessa principer använder sig av en iterativ utvecklingsprocess

innehållande fem steg, vilka är medvetenhet, förslag, utveckling, utvärdering och slutsats.

Medvetenhet menar Oates är identifieringen och formuleringen av ett problem.

Igenkännandet av ett problem kan växa fram från bland annat nya forskningsresultat,

nyutvecklad teknologi eller användare som uttrycker behovet av något (Oates, 2006). I

utvecklingsprocessen av webbapplikationen som beskrivs i denna uppsats har användare på

Fresenius Kabis blivit medvetna om problemet genom att ineffektivitet uppstår i

produktionen. Detta på grund av den mänskliga faktorn samt avsaknad av visuell information

och därav velat automatisera produktionen för ökad effektivitet. Förslag som är det andra

steget i processen innebär att komma med idéer och förslag på hur problemet kan lösas

(Oates, 2006). Det förslag som lades fram för att lösa problemet som tidigare identifierats var

14

en webbapplikation som genom visualisering skulle visa tider och data för de olika

processtegen i produktionen för att kunna identifiera faktorer som var bidragande till

ineffektivitet. Fasen för utveckling syftar på implementationen av det förslag som tagits fram

för att lösa problemet. Beroende på vilken artefakt som ska utvecklas ser denna fas olika ut

gällande vilka lösningar och verktyg som används. Steget för utvärdering innebär att göra en

utvärdering av den utvecklade artefakten. Dels avseende dess utseende och funktionalitet men

även hur väl den överensstämmer med det resultat som förväntades. Det sista steget i

processen är slutsats och som syftar till att sammanfatta resultatet av designprocessen. Dels

identifieras den kunskap som samlats in och dels sammanfattas de delar som inte har fått det

tänkta resultatet för eventuell vidare utveckling eller forskning (Oates, 2006).

4.2 Datainsamlingsmetod

Litteratur och egna observationer kommer framförallt att användas för insamling av

information och kunskap till denna studie. För att behandla syftet och besvara

frågeställningarna i denna studie kommer en webbapplikation att utformas med fokus på

visualisering av data. Visualiseringen i webbapplikationen kommer att grunda sig i kunskap

från teorier och riktlinjer samt genomförda observationer i den miljö webbapplikationen är

ämnad att användas i.

Visualisering kan vara ett värdefullt verktyg för att utföra analyser och fatta beslut. Hur

användare interagerar med och uppfattar ett verktyg där data framställs visuellt har stor

betydelse för hur användbar en webbapplikation eller ett system är. Användare och mänskliga

faktorer bör därav involveras vid design och utvärdering av visualiseringsverktyg och

webbapplikationer med visualiserad data (Tory & Möller, 2004). Därav kommer utvärdering

av webbapplikationens resultat att genomföras genom expertutvärderingar för att få feedback

på webbapplikationen och uppfattningen om dess data som visualiserats för att sedan vidare

analyseras.

Datainsamlingen för webbapplikationen som används som metod i denna studie kommer

först att ske genom insamling av krav i form av aktivt deltagande observationer. Detta för att

få en tydligare bild av den miljö där webbapplikationen kommer användas och för att samla

in krav gällande vilka funktioner och visualiseringar som önskas av användarna. Därefter

kommer det att samlas in kunskap och information om processen som ska visualiseras samt

15

om de data och det dataset som ska visualiseras i webbapplikationen. Efter att en

kravspecifikation är sammanställd och det finns en klar bild av hur processen och datasetet

ser ut kommer en fördjupning av teori och riktlinjer gällande visualisering och användbarhet

att göras. Detta i syfte att utgå från tidigare forskning och teorier vid val av

visualiseringsmetoder och för att utforma webbapplikationen på ett användbart sätt. Val av

hur data ska visualiseras i webbapplikationen kommer att grunda sig dels i teori och riktlinjer,

men även på de krav och synpunkter som har samlats in under observationerna och vid

diskussion med användarna om vilka funktioner webbapplikationen ska innehålla.

Tillvägagångssättet som används för att välja hur data ska visualiseras kommer utgå från teori

och välja anpassade grafer och visualiseringsmetoder, för att sedan stämma av med

användare hur de uppfattar webbapplikationen och dess innehållande visualiseringar. För att

utvärdera webbapplikationen och de visualiseringar av data som gjorts kommer

expertutvärderingar att genomföras för att mäta användbarheten. Resultatet från dessa

utvärderingar kommer sedan i sin tur att analyseras gentemot det teoretiska ramverket som

presenterats i studien.

4.3 Avgränsningar

Webbapplikationen som ska utvecklas behöver en databas som bör konstrueras, vi har dock

valt att i denna studie fokusera på visualiseringen då detta är uppsatsens syfte. Detta för att

inte få en alltför spridd undersökning och istället fokusera på att få mer djupgående kunskap

om visualisering och presentation av data, snarare än uppbyggnad och koppling till databas.

4.4 Kravinsamling

Då operatörerna arbetar på olika skiftlag är det svårt att få till en gemensam tid att eventuellt

ha en fokusgrupp eller liknande som skulle kunna vara lämpligt, istället kommer

kravinsamlingen ske i form av aktivt deltagande observationer där vi på plats får se vad som

behöver göras samtidigt som operatörerna kan ställa sina krav på webbapplikationen.

Det människor i allmänhet säger att de gör behöver inte faktiskt vara detsamma som de

faktiskt gör. Genom observationer kan forskaren undersöka olika handlingar eller utföranden

utan att förlita sig på de inblandades berättelser. Detta kan vara en fördel då

intervjusituationer kan göra så att den som blir intervjuad berättar utifrån ett visst perspektiv

(Ekström, 2010).

16

Observationer kan utspela sig i två olika forskningssituationer, vilket är i en naturlig situation

eller i en experimentellt konstruerad situation. Den typen av observation som använts som

underlag till denna studie är observation i naturlig situation vilket innebär att observationen

äger rum i den miljö där de handlingar som studeras befinner sig i vanliga fall. Naturlig

situation brukar vanligtvis användas med viss reservation då forskaren kan påverka

situationen genom att vara där vilket i sin tur kan leda till att deltagarna agerar annorlunda.

Då webbapplikationen inte finns i dagsläget bedömer vi att denna risk är liten då vi inte ska

observera deras arbete i sig utan vad som behövs som komplement till de befintliga systemen

(Ekström, 2010).

4.5 Genomförande av expertutvärdering

Två expertutvärderingar kommer att utföras med hjälp av utbildningsansvarig och

produktionschef för att kunna utvärdera den färdiga webbapplikationen. Detta för att kunna

fastställa att syfte och krav på webbapplikationen uppfyllts. Genomförandet av

expertutvärderingarna gör det möjligt för utvärderarna att få djupare insikt i

webbapplikationen, dess uppbyggnad samt eventuella brister eller problem som finns och om

dessa behöver åtgärdas. Eftersom studien ämnar att fokusera på visualiseringsaspekten anser

vi att expertutvärderingarna kan resultera i synpunkter kring hur visualiseringen bidrar till

användbarheten samt andra synpunkter kring visualiseringen. En viktig faktor i hur

användbar en webbapplikation är, är hur användarna uppfattar den, vilket gör att

expertutvärderingar kan vara ett lämpligt sätt att få tillgång till användarnas uppfattning.

Resultatet från expertutvärderingarna kommer dels att användas för att få information om i

vilken grad användare uppfattar webbapplikationen som användbar, men även för att göra

ytterligare förbättringar och lägga fram förslag på vidare förbättringar för att närma sig svaret

på hur en webbapplikation kan utformas på ett användbart sätt för att effektivt kunna tolka

data.

Expertutvärderingarna kommer att ske utifrån en kombination av Steve Krugs (2006)

riktlinjer och Jakob Nielsens (1995) gradering vid expertutvärdering. Detta för att kunna

identifiera möjliga problem samt lösningar på dessa. Se Bilaga 1 för frågor till

expertutvärderingen.

17

Steve Krugs (2006) riktlinjer:

● Don ́t make me think - En användare ska inte behöva tänka för att använda

webbplatsen.

● We don ́t read pages, we scan them - Användare läser inte all information som finns

på webbplatsen utan scannar snarare snabbt av efter den information de är ute efter.

● Omit needless words - Krug menar att texter behöver kortas ner så mycket som

möjligt. Detta då det annars är lätt att tappa bort sig i för mycket information i form av text.

Jakob Nielsens (1995) gradering:

● Kosmetiskt problem: behöver inte åtgärdas om tid ej finns

● Användbarhetsproblem: problem som bör åtgärdas om tid/resurser finns

● Större användbarhetsproblem: stort problem som bör åtgärdas omgående

● Ej användbar: kan inte användas innan problemet är löst.

För att möjliggöra för en så bred expertutvärdering som möjligt menar Nielsen (1995) att det

bör finnas flera utvärderare då fler problem kan upptäckas. Med tanke på begränsningar som

har funnits, bör man ha i åtanke att fler problem skulle kunna upptäckas om fler

expertutvärderingar utförs. Under expertutvärderingen skrevs alla synpunkter ned för

att därefter kunna analysera resultaten för att kunna generera ett nytt designförslag samt

åtgärda möjliga problem men även få fram ytterligare förslag till förbättringar.

18

5. Krav på webbapplikation Detta kapitel redogör för den empiri som samlats in och ligger till grund för utveckling av

webbapplikationen för att besvara studiens frågeställning. Dataset som visualiserats samt

kravinsamling tas upp i detta kapitel.

5.1 Dataset Ett dataset avser en fil som innehåller en eller flera register av dataset. Registret är den

grundläggande informationsenheten som används av ett program som körs. Ett dataset är en

namngiven grupp av register. Ett dataset kan innehålla information som bland annat journaler

eller personuppgifter som ska användas av ett program som körs på systemet. Att arbeta med

dataset kräver en förståelse för den fysiska och logiska strukturen hos ett dataset samt hur

åtkomst till information i dataset fungerar (IBM, 2010).

För utveckling av webbapplikationen i denna studie har data och dataset bestått av tider

mellan olika processteg i produktion som avser steriliseringsprocessen, autoklaven som kör

respektive steriliseringsprocess samt enheten som representerar vilket flöde som kör

produktionen. För utveckling av studiens webbapplikation har registerformaten varit

utformade för tider för varje processteg, vilken enhet som körts samt vilken autoklav som

använts. Dessa olika data är de som kommer att visualiseras i webbapplikationen för att

användare ska kunna analysera data innehållande processtider för att kunna öka effektiviteten

i produktion.

5.2 Kravinsamling Insamling av krav till webbapplikationen gjordes genom deltagande observationer.

Observationerna genomfördes på plats i produktionsavdelningen för sterilisering på Fresenius

Kabi under ett tillfälle på två timmar. Då observationerna var aktivt deltagande var de

anställda medvetna om att vi observerade. För att få en bild av hur visualiseringen skulle

utformas observerade vi hur arbetet såg ut i produktionen för att få information om vilken

data som är av betydelse. Detta innebar observation av alla steg inom steriliseringsprocessen,

19

däribland vilka moment de anställda genomförde samt hur olika maskiner användes i

processen. Vi granskade även andra webbapplikationer och visuella grafer som används i

produktionen för att få kunskap om vad användarna är vana vid och för att göra

webbapplikationen anpassad till arbetsmiljön. Detta gjorde vi genom att granska de skärmar i

produktionen som bestod av visuellt presenterad data samt genom diskussion och genomgång

med utbildningsansvarig på plats. Det visade sig att majoriteten av de andra applikationerna

som visade data visuellt bestod av översiktlig information som inte kräver navigation, då

detta är vad användarna har behov av. Efter deltagande observationer av befintliga

applikationer i produktionen samt förståelse för steriliseringsprocessen och dess delprocesser

framkom följande krav:

● Översiktlig information för alla flöden ska vara tillgänglig på startsidan

● Pågående körningar för respektive flöde ska visuellt synas

● Ett dygn tillbaka för respektive flöde ska vara visuellt synbart

20

6. Design av webbapplikation I detta kapitel kommer designvalens koppling till teori och krav framställas.

Det underlag vi samlat ihop teoretiskt och genom kravinsamlingen har legat till grund för

designvalen av webbapplikationen. Då vi vill mäta användbarheten av visualiseringen har det

varit av stor vikt att kunna kombinera teori med kraven från beställarna.

6.1 Visuella val I denna studie och den webbapplikation som utvecklats är syftet att visualisera data och därav

har tekniker för att framställa data använts, istället för tekniker för att visualisera information.

I teoriavsnittet presenteras tekniker för att visualisera data i form av tabeller och olika typer

grafer. Det som framkommit som mest fördelaktigt har varit att använda Stacked Bars då en

del av kraven var översikt på helhet men även för respektive del av helheten vilket Stacked

Bars kan visa. I denna studie blir användning av Stacked Bars användbart då vi behöver visa

helheten på steriliseringsprocessen för respektive flöde men även kunna visa delprocesserna i

dessa (Se Figur 1). Vi anser att problematiken som Kirk nämner med Stacked Bars inte är

något som överväger fördelarna med Stacked Bars och att detta problem kan lösas genom en

tooltip som visar värdet för respektive data genom att hålla musen över grafen. Då det är

helheten som är av störst betydelse är detta inte heller något större problem.

Figur 1. Stacked Bars. Figuren visar en graf med Stacked Bars. För att förtydliga visas flera olika data staplade

på varandra i en stapel, de data som visualiseras i en stapel representerar de olika delprocesserna i

steriliseringsprocessen. Flera staplar är placerade bredvid varandra för att visa historik för ett dygn tillbaka.

X-axeln visar vilken autoklav steriliseringsprocessen körs i och y-axeln visar antal minuter.

Det som även framkom vara ett fördelaktigt alternativ att använda var Pie Charts. I denna

studie används Pie Chart för att visa helheten för hur många minuter som gått över mål för

21

respektive delprocess i steriliseringsprocessen (se Figur 2). Visualisering av data i form av en

Pie Chart menar Borup (2015) är ett lämpligt sätt att presentera delar av en helhet, vilket

styrker argumentet att använda sig av denna typ av visualisering för denna typ av data. Val av

användandet kan även motiveras i upprätthållandet av konsistens då Stacked Bars redan

används för att visualisera steriliseringsprocessen och dess olika delprocesser kan

användandet av Pie Chart underlätta för användaren då det inte är samma information som

visualiseras utan endast de tider som gått över mål (Few, 2006).

Figur 2. Pie Chart. Figuren visar hur en Pie Chart visualiseras, där varje färg representerar olika data. I detta

fall visas totalt hur många minuter de olika stegen i steriliseringsprocessen överskrider mål under 24 timmar.

Designval som gjorts inom navigering och positionering har gjorts med teorier framställda av

Chen m. fl (2008), Few (2006), Dong m.fl (2010) och Borup (2015). Då vi både visuellt har

framställt en sammanställning av översiktlig data på startsidan men även detaljinformation

om data på respektive flödessida kan dessa val styrkas av presenterade teorier. Teorin pekar

på att det är av vikt att placera data som hör samman nära varandra men att de samtidigt

tydligt avgränsas från andra grupper av data. Detta har legat till grund för hur startsidan i

webbapplikationen har utformats, där de olika flödena är tydligt avgränsade från varandra

men att de data som hör till samma flöde är grupperade nära varandra för att användaren

snabbt ska förstå hur olika data hör samman. Detta är även en grund till att respektive flöde

har en egen sida som presenterar detaljerad data, alltså för att användaren enkelt ska förstå att

den data som visas tillhör ett flöde.

Teori och riktlinjer som presenterats i teoriavsnittet i denna uppsats menar även att det är

viktigt att upprätthålla konsistens. Detta innebär att samma typ av data som presenteras ska

visualiseras med samma typ av graf eller annan teknik. Därav har information i

webbapplikationen som representerar samma typ av data men för olika flöden visualiserats

med samma typ av graf. Exempelvis har data som visar processtider för de olika processtegen

22

de föregående 24 timmarna visualiserats genom stacked bars för alla flöden. Varje sida för

respektive flöde har även utformats på samma sätt och datat som visualiserats har

presenterats med samma typ av grafer. Detta för att undvika förvirring hos användaren och

underlätta för användaren att enkelt förstå vilka grafer som representerar vad.

Few (2006) menar på att för mycket information kan distrahera användaren från dennes

primära eller omedelbara mål, och Borup (2015) talar om vikten av att undvika överflödig

information. Även denna teori har legat till grund för webbapplikationens designval, då vi

endast har visualiserat den data som är värdefull för användarna och undvikit att använda

överflödig text för att presentera data och istället komprimerat data i sammanställda grafer.

Detta underlättar för användaren att snabbt uppfatta och tolka data.

Färgvalen har motiverats av Few (2006) riktlinjer. För att fånga användarens uppmärksamhet

på viktig information och data, bör det på något sätt stå ut från mängden, vilket kan ske

exempelvis genom färg (Borup, 2015). Därav har vi under utvecklingen av

webbapplikationen valt att använda en ljusare bakgrund och istället applicera starkare och

tydligare färger på graferna som är avsedda att fånga användarens uppmärksamhet.

6.2 Användbarhet Användarvänligheten som Krug beskriver anser vi vara en viktig grund till val av

visualiseringen för en webbapplikation. Hans riktlinjer angående att viktig information ska

vara högst två klick bort är något som vi haft i åtanke i utvecklingen av webbapplikationen.

En webbapplikation som ska användas för att tolka data bör vara användbar för att kunna

vara ett effektivt verktyg i den miljö som den avser att vara, vilket har lett till att hans

aspekter är en viktig del för denna studie. Då användbarheten av webbapplikationen har stor

betydelse för hur enkelt det är att använda webbapplikationen för användarna kommer detta

mätas med hjälp av expertutvärderingarna men i själva designprocessen har vi använt oss av

Nielsens användbarhetsprinciper för att undvika användbarhetsproblem hos användarna.

23

7. Beskrivning av webbapplikation I detta kapitel redogörs beskrivning av webbapplikationen och hur olika data har

visualiserats. Webbapplikationens utformning och dess uppbyggnad kommer även att

presenteras.

7.1 Utvecklingsprocess

Insamling av krav på webbapplikationen skedde i form av deltagande observation vid varje

skiftlag på plats i produktion hos läkemedelstillverkaren Fresenius Kabi. Detta möjliggjorde

större förståelse och bättre insikt i vart webbapplikationen kommer att användas samt vad

som behöver tydliggöras visuellt för användarna. Då data för varje delprocess i

steriliseringsprocessen fanns tillgänglig i en databas var syftet med studien att på ett

användbart sätt visualisera detta. Det framkom att det som var aktuellt är att visuellt kunna se

steriliseringsprocessen som i realtid körs men även kunna se historik för ett dygn tillbaka. Då

det finns fyra flöden för de intravenösa näringslösningarna (FMCB1, FMCB2, FFX4,

FMCB5), bör alla dessa vara det första man ser i webbapplikationen (se Figur 3).

Figur 3. Startsida. Figuren visar hur startsidan visualiserats i den utvecklade webbapplikationen. De fyra

indelade partierna representerar de fyra olika flödena som genomgår steriliseringsprocessen, vilket ger en

24

överblick för användaren över alla flöden samt deras steriliseringsprocess. Den information som ges för varje

flöde är: vilken autoklav som använts i steriliseringsprocessen, information för körning ett dygn tillbaka samt

antal och minuter för varje delprocess som överskridit tiden som är satt som mål.

På webbapplikationens startsida visas de fyra flödena FMCB1, FMCB2, FFX4 och FMCB5.

Dessa är uppdelade i fyra olika sektioner, där varje del har information om respektives flödes

steriliseringsprocesser ett dygn tillbaka i form av Bar Charts. Det som visas i respektive

sektion är även information om hur många minuter varje delprocess har gått över det målet

som är satt, vilket visualiserats i form av en Pie Chart för respektive flöde. Det visas även hur

många i antal som överskridit målet för varje delprocess för respektive flöde, detta

visualiseras dock i textform för att göra det enklare för användaren att urskilja olika typer av

data.

För att få mer detaljerad information om de olika flödena (FMCB1, FMCB2, FFX4 och

FMCB5) och dess data är webbapplikationen utformad så att användaren kan navigera vidare

till ytterligare sidor för respektive flöde. De sidor som visar data för respektive flöde har

utformats med vertikala Stacked Bars för varje löp i steriliseringsprocessen de senaste 24

timmarna. Under denna data är en vertikal stapel placerad för att visa vad tidsmålet är för

hela steriliseringsprocessen samt för respektive steg. De pågående körningarna visas under

målet i form av vertikala Stacked Bars, utformade på samma sätt som målstapeln. När de

pågående körningarna är färdiga fylls dessa på i den översta grafen som visar körningar för

de senaste 24 timmarna (se Figur 4-7).

25

Figur 4. Flödesida FMCB1. Figuren visar flödessidan samt de pågående steriliseringsprocesserna.

Figur 5. Flöde FMCB2. Figuren visar flödessidan samt de pågående steriliseringsprocesserna.

26

Figur 6. Flödessida FFX4. Figuren visar flödessidan som inte har en pågående steriliseringsprocess.

Figur 7. Flödessida FMCB5. Figuren visar flödessidan och en pågående steriliseringsprocess.

27

Figur 8. FMCB5 från Startsida. Figuren visar en zoomad bild på ett utav flödena från startsidan i

applikationen. Den översta grafen (Stacked Bar) visar processen för flödet de senaste 24 timmarna. Grafen (Pie

Chart) under till vänster visar det totala antalet minuter som de olika processtegen överskridit mål. Till höger

visas antal körningar i steriliseringsprocessen som överskridit mål för respektive flöde.

28

8. Expertutlåtande I detta kapitel redogörs webbapplikationens användbarhet genom expertutvärderingarnas

resultat.

Utvärderingen av webbapplikationen som genomfördes med hjälp av två expertutvärderingar

utgick ifrån de riktlinjer Krug (2006) tar upp samt Nielsens (1995) graderingsskala för

åtgärder vid en utvärdering av gränssnitt.

Vid utförande av den första expertutvärderingen (se Bilaga 2) besvarades frågorna efter dessa

underlag. Resultatet av den första utvärderingen som utgick från Krugs riktlinjer var att den

data som presenteras i form av en Pie Chart och informationen bredvid som anger den totala

tiden och antal delprocesser som överskridit tiden skulle kunna tydliggöras. Detta skulle

kunna åtgärdas med hjälp av rubriker och eventuellt en ytterligare Pie Chart för antal

delprocesser som överskridit mål istället för i form av text, detta för att göra informationen

mer överskådlig och självklar. De Bar Charts som visar flödets olika körningar för ett dygn

tillbaka skulle kunna tydliggöras genom att skriva ut vad x- och y-axel representerar, i detta

fall tid och autoklaver. Vid frågan vad som anses vara överflödig information i

webbapplikationen fick vi resultatet att som tidigare nämnt kan den data som visar antal

delprocesser som överskrider mål visualiseras i form av en Pie Chart istället för i textform.

Underlaget för utvärderingen behandlar även om det finns eventuell överflödig text som kan

kortas ner, i denna fråga fick vi feedback om att texten som anger varje delprocess kan kortas

ner och tydliggöras genom att sätta kortare namn för varje steg, då vissa delar av texten blir

upprepande för varje delprocess är det redan en självklarhet och därmed blir texten

överflödig.

Det framkom även under första expertutvärderingen (se Bilaga 2), som utgår från Jakob

Nielsen (1995) utvärderingsgradering av gränssnitt gällande kosmetiska problem som inte

behöver åtgärdas om tid inte finns, att tiden för mål på varje enskild flödessida skulle kunna

förflyttas från sidan till över målstapeln eller eventuellt kan en funktion läggas till som gör

det möjligt att den flyter på bredvid den aktuella stapeln. Gällande användbarhetsproblem

som bör åtgärdas om resurser/tid finns fanns inget expertutvärderaren kunde anmärka.

Gällande större användbarhetsproblem som bör åtgärdas omgående ansåg expertutvärdering

att storleken på applikationen ska kunna anpassa sig efter master, alltså storleken på skärmen

29

den blir kopplad till. Slutligen gällande om webbapplikationen inte kan användas innan

problemet är åtgärdat, ansåg expertutvärderaren att så länge det fungerar som det gör i

dagsläget när man kopplar det till realtid så finns det inga anmärkningar.

Vid utförande av den första expertutvärderingen (se Bilaga 3) besvarades frågorna som finns

i Bilaga 1. Resultatet av den andra expertutvärderingen som utgick från Krugs riktlinjer var

att det fungerar bra att navigera sig igenom sidan, eventuellt skulle man kunna navigera från

en flödessida till en annan utan att behöva gå genom startsidan. Sidan är självförklarande men

man skulle kunna flytta tooltipen lite som visar tider tydligare när man håller den över en

Stacked Bar. Vid frågan vad som anses vara överflödig information i webbapplikationen fick

vi resultatet att informationen inte är överflödig utan användbar, tydlig samt få klick bort.

Som tidigare nämnt behandlar underlaget för utvärderingen även om det finns eventuell

överflödig text som kan kortas ner, i denna fråga fick vi svaret att ingen text var överflödig.

Det framkom även under andra expertutvärderingen (se Bilaga 3), som utgår från Jakob

Nielsen (1995) heuristiska utvärderingsgradering av gränssnitt gällande kosmetiska problem

som inte behöver åtgärdas om tid inte finns, att man eventuellt ska ha möjlighet till att kunna

ändra tider på startsidan för att kunna komma åt ett visst datum eller starta från en speciell

tidpunkt. Gällande användbarhetsproblem som bör åtgärdas om resurser/tid finns att tiderna

för mål på varje flödessida eventuellt ska gå att ändra då produktionsprocesserna ständigt

förbättras och effektiviseras. Gällande större användbarhetsproblem som bör åtgärdas

omgående fanns ingenting att anmärka för expertutvärderaren. Slutligen gällande om

webbapplikationen inte kan användas innan problemet är åtgärdat, ansåg expertutvärderaren

inte att det fanns något som skulle orsaka detta.

Under de två expertutvärderingar som ägde rum var det ingen av expertutvärderarna som

använde webbapplikationen fel. Då det inte finns en större möjlighet till navigering på

webbapplikationen kan detta vara den bidragande faktorn samt även att all översiktlig

information ges på startsidan och för ytterligare information om enskilt flöde kan man enkelt

genom ett klick navigera in på flödessidan. Då expertutvärderarna inte använde

webbapplikationen fel finns det ingen form av felanvändning läggas till grund för ändringar i

webbapplikationen vilket Nielsen syftar till som Errors. Resultatet av expertutvärderingarna

visade sig även uppfylla Nielsens användbarhetsprincip om Satisfaction, då båda

30

expertutvärderarna ansåg att designen vara tilltalande utan att ha några anmärkningar

gällande färger, form eller annat som berör designens utseende.

31

9. Analys

De visuella valen som har gjorts grundar sig på Few och Nielsens riktlinjer och Borups teori

gällande användbarhet och designval. Även det empiriska underlag som samlats in i form av

en kravinsamling och genomförda expertutvärderingar ligger till grund för de visuella valen.

Det teoretiska underlaget som använts betonar att stor vikt ska läggas på positionering och

därav bör samma typ av objekt vara placerade nära varandra för att tydliggöra att objekten är

grupperade, men ändå avgränsade från de andra grupperade objekten. Borup och Few menar

även att detta gör det lättare för användaren att hitta skillnader och jämföra samma typ av

data för olika flöden om samma typ av data visualiseras i samma typ av graf. Alltså

visualiseras tiden för delprocesserna i steriliseringsprocessen i form av Stacked Bars likadant

för varje flöde då de är samma typ av data som visualiseras. Pie Charts behandlar en annan

typ av data som används för att visualisera minuter över mål för varje delprocess samt antal

som överskridit mål för varje delprocess har skrivits ut i text för att tydliggöra att det är olika

typer av data som visualiserats. Då varje flöde använder sig av samma datatyper visualiseras

dessa på samma sätt men med en tydlig avgränsning mellan flödena. Därav har startsidan på

webbapplikationen visualisering av data för respektive flöde grupperats och tydligt avgränsat

från resterande flöden. Men även olika slags typer av grafer som Stacked Bars samt Pie

Charts har använts då Few och Borup menar att Stacked Bars ska användas när man vill se

instanser av en helhet men att helheten är det viktigaste, vilket varit huvudsyftet med

visualiseringen och detta har därav varit användbart i webbapplikationen. Few menar dock att

Pie Chart kan kommunicera mindre effektivt än andra medel som exempelvis Stacked Bars,

men motiveringen till användning av Pie Charts från vår sida kan kopplas till Fews

antaganden gällande att objekt som visar samma sak ska visualiseras på samma sätt vilket

även Borup instämmer till. Då data som visualiseras med hjälp av Pie Charts är antal minuter

som gått över mål för respektive delprocess i steriliseringsprocessen anser vi att det var

lämpligare att skilja på dessa istället för att använda sig av samma typ av visualiseringen av

objekten, då de inte ämnar att visualisera samma typ av data.

Val av färger till bakgrund samt de olika diagrammen har utformats för att vara så konsistenta

samt uppfattas så snabbt som möjligt av användarna. Detta för att få en lämplig placering av

grafer samt deras gruppering till respektive flöde. Då olikheter i det visuella kan få

32

användarna att söka efter betydelse av dessa skillnader har detta undvikits till högsta möjliga

grad. Bakgrundsfärgen har även den motiverats av en diskretare blek färg för att undvika en

vit bakgrund, då mörka eller ljusa färger kan distrahera användaren då de kräver mer

uppmärksamhet och kan bli visuellt utmattande. Färgerna som använts till de olika

diagrammen anser vi vara tydliga då de är information som kräver uppmärksamhet vilket

även det är något Few menar att man bör använda sig av.

Dessa val har även utformats för att göra det enkelt för användaren att förstå hur

webbapplikationen ska användas för att uppfylla Nielsens användbarhetsprincip Learnability.

För att användaren ska få en bättre överblick bör all översiktlig data finnas tillgänglig som en

sammanställning på en sida utan att behöva navigera för att ta del av informationen.

Startsidan har därför visuellt designats som en sammanställning med översiktlig data för

samtliga flöden och dess steriliseringsprocesser. Detta ger användaren en överblick över hur

väl varje flöde uppfyller mål för respektive steg i processen samtidigt som teoretiskt underlag

använts som grund för denna positionering.

För att få mer detaljerad information om de olika flödena och dess data är webbapplikationen

utformad så att användaren kan navigera vidare till ytterligare sidor för respektive flöde.

Vilket Few menar är en fördel för att användaren lättare ska kunna ta till sig specifik

information vilket endast är två klick bort, vilket gör det lätt för användaren att snabbt utföra

de uppgifter som avses att utföras vilket stöder Nielsens Efficiency. Eftersom

webbapplikationen inte kräver att användaren navigerar mer än ett klick för att ta del av

information samt att applikationen endast innehåller nödvändig information som inte blir

överflödig för användaren att hålla reda på, bidrar detta till att uppfylla Nielsens princip om

Memorability som handlar om att det ska vara lätt för användaren att komma ihåg hur

webbapplikationen används.

För att kunna utvärdera webbapplikationen och se om den uppfyllt de krav som

sammanställts kring visualiseringen utfördes två expertutvärderingar för att kunna avgöra

användbarheten. Desto fler expertutvärderingar som görs kan bidra till fler

utvecklingsmöjligheter för en bredare syn från användarnas sida. Fler defekter eller fel kan

även på det sättet upptäckas. Då olika information är viktig för olika användare kan deras

synpunkter skilja sig åt, vilket vi är medvetna om och det skulle därav vara lämpligt att utföra

33

fler expertutvärderingar.

34

10. Diskussion och slutsats

10.1 Diskussion Under det visuella framtagandet av webbapplikation har flertal val gjorts gällande design. Då

det inte finns något rätt och fel för designval i praktiken utan anpassning måste ske till varje

sammanhang och användningsområde, utgick vi från kraven från beställaren som vi

kombinerade med lämpliga val för den visuella framställningen av den befintliga data som

fanns. Vilket gjordes genom överväganden av mest lämpliga alternativ från det teoretiska

underlaget för att kunna säkerställa att rätt val har gjorts i enlighet med studiens syfte. För att

skapa en användbarhet som underlättar för användaren att effektivt kunna tolka data krävs det

både kunskaper och en noggrann kravinsamling för att ta reda på hur utvecklingsprocessen

kan bidra till bästa resultat, vilket design science, Steve Krug, Jakob Nielsen, Rick Borup och

Stephen Few bidrog med. Vi anser att med hjälp av våra metoder och teorier utvecklat

webbapplikationen på ett visuellt användbart sätt lämpat efter beställarens krav vilket vi

kunnat mäta med hjälp av expertutvärderingarna. Detta har bidragit till att kunna besvara

studiens frågeställning.

Den visualisering som skapats har ansetts vara användbar utifrån de resultat vi fått från

expertutvärderingarna. De visuella valen har grundats i teori men för att kunna anpassa

webbapplikationen till den miljö där den ska användas har många överväganden gjorts.

Gällande färgval har vi prioriterat tydlighet framför tilltalande design, detta är något som kan

motiveras genom att den bör anpassas till miljön där webbapplikationen ska användas. Då

den används inom produktion där det inte finns utrymme för misstolkningar eller otydlighet

och att en snabb överblick kan göras, är det av stor vikt att det är tydliga färgskillnader.

Det är även en utmaning att få viktig information och innehåll tillgängligt på en och samma

sida samtidigt som sidan inte ska vara för informationstät eller att användaren ska behöva

navigera för att ta del av sammanhängande information. Under utvecklingens gång har många

överväganden gjorts om vilken information som är nödvändig och hur den kan komprimeras

till effektiva grafer och diagram som visar den data som användaren behöver. Lösningen på

detta var att undvika överflödig text samt att sammanställa data i grafer och diagram som

endast är nödvändiga för att få en överblick och placera mer detaljerad information på andra

35

sidor som användaren enkelt kan navigera till vid behov.

Det som framkom under observationerna men även expertutvärderingarna var att olika delar

av visualiseringen i webbapplikationen prioriteras efter användningsområde beroende på vem

som använder webbapplikationen, vilket ställde krav på det visuella framställandet. Det är där

av vikt att ha i åtanke att användare har olika synpunkter gällande användbarheten av det

visuella framställandet. Vilket även kan diskuteras då vi är medvetna om att användbarheten

av visualiseringen skulle kunna mätas i större utsträckning ju fler expertutvärderingar som

utförs, tyvärr var detta inte möjligt på grund av tidsbegränsningen för denna studie. Tack vare

expertutvärderingarna samt feedback från beställaren har många nya förbättringar kring

visualiseringen och dess användbarhet kunnat identifieras.

Vissa mindre visuella ändringar har gjorts efter expertutvärderingarna vilket är att korrigera

storleken, ändra så att tooltipen inte täcker den stapel den hålls över, lägga till grön färg i

olika nyanser på målstapeln som tidigare varit transparent samt även korta ner texten för de

olika delprocesserna i steriliseringsprocessen som nu är ilastning, start av autoklav,

sterilisering samt urlastning (se figur 9). Dessa åtgärder är både korrigerade på

webbapplikationens startsida samt de olika sidorna för respektive flöde.

Figur 9. Åtgärdade förbättringar. Figuren visar hur en flödessida ser ut efter att enklare förbättringar är

åtgärdade. De förbättringar som gjorts till skillnad från innan är att målstapeln har en grön färg i olika nyanser

för de olika delprocesserna, namnen för de olika delprocesserna är ändrade vilket kan ses under den översta

grafen samt att tooltipen inte täcker den stapel som markeras.

36

10.1.1 Fortsatt forskning

Under utvecklingens gång har det både uppstått utmaningar och övervägande gällande design

och användbarhet för att utveckla webbapplikationen på ett användbart sätt. Det teoretiska

ramverk som använts för att stödja designval tillsammans med krav och synpunkter från

användarna har utgjort grunden för den design som utvecklats. Det har dock uppstått

motsägelser mellan teorier och användare vid olika tillfällen under utvecklingen om vad som

är användbart och en god design. Vi anser därav att det möjligtvis skulle behövas ytterligare

forskning inom ämnet för att skapa en ännu mer anpassad design som tillfredsställer både det

medvetna och omedvetna hos användaren. Som tidigare nämnt i inledningen av denna

uppsats är det en utmaning att skapa en användbar design för alla användare då det inte finns

ett korrekt svar på hur ett gränssnitt bör designas. Vi anser att det finns en mängd goda

riktlinjer och principer som har en god standard för att utveckla en användbar

webbapplikation, men för att göra den anpassad för ett flertal användare skulle möjligtvis

ännu mer forskning kunna göras inom ämnet. Vi anser även att det är av vikt att anpassa

webbapplikationen till den miljö och det sammanhang den ska användas i, därav hade

ytterligare forskning inom design kunnat göras gällande anpassning för sammanhang och

användningsområde.

Sammanfattningsvis anser vi att det i dagens läge existerar goda riktlinjer och standarder för

utveckling av webbapplikationer och designval, dock har vi under utvecklingens gång

uppmärksammat motsägelser mellan dessa riktlinjer och användare. Därav anser vi att det

möjligtvis skulle kunna göras ytterligare forskning inom området gällande design för att

anpassa det till användarens behov eller eventuellt forskning kring hur designen bör utformas

med påverkan av det medvetna respektive det omedvetna hos användare, då denna studie

tyder på att det existerar skillnader mellan dessa.

10.2 Slutsats Denna studie ämnade att undersöka hur en webbapplikation kan utformas för att visualisera

data på ett effektivt och användbart sätt. Undersökningen syftar även till att undersöka vilka

element och metoder i visualisering som bidrar till att ge förståelse för information som

visualiseras i form av ett gränssnitt. Frågeställningen som denna studie ämnar att besvara är:

37

- Hur kan en webbapplikation utformas för att visualisera data på ett effektivt och

användbar sätt?

För att besvara frågeställningen i denna studie har metoden Design Science använts.

Insamling av information och krav till denna studie skedde genom observationer, för att

sedan jämföras med det teoretiska underlaget, för att i sin tur utvärderas med hjälp av

expertutvärderingar. Resultatet från dessa utvärderingar analyserades sedan för att kunna

besvara frågeställningen. Under studiens gång har vi använt oss av teori och krav för att

motivera de visuella designval som var tvungna att anpassas efter den miljö där

webbapplikationen ska användas. För att skapa en användbar webbapplikation med en

tilltalande design har val kring visualisering grundats på tidigare teorier och riktlinjer inom

användbarhet och design enligt Jakob Nielsen, Rick Borup samt Stephen Few.

Slutsatsen som vi kommit fram till är att utveckling av en webbapplikation som ska

visualisera data kan utformas på ett användbart och tydligt sätt genom utförandet av en

noggrann kravinsamling och väl utförda expertutvärderingar med användarna. Under studien

har det framkommit att det teoretiska underlaget inte kan täcka designval när det gäller

visualisering av data, då data kan se olika ut och användas i olika syften. De riktlinjer och

principer som har använts för visualisering kan vara ett hjälpmedel vid framtagande av andra

webbapplikationer som visualiserar data, men detta medför inte att den visualisering som

gjorts i denna studie kan appliceras till fullo för andra typer av data inom andra företag.

Granskning av riktlinjer och teorier som berör användbarhet och design kan dock bidra till att

visuell framställning av befintlig data blir ett användbart verktyg för tolkning och analys. Hur

data visualiseras måste anpassas till den miljö och det syfte den är ämnad att användas för.

Därför anser vi att insamling av krav som sedan vägs mot riktlinjer och teorier om

visualisering tillsammans kan identifiera lämpliga val av visualisering som kan användas

vilket kan bekräfta användbarheten med hjälp av expertutvärderingarna. Genom detta

tillvägagångssätt har visualiseringen av data i den webbapplikation som tagits fram i denna

studie bidragit till användbarhet och effektiv tolkning av Fresenius Kabis data gällande deras

steriliseringsprocess.

Det kunskapsbidrag denna undersökning har bidragit till är hur olika riktlinjer och principer

kan tillämpas för visualisering av data i en miljö som denna webbapplikation tagits fram för.

38

En del av de designval som gjorts kan variera och anpassas beroende på vilket företag data

visualiseras för och hur dess processer ser ut. Det finns dock riktlinjer som vi anser bör följas

för webbapplikationer i en liknande miljö, en utav dessa är att tydlighet bör prioriteras. Detta

gäller både färg, positionering och påvisad samhörighet av data. Det är även av stor vikt att

användaren inte behöver navigera mellan olika data som är relevant för direkt avläsning i

produktionsprocessen. En annan viktig aspekt är att inte göra webbapplikationen allt för

informationstät, då detta försvårar för användaren att snabbt kunna få en överblick över

presenterad data. Alla dessa riktlinjer bör följas i syfte att data snabbt ska kunna tolkas och

analyseras utan att användaren behöver lägga extra tid på att navigera eller att få en förståelse

för vilket visualiseringselement som representerar vilken data. Vilket är av stor vikt för att få

ett kontinuerligt processflöde i en sådan typ av miljö.

Riktlinjer gällande vilken typ av graf eller visualiseringsform som används anser vi kan

variera beroende på i vilken miljö webbapplikationen ska användas och fortfarande vara ett

användbart hjälpmedel för att kunna tolka och analysera data. Detta är något som kan

anpassas till verksamhetens processer som webbapplikationen används i. Framförallt vill vi

lyfta fram att riktlinjer som rör tydlighet är av största vikt för att kunna visualisera data på ett

sätt som gör det effektivt för tolkning och analys.

39

11. Källförteckning Borup, R. (2015). Data Visualization for the Database Developer. Campaign: Information

Technology Associates.

Chen, C. (1999). Information Visualization and Virtual Environments. London: Springer-

Verlag.

Chen, C., Härdle, W. K., Unwin, A. (2008). Handbook of Data Visualization. Berlin:

Springer-Verlag.

Coremans, C. (2015). HTML: A Beginner’s Tutorial. Brainy Software Corp.

Dong, H., Barr, G., Blackburn, E., Grant, M., Piwek, P., Shepherd, P. and Collins, N. (2010).

Inclusive data visualisation: a multidisciplinary approach. In: 3rd International Conference

for Universal Design.

Ekström, M. & Larsson, L. (red.) (2010). Metoder i kommunikationsvetenskap. 2. uppl.

Lund: Studentlitteratur

Few, S. (2006). Information dashboard design: the effective visual communication of data. 1.

ed. Sebastopol, CA: O'Reilly & Associates

Flanagan, D. (2006). JavaScript: the definitive guide. 5. ed. Sebastopol: O'Reilly

Fresenius Kabi, Tillgänglig: https://www.fresenius-kabi.com [Hämtad 2017-12-20].

Gleicher, M., Albers, D., Walker, R., Jusufi, I., Hansen, C.D., Roberts, J.C. (2011) Visual

comparison for information visualization. Sage publication.

Hevner, A. (2004). Design Science in Information System Research. MIS Querterly, vol. 28,

ss.75-105.

40

Khan, M. (2011). Data and Information Visualization Methods, and Interactive Mechanisms:

A Survey. International Journey of Computer Applications, vol. 34.

Kirk, A. (2012). Data Visualization: a successful design process. Birmingham: Packt

Publishing Ltd.

Krug, S. (2006). Don't make me think!: a common sense approach to web usability. 2. ed.

Berkeley, Calif.: New Riders

Nielsen, J. (2012). Usability 101: Introduction to Usability. Tillgänglig:

https://www.nngroup.com/articles/usability-101-introduction-to-usability [Hämtad 2017-12-

27].

Nielsen, J. (1995). 10 Usability Heuristics for User Interface Design. Tillgänglig:

https://www.nngroup.com/articles/ten-usability-heuristics/ [Hämtad 2017-12-27].

Nielsen, J. (1995). Severity Ratings for Usability Problems. Tillgänglig:

https://www.nngroup.com/articles/usability-101-introduction-to-usability [Hämtad 2017-12-

27].

Oates, B. J. (2006). Researching information systems and computing. London: SAGE

Osvalder, A., Bligård, L., Andersson, J. och Thunberg, A. (2011) Visualisering av

anläggningsstatus - Utformning av innovativa gränssnittspresentationer. Stockholm :

Värmeforsk

Tergan, S. & Keller, T. (2005). Knowledge and Information Visualization [Elektronisk

resurs] : Searching for Synergies. Berlin, Heidelberg: Springer Berlin Heidelberg

Telerik. Kendo UI. Tillgänglig: https://www.telerik.com/kendo-ui

[Hämtad: 2017-12-10]

41

Tory, M & Möller, T (2004). Human Factors in Vizualisation Research, IEEE

TRANSACTIONS ON VISUALIZATION AND COMPUTER GRAPHICS, VOL. 10, NO. 1

Wiley, J., Sons & Sons (2011). Processing and Finishing of Polymeric Materials, 2 Volume

Set. John Wiley & Sons

Zeldman, J. (2010). Designing with web standards. Berkeley: New Riders.

42

12. Bilaga 1

Underlag för expertutvärdering

Utvärderingen utgår ifrån tre konventioner som Steve Krug (2006) pratar om för att

komplettera ramverket ytterligare:

Don ́t make me think - En användare ska inte behöva tänka för att använda webbplatsen.

Viktig nformation ska vara max 2 klick bort. Sidan ska även vara självförklarande då någon

som inte är insatt ska kunna sätta sig in och förstå vad det handlar om.

We don ́t read pages, we scan them - Användare läser inte all information som finns på

webbplatsen utan scannar snarare snabbt av efter den information de är ute efter. Överflödig

information kan få användaren att lägga extra tankar på onödig information som får denne att

glömma bort syftet till användning av webbapplikationen, detta då överflödig information

läggs på vår kognitiva arbetsbelastning som får användaren att glömma bort vad den skulle

göra.

Omit needless words - Krug säger att om man tar bort hälften av alla ord på webbplatsen, så

kan man ta bort ytterligare hälften av det. Finns det onödig text som kan kortas ner? Eller

behöver man den information som texten ger? Detta då det annars är lätt att tappa bort sig i

för mycket information i form av text.

Åtgärder Jakob Nielsen och Rolf Molich heuristisk utvärdering av gränssnitt.

Graderingar vid expertutvärdering vilket är:

Kosmetiskt problem: behöver inte åtgärdas om tid ej finns.

Användbarhetsproblem: problem som bör åtgärdas om tid/resurser finns.

Större användbarhetsproblem: stort problem som bör åtgärdas omgående.

Ej användbar: Kan inte användas innan problemet är löst.

43

13. Bilaga 2

Expertutvärdering – Produktionschef

Utvärderingen utgår ifrån tre konventioner som Steve Krug (2006) pratar om för att

komplettera ramverket ytterligare:

Don ́t make me think - En användare ska inte behöva tänka för att använda webbplatsen.

Viktig information ska vara max två klick bort. Sidan ska även vara självförklarande då

någon som inte är insatt ska kunna sätta sig in och förstå vad det handlar om.

Svar: Graferna är tydliga men antal över mål och Pie Chart kan förtydligas, det som skulle

kunna göras är att sätta en rubrik både över antal och över Pie Chart, ev. att göra antal mål till

en ny Pie Chart. Man kan även eventuellt sätta minuter på y-axeln till grafen och autoklav till

x-axeln.

We don ́t read pages, we scan them - Användare läser inte all information som finns på

webbplatsen utan scannar snarare snabbt av efter den information de är ute efter. Överflödig

information kan få användaren att lägga extra tankar på onödig information som får denne att

glömma bort syftet till användning av webbapplikationen, detta då överflödig information

läggs på vår kognitiva arbetsbelastning som får användaren att glömma bort vad den skulle

göra.

Svar: Det som kan ses som överflödig information är antal över mål på startsidan.

Informationen behövs men kan visualiseras annorlunda.

Omit needless words - Krug säger att om man tar bort hälften av alla ord på webbplatsen, så

kan man ta bort ytterligare hälften av det. Finns det onödig text som kan kortas ner? Eller

behöver man den information som texten ger? Detta då det annars är lätt att tappa bort sig i

för mycket information i form av text.

Svar: Texten under grafen är ganska upprepande. Skulle kunna bytas ut mot: ilastning, start

av autoklav, sterilisering, urlastning.

Åtgärder Jakob Nielsen och Rolf Molich heuristisk utvärdering av gränssnitt.

44

Kosmetiskt problem: behöver inte åtgärdas om tid ej finns.

Svar: Mål-stapeln skulle kunna gå bakom eller flyta på samtidigt som den aktuella.

Användbarhetsproblem: problem som bör åtgärdas om tid/resurser finns.

Svar: Tooltipens information skulle alltid komma under autoklaven som körs, alltså n under

stapeln.

Större användbarhetsproblem: stort problem som bör åtgärdas omgående.

Svar: Storleken bör anpassas efter skrämens storlek, alltså efter master.

Ej användbar: kan inte användas innan problemet är löst.

Svar: Efter kopplingen ska det fungera.

45

14. Bilaga 3

Expertutvärdering - Utbildningsansvarig

Utvärderingen utgår ifrån tre konventioner som Krug (2006) pratar om för att komplettera

ramverket ytterligare:

Don ́t make me think - En användare ska inte behöva tänka för att använda webbplatsen.

Viktig information ska vara max 2 klick bort. Sidan ska även vara självförklarande och någon

som inte är insatt ska kunna sätta sig in och förstå vad det handlar om.

Svar: Fungerar bra, endast ett klick bort då det är enkelt att navigera inga konstigheter.

Eventuellt att man ska kunna klicka in på ett annat flöde från ena flödessidan utan att behöva

gå tillbaka till startsidan. Självförklarande, man skulle möjligtvis kunna flytta tooltipen lite

till höger för att tydligare se stapeln.

We don ́t read pages, we scan them - Användare läser inte all information som finns på

webbplatsen utan scannar snarare snabbt av efter den information de är ute efter. Överflödig

information kan få användaren att lägga extra tankar på onödig information som får denne att

glömma bort syftet till användning av webbapplikationen, detta då överflödig information

läggs på vår kognitiva arbetsbelastning som får användaren att glömma bort vad den skulle

göra.

Svar: Informationen är inte överflödig utan ses som användbar. Tydlig och få klick bort.

Omit needless words - Krug säger att om man tar bort hälften av alla ord på webbplatsen, så

kan man ta bort ytterligare hälften av det. Finns det onödig text som kan kortas ner? Eller

behöver man den information som texten ger? Detta då det annars är lätt att tappa bort sig i

för mycket information i form av text.

Svar: Ingen överflödig text.

46

Åtgärder Jakob Nielsen och Rolf Molich heuristisk utvärdering av gränssnitt.

Kosmetiskt problem: behöver inte åtgärdas om tid ej finns

Svar: Möjlighet till att ändra tider på startsidan för att kunna komma åt ett visst datum eller

börja från en speciell tidpunkt.

Användbarhetsproblem: problem som bör åtgärdas om tid/resurser finns.

Svar: Möjligheten till att själva ändra mål på webbapplikationen.

Större användbarhetsproblem: stort problem som bör åtgärdas omgående.

Svar: Inget.

Ej användbar: kan inte användas innan problemet är löst.

Svar: Nej

47

15. Bilaga 4 Teknisk Bilaga

Webbstandarder som används idag vid webbutveckling kan delas upp i tre separata

komponenter som gör att koden är oberoende av varandra. Dessa tre komponenter är

HTML/XHTML som står för strukturen, CSS som står för presentationen och ECMAScript

som är standardversionen av JavaScript och som står för beteendet (Zeldman, 2010).

HTML (Hypertext Markup Language) är standardspråket för att bygga webbsidor och kan

användas för att beskriva objekt som listor, tabeller, bilder och former (Coremans, 2015, s.9).

CSS låter utvecklaren skapa regler som anger hur innehållet i ett element ska visas. CSS

fungerar genom att associera regler med HTML-element. Dessa regler reglerar hur innehållet

i specificerade element ska visas (Wiley & Sons, 2011). JavaScript är ett tolkande

programmeringsspråk men har liknande förmågor som ett objektorienterade

programmeringsspråk, dock förekommer JavaScript vanligen inom webbutveckling. Det

används för att användare ska kunna kontrollera och interagera med en webbsida, t.ex. för

navigering och för att alternera mellan innehåll (Flanagan, 2006).

I denna studie har alla dessa komponenter använts samt Kendo UI som är ett ramverk med en

samling verktyg för att kunna bygga applikationer. Kendo UI innehåller över 70 olika typer

av widgets och verktyg för JavaScript-baserade applikationer. Det inkluderar även widgets

för visualisering av data, bl.a. olika typer av diagram, tabeller och grafer. De verktyg och

widgets som används för att visualisera data är anpassningsbara och kan designas efter behov

(Telerik). För att utveckla en webbapplikation som uppfyller syftet med denna studie bör

användning av dessa komponenter ske. Det finns i dagsläget färdiga skalprojekt samt verktyg

för att bygga upp en webbapplikation men det kan begränsa alternativen för utvecklingen och

designval, således har utveckling skett med komponenterna inom webbstandarder samt

Kendo UI för framställning av grafer. Det finns flera alternativ som kan erbjuda liknande

verktyg som Kendo UI, men i dagsläget har andra webbapplikationer som utvecklats på

Fresenius Kabi använt sig av Kendo UI och för att upprätthålla en koherens ansågs Kendo UI

vara det mest relevanta valet.

48

Vid utveckling av webbapplikationen har Visual Studio använts som utvecklingsmiljö. Ett

färdigt skalprojekt fanns redan skapat för påbörjandet av vår utveckling med kopplingar till

databas där data för de olika delprocesserna för steriliseringsprocessen fanns. Databasen har

även information gällande vilka autoklaver som kört där sterilisering sker samt enheterna som

de intravenösa lösningarna befunnit sig på, alltså deras flöden.

Sammanfattningsvis har webbstandarden HTML5, CSS samt Javascript använts under

utveckling av webbapplikationen. För att skapa så användbara grafer som möjligt har Kendo

UI använts, vilket är ett ramverk med verktyg och widgets för att visualisera data i form av

diagram. Även kod i C# har förekommit för att hämta korrekt data från databasen till

respektive flöde. HTML5 har använts för att sätta element, CSS för design och positionering

av element och Javascript för att data för respektive flöde kontinuerligt ska kunna hämtas och

uppdateras.