TAAKANALYSE & WEBDESIGN

Transcriptie

1 PETER PEERDEMAN BIANCA VAN DEN BOSCH PPN BBH300 MARTIN BOER SANJA BANKRAS MBR SBS560 TAAKANALYSE & WEBDESIGN EINDDOCUMENT GROEP 6 JANUARI 2006 Cooperation, interaction, creativity and a slight sense of technology

2 TAAKANLYSE & WEBDESIGN EINDDOCUMENT INHOUDSOPGAVE Inhoudsopgave 2 1. Inleiding 5 2. Plan van Aanpak Teambeschrijving Samenwerking Planning 5 3. Vooronderzoek Competitor Analysis Persona s en scenario s Interview 8 Voorbereiding 8 Interview 9 Rationale 9 4. Concept ontwerp Informatie architectuur Wireframes Flowdiagram 13 Senariobeschrijving Grafisch ontwerp Moodboards Grafische vormgeving Bijgestelde wireframes Prototype en testen Prototype Evaluatieplan Conclusie Bronvermelding 17 Persona s 17 Moodboards 17 Grafisch ontwerp / prototype 17 Appendix A Site evaluaties 18 A.1 Faculty of Fine Arts door Peter Peerdeman 18 Content 18 2

3 Doelstellingen 18 Functionaliteiten 18 Doelgroepen 18 Structuur & navigatie 18 Vormgeving 18 Inhoud 19 Taalgebruik & schrijfstijl 19 A.2 Art To Wear door Sanja Bankras 19 Content 19 Doelstellingen 19 Functionaliteiten 19 Doelgroepen 19 Structuur & navigatie 19 Vormgeving 20 Inhoud 20 Taalgebruik & schrijfstijl 20 A.3 Damiano Craft door Martin Boer 20 Content 21 Doelstellingen 21 Functionaliteiten 21 Doelgroepen 21 Structuur & navigatie 21 Vormgeving 21 Inhoud 21 Taalgebruik & schrijfstijl 21 A.4 Silk Painting Gallery door Bianca van den Bosch 22 Content 22 Doelstellingen 22 Functionaliteiten 22 Doelgroepen 22 Structuur & navigatie 22 Vormgeving 22 Inhoud 22 Taalgebruik & schrijfstijl 23 Appendix B Persona s & Scenario s 24 Appendix C Interview 29 Appendix D Wireframes 31 Appendix E Wireframes iteratie 34 Appendix F Moodboards 36 Appendix G Evaluatiegesprek opdrachtgeefster 38 Appendix H Grafisch ontwerp 41 Appendix I Bijgestelde wireframes 42 Appendix J Prototype 44 Appendix K Evaluatieplan 47 Doelstelling 47 Uitvoering 47 Vragen voor de expert 47 Vragen voor de gewone bezoeker 47 Interview met een expert 48 3

4 Interview met een gebruiker 48 Conclusie 49 Appendix L Logboek 50 4

5 1. INLEIDING De slogan was snel verzonnen. Dit project moest er een worden waarin we niet alleen onze IT kennis moesten bundelen in een groepje om een product te produceren, maar ook een project waarin we aan onze sociale vaardigheden moesten werken. In dit project is het de bedoeling om contact op te nemen met een opdrachtgeefster die voor haar bedrijf een website wil hebben. Door de gebundelde krachten van het team optimaal te benutten gaan we binnen 4 weken een ontwerp maken voor een site, die niet alleen door ons is goedgekeurd, maar nog belangrijker, ook is goedgekeurd door de opdrachtgeefster en misschien zelfs wel door haar doelgroep. Dit vereist nauwe samenwerking binnen én buiten het team en dus veel evaluatie. Dit houd in dat we niet alleen beide partijen op de hoogte houden van onze progressie, maar ook de verkregen feedback gebruiken om een zo geünificeerd mogelijk resultaat te behalen. Door zo vroeg mogelijk in het project fouten te verbeteren zorgen we ervoor dat het resultaat op het eind zo eensgezind mogelijk is. 2. PLAN VAN AANPAK 2.1 TEAMBESCHRIJVING Sanja Bankras Project Manager, Public Relations Expert, Coördinator, Graphical Designer Martin Boer HTML Engineer, Technical Designer, Programmer Bianca van den Bosch Programmer, Quality Control Manager, Graphical Designer Peter Peerdeman Editor, Designer, Administrator, Internal Communications Specialist 2.2 SAMENWERKING Samenwerking is een belangrijk onderdeel binnen het project. Door de taken goed te verdelen, duidelijke afspraken te maken en elkaar vooral veel op de hoogte te houden is het mogelijk een project gezamenlijk succesvol af te ronden. Dit is makkelijker gezegd dan gedaan. Bij het samenstellen van het team is er al gelet op de diversiteit, aangezien er uit twee disciplines mensen zijn gekozen. Zowel de informatici als informatiekundigen zijn vertegenwoordigd, wat zorgt voor een gezonde balans in kennis. Bij de start van het project is er direct duidelijk overleg geweest, wie welke functie zou gaan vervullen en wie eventueel een andere functie zou aanvullen. Omdat we interne communicatie erg belangrijk vinden hebben we ervoor gezorgd dat we op gezette tijden afspraken konden maken om online te kunnen vergaderen. Naast de online bijeenkomsten hebben we ook gezorgd voor persoonlijke afspraken, om bepaalde dingen nog eens rustig na te kunnen spreken, en samen naar bepaalde dingen kunnen kijken voor feedback. Vooral dit laatste heeft erg goed gewerkt. We hebben vaak gesteld dat iedereen een eigen ontwerp maakte, waarna we met het gehele team alle ontwerpen hebben bekeken en vervolgens gezamenlijk overal de goede en de slechte punten uithaalden. Jammer genoeg treden conflicten door miscommunicatie vaak op, zo ook in ons project. Gelukkig hebben we uiteindelijk alles weer op een rij kunnen zetten om toch gezamenlijk tot een eindresultaat te kunnen komen. 2.3 PLANNING Al heel vroeg in het project wisten we dat de planning van de progressie een belangrijk deel uit zou maken van onze bezigheden, omdat we graag wilden weten waar we aan toe waren, waar 5

