PETER PEERDEMAN P P E E R D E @ F E W. V U. N L 1536494 – PPN200
B I A N C A VA N D E N B O S C H B C V D B O S C @ F E W. V U. N L 1554573 – BBH300
MARTIN BOER M B O E R @ F E W. V U. N L 1552929 – MBR205
SANJA BANKRAS S B A N K R A S @ F E W. V U. N L 1540769 – SBS560
TA A K A NA LY S E & WEBDESIGN EINDDOCUMENT GROEP 6 JANUARI 2006
“Cooperation, interaction, creativity and a slight sense of technology”
TAAKANLYSE & WEBDESIGN EINDDOCUMENT
INHOUDSOPGAVE
Inhoudsopgave _______________________________________________________2 1. Inleiding __________________________________________________________5 2. Plan van Aanpak ___________________________________________________5 2.1 Teambeschrijving _____________________________________________________ 5 2.2 Samenwerking _______________________________________________________ 5 2.3 Planning_____________________________________________________________ 5
3. Vooronderzoek _____________________________________________________7 3.1 Competitor Analysis___________________________________________________ 7 3.2 Persona’s en scenario’s ________________________________________________ 7 3.3 Interview ____________________________________________________________ 8 Voorbereiding_________________________________________________________________8 Interview_____________________________________________________________________9 Rationale_____________________________________________________________________9
4. Concept ontwerp___________________________________________________10 4.1 Informatie architectuur _______________________________________________ 10 4.2 Wireframes _________________________________________________________ 11 4.3 Flowdiagram ________________________________________________________ 13 Senariobeschrijving ___________________________________________________________14
5. Grafisch ontwerp __________________________________________________14 5.1 Moodboards ________________________________________________________ 14 5.2 Grafische vormgeving ________________________________________________ 15 5.3 Bijgestelde wireframes ________________________________________________ 15
6. Prototype en testen _________________________________________________15 6.1 Prototype ___________________________________________________________ 15 6.2 Evaluatieplan _______________________________________________________ 16
7. Conclusie ________________________________________________________16 8. 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
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
Interview met een gebruiker _____________________________________________________48 Conclusie ___________________________________________________________________49
Appendix L – Logboek ________________________________________________50
4
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
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: 02-02-06
Competitor Analysis, + conclusie. Deadline: 10-01-06 22:00
Persona’s, Scenario’s en Plan van Aanpak. Deadline: 13-01-06 22:00
Afspraak maken met opdrachtgeefster. Deadline: zo spoedig mogelijk
WEEK 2
Interview voorbereiden. Deadline: 16-01-06 ’s avonds
Interview afnemen. Afspraak: 17-01-06 17:00
Interview verwerken tot bruikbaar verslag. Deadline: zo spoedig mogelijk
Informatie Architectuur. Deadline: 19-01-06
Wireframes. Deadline: 17-01-06 16:00
Flowdiagram. Deadline: 19-01-06
WEEK 3
Grafisch Design. Deadline: 27-01-06 16:30
Moodboards. Deadline: 26-01-06 22:00
Tweede ontmoeting opdrachtgeefster. Afspraak: 26-01-06 17:00
WEEK 4
1
Einddocument inleveren. Deadline: 02-02-06
Aanpassen ontwerp. Deadline: 02-02-06
Bouwen van een werkend prototype. Deadline: 31-01-06
Presentatie voorbereiden. Deadline: 01-02-06
Evaluatieplan. Deadline: 02-02-06
Zie Appendix L voor het logboek
6
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
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 emailadres weten. 3.3 INTERVIEW VOORBEREIDING
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
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 e-mail 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
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
Korte inleidende tekst over opdrachtgeefster en site, plaatje van opdrachtgeefster
Workshops
Algemene inleidende info over workshops Silkpainting
Korte info over de workshop, plaatje van workshop
Non-traditional Materials
Korte info over de workshop, plaatje van workshop
10
Papier-maché
Korte info over de workshop, plaatje van workshop
Artwork
Gallery met verschillende artworks Artwork 1
Korte info over artwork, plaatje, geluidseffect
Artwork 2
Korte info over artwork, plaatje, geluidseffect
Artwork 3
Korte info over artwork, plaatje, geluidseffect
Accessories
Gallery met verschillende accessoires Accessoire 1
Korte info over Accessoire, plaatje
Accessoire 2
Korte info over Accessoire, plaatje
Accessoire 3
Korte info over Accessoire, plaatje
Adres Atelier
Locatiegegevens van het atelier van de opdrachtgeefster
Email
Emailgegevens
Contact
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
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 2e 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
4.3 FLOWDIAGRAM
Figuur 4.3.1 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 2e accessoire direct doorlinken naar de workshops pagina, omdat deze link in het navigatiemenu staat dat zich door de gehele site bevind.
13
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.
7
Het eerste moodboard beeld het thema “flora en fauna” uit. De ontwerpster heeft gekozen voor een zeer gestileerde benadering, met een duidelijk en helder
Zie Appendix F voor de moodboards
14
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
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
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
http://www.gettyimages.com MOODBOARDS
Plaatjes
http://www.ditto.com http://www.google.com Grasduinen agenda 2005 GRAFISCH ONTWERP / PROTOTYPE
Content
Cd met foto’s van de opdrachtgeefster Teksten uit een email van de opdrachtgeefster
Geluidsfragmenten
http://www.frogsonice.com/froggy/sounds.shtml
17
APPENDIX A – SITE EVALUATIES A.1 “FACULTY OF FINE ARTS” DOOR PETER PEERDEMAN
http://web.deu.edu.tr/etn/htm/eng_01.htm 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
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. A.2 “ART TO WEAR” DOOR SANJA BANKRAS
http://www.markayswearableart.com/arttowear.html CONTENT
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 emailadres 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
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
http://www.damianocraft.com/
20
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 email 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
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.
A.4 “SILK PAINTING GALLERY” DOOR BIANCA VAN DEN BOSCH
http://www.silkpaintinggallery.com CONTENT
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
-
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
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 www.google.com in de adresbalk van de firefox webbrowser.
24
Omdat hij de laatste tijd met verschillende soorten zijde werkt gaat hij op zoek naar een aparte soort zijde, te vinden in Amsterdam en omstreken. De zoekmachine wijst door naar de site van Margarita Mejia Jaramillo. Als Mark aankomt op de site wordt hij welkom geheten met een kleine intro die direct zijn interesse wekt. Natuurlijk is hij op zoek naar informatie, maar de korte intro laat hem direct weten dat dit de sfeer is waar hij naar op zoek is. Nieuwsgierig klikt Mark door en komt hij op de overzichtelijke homepage. De pagina is duidelijk opgebouwd met een simpele structuur. Mark ziet liever geen ingewikkelde “fancy” sites, en wil het liefst duidelijk en “to the point” zijn content hebben. Doelgericht gaat Mark af op de opvallende buttons, en ziet het label “Fabrics” staan. Een muisklik verder komt Mark in een plaatjesgalerij terecht, waar er duidelijke en heldere thumbnails te vinden zijn van de diverse stoffen die de artieste de bezoeker aanbied. Wanneer Mark een interessante foto ziet en erop klikt, ziet hij direct wat achtergrond informatie verschijnen. Mark is toch in de buurt, en besluit bij contact te kijken of het niet mogelijk is om even langs te gaan en wat proefmateriaal te bezichtigen en misschien wel mee te nemen. De knop “contact” is snel gevonden, waar Mark de informatie snel kopieert en in zijn laptop opslaat. Enthousiast gaat Mark op weg.
Maria Witteman Beroep: Artieste Leeftijd: 41 Belangrijkste focuspunt: kunst is haar leven Maria wist van jongs af aan al wat ze wilde. Ze was de hele dag door aan het knutselen en niemand keek raar op toen ze een opleiding beeldende kunst ging volgen. Nadat ze deze afgerond had begon ze een eigen bedrijf. Haar bedrijf geeft nu workshops. Technologie is niks voor haar. Laat haar maar lekker boetseren en creëren. Tijdens haar studie heeft Maria geleerd om te werken met een computer. Deze gebruikt ze nu nog zo min mogelijk. Ze focust zich vooral op haar werk als artiest. Ze heeft daarom ook weinig verstand van computers. Maria loopt sinds kort met het idee rond om zelf een workshop te volgen. Ze heeft een aantal interesses, waaronder schilderen. Met advertenties in de krant komt ze niet ver en daarom heeft ze besloten dit op te gaan zoeken op internet. Maria woont samen met haar man in een klein huisje in Amsterdam. Ze heeft 3 katten die zij beschouwt als haar kinderen. Maria is dol op dieren en daarom al jaren vegetariër. Ook is zij erg milieubewust. Als ze op vakantie is, maakt ze het liefst lange wandelingen door de natuur. Omdat Maria erg milieu bewust is heeft ze geen auto. Ook heeft een auto weinig zin, als je in het centrum van Amsterdam woont. Haar hobby is haar werk. Ze vindt het heerlijk om workshops te geven maar wil nu weer een beetje tijd voor zichzelf. Ze wil zich weer meer op haar eigen kunst gaan richten. Om wat lichaamsbeweging te krijgen loopt ze iedere dag naar haar werk. Maria wil de website van de opdrachtgeefster gebruiken om meer informatie te krijgen over haar
25
workshops. Ze wil ook graag wat weten over de persoon die de workshops geeft, daarom gaat ze kijken of er op de website wat informatie over die persoon staat. Natuurlijk is informatie over de workshops ook belangrijk. Omdat Maria zelf ook workshops geeft, heeft ze verstand van zaken en ze weet ook precies waar ze op moet letten. Als er onvoldoende informatie over de workshops staat, haakt ze al snel af. Maria wil zodra ze de website ziet een goed gevoel krijgen. Voor haar rustige kleuren, het hoeft allemaal niet te opvallend. Zij wil een workshop volgen waarbij zij zich goed voelt en de website speelt daarbij zeker een rol.
Barbara Solis Beroep: Team building manager Leeftijd: 24 Belangrijkste focuspunt: Goede sfeer creëren Barbara Solis heeft communicatie gestudeerd in Leiden waarna ze stage heeft gelopen in Frankrijk. Is toen voor hetzelfde bedrijf bij de tak in Nederland gaan werken als team building manager. Haar dagelijks werk bestaat uit medewerkers begeleiden met het goed kunnen samenwerken binnen het bedrijf. Regelmatig plant ze team building activities, zoals weekendjes weg, workshops en feestjes. Barbara heeft als kind niet veel met technologie te maken gehad. Bij haar opleidingheeft ze snel opgepikt om met diverse apparatuur om te gaan die ze nu in haar dagelijks werk ook nog gebruikt. Hieronder vallen pc, printer, fax en digitale camera. Heef tijdens haar studie leren omgaan met computers en Internet. Moest tijdens haar stage veel werken met een Apple notebook. Ze gebruikt haar pc voor e-mail, internet browsing en documenten verwerking. Ze is soms bezig met haar digitale camera om locaties te scouten voor team building activities en om de diverse activiteiten vast te leggen. Als team building manager moet Barbara goed contact kunnen onderhouden met vrijwel alle werknemers van de verschillende afdelingen. Hiertoe is e-mail veruit het handigste communicatiemiddel. Ook voor de zeer diverse team building activities gebruikt ze regelmatig het Internet als bron. Ze woont momenteel samen met haar vriend in Rotterdam. Haar vriend is momenteel bezig met zijn opleiding tot plastisch chirurg af te ronden. Huwelijk en kinderen is ze nog lang niet aan toe, maar ze hebben wel een kat en een klein tropisch aquarium. Ze reist met het openbaar vervoer, omdat dat voordeliger voor haar is dan een auto. In het weekend doet ze aan squash met enkele collega’s. Ze heeft zelf eens een cursus boetseren gevolgd en wil nu met een afdeling van het bedrijf iets vergelijkbaars als team building activiteit te regelen. Barbara heeft de laatste tijd veel verhalen gehoord van de vrouwen op de afdeling administratie dat de sfeer daar vrij gespannen is. Er zijn daar de laatste tijd veel mensen vertrokken en nieuwe werknemers aangenomen, waardoor de samenwerking soms nog wat stroef verloopt. Nu weet barbara dat een relatief groot gedeelte van de vrouwen die bij de administratie werken in de vrije tijd doet aan schilderen, boetseren, eigen kleding maken en andere creatieve hobby’s. Ze gaat op het internet op zoek naar een atelier dat bereid is een workshop te organiseren als team building
26
activity. Barbara zoekt op internet een portalsite op die verbonden is met diverse websites van ateliers en artiesten die workshops aanbieden. Ze hoopt dat er een paar bij zitten die al ervaring hebben met team building en klikt er een paar aan om die te vergelijken. Veel van de websites die ze tegenkomt zijn voornamelijk gericht op het verkopen van eigen kunst en ze kan er niet echt vinden wat ze zoekt. Dan komt ze de website van Margarita Mejia Jaramillo tegen. Het introfilmpje laadt zich snel en geeft hierdoor geen problemen met de lage capaciteit van haar notebook. Ook de site waar ze daarna op komt is niet te groot voor het kleine beeldscherm en duidelijk overzichtelijk. Toch heeft de website een plezierige uitstraling. De foto naast de welkomstboodschap laat een vriendelijke vrouw in haar atelier zien. In het navigatiemenu ziet ze vrijwel meteen de button ‘workshops’ staan en ze klikt hierop om verder te gaan. Terwijl ze de informatie scannend doorleest valt haar oog op het kopje team building. Ze leest hoe al diverse internationale bedrijven haar hebben ingeschakeld bij hun team building activities en kan zelfs enkele reacties lezen van tevreden klanten. Alle informatie staat overzichtelijk aangeboden en ze heeft meteen een duidelijk beeld van de workshops die worden aangeboden. Dit is precies wat ze zocht. Ze klikt op de button ‘contact’ en noteert het telefoonnummer.
Rita van der Kooij Beroep: Bedrijfsleidster Leeftijd: 42 Belangrijkste focuspunt: Vernieuwing Rita is al van jongs af aan bezig met creatieve dingen, zoals kleren maken voor haar barbiepoppen. Later ging ze zich interesseren in de kunst van andere culturen, die over het algemeen veel rijker is dan hier en besloot ze Cultuurwetenschappen te gaan studeren. Hiervoor heeft ze ook een jaartje in het buitenland gestudeerd, met als gevolg dat ze zich is gaan bezighouden met het maken van kleding en kostuums. Ook heeft dat jaartje weg ervoor gezorgd dat ze aardig uit de voeten kan met email en Internet. Tegenwoordig heeft ze ook een digitale camera, waarmee ze in haar vrije tijd op zoek gaat naar patronen die ze kan gebruiken voor haar creaties. Hiervoor gebruikt ze ook het Internet, maar ze zoekt dan alleen op plaatjes en komt zo wel eens op interessante sites terecht. Ze is nu werkzaam als bedrijfsleidster en runt samen met haar man een theater. Ze gebruikt veel van haar vrije tijd aan het maken van kostuums voor voorstellingen. Omdat dat teveel tijd kost doet dat niet zelf, maar maakt ze alleen ontwerpen en zoekt de stoffen uit. Hiervoor gaat ze wel het Internet op, maar blijft alleen hangen bij sites met veel plaatjes. Ook heeft ze leren werken
27
met de scanner en met word, maar veel verder reikt haar technisch inzicht niet. Ze is dus getrouwd en is ongeveer tien jaar geleden samen met haar man een theater begonnen, wat nu een goed lopend bedrijfje is. Ze hebben, toen ze het bedrijf oprichtten, besloten dat ze geen kinderen zouden nemen, want daar zou dan weinig tijd voor overblijven. Wel hebben ze twee konijnen die goed met elkaar kunnen opschieten. Als ze moet reizen, gebruikt ze voor korte afstanden de fiets en anders de auto. Omdat ze niet wil dat het ontwerpen al haar vrije tijd op slokt, doet ze een keer per week aan badminton. Ze gaat ook wel eens een eindje fietsen met haar vriendin. Rita wil dat de websites die ze bezoekt veel beeldmateriaal bevatten, zodat ze in een korte tijd goed inzicht heeft wat de site haar te bieden heeft. Ze houdt er niet van om formulieren met allemaal vragen in te gaan vullen en vindt het prettig als ze gewoon handmatig een mailtje kan sturen als ze geïnteresseerd is. Omdat ze niet zo heel veel tijd heeft, leest ze lange stukken tekst alleen oppervlakkig door. Haar doel is om voorbeelden van kostuums te vinden zodat ze weer nieuwe inspiratie heeft voor haar eigen ontwerpen. Ook is ze vaak op zoek naar nieuwe patronen die ze in haar creaties kan verwerken. Ze is vooral geïnteresseerd in dingen van speciaal materiaal, zoals kostuums van speciale stoffen. Veel standaard patronen slaat ze dan ook over. Als ze op een website komt is het eerste wat ze doet de afdeling met plaatjes zoeken. Als die er niet is haakt ze al snel af, want ze wil resultaten zien en geen teksten lezen. Als ze de plaatjes heeft bekeken gaat ze kijken van wie de site is, dus wat voor bedrijf het is. Als het bedrijf in Nederland gevestigd is, belt of mailt ze even en pakt in het weekend de auto voor een kort bezoek. Is het een bedrijf in het buitenland, dan gebruikt ze alleen de plaatjes als ideeën. Ze is bereid om stoffen en patronen te kopen als ze deze echt goed vind, maar dat wil ze niet via Internet doen. Haar houding tegenover websites is serieus te noemen. Ze heeft interesse in de aangeboden producten en de mensen die erachter zitten en zal niet nonchalant alleen maar wat plaatjes opslaan en verdergaan. Als ze de website van Margarita zou tegenkomen, zou ze blij zijn met de afbeeldingen en wel contact opnemen.
28
APPENDIX C – INTERVIEW MARGARITA MEIJA JARAMILLO DHR. WILLEM DREESWEG 279, AMSTELVEEN DINSDAG 17 JANUARI, 17.00U
Could you tell us something about yourself and your work? From designing collections in Colombia she moved on to art-to-wear, it being a more original. Nature influences her work a lot. She thinks emotions are the most important thing for an artist, because they influence your work and your can use your work to turn sad emotions into something more beautiful. Art-towear combines function with beauty; it is involved in everyday life.
Do you have a clear purpose in mind with your website? Margarita wants the people in Holland to get familiar with her work. She’s just starting with her work and her atelier here in Holland. She also wants to promote her workshops, which cover a lot over different themes, such as silk painting, different techniques and non-traditional material. She wants a short description of these workshops available on the website. The workshops can be given during the summer in Belgium or France when the number of persons is interested. Her silk painting would be mentions, for dressing and decoration, as well as a section in which her accessories will be mentions: handbags, shoes, corsages and different little accessories mainly for women. Her work doesn’t have to be sold through the website, but people could use the ‘contact’-option to get further information. She doesn’t want prices to be mentions on the website. She likes the idea of a website like the window of a shop: it gives an impression of what’s inside and when you are really interested you go inside. She wants some things about herself to be mentioned on the website, like her work as a regional director in Colombia. Things that give you an impression of her work in Colombia.
Have you ever ran across anything useful on the internet that you’d like to see on you own website? She has found the website of a Dutch textile designer, Ella Koopman, which she finds a very beautiful website. It was a very clear website which showed what she was doing and showed her work in a very clear way. This website had a nice serenity over itself. It’s something she wants for her own website: very clean and contemporary, but still with some special effects. Silk as a background image is a good possibility.
Do you have a specific mood or impression you would like to give the visitors of you website? She has a clear view in her mind of the connection between nature and her artwork being integrated in the website. Quote:”…Show the picture of nature and then had it sort of vanish and then my silk piece breaks out.” She would also like some sounds on the different places of the website. She likes single pieces of instruments or sounds of nature. Because textile cannot be felt through a website she wants to the sounds to accompany her work. This way when you listen to the sounds, you other senses are there too. She would love birds and frogs to be on the website.
29
Could you describe the way the site should look in a couple of words? She wants the entire website to be very airy and not too busy.
Do you have some material available for us to use for the design of the website? She likes the idea of pictures from her workshops being shown on the website. She gave us some digital images and sounds for on the website.
Would you like to tell us what your motivation was to participate in this project as a client? She has worked for eight years at the faculty of fine arts as an professor and she really enjoys working with young people. She appreciates the flexibility of the people and their willingness to experiment in the creative field.
Do you have any preferences to the type of contact between our workgroup and you in the next couple of weeks? Our next appointment is in the atelier with the entire group. Meanwhile we’ll keep in touch by e-mail.
What’s your impression of the different groups working for you at this point? She pleased with the groups. The groups are very different.
30
APPENDIX D – WIREFRAMES
Figuur D.1 Eerste wireframe van Bianca: artistieke opzet
31
Figuur D.2 Sanja’s eerste wireframe: Strak design
Figuur D.3 Martin’s eerste wireframe: Overzichtelijk en simpel
32
Figuur D.4 Peter’s eerste wireframe: Schone uitstraling
33
APPENDIX E – WIREFRAMES ITERATIE
Figuur E.1 Martin’s iteratie: Veel informatie en speelse navigatie
Figuur E.2 Bianca’s iteratie: Sfeer in navigatiebalk en geconcentreerde content
34
Figuur E.3 Sanja’s iteratie: Speelse navigatie en extra features linksonder
Figuur E.4 Peter’s iteratie: Sfeer in navigatiebalk en concentratie van content
35
APPENDIX F – MOODBOARDS
Figuur F.1 Moodboard 1, gebaseerd op de natuur, in het special flora en fauna
36
Figuur F.2 Moodboard 2, gebaseerd op de natuur: water, lucht en zonsondergang
37
APPENDIX G – EVALUATIEGESPREK OPDRACHTGEEFSTER MARGARITA MEIJA JARAMILLO NOTENLAAN 8, AMSTELVEEN DONDERDAG 26 JANUARI, 17.00U
Evaluatie wireframes en wireframes iteratie De opdrachtgeefster kijkt samen met ons op de laptop naar de wireframes die wij gemaakt hebben in de loop van het project. Van te voren hadden we al een email gestuurd met daarin een speciale versie van ons einddocument waar de te bespreken content al in staat. Door de opdrachtgeefster is al enige feedback voorbereid.
Bij het zien van de wireframe in figuur D.4 begon de opdrachtgeefster met haar visie over het ontwerp van de website. In rap tempo somt ze een aantal heldere kenmerken op:
Ze wil niet veel informatie laten zien. De bezoeker moet zich op een rustige manier kunnen focussen op een bepaald iets en moet niet worden afgeleid door teveel grote buttons of te drukke indeling. Er moet dus ook maar een grote foto per pagina te zien zijn. Door weinig informatie te geven die wel speciaal is krijgt de pagina een bepaalde stijl waar de opdrachtgeefster naar streeft. “De tekst / inhoud is niet belangrijk, het is mij de stijl waar het om gaat” aldus de opdrachtgeefster. Over de buttons is ze kort en duidelijk: er moeten twee soorten navigatie zijn. De eerste een hele subtiele kleine band onder het logo om naar verschillende afdelingen te gaan en onderin thumbnails van plaatjes, om naar het desbetreffende onderdeel van de afdeling te gaan. De buttons onderin moeten een bepaald thema hebben dat terugkomt in de onderliggende pagina als je erop klikt. De opdrachtgeefster wil wel een foto van zichzelf op de voorpagina, om de site een persoonlijk tintje aan te geven. Het moet geen portret worden, maar een foto van haar in actie, terwijl ze bezig is met haar werk. De buttons onderin moeten plaatjes zijn in kleine vierkantjes die elk een ander thema hebben. Vooral onderscheid in kleur moet het thema aangeven, de plaatjes moeten aardig solide zijn wat kleur betreft. De gallery’s van haar werk moeten, net als de rest van de site heel rustig en “clean” zijn. Dit houd in dat er een foto per keer te zien moet zijn, met pijltjes aan weerszijden om naar het volgende werk te gaan. De volgende werken zijn ook toegankelijk via de buttons onderin, maar in een meer verhulde vorm, omdat hier alleen het kleurthema te zien is. Qua design moet de site zwart witte diagrammen hebben, zwarte tekst op witte achtergrond. De site moet veel wit, veel lucht hebben, “zodat deze kan ademen”. De site moet verschillende thema’s hebben voor verschillende onderdelen.
38
Klikbare plaatjes zijn niet nodig, misschien incidenteel een toegevoegde leus / versregel in een uitgewerkte website. Het idee voor het filmpje als logo dat een pen haar handtekening schrijft valt heel goed in de smaak. Dit is een onderdeel waar uiteindelijk wel aan gewerkt kan worden als het ontwerp ook echt uitgewerkt moet worden, voor het TAWD project is dit ietsje te uitgebreid.
Met wireframe E.2 kan de opdrachtgeefster zich het beste identificeren, het is het meest rustige ontwerp, dat heel sterk een stijl uitstraalt.
Moodboards We laten de opdrachtgeefster op papier de moodboards die we hebben samengesteld zien. Ze heeft deze nog helemaal niet gezien, en steekt direct van wal met haar feedback
De moodboards vielen qua thema goed in de smaak bij de opdrachtgeefster. Ze benadrukte wel direct dat ze beide veel te druk waren, en dat ze liever een figuur per pagina ziet, zoals ze al eerder vermeld had. De stijl van de twee moodboards is wel duidelijk heel verschillend. De opdrachtgeefster vond het moodboard in figuur F.2 het meeste bij het ontwerp van de site en haar werk passen, omdat de natuurlijke watervormen sterk overeenkomen met haar zijde werk. In het speciaal vond ze het derde plaatje van boven passend, omdat hier de vormen van het water heel mooi te zien zijn. De stijl van het moodboard in figuur F.1 is veel meer gebaseerd op flora en fauna, en hier zijn het meer de individuele plaatjes die de opdrachtgeefster aanspreken. De frisse groene kleuren geven een heel duidelijk thema weer, zoals ze die graag zou terugzien binnen één thema van de website, terwijl het thema van figuur F.2 meer in de algemene website past.
Design Omdat er nog wat tijd over was na de geplande evaluatie besloot het team te proberen samen met de opdrachtgever een simpel design op te stellen, aan de hand van haar instructies. Met een simpel tekenprogramma werd zo in een paar kleine stappen duidelijk hoe de opdrachtgeefster eigenlijk de website zag.
In figuur G.1 en G.2 is te zien wat het resultaat was van de korte design schets sessie. In deze schets wordt duidelijk dat de opdrachtgeefster veel wit wil zien in de pagina, en de kleuren aan wil geven met het object dat op die pagina centraal staat. De navigatie subtiel en klein, indien nodig alleen met tekst, zelfs zonder buttons. Het gallery systeem komt in zijn eenvoud ook duidelijk naar voren in de tweede figuur G.2. De eerste button links onderin (blauw) komt overeen met het object dat op dit moment te zien is. Voor elk object zal er een ander themaplaatje te zien zijn. Ook wordt in deze schets geaccentueerd dat er heel weinig te zien is en dat het duidelijk alleen de bedoeling is een impressie te geven van haar werk.
39
Figuur G.1 Design schets van de homepagina
Figuur G.2 Design schets van de gallery pagina’s
40
APPENDIX H – GRAFISCH ONTWERP
Figuur H.1 Grafisch ontwerp
41
APPENDIX I – BIJGESTELDE WIREFRAMES
Figuur I.1 Bijgestelde wireframe voor gallery
Figuur I.2 Bijgestelde wireframe voor home
42
Figuur I.3 Bijgestelde wireframe voor contact information
43
APPENDIX J – PROTOTYPE
Figuur K.1 Prototype “Home” pagina
Figuur K.2 Prototype “Accessories” pagina
44
Figuur K.3 Prototype “Silks” pagina
Figuur K.4 Prototype “Workshops” pagina
45
Figuur K.5 Prototype “Contact” pagina
46
APPENDIX K – EVALUATIEPLAN DOELSTELLING
Het doel van de website is voornamelijk om de bezoeker snel te laten zien wie de opdrachtgeefster is en wat zij te bieden heeft. De bezoeker moet hier dan ook zonder al te veel moeite achter kunnen komen. Voor de opdrachtgever was het ook belangrijk dat zij een bepaalde sfeer kon creëren. Dat er een sfeer hangt moet dus voor de bezoeker ook duidelijk zijn. UITVOERING
De website bestaat uit twee delen, de technische en de “zichtbare” kant. Wij vonden het belangrijk dat beide kanten te testen. Dit gaan we doen door middel van een interview. Het eerste interview zal zijn met een webdesign expert . Het tweede interview zal zijn met een “leek”. Veel gebruikers van de website hebben niks met computers, zij zijn alleen geïnteresseerd in de kunst van de opdrachtgever. Ook voor deze mensen moet de site toegankelijk zijn. VRAGEN VOOR DE EXPERT
Wat vindt u van de website?
Wat zou u eraan verbeteren?
Denkt u dat deze website voor iedereen toegankelijk is?
Zou u zelf deze website bezoeken?
VRAGEN VOOR DE GEWONE BEZOEKER
Vindt u dat er een sfeer hangt?
Wat voor sfeer denkt u dat de maker van de website wil creëren?
Kunt u vinden over wie deze website gaat?
Wat voor soort kunst maakt de maker van de website?
Kunt u een van deze kunstwerken vinden?
Valt u iets op aan de achtergrond?
Kunt u het adres van de maker vinden?
Kunt u weer terugkomen naar de beginpagina?
Stel, u wilt een workshop volgen, kunt u die pagina vinden?
Wat vindt u goed aan deze website?
Wat vindt u minder goed tot slecht aan deze website?
Zou u in het vervolg deze website bezoeken?
47
INTERVIEW MET EEN EXPERT
De evaluatie door een expert is gedaan door Opsys automatisering te Den Haag. De experts waren Theo van den Bosch(technisch directeur) en Martijn van Workum (senior-webdeveloper). Door middel van een e-mail heb ik het bedrijf gevraagd om het prototype van onze website te evalueren. Dit waren de punten die hen opvielen naar aanleiding van mijn vragen:
Het is mij niet duidelijk voor wie de website nu is. Er staat alleen een onleesbare tekst boven.
Zorg dat alle linkje op een pagina werken.
Als je verwijst naar images zorg dan dat ze er zijn.
Op de contact pagina ga daar geen tekstbox gebruiken maar display de tekst gewoon. Tekstbox is voor invoer Wil niet zo kritisch zijn om een interactieve email pagina te verlangen. Maar zet er minimaal een email linkje neer dat bij aan klikken je mail pakket opent. Als je stylesheets gebuikt in je html pagina gebruik deze dan ook. Het 'flikkeren' bij het wisselen van de keuzes is irritant. (komt door gebruik van image-spacers) De website is niet getest onder firefox, netscape en opera. In firefox rekt de contact pagina namelijk enorm uit.
INTERVIEW MET EEN GEBRUIKER
Ik heb gesproken met mevrouw Kling. Zij heeft weinig verstand van computers. Als een website al te moeilijk is geeft zij op. Het interview begint met een korte introductie: Goedemiddag mevrouw Kling, ik vind het erg leuk dat u ons wil helpen met het project. Ik ga u zo een paar vragen stellen die u tijdens het bezoek aan de website kunt beantwoorden. Ik wil u vragen zo eerlijk mogelijk te zijn, er bestaan geen slechte antwoorden. Het belangrijkste is dat u, uw mening geeft.
Vindt u dat er een sfeer hangt? De achtergrond vind ik erg mooi. Maar de website heeft niet echt een duidelijke sfeer. Al vind ik de website erg kil ogen. Dat komt door de blauwe achtergrond. Een gele achtergrond was volgens mij beter geweest.
Wat voor sfeer denkt u dat de maker van de website wil creëren? Ik denk dat het te maken heeft met iets rustgevends. Geen speciale dingen erop, gewoon “to the point”
Kunt u vinden over wie deze website gaat? Volgens mij gaat de site over de vrouw op het plaatje. Informatie over haar staat volgens mij dan bij “biography”
48
Wat voor soort kunst maakt de maker van de website? Volgens mij bewerkt ze stoffen. Maar dat weet ik niet zeker. Ik vind dat erg onduidelijk.
Kunt u een van deze kunstwerken vinden? Ja, maar ik wist niet dat het kunst was.
Valt u iets op aan de achtergrond? Ja die verandert toch?
Kunt u het adres van de maker vinden? Ja, bij contact. Het is een kwestie van lezen.
Kunt u weer terugkomen naar de beginpagina? Ja met de “vorige” knop van de browser. Of is er een andere manier? Dat is mij niet helemaal duidelijk. Het zal “home” wel zijn.
Stel, u wilt een workshop volgen, kunt u die pagina vinden? Ja hoor, gewoon op de tekst klikken. Zoals ik al eerder zei, het is een kwestie van lezen.
Wat vindt u goed aan deze website? Ik vind de website erg overzichtelijk. De achtergrondkleuren zijn ook erg mooi alleen jammer van dat blauw, dat komt toch erg kil over.
Wat vindt u minder goed tot slecht aan deze website? De letters boven waar je op kan klikken, mogen wel iets groter. Ik denk dat mensen met slechte ogen dit niet kunnen lezen. Ook de handtekening bovenin vind ik erg onduidelijk. Je kan er niet echt een duidelijke naam uit halen. Je moet echt weten wat er staat, om het te kunnen lezen.
Zou u in het vervolg deze website bezoeken? Ja hoor. Ik vind dat de maker van de website erg mooie kunst maakt.
CONCLUSIE
Door deze interviews krijgen we een beetje een beeld hoe de bezoeker kijkt naar onze website en wat we nog zouden kunnen veranderen aan de techniek. Al is de mening van een bezoeker nog niet binden en zal er in het vervolg dan ook een focusgroep worden opgezet met 5 gewone bezoekers, die ook de voorgaande vragen zullen beantwoorden. Aan de hand van dat onderzoek zullen wij dingen aan kunnen passen aan de website. Dit zal gebeuren nadat de opdrachtgeefster ons ontwerp goed gekeurd heeft, maar voor de implementatie. De kritieken uit de interviews worden zo snel mogelijk verwerkt in de site. Het uiteindelijke prototype is aangepast naar de kritieken.
49
APPENDIX L – LOGBOEK WEEK 1
Datum
Wie
Wat
09-01-06
TEAM
Taakanlyse & Webdesign introductie college
09-01-06
TEAM
Websites uitgezocht en geanalyseerd voor de “Competitor Analysis”
09-01-06
TEAM
Afspraak gemaakt met studentassistent
10-01-06
TEAM
Conclusie geschreven voor “Competitor Analysis”
10-01-06
Peter
Organisatie van documenten en ontwerp einddocument gestart
10-01-06
Sanja
Tweede contact gemaakt met opdrachtgeefster na mislukte 1e poging
11-01-06
TEAM
Interview training gevolgd
11-01-06
TEAM
Eerste afspraak met studentassistent, evaluatie bespreking
11-01-06
TEAM
Werkoverleg week 1
11-01-06
TEAM
Persona’s gecreëerd
11-01-06
Peter
Plan van Aanpak opgezet
12-01-06
TEAM
Scenario’s gecreëerd
12-01-06
Sanja
Schrijven conclusie Persona’s/Scenario’s
12-01-06
TEAM
Teambijeenkomst online
13-01-06
Martin
Eerste HTML ideeën vorm gegeven
WEEK 2
Datum
Wie
Wat
16-01-06
TEAM
Concept Design College
16-01-06
TEAM
Teamoverleg, werkverdeling week 2 deel 1
16-01-06
TEAM
Interview voorbereiding
16-01-06
TEAM
Wireframes maken
16-01-06
Martin
Index bestand voor groepssite gemaakt
50
17-01-06
Sanja & Interview afgenomen Peter
17-01-06
Peter
Wireframes conclusie
18-01-06
Peter
Informatie Architectuur
18-01-06
TEAM
Tweede afspraak met student assistent, evaluatie bespreking
18-01-06
TEAM
Teamoverleg, werkverdeling week 2 deel 2 t..b.v. wireframes
19-01-06
TEAM
Wireframe iteratie
20-01-06
Bianca
Flowdiagram
20-01-06
Sanja
Uitwerking interview + rationale post-interview
WEEK 3
Datum
Wie
Wat
23-01-06
TEAM
College
23-01-06
TEAM
Teamoverleg en werkverdeling week 3
24-01-06
Bianca & Sanja
Moodboards
25-01-06
TEAM
Derde afspraak met student assistent, evaluatie bespreking
25-01-06
Peter
Rationale moodboards
25-01-06
Peter
Herschrijving Informatie Architectuur
25-01-06
Martin, Bianca & Sanja
Herschrijving flowdiagram
25-01-06
Peter
Rationale Interview
26-01-06
TEAM
Evaluatie interview met opdrachtgeefster
27-01-06
Martin
Herziene wireframes
27-01-06
Peter
Verwerking interview + rationale
51
WEEK 4
Datum
Wie
Wat
30-01-06
TEAM
College
30-01-06
TEAM
Teamoverleg en werkverdeling week 4
30-01-06
Martin
Afronden website code
30-01-06
Sanja
Voorbereiden presentatie stof
30-01-06
Peter
Grote update einddocument
01-02-06
Sanja & Voorbereiden presentatie / powerpoint presentatie samenstellen Peter
01-02-06
Bianca
Evaluatieplan + rationale
01-02-06
Martin
Bijwerken website
02-02-06
Peter
Afronden einddocument
02-02-06
Martin
Inleveren einddocument op papier
52
