Inhoudsopgave Inleiding 3



Dovnload 143.21 Kb.
Pagina6/6
Datum20.08.2016
Grootte143.21 Kb.
1   2   3   4   5   6

9.Uitwerking concept 1


De uitwerking van het concept resulteert in een prototype waarin interactie met de informatie mogelijk is.


  1. concept 1, versie 1

In het eerste concept staan de ‘hoofdlinks’ in de groene balk. In het vlak boven de balk is in grote letters te lezen op welke pagina de bezoeker zich bevindt. De kleuren zijn naar eigen inzicht gekozen alsmede het lettertype (Trebuchet MS). De grijze achtergrond geeft meer accent aan het tekstvlak, wat in dit geval wit is. Wanneer nu bijvoorbeeld op ‘contact’ geklikt wordt zal het tekstvlak naar rechts bewegen waarbij de overige weblinks links van het tekstvlak komen te staan. In het geval van contact zullen alle ‘hoofdlinks’ links van het venster staan, zoals weergegeven in de figuur op de volgende pagina.




  1. concept 1, versie 1

De pagina’s van dit concept hebben allemaal andere kleuren van de ‘hoofdbalk’. Hiervoor is gekozen om de opdrachtgever verschillende aanbevelingen voor de kleur te doen.




  1. concept 1, versie 2

In bovenstaand figuur is een iets andere variant te zien. Er is gekozen om de balk waarin de links zich bevinden niet door te laten lopen. Op deze ontkoppelt de website zich van het venster, het komt wat meer op zichzelf te staan. De tekst van de actieve pagina, in dit geval ‘producten’ staat niet boven maar in de balk. Op deze manier komt er in het bovenste vak ruimte vrij voor bijvoorbeeld het logo en contact informatie.

De ‘sub-links’ hebben in dit concept ook een plaats gekregen. Door de ‘sub-links’ buiten het venster te plaatsen vallen ze goed op. Nadeel is wel dat het geheel minder compact wordt.


  1. concept 1, versie 3

In de volgende figuur is te zien hoe aan het geheel meer invulling is gegeven. De achtergrondkleur is aangepast van grijs naar een grijsgroene kleur. Deze kleur sluit beter aan bij de groene kleur van de balk met de ‘hoofdlinks’. In het bovenste vlak is een foto van een museum (ter voorbeeld) geplaatst met daarbij de contactinformatie. De balk met de tekst ‘museum’ van de actieve pagina heeft een lagere intensiteit groen gekregen. Op deze manier lijkt het alsof de balk niet doorloopt maar achter het tekstvlak langs loopt. Tevens is er een voorbeeldtekst ingevoerd om het geheel een complete invulling te geven. Onder dit tekstvlak is de voettekst te zien. Hierin staan links naar de andere talen weergegeven met kleine vlaggen. In het midden staat de copyrighttekst die doorlinkt naar de disclaimer. Rechts staat een link naar de sitemap. Door deze links binnen het tekstvlak te plaatsen wordt de middelste balk, met het tekstvak, over de hele hoogte van het venster geplaatst. Deze opzet heeft het nadeel dat bij verschillende schermresoluties de pagina indeling er anders uit zal zien.

In deze versie is een drietal opties te zien voor de ‘sub-links’. In de eerste plaats zijn deze geplaatst recht onder de tekst van de actieve pagina, in dit geval ‘museum’. Op deze manier blijft de linkstructuur tussen ‘hoofdlink’ en ‘sublink’ erg compact. Voordeel hiervan is ook dat de ‘sub-links’ binnen de bestaande lay-out passen. De andere optie is al naar vorige gekomen in een vorig concept. Hierbij staan de ‘sub-links’ los in het kader links van het tekstvlak. De derde optie is om deze ‘sub-links’ in een apart kader te groeperen en zodoende min of meer aan te sluiten op het tekstvlak.


  1. concept 1, eindversie

