Utveckling av gränssnitt för ett kalkyl- ochberedningssystem EXAMENSARBETE

(1)

EXAMENSARBETE

Utveckling av gränssnitt för ett kalkyl- och

beredningssystem

Kasper Westman

2016

Högskoleingenjörsexamen

Teknisk design

Luleå tekniska universitet

(2)

Högskoleingenjörsexamen i Teknisk design Bachelor of Science in Industrial Design Engineering

Luleå tekniska universitet

Utveckling av gränssnitt för ett

kalkyl- och beredningssystem

Kasper Westman

2016

(3)

Högskoleingenjörsexamen/Bachelor of Science

Utveckling av gränssnitt för ett kalkyl- och beredningssystem

© Kasper Westman

Published and distributed by Luleå University of Technology SE-971 87 Luleå, Sweden Telephone: + 46 (0) 920 49 00 00 Printed in Luleå Sweden by

(4)

Sammanfattning

Detta dokument redovisar ett examensarbete med omfattning 15hp inom Teknisk Design med inriktning produktutveckling som utfördes våren 2016 av Kasper Westman på Luleå Tekniska Universitet. Syftet med projektet var att utveckla ett gränssnittskoncept för ett nytt kalkyl- och beredningssystem som ska användas på SSC, Skellefteå Snickericentral.

Projektet har behandlat fyra faser: förundersökning, idégenerering, konceptutveckling och detaljdesign och i detta dokument beskrivs hela processen över projektet. I dokumentet redovisas detaljerat de metoder och relevanta teorier om ämnen som används i varje fas med motivering och beskrivning av de val som gjorts.

Projektet inleddes med en förundersökning där intervjuer och observationer över det

nuvarande systemet på SSC gjordes. Därefter har flertalet olika lösningsförslag skissas fram och utvärderas. Skisserna renritades och har presenterats för anställda på SSC som bidragit med åsikter. Utifrån detta har fyra olika koncept tagits fram, nu med hjälp av datorprogrammet Axure. Det nya koncepten utvärderades tillsammans med anställda på SSC och ett slutgiltigt resultat togs fram.

Det slutgiltiga resultatet är bilder som visar hur gränssnittet ser ut med motivering och beskrivning över hur gränssnittet är tänkt att användas.

Nyckelord: Teknisk Design, produktdesign, grafiskt användargränssnitt, interaktionsdesign,

(5)

Abstract

This document presents the work of a candidate thesis in Industrial Design with focus of product development, that was made in spring 2016 by Kasper Westman at Lulea university of

technology. The aim of the project was to develop an interface concept for a new calculation and processing system that will be used at SSC, Skellefteå Snickericentral.

The project has treated four stages: preliminary investigation, idea generation, concept development and detail design. The document reports in detail the methods and relevant theories of the substance used in each stage of reasoning and description of the choices that was made.

The project began with an investigation in which interviews and observations was made of the current system at SSC. From the results of the investigation, several different suggestions were sketched out and evaluated. The sketches have been presented to employees of SSC who contributed opinions. Based on this, four different concepts have been developed, now with the help of the computer program Axure. The new concepts were evaluated together with the employees of SSC and a final result was made.

The final result is images that show how the interface will look like with the motivation and description of how the interface is meant to be used.

This document is written in Swedish.

(6)

Innehållsförteckning

1 Introduktion ... 1

1.1 Bakgrund ... 1

1.2 Intressenter ... 3

1.3 Syfte och mål ... 3

1.4 Omfattning och avgränsningar ... 4

1.5 Arbetets struktur ... 4

2 Teoretisk referensram ... 5

2.1 Teknisk Design ... 5

2.1.1 Interaktionsdesign ... 5

2.2 Layout ... 5

2.2.1 Kännetecken för en effektiv layout ... 6

2.3 Färglära ... 7

2.3.1 Färgcirkeln ... 7

2.3.2 Vanliga färgstandarder på skärmar ... 7

2.4 Normans designprinciper ... 8

2.5 Typografi ... 9

2.5.1 Teckensnitt på skärm ... 9

3 Metod och genomförande ... 10

3.1 Process ... 10

3.2 Dokumentation ... 10

3.3 Planering ... 10

3.4 Förundersökning ... 10

3.4.1 Marknadsundersökning och inspirationsinsamling ... 10

(7)

3.9.1 Process ... 14 3.9.2 Projektplanering ... 14 3.9.3 Förundersökning ... 14 3.9.4 Litteraturstudier ... 15 3.9.5 Idégenerering ... 15 3.9.6 Konceptutveckling ... 15 3.9.7 Detaljdesign ... 15 4 Resultat ... 16 4.1 Resultat av förstundersökning ... 16 4.2 Idégenerering ... 18 4.2.1 Resultat från workshop ... 18 4.2.2 Resultat från skisser ... 20 4.3 Konceptval ... 26 4.3.1 Koncept för kalkylering ... 26 4.3.2 Konceptförslag för beredning ... 29 4.3.3 Presentation av konceptförslagen för SSC ... 31 4.4 Slutgiltigt koncept ... 32 5 Diskussion ... 35

5.1 Projektet som helhet ... 35

5.2 Tid och resurser ... 35

5.3 Intervjuer och användartester ... 35

5.4 Resultat och teori ... 36

5.5 Fortsatt arbete ... 37

6 Slutsats ... 38

(8)

Figurlista

Nedan listas alla figurer, tabeller och bilder som visas i rapporten. Tabeller

Tabell 1 – De anställda på SSC ... 11

Tabell 2 - Sammanställning av intervjuer ... 16

Tabell 3 – För- och nackdelar från konceptförslag. ... 31

Figurer Figur 1 - Illustration av arbetsprocessen hos SS ... 3

Figur 2 - Illustration av Gutenberg diagram ... 6

Figur 3 - Illustration av hur människor följer mönster ... 6

Figur 4 - Exempel hur layout galler används. Anpassad från UI is Communication (2013) ... 7

Figur 5 - Färgcirkeln utifrån de primära färgerna gul, röd och blå ... 7

Figur 6 - Exempel på vanliga handlingar utifrån färger. Bild: UI is Communication. ... 8

Bilder Bild 1 - Det nuvarande kalkylsystemet. ... 1

Bild 2 - Utdrag av beredningsdokumentet ... 2

Bild 3 - Legotraktor. Foto: Pixabay.com... 9

Bild 4 - Bild från workshop. Foto: Johanna Balogh ... 12

Bild 5 - Bild från workshop. Foto: Johanna Balogh ... 13

Bild 6 - Resultat från inspirationsinsamling 1 ... 17

Bild 7 - Resultat från inspirationsinsamling 2 ... 18

Bild 8 - Skisser från workshop... 19

Bild 9 - Skisser från workshop... 20

Bild 10 - Skisser från idégenerering ... 21

Bild 11 - Skisser från idégenereringen ... 21

Bild 12 - Skisser från idégenereringen ... 22

Bild 13 - Skisskoncept av tabellvy ... 23

Bild 14 - Konceptförslag 1 av beredningsvyn ... 24

Bild 18 - Koncept för kalkylering - Tabellvyn ... 27

Bild 19 - Koncept för kalkylering - Listvyn ... 28

Bild 20 – Koncept för beredning – 3-Delen. ... 29

Bild 21 - Koncept för beredning - Kundordern ... 30

Bild 22 – Koncept för beredning - Flikarna ... 31

Bild 23 - Slutgiltigt koncept tabellvy 1 ... 32

Bild 24 - Slutgiltigt koncept tabellvy 2 ... 33

Bild 25 - Slutgiltigt koncept, beredning ... 34 Bilagor

(9)

1

1 Introduktion

SSC, Skellefteå Snickericentral, förbereder av ett kalkyl- och beredningssystem. Företaget har köpt in ett program som kallas e-Con. E-Con är ett webbaserat system där gränssnittet och programmeringen hanteras av deras kunder, i det här fallet av SSC själva. Det innebär att i nuläget finns inget grafiskt gränssnitt som visar hur systemet ska se ut. Detta arbete är ett examensarbete utfört av Kasper Westman, högskoleingenjörsstudent inom Teknisk Design på Luleå tekniska universitet. Examensarbetet gick ut på att skapa ett grafiskt gränssnittskoncept för det nya kalkyl- och beredningssystem som ska användas av SSC. Projektet inleddes i april 2016 och pågick under 10 veckors tid.

1.1 Bakgrund

