Hello Sello BSc-project Technische Informatica

Hello Sello BSc-project Technische Informatica

Variant: Vakcode: Projectleden:

MKT IN3405 Vita Dewi van Beurden Benoist Claassen

Bedrijfsnaam: Opdrachtgever: TU begeleider: BSc coördinator: Datum:

ILLUSOFT & Redmar Kerkhoff Dr. ir. C.A.P.G. van der Mast ir. M. Sepers 12-07-2008

1129155 1181610

Technische Universiteit Delft, faculteit EWI

Voorwoord  Dit verslag is ter afsluiting van ons Bachelorproject Hello Sello. Dit is tevens een afsluiting van de bachelorfase van onze studie Media en Kennistechnologie aan de Technische Universiteit Delft. Het bachelorproject heeft als doel, om doormiddel van een externe opdracht het gehele software-ontwikkeltraject te doorlopen. Op deze manier hebben wij geleerd de concepten en technieken die wij in eerdere fasen van de studie hebben geleerd, in de praktijk toe te passen. Het project heeft een duur gehad van 10 weken en is gestart maandag 7 april en geëindigd donderdag 12 juni. Het project is uitgevoerd door Vita Dewi van Beurden en Benoist Claassen. Het project draagt de naam Hello Sello en is een online applicatie waarmee snel en eenvoudig een professionele webshop te maken en te gebruiken is. Graag willen we onze TU begeleider Charles van der Mast bedanken voor de nuttige adviezen en het coördineren van het project. Ook de BSc coördinator Matthijs Sepers willen wij bedanken voor zijn hulp en adviezen. Tot slot willen we onze opdrachtgever Redmar Kerkhoff bedanken voor de intensieve begeleiding en ondersteuning tijdens het project. Wij zijn ontzettend enthousiast over dit project en hebben erg veel ervaring opgedaan.

Delft, juni 2008 Vita Dewi van Beurden & Benoist Claassen

iii

Inhoudsopgave  Voorwoord .............................................................................................................................................................. iii  Samenvatting ............................................................................................................................................................v  1  Inleiding .............................................................................................................................................................1  2  De probleemstelling ...........................................................................................................................................2  2.1  Het Hello Sello concept .............................................................................................................................2  2.2  Doel van het project...................................................................................................................................2  2.3  Activiteiten ................................................................................................................................................2  2.4  Technische aspecten ..................................................................................................................................2  2.5  Begeleiding van het project .......................................................................................................................3  3  Planning en Methode .........................................................................................................................................3  3.1  Planning .....................................................................................................................................................3  3.2  Methode .....................................................................................................................................................4  4  De analyse ..........................................................................................................................................................6  4.1  Gebruikersanalyse......................................................................................................................................6  4.2  Bestaand materiaal.....................................................................................................................................6  4.2.1  Kwaliteitsonderzoek over het bestaande materiaal ...........................................................................7  4.3  Vernieuwingsmogelijkheden .....................................................................................................................8  4.4  Concept model ...........................................................................................................................................9  5  Het ontwerp......................................................................................................................................................11  5.1  Programma van eisen...............................................................................................................................11  5.1.1  Functionele eisen .............................................................................................................................11  5.1.2  Niet functionele eisen ......................................................................................................................12  5.2  Scenario’s ................................................................................................................................................13  5.3  Usecase diagram ......................................................................................................................................18  5.4  Flowcharts................................................................................................................................................19  5.5  Interface impressie...................................................................................................................................23  6  De implementatie .............................................................................................................................................25  6.1  Interface impressies omzetten naar HTML .............................................................................................25  6.2  Implementatie van de functionaliteit .......................................................................................................27  7  De resultaten ....................................................................................................................................................29  7.1  Vergelijking met de huidige webshop aanbieders ...................................................................................29  7.2  Kwaliteitsonderzoek van het nieuwe systeem .........................................................................................34  7.2.1  Enquête HelloSello ..........................................................................................................................34  7.2.2  Task-Usability Test..........................................................................................................................35  8  Proces verslag ..................................................................................................................................................37  9  Conclusies en aanbevelingen ...........................................................................................................................38  9.1  Conclusies................................................................................................................................................38  9.2  Aanbevelingen .........................................................................................................................................38  Literatuurlijst ..........................................................................................................................................................39  Bijlage 1: Onderzoeksverslag .................................................................................................................................40  Bijlage 2: Enquête over bestaand materiaal............................................................................................................41  Bijlage 3: Interface impressies................................................................................................................................42  Bijlage 4: Enquête over HelloSello ........................................................................................................................43  Bijlage 5: Usability-Test voorbeeld observatie ......................................................................................................44 

iv

Samenvatting  Middel en Klein bedrijven die het in de huidige cultuur druk genoeg hebben met het runnen van hun zaak en behoefte hebben aan het verkopen van hun producten via het internet, hebben vaak geen tijd om nieuwe technieken te leren. Het is daarom van groot belang dat het beheer van een webshop gebruiksvriendelijk en overzichtelijk is. In dit project was het de bedoeling dat er onderzoek gedaan werd naar een nieuw intuïtief systeem, dat voldoet aan de belangen van de webshop beheerder. Voor de ontwikkeling van het nieuwe webshop systeem is onderzocht wat de goede en de slechte kwaliteiten van huidige webshop aanbieders zoals Shopify, Wosbee en MijnWebwinkel zijn. Aan de hand van de kwaliteiten van deze huidige webshop aanbieders zijn er punten van verbetering opgesteld. Tijdens het ontwerp van het systeem zijn er scenario’s opgesteld aan de hand van het programma van eisen. Deze scenario’s zijn omgezet in flowcharts. Daarna zijn er interface impressies met de hand uitgetekend, waarbij de flow van het systeem gevisualiseerd werd. Het systeem is geïmplementeerd met de iteratief-prototyping werkwijze, waarbij elk onderdeel uitvoerig werd getest op gebruiksvriendelijkheid en zonodig aangepast voordat een nieuw onderdeel werd geïmplementeerd. De webshop aanbieder Wosbee kwam op de laatste plaats in het kwaliteitsonderzoek. Het beheer van deze webshop is niet overzichtelijk en allerminst gebruiksvriendelijk; de webshop aanbieder scoorde een 5. De webshop aanbieder Shopify kwam als tweede uit de test; de webshop aanbieder scoorde een acceptabele 7,5. Mijnwebwinkel kwam als beste uit de test; deze webshop scoorde een 8. Het HellosSello systeem is met hetzelfde kwaliteitsonderzoek geëvalueerd als de huidige webshop aanbieders. Deze evaluatie wees uit dat het HelloSello systeem gebruiksvriendelijk en overzichtelijk is; op deze punten scoorde het systeem een overtuigende 9. De reden dat het systeem gebruiksvriendelijk en overzichtelijk is, komt volgens de ondervraagden door het feit dat elke aanpassing direct zichtbaar is. De adminbalk, met daarin alle beheer mogelijkheden van de webshop, aan de onderkant van de pagina zorgt voor een eenvoudige en consistente manier van beheren, omdat de Shop eigenaar hetzelfde ziet als de Shop klant. Door de javascript libraries die zijn geleverd, is het in het vervolg heel makkelijk om nieuwe onderdelen te integreren in het beheer systeem. Dit zorgt ervoor dat elk onderdeel in dezelfde stijl beheerd kan worden. Het HelloSello systeem is dus makkelijk in het gebruik en uit het kwaliteitsonderzoek blijkt het systeem een significante verbetering te zijn ten opzichte van de huidige webshop aanbieders. Ook is het systeem makkelijk uit te breiden met meer webshop functionaliteit, mits er gebruik wordt gemaakt van de geleverde javascript libraries.

v

1 Inleiding  In de hedendaagse cultuur van de Middel en Klein Bedrijven (MKB) hebben ondernemers weinig tijd en investeringskapitaal. Door het gebrek aan een groot investeringskapitaal worden er vaak goedkope software ontwikkelaars ingehuurd met weinig verstand van usability. Hierdoor blijven ondernemers die iets willen verkopen via internet, opgescheept zitten met een webshop die niet handig en snel werkt. Door de vele werkzaamheden, die horen bij het starten van een onderneming, heeft de ondernemer weinig tijd voor het leren van een nieuw systeem. Het is daarom van groot belang dat een nieuw webshop systeem weinig tot geen uitleg behoeft, zodat de ondernemer direct aan de slag kan met het verkopen van zijn producten. Het voordeel van het hebben van een webshop, is dat je als ondernemer direct veel meer potentiële klanten kunt bereiken. In dit project is een webshop systeem ontwikkeld, dat het mogelijk maakt om snel en eenvoudig een webshop aan te maken voor een ondernemer. In dit prototype van een webshop systeem, is voornamelijk rekening gehouden met de usability. Eerst is er een onderzoek gedaan naar de gebruikers van het systeem. Tijdens dit onderzoek moest er een gebruikersprofiel opgesteld worden aan de hand van de User-Profile checklist aanpak (Mayhew DJ, 1992). Om te achterhalen wat de ideale usability features zijn, is er een onderzoek gehouden naar bestaande bottlenecks in de huidige systemen. Voorafgaand aan dit onderzoek is er een enquête gehouden over de bestaande systemen. Aan de hand daarvan zijn verbeter punten opgesteld, die in het prototype zijn onderworpen aan een kwaliteitsonderzoek met verschillende gebruikers. Dit kwaliteitsonderzoek is uitgevoerd aan de hand van de Task usability test methode (Kuniavsky M, 2003) . De functionaliteit van de webshop heeft in het prototype een lagere prioriteit. Het beheer systeem moet overzichtelijk en gebruiksvriendelijk zijn. Verder bevat het prototype alle belangrijke functies van een simpele webshop, waarbij er gelet is op de uitbreidingsmogelijkheden van het uiteindelijke systeem. Dit houdt in dat onderdelen die toegevoegd worden, op een eenvoudige manier zijn te integreren met het beheer systeem. De opbouw van dit verslag is als volgt. In hoofdstuk 2 wordt de probleemstelling beschreven, waarin duidelijk wordt wat het doel van dit project is. Gevolgd door de planning en beschrijving van de gebruikte methoden in hoofdstuk 3. Hoofdstuk 4 beschrijft de analyse van het probleem. Hierbij wordt onder andere bestaand materiaal onderzocht. In hoofdstuk 5 staat het ontwerp van het systeem centraal. Hoofdstuk 6 beschrijft de implementatie fase. In hoofdstuk 7 wordt het systeem geëvalueerd en staan de resultaten van deze evaluatie. Hoofdstuk 8 beschrijft per week hoe het proces tijdens dit project is verlopen. Ten slotte komen in hoofdstuk 9 de conclusies en aanbevelingen aan bod.