In bovenstaand figuur is de uiteindelijke versie te zien. De kleur van de balk is de dezelfde kleur als die van het logo. Dit logo is een bestaand logo dat al jaren wordt gebruikt op facturen en beurzen. Aangezien dit logo door het management van Mobach niet als erg mooi wordt gezien is er voor gekozen om dit logo niet op elke pagina terug te laten komen. Het logo is alleen te zien op de beginpagina.

Aan de hand van deze kleur is ook de achtergrondkleur gekozen. Dit is gebeurd met behulp van een kleurenpallet. Dit kleurenpallet is terug te vinden in de bijlagen. De grijsgroene kleur heeft een ‘aardse’ tint en past goed bij het geheel.

In het bovenste kader zijn enkel de woorden ‘mobach keramiek’ geplaatst op een witte achtergrond. Het lettertype van dit ‘logo’ is Arial. Dit lettertype wordt al jaren door Mobach Keramiek gebruikt op facturen en catalogi. Het veranderen van dit lettertype was dan ook niet wenselijk. Dit lettertype is dan ook gebruikt voor alle tekst van de website. Persoonlijk heb ik een ander lettertype aangeraden. Het lettertype ‘trebuchet MS’ heeft naar mijn smaak een meer uniek karakter zonder dat het erg afwijkt van sobere verschijning van het arial lettertype.

In het volgende voorbeeld wordt het verschil tussen de twee lettertypen getoond:
Arial: Mobach Keramiek Trebuchet MS: Mobach Keramiek

Ter gelegenheid van het honderdjarig bestaan van Mobach Keramiek in 1995 is in 1994 de Stichting Mobach Keramiek Collectie opgericht. Doelstelling van de stichting is het beheren, uitbreiden en exposeren van de Mobach keramiekcollectie.


Het Mobach Keramiek Museum is gehuisvest in het pand dat Klaas Mobach in 1913 aan de Kanaalweg in Utrecht heeft laten bouwen.

Ter gelegenheid van het honderdjarig bestaan van Mobach Keramiek in 1995 is in 1994 de Stichting Mobach Keramiek Collectie opgericht. Doelstelling van de stichting is het beheren, uitbreiden en exposeren van de Mobach keramiekcollectie.


Het Mobach Keramiek Museum is gehuisvest in het pand dat Klaas Mobach in 1913 aan de Kanaalweg in Utrecht heeft laten bouwen.

Wat verder opvalt is de achtergrondafbeelding. Deze loopt deels achter de tekst en deels in de achtergrondkleur. Door deze afbeelding krijgt het geheel in één klap duidelijk de stempel ‘Mobach Keramiek’. Deze afbeelding verschilt bij de vijf verschillende ‘hoofdlinks’ en is niet op de fotopagina’s geplaatst. Hiervoor is gekozen omdat anders het geheel te druk zou worden. Deze afbeeldingen zijn geselecteerd door het management van Mobach.

Wat meer opvalt is dat de pagina zowel boven als onder losgemaakt is van het venster. Deze keuze heeft enerzijds te maken met smaak, de balk met ‘hoofdlinks’ wordt op deze manier meer geaccentueerd, en anderzijds te maken met een technische oplossing. Dit laatste heeft te maken met de verschillende resoluties die gebruikers kunnen hebben wanneer ze de website bekijken. Bij een hoge resolutie zou een doorlopend tekstvak in de hoogte betekenen dat er veel loze ruimte in het tekstvak ontstaat. Door een vaste afmeting van het tekstvak te kiezen zal deze afmeting bij iedere gebruiker, in verhouding althans, hetzelfde zijn. De voettekst is buiten dit tekstvak geplaatst omdat deze opties niet direct met de tekst in het vak te maken hebben. Zodoende bestaat het tekstvak ook daadwerkelijk alleen uit tekst. Ditzelfde geldt ook voor de voettekst aangezien de vlaggen voor de taalkeuze vervangen zijn door woorden. Dit geeft een rustiger aangezicht.

