Issuu on Google+

Travelactive Ontwerprapport Bram Doppen, C1V


Inhoudsopgave 2.1: Conceptbeschrijving 2.2: Inspiratie 2.3: Scenario 2.4: Testen scenario 2.5: Cardsorting & Flowchart 2.6: Navigatieontwerp 2.7: Wireframe 2.8: Ontwerp 2.9: Bronvermelding

04 09 10 12 14 16 18 20 25


Opdracht 2.1 Bij de start van de ontwerpfase voor de website van Travelactive heb ik eerst een moodboard gemaakt met dingen die in je opkomen wanneer je aan reizen en relevante dingen denkt. Hier heb ik mijn inspiratie uit kunnen halen voor kleurgebruik, indeling van divisies en hoe het moodboard eruit moet zien. Korte toelichting moodboard: Met het ontwerpen van het moodboard heb ik er in eerste instantie voor gekozen dat er verschillende kleuren aanwezig zijn, met 1 centrale kleur in het midden zodat er ergens een focus gelegd kan worden. Ook moet de sfeer van het reizen goed overgebracht worden. Vooral omdat we een avontuurlijke, uitdagende sfeer willen uitstralen gebruiken we zorgvuldig uitgekozen foto’s. De foto’s worden gekozen op de sfeer die er vanaf komt, en op de kleuren die in de foto terugkomen.

Afbeelding: Mindmap

4

Travelactive Ontwerpverslag, Bram Doppen

--> Afbeelding: 1e moodboard


Travelactive Ontwerpverslag, Bram Doppen

5


Aansprekende voorbeelden: Hieronder staan een paar voorbeelden die erg aanspreken en wellicht een goede basis vormen voor de uiteindelijke website. http://www.pinterest.com/pin/479844535270499335/ http://www.pinterest.com/pin/479844535270499384/ http://www.pinterest.com/pin/479844535270499380/ http://www.pinterest.com/pin/479844535270506040/

Pinterest link: Hieronder vind je een link naar mijn Pinterest bord waar ik afbeeldingen verzamel die met de sfeer van mijn websiteontwerp te maken hebben. http://www.pinterest.com/bramdoppen/travelactive/ Basisidee: Er wordt een website gemaakt voor Travelactive. De doelgroep is studenten. Het wordt een clean, minimalistische website waar de call-to-action duidelijk is. De bezoeker weet dus direct dat hij/zij moet zoeken naar een bestemming. Het verleidelijke zit hem in de kaart waar markers op staan. Wanneer de muis er overheen gaat lichten ze op. Zo wordt de bezoeker getriggerd om te klikken. We hebben wel een aantal doelstellingen opgesteld: - De website moet minimaal 1000 keer bezocht worden per maand, waarvan er 600 unieke bezoekers moeten zijn. - Het bouncepercentage van de homepage moet rond de 40% liggen. - Het derde jaar moeten er 20 reviews per maand bijkomen.

6

Travelactive Ontwerpverslag, Bram Doppen


Doel: De website wordt gemaakt om te zorgen dat Travelactive de standaardsite wordt onder jongeren wanneer zij op zoek zijn naar informatie over werken in het buitenland.1 Vorm: De website moet een betrouwbare, avontuurlijke sfeer uitstralen naar de bezoeker. Er zal dus gebruik gemaakt worden van de kleuren blauw en oranje. Aangezien blauw geassocieerd wordt met trouw, eerlijkheid, verantwoordelijkheid en ambitie. 2 Oranje wordt geassocieerd met avontuur, enthousiasme en onafhankelijkheid.3 Precies wat we willen bereiken. De homepage krijgt een andere layout dan de onderliggende pagina’s. Op de onderliggende pagina’s zal er ruimte zijn voor een submenu. Het lettertype Droid Sans (Google Fonts) wordt gebruikt voor headers en andere koppen. Voor de normale teksten zal Helvetica Regular gebruikt worden. Dit laatste lettertype zal via de font-face aangeroepen worden. Er is bewust gekozen voor een sans-serif font omdat dit er zonder verder opsmuk modern, strak en minimalistisch uitziet.4

Voorbeeld typografie:

Droid Sans

Pellentesque sit amet ante ornare, varius lacus et, accumsan nisl. Phasellus mattis placerat risus egestas convallis. Vivamus faucibus est a erat fermentum, eget cursus metus auctor.

Kleur: Op de website wordt, zoals hierboven beschreven, gebruik gemaakt van de kleuren blauw en oranje. Hieronder staan de kleurcodes beschreven. Oranje kleur (Logo, navigatie, h1, h2, h3, h4): Blauwe kleur (markers):