1

2 De probleemstelling  In dit hoofdstuk staat de probleemstelling. De probleemstelling bevat een beschrijving van het Hello Sello concept, het doel van het project en de activiteiten. Ook komen de technische aspecten aan bod zoals ook vastgesteld in het onderzoeksverslag (zie bijlage 1) die gemaakt is in de vorige periode. Als laatste komt de begeleiding aan de orde.

2.1 Het Hello Sello concept  Hello Sello is een online applicatie waarmee snel en eenvoudig een professionele webshop is te maken en te gebruiken. De kracht van Hello Sello ligt in de eenvoud, waardoor er goed nagedacht is over een intuïtieve interface waarbij gebruikers zich thuis voelen. Gebruiksgemak moet centraal staan in dit product. Er zijn immers al verschillende websites die deze online applicatie aanbieden. Het is van belang dat de applicatie alle benodigde functionaliteit van een webshop bevat en dat deze heel simpel is in het gebruik. Dit in combinatie met vaste lage maandlasten, moet ervoor zorgen dat de drempel om een webshop aan te maken heel laag ligt. In het ontwerp van het product moet er gestreefd worden naar het aanmaken van een startklare webshop op een eenvoudige manier.

2.2 Doel van het project  Aangezien Hello Sello zich nog in de eerste ontwikkelfase bevindt is het deel van het product wat ontwikkeld moet worden in dit project beperkt tot 1 front-end instantie van de webwinkel en de backend van de webwinkel. Hierbij ligt de nadruk op de userinterface van het admingedeelte voor het aanmaken en het beheren van de webshop. Het moet mogelijk zijn voor de beginnende webwinkelier en voor mensen met zeer weinig ervaring met computers om een webshop te kunnen onderhouden zonder hulp van anderen. Deze userinterface moet sterk geïntegreerd zijn met de userinterface van de front-end van de webshop zodat er geen grote omschakeling gemaakt hoeft te worden tussen het bekijken van het webwinkel gedeelte en het beheren ervan. Het webwinkelgedeelte moet wel de belangrijkste functies van een webwinkel bevatten zoals bijvoorbeeld een zoekfunctie, het winkelwagentje en het betaalgedeelte. Maar in dit project zal de nadruk voornamelijk liggen op het admingedeelte waarbij bijvoorbeeld de volgende vragen belangrijk zijn: is het makkelijk voor een webwinkeleigenaar om een product toe te voegen aan een pagina of categorie? Is het duidelijk waar een product terug te vinden is? Kan er makkelijk een plaatje worden toegevoegd aan een product? Het project omslaat dus niet zozeer het uitbreiden van de basisfunctionaliteit van een webwinkel.

2.3 Activiteiten  In hoofdlijnen zullen de volgende activiteiten tijdens het project aan bod komen: • Het analyseren van bestaand materiaal en daaruit verbeterpunten opstellen • Bekend worden met Rails en bijbehorende tools en Git version control • Ontwerp en bouwen van 1 front-end instantie van de webwinkel • Ontwerp en bouwen van de back-end van de webwinkel (de userinterface van het admin gedeelte) • Testen van het systeem • Userstudy (evalueren van usability met personen)

2.4 Technische aspecten  De technieken die we moeten gaan gebruiken (zoals gespecificeerd door de opdrachtgever) bij de ontwikkeling van Hello Sello zijn: • • • • • • • • • • •

Ruby on Rails Framework Agile Development SCRUM Extreme Programming Version Control Decentralized met GIT Test Driven Behavior driven Javascript / AJAX CSS XHTML

2

2.5 Begeleiding van het project  De volledige verantwoordelijkheid over het project ligt bij de heer Redmar Kerkhoff. Hij heeft ons dagelijks begeleid en ondersteund tijdens het project.

3 Planning en Methode  In dit hoofdstuk staat de oorspronkelijke planning gevolgd door de daadwerkelijke planning en als laatste komen de gebruikte ontwikkelmethoden aan bod.

3.1 Planning  Oorspronkelijke planning

Afbeelding 3-1 - Oorspronkelijke planning Daadwerkelijke uitgevoerde planning

Afbeelding 3-2 - Daadwerkelijke planning

3

Zoals in afbeeldingen 3-1 en 3-2 is af te lezen is, komt de oorspronkelijke planning nagenoeg overeen met de daadwerkelijke planning. Het eerste verschil zit in de implementatie van de interface. Deze interface onderging, gedurende de implementatie fase steeds veranderingen. Het tweede verschil zit in week 8, waarbij een eerste prototype van het systeem klaar was op een kwart van de week.

3.2 Methode  Tijdens dit project is er gekeken naar een aantal software ontwikkelmethoden. Allereerst is de waterval methode bekeken (Dix A., 1998). Deze methode houdt in dat je alle stappen achterelkaar uitvoert zoals te zien is in afbeelding 3-3. Elke output is de input voor een volgende fase in het ontwikkelproces. Deze output wordt aan het einde van een fase geëvalueerd naar de opdrachtgever en de gebruikers. Deze methode is voor dit project te weinig dynamisch, want het is lastig om aan het begin van de ontwikkelingsfase de doelstellingen precies vast te leggen. Deze doelstellingen moeten in dit project echter tijdens het ontwikkelen aangepast kunnen worden, naarmate de problemen meer verkend zijn. E v a l u a t i e

Analyse Ontwerp Implementatie Test/Revisie Invoering

Afbeelding 3-3- Het waterval model In dit project is daarom gekozen voor iteratief prototyping (Dix A., 1998) ook wel agile development (Thomas D., 2006) genoemd. In afbeelding 3-4 is een diagram te zien waaruit blijkt dat evaluatie een centrale en constante rol speelt bij het gehele ontwikkelproces. Deze ontwikkelmethode zorgt ervoor dat het prototype in een vroeg stadium te visualiseren is. Ook worden er meerdere prototypes ontwikkeld. Deze prototypes geven de opdrachtgever de mogelijkheid om aan te geven wat hij precies wil en dat het systeem voldoet aan zijn eisen. Het is ook mogelijk om bepaalde onderdelen in het systeem vroegtijdig te testen met testpersonen en op basis van cognitieve walkthrough (Dix A., 1998). Cognitieve walkthrough houdt in, dat de ontwikkelaar zich voordoet als de gebruiker van het systeem. De ontwikkelaar doorloopt het systeem dan op dezelfde manier als de uiteindelijke gebruiker van het systeem ook zou doen.

4

Implementatie

Ontwerp

Evaluatie

Prototyping

Analyse

Afbeelding 3-4- Het iteratief prototyping model

Verder zijn de methoden en technieken gebruikt uit paragraaf 2.4. Deze methoden en technieken zijn vastgelegd door de opdrachtgever. UML is gebruikt voor het maken van de diagrammen van het systeemontwerp. De scenario’s en de UML diagrammen zijn uitgewerkt volgens de software engineering methodes uit ObjectOriented Software Engineering (Lethbridge T.C., 2005). De flowchart en het concept model zijn uitgewerkt op basis van de website documentatie methoden (Brown D., 2007). De interface impressies zijn gemaakt op basis van de MMI methoden (Dix A., 1998). In dit project zijn dus verschillende methoden met elkaar gecombineerd.

5

4 De analyse  Na het opstellen van de probleemstelling is er een analyse gemaakt. De analyse helpt bij het ontwerpen van het product. Na een beschrijving van bestaand materiaal en een onderzoek over gebruiksvriendelijkheid van het bestaande materiaal, zijn er vernieuwingsmogelijkheden opgesteld. Als laatste is er een concept model opgesteld.

4.1 Gebruikersanalyse  Om te bepalen welke vaardigheden de gebruikers van het systeem bezitten, moet er een gebruiksprofiel opgesteld worden. Dit gebeurt aan de hand van de User-Profile checklist (Mayhew D.J., 1992). Het gebruikers profiel staat in tabel 4-1. Gebruikersprofiel Psychologische karakteristieken • •

Houding Motivatie

Positief Ongedwongen

Kennis en Expertise • • • • • • • • •

Lees niveau Type vaardigheid Opleiding Systeem ervaring Taak ervaring Applicatie ervaring Moedertaal Gebruik van andere systemen Computer vaardigheid

goed gemiddeld Havo - MBO matig matig geen Nederlands matig matig

Werk en taak karakteristieken • • • • • • •

Gebruiksfrequentie Primaire training Systeem gebruik Werk categorieën Andere tools Taak belang Taak structuur

hoog geen niet-verplicht geen geen hoog geen

Fysieke karakteristieken • • •

Kleuren blind Links- rechtshandig Geslacht