6 de deadlines lagen, zodat we onze tijd duidelijk en efficiënt in konden delen. Onze studentassistent heeft ons hierbij in het begin op pad geholpen, door voor bepaalde delen van het verslag al een deadline op te geven. Dit geeft een prettige werkdruk waardoor het onmogelijk wordt te veel werk op te stapelen voor het einde van het project, en dat er dus geen zondagnachten hoeven worden doorgewerkt. Voor ons bestaat de planning dus ook vooral uit een globaal schema van het te maken werk, in welke week dit gebeurt en welke deadline daarvoor geld. Wat er daadwerkelijk in de loop van het project gebeurd is en door wie kan terug worden gevonden in het logboek 1 WEEK 1 Opstart van het project, en daarmee het einddocument. Deadline: Competitor Analysis, + conclusie. Deadline: :00 Persona s, Scenario s en Plan van Aanpak. Deadline: :00 Afspraak maken met opdrachtgeefster. Deadline: zo spoedig mogelijk WEEK 2 Interview voorbereiden. Deadline: s avonds Interview afnemen. Afspraak: :00 Interview verwerken tot bruikbaar verslag. Deadline: zo spoedig mogelijk Informatie Architectuur. Deadline: Wireframes. Deadline: :00 Flowdiagram. Deadline: WEEK 3 Grafisch Design. Deadline: :30 Moodboards. Deadline: :00 Tweede ontmoeting opdrachtgeefster. Afspraak: :00 WEEK 4 Einddocument inleveren. Deadline: Aanpassen ontwerp. Deadline: Bouwen van een werkend prototype. Deadline: Presentatie voorbereiden. Deadline: Evaluatieplan. Deadline: Zie Appendix L voor het logboek 6

7 3. VOORONDERZOEK 3.1 COMPETITOR ANALYSIS We kunnen concluderen dat alle geanalyseerde sites 2, die zijn uitgezocht op relevantie met het bedrijf van de opdrachtgeefster, sterk gefocussed zijn op de verkoop van hun producten en aanprijzing van hun diensten / exposities. Toegevoegde waarde van SilkPaintingGallery.com was de mogelijkheid om eigen kunstvoorwerpen in te zenden, een mogelijkheid om een site te laten hosten met relevante informatie en mogelijkheid voor een online cursus. De gebruikte content die in alle onderzochte sites aanwezig is, is een goede basis voor inspiratie van de content van onze eigen website. De speciale eigenschappen die uit bepaalde sites springen zijn een goede bron voor inspiratie van ons eigen ontwerp. Bij sommige sites viel het op dat er dode links, dode plaatjes en onduidelijke links voorkwamen. Op de site van de Fine Arts wordt er in het navigatie menu gebruik gemaakt van externe links, wat heel slordig en vervelend overkomt voor de gebruiker. Op deze site was het wel mogelijk om de site in een andere taal weer te geven, een functie die bij ons team positief ontvangen werd. Over het algemeen komen sites qua uiterlijk acceptabel over. Met uitzondering van SilkPaintingGallery.com, die overkwam alsof het gemaakt was door iemand die geen verstand van zaken had. Een site zoals DemianoCraft.com heeft duidelijk lang nagedacht over een passend kleurschema, wat de site duidelijk ten goede komt. Bij het zien van minder goed gekozen kleurschema s wordt het ons duidelijk dat dit een belangrijk punt in het ontwerp is, en waar we goed rekening mee moeten houden als we een bepaalde sfeer willen creëren. De navigatie met de Mouse-over plaatjes, de veranderende knoppen bij het aanwijzen, staat het design heel goed en is zeer bruikbaar voor ons eigen ontwerp. Kortom, om een concurrentiewaardige website op te zetten zullen we minstens moeten voldoen aan de eigenschappen van de concurrerende sites. Om boven de rest uit te steken zullen we het beste van de andere sites moeten combineren en de gevonden fouten proberen te vermijden. 3.2 PERSONA S EN SCENARIO S Margarita Meija Jaramillo heeft met haar website vier doelgroepen op het oog: Designers Mensen voor haar workshops Bedrijven voor haar workshops als team building Theater bedrijven voor haar kostuums. We hebben voor iedere doelgroep een persona en een scenario 3 ontworpen die representatief zijn voor hun doelgroep, zodat we met elk van deze doelgroepen rekening houden in ons ontwerp. 2 Zie Appendix A voor de individuele site evaluaties 3 Zie Appendix B voor de persona s en scenario s 7

8 Mensen moeten meteen kunnen overzien wat er op de site te bezichtigen valt. Een overzichtelijke website met een simpele structuur werkt prettig en zorgt dat mensen precies te zien krijgen wat te zoeken. Er moeten niet teveel langdradige verhalen op de website komen te staan, desnoods wordt een tekst in kopjes verdeeld. De website moet niet teveel drukte uitstralen. Een rustig kleurpalet is belangrijker dan fel en opvallend. Belangrijke punten die snel te vinden moeten zijn: Contactinformatie Informatie over de workshops Producten galerij voor kleding en apart voor stoffen Persoonlijk informatie over Margarita Meija Jaramillo en haar werk Voor mensen die alleen op zoek zijn naar afbeeldingen moet het niet nodig zijn om eerst lappen tekst door te nemen. In de galerijen die een overzicht van de producten moeten gaan weergeven, moeten duidelijk thumbnails komen met een korte beschrijving, zodat snel een algemene indruk gemaakt kan worden. Via de foto s wordt doorgelinkt naar pagina s met achtergrondinformatie. Er moet voldoende beeldmateriaal beschikbaar zijn, zodat inzicht kan worden verkregen in het werk van Margarita Meija Jaramillo. Van de workshops moet voldoende praktische informatie beschikbaar zijn, anders haken mensen af. Er moet speciale aandacht worden besteed aan team building als mogelijkheid. Het zou mooi zijn als persoonlijke reacties van klanten te lezen zijn over de workshops. Een introfilmpje wekt de interesse van mensen, maar moet niet teveel van de aandacht en tijd opeisen. Een skip intro -button zal voor veel mensen hier prettig zijn. De intro moet de sfeer van je website kunnen aangeven en meteen duidelijk maken op welke site de bezoeker beland is. De website moet snel laadbaar zijn en rekening houden met wisselende formaten van het beeldscherm. Veel mensen maken gebruik van grote zoekmachines zoals Google.com, daarom moet onze website goed functioneren met zoekmachines. Mensen zoeken ook wel via zogenaamde startpagina s, als de site ooit gebruikt zal worden, is het praktisch om de website aan te melden bij enkele van deze pagina s. Over Margarita Meija Jaramillo en haar werk moet wat algemene informatie op de website komen te staan. Het maakt de website persoonlijker wanneer een foto van haar op de eerste pagina staat. De contactinformatie is buitengewoon belangrijk, moet snel te vinden zijn en voldoende opties bieden aan de bezoekers. Adresgegevens en openingstijden zijn handig voor mensen die graag persoonlijk willen afspreken. Telefoonnummer is belangrijk voor mensen die dat prefereren. Invulformulieren kunnen mensen afschrikken. Daarom is het niet praktisch om alleen een online bestelmethode aan te bieden. Sommige mensen willen alleen een adres weten. VOORBEREIDING 3.3 INTERVIEW In een teamoverleg hebben we geprobeerd zo duidelijk mogelijk te formuleren wat we eigenlijk te weten wilde komen in het eerste gesprek. Wij vinden het vooral een belangrijk punt 8