#ff8800 #007eb2

Hovers op #ff8800: #e57a00 Hovers op #007eb2: #29a3d5

Bron 1: Analyserapport Bram en Suzanne Bron 2: http://www.iderealist.nl/design/stijl/26-kleurenpsychologie-blauw-op-je-website Bron 3: http://www.iderealist.nl/design/stijl/21-kleurenpsychologie-oranje-op-je-website Bron 4: http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/

Travelactive Ontwerpverslag, Bram Doppen

7


Inhoud: Op de website komt grotendeels straight-to-the-point informatie te staan. We maken het voor de doelgroep niet lastiger dan het al is. We zorgen ervoor dat de informatie logisch ingedeeld wordt onder het menu. Op de homepage komt een grote afbeelding te staan die de sfeer meegeeft. De keuze van deze afbeelding is dus belangrijk, want dit kan de website maken of breken. Onder de grote afbeelding komt een kaart waarop met markeringen de verschillende reislocaties zijn aangegeven. Zo krijgt de bezoeker direct een beeld wat we aanbieden, en waar de landen zitten op de kaart. Hoe maak ik het meer seductive? Met een wereldkaart waarop de bestemmingen aangegeven staan met markers (voorbeeld staat hieronder). Wanneer je met de muis over de marker gaat komt deze ongeveer 10px omhoog en verandert iets van kleur. Ik heb geëxperimenteerd met verschillende wereldkaarten. Zo zie je hieronder. De bovenste past niet echt bij de website, doordat de kaart nogal rechtop staat. Ook lijkt het 3D te zijn. Dit past niet bij een simplistische website. Vandaar dat mijn keuze op de onderste kaart is gevallen. Die is namelijk mooi “flat” met een subtiele schaduw.

Kaart 1, niet gebruikt

Kaart 2, Gebruikt in ontwerp

8

Travelactive Ontwerpverslag, Bram Doppen


Opdracht 2.2 Verbeterd moodboard Ik heb na het onderzoek doen in de vorige opdracht het moodboard aangepast. Ik heb nieuwe beelden gezocht die beter bij de sfeer van de website passen. Zie hieronder het nieuwe moodboard.

Travelactive Ontwerpverslag, Bram Doppen

9


Opdracht 2.3 In de huid van... Een van de persona’s heeft ‘fictief’ de website van Travelactive bezocht. Hier wordt beschreven hoe de persona de website ervaart. Dit om de website nog beter te maken.

10

Travelactive Ontwerpverslag, Bram Doppen


In de huid van Dylan de Graaf. Wanneer Dylan thuiskomt na een lange dag school kijkt hij op zijn Facebook. Een van zijn vrienden heeft een artikel van Travelactive gedeeld. Dylan ziet dit en hij klikt door omdat de sfeer op de Facebook pagina zijn avontuurlijke karakter al raakt. Vervolgens is hij geïnteresseerd in meer informatie dus klikt hij op de websitelink. Aangezien hij bijna klaar is met zijn studie, en daarna een tijdje naar het buitenland wil, is hij geïnteresseerd in wat hij op de homepage ziet. Er staat al direct grote foto in beeld. Dit geeft een goede indruk en sfeer mee aan de website. Ook staat er een kaart in beeld waarop te zien is welke landen er op de site geregistreerd staan. Bovenin de website staat een zoekfunctie. Dit ervaart Dylan als zeer prettig. Hij weet direct waar hij aan toe is. Vervolgens wil hij op een punt in de kaart klikken die hem interessant lijkt. Met de mousover wordt de pointer iets groter. Dit word door Dylan als onverwacht, maar leuk ervaren, en motiveert hem om inderdaad door te klikken. Daarna komt hij op een pagina waar meerdere bestemmingen in dat gebied staan. Hij kan sorteren op reviewbeoordeling (ranking), of op alfabetische volgorde. Ook kan hij kiezen wat voor werkzaamheden er uitgevoerd worden. (Vrijwilligerswerk, druivenplukken, zonnecellen plaatsen, Scholenbegeleiding) Hij sorteert op ranking, en vervolgens op scholenbegeleiding, omdat hij graag kinderen begeleid, en het deels aansluit op zijn opleiding. Wanneer hij op een individuele bestemmingspagina komt ziet hij direct een paar foto’s staan die in dat gebied zijn gemaakt. Aan de rechterkant staan 3 regels beoordeling, met de ‚lees meer’ mogelijkheid om de hele beoordeling te lezen. Dan volgt er een beschrijving over de bestemming en informatie over het werk. Ook staan er foto’s van de accommodatie en een korte tekst over de faciliteiten welke er in de accommodatie aanwezig zijn. Hij klikt op „reviews lezen”. Vervolgens word hem gevraagd een account aan te maken. Hij is verbaasd dat hij enkel zijn voornaam (achternaam is niet verplicht), e-mail adres en een wachtwoord in moet geven. Normaal vragen ze je het hemd van het lijf! Hij krijgt vervolgens een email, moet enkel even op de bevestigingslink in de mail klikken, en hij is ingelogd. Hij leest hier vervolgens de volledige reviews, en kan zelf ook reageren op de reviews van anderen. De ‚reviewhouder’ wordt hier per email van op de hoogte gesteld zodat deze ziet dat er commentaar op zijn/haar review is geplaatst. Zo kan hij/zij direct antwoorden wanneer nodig. Dit vind Dylan prettig, want hij krijgt snelle reacties op de vragen die hij stelt. Travelactive geeft meldingen dat Dylan nog niet al zijn persoonsgegevens heeft ingevuld. Hij kan zijn mobiele telefoonnummer invullen, een link naar zijn Facebook, en hij kan kiezen of zijn e-mail adres openbaar word gemaakt, zodat andere mensen dit ook kunnen zien, en ze makkelijker in contact kunnen komen.