komt voor beide beide

Tabel 4 – 1 – User-Profile checklist Uit het gebruikersprofiel blijkt, dat het systeem gebruikt gaat worden door mensen met weinig computer en internet ervaring. Dit houdt ook in dat mensen met minstens de vereiste ervaring, ook gebruik kunnen maken van het systeem. Bij het ontwerpen van het systeem moet hierin rekening gehouden worden, door een overzichtelijke userinterface te ontwerpen die de grote diversiteit in ervaring aanspreekt.

4.2 Bestaand materiaal  Het maken van een generieke webshop is geen nieuw product op zich. Tijdens dit project is daarom gekeken naar bestaand materiaal. In afbeeldingen 4-1, 4-2 en 4-3 zijn een aantal websites te zien die zijn gebruikt voor een onderzoek doormiddel van een enquête over de gebruiksvriendelijkheid van die website.

6

Shopify.com Shopify is één van de grotere webshop aanbieders. Zij bieden grote flexibiliteit in hun webshops en beweren erg gebruiksvriendelijk te zijn.

Afbeelding 4-1 - Shopify.com

Wosbee.com Een andere grote aanbieder van e-commerce producten is Wosbee. Ook zij bieden net als Shopify een erg flexibele webshop aan.

Afbeelding 4-1 - Wosbee.com Mijnwebwinkel.nl Mijnwebwinkel is een Nederlandse aanbieder van webshops. Zij beweren dat je snel een eenvoudig een webshop kan aanmaken en starten.

Afbeelding 4-3 - Mijnwebwinkel.nl 4.2.1 Kwaliteitsonderzoek over het bestaande materiaal  Na het bekijken van een aantal webshops is er een enquête opgesteld. Deze enquête moest inzicht geven in de goede en slechte kwaliteiten van de bestaande webshops. De enquête is bijgevoegd als bijlage 2 en resultaten van de gehele enquête staan hieronder samengevat in een grafiek.

7

Cijfer 

Gebruiksvriendelijkheid  Mijnwebwinkel  Wosbee 

Overzichtelijkheid 

Shopify 

Uiterlijk 

0 

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

Afbeelding 4-4 - Enquête uitslag Uit de grafiek in afbeelding 4-4 blijkt dat Mijnwebwinkel als beste uit de enquête komt, gevolgd door Shopify en als laatste Wosbee. Shopify en Mijnwebwinkel ontlopen elkaar niet veel, maar tonen wel duidelijke verschillen. Shopify maakt gebruik van de “What you see is what you get” (WYSIWYG) methode, waarbij de aanpassingen direct zichtbaar zijn in het beheer systeem en Mijnwebwinkel gebruikt de standaard CMS methode, waarbij elk invoer formulier op een aparte pagina staat. Mijnwebwinkel wordt om die reden dan ook als iets minder gebruiksvriendelijk ervaren. Mijnwebwinkel scoort het beste op het gebied van overzichtelijkheid. Dit heeft alles te maken met het feit dat alles simpel is gehouden. Shopify is ook redelijk overzichtelijk, maar het is niet altijd duidelijk waar alle functies precies staan. Het is bijvoorbeeld niet direct duidelijk hoe een product zichtbaar wordt op een pagina. Uit de opmerkingen uit de enquêtes blijkt, dat Wosbee een heel onoverzichtelijk beheer systeem heeft. Het beheer systeem heeft heel veel mogelijkheden die onoverzichtelijk zijn geplaatst op de website. Bijna alle deelnemers van de enquête slaagden er niet in om een product toe te voegen aan de winkel. De reden dat ze op overzichtelijkheid iets hoger dan een 5 scoren, heeft dan ook alles te maken met de overzichtelijkheid van de webshop zelf. De standaard webshop die zij leveren, wordt namelijk wel als overzichtelijk ervaren.

4.3 Vernieuwingsmogelijkheden  Na het bekijken van bestaand materiaal en het houden van een enquête, is er een lijst opgesteld van mogelijke vernieuwingsmogelijkheden die de usability vergroten. Deze mogelijkheden zijn hieronder op verschillende onderdelen benoemd. Back-end ShopOwner • • • • •

Onderdelen die aanpasbaar zijn, moeten dit bij mouse-over kenbaar maken. Het aanpassen van de items moet mogelijk zijn op de huidige plaats (WYSIWYG). De back-end van shopeigenaar in dezelfde stijl als de front-end van HelloSello. Niet verplichte maar toch belangrijke velden moeten, indien ze niet worden ingevuld, een duidelijke melding geven. Continuïteit qua plaatsing van de functiemogelijkheden. Bijvoorbeeld een balk met functiemogelijkheden vast onderaan de pagina.

Front-end Shop •

Belangrijke basisfuncties moeten aanwezig zijn op een duidelijke manier.

8

•

Templates kunnen aangepast worden naar eigen wens, maar moeten voldoen aan vooraf gestelde standaarden zodat de usability gehandhaafd wordt. (vb: plaatje van cart bij shoppingcart)

Front-end Hello Sello Shop • • •

Het registreren van een webshop moet in een oogopslag te vinden zijn. De demo moet in een oogopslag te vinden zijn. De drempel, om het maken van een demo webshop, nog lager te maken. Bijvoorbeeld door klanten alleen een shop naam op te laten geven. Waarna ze direct naar het beheersysteem worden toe geleid. Als de demo bevalt dan is het als nog mogelijk om met een paar gegevens de shop vast te leggen.

4.4 Concept model  Het concept model geeft inzicht in de scope van het project. Elk onderdeel in het model heeft een duidelijke naam. Deze benaming van onderdelen helpt bij het discussiëren over het gehele project, omdat iedereen weet waar het over gaat. Het concept model laat ook in een vroeg stadium zien, wat de grootte van het project ongeveer zal zijn. Zie afbeelding 4-5 voor het concept model.

9

Afbeelding 4-5 - Concept model

10

5 Het ontwerp  Na het maken van een analyse over de probleemstelling, is er een ontwerp gemaakt. Bij het maken van een ontwerp is allereerst een programma van eisen gemaakt. In dit programma staan alleen functionele en niet functionele eisen die, waaraan het systeem moet voldoen. Vervolgens zijn aan de hand van de eisen, scenario’s opgesteld. Deze scenario’s geven inzicht in de acties die een gebruiker moet uitvoeren om een bepaald resultaat te verkrijgen. Uit de scenario’s ontstaan er duidelijke functies die het systeem moet bevatten. Deze functies zijn afgebeeld in een usecase diagram. De functies hebben een bepaalde flow in het systeem en dit is afgebeeld in de flowcharts. Als laatste zijn er aan de hand van de scenario’s, het usecase diagram en de flowcharts, interface impressies gemaakt.

5.1 Programma van eisen  Het programma van eisen is bedoeld voor het bepalen van de functies die het systeem moet bevatten. In dit project draaide het niet volledig om de functionaliteit van de applicatie, maar voornamelijk om de usability van het systeem. Om die reden is de applicatie klein gehouden en zijn daarom alleen de belangrijkste functies opgenomen in het programma van eisen. 5.1.1 Functionele eisen  ShopOwner De ShopOwner heeft de mogelijkheid een aangemaakte webwinkel te beheren. 1.

2.

Een ShopOwner maakt via de HelloSello website een webwinkel aan. i.

Aanpassen webwinkel eigenschappen

ii.

Aanpassen van ShopOwner accountgegevens

Een ShopOwner beheert pagina’s. Daarvoor maakt hij gebruik van paginabeheer, het systeem wat hiervoor gebruikt wordt bevat de volgende functies. i.

Pagina’s toevoegen

ii.

Pagina’s verwijderen

iii. Pagina’s wijzigen iv. Pagina’s toevoegen aan menu v. 3.

Pagina’s verwijderen uit menu

Een ShopOwner beheert producten. De ShopOwner maakt hierbij gebruik van productbeheer, het systeem dat hiervoor wordt gebruikt bevat de volgende functies. i.

Producten toevoegen

ii.

Producten verwijderen

iii. Producten wijzigen iv. Producten toevoegen aan een pagina v.

Producten verwijderen van een pagina

vi. Producten toevoegen aan een categorie 4.

Een ShopOwner beheert categorieën. i.

Categorie toevoegen

ii.

Categorie verwijderen

iii. Categorie wijzigen 5.

Een ShopOwner beheert orders. i.

Status van Orders bekijken

ii.

Status van Orders wijzigen

iii. Orders verwijderen

11

ShopCustomer De ShopCustomer heeft de mogelijkheid een webwinkel te bezoeken. 1.

Een ShopCustomer kan via zijn webbrowser een webwinkel bezoeken. Daarbij kan hij gebruik maken van de volgende functies. i.

Pagina’s bekijken

ii.

Navigeren door verschillende pagina’s

iii. Producten per categorie bekijken iv. Producten bekijken v. 2.

Producten zoeken

Een ShopCustomer kan doormiddel van een account bestellingen doen. Voor het beheren van een account zijn de volgende functies mogelijk. i.

Account aanmaken

ii.

Account gegevens wijzigen

iii. Account gegevens verwijderen 3.

4.

Een ShopCustomer kan producten kopen. Hiervoor maakt hij gebruik van een Cart. Bij een Cart hoort de onderstaande functionaliteit. i.

Producten toevoegen aan Cart

ii.

Een gevulde Cart omzetten tot een Order

De ShopCustomer kan een Cart die is omgezet tot een order, betalen in het betaal gedeelte.