De links op de pagina’s zijn vetgedrukt. Dit kan enigszins verwarrend werken aangezien er meer vetgedrukte woorden in delen van de tekst voorkomen. De opties, andere kleur, vet of schuingedrukt pasten alle niet binnen het aanzien van het geheel. Deze mening wordt gedeeld door mij en het management van Mobach Keramiek. Daarbij is de linkstructuur dusdanig logisch dat hierbij geen problemen verwacht worden. Een aparte vermelding hierbij dient gemaakt te worden voor de titel van de actieve pagina, in het geval van het voorbeeld ‘museum’. Waar in de vorige versies dit woord gesierd werd door afwijking in grootte is in de uiteindelijke versie gekozen om het woord enkel in de kleur wit te veranderen. De reden hiervoor is dat de balk met ‘hoofdlinks’ op deze manier een meer consistente aanblik krijgt waarbij de actieve pagina toch benadrukt wordt.


Alle pagina’s hebben dezelfde opzet zoals te zien is in figuur 17. Er zijn echter 2 soorten pagina’s die afwijken. In de eerste plaatst is dat de beginpagina, het zogenaamde splashscreen. Deze is te zien in de volgende figuur:


  1. concept 1, splashscreen

Belangrijk verschil is dat de balk met ‘hoofdlinks’ nu gebruikt is om de gebruiker de gewenste taal te laten kiezen. Deze drie links zijn dan ook de enige ‘objecten’ op de pagina waarop geklikt kan worden. Op deze manier wordt de gebruiker min of meer aangeleerd dat de interactie in de oranje balk te vinden is. In het vak er onder, wat overigens even groot is als op de overige pagina’s, staan 3 sfeerfoto’s en het logo van Mobach Keramiek. De opbouw van deze pagina geeft de gebruiker in één oogopslag een duidelijk beeld van het bedrijf Mobach Keramiek. Een studie naar andere opties voor deze pagina is te vinden in de bijlagen.




  1. concept 1, fotopagina

Een ander type pagina dat afwijkt is de fotopagina. Bij vier van de vijf ‘hoofdlinks’ is een fotopagina te vinden waarop 9 foto’s te vinden zijn die relevant zijn bij de betreffende ‘hoofdlink’. Deze foto’s zijn vierkant en in een raster geplaatst. Hiervoor is gekozen omdat het management van Mobach Keramiek de opbouw van de collage erg mooi vond en dit in de site wou gebruiken. De negen foto’s zijn links naar een grotere versie van de betreffende foto. Wanneer een foto aangeklikt wordt komt men op bijvoorbeeld een pagina zoals weergegeven in de afbeelding op de volgende pagina.




  1. concept 1, fotopagina

Op deze pagina vult de foto het gehele ‘tekst’vak. Dit tekstvak heeft overigens op alle type pagina’s dezelfde afmeting. Zoals de tekst aangeeft kan de gebruiker met deze links door de 9 foto’s bladeren zonder elke keer terug naar het overzicht te moeten. Het foto overzicht is op te vragen door op de middelste link te klikken. Doordat de alle hoofd- en ‘sub-links’ nog steeds zichtbaar zijn kan de gebruiker ten alle tijde een gewenste keuze maken.


In onderstaand figuren zijn een aantal andere opties voor deze pagina te zien.


  1. concept 1, fotopaginaconcept

Bij deze optie is links het aantal kleine foto’s te zien. Wanneer deze aangeklikt worden verschijnt de grote versie in het rechter kader. Op deze manier bijven de kleine versies zichtbaar wanneer een grote versie wordt gekozen. Dit principe is ook te gebruiken wanneer de kleine versies zich niet links of rechts bevinden maar boven of onder.

Het volgende principe is min of meer hetzelfde. Hierbij is echter een ingreep in de bestaande lay-out noodzakelijk. Het bestaande venster zal twee keer zo breed moeten worden om links de kleine versies te tonen, zoals in de uiteindelijke versie gebeurd, en rechts de grote versie van de afbeelding. Het grote voordeel van dit concept is dat alle links ten alle tijde zichtbaar zijn. Dit komt de gebruiksvriendelijkheid ten goede.


  1. concept 1, fotopaginaconcept