Travelactive Ontwerpverslag, Bram Doppen

11


Opdracht 2.4 Vragen Iemand kruipt in de huid van een ander persona en gaat kritische vragen stellen gericht op het scenario dat in opdracht 2.3 is omschreven.

Kan ik meteen naar een werkvakantie zoeken? Ja, via de zoekoptie die groot aanwezig is op de homepage. Blijft de headerfoto hetzelfde? In eerste instantie wel. Op termijn gaat deze functioneren als een slider met 3/4 foto’s die zich afwisselen. Waarom komt er geen aparte headerfoto bij iedere werkvakantie? Op termijn komt dit er wel, zodat je het gevoel krijgt alsof je op een aparte pagina zit. Nu beschikken wij nog niet over de juiste foto’s, daarom kan dit nu nog niet gerealiseerd worden. Waarom kan ik vanuit het primaire menu niet naar contact? Omdat dit minder relevant is voor de gebruiker. Je vindt de link naar „contact” in de footer. Hoe kom ik bij mijn eigen account? Door in te loggen en naar „Mijn account” te gaan. Wanneer je ingelogd bent veranderd het formulier naar een „Mijn account” knop Hoe kan ik mijn wachtwoord wijzigen? Door in te loggen en naar „mijn acocunt” te gaan. Wanneer je je wachtwoord vergeten bent kun je deze opvragen via de registratie pagina. Wat als ik mijn gebruikersnaam en wachtwoord vergeten ben? Aan de hand van je email adres kun je deze alsnog opvragen. Mocht het echt niet lukken, kun je contact opnemen met Travelactive. Kan ik direct een review schrijven? Nee, je moet hiervoor ingelogd zijn. Wat gebeurt er als ik op de beoordelingssterren klik? Wanneer je op de werkvakantie pagina zit kun je op de sterren klikken. Je springt dan direct naar de reviews.

12

Travelactive Ontwerpverslag, Bram Doppen


Kun je werkvakanties ook op andere dingen sorteren dan beoordeling? Ja, je kunt ook sorteren op land en accommodatie faciliteiten. Zijn de foto’s die je op de individuele werkvakantiepagina’s ziet up-to-date? Deze worden zo veel mogelijk up-to-date gehouden. Zijn naast de foto’s de faciliteiten ook up-to-date? Deze proberen we zo goed mogelijk up-to-date te houden. Als wij nieuwe informatie doorkrijgen plaatsen we dit binnen één dag. Wat als mijn bestemming niet is opgenomen? Je kunt dan via het contactformulier een suggestie indienen aan Travelactive. Misschien nemen we deze dan op in het „assortiment”. Kun je via de zoekfunctie zoeken op trefwoorden? Er zijn een aantal trefwoorden gelinkt aan de individuele werkvakantiepagina’s. Je kunt dus zoeken op trefwoorden, de meest logische zijn opgenomen. Moet ik alle velden invullen om te registreren als gebruiker? Enkel de velden waar een ster achter staat. Dit betreft enkel een gebruikersnaam, wachtwoord en je email adres. Wat als ik sommige gegevens niet wil opgeven? We hebben een aantal basisgegevens nodig (gebruikersnaam, wachtwoord en email adres) om je op te kunnen nemen in de database. Een andere optie is er dus niet. Wat gebeurt er met de gegevens die ik opgeef? Deze worden allemaal veilig opgeslagen in de database. Privacy van de gebruiker staat bij ons hoog in het vaandel. Wat als ik geen emails meer wil ontvangen? Je kunt via „Mijn account” je notificatieinstellingen aanpassen. Hoe zit het met de browsercookies? De website heeft cookies nodig om te kunnen funcitoneren. Deze moet je dus accepteren. Kan ik werkvakanties delen via facebook? Je kunt individuele werkvakanties delen via facebook. De knop vind je op de individuele werkvakantiepagina. Conclusie: De website voldoet aardig aan de gestelde eisen en het persona lijkt weinig moeite te hebben om de usability van de website te snappen. Toch een paar verbeterpunten: Op termijn gaan we aparte headerfoto’s maken bij individuele werkvakantiepagina’s om zo een betere sfeer te creëren. Misschien kunnen we het op termijn integreren met Facebook, zodat je in kunt loggen met je Facebook profiel.