5.1.2 Niet functionele eisen  User interface en human factors De gebruikers moeten het systeem kunnen gebruiken met behulp van een computer met internet verbinding en een webbrowser. De gebruikers zijn allemaal verschillend en hebben daarom ook verschillende niveaus op het gebied van computerkennis. Het systeem moet hier rekening mee houden door een overzichtelijke userinterface. Zie voor het gedetailleerde gebruikersprofiel paragraaf 4.1. Documentatie Voor het systeem zal een gebruikshandleiding gemaakt moeten worden. Deze handleiding moet ShopOwners helpen bij het beheren van de webshop. Een aparte help pagina voor klanten, moet de klanten helpen bij het shoppen in de online webshop. Hardware Het systeem zal draaien op externe voorgeïnstalleerde webservers, die het Rails framework ondersteunen. Voor het beheer van het systeem is een gewone standaard computer vereist met een webbrowser. Systeemkwaliteit De website moet werken met een redelijke snelheid. Taken die een lange wachttijd nodig hebben, moeten zoveel mogelijk op de achtergrond draaien. Foutmelding Het systeem mag nooit crashen als de pc van de gebruiker vastloopt. Er moet zoveel mogelijk voorkomen worden dat ongewenste systeem foutmeldingen in het zichtbaar zijn voor de gebruikers. Eventuele systeemfouten die optreden moeten in een log bestand worden opgeslagen en er moet

12

een melding verstuurd worden naar het development team. Foutmeldingen die zichtbaar moeten zijn voor een gebruiker, bijvoorbeeld bij het foutief invullen van een formulier, moeten afgebeeld worden in een daarvoor bestemd gebied. Systeem aanpassingen Het systeem moet zo ontwikkeld worden dat aanpassingen mogelijk zijn. Bij het aanpassen van het systeem, moet de code eerst op een testlocatie worden getest. Als het systeem goed blijft draaien, mag de update worden doorgevoerd naar het werkelijke systeem. Er moet ook voor gezorgd worden dat gebruikers op de website zo min mogelijk last ondervinden van de wijzigingen in het systeem. Constraints Het systeem moet worden ontwikkeld met behulp van het Ruby on Rails Framework 2.0. De database die gebruikt gaat worden is MySql 5 of hoger. Het systeem wordt ontwikkeld voor de Firefox 3.0 (beta) webbrowser.

5.2 Scenario’s  Voor het omzetten van de eisen naar een daadwerkelijke implementatie, zijn de eisen eerst omgezet naar scenario’s. Deze scenario’s zorgen ervoor dat het duidelijker wordt, welke aspecten er bij een bepaalde systeem eis, naar voren komen. Functienaam: Webwinkel aanmaken Actoren: John: ShopOwner Flow of events: 1.

John bekijkt de website van HelloSello en besluit dat hij zelf ook een webwinkel wil aanmaken

2.

John maakt op de website van HelloSello een ShopOwner account aan door een gegevensformulier in te vullen

3.

In zijn mailbox krijgt hij vervolgens een activatiecode die hij op de website van HelloSello moet invullen om zijn webwinkel eenmalig te activeren

4.

Nadat de webwinkel geactiveerd is logt John in en is hij in het back-end gedeelte van zijn webwinkel waarna hij direct begint met het aanpassen van de lay-out en het toevoegen van producten

Functienaam: Aanpassen van webwinkel eigenschappen Actoren: John: ShopOwner Flow of events: 1.

John wil de lay-out template van zijn webwinkel aanpassen.

2.

John logt in op de Hello Sello website

3.

In het back-end gedeelte van zijn webwinkel kan hij een andere template kiezen.

4.

Nadat hij een andere template heeft uitgekozen en bevestigd is zijn webwinkel in de nieuwe stijl veranderd.

Functienaam: Aanpassen van accountgegevens Actoren: John: ShopOwner Flow of events: 1.

John heeft een nieuw adres en wil dit graag wijzigen in zijn account.

2.


3.

In het back-end gedeelte van zijn webwinkel kan hij zijn eigen gegevens wijzigen. Hij wijzigt dan ook zijn oude adres in een nieuw adres.

4.

John bevestigd zijn actie en de gegevens zijn gewijzigd

13

5.

John logt uit.

Functienaam: Pagina toevoegen aan shop en menu Actoren: John: ShopOwner Flow of events: 1.

John wil een nieuwe pagina toevoegen aan zijn webwinkel.

2.

John logt in op de HelloSello website

3.

In het back-end gedeelte van zijn webwinkel klikt hij op de knop om een nieuwe pagina aan te maken. Hij krijgt een leeg formulier die hij invult en aanpast.

4.

John drukt op de knop om een pagina toe te voegen.

5.

John bevestigd zijn actie en de pagina is aan de shop en aan het standaard menu toegevoegd.

Functienaam: Pagina wijzigen Actoren: John: ShopOwner Flow of events: 1.

John ondekt dat hij een verkeerde titel bij een pagina heeft geplaatst. En wil daarom een pagina wijzigen.

2.


3.

In het back-end gedeelte van zijn webwinkel gaat hij naar de betreffende pagina en wijzigt in het reeds ingevulde formulier van de pagina de titel zodat het nu wel correct is.

4.

John bevestigd zijn aanpassing en de pagina is gewijzigd

Functienaam: Pagina verwijderen uit shop en menu Actoren: John: ShopOwner Flow of events: 1.

John wil een pagina in zijn totaliteit verwijderen.

2.


3.

In het back-end gedeelte van zijn webwinkel gaat hij naar de betreffende pagina en klikt op de knop verwijder pagina.

4.

John bevestigd zijn actie en de pagina is uit de shop en uit het menu verwijderd.

Functienaam: Producten toevoegen, koppelen aan een pagina en categorie Actoren: John: ShopOwner Flow of events: 1.

John heeft een nieuw boek in zijn collectie van romans opgenomen en wil dit product te koop zetten in zijn webshop

2.


3.

John gaat naar zijn producten beheer toe en klikt op product toevoegen

4.

Er verschijnt een leeg formulier en John vult alle gegevens in

5.

John selecteert uit het lijstje van de categorieën de romans

6.

Uit het lijstje van de pagina selecteert John de hoofdpagina om zijn nieuwe boek goed zichtbaar te maken voor de verkoop

14

7.

John bevestigd het toevoegen van zijn product

Functienaam: Product wijzigen Actoren: John: ShopOwner Flow of events: 1.

John merkt dat zijn nieuwe boek niet zo goed verkoopt en vermoed dat het aan de prijs van zijn product ligt

2.


3.

John gaat naar het producten beheer toe waar hij een overzicht van al zijn producten krijgt

4.

Hij zoekt zijn nieuwe boek op in het lijstje en klikt op de knop om het te wijzigen

5.

John wijzigt de prijs van zijn boek en bevestigd zijn actie

Functienaam: Product verwijderen Actoren: John: ShopOwner Flow of events: 1.

John wil een boek verwijderen die niet meer gedrukt zal worden.

2.


3.

In het back-end gedeelte van zijn webwinkel gaat hij naar het producten beheer gedeelte waar hij een overzicht van al zijn producten krijgt

4.

Hij zoekt het boek op in het lijstje en klikt op de knop verwijder

5.

John bevestigd zijn actie en het boek is verwijderd

Functienaam: Categorie toevoegen Actoren: John: ShopOwner Flow of events: 1.

John heeft net een nieuwe collectie boeken binnen gekregen en beseft dat dit de eerste boeken zijn die in de categorie thrillers horen

2.


3.

Voordat John zijn nieuwe boeken gaat toevoegen aan het systeem, wil hij eerst de categorie aanmaken

4.

John gaat naar het categorie beheer toe waar hij een lijstje krijgt met de aanwezige categorieën

5.

John klikt op de knop categorie toevoegen, waarna er een leeg formulier verschijnt

6.

John vult het formulier in en voegt zijn categorie toe

Functienaam: Categorie wijzigen Actoren: John: ShopOwner Flow of events: 1.

John heeft net zijn nieuwe categorie thrillers toegevoegd, maar ziet tot zijn schrik dat hij thrillers verkeerd heeft gespeld

2.


3.


4.

John kilt op de knop voor het wijzigen van zijn categorie thrillers

5.

Deze keer let John extra goed op zijn spelling en bevestigd zijn wijziging

15

Functienaam: Categorie verwijderen Actoren: John: ShopOwner Flow of events: 1.

John is merkt da zijn collectie thrillers na een hele lang tijd op is en beseft dat thrillers niet goed verkoopt en besluit om de categorie te verwijderen

2.


3.


4.

John klikt op de knop voor het verwijderen van de categorie thrillers

Functienaam: Orders bekijken en order status wijzigen, verwijderen Actoren: John: ShopOwner Flow of events: 1.

Het is maandag ochtend en John wil zijn bestelling opzoeken die in het weekend zijn geplaatst

2.


3.

Hij gaat naar het order systeem en klikt op openstaande orders

4.

Er verschijnt een lijstje met alle order die nog onbehandeld zijn

5.

John klikt op de eerste order uit het lijstje

6.

Er verschijnt een overzicht van alle artikelen die zijn besteld met daarbij het aantal

7.

John print het lijstje en gaat vervolgens alle producten in het magazijn opzoeken

8.

Nadat hij het pakketje verzendklaar heeft gemaakt, wijzigt John de status van de order in afgehandeld

9.

Hij komt nu weer in het overzicht van de overgebleven openstaande orders en klikt op de eerste in het lijstje

10. John ziet echter dat de order afkomstig is van een wanbetaler en besluit de order te verwijderen 11. John klikt op de knop voor het verwijderen van een order en bevestigd zijn actie

Functienaam: Actoren:

Account bekijken en verwijderen John: ShopOwner Jane: ShopCustomer

Flow of events: 1.