Under slutet av 90-talet har avdelningen för dörrar och glaspartier på SSC tillsammans med ett It-företag utvecklat ett kalkylsystem vid namn DCX, se Bild 1 - Det nuvarande kalkylsystemet. Detta system använder sig SSC av fortfarande idag. Eftersom systemet snart börjar bli 20år gammal är det instabilt och osäkert. Detta system hindrar även företaget från att uppdatera operativsystemen på datorerna då operativsystemet inte stödjer den gamla teknik som det nuvarande systemet använder.

Bild 1 - Det nuvarande kalkylsystemet.

(10)

2 Bild 2 - Utdrag av beredningsdokumentet

Det nya programmet e-Con kommer användas av båda företagen där data och information kommer att synkas med varandra.

E-Con är ett webbaserat program som kommer att utvecklas av avdelningen själva. Men på grund av begränsad kunskap om hur ett användargränssnitt ska se ut på bästa sätt kontaktade företaget LTU för examensarbete för att få hjälp med att utveckla gränssnittet för

kalkylsystemet.

SSCs arbetsprocess

SSC är en snickerileverantör i Skellefteå. Inom avdelningen dörrar och glaspartier jobbar Henrik Furu och Fredrik Nystedt vilka även är uppdragsgivare för projektet. Avdelningen saknar lager och producerar bara material när en beställning är gjord. Nedan beskrivs hur en vanlig

(11)

3 Figur 1 - Illustration av arbetsprocessen hos SS

1. Kund skickar en förfrågan till SSC. Detta sker oftast via mail med information om vad som behövs. Ex. ritningar.

2. Personal inom kalkylering hanterar förfrågan och skriver in relevant data i ett kalkylkylsystem.

3. När kalkylen är färdigställd skickas kalkylen till kund med information om vad priset kommer att bli för att producera och leverera materialen.

4. Kunden får i detta läge valen att antingen köpa beställningen eller inte. Köper kunden inte beställningen kastas ordern. Köper kunden beställningen går processen vidare till nästa steg. (Enligt de anställda är det ca 70% av alla kalkyler som slängs.)

5. Ordern skickas till SSC Klingan som jobbar med beredning. Här skriver personalen in, i ett egengjort Excel-dokument, samma information som personalen för kalkylering gjorde samt lite till som är intressant för beredning men inte för kalkylering.

Ett exempel: Antal gångjärn för en dörr är viktigt för att få fram ett pris. Däremot är placering på gångjärnet inte av intresse för kalkylen men är viktigt för beredningen. 6. När all data är inskrivet skickas data till produktionen som börjar producera

7. Varorna skickas till kund.

1.2 Intressenter

E-Con kommer i framtiden, när programmet är färdigutvecklat, att användas av alla anställda på SSC Skellefteå AB och SSC Klingan.

Uppdragsgivare är Henrik Furu och Fredrik Nystedt. De har ansvar över det stora projektet och kommer vara med att utveckla programmet e-Con. Uppdragsgivarna behöver en person som har ökad förståelse över hur ett användargränssnitt ska utformas på ett bra sätt.

De som är berörda av arbetet är anställda på SSC Skellefteå AB som jobbar med beräkning och kalkyler och även anställda på SSC Klingan som jobbar med beredning.

1.3 Syfte och mål

Undertecknad ska visa att han självständigt kan utföra ett utvecklingsarbete inom teknisk design, i det här fallet inom grafisk användargränssnitt.

Målet med projektet är att skapa ett koncept för hur layouten av gränssnittet kan se ut för det nya systemet e-Con. Konceptet kan sedan användas som grund för fortsatt utveckling av programmet. Projektet kommer att utgå från dessa frågeställningar:

2 1

3 4

(12)

4  Hur ser arbetsprocessen ut för personalen inom kalkylering och vilka behov har personalen?  Hur ska all information presenteras och var ska informationen visas?

 Hur ska funktioner placeras för att ge interaktionen av designen ett logiskt flöde?

1.4 Omfattning och avgränsningar

Projektet kommer att avgränsa sig till avledningen för ”Dörrar/glaspartier” där fokus för projektet är användarvänlighet och layout. Kalkylering och beredning av dörrar är den mest komplexa området i processen och därför kommer fokus främst att ligga på hur gränssnittet ser hur för kalkylering och beredning av dörrar. Glaspartier har liknande gränssnitt men mycket mindre variabler och funktioner att ta hänsyn till. Det kommer inte tas någon hänsyn till programmering och dylikt.

Arbetet omfattar hur gränssnittet ser ut och hur användaren integrerar med gränssnittet. Det kommer därför inte läggas arbete på att få in alla inställningar och funktioner som systemet kommer att ha.

1.5 Arbetets struktur

I detta kapitel ges en kortfattad beskrivning över rapportens struktur och innehållet i varje kapitel.

Kapitel 1 Introduktion

Detta kapitel beskriver bakgrunden till projektet och varför projektet har blivit aktuellt. I detta kapitel redovisas också vad syftet och målet med projektet är samt dess avgränsningar.

Kapitel 2 Teori

Här redovisas de teoretiska kunskaper som har används som stöd för projektets alla val som gjorts. Här finns teori om bland annat, designprinciper, färglära och interaktionsdesign.

Kapitel 3 Metod och genomförande

I detta kapitel redovisas det metoder som använts under projektet med motivering om varför metoderna är relevanta för detta projekt. Kapitlet innehåller underkategorier som representerar varje fas i projektet. Dessa faser är förundersökning, idégenerering, konceptutveckling och detaljdesign.

Kapitel 4 Resultat

I detta kapitel redovisas resultatet från alla faser som beskrivs i kapitel 3. Här visas bilder på skisser och konceptförslag med beskrivningar. En sammanställning av resultatet från

förundersökningen från exempelvis marknadsanalyser med mera.

Kapitel 5 Diskussion

I kapitel 5 diskuteras och reflekteras resultatet och projektet i allmänhet och där problem som uppstått under projektet beskrivs och redovisas hur dessa problem har hanteras.

Kapitel 6 Slutsats

(13)

5

2 Teoretisk referensram

I detta kapitel beskrivs de teorier som har använts som stöd under projektet. Teorierna behandlar ämnet Teknisk Design och interaktionsdesign.

2.1 Teknisk Design

Enligt Stiftelsen Svensk Industridesign, SVID är definitionen av design olika beroende på person. Enligt SVID själva är definitionen av design en arbetsprocess som utvecklar lösningar utifrån funktionella och estetiska krav där utgångspunkten är användares behov. SVID skriver också att ”design tillämpas för utveckling av varor, tjänster, processer, budskap och miljöer”. (SVID, 2016) Teknisk Design är ett ingenjörsprogram på LTU, Luleå tekniska universitet, därför kan Teknisk Design beskrivas en blandning av design och teknik där ingenjörsmässiga kunskaper

kombineras med design och utveckling med människan i centrum.

2.1.1 Interaktionsdesign

Interaktionsdesign är ett område inom design. Enligt (Berndtsson & Ottersten, 2002) handlar interaktionsdesign om processen där interaktionen (samspelet) mellan utövare och produkt utformas. Med andra ord handlar interaktionsdesign om att utforma en produkts förmåga att kommunicera med användare och ge användare möjligheter att integrera med

systemet/produkten. Interaktionsdesign är också enligt (Berndtsson & Ottersten, 2002) en specifikation av resultatet där från den tänkta produkten som interaktionsdesigner utformar. Denna specifikation beskriver gränssnittet som en produkt får mot användare. Det primära syftet med interaktionsdesign är enligt (Berndtsson & Ottersten, 2002), att ”utforma ett

användargränssnitt med beteende, presentation och innehåll som säkerställer att produkten kan uppfylla beställarens och målgruppernas syften.”

Detta projekt handlar om interaktionsdesign, därför är teori inom ämnet en viktig aspekt för utveckling av gränssnitt.

2.2 Layout

(14)

6 Figur 2 - Illustration av Gutenberg diagram

McKay menar också att människor lätt följer mönster men att om mönster förändras, drar det till sig uppmärksamhet. Interaktiva knappar anses för användare sannolikt vara mer relevanta och brukar därmed få stor uppmärksamhet. Figur 3 visar hur användare följer mönster och hur interaktiva knappar kan dra till sig uppmärksamhet. (N McKay, 2013)

Figur 3 - Illustration av hur människor följer mönster

2.2.1 Kännetecken för en effektiv layout

Vidare i boken UI is Communication nämner McKay några punkter att beakta vid utformning av gränssnitt. Dessa beskrivs kortfattat nedan. (N McKay, 2013)