Travelactive Ontwerpverslag, Bram Doppen

13


Opdracht 2.5 Cardsorting De cardsorting is als volgt: - Home - Werkvakanties - Vacatures - Fotoalbum - Informatie - Nieuws - Wat kost het? - Alles wat ik moet weten - Blog - Contact - Over Travelactive.

Toelichting: Er is gekozen om korte, krachtige paginanamen te kiezen. Onder werkvakanties vind je de vacatures en een fotoalbum met impressiefoto’s van mensen die op werkvakantie zijn geweest. Onder informatie vind je het kopje nieuws, waar bijvoorbeeld storingen worden gecommuniceerd, of uitgebreide informatie als er nieuwe vakanties zijn. Maar ook informatie over een bepaald land. Onder het kopje “Wat kost het” vind je informatie over het geld dat je ongeveer kwijt bent, en wat je kunt verdienen. Onder het kopje “Alles wat ik moet weten“ vind je ook echt alles wat je moet weten voordat je op werkvakantie gaat. Vandaar dat we de naam zo hebben gekozen. Onder “Blog” vind je de blogs van geregistreerde gebruikers. De blogs zijn wel voor iedereen te bekijken. Het kopje “Contact” staat enkel in de footer. Deze heeft dus geen zichtbare dropdown. Je komt hier op een aparte pagina uit, waar je wel door kunt klikken naar “Over Travelactive“, waar je informatie leest over ons bureau. Er is duidelijk gekozen om deze onder “contact“ te zetten en niet onder “Informatie“, omdat onder “informatie” alleen maar dingen staan die met jouw reis te maken hebben en niet met Travelactive zelf. Dit plaatsen onder “Contact“ is dus een logische optie.

14

Travelactive Ontwerpverslag, Bram Doppen


Flowchart In deze flowchart wordt duidelijk hoe de website qua structuur in elkaar zit, en welke pagina over subpagina’s beschikt.

Travelactive Ontwerpverslag, Bram Doppen

15


Opdracht 2.6 Navigatieontwerp De navigatie komt helemaal bovenin de pagina. We houden de 7 + - 2 regel aan voor het aantal menublokken. Dit is usability technisch een goede oplossing omdat er op deze manier niet teveel in het hoofdmenu staat. Ook is er een submenu aanwezig. Deze wordt getoond als een dropdown wanneer je met je muis over een hoofdmenu button gaat. Het menu is op iedere pagina hetzelfde. Het menu wordt opgebouwd met HTML 5 en CSS 3. Wanneer je met de muis over een button gaat, veranderd deze van kleur doormiddel van een transition. De active menu state wordt toegewezen doormiddel van PHP. Wanneer het page ID dat in de IF van het menu staat, matcht met de state gegeven op de pagina, krijgt de <li> een bepaalde class waardoor de achtergrondkleur veranderd. Er komt een 2e menu in de footer. Dit is makkelijk wanneer je onder in de pagina bent. Hier staat exact hetzelfde menu als bovenin de pagina. Maar hier vind je wel de link naar de contactpagina. Deze gaat weinig gebruikt worden, dus hebben we deze in de footer gezet. Deze link staat dus niet in de hoofdnavigatie. Dit menu heeft geen active menu state, wel een mouseover. De bezoeker kan zien waar hij/zij is op de website, door de active menu state (menuknop heeft een andere kleur), en door de breadcrumbs, welke aanwezig zijn als je dieper de site in gaat.