Het is John opgevallen dat Jane niets meer heeft besteld via de webshop in het afgelopen jaar en besluit de account van Jane te verwijderen

2.

John logt in op de website

3.

John kijkt in zijn beheer systeem bij de account van de website

4.

In het lijstje dat verschijnt zoek hij Jane op en klikt op haar naam

5.

Hij krijgt nu netjes een overzicht met alle informatie over Jane

6.

John klikt op de knop voor het verwijderen van een account en bevestigd zijn actie

Functienaam: Actoren:

Orders bekijken van een ShopCustomer John: ShopOwner Jane: ShopCustomer

Flow of events:

16

1.

John merkt dat Jane vaak artikelen besteld via de webshop en besluit om te kijken hoe veel ze het afgelopen jaar gekocht heeft.

2.

John logt in op de Hello Sello website.

3.

John kijkt in zijn beheer systeem bij de accounts van de website.

4.

In het lijstje dat verschijnt zoekt hij Jane op en klikt op haar naam

5.

John ziet nu netjes een lijstje met alle orders die Jane heeft geplaatst

Functienaam: Producten van een pagina verwijderen Actoren: John: ShopOwner Flow of events: 1.

Een bepaald product was geplaatst op de aanbiedingen pagina maar de actie is voorbij en John wil het product van de pagina afhalen.

2.

John logt in op de Hello Sello website.

3.

In het back-end gedeelte van zijn webwinkel gaat hij naar de betreffende aanbiedingen pagina en klikt op de verwijderknop naast het product.

4.

John bevestigd zijn actie en het product is van de pagina verwijderd.

Functienaam: Actoren: Flow of events:

Zoeken en daarna toevoegen aan Cart en na registreren en inloggen, betalen van een product Jane: ShopCustomer

1.

Jane wil een kinderboek kopen voor haar neefje maar helaas weet ze alleen de auteursnaam.

2.

Ze bezoekt een webwinkel voor boeken en na enige tijd rondgekeken te hebben op de verschillende pagina’s is ze nog steeds niet tegen het boek dat ze zocht aangelopen.

3.

Jane besluit de zoekfunctie te gebruiken en vult de auteursnaam in.

4.

Er verschijnt een lijstje met titels van boeken die deze auteur uitgebracht heeft.

5.

Ze ziet de titel die ze zoekt ertussen staan en klikt het linkje aan.

6.

Dan komt ze op een pagina met een uitgebreide beschrijving van het boek.

7.

Dit blijkt inderdaad het boek te zijn die ze zocht en de prijs valt ook mee dus ze besluit dat ze het boek wilt kopen.

8.

Ze voegt het toe aan haar Cart door op het addToCart knopje te drukken.

9.

Vervolgens gaat ze naar haar Cart en daar drukt ze op de knop checkout.

10. Jane krijgt een melding dat ze eerst moet inloggen om verder te kunnen gaan aangezien ze nog niet ingelogd was. 11. Jane heeft nog geen account dus ze registreert zichzelf. 12. Jane logt alsnog in en betaalt. 13. Via email krijgt ze een bevestiging van de bestelling. 14. Jane bekijkt vervolgens in haar account de status van haar order. En ziet dat haar bestelling inderdaad in behandeling is.

Functienaam: Account gegevens ShopCustomer aanpassen Actoren: Jane: ShopCustomer Flow of events: 1.

Jane is net verhuisd en wil haar adres gegevens wijzigen

17

2.

Jane logt in op de website

3.

Jane gaat naar het account beheer toe

4.

Zij ziet haar huidige gegevens en klikt op de knop wijzigen

5.

Na het aanpassen van de gegevens bevestigd zij haar actie

  5.3 Usecase diagram  Na het uitwerken van de scenario’s, is er een usecase diagram opgesteld. Dit diagram laat een duidelijk onderscheid zien tussen de twee onderdelen van een webshop. Namelijk de front-end en de back-end. Ook is het duidelijk welke actor de front-end gebruikt en welke actor de back-end gebruikt. Per onderdeel is ook duidelijk welke functionaliteit het systeem moet bevatten. Deze functionaliteit komt overeen met de functionaliteit die bepaald is in de scenario’s. Zie afbeelding 5-1 voor het usecase diagram.

18

Afbeelding 5-1 - UseCase diagram

5.4 Flowcharts  De flowcharts zijn gemaakt om te bepalen hoe de flow van het systeem moet zijn. Deze charts bepalen in grote lijnen hoe een bepaalde actie binnen het systeem verloopt en wat er vooraf nodig is, om een actie uit te voeren. Uit het usecase diagram blijkt dat er twee onderdelen binnen het systeem zijn. Namelijk het beheergedeelte die alleen toegankelijk is voor de ShopOwner en de webshop zelf die ook toegankelijk is voor ShopCustomer. De flowcharts zijn daarom uitgewerkt voor de twee verschillende onderdelen. Allereerst is de flowchart voor een ShopCustomer gegeven, deze chart is te vinden in afbeelding 5-2.

19

Afbeelding 5-2 - FlowChart ShopCustomer In deze chart komt duidelijk naar voren wat een ShopCustomer voor functies binnen het systeem heeft en hoe hij die functie kan uitvoeren. Ook is er duidelijk te zien, dat een ShopCustomer aan het einde van een bepaalde actie stroom altijd weer terug komt bij de Home pagina. In de charts in afbeeldingen 5-3 t/m 5-7 staat de flow voor de back-end van de webshop beschreven.

20

Afbeelding 5-3 - FlowChart backend

Afbeelding 5-4 - FlowChart backend page beheer

21

Afbeelding 5-5 - FlowChart backend product beheer

Afbeelding 5-6 - FlowChart backend Categorie beheer

22

Afbeelding 5-7 - FlowChart Backend Order beheer In de flowchart in afbeeldingen 5-3 t/m 5-7 van de ShopOwner, zijn de verschillende onderdelen opgesplitst. Een ShopOwner heeft vier hoofd functies. Per hoofdfunctie is een aparte flowchart gegeven. In deze flowchart is te zien, dat een ShopOwner altijd weer terug moet komen in het beheer gedeelte van de webshop.

5.5 Interface impressie  De flowcharts geven een helder beeld van de stappen die een gebruiker moet doorlopen, maar het geeft geen zicht op de schermen die de gebruiker ziet. Het maken van een interface impressie geeft inzicht op de schermen die de gebruiker tegen zal komen tijdens het uitvoeren van de gebruikelijke acties. Ook geven de interface impressies inzicht in de interactie met het systeem. Zo is bijvoorbeeld te zien wat er met een invoer formulier gebeurd, als er foutieve of incomplete informatie wordt opgegeven. Ook acties zoals het verwijderen van bepaalde onderdelen vragen om een controle bij de gebruiker. Deze interactie is terug te zien in de interface impressies. De interface impressies geven een duidelijk beeld van alle onderdelen die nodig zijn voor webshop, maar het bepaald niet de uiteindelijke layout. De impressies zorgen er voor dat de onderdelen aanwezig zijn in het systeem en op een logische plaats in de webshop te vinden zijn. In de interface impressies is duidelijk naar voren gekomen, op welke manier een shopeigenaar zijn shop kan beheren. Dit aspect is het meest cruciale onderdeel van het systeem. De wijze waarop een shopeigenaar zijn shop kan beheren, is anders dan bij de huidige webshop aanbieders. De balk onderaan de pagina, staat centraal in het beheren van de shop. Deze balk moet altijd aanwezig zijn en geeft de beheerder een helder beeld van zijn opties op de betreffende pagina. Bij het uitvoeren van bewerkingsacties, zal de beheerder altijd in zijn eigen shop blijven. De beheerder zal bijvoorbeeld bij het toevoegen van een product, een venster in beeld krijgen met daarin het formulier voor het toevoegen van een product. Op de achtergrond van dit venster is de huidige shop nog steeds zichtbaar. Het resultaat van alle acties, is na het sluiten van het venster ook direct zichtbaar in de webshop. Dit zorgt ervoor dat de gebruiker direct feedback krijgt en zo kan controleren of alles naar behoren is uitgevoerd. Een voorbeeld van een interface impressie staat in afbeelding 5-8. De rest van de interface impressies zijn bijgevoegd in bijlage 3.

23

Afbeelding 5-8 - Interface impressie uitgewerkt met potlood

24

6 De implementatie  De implementatie van het systeem verliep in een aantal stappen. Allereerst zijn alle interface impressies omgezet in HTML. Daarna zijn alle pagina’s aan elkaar gekoppeld en vervolgens is de functionaliteit geïmplementeerd. Na elke stukje functionaliteit implementatie, werd dat deel getest voordat het volgende stuk toegevoegd werd.

6.1 Interface impressies omzetten naar HTML  In het begin van de implementatie, zijn de interface impressies van papier omgezet naar HTML. Elk deel van een interface impressie heeft zijn eigen template gekregen. Aan het begin van de implementatie hadden de templates nog geen opmaak. Het omzetten van papier naar HTML zorgt ervoor dat alle elementen aanwezig zijn in code en dit maakt het makkelijker om de functionaliteit te implementeren. De HTML versies van de interface impressies geven een duidelijk beeld van de onderdelen die geïmplementeerd moeten worden. Ook is het direct zichtbaar welke onderdelen nog ontbreken op de template. Hieronder staan een aantal schermen die ontwikkeld zijn in de begin fase van de implementatie.