9 dat we een zo veel mogelijk professionele houding aannemen, en toch een goede relatie met de opdrachtgeefster op te bouwen. Met dit in ons achterhoofd hebben we er voor gekozen om met twee personen te gaan interviewen, een iemand die het interview afneemt en een iemand die aantekeningen / opnames maakt. We hadden ook met vier personen heen kunnen gaan, maar wij hadden het gevoel dat we dan te overweldigend overkwamen. Ook hebben we geen idee waar we terecht komen en op deze manier houden we er rekening mee dat er niet zo heel veel ruimte zou kunnen zijn. Om het interview te ondersteunen nemen we verschillende apparatuur mee, we zijn van plan het interview met een videocamera op te nemen zodat we het later nog eens op ons gemak kunnen terug kijken, en de verkregen informatie ook aan de rest van de groep te kunnen laten zien. Tevens zijn we van plan een fotocamera mee te nemen zodat we, op locatie, alvast wat foto s kunnen maken van de omgeving, misschien zelfs van wat materialen. Op deze manier kunnen we alvast wat inspiratie voor het ontwerp, maar ook inspiratie voor de moodboards opdoen. De vragenlijst die we hebben opgesteld is een semi-open interview structuur, omdat er een aantal open vragen en een aantal meer gesloten vragen in zitten. Met de open vragen willen we vooral proberen de opdrachtgeefster iets beter te leren kennen, alsmede de sfeer die de opdrachtgeefster wil verwerken in het ontwerp. INTERVIEW Ons gesprek met Margarita verliep heel soepel. Ondanks het onbekende adres was het voor ons geen probleem om er te komen. De uitstraling van Margarita en haar gezin was erg vriendelijk en we voelden ons redelijk op ons gemak bij haar. Ze heeft ons een uitgebreide collectie aan materiaal laten zien, zoals foto s van de workshops, een interview in een tijdschrift, haar CV en ze heeft muziek laten horen voor de website. Haar doel met de website is om naambekendheid in Nederland te krijgen, daarom moet de website een goede algemene indruk van haar collectie kunnen geven, bovendien wil ze haar workshops aanbieden, met foto s, en zorgen dat mensen via of andere middelen vervolgens contact met haar kunnen opnemen. Ze wil dat haar silk painting genoemd wordt en haar lijn van accessoires. Door middel van wat informatie over haar werk in Colombia wil ze mensen een idee geven van haar kwaliteiten. Ze heeft een duidelijk beeld van een heel rustige website waar niet teveel afleidende elementen bij zitten. Ze heeft voor zichzelf het beeld van een website die mensen de zijde haast kunnen laten voelen. Om dit te bereiken wil ze inspelen op zoveel mogelijk zintuigen met behulp van geluid, beeld en uitleggende tekst over de verschillende werken. Ook wil ze het verband tussen kunst en natuur laten zien, wat bij haar werken sterk aanwezig is. Ze heeft een positieve houding tegenover studenten en staat open voor onze suggesties. Naar aanleiding van dit interview verwachten wij een optimale samenwerking en verwachten we geen wrijving tussen werkgever en werknemers. RATIONALE We hebben het interview 4 verwerkt tot een heel basic verslag, omdat het vooral voor onszelf bedoeld is. Omdat we het interview ook opgenomen op video hebben was het voor het team 4 Zie Appendix C voor het verslag van het interview 9

10 makkelijk om nog eens rustig terug te kijken naar de gegeven informatie. De informatie uit dit interview heeft ons duidelijke richtlijnen gegeven voor de progressie in ons project. Het eerste interview was vooral bedoeld als inspiratie voor het project. De volgende afspraken die wij maken met de opdrachtgeefster zullen meer over de praktische aspecten van het project gaan, zoals het voorleggen van wireframes, ideeën, moodboards en andere concepten. 4. CONCEPT ONTWERP 4.1 INFORMATIE ARCHITECTUUR De informatie architectuur is een belangrijk onderdeel in het ontwerp van de website. Na het interview hebben we geprobeerd de verkregen informatie te verwerken tot een structuur die voor een bezoeker duidelijk en toegankelijk is. Na evaluatie zijn we tot de conclusie gekomen dat de website zal bestaan uit de volgende punten: Home: dit is de eerste pagina die de bezoeker ziet. Het is dus belangrijk direct op deze pagina de introductie informatie wordt weergegeven. Workshops: Op deze pagina wordt een van de grootste onderdelen van de site weergegeven, namelijk de verschillende workshops die onze opdrachtgeefster te bieden heeft. Artwork: Naast de workshops is ook de artwork van de opdrachtgeefster belangrijk, vooral voor het grote publiek. Op deze pagina zijn dan ook uit verschillende categorieën werken te zien van de opdrachtgeefster Accessories: Op de accessoires pagina komt een aanbod van de producten die de opdrachtgeefster aanprijst voor de verkoop. Contact: De standaard contact informatie zal op deze pagina worden weergegeven. Dit speelt een belangrijke rol in de werking van de website, want het uiteindelijke doel is om bezoekers in contact te laten komen met de opdrachtgeefster. Door de basisstructuur met een thuispagina en vier onderliggende is de informatie architectuur niet heel erg complex. Dit is ook bewust gedaan om een duidelijk overzicht te houden. We hebben ook nagedacht over eventuele links tussen verschillende diepere niveaus, en kwamen tot de conclusie dat vooral de link naar de contact pagina erg belangrijk is. Om dit te accentueren zullen we verspreid door de belangrijke pagina s nog extra links in de tekst vermelden naar de contact pagina. Hoofdkop Subkop Toelichting Home Workshops Korte inleidende tekst over opdrachtgeefster en site, plaatje van opdrachtgeefster Algemene inleidende info over workshops Silkpainting Non-traditional Materials Korte info over de workshop, plaatje van workshop Korte info over de workshop, plaatje van workshop 10

