1. Bilag: Brugertest for gammel site

Transkript

1 Bilag 1

2 1. Bilag: Brugertest for gammel site Brugertest af Isabellais.dk Scenarie 1 Gå ind på Du har på forsiden nogle vine som er fremhævet, de er placeret i nogle bokse, som du har mulighed for at trykke på hvis du vil læse mere om vinen. Der er 2 forskellige menuer, du har en hoved menu, som ligger i toppen og en undermenu ude til venstre. På top menuen har du så f.eks. mulighed for at vælge forhandler. Hvis du klikker på dette punkt, kommer der et billede frem af Danmark, som illustrerer hvor de forskellige butikker er lokaliseret. Under sortiment, har du mulighed for, at indtaste nogle søgekriterier og få de ønsket vine frem. Nu skal du kigge væk og kigge på mig, det er nemlig ikke dette website, vi vil have dig til at teste. Vi ønsker at du skal teste på et website for en is butik. Hvordan forstiller du dig et website for en is butik ser ud? Denne butik sælger Italienske is og ligger vægt på kvalitet og en god oplevelse. Hvilken informationer forstiller du dig, at kunne finde på dette website og er der noget specielt, som du ville forstille dig findes på websitet? Med dette scenarie, vil vi gerne søger for at testdeltageren føler sig tryg ved testen. Samtidigt kan vi få en ide om, hvordan folk forventer en is butik på nettet ville se ud. Det er også vigtigt og vide om testdeltageren, har nogen baggrund for sine forventninger. Husk at hjælpe test person i gang, få en dialog i gang og test person skal føle sig fortrolig. Beskriv sitet? Hvad er det første som du lægger mærke til på sitet / Hvad er det mest iøjefaldende? Hvad tænker du om teksten, har du lyst til at læse eller ej? Har du før været på et site for producenter for is? Hvad gjorde det ved din holdning? Scenarie 2 Klik dig ind på forsiden af Isabellais.dk, i toppen af websitet er der en lyserød bjælke i to nuancer. Forsøg at beskriv hvilken oplevelses og følelser den lyserøde bjælke vækker i dig. Med dette spørgsmål ønsker vi at opnå en afklaring, om hvordan den tredje emotive funktion 1 gør sig gældende på isabellais.dk. Hvordan påvirker produktet/designet af websitet testdeltageren, føler testdeltageren at han/hun er en del af den tænkte målgruppe. Scenarie 3 Klik lidt rundt på sitet, der er noget billede materiale på sitet, hvad tænker 1 L.Tholacius MVKW s. 5 2

3 du om det og giver det dig nogle specielle associationer? (Hvad repræsenter det billede for dig og giver det dig nogle associationer? hvad tænker du? hvilke følelser sætter det i gang hos dig?) Med dette scenarie vil vi gerne undersøge, hvorvidt den konative reception 1 gør sig gældende på Isabellais.dk. Få testdeltageren rent faktisk en købelyst, af at kigge på de forskellige undersider for den enkelte is. hvordan Isabellais.dk`s budskab fungerer. Er det klart for den enkelte modtager hvilke holdninger og følelser, Isabellais.dk vil kommunikere. Dette scenarie er sat op, med fokus på hvorvidt den første emotive funktion 2 fungerer på websitet. Afslutning. Hvordan vil du vurdere websitet som helhed, er der nogle specielle ting du har lagt mærke til. Scenarie 4 Isabella is budskab er til det gode liv, hvordan forstår du dette budskab? Klik dig nu ind på forsiden. Hvordan føler du at Isabellais.dk`s kommunikerer dette budskab? Med dette scenarie ønsker vi at afdække 1 L.Tholacius MVKW s. 8 2 L.Tholacius MVKW s. 4 og5 3

4 2. Bilag: Gant tidsplan 4

5 3. Bilag: Designskitser 5

6 6

7 7

8 8

9 IsʈÊBella Italiensk is Kaffe Kolde Drikke Kontakt Bestil Is Online Lad dig friste online 9

