Redesign Plof.NL ontwerp rapport Tim Davids 13095978 Klas1F groep 23 Patterns of interaction Begeleider JoEl Plas
inhoudsopgave
1.
inleiding
2
2.
heuristieken
3
3. 3.1 3.2
concept moodboard verbeterpunten
5
4.
systeemeisen
8
5. 5.1 5.2 5.3
ontwerp flowchart visueel ontwerp patronen
10 10 11 18
6. 6.1 6.2
evaluatie eerste ronde eigen evaluatie
22 22 24
bijlage schetsen
25
5 7
1. inleiding
Plof.nl, een website waar onder andere handgemaakte spullen, denk aan knuffels, en geboortekaartjes gekocht kunnen worden. Toegankelijk- en vrolijkheid is de beoogde uitstraling, welke goed aansluit bij de doelgroep van aanstaande ouders en jonge gezinnen, van de website. Met name op het gebied van gebruiksvriendelijkheid kan er nog veel gewonnen worden. Ook is een herontwerp van de website nodig om de doelgroep nog beter van dienst te kunnen zijn.
2
2. heuristieken
Zichtbaarheid van de status van het systeem
Consistentie en standaarden
Bijvoorbeeld de globale navigatie, en daarnaast nog vele
De stijl is consistent. De opbouw en structuur van de
andere linken binnen de website, hebben geen affordan-
diverse pagina’s verschillen van elkaar en is dus niet
ces. Zo veranderd er niks wanneer er over de link heen
consistent. De webshop maakt ook geen gebruik van het
wordt gegaan. Wanneer je een product besteld wordt je
bekende ‘winkelmandje’. Daarnaast wijkt de webshop erg
doorverwezen naar de webshop, het systeem laat het
af van de website zelf, hierdoor mis ik de connectie tussen
bericht ‘pagina wordt geladen…, een ogenblik geduld als-
beide. Ook wordt de typografie op de pagina’s verschillend
tublieft’ zien, maar door de snelle laadtijd heb je te weinig
gebruikt, er is geen consistentie in het gebruik van bijvoor-
tijd om het te lezen.
beeld titels en subtitels.
Match tussen systeem en werkelijkheid
Voorkomen van fouten
Met het oog op de doelgroep, jonge gezinnen met kin-
Bij de webshop is er tijdens het invullen geen validatie, dit
deren, is het taalgebruik prima. In de opdracht van week
gebeurt pas bij het versturen van het formulier. Waar de
1 had ik gezegd dat het taalgebruik speels en misschien
fout zit wordt niet ‘benadrukt’. Dit is voor de gebruiker zeer
een tikkeltje te kinderachtig is en dat dit dus professioneler
onhandig, zeker gezien de forse lengte van het formulier.
mag aangezien plof ook een grafisch bureau is. Wel wordt
Daarnaast zou je verwachten wanneer je op een product-
in het bestelformulier gebruik gemaakt van producten,
pagina bent en op ‘bestellen’ klikt, je daadwerkelijk dat
bijvoorbeeld: sluitstickers Beer per 50 stuks € 6,50, de
product ook besteld en niet vervolgens weer de lijst af
term ‘sluitsticker Beer’ maakt mij niet duidelijk wat het
moet om het product aan te vinken.
product is. Er moet dus duidelijkere taal gebruikt worden, eventueel kunnen foto’s meer duidelijkheid bieden dan
Beter herkennen dan herinneren
tekst. Daarnaast wordt de homepagina ‘beginpagina’ ge-
De bestelknop bijvoorbeeld is een variant van de bekende
noemd, dat woord heb ik nog nooit gehoord als synoniem
iconen. Alleen is de werking van de knop niet zoals ik zou
voor homepagina.
verwachten, zie ook ‘voorkomen van fouten’. Daarnaast is het navigeren door de website niet gemakkelijk, een
Vrijheid en controle van de gebruiker
gebruiker moet in zijn hoofd een map creëren waar hij of
De gebruiker kan middels de navigatie overal in de
zij zich op een bepaald moment bevindt.
website komen, alleen staat de globale navigatie alleen op de homepagina. Op vervolgpagina’s moet je dus eerst
Flexibel en efficiënt in gebruik
weer naar de homepagina om naar een ander deel van
Weinig shortcuts. Bovenaan de pagina is bijvoorbeeld
de website te gaan, dit zijn allemaal extra stappen die een
geen globale navigatie te zien wanneer je dieper in de
gebruiker moet nemen.
website gaat. Wil je naar een andere pagina moet je op ‘volgende’ of ‘vorige’ klikken wat totaal niet efficiënt is. Beperk het aantal klikken tot een minimum om het de gebruiker makkelijk te maken.
3
2. heuristieken
Esthetisch en minimalistisch ontwerp De website is qua opbouw, enigszins, minimalistisch, maar vooral het assortiment. Daarnaast wordt er veel gebruik gemaakt van witruimte, wat prettig is voor de gebruiker. Het assortiment wordt hierdoor ook benadrukt, het komt meer tot zijn recht. Gezien de doelgroep en het assortiment kan het geen kwaad om sfeervolle details toe te voegen aan de website. Help een gebruiker om fouten te herkennen, beoordelen en herstellen In de webshop wordt een foutmelding gegeven wanneer een verplicht invoerveld niet is ingevuld. De invoer ‘dafsda’ wordt geaccepteerd als e-mail adres, er is dus geen sprake van validatie. Wanneer de gebruiker een fout maakt, wordt hij of zij niet begeleid om deze te herstellen. Helpfunctie en documentatie Er is geen vorm van enige hulp of documentatie, zowel op de website als op de webshop. Wel staat er op de homepagina de tekst ‘vragen aan plof?’, aangezien dit geen link is kan er ook niet op geklikt worden dus is e-mailen de enige mogelijkheid om contact op te nemen met plof. Conclusie Al met al schort er dus nog het één en ander aan de website van plof. Wat ik met name wil verbeteren is de navigatie tussen de verschillende pagina’s, zodat de gebruiker altijd weet waar hij of zij zich bevindt. Op deze manier wordt het aantal klikken ook verkleind, aangezien de gebruiker niet elke keer terug hoeft te gaan naar de homepagina. Daarnaast kunnen de producten aantrekkelijker weergegeven worden en moet het bestellen van producten vergemakkelijkt worden. Ook moeten er extra mogelijkheden komen met betrekking tot een persoonlijk account en alle bijbehorende mogelijkheden zoals: gegevens wijzigen, het welbekende winkelmandje, bestelgeschiedenis, aanbevolen producten, etc. Tot slot moet een herontwerp ervoor zorgen dat de website van plof er weer op en top uitziet, klaar voor de toekomst. Dit alles om nog beter op de wensen van de doelgroep aan te sluiten en wellicht mede hierdoor de verkoopcijfers een extra impuls te geven.
4
3. concept
3.1 moodboard
5
3.1 moodboard
6
3.2 verbeterpunten
Aangezien de opdracht het herontwerpen van de home-,
Productdetailpagina
productoverzicht-, productdetail- en betalingspagina is,
Momenteel maakt de website van plof geen gebruik
zal ik me qua verbeterpunten op deze pagina’s focussen.
van productdetailpagina’s. Zoals ik al gezegd heb bij de
Deze paragraaf is een aanvulling op hoofdstuk 2.
productoverzichtpagina: “Het zou makkelijker zijn voor de gebruiker om een onderscheid te maken tussen een
Homepagina
productoverzichtpagina en een productdetailpagina.”
De homepagina is meestal de eerste indruk die een gebruiker krijgt van een website, deze eerste momenten zijn
Betaalpagina
van belang of de gebruiker blijft al dan niet de website ver-
Wanneer de gebruiker op de huidige website een pro-
laat. Het ontwerp boven de ‘fold’ moet helder en sprekend
duct wil bestellen wordt hij of zij, nadat de bestelbutton
zijn voor de doelgroep. Het moet duidelijkheid bieden wat
is ingedrukt, naar een nieuwe pagina geleidt waar het
de website is, doet, en waar het voor staat.
gewenste product aangevinkt en vervolgens besteld kan
Momenteel is er een grote illustratie aanwezig. Deze
worden. De gebruiker moet op deze manier nadenken
valt goed op wat helemaal niet erg is. Wel is de navigatie
welk product er besteld moest worden, en waar deze te
te prominent aanwezig, dit neemt te veel ruimte in beslag,
vinden is in de toch wel lange lijst van producten.
ruimte die beter besteedt kan worden om plof beter te pro-
De huidige werking van bestellen en betalen is
fileren op de homepage. Wellicht om de meest verkochte
omslachtig en moet anders. Laat gebruikers producten
artikelen weer te geven, of een sfeerfoto welke plof
in een ‘winkelmandje’ stoppen. Zorg dat ze tijdens het
visualiseert. Daarnaast kan de subnavigatie, onderaan de
bezoek niet afgeleidt worden, het betalen komt later,
homepagina, beter verwerkt worden. Door na te denken
namelijk wanneer de gebruiker klaar is met zoeken naar
over positionering en uitlijning kan er al een hoop gewon-
producten. Geef een gebruiker de mogelijkheid om een
nen worden qua uitstraling en overzichtelijkheid.
account aan te maken, zodat bij een volgend bezoek een aantal stappen overgeslagen kunnen worden.
Productoverzichtpagina
Tegenwoordig gebruikt bijna elke webshop iDEAL, een
Elke productcategorie heeft een eigen pagina. Bij elke
perfecte en makkelijke manier van online betalen. Zorg
pagina staat een korte introductietekst over de betreffende
ervoor dat mensen gemakkelijke kunnen betalen. Per-
categorie, dit is prima om de nog onbekende bezoekers
soonlijk zou ik mensen altijd vooruit laten betalen, maar
te informeren. Vervolgens worden de producten weerge-
achteraf een factuur sturen is natuurlijk ook mogelijk. Deze
geven, elk product onder een ander product. Deze manier
keuzemogelijkheid laat ik tijdens zit herontwerp achter-
van weergeven neemt erg veel ruimte in beslag. Het zou
wege, ik kies ervoor om een online betaalmogelijkheid te
makkelijker zijn voor de gebruiker om een onderscheid te
integreren aangezien veel mensen dit al gewend zijn.
maken tussen een productoverzichtpagina en een productdetailpagina. Door op de overzichtpagina te focussen op het weergeven van de productafbeeldingen, zonder al te veel details, en op de productdetailpagina de details van het product weer te geven bespaar je de gebruiker tijd. Wanneer de gebruiker geïnteresseerd is in een product zal hij hier toch wel op klikken voor meer informatie. Het weergeven van de producten van vele malen efficiënter. Dit zorgt ook voor een mate van rust en overzicht. Tevens wordt een gebruiker ontlast omdat hij of zij sneller zijn of haar doel kan bereiken. Daarnaast mogen de prijs en de bestelbutton ook wat prominenter aanwezig zijn.
7
4. systeemeisen
1.0 Functionele eisen 1.1 Het systeem moet het mogelijk maken om te navigeren binnen de website 1.2 Het systeem moet het mogelijk maken om producten weer te geven 1.2.1 Het systeem moet het mogelijk maken om een productfoto weer te geven 1.2.2 Het systeem moet het mogelijk maken om een productprijs weer te geven 1.3 Het systeem moet het mogelijk maken om invoervelden van een formulier in te vullen 1.4 Het systeem moet het mogelijk maken om een formulier te versturen 1.5 Het systeem moet het mogelijk maken om een zoekfunctie uit te voeren 1.6 Het systeem moet het mogelijk maken om een product te bestellen 1.6.1 Het systeem moet het mogelijk maken om een product meerdere malen te bestellen 1.6.2 Het systeem moet het mogelijk maken om verschillende producten te bestellen 1.6.3 Het systeem moet het mogelijk maken om producten te verwijderen 1.6.4 Het systeem moet het mogelijk maken om een bestelling te betalen 1.6.5 Het systeem moet het mogelijk maken om de bestelgeschiedenis weer te geven 1.7 Het systeem moet het mogelijk maken om een eigen account aan te maken 1.8 Het systeem moet het mogelijk maken om de accountgegevens te wijzigen 2.0 Niet functionele eisen 2.1 Interface eisen 2.1.1 De interface toont op elke pagina het logo 2.1.2 De interface toont op elke pagina de titel van de pagina 2.1.3 De interface maakt onderscheid tussen belangrijke en minder belangrijke content 2.1.4 De interface toont op elke pagina de globale navigatie 2.1.5 De interface maakt gebruik van affordances 2.1.6 De interface is gebaseerd op een grid 2.1.7 De interface geeft de sfeer van het moodboard weer 2.1.8 De interface sluit aan bij de geformuleerde doelgroep 2.2 Integriteitseisen 2.2.1 Het systeem moet schaalbaar zijn om wisselende bezoekersaantallen op te vangen
8
4. systeemeisen
2.3 Performance eisen 2.3.1 Het systeem moet het mogelijk maken om binnen een halve seconde een pagina te laden 2.3.2 Het systeem bevat jpg bestanden van maximaal 2,5mb per bestand 2.3.3 Het systeem bevat png bestanden van maximaal 100kb per bestand 2.3.4 Het systeem moet zoekopdrachten binnen één seconde uitvoeren 2.3.5 Het systeem geeft een indicatie van de laadtijd bij zoekopdrachten die langer duren als één seconde 2.4 Operationele eisen 2.4.1 Het systeem moet geschreven zijn in semantisch correcte HTML 5.0 2.4.2 Het systeem moet geschreven zijn in syntactisch correcte HTML 5.0 2.4.3 Het systeem moet geschreven zijn in semantisch correcte CSS 3.0 2.4.4 Het systeem moet geschreven zijn in syntactisch correcte CSS 3.0 2.4.5 Het systeem moet geschreven zijn in syntactisch correcte ‘programmeertalen’ 2.4.6 Het systeem moet geschreven zijn in syntactisch correcte ‘programmeertalen’ 2.5 Technische eisen 2.5.1 Het systeem moet functioneren op de recentste drie browser versies van Google Chrome 2.5.2 Het systeem moet functioneren op de recentste drie browser versies van Mozilla Firefox 2.5.3 Het systeem moet functioneren op de recentste drie browser versies van Internet Explorer 2.5.4 Het systeem moet functioneren op de recentste drie browser versies van Opera 2.5.5 Het systeem moet gebouwd worden op basis van een content management system 2.5.6 Het systeem moet de bestelde producten van de gebruiker onthouden 3.0 Content eisen 3.1 Het systeem moet informatie bevatten over plof 3.2 Het systeem moet de gebruiker aanzetten tot het kopen van producten 3.3 Het systeem moet het mogelijk maken om contactgegevens weer te geven 3.4 Het systeem moet het mogelijk maken om productinformatie weer te geven 3.5 Het systeem moet het mogelijk maken om de productprijs weer te geven 3.6 Het systeem moet het mogelijk maken om veelgestelde vragen weer te geven
9
5. ontwerp
5.1 flowchart klik op bestellen
al ingelogd?
log in
ja
inloggegevens ok?
nee
al een account?
nee
ja stap 1: gegevens
ja
nee
gegevens ingevuld?
nee
maak account ja klik op bestellen mail voor activering
ja
bevestig account stap 2: betalen
nee neem contact op is er betaald?
nee
ja bedank gebruiker
10
5.2 visueel ontwerp
Homepagina
Zoekfunctie
11
5.2 visueel ontwerp
Globale navigatie
12
5.2 visueel ontwerp
Categorieën overzichtspagina
13
5.2 visueel ontwerp
Product overzichtspagina
14
5.2 visueel ontwerp
Product detailpagina
15
5.2 visueel ontwerp
Inloggen
Winkelwagen
16
5.2 visueel ontwerp
Betaalpagina
Bedankt
17
5.3 patronen
Animated transition Bij bepaalde onderdelen van de website is het voor de gebruiker handig om deze te animeren. Door bijvoorbeeld de zoekbalk te animeren wanneer er op het icoon is geklikt, krijgt de gebruiker een beter beeld wat er gebeurt en wat zijn vervolgactie moet zijn. Daarnaast worden animaties ook toegepast bij de slider op de homepagina en het winkelmandje wanneer daar op geklikt is.
Carousel Een lijst, in dit geval van drie items, met onder andere nieuwe en inspirerende producten is visueel weergegeven. Omdat het zonde van de ruimte is om de drie items onder elkaar weer te geven is ervoor gekozen deze in een carousel die automatisch naar de volgende slide gaat.
Autocompletion Wanneer er gezocht wordt middels de zoekfunctie zal het systeem een selectie van de mogelijke opties weergeven. Deze manier van zoeken bespaart tijd en energie. Corner treatments Breadcrumbs
Door het toepassen van afgeronde hoeken oogt het ont-
Door de globale navigatie kan de gebruiker overal binnen
werp vriendelijker dan wanneer er alleen gebruik gemaakt
de website komen. Maar wanneer de gebruiker wat dieper
zou worden van rechte lijnen en niet afgeronde hoeken.
in de webshop is kost het gebruiken van de globale navigatie extra stappen om bijvoorbeeld terug te keren naar de categorieën. Daarnaast is dit een handig hulpmiddel om de gebruiker te vertellen waar hij of zij zich bevindt.
Cancelability In het boek ‘Designing interfaces’ wordt gesproken over het annuleren van een tijdrovende actie. In dit geval is daar geen sprake van, wel is het zo dat middels de link verwijderen de gebruiker de in het winkelwagen geplaatste product kan verwijderen. De gebruiker heeft dus alle vrijheid om fouten of vergissingen te maken.
18
5.3 patronen
Dropdown chooser Om ruimte in het formulier op de betaalpagina te besparen is ervoor gekozen om de te selecteren bank, welke input van de gebruiker is, in een dropdown lijst te verwerken.
Hover tools Escape hatch
De elementen horende bij een item zijn standaard verbor-
De gebruiker weet dat wanneer er op het logo geklikt
gen, maar worden getoond wanneer de gebruiker er met
wordt hij of zij terug gaat naar de homepagina. Het is es-
zijn of haar muis overheen gaat. Op deze manier blijft het
sentieel om de gebruiker deze ‘nooduitgang’ te geven.
ontwerp overzichtelijk, pas wanneer een element nodig is wordt deze dus getoond.
Feature, search and browse De volgende drie elementen zijn verwerkt in de homepagina: een kenmerkend product, een manier om te zoeken binnen de website en de mogelijkheid om te browsen. Zoeken en browsen bieden een manier om binnen de website te zoeken, een kenmerkend product daarentegen is ervoor om de gebruiker te interesseren en nieuwsgierig te maken naar de rest van de pagina/producten. Input prompt Good defaults
In de invoervelden staat een hulptekst welke de gebruiker
Wanneer een gebruiker ingelogd is en wat besteld, dan
vertelt wat hij moet invullen in dat desbetreffende invoer-
zijn de adresgegevens van die persoon bekend bij plof. De
veld. Dit om eventuele misverstanden tot een minimum te
kans is groot dat een particulier producten besteld, in dit
beperken.
geval zal in het merendeel van de gevallen het ingevulde adres ook het bezorgadres zijn. Daarom is de optie ‘thuis laten bezorgen’ standaard aangevinkt. Op deze manier wordt de gebruiker wederom een klik bespaard (wanneer de default goed staat tenminste).
19
5.3 patronen
Liquid layout Aangezien de doelgroep bestaat uit jonge gezinnen en aanstaande gezinnen is de kans daar dat zij de website met een ander medium dan de computer of laptop bezoeken. Het is daarom belangrijk om een liquid lay-out, ook wel schaalbaar ontwerp, aan te kunnen bieden. Op deze manier krijgt een gebruiker, ongeacht het apparaat waar hij of zij de website mee bezoekt, de voor het apparaat geschikte weergave van de website te zien. Modal panel Wanneer de gebruiker op zijn of haar winkelwagen klikt
Same-page error messages
komt er een paneel uitgeschoven waarin de in het winkel-
Het is fijn wanneer je gelijk te horen krijgt als je iets fout
wagen geplaatste producten staan. Dit paneel heeft als
doet bij het invullen van een formulier. Door de validatie
doel om de gebruiker de producten te laten bestellen. Er
na het verlaten van het invoerveld uit te voeren krijgt de
moet op het kruisje rechts bovenin geklikt worden om het
gebruiker gelijk een signaal dat er iets verkeerd is gegaan,
paneel in te laten schuiven.
op deze manier kan hij of zij de fout gemakkelijk en snel winkelwagen(2)
welkom Tim Davids
webshop
grafischWinkelwagen ontwerp wie o wie
contact
Peer poster
350 grams karton € 25,00
2 x € 12,50 Verwijder
€ 7,50
Verzendkosten Totaal
€ 32,50
Bestellen
350 grams op aanvraag.
Preview Plaatjes zeggen meer dan duizend woorden wordt ook wel eens gezegd. Omdat ik vind dat de tekst ‘peer poster’, zie bovenstaande afbeelding, te weinig context bied heb ik een preview van het in het winkelwagen geplaatste product weergegeven. Op deze manier kan een gebruiker het product makkelijker herkennen. Prominent done button Buttons die contrasteren met het ontwerp vallen op, dat is de bedoeling van enkele belangrijke buttons die een bepaalde stap in het bestelproces aangeven. De gebruikte buttons zijn: plaats in winkelwagen, inloggen, aanmaken, bestellen en plaats uw bestelling.
20
uitroepteken geven de indicatie dat er iets verkeerd is ingevuld. Daarnaast wordt er een informatieve foutmelding gegeven waar de gebruiker wat mee kan, in dit geval: het
A4-formaat,
Poster peer
herstellen. De rode rand rondom het invoerveld en de
@-teken ontbreekt.
5.3 patronen
Sign-in tools
Titled sections
De inlog optie hoort bij een webshop, daarom kan deze
Om content te onderscheiden van elkaar is er naast het
ook bij plof niet ontbreken. De plaats van deze optie staat
gebruik van vlakken en kleuren ook de mogelijkheid om
vast, de gebruiker verwacht deze namelijk altijd rechts
middels grote titels hetzelfde effect te bereiken.
bovenin het scherm. Om ruimte te besparen is ervoor gekozen om alleen de tekst ‘Welkom gebruiker’ te laten zien. Wel staat daarnaast een icoon welke een dropdown lijst symboliseert waar meer linken met betrekking tot het account staan.
Visual framework Elke pagina heeft dezelfde lay-out, binnen die lay-out is er gebruik gemaakt van verschillende kolommen: 1, 2, 3 of 4 kolommen. Respectievelijk: de slider, inloggen en de product detailpagina, categorieën overzichtspagina, en productoverzichts pagina. Verder zijn kleur, grafische elementen, marges, buttons en typografie consistent toegepast op de verschillende pagina’s.
Thumbnail grid Een grid bestaande uit thumbnails is een bekende en makkelijke manier om gelijke items weer te geven. Door de producten te verdelen over 4 kolommen in plaats van 3 passen er meer producten in het scherm. Hierdoor krijgt de gebruiker snel een overzicht en kan hij of zij makkelijk zoeken naar een bepaald product.
21
6. evaluatie
6.1 eerste ronde Na de schetsen te hebben omgezet naar het eerste vi-
inloggen
webshop
suele ontwerp voor de website van plof heb ik aan enkele mensen feedback gevraagd. Om een idee te krijgen waar de feedback van toepassing op is volgen er eerst enkele schermontwerpen. De gekregen feedback neem ik mee in de verdere uitwerking van de website, zie paragraaf 5.2
wie o wie
2
contact
Webshop Papierwaren Poster peer
Poster peer Poster op A4-formaat, gedrukt op 350 grams karton. Andere formaten mogelijk op aanvraag.
Aantal
voor het definitieve ontwerp.
grafisch ontwerp
2
€ 25,-
In winkelmandje
Beoordeel dit product inloggen
categorie
prijs
€0
€ 150
beoordeling
04
0
Zoeken
Anderen bestelden ook
Plof maar lekker achteruit in je stoel!
Amai
Unieke geboortekaartjes v.a. € 40,-
Poster appel € 45,-
Alléhop W. Alexander € 12,50
Adressticker walvis
€ 12,50
€ 0,15
anouk corstiaensen
inloggen
algemene voorwaarden
0 welkom Tim Davids
webshop
grafisch ontwerp
wie o wie
contact
webshop
grafisch ontwerp
wie o wie
2
contact
Winkelmandje
Webshop Papierwaren
Webshop Papierwaren Poster peer
Peer poster A4-formaat,
Sorteren op
a-z
prijs
prijs
€0
€ 15
beoordeling
350 grams karton
04
€ 25,00
2 x € 12,50
Poster peer
Verwijder € 7,50
Verzendkosten
Poster op A4-formaat, gedrukt op 350 grams karton. Andere formaten mogelijk op aanvraag.
€ 32,50
Totaal
Bestellen Aantal
1
€ 12,50
inloggen
Poster peer
Poster appel € 12,50
Kerstman stickerkaart € 12,50
€ 1,50
Adressticker walvis € 0,15
webshop
grafisch ontwerp
E-mailadres: [ruimte]Webshop Papierwaren Poster peer Vul hier uw e-mailadres in
Poster peer
Wachtwoord:
Wachtwoord vergeten?
Vul hier uw wachtwoord in
Adressticker knoet
Kerstman
€ 0,15
Sluitsticker jongen € 0,15
€ 0,13
Sluitsticker meisje
Poster op A4-formaat, gedrukt op 350 grams karton. Andere formaten mogelijk op aanvraag. Registreren
€ 0,13
Aantal
anouk corstiaensen
algemene voorwaarden
22
1
€ 12,50
Inloggen
wie o wie
contact
2
6.1 EERSTE RONDE
Feedback Linda Tiersma Ziet er top uit! Dus alles waar ik niets over zeg vind ik natuurlijk mooi. Maar... - het logo zou wel groter mogen zoals de oorspronkelijke site. Lekker aanwezig. - de navigatie om het zoeken de verfijnen vind ik erg klein. Het zou ook aan de zijkant kunnen. Op de meeste webshops is dat het geval. - sommige categorieën zijn me niet gelijk duidelijk. Alléhop, doos van mij en amai? Misschien kan daar een klein zinnetje onder. Zoals: Doos van mij - stel je eigen cadeau samen ofzoiets. - in het overzicht lijkt het nu zo te zijn dat waar je overheen gaat met de muis er een laag over de kaart waar je naar kijkt komt. Ik zou dat omdraaien. Maak alle andere kaarten vaag behalve die. Dat lijkt me minder vervelend.
- het hoofdmenu zou ik persoonlijk altijd zichtbaar houden, ik zag een ontwerp met filters waarbij het menu verborgen is. - het menu toont geen ‘active’ state - je werkt met 3 en 4 kolom grids, wellicht is de keuze voor één van de twee beter. - in de grids werk je met een visual, een titel en een lijn, maar doordat deze niet dicht genoeg bij elkaar staan, is het me niet duidelijk wat bij elkaar hoort. Als ik naar beneden scroll, zou ik kunnen denken dat de titel, lijn en visual van de volgende rij bij elkaar horen. - je gebruikt een winkelmandje ipv een winkelwagentje, waarom? En als de 0 erin staat, dan vind ik hem nog onduidelijker. - in het gridoverzicht maak je gebruik van sterren en het winkelmandje, zijn deze duidelijk genoeg? Wat wordt er mee bedoeld?
Feedback Reggy Alsemgeest
- op de detailpagina maak je gebruik van een onderlijning
Ziet er echt goed strak uit! Wel een paar kleine dingetjes.
voor een hyperlink, op zich is dit goed, maar omdat je
Waarom heb je ervoor gekozen om het logo te veran-
ditzelfde effect gebruikt voor de titels is het hier weer
deren? Misschien kun je contact in de footer zetten? (heb
verwarrend. Dus je zou voor de titels of de hyperlinks
ik zelf ook niet maar is maar een idee) Want hoe belang-
nog iets moeten verzinnen.
rijk is de contact pagina op de website? Bij het product
- de winkelmandje popup, waar sluit die op aan? Lijkt nu
bestellen kun je kiezen uit twee stappen. Echter ik zie
uit het hoofdmenu te komen, terwijl die er eigenlijk over-
dat je vanuit dat punt niet terug kunt gaan naar de vorige
heen zou moeten vallen.
pagina. Laatste puntje waarom heb je ervoor gekozen om
- het inlogscherm, nu gebruik je voor het registreren een
een zoekfunctie bij het menu te zetten en niet alleen bij de
rode knop (= gevaar). En is hier echt de keuze inloggen
productenpagina? Voor mijzelf zou het duidelijker zijn als
of registreren? Of zou je registreren juist nog even apart
ik het alleen op de productenpagina zie.
met een tekstje willen vermelden, Heeft u nog geen account, dan kunt u zich hier registreren?
Feedback Joël Plas
Oh ja, dit zijn allemaal details die ik je nu meegeef, overall
Je ontwerp rapport ziet er goed uit tot zover, wat betreft de
zien de ontwerpen er meer dan prima uit!
alternatieven, als het niet mogelijk is deze te benoemen dan hoeft dat uiteraard niet. Wat betreft je ontwerpen valt me het volgende op: - ik krijg heel erg een ‘echt HEMA’ gevoel bij jouw ontwerp, komt een beetje door je kleur/vlak keuzes en het lettertype denk ik. Is ook niet negatief bedoeld, maar ben benieuwd of je het zelf ook ziet. - je maakt veel gebruik van zelf-ontworpen formulier elementen. Bedenk goed of je dit wenselijk vindt voor de gebruiker. Is jouw ontwerp gelijk duidelijk voor de gebruiker wat ie moet/kan doen.
23
6.2 eigen evaluatie
Ontwerp
Daarnaast zijn er veel eisen welke pas gecheckt kunnen
Qua ontwerp heb ik geprobeerd om de website een jonge-
worden wanneer de website daadwerkelijk gerealiseerd
re en modernere uitstraling te geven, dit door in te spelen
zou worden. Eisen zoals: 2.3.1 Het systeem moet het
op de huidige ontwikkelingen op het gebied van webde-
mogelijk maken om binnen een halve seconde een pagina
sign. Daarnaast ben ik van mening dat een eenvoudig
te laden, 2.3.4 Het systeem moet zoekopdrachten binnen
ontwerp een zeer krachtig ontwerp is. Door minimalistisch
één seconde uitvoeren en 2.4.1 Het systeem moet ges-
te ontwerpen haal je al het overbodige weg en is het dus
chreven zijn in semantisch correcte HTML 5.0.
alleen de essentie die weergegeven wordt op de website. Het ontwerp, te zien in paragraaf 5.2, is dus grondig
Aanbevelingen
aangepast, het kan zijn dat de stijl te veel afwijkt van wat
Social media is een sterk middel om meer bekendheid te
plof voor ogen heeft. Wanneer dit het geval is kunnen de
genereren, mits deze goed ingezet wordt. Zo kun je bij-
herkenbare elementen van de huidige website toegepast
voorbeeld gebruikers na een aankoop hen de mogelijkheid
worden op het herontwerp, denk bijvoorbeeld aan de veel
geven om het gekochte product met een inspirerende zin
gebruikte rode kleur. Wel is het zo dat enkel de ‘jas’ van
te laten delen op bijvoorbeeld Facebook of Twitter. Daar-
de website aangepast is, ik ben van mening dat de pro-
naast kunnen op de product detailpagina’s mogelijkheden
ducten de nadruk behoeven. Al het overige is er slechts
tot delen worden weergegeven om bijvoorbeeld producten
ter ondersteuning.
aan te raden bij bekenden. Daarnaast heb ik nu de contact- en de grafisch ont-
Systeemeisen
werppagina’s niet uitgewerkt. Dit omdat ik meer focus wou
De systeemeisen heb ik tijdens het ontwerpen in mijn
leggen op de webshop, aangezien mij dit het hoofddoel
achterhoofd gehouden. Zie hoofdstuk 4 voor de definitieve
van de website lijkt. Webshops hebben dan vaak nog wel
systeemeisen Na de eerste uitwerking ontworpen te heb-
een contactpagina, maar een hele andere tak als grafisch
ben heb ik deze nogmaals gecheckt op mogelijke verschil-
ontwerp ben ik nog niet tegen gekomen. Wellicht zou dit
len, resulterende in de volgende twee wijzigingen:
klein ergens vermeld worden, zodat de website echt een
- 1.6.3 Het systeem moet het mogelijk maken om pro-
webshop wordt. Voor het grafisch werk moet dan wel een
ducten te verwijderen tijdens het bestellen. Niet alleen tijdens het bestellen moeten producten verwijderd kunnen
nieuwe portfolio website ontworpen en ontwikkeld worden. Tot slot heb ik geprobeerd om het navigeren binnen
worden, dit is een eis die ongeacht de positie binnen de
de website en het bestellen en afrekenen van producten
website uitgevoerd moet kunnen worden.
te verbeteren, deze twee punten waren voor mij het
- 2.1.7 De interface geeft de sfeer van het moodboard
belangrijkste om voornamelijk de webshop vele malen
weer. Wanneer ik achteraf gezien het ontwerp naast
gebruiksvriendelijker te maken. Door de globale navigatie
het moodboard leg kan ik stellen dat deze enigszins
altijd bovenaan de pagina weer te geven is dit eerste ver-
van elkaar afwijken (alleen het eerste moodboard).
beterd. Door het vereenvoudigen van te nemen stappen
Voorafgaand had ik een kleurenpalet van 6 kleuren.
om te bestellen en af te rekenen is dit tweede verbeterd.
Naarmate het ontwerpen vorderde heb ik het aantal kleuren bijgesteld tot 3. Naar mijn mening werd het te frivool en schreeuwend. Ook kwam hierdoor meer tot uiting, aangezien de meeste afbeeldingen al bomvol met kleuren en vormen zitten. Wel ben ik van mening dat desondanks het moodboard niet geheel overeenkomt met het uiteindelijke ontwerp de volgende eis nog wel voldoet: 2.1.8 De interface sluit aan bij de geformuleerde doelgroep.
24
Bijlage schetsen
25