Fokus – Indikerar vad användare ska uppmärksamma först.

Flöde – Ger ett enkelt och smidigt skanningsmönster för användare att följa genom hela sidan. Bestämning – Visar var skanningsmönstret slutar. Detta sker oftast när användare har slutfört

en uppgift.

Ordning – Gränssnittets funktioner och objekt presenteras på ett logiskt sätt utifrån

uppgiftflöden. Sidans primära funktion bör sticka ut mer än andra.

Kontrollstorlek och avstånd – Knappar dimensioneras utifrån dess syfte och behov. Kontroller

(15)

7

Betoning – Objekt och funktioner bör betonas olika beroende på prioritet och för att ge en

visuell hierarki. Om alla objekt på en sida har samma betong har användare svårare att skanna av sidan.

Layout galler – Är osynliga linjer som används för att ge sidor ett ordnat utseende. Se Figur 4

Figur 4 - Exempel hur layout galler används. Anpassad från UI is Communication (2013)

Etikettinriktning – Handlar om förhållandet mellan kontroller och deras etiketter. Det

vanligaste är vänsterjusterade och högerjusterade etiketter.

Gruppering – Används för att visa användare vilka element som är relaterade till varandra.

Relaterade element är grupperade och orelaterade element är separerade. Det är vanligt att gruppera med hjälp att boxar eller linjer.

Layout och effektivitet – Handlar om att skärmens utrymme används effektivt. Användare ska

inte behöva ändra storlek manuellt för att göra innehållet användbart.

Balans - Innehållet på en sida ska vara jämnt fördelat på hela sidan.

2.3 Färglära

Färg är viktigt för att uttrycka känslor och uppmärksamma betraktaren. Olika färg kan ha olika uppfattningar på människor beroende på erfarenhet, tycke och kultur. Ett exempel är att färgen svart uppfattas i västerländska länder som ondska medan i österländska länder symboliserar svart styrka och kraft. (Nilsson, 2014)

2.3.1 Färgcirkeln

Färgcirkeln se Figur 5 är en cirkel som är uppdelat i delar där varje del har en färg. I detta exempel är färgcirkeln skapad utifrån från de primära färgerna gul, röd och blå.

Färger som är mittemot varandra kallas för komplementfärger, det vill säga färgers motsatser. När två komplementfärger läggs

bredvid varandra framhävs färgerna tydligare jämfört med andra färger. Exempel på komplementfärg från Figur 5 är orange och blå. (Williams, 2008)

2.3.2 Vanliga färgstandarder på skärmar

Likt färgstandarder i trafiken på exempelvis trafiklysen har färger

liknande betydelse inom integrerade system. På Figur 6 visas några exempel på vilka handlingar som vanliga vid olika typer av färger i interaktiva system. (Figur 6 är godkänd att användas av upphovsmannen)

(16)

8 Figur 6 - Exempel på vanliga handlingar utifrån färger. Bild: UI is Communication.

2.4 Normans designprinciper

”The Design of Everyday Things” är en bok skriven av Donald Norman. Boken beskriver hur design påverkar kommunikationen mellan system och användare. I boken går Norman igenom 6 designprinciper att beakta vid utformning av produkter. Nedan redovisas Normans

designprinciper. (Norman, 2002)

Synlighet innebär att användare mer sannolikt vet vart de ska göra härnäst utifrån hur synliga

funktionerna i systemet är. Med andra ord om en viss funktion är mer synlig än andra är det mest troligt att funktionen ska användas först.

Om all information synliggörs kan användare för problem att identifiera kontroller och funktioner då användaren får för mycket information på en gång. Detta kallas för

synlighetsproblem och kan motverkas med en hierarkisk organisation där information placeras i kategorier som göms. Exempelvis flikar och menyer.

Affordance är vad objekt sänder för ledtrådar till användare om vad den tillåts att göra. Ett

exempel är en bok. Den tillåts att lyftas, bläddras i, kastas, eldas upp och så vidare. En bra

affordance behöver ingen förklaring. Behövs instruktioner på hur objektet har används är det en dålig design.

Mappning handlar om förhållandet mellan ett objekt och dess funktion. Ett exempel på

mappning är en bilen. För att svänga bilen behöver användare vrida på ratten för att bilen ska svänga.

Feedback eller återkoppling är effekten när användare utför en handling. Det vill säga en

(17)

9

Constraints eller begränsningar handlar om begränsningen av möjliga handlingar på objekt. Ett

exempel är en leksakstraktor (se Bild 3) som är byggd i lego. Fysiska begränsningar talar om vilka bitar som passar vart.

Konsekvens innebär att systemet ska vara konsekvens när användare utför handlingar. Samma

handlingar måste alltid få samma reaktion för att få ett logiskt system och för att undvika förvirring.

2.5 Typografi

Typografi är läran som bokstävers form och dess användning. Typografi har i århundraden utvecklas och anses enligt, (Bergström, Flessa, Lundgren, & Petersson, 1999), tillsammans med bilder vara den viktigaste delen inom grafisk formgivning. Syftet för typografi har varit desamma sedan början, att förmedla budskap från författare till läsare, eller från sändare till mottagare. Typografi används också för att uttrycka känslor.

Inom grafisk formgivning är det vanligt att samtala om osynlig och synlig typografi.

Osynlig typografi innebär att texter på media ska vara tyst och osynlig för läsaren. Blir läsaren påmind eller stör sig på typografin under läsningen är det inte en osynlig typografi.

Synlig typografi strävar efter det motsatta. Här används bokstäver, färg och placering för att dra till sig uppmärksamhet. (Bergström, Flessa, Lundgren, & Petersson, 1999)

2.5.1 Teckensnitt på skärm

Teckensnitt är utformade av olika syften, typsnitt kan vara utformad för att kunna läsas lättast på papper, ta stor uppmärksamhet eller vara anpassad för datorskärmar för att nämna några. Teckensnitt som är anpassad för skärmar är speciellt framtagna efter skärmens förutsättning, främst efter dess starka lysande bakgrund som inte förkommer på vanligt papper. De vanligaste teckensnitten för skärmar är:  Arial  Frutiger  Georgia  Verdana  Lucida Grande  Helvetica Neue  Segoe UI

(18)

10

3 Metod och genomförande

Nedan presenteras de metoder som används under projektets gång med motiveringar.

3.1 Process

Projektet har utgått från en grundläggande mall som har använts för utvecklingsprojekt i kurser inom Teknisk Design på LTU. Denna mall innehåller faserna planering, förstudie, idégenerering, konceptutveckling och detaljdesign. Under projektets gång har faserna överlappat varandra. Det vill säga efter att avslutat förstudiefasen och påbörjat idégenereringsfasen så har under

projektet gång behövts gå tillbaka till föregående fas för att inhämta mer information. Nedan beskrivs kortfattat varje fas i kronologisk ordning:

 Planering: Första delen i projektet. Här gjordes en grov planering över alla faser och vad som förväntas göra. Det samlades in information om bakgrund för projektet och syfte och mål fastställdes.

 Förstundersökning: I denna fas inhämtades information och fakta från litteratur och från företaget och uppdragsgivarna.

 Idégenerering: Fasen innehöll skisser på layoutförslag på hur gränssnittet kan se ut. Detta togs fram genom kreativa metoder.

 Konceptutveckling: En sållning av idéer från föregående fas gav ett fåtal koncept som sedan utvecklades. Nu via datorprogrammet Axure.

 Detaljdesign: Den sista fasen i projektet. De utvecklade koncepten analyserades och diskuterades med SSC och uppdragsgivarna. Ett slutgiltigt koncept togs fram och har sedan vidareutvecklas, nu mer på detaljnivå.

3.2 Dokumentation

Under projektets gång dokumenterades allt arbete i en dagbok där detaljerad beskrivning över varje process dokumenterades samt tankar och funderingar över valet av process och över framtida arbete.

3.3 Planering

Den första fasen i projektet var att göra en grov planering över alla faser som skulle behandlats, detta för att få en uppfattning om hur mycket som ska göras och uppskatta på ett ungefär hur lång tid varje fas bör ta. Under planeringen gjordes ett preliminärt tidsschema se bilaga 1, det sattes upp vilka avgränsningar som bör göras, vad målet och syftet är med projektet, söka upp relevanta böcker och litteratur som kan användas samt att inhämta mer information kring bakgrunden för projektet.

3.4 Förundersökning

