Design Rationale – Project WEB 2018/2019
Student: Nasséra Grampon | Klas: 209 | Studentnummer: 500781703 | Docenten: Charley Muhren & Koop Reynders | Project: WEB 2018-2019
Inhoudsopgave Inleiding
Inleiding.......................................................................................... 3
User en Business Goals
User Goals...................................................................................... 4 Business Goals.............................................................................. 4
Stylesheet WOW air
Logo’s.............................................................................................. 5 Kleuren........................................................................................... 5 Typografie...................................................................................... 6 User interface icons...................................................................... 7
Visual Research van mijn verhaal
ClichĂŠ beeld................................................................................... 8 Kleur/vorm beeld.......................................................................... 8 Typografisch beeld....................................................................... 8 Verhaal........................................................................................... 9
Customer Journey
Customer Journey........................................................................ 10
User Scenario
User Scenario............................................................................... 11
Schermen
Wat wordt er besproken en getoond in dit document........... 14 Overzichtspagina......................................................................... 16 Filterpagina / meer verhalen...................................................... 18 Detailpagina verhaal: Droom..................................................... 20 Inlogscherm.................................................................................. 22 Account aanmaken...................................................................... 24
Micro interacties
Downloaden................................................................................. 26 Verhaal opslaan........................................................................... 27
Inleiding Beste lezer, Voor u bevindt zich het Design Rationale met betrekking over de gekozen opdrachtgever “WOW air” van project WEB. Veel gebruikers willen graag tijdens de reis verhalen kunnen lezen en downloaden op het moment dat de reizigers onderweg zijn naar hun bestemming. Hierbij heeft WOW-air een website ontwikkeld met 99 verschillende soorten verhalen. De 99 verhalen van WOW air worden weergegeven in een “responsive web”, dit heeft betrekking op dat het toegankelijk is voor verschillende devices waar de reizigers gebruik van maken zoals een smartphone, tablet & desktop. Per hoofdstuk komen er verschillende onderwerpen aan te pas hoe ik van onderzoek naar idee ontwikkeling tot aan het huidige concept en ontwerp ben gekomen. Pak uw spullen alvast in en vlieg gauw de volgende pagina’s!
3
User en Business Goals User Goals
• De gebruiker wilt een leuk verhaal kunnen vinden. • De gebruiker wilt aanbevolen en/of verrassende resultaten aangeboden krijgen. • De gebruiker wilt tijdens de reis verhalen kunnen lezen. • De gebruiker wilt input geven zodat anderen betere leuke verhalen kunnen vinden.
Business Goals
• Merkbeleving van de opdrachtgever versterken in de periode voor de reis. En de merkbeleving ook tijdens de reis vasthouden. De reisorganisatie wilt niet langer als een vervoerder bekend staan maar als een distributeur van ervaringen.
4
Stylesheet WOW air Logo’s
Het WOW air logo bestaat uit grootte letters met WOW afgebeeld. In de “O” van de logo’s (Afb 1 t/m 3) is er een vliegtuig in verwerkt. Vanuit het primaire logo (Afb. 1) zijn er twee andere variaties gemaakt voor verschillende media uitingen en doeleinde.
Primaire logo (Afb. 1)
Variatie logo (Afb. 2)
Variatie logo (Afb. 3)
Kleurenpalet:
WOW air maakt gebruik van een primaire en secundaire kleurenpalet op de website. Primaire kleuren:
#A2388D
#FFDF5D
#ffffff
#808080
#2b3940
Secunaire kleuren:
#c7c6c6
5
Typografie WOW air: WOW air gebruik van twee soorten typografie op hun website. Dat is (Afb. 4) Museo Sans 500 voor de titel tekst en voor de body tekst (Afb. 5) Helvetica Neue.
Titel – Museo Sans
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$%^&*()_+{}:”|<>? (Afb. 4)
Body tekst – Helvetica Neue
bcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$%^&*()_+{}:”|<>? (Afb. 5)
6
User interface icons: WOW air maakt gebruikt van â&#x20AC;&#x2DC;solidâ&#x20AC;&#x2122; iconen (Afb. 6). De vormen zijn vrij simpel.
(Afb. 6) Buttons:
De standaard kleur (Afb. 7) van de buttons om een actie uit te voeren. Als de gebruiker niks heeft ingevuld is de knop grijs van kleur (Afb 8)
(Afb. 7)
(Afb. 8)
Hover (tekst):
De gele kleur om de optie heen is de standaard kleur (Afb. 9), op het moment als de gebruiker er overheen gaat veranderd de kleur naar licht geel (Afb. 10).
(Afb. 9)
(Afb. 10)
Hover (formulier):
Voor dat de gebruiker het label (Afb. 11) selecteert is er geen paars randje om heen. Op het moment wanneer de gebruiker daar op klikt (Afb. 12) verschijnt er een paarse border om de focus hier te plaatsen voor de gebruiker.
(Afb. 11)
(Afb. 12)
7
Visual research
Cliché beeld: – Vrij
Mijn gevoel voor vrij komt terug in deze afbeelding met de dromenvanger, met name betrekking op de veren die onderaan een vrije beweging hebben. De veren hebben voornamelijk ook betrekking op, om je vrij door het leven te bewegen.
Kleur en vorm – Vrij
Ronde en gedraaide vormen keren terug in mijn verhaal. Blauwe tinten komen vaak terug in een kleur van vrij(heid). In mijn verhaal Tijdens mijn onderzoek heb ik veel naar objecten gekeken waarbij een vrij gevoel wordt uitgestraald.
Typografie – Vrij
Ik heb onderzoek naar verschillende typografische eenheden gezocht. De ronde vormen en de draaiende vormen in het typografisch beeld betekenen en staan voor mij in teken tot een vrij gevoel. De woorden en de letters komen en gaan van elkaar af en vervolgens weer naar elkaar toe.
8
Het verhaal Het verhaal is volledig vormgegeven in HTML en responsive voor mobiel, tablet en desktop.
Download:
Verhaal downloaden. (Blz. 26)
Opslaan:
Opslag functie om je verhaal terug te vinden. (Blz. 27)
Scrol functie - fade-in:
Scrollen om de tekst zichtbaar te maken tijdens het lezen. (Blz. 20-21)
9
Costumer Journey Touchpoints
Nena (24) is jonge studente die dol is op reizen. Vaak is ze op reis om telkens een klein stukje van de wereld om haar heen te ontdekken. Tijdens haar reis leest ze graag een boek in het vliegtuig of voor dat ze in het vliegtuig stapt. Maar ze wilt niet telkens een boek meesjouwen. Daarom heeft WOW air voor studenten zoals haar een website ontwikkeld waar ze online verhalen kan lezen en downloaden. Voor, tijdens en na haar reis.
10
Voo
Location
• Thuis: Zit achter de woonkamer. gebruik van i
Device
• Laptop: Maakt gebrui om te kijken onderweg wi vliegtuig.
Process
• Zoeken na Bekijkt de ve van WOW ai aantal verhal lezen tijdens
• Veel keuze Er zijn veel v beschikbaar.
Points of pain
• Sorteren, filte
Point of delight
Om het gema kan de ze so de website o downloaden.
Enthousiast tijdens h zoeken naar een leuk verhaal om te kunnen lezen en downloaden
or de reis
Tijdens de reis
Na de reis
laptop in de De laptop maakt internet en Wi-Fi.
• In de lucht: Zit in de cabine van het vliegtuig, er is geen Wi-Fi beschikbaar in de lucht.
• In het hotel: Rust uit na de reis en ligt op het bed. In het hotel is er Wi-Fi.
ik van haar laptop welk verhaal ze il lezen in het
• Smartphone: Maakt gebruik van een telefoon omdat dit het meest compacte aparaat is om bij je te houden.
• Smartphone Kijkt een filmpje of een video op haar mobiel. En zoekt een ander verhaal om te lezen op haar mobiel.
aar een verhaal: erhalen website ir en download een len om te kunnen de reis.
• Lezen: Ze leest een verhaal die ze heeft gedownload.
• Chillen: - Pakt haar spullen uit. - Ligt languit op het bed om bij te komen van de reis. - Zoekt een nieuw verhaal.
e: verhalen op de site .
• Geen internet: Door dat er ze in de lucht zweeft en geen internet beschikbaar is kan ze wel bij haar gedownloade verhalen komen.
• Slechte verbinding: Doordat er meerdere mensen in het hotel gebruik maken van de Wi-Fi is de verbinding iets slechter dan normaal.
eren & downloaden:
• Anders vermaken: Zonder Wi-Fi en Internet kun je je ook op een andere manier vermaken door met de crew te kletsen.
• Bestemming bereikt: Veilig aangekomen op de juiste bestemming.
akkelijker te maken orteren en filteren in om een verhaal te .
het k n n.
Verveling bij het lezen van de verhalen.
Tevreden als ze (eindelijk) op de bestemming is aangekomen.
4
11
User Scenario: Voor de reis
Dit is Jenny Munch. Jenny is een studente en eens in de zoveel tijd met de vliegmaatschappij WOW air om haar moeder in New York te bezoeken.
Op de WOW air website ziet Jenny vanaf haar desktop dat WOW air 99 verhalen-website promoot onder hun eigen naam. Jenny klikt op de link om naar de verhalen pagina te gaan.
Jenny is de we beetje aan het en verkennen e verhalen waar
Tijdens de reis:
Jenny klikt op de downloadknop om haar favoriete verhaal te downloaden die ze heeft bewaard. Het gedownloade verhaal wordt op haar smartphone opgeslagen.
12
Jenny stapt in Inmiddels is de vliegtuig van Jenny gearriveerd op Schiphol en neemt plaat gereserveerde Airport. de lucht zweef gedownloade v smartphone.
ebsite een analyseren en ziet leuke ze uit kiezen.
het vliegtuig ts in haar stoel. Als ze in ft leest ze het verhaal op haar
Tijdens de reis
Als Jenny een verhaal heeft gevonden klikt ze op de thumbnail van het verhaal. En vervolgens op het hartje om het verhaal op te slaan bij haar profiel.
Inmiddels staat Jenny op Schiphol Airport en wacht bij de gate om het vliegtuig in te gaan. Vlug pakt Jenny haar Smartphone en surft naar de verhalen website.
Na de reis:
In het hotel pakt ze haar tablet uit haar tas om een waardering en-/of een reactie te plaatsen bij het verhaal. Het probleem: De gebruiker wilt een mening geven over het verhaal en wil haar mening delen met anderen.
Jenny is blij omdat de reis sneller ging dan zij had verwacht.
5 13
Schermen / paginaâ&#x20AC;&#x2122;s De volgende schermen/paginaâ&#x20AC;&#x2122;s worden in dit document besproken:
Overzichtspagina
14
Filterpagina / meer verhalen
Detailp
pagina
Inloggen
Account aanmaken
15
Overzichtspagina Voor de schermen worden er een aantal hoeveelheden aan kolommen gebruikt vanwege de verschillende grootte van het scherm en voor de gebruiker om overzicht te behouden.
Smartphone > 30 em
Bij de smartphone is er een kolomweergave beschikbaar. De schermgrootte van de smartphone ligt tussen 30em.
16
Tablet > 50 em
Als het scherm breder wordt en 50em heeft bereikt komen er twee kolommen naast elkaar te staan.
Desktop > 60 em
Het desktop formaat beschikt over een grootte van 60em. Hierbij veranderd de indeling van een twee kolom weergave naar een drie kolomweergave. Hier is overzichtelijker voor de gebruiker.
User Goals:
De gebruiker wilt aanbevolen en/of verrassende resultaten aangeboden krijgen, op de overzicht scherm. De gebruiker komt direct op de pagina met de “populaire” verhalen. Hierbij kan de gebruiker direct zien welke verhalen “trending zijn”.
17
Filterpagina /meer verhalen Op deze pagina kan de gebruiker op verschillende verhalen filteren en andere vehalen bekijken.
Smartphone > 30 em
Op de filterpagina van de smartphone staan alle verhalen netjes onder elkaar. Bovenin kan de gebruiker zijn of haar verhaal zoeken op Populariteit, alfabetisch, datum, meeste waardering en op verrassing. Ook kan de gebruiker verhalen filteren op het aantal lees minuten, taalgebruik en genres.
18
Tablet > 50 em
Als het scherm breder blijft de filter opties bovenaan de pagina het zelfde. (Zie boekje Filterpagina op mijn profielpagina hoe ik het wilde hebben).
Desktop > 60 em
Als het scherm breder blijft de filter opties bovenaan de pagina het zelfde. (Zie boekje Filterpagina op mijn profielpagina hoe ik het wilde hebben).
User Goals:
De gebruiker wilt een leuk verhaal kunnen vinden, via deze filterlijst kan de gebruiker de categorieĂŤn selecteren dat voor hem of haar relevant is. De gebruiker wilt aanbevolen en/of verrassende resultaten aangeboden krijgen, op de overzichtsscherm.
19
Detailpagina – Verhaal: Droom Tone of voice:
In het verhaal zijn er een aantal woorden extra benadrukt om daar de focus De stijl waarin het verhaal is vorm gegeven heeft betrekking die ik vanuit mijn onderzoek heb herleid.
Responsive verhaal:
Het verhaal is volleige responsive en past zich aan naar mobiel, tablet en desktop formaat. De teksten zijn op alle devices het zelfde, alleen de titel veranderd van positie wanneer het verhaal wordt gelezen op een tablet of desktop formaat.
Interactie in het verhaal:
De interactie die voorkomt in het verhaal is wanneer de gebruiker naar beneden scrollt, schuift de tekst (langzaam) omhoog. Dit brengt een fijn, vrij en rustig gevoel over op de lezer zodat de gebruiker meer wordt genomen in het verhaal. Dit heb ik zodanig ontworpen omdat mijn sfeerwoord “vrij” is en het scrollen van de tekst een vrij gevoel kan evenaren bij de gebruiker.
Smartphone > 30 em Bij de smartphone is de tekst meer zichtbaar voor de gebruiker.
20
Tablet > 50 em
Op de tablet is er een stukje van het verhaal te zien. Op het moment dat de gebruiker naar benden scrollt wordt er een stukje bij stukje van het verhaal getoond aan de gebruiker.
Desktop > 60 em
Via de desktop is er nog minder van de tekst te zien zodat de gebruiker meer kan genieten van het scroll effect die bij de interactie hoort. Ook staat de tekst meer gecentreerd in het midden en is er meer witruimte beschikbaar om de tekst heen.
21
Inlogscherm Inloggen:
Als de gebruiker een account heeft (aangemaakt) kan de gebruiker inloggen op de verhalen pagina van WOW air. Via deze optie heeft de gebruiker de kans om zijn of haar verhalen direct terug te vinden op zijn eigen profiel.
Smartphone > 30 em
De titel â&#x20AC;&#x153;Inloggenâ&#x20AC;? staat bovenaan de pagina en staat in paarse letters aangegeven, zodat de gebruiker direct ziet dat hij/zij op het inlog scherm is. De witruimte aan de zijkanten zijn er om de inlog-elementen duidelijk te laten overkomen.
22
Tablet > 50 em
Als het scherm breder wordt schuiven de elementen meer naar het midden toe, en is er omheen veel witruimte heen om de focus te behouden op de onderdelen waar de gebruiker informatie moet invullen
Desktop > 60 em
Het desktop formaat verschijnt er meer witruimte om de elementen heen om nog steeds de focus op het inloggen te behouden. Verder is er een button aanwezig dat de focalpoint is van het scherm. Dit is een belangrijk element omdat de gebruiker hier na het invullen van zijn/haar gegevens op moet gaan klikken. Alle teksten (behalve in de inlog-knop) staan linkslijnend om het uit te wijken van de andere informaties.
23
Account aanmaken Profiel / account aanmaken:
De gebruiker kan op de website een profiel aanmaken als hij/zij geen account heeft. Na dat de gebruiker zijn account heeft aangemaakt keert de gebruiker direct naar zijn profiel pagina om daar zijn gedownloade verhalen te zien en/of terug te vinden na de reis
Smartphone > 30 em
Ook op het scherm om een account aan te maken, staat de titel bovenaan de pagina in paarse letters aangegeven. De witruimte aan de zijkanten zijn er om de inlog-elementen duidelijk te laten overkomen.
24
Tablet > 50 em
Als het scherm breder wordt schuiven de elementen meer naar het midden toe, en is er omheen veel witruimte heen om de focus te behouden op de onderdelen waar de gebruiker informatie kan invullen
Desktop > 60 em
Het desktop formaat verschijnt er meer witruimte om de elementen heen om nog steeds de focus op het inloggen te behouden. Verder is er een button aanwezig dat de focalpoint is van het scherm. Dit is een belangrijk element omdat de gebruiker hier na het invullen van zijn/haar gegevens op moet gaan klikken. Alle teksten (behalve in de inlog-knop) staan linkslijnend om het uit te wijken van de andere informaties.
25
Micro interactie - Downloaden Downloaden:
Om het voor de gebruiker makkelijk te maken, kan hij/zij zijn verhaal downloaden en deze terug vinden.
Fase 1:
De gebruiker ziet een leuk verhaal op de homepagina.
Fase 3:
Na de interactie komt er een melding in de header te staan, zodat de gebruiker ziet dat zijn verhaal is gedownload naar zijn profiel
26
Fase 2:
Als de gebruiker op de knop klik of met zijn muis overheen gaat en klikt veranderd de kleur naar donker paars.
Micro interactie - Verhaal opslaan Opslaan
De gebruiker kan het verhaal opslaan op zijn profiel om deze terug te vinden. Deze knop is alleen zichtbaar op de detailpagina van het verhaal.
Fase 1:
Fase 2:
Fase 3:
Fase 4:
De gebruiker heeft een verhaal gevonden en wilt deze opslaan. De knop “opslaan” is hier grijs van kleur.
De gebruiker krijgt een pop-up melding dat zijn/haar verhaal is opgeslagen in zijn of haar profiel.
Omdat de gebruiker dit ver verhaal later wilt terug vinden klikt de gebruiker op “opslaan” de button krijgt een gele focus kleur.
Als de gebruiker de melding wilt afsluiten klikt de gebruiker vervolgens weer op “sluiten”. En veranderd de kleur naar geel.
27
Thank you for flying with
Created by: NassĂŠra Grampon | Klas: 209 | For Project: WEB 2018-2019