10.Evaluatie


Na het afronden van de ontwikkeling van de website kan deze ‘online’ worden geplaatst. Nu de website ‘live’ is kan deze geëvalueerd worden. Het is van belang om te weten of met alle relevante richtlijnen voldoende rekening is gehouden. Een goede manier om dit te toetsen is aan de hand van een gebruikerstest. De gebruikerstest zelf is te vinden in de bijlagen. Hieronder staan de uitkomsten van deze gebruikerstest. Deze test is afgenomen bij 5 medewerkers van Mobach Keramiek en 5 onafhankelijke personen. Bij de onafhankelijke personen heeft vooraf aan de vragenlijst een kort inleidend verhaal over Mobach Keramiek plaats gevonden.


  1. gebruikerstest, eerste indruk

De opmerking die bij de keuze ‘oneens’ is geplaatst is dat de gebruiker de ambachtelijke uitstraling mist. Dit is iets wat door mobach zelf juist voorkomen wou worden. Verder lijkt het er op dat de uitstraling goed past bij het beeld dat mensen hebben van Mobach Keramiek.





  1. gebruikerstest, duidelijkheid informatie

Uit figuur 24 kan geconcludeerd worden dat de ondervraagde personen direct in de gaten hadden hoe de user-interface van de website werkt.




  1. gebruikerstest, ordening informatie

Uit figuur 25 kan geconcludeerd worden dat voor een gebruiker, al dan niet bekend met Mobach Keramiek, de informatie ordening logisch is. Dat een enkeling hier eens nog oneens mee is kan te maken hebben met het feit dat voor onbekenden het moeilijk is om aan te geven wat een logische ordening is voor een bedrijf als Mobach Keramiek.




  1. gebruikerstest, leesbaarheid tekst

Uit figuur 26 kan geconcludeerd worden dat alle ondervraagden geen problemen ondervinden bij het lezen van de tekst. Daarbij is de tekst zo opgebouwd dat deze vanuit de browser groter dan wel kleiner gekozen kan worden.


Tenslotte is door elke gebruiker gevraagd de website te scoren op een schaal van één tot tien. Hieruit komt een gemiddelde van 7.7.
Het resultaat, http://www.mobach-keramiek.nl, is een website die uniek, toegankelijk en tijdloos is en de stijl van Mobach Keramiek uitdraagt.


1 http://www.nu.nl/news/712715/50/Helft_ondernemers_heeft_geen_eigen_website.html geraadpleegd op 12-04-2006

2 http://nl.wikipedia.org/wiki/Geschiedenis_van_het_internet geraadpleegd op 18-07-2005

3 http://www.meta4creations.com/smallbiz/2website-types.htm geraadpleegd op 18-07-2005


4 http://www.usability.gov/guidelines/ geraadpleegd op 18-07-2005

http://www.dwoz.com geraadpleegd op 18-07-2005

http://www.the-eggman.com/writings/webtips.html geraadpleegd op 19-07-2005

http://www.webstyleguide.com/index.html?/sites/site_structure.html geraadpleegd op 18-07-2005

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572 geraadpleegd op 18-07-2005

http://www.web-source.net/web_site_design1.htm geraadpleegd op 19-07-2005




5 Geen eenduidige bron van gevonden. Verschillende websites geven een tijd van 10 tot 15 seconden aan.

http://www.1-hit.com/all-in-one/tool.loading-time-checker.htm geraadpleegd op 18-04-2005



http://www.tamingthebeast.net/articles5/page-load-times.htm geraadpleegd op 18-04-2005

6 http://www.googleguide.com/website_development.html geraadpleegd op 27-07-2005


7 Muller, W. (1997) Vormgeven, ordening en betekenisgeving, pag. 201. Utrecht: Lemma

8 Muller, W. (1997) Vormgeven, ordening en betekenisgeving, pag. 255. Utrecht: Lemma


/45



1   2   3   4   5   6


De database wordt beschermd door het auteursrecht ©opleid.info 2017
stuur bericht

    Hoofdpagina