Förundersökningen är den andra fasen som gjordes i projektet. Syftet i denna fas är att samla information och på så sätt få en ökad förståelse över systemet och användarna. Nedan

presenteras de metoder som användes under förstudien.

3.4.1 Marknadsundersökning och inspirationsinsamling

En marknadsundersökning angående liknande system gjordes via internet för att få en

(19)

11 En till marknadsundersökning gjordes. Denna gång utgick undersökningen från ett

tillhandahållet dokument innehållande alla variabler och funktioner som kan förekomma vid kalkylering av dörr. Dokumentet redovisar över 100st variabler som kan förekomma för kalkylering och ännu mer variabler används inom beredning. Alla variabler syns inte i tabellen som det nuvarande systemet utan för vidare bestämning av variabler användes ett så kallat ”träd” som är i rutan till vänster, se Bild 1. Enligt uppgifter från uppdragsgivaren kommer trädet att försvinna och en ny lösning är därmed aktuellt. Således undersöktes hur andra system har motverkat det Norman säger om synlighetsproblem, se kapitel 2.4.

3.4.2 Intervjuer

En intervju är en typ av informationssamling som sker genom ett möte med människor där det primära tillvägagångssättet oftast är utfrågningar. Intervjuer inom utvecklingsprojekt används för att ta reda på personers åsikter, upplevelser och motivationer kring tjänster och produkter. (Wikberg Nilsson, Ericson, & Törlind, 2015).

Strukturerad intervju är en intervjumetod där intervjupersonen får svara på ett par förbestämda frågor. Denna metod ger kvantitativa data som kan analyseras. Enligt Bohgard, o.a., (2015) så bör intervjupersonen vara insatt i ämnet för att på förhand definiera frågorna.

Ostrukturerad intervju är en annan intervjumetod där, till motsats till strukturerad intervju, intervjupersonen ställer öppna frågor. Detta bidrar till att den intervjuade kan tala fritt om dess åsikter och motiveringar. Metoden gör att intervjupersonen kan styra diskussionen mot de områden som intervjupersonen anser vara viktiga. (Bohgard, o.a., 2015)

Under början av förstudien gjordes ett besök på SSC Skellefteå AB där intervjuer gjordes med de anställda inom kalkyleringsavdelningen. Först gjordes strukturerade intervjuer, detta för att undersöka vilka användarna är, vad dessa har för datorvana och hur erfarna de är inom det nuvarande systemet. Därefter gjordes ostrukturerade intervjuer för att ta reda på hur användarna ser på det nuvarande systemet och vad de önskar ha med i det nya.

Fyra personer som jobbar inom kalkylering intervjuades. I kort sammanställning av de anställda redovisas nedan i Tabell 2. En detaljerad sammanfattning av intervjuerna finns på bilaga 2. Tabell 1 – De anställda på SSC

Snittålder 40 år

Erfarenhet i det nuvarande

systemet 1,5 vecka – 15 år Antal år av studier 12 – 16 års studier

3.4.3 Observationer

En observation används för att identifiera behovet hos användare och få en ökad förståelse över det specifika ämnet. Det innebär att den observerande är på plats i användarnas miljö och observerar, lyssnar och frågar användarna allt eftersom de utför uppgifter. Denna metod används ofta som komplement för intervjuer då användare kan säga att de utför saker på ett visst sätt men sedan gör saker på ett annat. (Arvola, 2014) (Wikberg Nilsson, Ericson, & Törlind, 2015)

(20)

12

3.4.4 Kontextuella undersökningar

Kontextuella undersökningar är en metod där en kombination av observationer och intervjuer görs. Detta används för att öka förståelsen över ett visst ämne. I detta fall, för att öka förståelsen för hur användare arbetar i det nuvarande systemet.

Metoden går ut på att designern agerar praktikant och följer användare i deras vardagliga aktiviteter och ställer frågor. (Arvola, 2014)

Efter att observationer och intervjuer gjorts med anställda gjorde kontextuella undersökningar där anställda fick utföra sedvanliga uppgifter men nu fick anställda motivera de val som gjordes. De intervjuades datorskärmar spelades in och analyserades efteråt. Detta för att få ökad

förståelse över hur det nuvarande systemet fungerar och förstå varför användare väljer de metoder som det använder.

Samma process gjordes även hos SSC Klingan som arbetar med beredning.

3.5 Litteraturstudie

För insamling av fakta och information användes litteratur främst inom ämnet

interaktionsdesign och användargränssnitt. Detta har varit ett stöd för projektet. Även fakta inom färglära, typsnitt och informationsinsamlingsmetoder har behandlats.

Insamlingen har främst skett via litteratur och kurslitteratur hämtas från universitetsbiblioteket vid Luleå tekniska universitet. Insamling har även hämtats via internet då med extra hänsyn till källkritik.

För marknadsundersökning och inspirationsinsamling användes främst internet men även personliga datorprogram.

3.6 Idégenerering

Nästa fas i projektet är idégenerering. I denna fas var syftet att utifrån informationen från föregående fas börja skapa idéer på hur gränssnittet kan se ut. När många olika idéer hade tagits fram analyserades idéerna och ett fåtal valdes för vidareutveckling. Processen började med att göra grova skisser över hur systemet kan se ut. Under sållningen av idéer renritades skisserna, nu mer i detalj som sedan demonstrerades för uppdragsgivaren som gav åsikter på förslagen.

3.6.1 Workshops

En workshop är ett möte där personer som antingen är kopplade till projektet, experter eller personer utan koppling till projektet träffas, diskuterar och utforskar ett ämne. Detta sker oftast via kreativa metoder.

Denna metod används för att tillgodogöra sig gruppens kreativa potential och för att ta fram potentiella

lösningsförslag till problemet. (Wikberg Nilsson, Ericson, & Törlind, 2015)

Under början av idégenereringsfasen förbereddes en workshop, se Bild 4 och Bild 5. Det skickades ut en öppen inbjudan till studenter inom Teknisk Design och även inbjudan till personliga kontakter. Syftet med denna workshop var att få hjälp om hur layouten ska se ut på gränssnittet. Totalt sett var det 12st personer som deltog i

(21)

13 Workshopen som varades i 60min inleddes med en kort

introduktion kring hur nuläget ser ut. Hur hela

arbetsprocessen går till för de anställda, vilka de anställda är (ålder och erfarenhet) samt deras synpunkter på hur det nya systemet ska vara. Därefter, utan vetskap om hur det

nuvarande systemet ser ut, delades deltagarna in i mindre gruppen och började diskutera hur första sidan för

kalkyleringen ska se ut utifrån förvalda frågeställningar. Den kreativa metod som användes var brainstorming, för mer information om brainstorming, se kapitel Brainstorming. Efter 5-10 minuter avbröts diskussionen och varje grupp fick presentera de lösningar och idéer som hade tagits fram för övriga deltagare. Lösningarna diskuterades gemensamt och samlades in. Därefter upprepades processen men nu med fokus på hur startsidan för beredningen ska se ut.

När workshopen var klar samlades alla idéer in och analyserades.

3.6.1.1 Brainstorming

Brainstorming är en kreativ metod som används för att generera stora antal idéer. Under denna metod får inget kritik användas och det är mest fokus på kvantitet framför kvalité när idéer tas fram. (Wikberg Nilsson, Ericson, & Törlind, 2015)

3.6.2 Analys av idéer

I slutet av denna fas, idégenerering, gjordes en granskning av alla idéer som tagits fram från workshopen och från eget arbete och utifrån önskemålen från användare och med hänsyn av Gutenbergs Diagram gjordes fem olika koncept. Ett koncept för kalkylering och fyra koncept för beredning. Dessa koncept skissades ned på papper, nu med mer fokus på layout. Koncepten vidareutvecklades i nästa fas, konceptval.

3.7 Konceptval

När de fem koncepten var klara och renritade presenterades förslagen detaljerat med

motivering och tanke kring den tänka arbetsprocessen av varje koncept via videosamtal med en av uppdragsgivarna. Detta gjordes för att få synpunkter och åsikter om de olika förslagen och även om det saknades allmänna funktioner som hade lagts till efter att koncepten tagits fram. Utifrån samtalet med uppdragsgivare förbättrades nu koncepten genom nya skisser. Några koncept för beredning slogs ihop och totalt blev det fyra koncept kvar, ett för kalkylering och tre för beredning. Dessa koncept vidareutvecklades mer i detalj, nu via programmet Axure.

För konceptutvecklingen i programmet Axure användes en tillhandahållen lista från

