C1D Ontwerp verslag Twan van Beusekom

Transcriptie

1 C1D Ontwerp verslag Twan van Beusekom

2 2.1 Conceptbeschrijving Basisidee: Het basisidee is om een overzichtelijke website te maken waar studenten informatie kunnen vinden over vrijwilligerswerk / stage in het buitenland. Bij deze website hoort een blog of mogelijkheid voor mensen om hun verhalen / feedback te delen met mede studenten. Door alle informatie kort en bondig neer te zetten wil ik studenten overhalen om het hele verhaal te lezen, studenten zijn snel geneigd de tekst te scannen maar door de teksten kort en bondig te houden met een optie om meer informatie te lezen kun je de studenten snel de informatie bieden waar ze naar opzoek zijn. Doel: Meer bezoekers voor het Bureau zonder een cent op zak. Het achterliggende doel is studenten met een zeker en veilig gevoel op reis sturen maar dat kan alleen als het Bureau zonder een cent op zak de aandacht en de bezoekers aantallen krijgt. Inhoud: Ik vind het belangrijk dat afbeeldingen de ruimte krijgen om een verhaal te vertellen, ik heb er dan ook voorgekozen om een grote afbeelding te tonen met daaronder een grote zoekbalk waar mensen direct getriggerd worden om iets in te vullen. In de schetsen hierbij gevoegd is te zien hoe ik het voor me zie en hoe ik het graag zou maken tot een uiteindelijke site. Vorm: De indeling is te zien op de afbeeldingen die zijn bijgevoegd en op de mockup s. Fotografie moet voorzich spreken, geen plastic of emotieloze foto s maar echte foto s van echte mensen met echte verhalen erachter.

3

4 2.2 Inspiratie Om beeldmateriaal te vinden dat past bij het idee dat ik voor ogen heb ben ik opzoek gegaan naar een passende term. De term waar ik naar opzoek was moest rust uit stralen, het moest een afbeelding zijn waar je even de tijd voorneemt om er naar te kijken en het door te laten dringen dat je daar zelf ook naar toe kan gaan. Het woord passend bij mijn idee is: Idyllisch, het betekend landelijk, vreedzaam, droomachtig het zijn afbeeldingen die een land vanuit de kern laten zien. Denk bijvoorbeeld aan een mooie foto van de nederlandse molens in de ochtend zon. Deze foto s ben ik gaan zoeken en staan ook op mijn pinterest bord, dit pinterest bord zal gedurende het hele proces blijven groeien en bestaat uit een breed aantal foto s die iets totaal verschillends uitbeelden of uitstralen maar op de een of andere manier wel de kern van mijn concept raken.

5 2.3 Scenario Begin van de dag: Het is half 7 als de wekker van joop gaat, een uurtje later zit hij in de trein met school als eindbestemming. Het is een lange project dag en de dag loopt niet zoals hij wil. Twee groepsgenoten komen niet opdagen en zijn werk belt over een spoedgeval met het interne netwerk waar hij afgelopen zaterdag onderhoud aan heeft uitgevoerd, ook dat nog.. Na het oplossen van het probleem op zijn werk en de drukke project dag is joop om half 7 weer thuis beland, zijn moeder helpt hem nog herinneren dat als hij naar het buitenland wil voor stage hij toch echt eens wat moet gaan uitzoeken, hij zucht even en denkt oja helemaal vergeten ga ik straks gelijk doen. S avonds: Eenmaal uitgegeten en klaar met het opruimen legt ie zijn tas naast ze bed en start ie zijn pc op. Even de laatste feeds bekijken en even op dumpert wat filmpjes kijken en dan toch echt even wat over stage zoeken. Hij typt in op google gericht stage engeland, hij ziet de site van Bureau zonder een cent op zak. Hij heeft geen zin om lang te zoeken naar informatie en het valt hem op dat er een grote zoek balk op de website staat: Waar wil je heen? Hij typt in Engeland en ziet een aantal steden verschijnen. Hij had nog niet na gedacht over een specifieke stad waar hij heen wil maar London lijkt hem wel wat, hij spreekt de taal en hij heeft al aardig wat ervaring in bedrijven door klussen die hij buiten school om heeft gedaan. Hij klikt op London en er verschijnen een aantal blokken met foto s over reisverhalen en een tekst over London, al snel afgeleid klikt scrollt hij verder. Hij denkt allemaal leuk en aardig maar hoeveel kost dit geintje, hij ziet een link belangrijke informatie staan en klikt erop. Resultaat: Hij komt gelijk op een pagina met informatie over verzekeringen, de stad en de kosten. Mooi denkt hij en noteert het een en ander op een papiertje. Tevreden bookmarked hij de website en loopt naar beneden om het aan zijn moeder te laten zien.

