Hassansalem.dk/delpin User: admin Pass: admin INTERFACE DESIGN

Transkript

1 Hassansalem.dk/delpin User: admin Pass: admin INTERFACE DESIGN 1/20

2 Indledning Dette projekt er den afsluttende del af webudvikling-studiet på Erhvervs Lillebælt 1. semester. Projektet er udarbejdet med Del-pin som case med fokus på udlejningssystem. Formålet med projektet har været at planlægge, kontrollere, designe og udvikle et udlejningssystem af maskiner og værktøjer for Delpin A/S. Dette projekt tager udgangspunkt i forholdet mellem planlægning og implementering gennem en konkret problemstilling i forhold til Del-pin. Denne rapport indeholder en lang række overvejelser, hvad angår interface design. Det vil sige placering og udseende af udlejningssystem, design af specielle udlejningssystem, design af logo, en overordnet hjemmeside, brugen af mobil side, effekter, fotos og tekster til mobil hjemmeside. 2/20

3 Indholdsfortegnelse Indledning 2 Problemformulering 4 Afgrænsning af projektet 4 Metodeafsnit 4 Konceptet 5 Sketching 5 Conceptual design 5 Title page 6 Overview 6 The user description 6 Storyboard of user experience 7 Prototype 8 Features/Functionality 8 Justifications for design 9 User test 9 Shortcomings 9 Expansion- What else is possible 9 The next steps in the design process 10 The summary 10 Information Architecture 10 Card Sorting 10 Task analysis visualised in flowcharts 11 Wireframes 11 Visual design principles / principle of contrast 11 Konklusion 12 Litteraturliste 12 Bilag 2 14 Bilag 3 15 Bilag 4 16 Bilag 5 17 Bilag 6 18 Bilag 7 19 Bilag /20

4 Problemformulering I samarbejde med Delpin vil vi udarbejde en rapport og et udlejningssystem til firmaets kunder og medarbejder. Rapporten vil indeholde en virksomhedsanalyse, samt dokumentation for design og udvikling. Vi vil i projektet bruge viden, som vi har tillært os i de respektive fag: Project Management, Interface Design & Backend. Spørgsmål Hvordan udvikler vi et enkelt, brugervenligt og effektivt udlejningssystem? Hvilke yderligere funktioner kan implementeres til systemet? Hvordan planlægger og styre vi projektet? Hvordan udvikler vi systemet mest hensigtsmæssigt i forhold til selve designet? Hvordan skal systemet laves og implementeres? Afgrænsning af projektet Projektet er afgrænset til følgende: Opsætningen af et udlejningssystem system, design af en mobil hjemmeside med tilhørende undersider. Desuden er der kun udført tests på den mobile hjemmeside, da udlejningssystemet kun er forbeholdt os som udviklere. Metodeafsnit For at besvar problemformulering vil vi i denne rapport arbejde ud fra nedenstående metoder: Sketching Conseptual Design Storyboard Prototype 4/20

5 Card Sorting Flowcharts Wireframes Visual Design Konceptet Vi har et koncept for Del-Pin som kan håndtere udlejning af maskiner og værktøjer online fremfor deres nuværende telefonisk udlejning. Udlejning-konceptet er et helt enkelt koncept for både besøgende (kunder) og admin (Del-Pins medarbejder). Udlejnings konceptet giver gæsten en nem og enkelt udlejning af værktøjer og maskiner. Systemets Backoffice håndterer udover tilføjelser af varer også redigering og sletning. Selv om Del-Pin har investeret i en hjemmeside, har de nu mulighed for at integrer udlejning systemet som får opdateret deres produkter. Systemet i sig selv er let at arbejde med og har potentiel i at anskaffe flere kunder. Sketching En skitse er en hastigt håndstegning, der har til formål at illustrere et ikke-færdigt produkt. Vi har tegnet skitser af vores udlejningssystem, som vi vil bruge til at udvikle en idé til senere brug. Det er en hurtig måde rent grafisk at demonstrerer ideen eller princippet. Baseret på vores udlejningssystem har vi udarbejdet en række sketches, der giver os et standpunkt at gå ud fra. Vi vil under dette afsnit tager udgangspunkt i vores sketches, men henviser senere i rapporten til billeder af vores prototyper for at give en bedre illustration af forklaringerne. 1 Conceptual design Udveksle af idéer tidligt er ofte nøglen til succes for designere og slutbruger for det produkt man udvikler. At dele ideer og konceptet med målgruppen giver en feedback kan hjælpe en 1 Bilag 1 5/20