Afbeelding 6-1 - Eerste fase van de ontwikkeling met admin toolbar In afbeelding 6-1 staat het begin van de webshop afgebeeld, waarbij de balk onderin, de balk voor het beheer is. In dit stadium bevat de balk een centrale “wijzig knop”. Deze knop was bedoeld voor het wijzigen van alle onderdelen die een shopeigenaar mag wijzigen. Daarnaast staan de standaard knoppen voor het toevoegen, wijzigen en verwijderen van producten. Deze knoppen zouden in dat stadium altijd zichtbaar zijn, omdat het beheren van producten de belangrijkste taak is van een shopeigenaar. Als zijn producten verkeerd of niet op de website staan, dan kan de eigenaar zijn producten niet goed verkopen. De eerste drie knoppen zijn voor het aanpassen van de state waarin een shopeigenaar zich bevindt. De standaard beheer mogelijkheden die een eigenaar heeft, zijn voorraad beheer, winkel beheer en order beheer. Deze drie knoppen zullen altijd zichtbaar blijven in de balk, zodat een shopeigenaar op elk moment naar de gewenste afdeling kan gaan. Het uitvoeren van een actie is in het systeem mogelijk in een speciaal venster dat verschijnt in het scherm na het aanklikken van de bijbehorende knop. Een voorbeeld hiervan staat hieronder.

25

Afbeelding 6-2 - Begin fase product toevoegen Het venster in afbeelding 6-2 laat het begin stadium zien van het toevoegen van een product. In dit stadium van de ontwikkeling, zijn er drie mogelijkheden om terug te keren naar de shop zonder dat een product is toegevoegd. De gebruiker kan gebruik maken van de bekende Back-Button in de browser om het venster te sluiten. De tweede mogelijkheid is het klikken op de sluit knop rechts bovenin en als laatste kan de escape knop gebruikt worden. Dit zijn voor veel gebruikers herkenbare manieren om een actie te annuleren. In dit scherm is dus ook te zien dat er nog één voor de hand liggende mogelijkheid ontbreekt, de annuleer knop. Deze knop is uiteraard in een later stadium alsnog toegevoegd. Alle andere acties die in een verder stadium ontwikkeld zijn, worden allemaal in een dergelijk venster weergegeven. Deze methode moet ervoor zorgen dat een shopeigenaar altijd het gevoel heeft, dat hij in zijn shop bezig is met het beheer. Dit in tegenstelling tot andere applicaties waarbij de shopeigenaar het beheer kan uitvoeren in een heel ander gedeelte van de webshop. Voor het wijzigen van producten, is in dit stadium gebruik gemaakt van een tussenstap. In de afbeelding 6-3 is de tussenstap weergegeven met daarin het gebruikelijke venster. In dit venster staat een lijstje van de te wijzigen producten op die pagina. Deze tussenstap zal in een later stadium worden vervangen door een betere en intuïtieve oplossing. Ook in dit venster zijn de gebruikelijke mogelijkheden voor het annuleren van de actie aanwezig.

26

Afbeelding 6-3 - Tussenstap wijzigen van producten

6.2 Implementatie van de functionaliteit  Na het implementeren van de benodigde schermen, is de functionaliteit toegevoegd. De functionaliteit stond niet centraal in dit project, maar is wel van essentieel belang voor het draaien van een webshop. In dit project zijn daarom de standaard functies die een webshop moet hebben, geïmplementeerd. Deze functies zijn beschreven in het programma van eisen. Er is bij de implementatie rekening gehouden met de optie tot het uitbreiden van het systeem met meer functionaliteit. Het integreren van het beheer op de extra functionaliteit, kan doormiddel van het toevoegen van een aantal tags aan een HTML element. Dit zorgt ervoor dat het beheer van elementen in dezelfde stijl uitgevoerd wordt. Een belangrijk onderdeel van de functionaliteit, is de flow binnen de applicatie. Tijdens deze fase is er uitvoerig gekeken naar de meest optimale flow, waarbij de gebruiker zo min mogelijk hoeft te klikken om een actie uit te voeren. Zoals te zien is bij de implementatie van de interface, is er een stadium geweest waarbij er een tussenscherm zit, bij het uitvoeren van de wijzig actie. Om deze tussenstap te verwijderen, is er een algemene wijzig knop gekomen. Bij het indrukken van deze wijzig knop, worden alle elementen die op dat moment in de pagina aanwezig zijn en ook gewijzigd mogen worden, opgelicht en worden de andere elementen donker gemaakt. Deze functionaliteit zorgt ervoor, dat de gebruiker in slechts twee muisklikken het venster krijgt voor het uitvoeren van de gewenste actie. De afbeelding 6-4 laat zien hoe de te wijzigen onderdelen oplichten. Als de gebruiker vervolgens klikt op één van deze onderdelen, dan verschijnt het juiste scherm om het betreffende onderdeel te wijzigen. Deze manier van interactie zorgt er wederom voor, dat de gebruiker in de shop blijft en dat zijn acties direct zichtbaar zijn in de webshop.

27

Afbeelding 6-4 - Oplichten van te wijzigen onderdelen Voor de gebruiker is het op twee manieren zichtbaar welke actie hij op dat moment aan het uitvoeren is. De knop die de gebruiker heeft ingedrukt, verandert op het moment van aanklikken in de ingedrukte status. Bovenaan de pagina verschijnt een informatie balk, die de gebruiker verteld welke actie uitgevoerd kan worden bij een klik op een opgelicht onderdeel. Vanuit deze state is het voor de gebruiker weer mogelijk om de actie te annuleren, door gebruik te maken van de escape knop, het kruisje rechts boven aan de pagina en de Back-Button van de browser. Tevens is het ook mogelijk om één van de knoppen onderaan de pagina te gebruiken. Wanneer de gebruiker op de knop wijzigen klikt en in die betreffende state terecht komt, dan zal het klikken op dezelfde de knop ervoor zorgen dat de state weer verandert in de standaard state. Het is ook mogelijk om na het klikken van de wijzigen knop, direct op de knop verwijderen te klikken. Dit zorgt ervoor dat de state direct van wijzigen naar verwijderen veranderd. Deze manier van interactie met de gebruiker moet er voor zorgen, dat het voor de gebruiker direct zichtbaar is wat hij op dat moment op de betreffende pagina kan doen. Zo hoeft de gebruiker nooit lang te zoeken om een bepaalde actie uit te voeren.

28

7 De resultaten  In dit hoofdstuk wordt de webshop van dit project, vergeleken met de huidige webshops die behandeld zijn in paragraaf 4.2. In dit project staat de usability van het systeem voorop. Eerst komen de verschillen aan bod en daarna zal er een kwaliteitsonderzoek volgen over het nieuwe systeem.

7.1 Vergelijking met de huidige webshop aanbieders  Om te kijken waar de vernieuwingen zijn aangebracht in het systeem, moet er gekeken worden naar de huidige aanbieders van webshops. In de analyse fase van dit project, zijn drie webwinkels gebruikt voor een kwaliteitsonderzoek. Deze webshops zullen nu gebruikt worden om het nieuwe systeem mee te vergelijken. Het grootste verschil tussen de drie webshops en de nieuwe webshop is, dat het administratie gedeelte geheel los van de webshop zelf staat. Naast dit verschil, verschillen de huidige webshops op nog meer punten. Deze punten worden per webshop vergeleken met het nieuwe systeem. Shopify vs HelloSello Het eerste verschil is de product lijst. In het administratie gedeelte ziet dat er anders uit dan op de webshop en ziet er daarom ook anders uit dan HelloSello.

Afbeelding 7-1 - Beheer HelloSello

Afbeelding 7-2 - Beheer Shopify

Voor het wijzigen van een product, moet je bij Shopify eerst klikken op het product, waarna je naar een andere pagina toe geleid wordt. Bij HelloSello klikt de gebruiker eerst op de generieke “Wijzig” knop.

Afbeelding 7-3 - Na klikken op wijzigen

Afbeelding 7-4 - Wijzigen venster

De gebruiker kan bij HelloSello gelijk klikken op het product om het wijzigen venster naar voren te halen. Bij Shopify moet de gebruiker eerst met de muis over het onderdeel dat de gebruiker wil wijzigen heen gaan. Na deze Mouseover actie verschijnt er een klein knopje wijzigen. Dit knopje was voor de Mouseover niet zichtbaar. De gebruiker kan dus niet gelijk zien dat het product gewijzigd kan worden.

29

Wijzig knopje bij Mouseover

Afbeelding 7-5 - Het wijzigen knopje Shopify

Afbeelding 7-6 - HelloSello product wijzigen

Afbeelding 7-7 - Shopify product wijzigen

Bij HelloSello verschijnt het wijzigen formulier in een venster. De pagina wordt hierbij niet in zijn geheel opnieuw geladen, maar het formulier wordt gevuld met behulp van AJAX. Bij Shopify wordt de pagina na het klikken op de wijzigen knop, ook niet opnieuw geladen. Het formulier vervangt de content op dezelfde plaats. Bij het annuleren of accepteren wordt de content weer op de juiste manier vervangen. Bij HelloSello blijft de oude content standaard onaangetast. Als er een wijziging is doorgevoerd, dan wordt alleen die wijziging doorgevoerd en wordt niet de hele pagina opnieuw geladen. Shopify en HelloSello gebruiken dus allebei een andere manier om bij het wijzigen van een product te komen. Bij HelloSello kost deze actie twee muisklikken en bij Shopify kost die drie muisklikken. Het terugkeren naar het product overzicht kost bij Shopify twee muisklikken en bij HelloSello wordt de gebruiker automatisch naar de begin toestand terug gebracht. Wosbee vs. HelloSello Wosbee heeft van de drie webshop aanbieders de grootste verschillen met HelloSello. Uit de enquête in paragraaf 4.2 is ook gebleken dat het beheer van deze webshop uiterst onvriendelijk is. Het begin van het administratie gedeelte is erg kaal en maak gebruik van een functie balk boven aan de pagina. In afbeelding 7-8 is hiervan een impressie gegeven.