10 4. Bilag: Kode Kode med kommentarer Dette afsnit forklarer relevante kodeafsnit. Linje numrene som er angivet refererer til linjenumrende for Html: Index.html Css: style.css Slideshow: index.html, style.css, s3slider.js Eksempler på kode: HTML Websitet er bygget op omkring en wrapper (l. 67) som indeholder navigationsmenuen og centrerer siden, samt en inner wrapper (l. 101) som indeholder resten af sitet. Under navigationsmenuen er en div box placeret som indeholder alt topindholdet (#topcontent l.102) derefter to div bokse, #onlineshop og #infobar som indeholder henholdvis ikonet til onlineshoppen og den blå bjælke til højre hvori åbningsoplysninger og adgang til kort kan findes.nederst findes en div box (#content) som på indexsiden indeholder nogle indholdsbokse, og på alle alle undersider indeholder informerende tekst. Udvalgte kodeeksempler fra html-filen Index.html: META data til søgeoptimering (l.8-15) <!--META DATA TIL SEO START --> <meta name= description content= Hos Is à Bella kan du få Italiensk is af bedste kvalitet. Køb enten online og få bragt ud til døren eller smut ned til en vores butikker. /> <meta name= keywords content= Hjemmelavet is, Is a Bella, isabella, Is à Bella, Italiensk is, isbutik, sorbet is, familiefest, is desserter, is, online is, gelato, glutenfri, kundeservice /> <meta name= author content= KNORD multimedia /> <meta name= content= [email protected] /> <meta name= Robots content= INDEX,FOLLOW /> <meta name= Revisit-after content= 1 Day /> <!--META DATA TIL SEO SLUT --> Søgeoptimering Vi har søgeoptimeret vores website ved hjælp af metatags og udover dette indeholder teksten keywords som yderligere optimerer søgningen: Eksempel fra undersiden Italiensk Is (keywords markeret med rødt) Hos Isabella har vi kun Italiensk is af bedste kvalitet. Vi står tidligt op hver 10

11 morgen for at gøre isen klar til dig, så du kan nyde frisk is hver dag. Vi holder nøje øje med vores råvarer og gør kun brug af små leverandører. Det sikrer at vores is altid er af høj kvalitet. Vi har kun hjemmelavet is og tilbyder både is lavet på mælk, sorbet is og yoghurt is. Udover det har vi også is til allergikere, diabetikere og veganere. Vi lægger en dyd i at tilbyde en høj kundeservice så vores kunder altid går tilfredse herfra. Wrapper med navigationsmenuen (l.71-96) <div id= wrapper ><!--ALL CONTENT CONTAINED WITHING --> <div id= navbar > <div id= navcontent > <a href= index.html ><img src= images/layout/logo.png alt= Is à Bella Logo /></a> <!--ROLLOVER EFFECT --> <a href= italienskis.html onmouseover= buttondown( isbutton ) onmouseout= buttonup( isbutton ) > <img src= images/layout/icons/icon01up.png alt= Italiensk Is name= isbutton border= 0 class= nav /> </a> <a href= kaffe.html onmouseover= buttondown( kaffebutton ) onmouseout= buttonup( kaffebutton ) > <img src= images/layout/icons/icon02up.png alt= Kaffe name= kaffebutton border= 0 class= nav /> </a> <a href= koldedrikke.html onmouseover= buttondown( koldebutton ) onmouseout= buttonup( koldebutton ) > 11

12 </a> <img src= images/layout/icons/icon03up.png alt= Kolde drikke, milkshakes name= koldebutton border= 0 class= nav /> <a href= butik.html onmouseover= buttondown( butikbutton ) onmouseout= buttonup( butikbutton ) > <img src= images/layout/icons/icon04up.png alt= Om Is à Bella name= butikbutton border= 0 class= nav /> </a> <!--ROLLOVER EFFECT --> </div> CSS Vi har valgt at gøre brug af to separate css filer. Én til selve sitet, og en anden til webshoppen, det har på den måde været nemmere at lave ændringer i en uden det har forstyrret dets anden layout. Dette har været hensigtsmæssigt da webshoppen er udformet anderledes end resten af sitet. Udvalgte kodeeksempler fra style.css Udsnit af kode fra trejdeparts bibliotek. Del af slidegalleri på forsidet..sliderimage span { top:200px; position: absolute; font: 15px/20px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 384px; background-image:url(images/layout/navbar.jpg); filter: alpha(opacity=80);/*---ikke VALIDERET---*/ -moz-opacity: 0.8;/*---- DA VI HAR VALGT AT BRUGE EN GENNEMSIGTIG KASSE I SLIDE GALLERIET KUNNE DETTE IKKE VALIDERES. DETTE SKYLDES AT BROWSERNE IDAG IKKE OVERHOLDER STANDARDERNE-*/ -khtml-opacity: 0.8;/*--IKKE VALIDERET---*/ opacity: 0.8;/*--IKKE VALIDERET---*/ 12

13 color: #fff; display: none; Al kode er valideret gennem W3schools valideringsproces, dog kunne ovenstående ikke valideres da det ville betyde forringet funktionalitet af website på nogle browsere. Dettt skyldes at selv browserne ikke overholder standarderne. Yderligere kommentarer findes hovedsageligt i index.html og style.css JavaScript i HTML koden til slideshow <!--SCRIPT FOR SLIDER START --> <script type= text/javascript src= js/jquery.js ></script> <script type= text/javascript src= js/s3slider.js ></script> <script type= text/javascript > $(document).ready(function() { $( #slider ).s3slider({ timeout: 5000 ); ); </script> <!--SCRIPT FOR SLIDER END --> JavaScript til slideshow /* s3slider.js Developped By: Boban Karišik -> CSS Help: Mészáros Róbert -> Version: 1.0 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top */ (function($){ 13

14 $.fn.s3slider = function(vars) { var element = this; var timeout = (vars.timeout!= undefined)? vars.timeout : 4000; var current = null; var timeoutfn = null; var faderstat = true; var mover = false; var items = $( # + element[0].id + Content. + element[0].id + Image ); var itemsspan = $( # + element[0].id + Content. + element[0].id + Image span ); items.each(function(i) { $(items[i]).mouseover(function() { mover = true; ); $(items[i]).mouseout(function() { mover = false; fadeelement(true); ); ); var fadeelement = function(ismouseout) { var thistimeout = (ismouseout)? (timeout/2) : timeout; thistimeout = (faderstat)? 10 : thistimeout; if(items.length > 0) { timeoutfn = settimeout(makeslider, thistimeout); else { console.log( Poof.. ); var makeslider = function() { current = (current!= null)? current : items[(items.length-1)]; var currno = jquery.inarray(current, items)

15 currno = (currno == items.length)? 0 : (currno - 1); var newmargin = $(element).width() * currno; if(faderstat == true) { if(!mover) { $(items[currno]).fadein((timeout/6), function() { if($(itemsspan[currno]).css( bottom ) == 0) { $(itemsspan[currno]).slideup((timeout/6), function() { faderstat = false; current = items[currno]; if(!mover) { fadeelement(false); ); else { $(itemsspan[currno]).slidedown((timeout/6), function() { faderstat = false; current = items[currno]; if(!mover) { fadeelement(false); ); ); else { if(!mover) { if($(itemsspan[currno]).css( bottom ) == 0) { $(itemsspan[currno]).slidedown((timeout/6), function() { $(items[currno]).fadeout((timeout/6), function() { faderstat = true; current = items[(currno+1)]; if(!mover) { fadeelement(false); 15

16 ); ); else { $(itemsspan[currno]).slideup((timeout/6), function() { $(items[currno]).fadeout((timeout/6), function() { faderstat = true; current = items[(currno+1)]; if(!mover) { fadeelement(false); ); ); makeslider(); ; )(jquery); CSS til slideshow /*SLIDERJS START*/ #topcontent { height:291px; width:590px; float:left; padding-top:14px; padding-bottom:70px; padding-left:30px; #topcontent p{ margin-right:22em; /* ---- TREJDE PARTS BIBLIOTEK START----*/ #slider { 16

17 width: 590px; /* important to be same as image width */ height: 291px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ #slidercontent { width: 634px; /* important to be same as image width or wider */ position: absolute; top: 0; margin-left: 0;.sliderImage { float: left; position: relative; display: none; border:1px solid black;.sliderimage span { top:200px; position: absolute; font: 15px/20px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 384px; background-image:url(images/layout/navbar.jpg); filter: alpha(opacity=80);/*---ikke VALIDERET---*/ -moz-opacity: 0.8;/*---- DA VI HAR VALGT AT BRUGE EN GENNEMSIGTIG KASSE I SLIDE GALLERIET KUNNE DETTE IKKE VALIDERES. DETTE SKYLDES AT BROWSERNE IDAG IKKE OVERHOLDER STANDARDERNE-*/ -khtml-opacity: 0.8;/*--IKKE VALIDERET---*/ opacity: 0.8;/*--IKKE VALIDERET---*/ color: #fff; display: none;.clear { clear: both; 17

18 .sliderimage span strong { font-size: 14px;.top { top: 0; left: 0;.bottom { bottom: 0; left: 0; visibility:hidden; ul { list-style-type: none; /*SLIDERJS END*//* TREJDE PARTS BIBLIOTEK SLUT */ 18

19 5. Bilag: Gangstertest på det nye site Gangstertest udført på Spørgsmål Beskrivelse Point 1. Hvilket Website befinder du dig på? Is a bella 3 2. Hvilke overordnede menupunkter findes på websitet? 3 3. Hvilken underside befinder du dig på? Blev i tvivl om jeg stod på forsiden eller om jeg var under italienske is. 2 19

20 Spørgsmål Beskrivelse Point 4. Hvilke muligheder har du på dette niveau? Jeg har mulighed for at klikke videre i menuen foroven, hvilket er nemt og finde ud afj 3 Hvor er du i den samlede struktur/hvordan er du kommet hertil? Klikkede mig ind på en underside og fandt hurtigt tilbage til forsiden ved hjælp af siden. 3 Points I alt: 14 points ud af 18 mulige 20

21 Spørgsmål Beskrivelse Point 1. Hvilket Website befinder du dig på? Isabellais.dk 3 2. Hvilke overordnede menupunkter findes på websitet? Italiensk is, kaffe, kolde drikke og om is a Bella 3 3. Hvilken underside befinder du dig på? Der findes ingen?? Medmindre man ser kaffe fx, som en underside til forsiden J 1 21

22 Spørgsmål Beskrivelse Point 4. Hvilke muligheder har du på dette niveau? HVIS jeg skal se kaffe som en underside til forsiden, så kan jeg bestille is online. 2 Hvor er du i den samlede struktur/hvordan er du kommet hertil? Der er brødkrummesti me like J 3 Points I alt: 13 points ud af 18 mulige 22

23 Spørgsmål Beskrivelse Point 1. Hvilket website befinder du dig på? Virksomhedens logo fremstår tydeligt i venstre hjørne af websitet og er tydeligt på alle undersider. Virksomhedens navn samt slogan står også i browserbaren. 3 points 2. Hvilke overordnede menupunkter findes på websitet? 3. Hvilken underside befinder du dig på? 4. Hvilke muligheder har du på dette niveau? Navigationsmenuen findes 3 points umiddelbart ved siden af logoet, i højre side. I højre hjørne findes adgang til Onlineshop samt kontaktoplysninger og information om åbningstider Undersidens navn står klart i overskrifter over et billede som også tydeliggører undersidens indhold Der er adgang til lokalnavigation igennem store ikoner samt links, men ingen decideret lokalmenu findes 3 points 2 point 5. Hvor er du i den samlede struktur/hvordan er du kommet hertil? Under undersidens overskrift findes en brødkrummesti som viser den eksakte sti Points I alt: 3 points 14 oints ud af 18 mulige 23

24 6. Bilag: Brugertest af nye site Brugertest af Isabellais.dk Scenarie 1 Gå ind på Du har på forsiden nogle vine som er fremhævet, de er placeret i nogle bokse, som du har mulighed for at trykke på hvis du vil læse mere om vinen. Der er 2 forskellige menuer, du har en hoved menu, som ligger i toppen og en undermenu ude til venstre. På top menuen har du så f.eks. mulighed for at vælge forhandler. Hvis du klikker på dette punkt, kommer der et billede frem af Danmark, som illustrerer hvor de forskellige butikker er lokaliseret. Under sortiment, har du mulighed for, at indtaste nogle søgekriterier og få de ønsket vine frem. Nu skal du kigge væk og kigge på mig, det er nemlig ikke dette website, vi vil have dig til at teste. Vi ønsker at du skal teste på et website for en is butik. Hvordan forstiller du dig et website for en is butik ser ud? Denne butik sælger Italienske is og ligger vægt på kvalitet og en god oplevelse. Hvilken informationer forstiller du dig, at kunne finde på dette website og er der noget specielt, som du ville forstille dig findes på websitet? Med dette scenarie, vil vi gerne søger for at testdeltageren føler sig tryg ved testen. Samtidigt kan vi få en ide om, hvordan folk forventer en is butik på nettet ville se ud. Det er også vigtigt og vide om testdeltageren, har nogen baggrund for sine forventninger. Husk at hjælpe test person i gang, få en dialog i gang og test person skal føle sig fortrolig. Beskriv sitet? Hvad er det første som du lægger mærke til på sitet / Hvad er det mest iøjefaldende? Hvad tænker du om teksten, har du lyst til at læse eller ej? 24

25 Har du før været på et site for producenter for is? Hvad gjorde det ved din holdning? Scenarie 2 Klik dig ind på forsiden af Isabellais.dk, i toppen af websitet er der en lyserød bjælke i to nuancer. Forsøg at beskriv hvilken oplevelses og følelser den lyserøde bjælke vækker i dig. Med dette spørgsmål ønsker vi at opnå en afklaring, om hvordan den tredje emotive funktion 1 gør sig gældende på Isabellais.dk. Hvordan påvirker produktet/designet af websitet testdeltageren, føler testdeltageren at han/hun er en del af den tænkte målgruppe. Scenarie 3 Klik lidt rundt på sitet, der er noget billede materiale på sitet, hvad tænker du om det og giver det dig nogle specielle associationer? (Hvad repræsenter det billede for dig og giver det dig nogle associationer? hvad tænker du? hvilke følelser sætter det i gang hos dig?) Med dette scenarie vil vi gerne undersøge, hvorvidt den konative reception 2 gør sig gældende på Isabellais.dk. Få testdeltageren rent faktisk en købelyst, af at kigge på de forskellige undersider for den enkelte is. Scenarie 4 Isabella is budskab er til det gode liv, hvordan forstår du dette budskab? Klik dig nu ind på forsiden. 1 L.Tholacius MVKW side 5 2 L.Tholacius MVKW side 8 25

26 Hvordan føler du at Isabellais.dk`s kommunikerer dette budskab? Med dette scenarie ønsker vi at afdække hvordan Isabellais.dk`s budskab fungerer. Er det klart for den enkelte modtager hvilke holdninger og følelser, Isabellais.dk vil kommunikere. Dette scenarie er sat op, med fokus på hvorvidt den første emotive funktion 1 fungerer på websitet. Afslutning. Hvordan vil du vurdere websitet som helhed, er der nogle specielle ting du har lagt mærke til. 1 L.Tholacius MVKW side 4 og 5 26