11 Papier-maché Korte info over de workshop, plaatje van workshop Artwork Gallery met verschillende artworks Artwork 1 Artwork 2 Artwork 3 Korte info over artwork, plaatje, geluidseffect Korte info over artwork, plaatje, geluidseffect Korte info over artwork, plaatje, geluidseffect Accessories Gallery met verschillende accessoires Accessoire 1 Accessoire 2 Accessoire 3 Korte info over Accessoire, plaatje Korte info over Accessoire, plaatje Korte info over Accessoire, plaatje Contact Adres Atelier Locatiegegevens van het atelier van de opdrachtgeefster gegevens 4.2 WIREFRAMES Wireframes zijn in het kort dé manier om in een zo vroeg mogelijk stadium het concept te ontwerpen. Doordat de opzet van een wireframe zo basic is, is het makkelijk om veel alternatieven te maken, en daarmee veel opties open laat voor verbetering. Deze concepten bevatten noch kleuren noch content, zodat de basis van de website zichtbaar is. Op deze manier kan in een heel vroeg stadium al radicaal gewisseld worden van ontwerp, zonder dat dan de complete html-code hoeft worden herschreven, omdat deze nog niet gemaakt is. Elk lid van het team heeft een initiële wireframe 5 gemaakt, helemaal naar eigen smaak, zo zijn er vier heel verschillende concepten uitgekomen. Deze vier wireframes leggen we naast elkaar, om gezamenlijk te discussiëren over de plus- en minpunten van de ontwerpen. Als al deze punten bekend zijn, noteren we deze en sturen we ze, samen met de ontwerpen op naar de opdrachtgeefster. Uit de feedback die we daaruit ontvangen bekijken we waar we gelijk hadden en waar niet. Op dat punt van het stadium is het interessant om iedereen nog een wireframe te laten maken, nu de meer specifieke features bekend zijn. Zo krijg je vier verschillende wireframes, die allen voldoen aan bepaalde eisen waar over gediscussieerd is. Tijdens een stevig teamoverleg hebben we alle gemaakte wireframes naast elkaar gelegd, en eens kritisch naar alle ontwerpen gekeken. Op deze manier hebben we van elke aparte wireframe de negatieve punten eruit gefilterd, en juist de positieve punten benadrukt. Om deze discussie samen te vatten hebben we een lijstje met punten opgesteld. Deze punten zijn door elk van de teamgenoten als belangrijk ervaren. Met de wireframe iteratie zullen we dan ook de punten van dit lijstje in acht nemen. 5 Zie Appendix D voor de gemaakte wireframes 11

12 Een tabel met logo en navigatie voor duidelijk overzicht Geen standaard dertien in een dozijn website Buttons niet op een lijn, maar meer een artistieke / speelse look Banner met plaatjes die in elkaar overlopen op de home pagina (soort uitgerekt moodboard om direct sfeer te creëren) Een vast middentabel met variabele tabellen aan de zijkant voor gelijke weergave in alle resoluties Informatie over Margarita op homepage met een foto voor een persoonlijk tintje. Doorzichtige achtergrond mits niet onoverzichtelijk Alle informatie in een 800x600 kader zonder scroll balk Geen 2 e site navigatiebalk Door klikbare foto s in workshop, accessoires en art Na deze discussie hebben we allen een nieuwe wireframe iteratie 6 gemaakt. Deze lijken al een stuk meer op elkaar, en geven ons een goede houvast voor een komend ontwerp. Alle wireframes zullen worden voorgelegd aan de opdrachtgeefster zodat we via de feedback zullen we ons kunnen richten op het uiteindelijke ontwerp. 6 Zie Appendix E voor de wireframe iteratie 12

13 4.3 FLOWDIAGRAM Figuur Flowdiagram van de website In het project is het flowdiagram in een later stadium de leidraad van ons ontwerp geworden. In een oogopslag geeft de diagram aan hoe de website in elkaar steekt, zonder verder te kijken naar een design of specifieke content. Dit geeft een hele heldere weergave waar het gehele team zich duidelijk op kan focussen. In de diagram hebben we ervoor gekozen om elk van de distinctief aparte onderdelen een andere kleur te geven. De onderliggende pagina s geven we dezelfde kleur, zei het een iets meer doorzichtige kleur om duidelijk aan te geven wat bij elkaar hoort. Van de home pagina af vonden we het belangrijk om naast directe links naar de verschillende afdelingen ook een link te maken naar een soort onderliggende pagina van de hoofdpagina, waar een kort verhaaltje staat over de opdrachtgeefster zelf. Dit verhaal moest volgens ons niet op de contact informatie staan, omdat het verhaal duidelijk gescheiden moest worden van de contact informatie. Dit omdat de contact pagina vanaf alle pagina s te bereiken is, en heel duidelijk to the point moet wezen, zonder een te lang verhaal. Dit verhaal moet alleen toegankelijk wezen voor de mensen die er ook in geïnteresseerd zijn, en bereid zijn op de link voor meer informatie te klikken op de home pagina. Omdat de site navigatie blijft staan in elk dieper liggend niveau spreekt het voor zich dat van een dieper niveau direct kan worden doorgelinkt naar een ander gedeelte. De gebruiker kan bijvoorbeeld van de informatiepagina van het 2 e accessoire direct doorlinken naar de workshops pagina, omdat deze link in het navigatiemenu staat dat zich door de gehele site bevind. 13

14 SENARIOBESCHRIJVING Ten eerste Mark Nash. Mark zou met zijn laptop in de McDonalds hebben ingelogd op het draadloos netwerk, en even snel op Google gezocht hebben naar een zojuist ontdekte interessante techniek Silk Painting. Mark komt terecht op de homepage van Margarita en klikt vervolgens op artwork om te kijken of ze nog wat leuke dessins voor hem in de aanbieding heeft. Eenmaal op de pagina ziet hij een gallery met werken waar hij eens rustig doorheen bladert. De informatie die onder de contactbutton schuilt heeft Mark al opgeslagen op zijn harde schijf. Ten tweede Maria Witteman. Maria is al een tijdje op zoek naar workshops om te volgen. Ze heeft al een paar schilderworkshops gevolgd en is nu helemaal op dreef. Op Google zoekt ze naar schilder workshops en komt terecht op de website van Margarita. Ze klikt op de workshops button en ziet direct een paar leuke workshops staan. Maria slaat de website op in haar favorieten, om later nog eens terug te kijken. Ten derde Barbara Solis. Barbara is opzoek naar teambuilding activiteiten en laat haar oog vallen op de website van Margarita. Ze klikt op workshops en leest dat de workshops ook uitstekend kunnen uitpakken als teambuilding activiteiten. Barbara neemt vervolgens via de contactpagina contact op met Margarita Ten slotte Rita van der Kooij. Rita is op zoek naar inspiratie voor haar hobby. Ze maakt graag allerlei soorten artistieke accessoires en vind het leuk af en toe ook eens iets te zien wat anderen maken. Rita komt terecht op de site van Margarita en klikt enthousiast op de accessoires button. Ze komt nu terecht op een gallery, met allerlei interessante accessoires. Ze klikt de site weer weg en gaat met nieuwe inspiratie aan de slag. 5. GRAFISCH ONTWERP 5.1 MOODBOARDS Moodboards zijn een hele goede methode om in een oogopslag een indruk te geven van de sfeer die uitgebeeld moet worden. Door een soort collage van plaatjes krijg je een indruk van het kleurschema, sfeer en design van de website. Door in de plaatjes steeds een bepaald thema naar voren te laten komen krijg je een voelbaar samenhangend geheel, wat gebruikt kan worden om een bepaalde emotie / sfeer naar boven te brengen. Het team heeft er voor gekozen om twee leden ieder een moodboard 7 te laten maken, met van te voren afgesproken thema s zodat deze niet op elkaar zullen lijken. Sterker nog, nadat het eerste moodboard gemaakt was is de tweede pas gemaakt, om er zeker van te zijn dat het twee geheel andere sferen worden. Uit het interview hebben we vernomen dat de opdrachtgeefster een website wil die sterk in verband staat met de natuur. Om deze reden hebben we gekozen voor de verdeling in thema s die beide ondergeschikten zijn van het natuurthema. Het eerste moodboard beeld het thema flora en fauna uit. De ontwerpster heeft gekozen voor een zeer gestileerde benadering, met een duidelijk en helder 7 Zie Appendix F voor de moodboards 14