6 2.4 Testen scenario Vragen na aanleiding van scenario: 1. Wat als joop niets intypt maar alleen kort de tekst doorleest? 2. Snapt joop wat jij wil overbrengen met de layout of mist er informatie? 3. Is de header foto wat joop zoekt of is dit een afknapper? 4. Joop heeft zelf geen twitter en facebook maar hoe kan hij toch snel in contact komen? 5. Wat als joop naar een stad wil die er niet bij staat? Aanpassingen ontwerp na aanleiding vragen: Na aanleiding van bovenstaande vragen heb ik de wireframes er opnieuw bijgepakt, ik ben gaan kijken hoe ik het nog persoonlijker voor de gebruiker kan maken. Punt 1: Ik heb de zoek balk in de header verwerkt, deze lopen nu mooi in elkaar over waardoor het voor de gebruiker duidelijk word dat dit de snelste manier is om bij de gewenste informatie te komen. Punt 2: Ik heb twitter niet meer in een zijbalk verwerkt maar onderaan de content pagina in een footer, bij deze footer staan ook een X aantal links naar andere pagina s waar de gebruiker direct de gewenste informatie kan vinden. Punt 3: De header foto zal gaan rouleren tussen een aantal landen zodat de gebruiker terwijl hij of zij de homepagina tekst leest al gelijk een aantal indrukken krijgt van wat het bureau heeft te bieden. Punt 4: Doormiddel van een klein, kort maar krachtig contact formulier in de footer is het voor mensen zonder twitter/facebook ook mogelijk om snel in contact te komen met het bureau. Punt 5: Ik ga de landen categoriseren in wereld delen, de verdeling word dan steden in landen en landen in wereld delen op deze manier kan ik een aantal alternatieve steden of landen laten zien aan een gebruiker als zijn of haar zoek opdracht er niet bij staat.

7 2.5 Cardsorting

8 2.7 Flowchart / wireframes Home Voorpagina, Begin pagina, Homepage etc. Het begin van de website moet duidelijk zijn voor de gebruiker, ik heb ingezet op een grote afbeelding. De afbeelding is de lokker hier hou je de aandacht van de gebruiker / bezoeker, twitter aan de linker kant en een tekst met een groot invoer veld in het midden. Het invoerveld is het hart van de homepage en vanuit hier kan de gebruiker zich navigeren door de hele website, hierstaat standaard ingevoerd: Waar wil je heen? Responsive / Mobiel Voor mobiel heb ik gekozen voor een facebook style menu dat open klapt en weer dicht klapt, op deze manier hou je de website overzichtelijk zonder te veel linkjes onder elkaar te plaatsen.

9 Vervolg pagina, 1e klik Nadat de gebruiker één keer heeft geklikt zal deze op een pagina uit komen die er zo uit ziet, in dit geval gaan we we ervanuit dat de gebruiker in het invoer veld op de homepage London heeft ingevuld. Vervolg pagina De vier blokken zijn allemaal links naar reisverhalen / blogs. Dit kunnen zowel filmpjes als gewone afbeeldingen zijn, bij een mouseover komt er een tekst te voorschijn met de onderwerp regel van dit reisverhaal. Boven de blokken staat een breadcrumb pad, dit houd bij welke pagina s je hebt doorlopen om op deze pagina te komen: Europa > Engeland > London. Door op een van deze te klikken kun je dus ook weer terug navigeren. Responsive / Mobiel De blokken vertalen zich ook mooi naar een mobiele layout die wel vaker word gebruikt, bijv. windows 8. Indien de gebruiker naar beneden scrollt zal deze de tekst uit het tekst vak zien met helemaal onderaan nog wat linkjes naar reisverhalen enz. Onderaan het tekst vak staan links naar nuttige informatie, interessante plekken van de stad of het land dat je hebt aangeklikt en de reisverhalen.

10 Blog pagina Een van de eisen van de website is het integreren van een blog, op deze pagina is te zien hoe dit zich vertaald in een ontwerp. Blog pagina Ook hier weer grote blokken, dit springt kwa ontwerp mooi er uit en geeft gelijk een persoonlijke look and feel mee aan de pagina. Op de achtergrond van het blok zie je een sfeer foto van het land of de stad waarover het reisverhaal gaat met hieroverheen een profielfoto indien aanwezig. Als de gebruiker zijn muis beweegt over de foto zal er een kleine tekst tevoorschijn komen met hierin de onderwerp regel van het blog en de eerste 2-3 regels. Onder de blokken komt een tekst te staan over hoe de gebruiker zelf kan gaan bloggen en rechts van deze tekst staan handige links / FAQ. Responsive / Mobiel Het meest bekeken blok kan door een vinger beweging naar links of naar rechts worden verschoven in een ander reis verhaal. Door naar beneden te scrollen komt de gebruiker bij de tekst met hier een uitleg over hoe de gebruiker zelf kan bloggen op de website.

11 Flowchart Hierboven is mijn flow chart te zien. Evenwijdig aan de homepagina staat het blog, omdat het blog buiten de website valt en ook bereikbaar is zonder op de homepagina te komen heb ik deze ernaast uitgetekend. Vanaf de homepagina is het mogelijk om naar de informatie pagina te gaan, de wereld kaart of de contact pagina. Op de homepagina is ook de zoekfunctie aanwezig, vanaf deze zoekfunctie is het mogelijk om direct naar een stad of land te gaan. Vanaf een stad of land is het mogelijk om verder te klikken naar meer informatie of naar een reisverhaal. Vanaf de blog pagina is het mogelijk om in te loggen, de meest bekeken verhalen te zien / lezen of zelf zoeken naar een blog. Vanaf de pagina meest bekeken blogs is het ook mogelijk om naar de pagina alle blogs te gaan, hier komen de blogs op overzichtelijke manier onderelkaar te staan.

12 2.8 Ontwerp uitingen Homepagina

13 Vervolgpagina

14 Blog overzicht