6 med at forbedre konceptet. Deling med kollegaer er med til at sikre, at alle på holdet har en lignende vision. Ved at udføre et conceptual design kan vi hjælpe designer og teamet til at forstå den nødvendige koncept, som man er i gang med at udvikle. Vi benytter de 12 punkter, som er beskrevet i Design Research 2 : Title page Del-Pin Udlejningssystem Overview Vi vil udvikle et udlejningssystem for Delpin, som kan håndtere udlejning af maskiner og værktøjer. Konceptet er, at vi udvikler et system for Delpins ansatte, så de kan tilføje, fjerne eller redigerer i deres maskiner og værktøjer samtidige med, at vi også udvikler et system for brugere, så de kan se de maskiner og værktøjer, som Delpin tilbyder. Systemet skal kunne samarbejde med den måde, den vises på for medarbejderne og deres brugere. The user description Vores målgruppe er faglærte tømrer og bygningssnedkere. Primært er det erhvervsfolk, som Delpin satser på, men private og måske også det offentlige kan delpin overveje som målgruppe. Systemet henvender sig til tømrer mellem 30-50årig fra hele Danmark. Scenariet: Det er tidligt søndag aften. Thomas har arbejdet hele ugen og er på udgik efter et værktøj, der kan gøre hans arbejdstilgang lettere. Han kigger på Delpins hjemmeside på hans computer og får øje på et værktøj, som han godt kan bruge næste dag. Han får øje på deres udlejningssystem og skynder sig at bestille det værktøj, som han altid har ønsket. Succes! Der er et stykke værktøj i nærheden af ham, som venter ham næste dag. 2 Design Research: Methods and Perspectives s /20

7 Storyboard of user experience Under storyboard vil vi kigge på de 3 design perspektiveringer, som har betydning for vores historiefortælling. Disse 3 design perspektiveringer bruges til at beskrive vores tankegang og diskussion mht. Design af storyboard. Ecological Perspective Her beskriver man, hvordan systemet virker i det eksterne miljø. Hvilke sammenhæng systemet bruges, og hvorledes systemet interagerer med sine omgivelser i processen. Udlejningssystem er et simpelt system, der kan håndtere udlejning af de værktøjer og maskiner, Delpin tilbyder. Systemet er delt i 2 dele, hvor den ene del er for Delpins ansatte, der kan tilføje, fjerne eller redigere i systemets database, mens den anden del er for bruger, der kan se værktøjer og maskiner. Interaction Perspective Her beskriver man, hvordan bruger betjener systemet. Hvilke opgaver kan bruger benytte og hvordan de bruger det til at integrere med systemet. Systemet er baseret på brugernes søgning af værktøjer og maskiner. Udlejningssystem er let at bruge og har simple værktøjer, som kan navigere brugerne til at realisere deres ønskede produkt eller værktøj. Emotional Perspective Her beskriver man om det følelsesmæssige konsekvenser og følsomme værdier af design. Det handler om det sociale og kulturelle implikationer samt æstetik og glæden ved brug af systemet. 7/20

8 Systemet er let at anvende og kræver intet større avanceret programmering for at benytte det. Systemet gør det sjovt for delpin at tilføje, redigere eller fjerne produkterne fra deres lager samtidigt med, at man bliver engageret i at få brugt netop denne udlejningssystem, da det giver glæde ved brugen. Vi har valgt at udføre storyboard ud fra vores user scenatiet med Thomas. Her vil vi inddrage de 3 design perspektiveringer med i vores storyboard. I alt er der 6 scener som storyboard repræsentere. Scene 1 & 2 viser følelsesmæssige konsekvenser. Scene 3 viser, hvordan bruger betjener systemet. Scene 4 & 5 viser, hvordan systemet virker i det eksterne miljø. Scene 6 viser igen det følelsesmæssige konsekvenser. 3 Prototype Formålet med en prototype er at demonstrere og teste idéer om funktion og design. Vi benytter prototype til at vise vores udlejningssystem for Del-Pin både for bruger og admin. Man tager hurtigt på en spændende rejse ind i en af disse kategorier, hvor man ud fra billeder får overblik over den produkt, man svæver hen over. 4 Features/Functionality Besøgende kan se de værktøjer, som Delpin har og kan tilbyde. Besøgende kan leje et produkt Besøgende kan vælge dato for udlejning. Mulighed for tilføjelser eller rette i produkterne. Mulighed for at slette et produkt 3 Bilag 2 4 Bilag 3 8/20