15 klein kleurenpalet. De kleuren groen en paars zijn de twee uitersten, met daartussen in een blauwige kleurovergang. De felle groentinten geven een frisse en natuurlijke uitstraling. Het tweede moodboard heeft duidelijk een andere insteek. Deze is iets drukker, met veel meer licht/donker blauw en oranje tinten. De gebruikte kleuren komen steeds in paren terug, verspreid over de pagina. Dit geeft een herkenbare uitstraling. In het webdesign zal dit design meer terugkomen als een hele neutrale site met zachte blauwtinten en oranje accenten. De zonsondergangen zullen zorgen voor een rustgevende site, terwijl de actieve kant toch vertegenwoordigd blijft. 5.2 GRAFISCHE VORMGEVING Bij dit grafische ontwerp 8 hebben we ons sterk laten leiden door de ideeën van de opdrachtgeefster. In een tweede evaluatiegesprek 9 zijn de we tot duidelijke conclusies gekomen. Het resultaat is een rustige witte achtergrond waar tekst komt te staan, zodat dit duidelijk leesbaar is en een vredig achtergrondplaatje wat sfeer geeft aan de website. Onderin beeld zijn kleine plaatjes te zien die als links dienen naar het werk van de opdrachtgeefster. Hiervoor zijn verschillende kunstwerken van haar gebruikt. Bovenin beeld is tenslotte haar handtekening te vinden. In dit ontwerp is deze wat donker, maar dit zal verbeterd worden in het eindresultaat. De opdrachtgeefster wil deze handtekening ook graag geanimeerd hebben. Deze functie is mogelijk, maar we hebben besloten om ons meer op de rest van de site te focussen. Bij verdere uitwerking van de site kunnen we deze functie nog implementeren. Het menu is verder simpel en klein gehouden, dit is eveneens op de wensen van de opdrachtgeefster gebaseerd. 5.3 BIJGESTELDE WIREFRAMES Nadat we voor een tweede evaluatiegesprek bij onze opdrachtgeefsters zijn geweest en we feedback hebben gehad op de door ons verbeterde wireframes, zijn de ideeën weer bijgesteld en is het uiteindelijke wireframe tot stand gekomen. De wireframe opzet uit figuur E.2 werd door de opdrachtgeefster sterk gewaardeerd. Dat kwam vooral door de eenvoud van de opzet. Onze opdrachtgeefster wilde slechts een onderdeel per keer op een pagina zetten en het liefst geen lange stukken tekst. Haar doel was om een sfeervolle site te creëren die rustig moet overkomen. Om deze reden wil ze het liefst één plaatje tegelijk laten zien met kleine plaatjes onderin die vervolgens doorlinken naar een pagina met een gallery binnen het thema van de button. We hebben op locatie samen met de opdrachtgeefster een design opzet in een tekenprogramma gemaakt en deze opzet vervolgens verwerkt tot het uiteindelijke wireframe. Hierbij is gelet op de plaatsing in een grid, zodat het geheel er netjes uitziet, prettig leest en alles duidelijk uitgelijnd is. Het is dus heel simpel en rustig gehouden, maar dat is precies wat zij wil. 6. PROTOTYPE EN TESTEN 6.1 PROTOTYPE Op basis van het uiteindelijke wireframe hebben we twee verschillende prototypes gemaakt. Deze leken erg op elkaar, maar verschilden alleen qua navigatiemanier. Uiteindelijk hebben we het eerste prototype 10 verder uitgewerkt tot het eindresultaat. Hierin hebben we de plaatjes verwerkt 8 Zie Appendix H voor het grafisch ontwerp 9 Zie Appendix G voor het evaluatiegesprek met de opdrachtgeefster 10 Zie Appendix J voor het prototype 15

16 die we van de opdrachtgeefster hebben gekregen, maar deze zullen later vervangen moeten worden door plaatjes met een hogere resolutie (vooral de achtergronden) Ook de handtekening is nu nog statisch en zal later dynamisch worden. De pagina is opgebouwd uit tabellen en we hebben deze doorzichtig gemaakt zodat de achtergrond nog vaag doorloopt in het wit. Ook hebben we de hoeken van de vlakken afgerond en een kort geluidje ingebouwd als de home pagina wordt geladen. Dit is alleen om te laten zien dat geluid mogelijk is en kan later op elke gewenste plek gebruikt worden. Problemen kunnen ontstaan bij mensen die geen javascript kunnen of willen zien. Die zullen niet de uitgerekte achtergrond zien, maar een herhaalde kleinere achtergrond. Ook hebben we geconstateerd dat de site in andere browsers dan IE zich ietwat anders gedraagt. Hier moet later nog naar gekeken worden en worden verholpen als verdere uitwerking nog benodigd is. 6.2 EVALUATIEPLAN Het voornaamste doel van het evaluatieplan 11 is om te kijken of de website voor iedereen gebruiksvriendelijk is. Ook moet iedereen duidelijk zien wat het doel is van de website. De doelen zijn vooral dat de opdrachtgever naamsbekendheid krijgt, dat de bezoeker wat van haar werk te zien krijgt, wat de opdrachtgever aan workshops te bieden heeft en hoe ze de opdrachtgever kunnen bereiken. Ook moet er wat persoonlijke informatie over de opdrachtgever op. Om te kijken hoe gebruikers en experts reageren op deze website hebben we besloten het ontwerp te evalueren door een gebruiker en door een expert, door middel van een interview. Uit het interview met de expert bleek dat er technisch gezien nog het een en ander bijgeschaafd kon worden. Waaronder links die niet werken en een website die niet goed te zien is in andere browsers. Uit het interview met de gebruiker bleek dat het een erg gebruiksvriendelijke website is, maar dat de sfeer toch niet duidelijk overkomt. De gebruiker vond de website koud en kil ogen. Maar wel erg to the point. Wat ook zeker iets was wat de opdrachtgever graag wilde. Uit de interviews blijkt er zowel technisch als grafisch nog het een en ander verbeterd worden. Dit hebben we zo snel mogelijk gedaan. Het uiteindelijke prototype is aangepast met de kritieken uit deze evaluatie. De techniek van het testplan geeft ons niet alleen groot inzicht op de usability van de site, maar ook de mogelijkheid deze te verbeteren. 7. CONCLUSIE Zoals onze slogan ons al deed vermoeden komt er meer kijken bij zo een project dan je denkt. De samenwerking is veel belangrijker dan je je zou kunnen voorstellen. De taken zijn uiteindelijk goed verdeeld en dit heeft geresulteerd in een prima eindresultaat. Contact met de opdrachtgeefster is ook heel goed verlopen, door veel contact te houden heeft de opdrachtgeefster ons gedurende het gehele project kunnen bijsturen, zodat we een eindresultaat hebben bereikt dat door beide partijen goed is gekeurd. Het sociale deel van dit project is een hele waardevolle toevoeging aan onze vaardigheden. Er is niets handiger dan een vriendelijke doch professionele band te hebben met een cliënt, of dat nu in dit project is of in een project in de toekomst. De voorgeschreven technieken voor het project zijn zeer waardevolle hulpmiddelen geweest om het maken van de website zo efficiënt mogelijk te laten verlopen. De persona s voor de doelgroepen, de wireframes voor de evaluatiemogelijkheid met de opdrachtgeefster, de informatiestructuur voor een persoonlijk overzicht van de te plaatsen informatie en ga zo maar door. Zelfs het evaluatieplan, dat helemaal aan het eind van het project plaatsvond, heeft nog invloed gehad op het prototype. Dit brengt het grote voordeel dat de site ook is bekeken door een mogelijke doelgroep, die ook iets te zeggen heeft over het design van de site. 11 Zie Appendix K voor het evaluatieplan 16