uppdragsgivaren som grund för utformningen. Listan innehöll samtliga funktioner och variabler som kan finnas med inom kalkylering av dörrar.

Fokus i detta läge var det visuella i gränssnittet och hur funktioner och saker ska placeras på skärmen utifrån uppdragsgivarnas prioriteringar och även användarfokus utifrån teorier kring hur människor läser av skärmar. Mycket tid gick åt att testa, flytta och ändra proportion på objekt och utgå från vad den primära funktionen är.

Fokus i detta läge var att undersöka placering och storlek av objekt och hur informationen presenteras.

(22)

14

3.7.1 Användartester

När koncepten blev klara presenterades alla förslag för de anställda på SSC som jobbar med kalkylering. Fyra deltagare fick en detaljerad genomgång av varje koncept med motivering kring layouten. Detta skedde gemensamt tillsammans med samtliga deltagare och efter genomgången diskuterades förslagen inom gruppen och synpunkter togs emot. Detta gjordes även för SSC Klingan gällande beredningen där tre stycken deltog.

Efter mötena analyserades koncepten och utifrån åsikterna från de anställda kunde nu också för- respektive nackdelar skrivas ner för respektive koncept (se Tabell 3 sida 31). Detta jämfördes och med hjälp av åsikter och önskemål från de anställda kombinerades förslagen till ett slutgiltigt koncept som går vidare till nästa fas, Detaljdesign.

3.8 Detaljdesign

I den här fasen, som är den sista fasen i projektet låg stor fokus på placering av objekt, vilka färger som ska vara med, typsnitt med mera.

Fasen började med att få till layouten på det slutgiltiga konceptet. Hur information ska placeras och vart på skärmen det ska visas. Under denna period höll regelbundna möten med

uppdragsgivaren om synpunkter.

När layouten var klar lades fokus på vilka färger som ska vara med.

3.9 Kredibilitet

I detta kapitel diskuteras de metoder som används och varför det har varit nödvändigt för projektet.

3.9.1 Process

Processen som användes har varit bra för denna typ av projekt. Den börjar med att få grepp om problemet och få kunskaper om ämnet. Därefter utformas olika idéer som sedan analyseras och vidareutvecklas och som tillslut blir ett slutgiltigt resultat. Ju längre in i projektet arbetet pågick ju mer konkret blev förslagen och lösningarna.

3.9.2 Projektplanering

Projektplaneringen som gjordes i början av projektet har varit ett bra stöd för att veta hur lång tid respektive arbete beräknas ta. Tidsplaneringen höll till viss del bra och projektet blev färdigt i tid. Flertalet gånger har faser överlappat varandra. Det kan bero på ovana att utföra ett

utvecklingsarbete självständigt. Vanligtvis sker utvecklingsarbeten i grupp och planeringen utgick därmed utifrån en grupps tidsramar. En annan anledning kring att planeringen inte riktigt höll var oklarheter på vad som ska göras i detalj i varje fas när planeringen skrevs. Det var vanligt att fler metoder behövdes göras i varje fas. Planeringen var även till viss del beroende av andra personer och den delen av processen kunde inte styras fullt ut.

3.9.3 Förundersökning

(23)

15

3.9.4 Litteraturstudier

Den teori som har insamlas är främst från böcker lånade från universitetsbiblioteket på LTU. Annan informationsinsamling är också hämtat utifrån trender för hur andra typer av grafiska användarsystem ser ut. Detta har varit nödvändigt att ta fram vid utformning att gränssnittet. Exempelvis hur användare läser av skärmar eller hur vanliga interaktiva knappar ser ut.

3.9.5 Idégenerering

Att ta fram lösningsförslag på layouten har varit svårt att utföra själv, då det inte funnits någon att bolla idéer med. Workshopen i den här fasen var till stor hjälp att utveckla nya lösningar och även till det slutgiltiga förslaget.

Diskussioner med anställda om lösningsförslagen som gjordes har varit mycket givande då de är mycket mer insatta i hur systemet är uppbyggt och bidrog med mycket åsikter för fortsatt arbete.

3.9.6 Konceptutveckling

Mycket tid gick åt att göra datorbaserade prototyper. Detta är någonting som inte beräknades under planeringsfasen. Här var, likt förra fasen, de anställdas åsikter väldigt givande för hur systemet ska se ut och för fortsatt arbete.

För ännu bättre resultat över val gränssnitt borde interaktiva prototyper ha gjorts och testats på användare men på grund av pressat tidsschema och oklarheter över hur rättvisa tester ska utformas ströks användartesterna från planeringen.

3.9.7 Detaljdesign

Även i den här fasen gick mycket tid på layout av gränssnittet. Färger har testats och ändrats och typsnitt och storlek på typsnitt har analyserats. Här hade jag önskat att ha en medarbetare att bolla idéer med och komma fram till lösningar. Kontinuerliga mailkonversationer med

(24)

16

4 Resultat

I detta kapitel redovisas resultatet från varje fas med motiveringar kring valen.

4.1 Resultat av förstundersökning

Under förstudien som skrivet i kapitel Förundersökning gjordes intervjuer, observationer och marknadsundersökning. I detta kapitel redovisas resultaten från det kapitlet.

Resultat av intervjuer

Som skrivet i kapitel 3.4.2 gjordes intervjuer under projektets gång. Fyra personer som jobbar inom kalkylering intervjuades. I kort sammanställning av intervjuerna redovisas nedan i Tabell 2. En detaljerad sammanfattning av intervjuerna finns på bilaga 2.

Tabell 2 - Sammanställning av intervjuer

Snittålder 40 år

Erfarenhet i det nuvarande systemet 1,5 vecka – 15 år

Antal år av studier 12 – 16 års studier

Fördelar med det nuvarande systemet Snabbt inmatningssystem. Går att navigera med bara tangentbord.

Nackdelar med det nya systemet Visas mycket information på samma gång. Lite information visas när ett fel har inträffat

Önskemål över det nya systemet Snabb inmatning. Bilder kan vara bra med inte på bekostnad att systemet bli

långsammare.

Resultat från observationer och kontextuella undersökningar

Efter varje intervju gjordes observationer på hur de anställda jobbar i det nuvarande systemet. De anställda utförde det sedvanliga uppgifterna och hur det anställda integrerar i systemet observerades:

När de anställda får en förfrågan från en kund skrivs förfrågan ut på papper. Därefter läses pappret av efter relevant information där vissa använder en markeringspenna för att markera viktig information. Pappret läggs på skrivbordet och relevant information som finns på pappret skrivs av, nu i kalkylsystemet.

Användare arbetade oftast enbart med tangentbordet bortsett från någon enstaka gång då datormusen användes för att integrera i systemet. Inom kalkylering användes TAB-knappen på tangentbordet frekvent för att hoppa mellan cellerna i tabellen. Detta var något som också användare själva tyckte var bra och smidigt.

Resultat från marknadsanalys och inspirationsinsamling

En marknadsanalys och inspirationsinsamling gjordes i första fasen av projektet för att på inspiration och idéer på hur andra program ser ut.

(25)

17 Bild 6 - Resultat från inspirationsinsamling 1

På Bild 6 undersöktes hur information presenteras och hur gruppering av information kan se ut i olika system. Ett sätt att presentera information som togs med som inspiration var

användningen av rutor. Även färgvalen, vita och gråa bakgrunder, användes också som inspiration.

Efter undersökningen av hur information kan presenteras gjordes en ny

marknadsundersökning. Nu med fokus på att motverka det som Norman skriver om

(26)

18 Bild 7 - Resultat från inspirationsinsamling 2

4.2 Idégenerering

Under idégenereringsfasen gjordes en workshop som resulterade i ett antal olika

lösningsförslag. Med inspiration av resultatet från workshopen, marknadsundersökningen och inspirationsinsamlingen gjordes nya lösningsförslag.

4.2.1 Resultat från workshop

(27)

(28)

20 Bild 9 - Skisser från workshop

Att kategorisera alla variabler i flikar var förslag som samtliga grupper presenterade. Några grupper valde att sätta flikarna i vertikal riktning längst vänstersidan, andra valde att placera flikarna högst upp i horisontell riktning. Andra förslag var att använda ikoner och stora rutor i mitten av skärmen för att kategorisera där användare går in i ett annat fönster när väl

användaren klickar på ikonen.

4.2.2 Resultat från skisser

(29)

21 Bild 10 - Skisser från idégenerering

(30)

22 Bild 12 - Skisser från idégenereringen