30

Afbeelding 7-8 - Admin balk Wosbee Elke hoofdknop bevat subknoppen. Elke subknop heeft zijn eigen functie. Bij het klikken op een subknop opent de browser een popup venster zoals in afbeelding 7-9. Bij de meeste gebruikers zal de browser dit niet standaard accepteren vanwege de popupblocker.

Afbeelding 7-9 - Product overzicht Wosbee Het popup venster heeft weer een groot scala aan knoppen en mogelijkheden. Er moet eerst een groep geselecteerd worden voordat er producten zichtbaar worden. De gebruiker kan geen producten toevoegen zonder eerst een groep te selecteren. In afbeelding 7-10 is te zien dat bij HelloSello altijd gebruik gemaakt kan worden van de product toevoegen knop in de functie balk onderaan de pagina. Product toevoegen knop

Afbeelding 7-10 - Admin balk HelloSello Het wijzigen van een product bij Wosbee zorgt voor een nieuw popup venster. In dit venster zijn heel veel tabbladen aanwezig. Je ziet dus niet direct wat er allemaal bij het product aanwezig is. De invoervelden staan door elkaar over de pagina. Bij HelloSello wordt geen gebruik gemaakt van tabbladen. HelloSello heeft minder aanpassingsmogelijkheden, maar de opties die Wosbee biedt zijn geen standaard opties. De andere webshop aanbieders hebben deze mogelijkheden ook niet. Dit houdt HelloSello simpel, overzichtelijk en toegankelijk voor verschillende gebruikers.

31

Afbeelding 7-11 - Product wijzigen Wosbee In afbeelding 7-11 is te zien dat bij het doorvoeren van een wijziging er eerst op accepteren geklikt moet worden. Na het klikken op accepteren moet de sluiten knop eronder gebruikt worden, om de overzichtspagina bij te werken. Als de standaard sluitknop (bij OS X links boven) gebruikt wordt, dan wordt de overzichtspagina niet automatisch bijgewerkt. Bij HelloSello wordt er rekening gehouden met de standaard browser knoppen. Zo kan de gebruiker bijvoorbeeld de Back-Button gebruiken om een geopend venster te sluiten. Het is duidelijk dat Wosbee aanzienlijk meer klikken met de muis nodig heeft om dezelfde actie uit te voeren als bij HelloSello. Ook het terugkeren naar de begin situatie vereist verschillende stappen. Dit zorgt ervoor dat het bijwerken van een aantal producten bij Wosbee, veel langer duurt dan bij HelloSello. Mijnwebwinkel vs. HelloSello

Afbeelding 7-11 - Beheer Mijnwebwinkel

32

Mijnwebwinkel maakt gebruikt van een standaard CMS. In afbeelding 7-11 is een impressie hiervan te zien. Vanwege het feit dat Mijnwebwinkel een standaard systeem gebruikt wat veel gebruikers gewend zijn, ervaren mensen dit systeem als duidelijk en overzichtelijk. HelloSello maakt gebruik van een combinatie tussen een WYSIWYG methode en een standaard CMS. Een groot voordeel wat HelloSello daarom heeft, is dat de producten makkelijk terug te vinden zijn met het zoek systeem in de webshop. Bij Mijnwebwinkel moet de gebruiker weten op welke pagina een product staat alvorens hij dit product kan wijzigen of verwijderen. Bij het toevoegen van een product, moet de gebruiker eerst een pagina aanmaken. Een product kan niet toegevoegd worden als de pagina waarop het product moet komen nog niet bestaat. HelloSello gebruikt categorieën om de producten onder te verdelen in de webshop. De gebruiker kan echter kiezen of hij eerst een categorie aanmaakt, of direct een nieuw product wil toevoegen. Als de gebruiker direct een product aanmaakt voor een nog niet bestaande categorie, dan wordt deze categorie ter plekke aangemaakt.

Nieuwe categorie toevoegen

Afbeelding 7-12 - Nieuwe categorie toevoegen

Categorie invoer veld

Afbeelding 7-13 - Categorie veld Een product kan bij Mijnwebwinkel maar één afbeelding bevatten. Bij HelloSello is het mogelijk om bij een product meerdere afbeeldingen toe te voegen. Bij het selecteren van de afbeelding, wordt deze bij HelloSello

33

gelijk zichtbaar in het formulier zoals te zien is in afbeelding 7-14. Bij Mijnwebwinkel moet het product eerst worden opgeslagen om de afbeelding te zien.

Afbeelding toegevoegd Afbeelding toegevoegd

Afbeelding 7-14 - Afbeeldingen toevoegen

Voor de rest zijn HelloSello en Mijnwebwinkel qua functionaliteit aan elkaar gelijk. Een kwaliteitsonderzoek moet dus duidelijkheid geven of de vernieuwingen in HelloSello, daadwerkelijk een verbetering zijn ten opzichte van de huidige webshop aanbieders.

7.2 Kwaliteitsonderzoek van het nieuwe systeem  Het eerste onderdeel van het kwaliteitsonderzoek bestaat uit een enquête. Het tweede onderdeel is een TaskUsability test. 7.2.1 Enquête HelloSello  Deze enquête over HelloSello (zie bijlage 4) is hetzelfde als de enquête over bestaand materiaal gehouden in paragraaf 4.2. De resultaten van de HelloSello enquête zijn te vinden in afbeelding 7-15.

Cijfer  Gebruiksvriendelijkheid 

HelloSello  Mijnwebwinkel 

Overzichtelijkheid 

Wosbee  Shopify 

Uiterlijk  0 

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

Afbeelding 7-14 - Uitslag enquête, Huidige aanbieders + HelloSello “Het is makkelijker om je weg te vinden, ook als je er totaal geen verstand van hebt!”. “Zeer overzichtelijk, duidelijke taal en goede verwijzingen.” Uit de resultaten blijkt dat HelloSello op elk onderdeel hoger scoort dan de concurrentie. Het HelloSello systeem is over het algemeen een significante verbetering ten opzichte van de andere webshop aanbieders. Mijnwebwinkel komt als enige in de buurt op het gebied van gebruiksvriendelijkheid, maar laat het op de andere onderdelen afweten. Uit de extra opmerkingen bij de enquêtes, bleek dat de mensen het erg prettig vonden dat het beheer gedeelte gelijk is aan de webshop die de ShopCustomer gebruikt. Aangemaakt producten zijn direct zichtbaar en dit zorgt ervoor dat mensen eventuele fouten direct zien. Dit maakt het systeem duidelijk

34

overzichtelijker dan de andere webshop aanbieders. De hoge score voor het uiterlijk van de website, komt vooral door de rustige uitstraling die de website heeft. 7.2.2 Task‐Usability Test  Deze task usability test is uitgevoerd aan de hand van de methode beschreven in “Observing the user experience” (Kuniavsky, 2003). De methode is bedoeld om meer inzicht te geven in de gebruikerservaring. Op deze manier komen usability problemen duidelijk naar voren. Zie bijlage 5 voor een voorbeeld observatie uitwerking. Procedure Tijdens deze test zijn drie testpersonen gevraagd om kritisch te kijken naar de usability van het systeem. De test begon met het beantwoorden van een aantal algemene vragen over internet en computer gebruik. Daarna kregen zij het prototype te zien en werd ze gevraagd een aantal vooraf gespecificeerde taken uit te voeren en hierbij hun gedachten hardop in detail te beschrijven. Ook werd er gevraagd wat ze verwachtten alvorens er een taak uitgevoerd werd. Bij deze taken lag de nadruk voornamelijk op het beheren van de webshop, maar er is ook getest of het aanmaken van een webshop makkelijk gaat. De test werd afgesloten met een aantal vragen over de kwaliteit van het systeem. Hierin kreeg de testpersoon ook de mogelijkheid tot het geven advies voor eventuele verbeteringen. Hieruit kwam een duidelijk mening over het systeem. Proefpersoon profielen Niels Niels is een 20 jarige student en besteedt gemiddeld 10 uur per week op het internet. Hij koopt regelmatig producten via een webshop. Anouk Anouk is 27 jaar en actief in de detailhandel. Ze heeft zelf ook plannen een webshop te beginnen. Anouk koopt ook regelmatig producten online. Harry Harry is 53 jaar en besteedt gemiddeld 7 uur per week achter het internet. Hij besteld regelmatig goedkope producten via een online winkel. Observaties Algemene observaties 1. Volgens de testpersonen is de algemene indruk van de webshop helder, omdat er geen overbodige informatie op de website staat. 2. Na de vraag over de verwachting bij de knoppen in de adminbalk, gaven de testpersonen allemaal ongeveer dezelfde en juiste beschrijving van de actie. Features 1. De optie voor het direct toevoegen van producten schepte in het begin verwarring, maar naderhand werd duidelijk dat deze optie toch handig blijkt te zijn. 2. Het toevoegen van aanbiedingen was voor alle testpersonen een beetje onduidelijk, omdat aanbiedingen eerder verwacht worden bij producten in plaats van bij pagina’s. 3. Bij het verwijderen van een onderdeel krijgt de gebruiker een systeem scherm van de browser te zien om een actie te bevestigen. De testpersonen verwachtten dit niet en vroegen of dit ook in dezelfde stijl kan zoals bij het aanpassen van onderdelen. 4. Het toevoegen van categorieën ging erg makkelijk bij alle proefpersonen. 5. Het wijzigen van producten is ook erg duidelijk voor alle proefpersonen. Navigatie 1. Iedereen begreep dat onderaan de pagina de adminbalk staat en waar deze balk voor dient. 2. De testpersonen begrepen het idee van het toevoegen van subcategorieën en submenu’s. Het zou misschien wel fijn zijn als categorieën ook toegevoegd kunnen worden aan het menu. 3. Één testpersoon gaf aan dat de breadcrumbs ontbreken waardoor het niet altijd duidelijk was waar de testpersoon zich bevond. Benaming