17 Bij de presentatie zullen we ons vooral richten aan het promoten van ons product, onze website, aan de opdrachtgeefster. We hebben de te vertellen informatie zo ingedeeld dat er niet te veel aandacht wordt besteed aan de productiefase, maar meer aan het definitieve product. Op deze manier zal de opdrachtgeefster zich een beter beeld kunnen vormen van de concurrentie die wij te bieden hebben tegenover onze concurrenten. 8. BRONVERMELDING PERSONA S Plaatjes MOODBOARDS Plaatjes Grasduinen agenda 2005 GRAFISCH ONTWERP / PROTOTYPE Content Cd met foto s van de opdrachtgeefster Teksten uit een van de opdrachtgeefster Geluidsfragmenten 17

18 APPENDIX A SITE EVALUATIES A.1 FACULTY OF FINE ARTS DOOR PETER PEERDEMAN CONTENT De site bestaat uit informatie over de cursussen die gevolgd kunnen worden, de verschillende stijlen die gebruikt worden, activiteiten die worden ondernomen en informatie om contact op te nemen met de organisatie. Tevens zijn er nog een paar links te vinden naar externe websites, waarschijnlijk partners of extra materiaal voor cursisten. Van de verschillende gebruikte technieken / patronen wordt er door middel van een link nog meer specifieke informatie gegeven over het desbetreffende patroon. De activiteiten lijst is een lijst met datums wanneer bepaalde exhibities, seminars, competities en workshops worden gehouden. DOELSTELLINGEN De doelstelling van de website is om de doelgroep een globaal beeld te geven van wat er wordt geleerd met de cursussen, met wat achtergrond informatie. Daarnaast is de site bedoeld om bezoekers te informeren over de contact gegevens van de organisatie. FUNCTIONALITEITEN De site is werkt door zijn simpliciteit verbazingwekkend goed. Er zijn dan ook niet veel speciale dingen in verwerkt. Het design is eenvoudig, een header, een navigatielijst en een vak met de content. Bij het gedeelte met plaatjes werken er twee plaatjes niet evenals de bijbehorende link. Ook zijn er in de content van de site verschillende vreemde icoontjes verspreid, wat waarschijnlijk verkeerde symbolen zijn die niet goed worden geïnterpreteerd door de browser. Verder is er in het navigatiemenu een externe link toegevoegd, een slordigheid die leidt tot verwarring. De onderste button voor taalkeuze is een hele handige functie voor een multiculturele doelgroep. DOELGROEPEN De doelgroep van de site zijn duidelijk mensen die geïnteresseerd in een kunstgerichte cursus. De site dient als medium tussen de zoekende klant en de aanbiedende organisatie. STRUCTUUR & NAVIGATIE De structuur en navigatie zijn zoals al eerder vermeld is heel duidelijk en overzichtelijk. De site bestaat uit een header, een navigatietabel en een content window, en verder is er niet veel aan te merken. Juist door de simpliciteit werkt de site heel goed, er is ook niet heel erg veel informatie te vermelden. Wel mis ik de knoppen bij de info achter de plaatjes, die weer terugverwijzen naar de bovenliggende site, waardoor het opnieuw klikken in het navigatiemenu benodigd is. VORMGEVING De vormgeving wordt vooral bepaald door het gekozen kleurschema, omdat de site verder geen ingewikkelde opsmuk bevat. De twee blauwtinten liggen prettig in het oog, en de gekozen foto s in de header zijn een soort moodboard op zich, om de bezoeker direct een bepaalde sfeer te laten proeven, die verband houd met de cursus. De gebruikte foto s zijn iets aan de kleine kant, maar wel duidelijk genoeg. 18

19 INHOUD De inhoud is heel erg to the point geschreven. In korte alinea s wordt duidelijk gemaakt wat de doelstelling is, en dus wordt de bezoeker niet afgeschrikt door grote lappen tekst. De verduidelijking van de foto s is interessant om te lezen omdat er met het laten zien van de designs direct een soort nieuwsgierigheid wordt gewekt. TAALGEBRUIK & SCHRIJFSTIJL De engelse site komt over als een vertaling van de Turkse site, maar is wel op een manier gedaan dat het evengoed nog te begrijpen is. De schrijfstijl is kort en bondig, om te zorgen dat de bezoeker geboeid blijft, en niet direct de site weer weg klikt. Doordat de teksten kort zijn is de bezoeker sneller geneigd de gehele site te bekijken, wat duidelijk de bedoeling is van de gebruikte schrijfstijl. CONTENT A.2 ART TO WEAR DOOR SANJA BANKRAS De pagina s zijn soms wat onoverzichtelijk opgezet. Grote plaatjes en teksten in groter lettertype leiden de aandacht af, terwijl in de teksten de meeste links verwerkt zijn. De stukken tekst zijn vaak vrij lang en er valt niet snel te zien waar de bruikbare informatie te vinden is. Er zijn geen spelfouten of grammaticale fouten op de pagina s aanwezig. Informatie die ontbreekt zijn buitenlandse geldeenheden: zelfs op de linkpagina is er niet gedacht aan de mensen buiten de USA. Ook de contactinformatie is erg eenzijdig: meer dan het adres van de webmaster wordt niet gegeven. Wel het adres van de genoemde haarsalon, maar dat staat vrij los van de organisatie waarvan deze website is. DOELSTELLINGEN De doelstelling van deze website is het verkopen van een product en tevens wordt er reclame gemaakt voor een kapsalon. FUNCTIONALITEITEN De enige interactie die plaatsvind op deze website is het winkelwagensysteem. De verwijzingen naar dit systeem hebben een andere uitstraling dan de rest van de pagina, waardoor deze extra in het zicht springen. De informatie staat hierbij overzichtelijk en begrijpelijk opgesomd. Er is nergens op de website enige vorm van hulp aangeboden, noch in de vorm van FAQ, noch als foutmeldingen. De riskante handelingen die een bezoeker zou ondernemen, vallen onder het beheer van een andere website, namelijk de site die de bestelling en betaling afhandelt. De website stelt geen hoge eisen aan het systeem waarmee de bezoeker werkt. Er zijn geen foutmeldingen te vinden en alle afbeldingen werken correct. De pagina s omvatten codes die bestemd zijn voor zoekmachines. DOELGROEPEN De doelgroep van de website zijn mensen die flink veel geld overhebben voor exclusieve handgemaakte kleding en sierraden STRUCTUUR & NAVIGATIE De site omvat vooral de diverse producten die gekocht kunnen worden, hiervoor is de navigatie zo opgezet dat een bezoeker vlot bij het soort product kan komen waarnaar hij/zij op 19