Mycket fokus lades på hur informationen presenteras och vad som är viktigast, detta med utgång från Gutenbergs diagram, se Figur 2 - Illustration av Gutenberg diagram. Som skrivet innan ska den primära funktionen placeras högst upp i det vänstra hörnet, sekundära funktionen högst upp till höger och avslutningen sker längst ner till höger på skärmen. Mindre prioriterad information visas i det nedre vänstra hörnet.

(31)

23

Kalkylering

Bild 13 - Skisskoncept av tabellvy

(32)

24

Beredning

Bild 14 - Konceptförslag 1 av beredningsvyn

Bild 14 är utformad med flikar längst den vänstra kanten. Varje flik är en kategori och när en flik aktiveras synliggörs ett fönster i mitten av skärmen med val användaren kan göra inom

respektive kategori. Längst till höger visas en bild på hur dörren kommer att se ut. Längst ner till höger visas knappar som används för en sista granskning av all bestämd data.

(33)

25 system arbeta. Användare börjar med den vänstra fliken och jobbar sedan från vänster till höger där sista fliken är ”granska”. Det visas likt Bild 14 en förhandsgranskning av hur dörren kommer att se ut.

(34)

26 Bild 17 - Konceptförslag 4 av beredningsvyn

Bild 17 är en variant av Bild 16 men där en popup-ruta visas om valet användare gör har underkategorier. En sammanfattning av alla variabler som bestämts visas längst ner till höger. Alla dessa förslag presenterades för uppdragsgivaren som gav synpunkter. Generellt sett såg alla förslag bra ut och kunde fortsätta för vidare arbete. Ett problem som kan dyka upp, speciellt för Bild 15 är att nya alternativ kan dyka upp i andra flikar när val görs då många variabler och funktioner är kopplade med varandra.

Dessa åsikter tog vidare med till nästa fas.

4.3 Konceptval

Skisserna som presenterades för uppdragsgivaren utvecklades, nu med hjälp av

datorprogrammet Axure. I det här stadiet kunde gränssnittet utformats mer detaljerat då proportioner och typsnittsstorlek kunde användas i korrekt storlek.

Här lades lite fokus på vilka färger eller typsnitt som ska användas utan fokus låg fortfarande på hur utformningen av gränssnittet ska se ut och vart information ska visas.

4.3.1 Koncept för kalkylering

(35)

27 Bild 18 - Koncept för kalkylering - Tabellvyn

Första förslaget visas i Bild 18. Här låg fokus på hur användare ser all information. Användare arbetar främst i den övre tabellen, tanken är att den kommer vara mest synlig. Detta för att fånga intresset och gör att användare sannolikt kommer att använda den tabellen först (enligt

Normans designprincip för synlighet). När användare har fyllt i den övre tabellen, klickar användaren på OK och tabellen ”skickas” till den nedre tabellen och sedan nollställs och användare kan fortsätta skriva in nästa rad.

(36)

28 Bild 19 - Koncept för kalkylering - Listvyn

Koncept nummer två för kalkylering som visas i Bild 19 är den över tabellen ersatt av en stor ruta där alla val görs via listor. Funktionen är desamma som det första förslaget, när användare är klar med litteran, dvs en rad i tabellen, (Varje objekt, dörr exempelvis är en rad eller en littera i tabellen) klickar användaren på OK. Alla textrutor och val som gjorts nollställs och

(37)

29

4.3.2 Konceptförslag för beredning

Bild 20 – Koncept för beredning – 3-Delen.

(38)

30 Bild 21 - Koncept för beredning - Kundordern

(39)

31 Bild 22 – Koncept för beredning - Flikarna

Bild 22 är en vidareutveckling av Bild 14. Flikarna är placerade längst vänster kant. Användare börjar med den översta fliken och successivt jobbar sig nedåt. När varje flik är klar visas en bock som indikerar användaren att fliken är gjord. När varje flik aktiveras ändras färgen och all data inom ämnet visas i den stora rutan.

När nya val finns tillgänglig visas, likt Bild 21, en röd cirkel/fyrkant i hörnet av fliken där de nya valen finns tillgängliga.

4.3.3 Presentation av konceptförslagen för SSC

Alla förslag presenterades för anställda på SSC genom en noggrann beskrivning av varje koncept hur den tänkta arbetsprocessen är. Anställda kom sedan med synpunkter och åsikter över förslagen och nya förslag diskuterades fram.

Nedan i Tabell 3 presenteras för- respektive nackdelar för varje koncept som presenterade på SSC.

Tabell 3 – För- och nackdelar från konceptförslag.

Konceptförslag Fördelar Nackdelar

Tabellvy Enkelt. En tabell som sammanställer allt.

Får bara plats för de mest vanligaste valen.

Utnyttjar inte hela skärmen. Listvy

Mycket bra översikt över de val som gjorts.

Senaste litteran, får ingen information om vad den innehåller. Vill se mer information.

Kundordern Bild. Meddelande om nya val. Kan bli för rörigt om alla _{underkategorier visas i samma fönster.} Flikarna Bild, generell information. Blir för besvärligt med många flikar.

3-delen

Bild, generella

informationsrutan och sammanfattning. Popuprutan.

(40)

32

4.4 Slutgiltigt koncept

Det slutgiltiga konceptet för kalkylering och beredning visas i Bild 23, Bild 24 och Bild 25. De anställda och projektarbetaren tog gemensamt beslut om hur arbetsprocessen ska se ut och därmed hur layouten på gränssnittet bör vara. Delar av koncepten som presenterades

kombinerades ihop och gav ett slutgiltigt resultat. Anställda inom kalkyleringsavdelningen och beredningen hade liknande åsikter kring förslagen och därför liknar slutgiltiga koncepten för både kalkylering och beredning varandra.

Bild 23 - Slutgiltigt koncept tabellvy 1

Bild 23 - Slutgiltigt koncept tabellvy 1 visar hur första sidan för kalkylering kommer att se ut. Användare kommer att arbeta med översta tabellen. Där fyller användaren i relevant data och när användare är klara klickar användare på den gröna OK-knappen och raden läggs ner i den nedre tabellen som visar det senaste raderna som gjorts. Samtidigt som detta sker nollställs den översta tabellen och användare kan direkt påbörja skriva in ny data. Behövs mer variabler än det som visas i tabellen klickar användare på den gråa knappen ”FLER VARIABLER” och användare kommer till en ny sida, se Bild 24 - Slutgiltigt koncept tabellvy 2.

Ifall något går fel visas en popup-ruta när användare klickar på OK som förklarar felet och användaren får frågan att fortsätta utan att ändra eller gå tillbaka och ändra. Väljer användaren att fortsätta visas den raden i tabellen i orange färg, och med ett information-tecken.

Den nedre tabellen är något mindre än den övre. Här visas också två tabeller. En som visar alla variabler som har bestämts och en som visar prisinformation för varje rad. I det nuvarande systemet visas priset i den sista cellen i tabellen. Det gör att användare behöver scrolla för att läsa hur mycket det kostar.

(41)

33 Bild 24 - Slutgiltigt koncept tabellvy 2

I Bild 24 kommer användare åt alla variabler som finns. Variablerna är grupperade i kategorier där flikarna motsvarar varje kategori. Arbetsprocessen är desamma som på första sidan.

Användare arbetar i den gråa stora rutan och fyller i de variabler som behövs. När användare är klar, klickar användaren på OK och informationen skickas ner till tabellen som visar senaste arbetet som gjorts.

I detta fönster finns också, som efterfrågades av några anställda, en bild som visar resultatet. Här finns också rutan ”Sammanfattning” där alla variabler som har bestämts visas i listvy.

(42)

34 Bild 25 - Slutgiltigt koncept, beredning

Bild 25 visar hur sidan för beredning ser ut. Den är snarlik med andra sidan för kalkylering. Skillnaden är att den nedre tabellen, pris och generella anteckningar är borttagna. Den stora gråa rutan har fått mer utrymme då fler variabler ska in. Förhandsgranskningsrutan är större för att få plats med mer generell information.

Här fyller användare i de data som behövs och klickar sedan på OK när allt är klart. En

sammanfattning finns även här och har samma funktion som på Bild 24. Allts som bestämts visas i sammanfattningsrutan.

(43)

35

5 Diskussion

I detta kapitel diskuteras hela projektet med personliga reflektioner. Här diskuteras hur de problem som har uppstått under processen har hanterats. Resultatet av projektet analyseras utifrån teorin och kapitlet avslutas med rekommendationer för fortsatt arbete.