16

Travelactive Ontwerpverslag, Bram Doppen


Travelactive Ontwerpverslag, Bram Doppen

17


Opdracht 2.7 Wireframes

Ik heb een aantal wireframes uitgewerkt om te laten zien waar de elementen komen en hoe de website gaat functioneren. Alle content staat binnen een grid van 960px. De navigatie staat bovenin de website en komt op iedere pagina terug. Na de navigatie komt de headerimage, daarna de zoekfunctie. Onder de zoekfunctie vind je het seductive element: de kaart. Homepage

18

Travelactive Ontwerpverslag, Bram Doppen


Overzicht werkvakanties / Blog De blogpagina heeft dezelfde structuur als de overzichtspagina voor werkvakanties. Vandaar dat er dus maar 1 wireframe voor is.

Werkvakantie

Travelactive Ontwerpverslag, Bram Doppen

19


Opdracht 2.8 Ontwerpen

Hier staan de ontwerpen die ik heb gemaakt voor Travelactive. Ze zijn gebaseerd op het wireframe. De pagina staat binnen het grid van 960px. Ik heb voor 960px gekozen omdat dit op ieder scherm goed te zien is. De menuitems en meeste koppen zijn in kapitalen geschreven. Dit is zodat de x-hoogte gelijk is. Dit komt iets strakker over. De header bevat het topmenu (inlog), primaire navigatie, slider en de zoekfunctie. De section bevat de kaart, quickitems en de uitgelichte review. Daaronder komt de footer. In de footer zit het secundaire menu. Hier vind je de link naar de contactpagina. De marges tussen de kolommen is duidelijk aanwezig. Dit is gedaan om een structuur aan de website te geven. Het eerste ontwerp dat ik maakte was ik nog niet helemaal tevreden over. Nadat ik feedback gevraagd had (via trello) kreeg ik veel als commentaar dat de headerafbeelding de sfeer niet goed overbracht. Ook is de grijs/antracietkleur te donker en de titel boven de kaart is te vaag. Ik heb deze punten aangepast en meegenomen in het defintieve ontwerp. Op de volgende pagina zie je de definitieve ontwerpen.

20

Travelactive Ontwerpverslag, Bram Doppen


Ontwerp 1, homepage

Travelactive Ontwerpverslag, Bram Doppen

21


Ontwerp definitief, homepage De grijskleur is aangepast en de titel is aangepast. Ook is er een topbak toegevoegd waar je kunt inloggen en waar je naar je account kunt. Ook is er een andere headerfoto gekozen.

22

Travelactive Ontwerpverslag, Bram Doppen


Ontwerp definitief, Overzichtspagina / blogpagina De pagina is omhoog gehaald. Dit omdat de header niet zo heel groot hoeft te zijn, en zodat je duidelijk ziet dat je de homepage verlaat. Achter de titel zit een schaduw, om de titel goed zichtbaar te houden op iedere achtergrond.

Travelactive Ontwerpverslag, Bram Doppen

23


Contentmatrix In deze contentmatrix staan alle onderdelen die gebruikt zijn binnen de website.

INTENT OF VISUAL IS FOR....

COGNITION How does this help me understand?

DESIGN ELEMENTS color, typography, whitespace, balance

ICONIC ELEMENTS iconography, buttons, semiotics

CONTENT product images, content photos, maps

TEXTURE / DECORATION “gratuitous” non-content specific photos, wallpapers

24

Travelactive Ontwerpverslag, Bram Doppen

ASSOCIATION

AFFECT

What do I associate with this?

How does this make me feel?


Opdracht 2.9 Bronnenlijst

Bron 1: Analyserapport Bram en Suzanne Bron 2: http://www.iderealist.nl/design/stijl/26-kleurenpsychologie-blauw-op-je-website Bron 3: http://www.iderealist.nl/design/stijl/21-kleurenpsychologie-oranje-op-je-website Bron 4: http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/ Lettertype Droid Sans: https://www.google.com/fonts/specimen/Droid+Sans Reviewsterren: https://www.iconfinder.com/icons/172558/star_icon#size=128 Markers kaart: https://www.iconfinder.com/icons/103179/gps_location_map_marker_pin_icon#size=128 Kompas title: https://www.iconfinder.com/icons/284191/archive_circle_compass_safari_web_icon#size=128 Facebook logo: https://www.iconfinder.com/icons/107117/facebook_square_icon#size=128

Travelactive Ontwerpverslag, Bram Doppen

25


Travelactive ontwerprapport