20 zoek is. Hiervoor is een navigatiebalk aan de linkerkant van de site waarvan de meeste links naar productcategorieën verwijzen. De pagina s met sieraden zijn vrij overzichtelijk, waardoor hier snel gevonden kan worden wat men zoekt. Echter de pagina s met kleding vertonen enkele onoverzichtelijkheden. De grootste reden hiertoe is het plaatsen van links in de tekst. Hierdoor wordt de bezoeker gedwongen eerst zorgvuldig te lezen, voordat ook maar duidelijk wordt waarnaar een pagina doorverwijst. Dat terwijl de plaatjes van de producten helemaal geen links hebben naar meer informatie. Er is geen zoekmethode op de pagina, noch een site map. Hierdoor krijgen bezoekers niet de mogelijkheid tot meer over- en inzicht in de website. VORMGEVING De pagina is small opgezet, waardoor deze niet gauw buiten de grenzen van het beeldscherm raakt. Wel zijn de pagina s van een dergelijke lengte dat gescrolled moet worden. De lay-out blijft gelijk op alle pagina s, wat een rustig beeld geeft en niet de aandacht afleidt van de nieuwe informatie in beeld. Het grafische ontwerp in niet te overheersend, waardoor de sieraden meer aandacht kunnen krijgen. Sommige pagina s vertonen fouten, zoals verkeert uitgelijnde plaatjes in verhouding tot de tekst. INHOUD De linkpagina heeft bewust een andere lay-out, de tekst is gerangschikt en van een dergelijk lettertype dat het gelijkenis toont met vele grote portal sites uit Amerika. Hierbij is geen rekening gehouden met de verschillende categorieën, waardoor de linkpagina vrijwel nutteloos is geworden. De afbeeldingen, zowel productweergave als decoratie, zijn van voldoende kwaliteit. De afbeeldingen die producten weergeven hebben over het algemeen allemaal alternatieve tekst, een paar slordigheden daargelaten. Maar deze alternatieve tekst is niet beschikbaar voor iedere browser. Slechts IE ondersteund deze HTML-tags, maar hiermee zullen ook de meeste bezoekers werken. Een onbegrijpelijk detail zit hem in de pagina s per product. Hierop staat linksboven een kleine weergave van het product met daaronder de mededeling see full size photo. Dit is echter overbodig door de afbeelding op volledige grootte, die maar iets lager op de pagina te vinden is. De pagina maakt totaal geen gebruik van animaties. Alleen het mouse-over -effect op de navigatiebalk is dynamisch opgezet. Dit werkt niet storend. De complete website is opgezet in eenzelfde, simpele kleurschema, wat voor een rustige stemming zorgt. De speciale tinten roze zijn zo geselecteerd dat ze de indruk opwekken van een smaakvolle en fatsoenlijke website van een degelijk bedrijf. De decoratie bovenaan de website omvat veel kleuren, maar stoort de bezoeker niet te veel. De rest van de website is met hooguit drie roze tinten gekleurd. TAALGEBRUIK & SCHRIJFSTIJL De tekst is een goed leesbaar lettertype en letterformaat geschreven. Misschien zou de lettergrootte iets verhoogt kunnen worden, maar dit zou ook onoverzichtelijker gaan ogen. De meeste tekst is zwart, waardoor het duidelijk leesbaar is op de zachte achtergrond. Sommige zinnen zijn roodgekleurd en hierdoor minder duidelijk te lezen, maar toch een afleiding A.3 DAMIANO CRAFT DOOR MARTIN BOER 20

21 CONTENT De content is sterk gericht op een specifieke doelgroep. Ook is er niet veel extra informatie aanwezig dan wat bedrijfsinformatie en wat over het verkoopproces. DOELSTELLINGEN Deze site doelt erop om mensen die in Fashion & Furnishing en bijv. Silk paintings geïnteresseerd zijn en wil de bezoekers overhalen om van hun diensten gebruik te maken. Het doel is dat mensen de producten bekijken en daarna een bestelformulier invullen. FUNCTIONALITEITEN Ik heb niet iets besteld om te kijken of dat werkte, wel heb ik met het contactformulier een gestuurd en dat lukte allemaal. Ook alle links werkte en alle plaatjes waren te zien. Helaas zaten bij een aantal subbuttons geen mouse-over en het duurt een eeuw voordat er een mouseover verschijnt doordat ze vergeten zijn om de plaatjes te preloaden. DOELGROEPEN Ik denk dat deze site echt gericht is op een specifieke doelgroep, namelijk de wat oudere mens die geïnteresseerd is in het kopen van hun producten. Veel meer is er ook niet op de website te vinden, dus een toevallig passerende bezoeker zal misschien even de plaatjes bekijken en negen van de tien keer gelijk weg zijn. STRUCTUUR & NAVIGATIE Menu en interface is duidelijk, links ook en geen overbodige of onduidelijke links. Alles is via één menu te vinden. Ik moet wel zeggen dat de mouse-over images niet goed zijn toegepast. Bij een aantal subbuttons zit geen mouse-over en het duurt te lang voordat het mouse-over plaatje verschijnt. Ze zijn vergeten om de plaatjes te preloaden en dat komt onprofessioneel over. VORMGEVING Kleur is goed en opgewekt. Ook moet ik zeggen dat de plaatjes goed zijn. Goed gecomprimeerde jpeg plaatjes van ongeveer 10 KB per stuk. Dit resulteert in een goede laadtijd voor een site met plaatjes. Jammer is dat de achtergrond iets te wensen overlaat. Hij is duidelijk gemaakt voor een resolutie van 800x600 pixels en daardoor zie je lelijke lijnen lopen bij een hogere resolutie. INHOUD De inhoud is wat aan de korte kant, er had meer opgezet kunnen worden, maar als het alleen maar om de doelgroep potentiële kopers gaat is het redelijk voldoende. Wat wel heel mooi is, is dat er geen reclame op de site aanwezig is, dus heb je geen afleiding van banners, popups en dergelijken. TAALGEBRUIK & SCHRIJFSTIJL Deze site is best wel formeel, omdat het gemaakt is voor een bedrijf en niet voor een weblog of zoiets dergelijks. Ook is de site in het Engels en kan ik geen spelfouten ontdekken. Een professionele uitstraling dus. Belangrijke punten vind ik de vormgeving, de inhoud, de functionaliteit en of je de doelgroep bereikt. Als een van deze punten niet in orde is, daalt de kwaliteit van je website aanzienlijk. 21