9 Justifications for design I vores design er der lagt stor vægt på, at det skal være nemt og hurtigt at leje et produkt uden at gå på kompromis med brugervenligheden. Derfor har vi benyttet få farver og billeder. Idéen med designet er, at man skal føle sig som en del af Del-Pin. User test Vi har testet vores koncept sammen med en person fra målgruppen, så brugerens interaktion med et website går så smidigt som muligt efter vores handling. Vores koncept skal være så brugervenligt som muligt. Den brugervenlige hjemmeside skal gerne give så tilfredse kunder som muligt, så det også kan skave troværdighed og øget salg(leje) hos Del-Pin. For at sikre os, at brugerne oplever udlejningssystemet brugervenligt, har vi derfor valgt at lade målgruppen teste vores koncept vha. Prototyper. Da vi endnu ikke har færdigudviklet produktet. Testpersonen gav os et indblik i forståelsen af vores potentielle brugers logik. Der måtte gerne være flere valgmuligheder og flere elementer at vælge imellem. Her mente testpersonen, at billedet i slutningen af udlejning systems proces var det mest interessante. Under denne test har vi fået dannet os et klart billede af, hvordan vores målgruppe har nogenlunde samme tankegang, hvad angår opsætning af vores elementer. Der er dog delte meninger om vigtigheden af flere elementer under udlejningssystem. Testen er taget ud fra at testperson ønsker at leje et jernklipper værktøj. 5 Shortcomings Ikke alle bruger har internet Man skal være online før man kan udleje eller udlåne et produkt. Expansion- What else is possible Lagerfunktion 5 Bilag 8 9/20

10 Mix & match (lej 1 for 20kr. Lej 2 for 30kr.) The next steps in the design process Det næste skridt, man nu tager, er at finde ud af, hvordan man kan få prototypen over til den virkelig verden. Er det muligt at implementere systemet? Vi vil i den efterfølgende afsnit beskrive flowcharts og kigge på de muligheder, vi har for implementering af systemet i et brugervenligt mobil website. The summary Så nu har vi ud fra de 12 design punkter så vildt som muligt beskrevet vores ønskede udlejningssystem. Vi har nu beskrevet vores ønskede design ide igennem storyboard og prototyper. Information Architecture For at sikre, at brugerne kommer til hjemmesiden med det formål, at man hurtigt kan finde, hvad man leder efter, er man nød til at skabe en let forståelig hjemmeside struktur. Denne struktur kaldes hjemmesides informationsarkitektur (IA). Den informerer brugerne om de kategorier hjemmesiden indeholder og danner rammen for navigationsmenuen. En velkonstrueret IA giver brugerne mulighed for hurtigt at scanne navigations links på hjemmesiden for at lære mere om de oplysninger, som hjemmesiden tilbyder. Card Sorting Vi har i gruppen benyttet Card Sorting til at finde placering af indhold på siden. Indhold af siden bliver sorteret og organiseret inder forskellige kategorier, der giver mening for dem. 6 6 Bilag 4 10/20

11 Task analysis visualised in flowcharts Et flowchart er en type diagram, der repræsenterer en proces, der viser de trin og rækkefølge, som er forbundet med systemet. Vi bruger Flowcharts til at analysere, designe, dokumentere og styre en proces på forskellige områder. 7 Wireframes Vi benytter Wireframes til at skabe en visuel illustration af en side på et websted. Vi illustrerer de funktioner og indhold, vores udlejningssystem har på en side. Wireframes er en hurtig måde at starte designprocessen på. Vi har tegnet forskellige wireframes efter responsive webdesign, så vi har forskellige interface objekter. 8 Visual design principles / principle of contrast Når vi designer en hjemmeside er det vigtigt at skabe kontrast. Vi skaber kontrast i forhold til andre hjemmeside eller objekter. Ved kontrast kan man skabe en forskel mellem to elementer. En designer kan skabe en visuel interesse og skabe en opmærksomhed hos brugeren. Da vi har en meget lille system, har vi kun valgt at fokusere på at skabe kontrast ud fra farver. Ved at skabe en bestemt farve kan vi hjælpe brugeren til at få differentieret sideelementer fra hinanden. 7 Bilag 5 8 Bilag 6 & 7 11/20

12 Konklusion Vi har ved hjælp af forskellige skitser og prototyper udviklet et produkt, der giver Del-Pin og deres kunder en ny, nemmere og mere spændende måde at finde information omkring et værktøj og udlejning. Systemet giver os den nødvendige fleksibilitet, som gør, at vi kan koble den fysiske verden sammen med den virtuelle. Desuden medvirker det til at produktet opfanger opmærksomheden hos målgruppen vha. Design kontraster. Produktet har vi testet på en testperson, hvor vi har fået særdeles brugbare informationer omkring udvikling af produktet. Disse test har først og fremmest været med til at bygge produktet i den retning, som målgruppen ønsker, og dernæst været med til at evaluere konceptet. På denne måde har vi inddraget forbrugeren gennem processen og dermed fået skabt et produkt, der lever op til både deres og vores forventninger om en virtuel udlejningssystem. Litteraturliste The UX Book: Process and Guidelines for Ensuring a Quality User Experience Information Architecture for Designer Design Research: Methods and Perspectives design principles secrets of contrast Rex Hartson Peter Van Dijck Brenda Laurel René Birkholm 12/20

13 Bilag 1 13/20

14 Bilag 2 14/20

15 Bilag 3 15/20

16 Bilag 4 16/20

17 Bilag 5 17/20

18 Bilag 6 18/20

19 Bilag 7 19/20

20 Bilag 8 20/20