35

1. 2.

De benaming van de knoppen in de adminbalk waren duidelijk. Iedereen kon aan de hand van de benaming direct een beschrijving geven van wat de knop zou doen. Er bestond wat onduidelijkheid over de knop “toevoegen” en de knop “product toevoegen”. De testpersonen zagen in het begin niet goed het verschil tussen de twee knoppen.

Conclusie Over het algemeen wordt het systeem als overzichtelijk ervaren en is makkelijk te gebruiken voor het beheren van de webshop. Het toevoegen van aanbiedingen was het meest onduidelijke gedeelte. De testpersonen verwachtten deze optie op een andere plaats in het beheer systeem, namelijk bij het wijzigen van producten. De adminbalk was het duidelijkste aanwezig volgens de testpersonen. Het is ook helder wat de functies van de knoppen zijn. Quotes Niels “Ik heb zin om zelf ook een shop te gaan maken/beginnen.” “Het is zelfs makkelijker dan Marktplaats en iedereen snapt en gebruikt Marktplaats.” “Graag zou ik de categorie listing terug willen zien in het menu bijvoorbeeld ingesprongen onder producten.” Anouk “De meeste dingen spreken voor zich en doen wat je verwacht dat ze doen.” “Het is een interessante dienst voor mensen die iets willen verkopen via het internet maar die niet kunnen omdat ze niet over genoeg computervaardigheden beschikken. Dit werkt dan heel makkelijk.”

36

8 Proces verslag  week 1 In de eerste week zijn we van start gegaan door een analyse te maken van het concept en de doelstelling rekening houdend met de gestelde voorwaarden. Hierbij hebben we ons ook ingelezen in de opgegeven tools en web framework. Om met concrete onderbouwde verbeterpunten te kunnen komen ten opzichte van de bestaande concurrentie is er een enquête opgesteld waarbij de doelgroep een aantal acties moet uitvoeren in bestaande webshops. Hieruit kwamen duidelijk verschillende irritaties ten aanzien van de webshop admin interface naar voren en deze zijn opgesteld tot verbeterpunten in het uit te voeren ontwerp. week 2 Na de eerste week zijn we vooral bezig geweest met de verdere analyse en ontwerp wat bestond uit het maken van scenario’s, use case diagrammen, flowchart en papier schetsen om duidelijk te analyseren wat de workflow is van de doelgroep. Als we deze informatie duidelijk hadden konden we met een helder (scherm)ontwerp komen wat het beste aansloot bij de geanalyseerde workflow. Het opstellen van verschillende diagrammen hielp ook het overzicht te houden tussen wat wij verwachtten te ontwikkelen en wat de opdrachtgever van ons verwachtte. In de afgelopen 2 weken werden er ook al uren besteed aan het aanleren van web framework Ruby on Rails. week 3 De papierschetsen werden in deze week omgezet naar HTML/CSS om de latere koppeling met het web framework te vergemakkelijken. Dit hielp ook als realiteitscheck: was het daadwerkelijk mogelijk wat er was bedacht in de papier schetsen? Deze HTML schermen werden geïmplementeerd binnen een Rails web applicatie zodat de stap naar een werkelijke implementatie nog kleiner werd. Halverwege deze week zijn alle design documenten besproken met de stage begeleider. Om vervolgens deze zeer intensieve week af te sluiten met het opstellen van het database model en het uitdenken van een vernieuwende admin interface. week 4 In deze week werd er volledig gestart met de implementatie van het webwinkel deel. Dit kwam neer op het bouwen van een product model, het product overzicht waarbij het mogelijk werd om producten toe te voegen en te wijzigen. week 5 De basis functionaliteit voor het webwinkel deel is deze week geïmplementeerd. Oftewel het bouwen van het model voor de cart, zoeken en order. Ook zijn er buttons gemaakt voor de adminbalk die vervolgens ook in het systeem is geplaatst. week 6,7,8 Deze drie weken hebben we ons bezig gehouden met de kern van het project en dat is de implementatie van het daadwerkelijke systeem en de styling van de interface van het admingedeelte en de lay-out van de webwinkel in CSS/HTML en JavaScript. In week 7 is er een bijeenkomst geweest om de voortgang van het project te bespreken waarbij de opdrachtgever, de TU begeleider en de studenten aanwezig waren. Aan het einde van week 8 zijn we begonnen aan een globale opzet van het verslag. week 9,10 De laatste twee weken van het project hebben we gebruikt voor het userstudy gedeelte. We hebben doormiddel van een enquête en een usability test met testpersonen onze interface uitvoerig geëvalueerd. Aan de hand van de evaluatie hebben wij in de laatste week nog de laatste wijzigingen aan de interface doorgevoerd. De laatste week hebben wij ook gebruikt om het eindverslag af te ronden. In de laatste week hebben wij ook een bezoek gebracht aan de Ruby en Rails dag. Dit is een evenement voor alle Rails fans, waarbij een aantal belangrijke mensen in de Rails wereld aanwezig zijn.

37

9 Conclusies en aanbevelingen  9.1 Conclusies  In dit project moest een systeem ontwikkeld worden, dat het voor een ShopOwner makkelijker maakt om zijn webshop te beheren. De groep van de ShopOwners bestaat uit verschillende typen gebruikers, daarom is er volgens het gebruikersprofiel rekening gehouden met ShopOwners en ShopCustomers, die weinig computer kennis hebben. Uit de onderzoeken over de huidige webshop aanbieders, is gebleken dat de huidige aanbieders goede en minder goede kwaliteiten hebben op het gebied van usability. De punten van verbetering zijn daarom vanwege de usability in het HelloSello systeem, voornamelijk toegepast op de gebruiksvriendelijkheid en overzichtelijkheid. Uit de resultaten van het kwaliteisonderzoek over het HelloSello systeem, is gebleken dat het HelloSello systeem een significante verbetering is ten opzichte van de concurrerende webshop aanbieders. Dit blijkt uit de cijfers die de ondervraagden hebben gegeven in het kwaliteitsonderzoek. Als laagste scoorde de webshop aanbieder Wosbee een 5. De webshop aanbieder Shopify volgt met een acceptabele 7,5. Van de onderzochte webshop aanbieders scoorde Mijnwebwinkel als beste met een 8. Het HelloSello systeem had de hoogste score ten opzichte van de onderzochte webshop aanbieders, namelijk een 9. Volgens de ondervraagden is het HelloSello systeem makkelijker en overzichtelijker in het gebruik. De reden dat het systeem gebruiksvriendelijk en overzichtelijk is, komt volgens de ondervraagden door het feit dat elke aanpassing direct zichtbaar is. De adminbalk aan de onderkant van de pagina zorgt voor een eenvoudige manier van beheren, omdat de Shop eigenaar hetzelfde ziet als de Shop klant. De functionaliteit is in het HelloSello systeem beperkt tot de basis functies van een webshop. Het is echter wel mogelijk om het HelloSello systeem makkelijk uit te breiden met meer functionaliteit en dit direct te integreren met het beheer systeem, waarbij de huidige stijl gehandhaafd blijft.

9.2 Aanbevelingen  Voor het uitbreiden van het systeem, moet de usability voorop blijven staan. Het systeem moet zijn eenvoudige manier van beheer behouden. Het is daarom aan te bevelen dat er bij het uitbreiden van het systeem, gebruik gemaakt wordt van de bestaande javascript libraries om HTML onderdelen te integreren. Dit zorgt ervoor dat het systeem consistent blijft in het beheer en dat is voor de ShopOwner het duidelijkst. Ook is het aan te bevelen dat het uitbreiden van het systeem op de iteratief-prototyping werkwijze wordt uitgevoerd, zodat er na elke toevoeging van een nieuw onderdeel, getest wordt of het onderdeel naar behoren werkt.

 

38

Literatuurlijst  Budd A., CSS Mastery: Advanced webstandards and solutions. New York: Springer-Verlag, 2006 Brown D, Communicating Design: Developing Web Site Documentation for Design and Planning. New Riders, 2007 Dix A., Finlay J., Abowd G., Beale R., Human-Computer Interaction. Second Edition, Prentice Hall, 1998. Duyne D.K. van et al. , The Design of Sites: Patterns for creating winning websites. Second Edition, Prentice Hall, 2007 Fernandez O. et al, The Rails Way, Addison-Wesley, 2008 Fulton H. The Ruby Way, Second Edition, Addison-Wesley, 2007 Krug S., Don’t make me think: A common Sense Approach to Web Usability. Second Edition, Berkeley: New Riders, 2006 Kuniavsky M., Observing the user experience. Morgan Kaufman, 2003 Lethbridge T.C., Laganière R., Object-Oriented Software Engineering, Second Edition, London: McGraw Hill, 2005 Mayhew, D.J., Principles and Guidelines in Software User Interface Design, Prentice Hall, 1992 Thomas D. et al., Agile Web Development with Rails. Second Edition. Dallas: The Pragmatic Bookshelf, 2006.

39

Bijlage 1: Onderzoeksverslag 

40

Bijlage 2: Enquête over bestaand materiaal 

41

Bijlage 3: Interface impressies 

42

Bijlage 4: Enquête over HelloSello 

43

Bijlage 5: Usability‐Test voorbeeld observatie   

44

Hello Sello BSc-project Technische Informatica

Recommend Documents