22 Sterke punten van deze site zijn de vormgeving met betrekking tot opbouw en de functionaliteit. De zwakke punten zijn de inhoud en de vormgeving met betrekking tot plaatjes. CONTENT A.4 SILK PAINTING GALLERY DOOR BIANCA VAN DEN BOSCH Het draait vooral om de schilderijen van de maker van de website (Francine). Ook kan deze gekocht worden via internet. Ook andere kunst gemaakt door Francine kan gekocht worden via internet. De bezoekers van de website kunnen zelf ook kunst inzenden of een eigen website over hun kunst maken. Er staan tips op de website om zelf een Silk -schilderij te maken. Verder nog wat informatie over Francine, de mogelijkheid om commentaar te leveren op de website, de mogelijkheid om boeken te kopen en natuurlijk links. DOELSTELLINGEN Het informeren over de kunst gemaakt door Francine. Verder is er een rol weggelegd voor de bezoekers, zij kunnen kunst inzenden of een eigen website maken. Ook krijgen zij tips of kunnen zij zich aanmelden voor een cursus. FUNCTIONALITEITEN Alle links werken, al zijn er niet veel links. De boeken zijn te bestellen via Amazon.com DOELGROEPEN Silk -artiesten en toekomstige artiesten die een cursus willen. STRUCTUUR & NAVIGATIE De structuur is simpel. De links zijn woorden die links op de pagina staan, geen buttons. Ook tussen de informatie staan links, voor meer informatie of om je aan te melden voor een cursus. VORMGEVING De vormgeving is eenvoudig. De titel staat in een schilderij bovenaan de pagina. Verder is de website vooral wit en kaal. Veel verschillende kleurtjes tekst door elkaar. Dat maakte de tekst moeilijk leesbaar. Ook de letters waren te klein, moeilijk te lezen, INHOUD Voor de analyse van de inhoud heb ik het brinck-formulier ingevuld. De punten die ik heb aangekruist(met ja beantwoord) zijn: - Does the structure fit the purpose? (de site begint gelijk met de cursus) - Is the navigation scheme clear? (die is er niet) - Do link names match page names? (erg uitgebreide namen voor links) - Does page size exceed window size? (tekst loopt ver door) - Is layout consistent between pages? - Are there spelling or grammar errors? (er staan spelfouten in) - Are units of measure clear and unambiguous for international use? - Phone numbers? 22

23 - Address and postal codes? - Is it clear where to go next? (je kan voor meer informatie op links klikken) - Is image quality adequate? (foto s van bestaande schilderijen) - Do the images include alternate text? - Do the images use a consistent light source? - Do color choices work in grayscale? (de website is vooral erg wit) - Is the text legible? - Is the text formatted for 10 to 12 words per line? - Is load-time fast enough? Does it load in 3 to 15 seconds? ( er staat weinig op) - Do all the links work? - Are pages written to be found by search engines?( ja, de website werd gevonden door google) - Does the site work with user s browser? - Does the site work with user s hardware platform? - Does the site work on high- and low-resolution monitors? TAALGEBRUIK & SCHRIJFSTIJL Op de startpagina is erg veel tekst gebruikt. Dit zou de bezoeker kunnen afschrikken, of in ieder geval niet interesseren. Aan het eind van de tekst wordt opeens een uitleg gegeven over een bepaalde schildertechniek, dit komt een beetje onsamenhangend over met het doel van de startpagina. 23

24 APPENDIX B PERSONA S & SCENARIO S Mark Nash Beroep: Clothing Designer Leeftijd: 25 Belangrijkste focuspunt: Betaalbare exclusieve materialen Heeft een Clothing and Textiles major afgesloten aan de Antelope Valley College in Lancaster, California waar hij na zijn studie terecht kwam bij een bedrijf waar hij stage had gelopen. Mark had aardig talent en werkte zich al gauw omhoog totdat hij uiteindelijk in een team terecht kwam dat in Europa gestationeerd was. Mark had altijd al grote dromen gehad om te reizen en om ook eens uit een ander werelddeel zijn materiaal voor zijn kleding te halen. In een klein atelier in Duitsland bij het stadje Kleve, in de buurt van Nijmegen, is het team gestationeerd. Hij en nog twee collega s struinen de omgeving af naar interessante materialen om te gebruiken in hun nieuwe ontwerpen. Mark vindt het niet erg om te reizen, in zijn auto racet hij graag over de Duitse snelwegen, maar omdat Amsterdam ook een vruchtbare plek voor nieuwigheden op modegebied is vind hij het niet erg daar ook eens heen te rijden. Internet is hét communicatiemiddel voor Mark, hij heeft een hoop achtergelaten in de U.S. en wil wel graag het contact onderhouden. Mark en zijn laptop zijn onafscheidelijk, en als het even kan surft hij bij elke hotspot wel eventjes het web over, op zoek naar nieuwe patronen, nieuwe materialen en nieuwe vormen van kunst om te dragen. Als het over deze spullen gaat wil Mark het liefst even op de website kijken hoe het eruit ziet, om er vervolgens naar toe te rijden om te kijken of het echt wel goede kwaliteit betreft. Met zijn digitale fotocamera maakt hij foto s van de gevonden materialen, om deze vervolgens te gebruiken in een simpele PowerPoint presentatie die hij over het internet overstuurt naar het kantoor in de U.S. Het liefst combineert hij verschillende materialen van verschillende artiesten zodat hij hele bonte, gevarieerde kleding kan ontwerpen. Eenmaal thuis gekomen houd Mark ervan lekker een gedownload dvd tje op te zetten, om die af te spelen op zijn veel te geavanceerde home cinema systeem. Mark kan zijn relaties niet erg vast houden, voor zijn werk reist hij veel, heel veel, en lijkt zijn werk moeilijk te kunnen combineren met een vaste vriendin. Hij scharrelt daarentegen af en toe wat rond, maar meestal blijft het bij one-night-stands. Aan huisdieren heeft hij geen behoefte Mark Nash zit op een zonnige middag in het voorjaar bij de MacDonalds in Utrecht, en bedenkt zich dat hij voor zijn laatste design nog een paar stoffen nodig heeft. Omdat hij nu toch al in Nederland zit lijkt het hem handig even gebruik te maken van de Draadloze verbinding om even over het web te struinen naar een apart materiaal. Mark volgt zijn standaard informatie-verzamelprotocol, en toetst vastberaden in de adresbalk van de firefox webbrowser. 24