TAAKANALYSE & WEBDESIGN

Transcriptie

1 PETER PEERDEMAN BIANCA V/D BOSCH PPN MARTIN BOER SANJA BANKRAS MBOER@FEW.VU.NL SBANKRAS@FEW.VU.NL MBR TAAKANALYSE & WEBDESIGN EINDDOCUMENT GROEP 6 JANUARI 2006 Cooperation, interaction with business and a slight sense of technology

2 TAAKANLYSE & WEBDESIGN EINDDOCUMENT 1. INLEIDING Een inleiding over het TAWD Project 2. PLAN VAN AANPAK 2.1 TEAMBESCHRIJVING Sanja Bankras Project Manager, Public Relations Expert, Coördinator, Graphical Designer Martin Boer Engineer, Technical Designer, Programmer Bianca van der Bosch Macromedia Flash Expert, Programmer, Quality Control Manager Peter Peerdeman Editor, Designer, Administrator, Internal Communications Specialist 2.2 SAMENWERKING Een stukje over de samenwerking binnen het team. Een stukje over de planning. WEEK 1 Datum Wie Wat 2.3 PLANNING 2.4 LOGBOEK TEAM Taakanlyse & Webdesign introductie college TEAM Websites uitgezocht en geanalyseerd voor de Competitor Analysis TEAM Afspraak gemaakt met studentassistent TEAM Conclusie geschreven voor Competitor Analysis Peter Organisatie van documenten en ontwerp einddocument gestart Sanja Tweede contact gemaakt met opdrachtgeefster na mislukte 1 e poging TEAM Eerste afspraak met studentassistent, evaluatie bespreking TEAM Persona s gecreëerd

3 Martin Plan van Aanpak ontwerp opgezet WEEK 2 Datum Wie Wat WEEK 3 Datum Wie Wat WEEK 4 Datum Wie Wat

4 3. VOORONDERZOEK 3.1 COMPETITOR ANALYSIS We kunnen concluderen dat alle geanalyseerde sites, die zijn uitgezocht op relevantie met het bedrijf van de opdrachtgever, 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 DemianoDraft.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.

5 3.2 PERSONA S Lijstje persona s 3.3 INTERVIEW VOORBEREIDING Lijstje met dingen die we te weten willen komen Sfeer Content Opzet 4. CONCEPT ONTWERP 4.1 INFORMATIE ARCHITECTUUR De informatie architectuur. 4.2 WIREFRAMES De wireframes 4.3 STORYBOARD Content 5. GRAFISCH ONTWERP Het moodboard 5.1 MOODBOARDS 5.2 GRAFISCHE VORMGEVING 5.3 BIJGESTELDE WIREFRAMES 6. PROTOTYPE EN TESTEN 6.1 PROTOTYPE 6.2 TESTPLAN

6 7. CONCLUSIE 6.1 PROTOTYPE APPENDIX A SITE EVALUATIES CONTENT A.1 FACULTY OF FINE ARTS DOOR PETER PEERDEMAN 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.

7 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. 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.

8 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 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.

9 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 CONTENT A.3 DAMIANO CRAFT DOOR MARTIN BOER 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.

10 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. 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)

11 - 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? - 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. APPENDIX B INTERVIEW Content - Content - Content - Content - Content - Content - Content - Content - Content APPENDIX C WIREFRAMES APPENDIX D GRAFISCH ONTWERP