5.1 Projektet som helhet

Projektet som helhet har varit roligt men även tidskrävande. Liknande projekt där ett gränssnitt hade utvecklas hade gjorts förr men detta projekt var mycket mer komplicerat.

Under stora delar i början av projektet var det stora oklarheter kring över vad jag skulle göra. Jag visste att jag skulle göra ett gränssnitt för ett nytt system men ju mer in i detalj jag grävde ner mig ju svårare blev projektet. Här gällde det verkligen att ta in information om vad som var relevant utesluta och ignorera det irrelevanta. Det var lättare sagt än gjort.

5.2 Tid och resurser

Utmaningen i detta projekt var den korta perioden som fanns och att hinna göra allt som skulle göras enligt planen. Planeringen höll till viss del, vissa faser tog längre tid än planerat och andra tvärtom. Jag insåg med tiden att projektet var mer komplext och tidskrävande än vad jag trodde från början. Det gällde verkligen att anpassa sig efter verkligheten och kompromissa för att hålla tidsschemat.

Tidsbrist är något som jag fick uppleva många gånger under projektet. Det var svårt, speciellt under användartesterna att planera en tid som passade alla. Under mitten av maj hade avdelningen utbildningar av det nya systemet som varade i flera dagar. Uppdragsgivarna som också var på utbildningar har också andra aktiviteter och var därmed borta. Då jag hade ett pressat tidsschema blev det problem, under den perioden hade jag mycket arbete att göra. När möten skulle planeras med uppdragsgivarna blev det ofta krock och antingen fick jag åka ner tidigare än planerat eller så fick jag vänta med att presentera. Det sistnämnda alternativet funkade inte då mitt tidschema inte skulle hålla. En viktig lärdom med detta har jag insett är hur värdefull framförhållningen är, speciellt i ett pressat tidsschema.

En till sak som har orsakat tidsplaneringen är saknaden av en gruppmedlem. Många beslut togs och val gjordes enskild vilket drog ut på tiden då det inte fanns någon att bolla idéer med. Det är också lättare att ta tag i uppgifter om man vet att en annan i projektet också gör uppgifter. Nu, efter att detta projekt är slut har jag insett vikten att arbeta med utvecklingsprojekt i grupp.

5.3 Intervjuer och användartester

Intervjuerna var en bra informationskälla, dock hade det sina brister. Då vissa personer hade jobbat i det nuvarande systemet i 15år och är väl insatt i hur det funkar, var inte så intresserade av en förändring. Helst skulle det se exakt likadant ut bara att all data var uppdaterade. Andra personer hade jobbat med systemet i bara 1 vecka och därmed var fortfarande under

inlärningsfasen. Den personen hade mycket åsikter om systemet och önskemål kring hur detta ska se ut.

Resultatet från intervjuerna var väldigt brett och jag valde därför att försöka kompromissa och utforma något som alla är nöjda med. Planen var att under idégenereringsfasen göra

pappersprototyper men på grund av ett pressat tidsschema, dålig framförhållning och utbildningar hos SSC visades lösningarna upp genom videokonferens för att göra det så

(44)

36 Användartester skulle göras enligt planeringen. Planen var från början att göra interaktiva prototyper som de anställda skulle testa. Jag skulle dokumentera tid, antal klick och observera hur användarna navigerar i systemet. Detta gjordes inte på grund av att jag hade svårt att komma fram till hur interaktionen ska fungera då jag inte visste alla funktioner och inställningar som skulle göras.

Om användartester hade gjort för anställda inom kalkylavdelningen med en version som är lik den gamla och en version som helt olik den gamla skulle resultatet av testerna orättvisa pga. erfarenheter hos användarna. Därför valde jag istället att endast fokusera på layouten och därför demonstrerade jag själv för de anställda hur systemet ska se ut.

5.4 Resultat och teori

I det nuvarande systemet visas mycket information på samma sida. Detta medför det Norman beskriver som synlighetsproblemet, dvs. att användare får svårt att identifiera funktioner och information om det visas för mycket information samtidigt. Detta jag har lagt fokus på, speciellt på första sidan för kalkylering. Den nedre tabellen visar endast dina senaste rader du har gjort och eftersom den tabellen inte är jätteintressant enligt förundersökningen. Den primära uppgiften är att fylla i raden och därför är den något större.

Typografin som valdes är Arial. Ett vanligt typsnitt som används på webbsidor. Den är enkel och eftersom den är vanlig känner datoranvändare känner igen den och på så vis kan den klassas som ett osynligt typsnitt.

Samtliga slutgiltiga resultat är layouten utformad efter Gutenbergs diagram, se Figur 2 -

Illustration av Gutenberg diagram. Primära funktioner är placerade i det övre vänstra hörnet på skärmen. Arbetet avslutats med en sammanställning av hela arbetet i det nedre högra hörnet. Genom att följa Gutenberg diagram löser det många områden McKay skriver om att beakta vid gränssnittutformning.

Fokus – Indikerar var användare ska uppmärksamma först.

Då den primära funktionen är placerad i det övre vänstra hörnet samt att tabellen på första sidan för kalkylering är typsnittet något större jämfört med den nedre tabellen.

Flöde – Ger en enkelt och smidigt skanningsmönster för användare att följa genom hela sidan.

Då layouten är utformad enligt Gutenbergs diagram får layouten ett enkelt och smidigt flöde.

Bestämning – Visar var skanningsmönstret slutar. Detta sker oftast när användare har slutfört en

uppgift.

Den gröna knappen som användare klickar på för att bekräfta sina val visas i det nedre högra hörnet på den specifika rutan.

Ordning – Gränssnittets funktioner och objekt presenteras på ett logiskt sätt utifrån uppgiftflöden.

Sidans primära funktion bör sticka ut mer än andra.

Den primära funktionen för kalkylering är att skriva i tabellen. Därför är också typsnittet och tabellen större än den andra.

Kontrollstorlek och avstånd – Knappar dimensioneras utifrån dess syfte och behov. Kontroller

och knappar placeras på lämpligt sätt för att visa deras relationer med varandra.

(45)

37

Betoning – Objekt och funktioner bör betonas olika beroende på prioritet och för att ge en visuell

hierarki. Om alla objekt på en sida har samma betong har användare svårare att skanna av sidan. Knapparna finns i två olika färger beroende på syfte. En grön för att bekräfta och liknande och en grå för andra funktioner.

Layout galler – Är osynliga linjer som används för att ge sidor ett ordnat utseende.

Detta användes främst i andra sidan för kalkylering och på beredningsvyn. Texten är högerjusterad och textrutorna är vänstercentrerad.

Typsnitt

Typsnittet som används är Arial. På första sidan är typsnittsstorleken på den översta tabellen större jämfört den nedre tabellen. Detta för att få ökad uppmärksamhet hos användarna. Den blå färgen gentemot den gråa färgen i den nedre tabellen är också för att öka uppmärksamheten för användarna.

Färg

Knapparna kommer att finnas i två färger. En grön knapp som används för

godkännande/bekräftelse av val och dylikt. Den grå visas för alla andra val, exempelvis byta fönster. Detta stämmer överens om vad McKay säger om färgstandarder.

En blå markeringsfärg och en orange färg för markering när littera ej är skyltat markerar två olika saker. Färgerna användes likt det McKay skriver om färgstandarder samt användes färgerna för att de framhäver varandra bra då dessa är komplementfärger.

Affordance är vad objekt sänder för ledtrådar till användare om vad den tillåts att göra. Ett

exempel är en bok. Den tillåts att lyftas, bläddras i, kastas, eldas upp och så vidare. En bra affordance behöver ingen förklaring. Behövs instruktioner på hur objektet har används är det en dålig design.

Knapparna har två olika färger, exempelvis en grön och en lite mörkare grön färg. Den mörka färgen ger ett intryck av en skugga och skuggan ger effekten av att objektet inte är platt. Detta liknar på så sätt hur en fysisk knapp ser ut med skuggor och på så sätt ger det en indikation att det går att trycka/klicka på den.

Feedback eller återkoppling är effekten när användare utför en handling. Det vill säga en

bekräftelse och resultatet på att en handling är utförd. Återkoppling kan ske på olika sätt. Det kan ske visuellt, taktil (känsla) eller auditiv (ljud). Ett exempel är lampor. När användare trycker på knappen tänds lyset.

När användare klickar på OK ser användaren att en ny rad har lagts till i tabellen samtidigt som all data i listorna har nollställts.

5.5 Fortsatt arbete

(46)

38

6 Slutsats

I detta kapitel redovisas frågeställningarna och projektets syfte och hur dessa har löst under projektet.

Frågeställning 1

 Hur ser arbetsprocessen ut för personalen inom kalkylering och vilka behov har personalen? Hur arbetsprocessen ser ut togs fram under förundersökningen. Här var observationen och den kontextuella undersökningen bra metoder för att besvara frågeställningen.

Anställda jobbar mycket med att skriva av alla förfrågningar in i kalkylen. Behovet är att lätt kunna få en överblick över kalkylen och de val som har gjorts.

 Hur ska all information presenteras och vart ska informationen visas?

Marknadsundersökningen var ett hjälpmedel för att se hur andra program löser problemet att hantera många funktioner. En gemensam metod i många program var användningen av flikar vilket också används i det slutgiltiga resultatet.

 Hur ska funktioner placeras för att ge interaktionen av designen ett logiskt flöde? Här var Gutenbergs diagram ett stort hjälpmedel för att besvara frågeställningen. Skärmen delades upp i 4 delar och utifrån resultatet från förundersökningen kunde objekt placeras utifrån dessa 4 delar.

SYFTE OCH MÅL

”Undertecknad ska visa att han självständigt kan utföra ett utvecklingsarbete inom teknisk design, i det här fallet inom grafisk användargränssnitt.

Målet med projektet är att skapa en användarvänlig layout av gränssnittet till det nya systemet som anställda på företaget ska arbeta i när programmet e-Con är färdigutvecklat.”

Detta projekt har gjorts självständigt med undantag till viss vägledning av handledare och uppdragsgivare. Jag har använt mig av en känd mall som även har använts i många andra utvecklingsprojekt i andra kurser, för att strukturera upp arbetet.

(47)

39

7 Referenser

Arvola, M. (2014). Interaktionsdesign och UX. Lund: Studentlitteratur AB.

Bergström, B., Flessa, G., Lundgren, P., & Petersson, L. (1999). Medieboken. Grafisk Kommunikation. Malmö: Liber-Hermod.

Berndtsson, J., & Ottersten, I. (2002). Användbarhet i praktiken: praktiska handgrepp, grundbegrepp och tankemodeller. Lund: Studentlitteratur.

Bohgard, M., Karlsson, S., Lovén, E., Mikaelsson, L.-Å., Mårtensson, L., Osvalder, A.-L., . . . Ulfvengren, P. (2015). Arbete och teknik på människans villkor. Stockholm: Prevent. Johannesson, H., Persson, J.-G., & Pettersson, D. (2013). Produktutveckling - Effektiva metoder för

konstruktion och design. Stockholm: Liber AB.

Monö, R. (1997). Design for product understanding: the aesthetics of design from a semiotic approach. Stockholm: Liber.

N McKay, E. (2013). UI is Communication - How to Design Intuitive, User Centered Interfaces by Focusing on Effective Communication. Waltham: Elsevier Inc.

Nilsson, K. (2014). Färglära. Stockholm: Carlsson.

Norman, D. (2002). The design of everyday things. New York: Basic Books.

SVID. (2016). SVID, Stiftelsen Svensk Industridesign. Hämtat från Definitionen av design: http://www.svid.se/sv/Vad-ar-design/Definitionen-av-design/ den 24 Maj 2016 Wikberg Nilsson, Å., Ericson, Å., & Törlind, P. (2015). Design - Process och metod. Lund:

Studentlitteratur.

(48)

(49)

3

Frågor Svar

Ålder: 43

Kön Man

Hur lång erfarenhet har personen jobbat i systemet:

15år Vad jobbtitel har personen? Kalkylatör Vem ingår i din familj? Fru och 3 barn Utbildningsbakgrund 4år, företagsekonomi Fritidsintressen:

Hur ofta görs detta?

Spelat hockey som barn

Vad är viktigt för dig? (Saker, personer)

Familjen Hur ofta jobbar anställda med

systemet.

Lite grann, då och då, dagligen?

Dagligen

Vart jobbar ni? (Kontor, utomhus) Kontoret Har du jobbat i liknande

kalkylsystem?

Ja ungefär, jobbat i ett annat företag Hur ser en vanlig dag ut för den

anställda?

Startar programmet och börjar räkna

Vad är bra med systemet? Relativ snabb och logisk. Väldigt snabb. Bra att kunna personanpassa. Allt går att navigera i tangentbord. Vill inte endast använda tangentbord.

Vad är mindre bra med systemet? Visualisera lite mer när det blir fel. Får väldigt lite information.

Hur vill du att det nya systemet ska vara?

Det ska vara snabbt! Snabbt att mata in. Bilder är inget han behöver. Ca 70% av alla offerter slängs. Därför är det viktigt att systemet är snabbt.

(50)

4

Ålder: 33

Kön Kvinna

DCX i en vecka. GCX i 1.5år. Det är uppbyggt av DCX

Vad jobbtitel har personen? Affärsstöd Vem ingår i din familj? 2barn och sambo

Utbildningsbakgrund 2år yrkesutbildning, 1.5år språk Fritidsintressen:

Vara ute med barnen, skogen

Positiv stämning, saker och ting funkar, mår bra. Barn, familj

Hur ofta jobbar anställda med systemet.

Dagligen

Vart jobbar ni? Kontor, utomhus

Kontoret

Har du jobbat i liknande kalkylsystem?

Ja GCX, glaspartier Hur ser en vanlig dag ut för den

anställda?

Internrevisor, jobbar då och då med det. Räknar där. Mycket inlärning. Kollar mail.

Vad är bra med systemet? Allt är förinställt. Kortkommandon exempelvis. Vad är mindre bra med systemet? Trädet är svårt att navigera i. Väldigt plottrigt.

Färgerna är förvirrande. Alldeles för mycket text! En inställningsruta för all information. Ifall hon ska byta till laminat på alla dörrar i

kalkylen. Hur vill du att det nya systemet ska

vara?

Inte så plottrigt, cleant. Så lätt som möjligt. Förkortningar är lite luddigt. Skriv bredd och höjd. Buggig. Infoga: Tillåtna, ingående,

nödvändiga, varnande. Dubbla menyrader?? En ruta för avvikelser

(51)

5

Ålder: 35

Kön: Man

4år Vad jobbtitel har personen? Affärsstöd Vem ingår i din familj? Gift och två barn Utbildningsbakgrund Systemvetare Fritidsintressen:

Hänger med familj, slalom, film

Familj, roligt och må bra Hur ofta jobbar anställda med

systemet.

Dagligen

Kontor

Nja, olika beroende för vilken produkt det är. Hur ser en vanlig dag ut för den

anställda?

Sitter och räknar på offerter. Ansvarar för IT. Vad är bra med systemet? Kalkylvyn är snabb och pedagogisk.(Håller själv

inte med) Du kan personanpassa vyn. (Bara kalkylvyn, inte trädet). Snabb överblick Vad är mindre bra med systemet? Tre rutor som tar plats. Vill ha mer plats för

tabellen. Går att manuellt ändra fönstren men då kan det komma information som sedan inte syns och man får manuellt ändra tillbaka det så att man ser. Byta flikar. Oklart med färger. Gör det tydligare när någonting är konstigt. Det visas bara i trädet.

Mer info. Kanske bilder? Mer pedagogiskt. Du får ingen hjälp. En M25 säger en ingenting. Färger påverkas lite grann.

(52)

6

Ålder: 44

Kön: Kvinna

3,5år Vad jobbtitel har personen? Affärsstöd Vem ingår i din familj? Man och 2barn Utbildningsbakgrund Gymnasieutbildning Fritidsintressen:

Familj, sommarstugan

Barn, familj Hur ofta jobbar anställda med

systemet.

Dagligen

Kontor

Nej Hur ser en vanlig dag ut för den

anställda?

Kalkylerar hela dagarna

Vad är bra med systemet? Snabbt, går att jobba fort. Går att tabba. Går att gruppera. (Ex, går att få ut pris bara för antal dörrar för plan 2). Vill ha all information på en sida. Går att infoga en sak och infoga för hela kalkylen.

Vad är mindre bra med systemet? Det är inte uppdaterat. Varningarna kommer upp i fel tillfälle. Förtydliga vart du är. Fraktpris är på en annan flik.

Snabbt, snabbnavigerat, bara tangentbord. Bilder kan vara trevligt. Inte på bekostnad av att det blir långsammare.