Frontend design en development abonnementenwerving

Transcriptie

1 Frontend design en development abonnementenwerving De Standaard Het Nieuwsblad Project aangeboden door STANLEY HEYDE voor het behalen van de graad van Bachelor in de New Media and Communication Technology Academiejaar Stageplaats : Mediahuis (Groot-Bijgaarden) Stagementor : Koen Van den Broeck Stagebegeleider : Ann Deraedt

2

3 FRONTEND DESIGN EN DEVELOPMENT ABONNEMENTENWERVING De Standaard Het Nieuwsblad STANLEY HEYDE NEW MEDIA AND COMMUNICATION TECHNOLOGY

4 Woord vooraf Graag maak ik hier van de gelegenheid gebruik om enkele personen te bedanken. Eerst en vooral wil ik mijn stagementor Koen Van den Broeck bedanken voor de kans die ik gekregen heb om mijn stage te lopen bij Mediahuis, voorheen Corelio. Door de joint venture met Concentra was het een drukke periode en heb ik niet enkel voor Het Nieuwsblad en De Standaard werk afgeleverd, maar ook voor Het Belang van Limburg en Gazet van Antwerpen. Daarnaast wil ik de webmasters van de webshop- en de salesafdeling, respectievelijk Joris Docx en Sam Vanfleteren bedanken voor de ondersteuning op technisch vlak. Ten slotte wil ik ook nog mijn stagebegeleider Ann Deraedt bedanken voor de feedback die ik van haar kreeg.

5 Inhoudsopgave Woord vooraf Inhoudsopgave Lijst met figuren 4 Lijst met afkortingen 5 Verklarende woordenlijst 6 Inleiding 7 1 Activatieflow abonnementen De Standaard Avond Definitie Introductie Selligent Campaigner en Designer Procesflow Campaigner Briefing Beschrijving procesflow Validatie formulieren Ondersteuning oudere browsers Standaard HTML5 validatie Contraint Validation API Voorbeeld configuratie jquery Validation Vermijd verwarring en onzekerheid, zorg voor directe feedback Types live validatie Gebruik van attribuut type bij inputfields activatieflow Workflow Selligent Campaigner + Designer Overeenkomst value input parameters Integratie newsletters subscription 27 2 Nieuwe aboshop het nieuwsblad Introductie User needs Site objectives Feature set / content requirements Ideeën Information Architecture Abonnementen Prototyping / wireframing Design in Photoshop Front aboshop met drie hoofdformules Front aboshop vergelijking uitgevouwen Detailpagina abonnement Bestelwidget abonnement Verschillende ontwerpen container front Conclusie 36 Besluit 38 Referentielijst 39 3

6 Lijst met figuren Figuur 01 banner verkiezingen in mobiele app 10 Figuur 02 leaderboard-banner verkiezingscampagne 10 Figuur 03 sky-banner verkiezingscampagne 10 Figuur 04 Facebook post iphone-campagne op fanpagina De Standaard 11 Figuur 05 Banner iphone-campagne op Humo website 11 Figuur 06 schema activatie abonnementen De Standaard Avond 14 Figuur 07 Procesflow Selligent Campaigner activatie abonnementen De Standaard Avond 15 Figuur 08 inputfield invalid en valid formulier 16 Figuur 09 inputfield met placeholder + inputfield type date 17 Figuur 10 Stijl HTML5 validatie in verschillende browsers 18 Figuur 11 Validity object Constraint Validation API 19 Figuur 12 Validatie wachtwoord a.d.h.v. meerdere criteria. 22 Figuur 13 screenshot inputfield activatieflow en responsive toetsenbord op iphone 23 Figuur 14 browser support input type date 24 Figuur 15 screenshot datepicker (activatieflow op iphone) 24 Figuur 16 screenshot cijfer-toetsenbord bij inputfield gsm (activatieflow op iphone) 25 Figuur 17 SOAP-service activatieflow 26 Figuur 18 SOAP-service properties activatieflow 26 Figuur 19 verwerking nieuwsbrieven in Campaigner (manier 1) 27 Figuur 20 verwerking nieuwsbrieven in Campaigner (manier 2) 27 Figuur 21 SOAP-service properties nieuwsbrieven in Campaigner (manier 2) 27 Figuur 22 huidige aboshop Het Nieuwsblad 30 Figuur 23 verzameling screenshots iconen 31 Figuur 24 wireframe nieuwe aboshop Het Nieuwsblad 32 Figuur 25 design Photoshop front nieuwe aboshop Het Nieuwsblad 33 Figuur 26 design Photoshop front uitgevouwen nieuwe aboshop Het Nieuwsblad 33 Figuur 27 design Photoshop detailpagina abonnement 34 Figuur 28 design Photoshop bestelwidget abonnement 34 Figuur 29 design Photoshop containers abonnementen 35 4

7 Lijst met afkortingen C CRM CSS CTA CTR Customer relationship management Cascading Style Sheets call to action click-through rate D DOM Document Object Model H HTTP Hypertext Transfer Protocol I IMU Interactive Marketing Unit R Regex ROS Regular expression run of site S SOAP Simple Object Access Protocol U URL Uniform Resource Locator 5

8 Verklarende woordenlijst In het domein webdevelopment en bijhorend ook sales, worden veel vakgerelateerde termen gebruikt. Deze (technische) termen worden hieronder toegelicht. B backwards compatible Compatibel met eerdere versie van hetzelfde programma C call to action click-through rate I impressions interactive marketing unit R regressive enhancement run of site I impressions Een call to action of letterlijk vertaald, oproep tot actie, moet de gebruiker aanzetten een bepaalde actie te ondernemen. Mogelijke actie's zijn: bestellen van een product of nieuw abonnement. De click-through rate is de verhouding tussen het aantal clicks die gebeurd zijn op een banner en het aantal keer die banner getoond werd op de site. Dit laatste noemt men het aantal impressies. De click-through rate wordt uitgedrukt als een percentage. Het totaal aantal keer dat een banner is verschenen op de website. De banners die getoond worden aan een gebruiker zijn niet noodzakelijk bij iedere gebruiker hetzelfde. Enkel de banners die echt zichtbaar zijn, worden meegeteld. Banners die zich op een pagina bevinden, maar niet zichtbaar zijn doordat ze lager op de pagina staan worden niet meegeteld. Afhankelijk van het aantal boekingen en impressions die moeten behaald worden, kunnen sommige banners meer verschijnen dan andere. Term die wordt gebruikt voor een bepaald type formaat van banner. Meestal vierkant formaat (250px x 300px). De IMU wordt ook wel Medium Rectangle genoemd. Het emuleren van functionaliteiten in oudere browsers die enkel in recente browsers voorzien zijn door het toevoegen van een extra stuk code. Deze term definieert de locatie van banners op een site. Run of site betekent dat de banners op alle pagina's van een website kunnen verschijnen. Voor eenzelfde campagne worden verschillende formaten van banners aangemaakt. Afhankelijk van de vrije ruimte wordt automatisch het meest geschikte formaat gekozen. Het totaal aantal keer dat een banner is verschenen op de website. De banners die getoond worden aan een gebruiker zijn niet noodzakelijk bij iedere gebruiker hetzelfde. Afhankelijk van het aantal boekingen en impressions die moeten behaald worden, kunnen sommige banners meer verschijnen dan andere. 6

9 Inleiding Abonnementenwerving kan op veel verschillende manieren gebeuren: speciale campagnes die worden bedacht afhankelijk van gebeurtenissen tijdens het jaar zoals de verkiezingen, Moederdag en het WK. Er zijn ook losstaande campagnes zoals de iphonecampagne. Bijhorend moeten ook banners ontworpen worden die in veel verschillende formaten moeten worden aangemaakt. Het was mijn verantwoordelijkheid om naast het alledaagse werk zoals het ontwerpen en publiceren van banners, de front-end van de abonnementenshops (Het Nieuwsblad en De Standaard) te optimaliseren. Voor De Standaard waren de aanpassingen minder opvallend, daar deze shop op het vlak van design hetzelfde bleef, maar voor Het Nieuwsblad werd beslist om een volledig nieuwe aboshop te ontwikkelen. De eerste meeting over de nieuwe aboshop werd pas begin mei gehouden. De periode hiervoor heb ik voornamelijk gewerkt aan de activatieflow voor digitale abonnementen. Deze activatieflow koppelt een digitaal abonnement aan een bepaald adres. De basisflow was reeds opgezet. Alle pagina s met automatisch gegenereerde content moesten worden omgezet in bruikbare en ook goed ogende webpagina s. Veel vooraf gedefinieerde HTML-elementen waren semantisch niet correct gebruikt. Vooral het valideren van de verschillende formulieren is niet te onderschatten. De validatie moet werken op alle major browsers. Er moet ook rekening gehouden worden met het feit dat alle pagina s op smartphone moeten kunnen worden weergegeven. De site is volledig responsive, er is geen mobiele versie van de sites nodig. De focus in het eerste hoofdstuk ligt vooral op het verbeteren van de usability tijdens het invullen van het formulier met de nodige aandacht om ook future-proof en mobile friendly te ontwikkelen. Problemen die opdoken tijdens het ontwikkelen van deze pagina s worden ook toegelicht. Het tweede hoofdstuk gaat over de nieuwe aboshop voor Het Nieuwsblad. Dit hoofdstuk is slechts het begin van een proces dat veel meer tijd in beslag neemt dan beschikbaar was. De requirements en ideeën van de salesafdeling worden hierin toegelicht. Voorafgaand de wireframes en Photoshop designs aangemaakt werden, werd gebrainstormd over nieuwe technieken en huidige trends in design. 7

10

11 1 ACTIVATIEFLOW ABONNEMENTEN DE STANDAARD AVOND 9

12 1.1 Definitie Het aanwerven van nieuwe abonnementen op De Standaard is dé prioriteit van de salesafdeling van Mediahuis. Regelmatig worden nieuwe marketingcampagnes uitgewerkt die gericht zijn op speciale gebeurtenissen of verschillende thema s gedurende het jaar. Op die manier wordt de interesse gewekt bij potentiële nieuwe klanten. De verkiezingen zijn een perfecte aangelegenheid om een nieuwe campagne op te zetten. Bij de vorige campagne werd de iphone in combinatie met een abonnementsformule aangeboden. De activatieflow maakt deel uit van een uitgebreide marketingcampagne die zowel in de online als offline media op het zelfde moment gelanceerd wordt. De activatieflow is het onderdeel waarbij gebruikers zich registreren of aanmelden om daarna een digitaal abonnement te koppelen aan hun adres. De advertising van de campagne bestaat uit advertenties in de krant, mailings, banners in de mobiele app en run of site (ROS) banners op de website van De Standaard. Run of site banners zijn banners die kunnen verschijnen op alle pagina s van De Standaard. Omdat er dus geen specifieke locatie gericht aan een bepaald doelpubliek voorzien is, kan deze methode in sommige gevallen minder effectief zijn. De verschillende run of site banners worden allemaal gepubliceerd via de advertising management tool Adhese. Adhese wordt door veel Belgische mediabedrijven gebruikt om hun advertising te beheren. Met behulp van Adhese kan worden bijgehouden welke banners de hoogste click-through rate (CTR) behalen. De click-through rate is de verhouding tussen het aantal clicks die behaald zijn op een banner en het aantal keer die banner getoond werd op de site. Dit laatste noemt men de impressions. De click-through rate wordt uitgedrukt als een percentage. Meestal is de click-through rate lager dan 1%. Figuur 01 banner verkiezingen in mobiele app Figuur 02 leaderboard-banner verkiezingscampagne Bij De Standaard en Het Nieuwsblad worden bij iedere campagne drie standaard formaten gebruikt. Wide skyscraper (160x600), leaderboard (995x123) en IMU (250x300). De sky staat rechts gepositioneerd naast de content van de site, de leaderboard staat bovenaan de pagina en neemt de volledige breedte in, de IMU staat op vrije ruimtes tussen andere content van de site. Op basis van de resultaten blijkt dat bepaalde formaten beter scoren dan andere. Bij de verkiezingscampagne scoort de leaderboard-banner het best, gevolgd door de sky-banner. Deze resultaten mogen echter niet worden veralgemeend. Tussen de verschillende titels zoals Gazet Van Antwerpen of Het Nieuwsblad zijn soms andere formaten populairder. Ook gebeurt het dat bij eenzelfde titel, maar in een andere campagne de clickthrough rate van een bepaalde banner een verschillend resultaat oplevert. Figuur 03 sky-banner verkiezingscampagne 10

13 De communicatie rond de campagne gebeurt niet enkel intern maar ook extern. Bij de iphone-campagne werd de Facebookpagina ingezet en werden banners aangeleverd op 3th party sites Kinepolis en Humo. Figuur 04 Facebook post iphone-campagne op fanpagina De Standaard Figuur 05 Banner iphone-campagne op Humo website 1.2 Introductie Selligent Campaigner en Designer De activatie van nieuwe abonnementen wordt volledig gestuurd door een procesflow in Selligent Campaigner. Dit programma maakt deel uit van het softwarepakket Selligent Interactive Marketing. Het is een CRM-systeem (Customer relationship management) dat deels Belgisch is, want Selligent heeft de interactieve marketingtool Messagent (ontwikkeld door Optizen) in 2008 overgenomen. Mediahuis maakt onder andere gebruik van Selligent voor het versturen van mailings en het publiceren van landingspagina s. Een groot voordeel van het gebruik van deze CRM-software is dat men een beter inzicht krijgt hoe de gebruiker reageert op bepaalde elementen. Zo is het mogelijk om van eenzelfde mail verschillende versies te versturen. Bijvoorbeeld een mail waarbij het onderwerp lichtjes anders geformuleerd is, of een CTA-button in een verschillend kleur staat Procesflow Campaigner De flow bepaald welke acties uitgevoerd worden en welke pagina s getoond moeten worden. Verschillende parameters bepalen hoe de gebruiker de flow zal doorlopen. Opdat een abonnement zou kunnen worden geactiveerd, moeten alle gegevens van de gebruiker correct zijn ingevuld in de interne database. Het kan gaan over ontbrekende of verouderde informatie. Wat ook mogelijk is, is dat een gebruiker een digitaal abonnement probeert te activeren terwijl die helemaal geen recht hiervoor heeft, omdat hij/zij nog geen actief abonnement heeft op De Standaard. De pagina s waarnaar wordt verwezen in Selligent Campaigner worden aangemaakt in Selligent Designer. Het is mogelijk om HTML te schrijven in de source view van een pagina, maar het is niet aangeraden. De code editor beschikt namelijk niet over enige vorm van intellisense en is zeer omslachtig in gebruik. Daarom worden de pagina s steeds opgemaakt in Adobe Dreamweaver, waarna de code wordt gekopieerd naar de Designer. In de Designer kunnen de properties van een afzonderlijke pagina worden aangepast. Hierin kan de inhoud van een HTML header worden gedefinieerd. De titel van een webpagina, metatags, CSS imports en gekoppelde JavaScript bestanden kunnen op die manier makkelijk worden toegevoegd. Wanneer die pagina in de browser wordt geopend, wordt het duidelijk dat de HTML in de pagina van de Designer nu in de body tag geplaatst is. 11

14 1.3 Briefing In de briefing van dit project stonden enkele vereisten: Look & feel stijl van de algemene registratiepagina en e-loket Iedere pagina voorzien van een URL waar gemakkelijk naartoe kan worden gesurft. Bijvoorbeeld: en Overal waar een wachtwoord moet worden ingevuld, de mogelijkheid bieden om als gebruiker de optie wachtwoord vergeten aan te klikken. Op elke pagina het blokje met de informatie van de klantendienst toevoegen. Verder stond in de briefing ook gedefinieerd welke inhoud per pagina moest komen, aangevuld met alle call to action (CTA) elementen. De activatieflow bestaat in totaal uit vijftien HTML-pagina s. In de briefing stond ook het schema van de procesflow, dit vindt u terug op pagina 14. Later werd dit schema met behulp van Selligent Campaigner uitgewerkt. De verschillende stappen zijn dus ook in grote lijnen terug te vinden in de uitgewerkte flow in de Campaigner (zie pagina 15). 1.4 Beschrijving procesflow De eerste stap die uitgevoerd wordt bij het starten van de flow is het ophalen van alle gebruikers uit de database. Hiervoor wordt een user list component gebruikt waarin een database table kan worden gekozen. Dan wordt een pagina getoond waarbij de gebruiker een adres moet invoeren (zie ). Wanneer de gebruiker op Ga verder klikt, wordt gecontroleerd of er reeds een account bestaat met dit adres op brand niveau. Indien wel, wordt gecontroleerd of de registratie van de gebruiker compleet is. Als dat niet het geval is, wordt een pagina weergegeven waarbij de gebruiker zijn gegevens kan updaten of aanvullen (zie ). Wanneer alle gegevens compleet zijn, is [Check Subscription] de volgende stap. Indien er nog geen account bestaat met het opgegeven adres, wordt doorverwezen naar de pagina [Create Account] (zie ). Op deze pagina moet een zelfgekozen wachtwoord opgegeven worden en contact- en adresgegevens. Het verschil in verwerking tussen beide type registraties: Light (zie ) = registratiepagina, adres prefilled + nieuwsbrief opties (enkele diegene tonen die nog niet aangevinkt staan) Geen registratie (zie ) = registratiepagina, adres prefilled + privacy + nieuwsbrief opties (alle nieuwsbrieven tonen) 12

15 [Check subscription] Wanneer alle gegevens van een gebruiker met een bepaald adres, gekoppeld aan een account wel volledig zijn, wordt een andere check gedaan. Dan wordt gecontroleerd of er reeds een abonnement actief staat op dit account (zie ). Indien wel, wordt een pagina getoond die meldt dat de gebruiker reeds toegang heeft en gewoon hoeft in te loggen (zie ). Indien de digitale toegang gekoppeld is aan een ander adres (van diezelfde persoon) dan opgegeven in het begin van de activatieflow, moet men het adres bevestigen waarmee men verder wil gaan (zie ). Indien niet, krijgt de gebruiker de mogelijkheid om zijn ordernummer dat hij heeft ontvangen op de bevestigings- of hernieuwingsbrief in te vullen. Indien hij dit niet bij de hand heeft kunnen de adresgegevens ook worden ingevuld (zie ). Indien een abonnement gevonden werd, moet de gebruiker zijn abonnement kiezen dat hij wenst te koppelen aan het eerder opgegeven adres. Wanneer een abonnement wordt gekoppeld, worden de toegangsrechten gecontroleerd. In het andere geval, wordt een pagina getoond waarop staat om de klantendienst te contacteren (zie ). Bij het controleren van de toegangsrechten zijn er vier mogelijke opties: 1. Geen digitale toegang inbegrepen in het huidige abonnement (=weekendabonnement). Men krijgt dan een pagina te zien (zie 12) waarop staat wat het abonnement De Standaard Weekend inhoudt. Ook worden de andere abonnementsformules die wel digitale toegang hebben voorgesteld. 2. Geen digitale toegang omdat men geen 6-daags abonnement heeft. Men krijgt dan volgende boodschap te zien (zie 14): U kunt niet digitaal lezen met het door u gekozen abonnement. Hebt u toch interesse in De Standaard Digitaal? Neem telefonisch contact op met onze klantendienst op het nummer 02/ (Elke werkdag, tussen 10u en 17u). 3. Digitale toegang abonnement gekoppeld, maar betaling nog niet in orde. Men krijgt dan volgende boodschap te zien (zie 14): Uw digitale toegang van uw papieren abonnement is gekoppeld aan [ adres]. We hebben echter vastgesteld dat de betaling van uw abonnement nog niet in orde is. U kunt De Standaard Digitaal lezen van zodra uw betaling in orde is. 4. Digitale toegang abonnement gekoppeld, maar abonnement momenteel onderbroken. Men krijgt dan volgende boodschap te zien (zie 14): Uw digitale toegang van uw papieren abonnement is gekoppeld aan [ adres]. We hebben echter vastgesteld dat uw abonnement momenteel onderbroken is. Tijdens deze periode hebt u geen toegang tot De Standaard Digitaal. Is dit niet correct? Neem telefonisch contact op met onze klantendienst op het nummer 02/ (Elke werkdag, tussen 10u en 17u). 13

16 Ik ben zesdaagse abonnee U leest reeds digitaal: klik op link en meld aan (wachtwoord vergeten? ) U leest nog niet digitaal: Vul hiervoor uw adres in. Figuur 06 schema activatie abonnementen De Standaard Avond Aanmelden + Wachtwoord vergeten FULL 1 Vul e- mailadres in Check registratie op brandniveau LIGHT/MEDIUM GEEN REGISTRATIE Registratiepagina Enkel adres prefilled + 2 privacy opties (niet tonen indien beide reeds aan stonden) + nieuwsbrief opties Registratiepagina Enkel adres prefilled + 2 privacy opties + nieuwsbrief opties 4 Check op aanwezige activatie op ACCOUNTNIVEAU (binnen IDENTITEIT) Aanwezig Op X Aanwezig op Y 5 6 Uw digitale toegang is reeds gekoppeld aan dit adres. U kan digitaal lezen. Uw digitale toegang is gekoppeld aan < Y>. Wenst u digitale toegang met dit adres? Klik hier. Wenst u uw digitale toegang te koppelen aan < X>? Klik hier. Y Aanmelden (met Y) + Wachtwoord vergeten Toegang tot digitale diensten OK 97 GEEN ABO We vonden geen abonnement op onderstaand adres. Op welk adres wordt uw krant geleverd? + veld voor invullen ordernummer Check abonnement op leveringsadres of ordernummer Geen ABO gevonden We kunnen uw abonnement niet koppelen. Contacteer klantendienst Niet aanwezig Check abonnement op combinatie en naam/adres ABO gevonden GEEN ABO Check abonnement op combinatie en FAMILYID of persoon_id ABO gevonden Volgend(e) abonnement(en) gevonden: Selecteer ABO Is het abo reeds gekoppeld? JA Tonen op welke naam adres het reeds gekoppeld is. (bv de partner) Niet akkoord? -> klantendienst bellen U kan niet digitaal lezen met dit abonnement (+ commercieel aanbod upsell P) U kan niet digitaal lezen met dit abonnement (+ commercieel aanbod upsell PW) X Koppeling gelukt? NEEN JA NEEN NEEN U kan enkel digitaal lezen met < adres Y> Contacteer Klantendienst 12 Koppel abonnement (niet zichtbaar voor klant) 10 Heeft het abonnement een digitaal recht? (=check op welke groep het is) JA Check op toegangsrecht 14 U kan niet digitaal lezen met dit abonnement (+ commercieel aanbod) 1 = niet OK Geen 6-daags ABO 0 = OK Uw abonnement is gekoppeld, zodra we de betaling ontvangen hebben, kan u digitaal lezen. Heeft u vragen? Contacteer klantendienst Uw abonnement is gekoppeld, maar is momenteel onderbroken. Is dit niet correct? Contacteer klantendienst 2 = niet OK Niet betaald 3 = niet OK vakantie Uw abonnement is gekoppeld en u heeft toegang tot onze digitale diensten

17 Figuur 07 Procesflow Selligent Campaigner activatie abonnementen De Standaard Avond Check Account 3 Create Account User List Component 1 2 Update Account 5 Reeds toegang 4 Check Subscription Log aan OK

18 1.5 Validatie formulieren Bijna de volledige activatieflow steunt op het gebruik van formulieren om gegevens van de gebruiker op te vragen. Het is dan ook belangrijk dat de correcte informatie wordt doorgegeven. Daarom is er validatie voorzien op ieder veld. De validatie van al deze velden gebeurde in oudere flows pas wanneer de gebruiker op Ga verder klikte (de submit actie van het formulier). Toen verschenen bovenaan de pagina alle foutmeldingen. Voor de gebruiker is dit zeer vervelend, hij moet het volledige formulier overlopen om waar nodig correcties uit te voeren. Een betere oplossing om frustraties bij de gebruiker te minimaliseren is het gebruiken van inline validatie of live validatie. Iedere incorrecte invoer van de gebruiker kan zo per veld worden gecontroleerd en voorzien worden van een toepasselijke foutmelding. Figuur 08 inputfield invalid en valid formulier Zoals reeds eerder aangegeven ontbreekt live validatie bij de bestaande activatieflows. In die flows wordt enkel gebruik gemaakt van de jquery Validation Plugin bij het submitten van het form. Door het gebruik van jquery Validation, kunnen heel wat zaken worden gecontroleerd met een minimum aan code. Toch is de jquery Validation Plugin niet altijd voldoende uitgebreid en kan het gedrag van de validatie niet worden gepersonaliseerd. Bijvoorbeeld bij het invullen van een telefoonnummer bestaande uit negen cijfers: wanneer negen cijfers worden ingevuld, is het veld valid, maar bij het gebruik van jquery Validation zal het inputfield pas valid gemarkeerd worden wanneer het inputfield zijn focus verliest (onblur) en niet op het moment dat er negen cijfers in het inputfield staan. Verschillende usability tests hebben uitgewezen dat feedback over foutieve gegevens in velden het best wordt weergegeven net nadat de gebruiker het veld heeft ingevuld. Het gebruik van live validatie dient enkel om de usability te verhogen. Je moet ook nog altijd server-side validatie voorzien. De bestaande forms hadden nog geen enkele HTML5 implementatie. Ze waren opgebouwd uit tabellen en cellen en maakten zelfs nog geen gebruik van labels. Een eerste stap in dit vernieuwingsproces, was het omzetten van de bestaande forms naar HTML5 forms, voorzien van de juiste attributen afhankelijk van het inputtype. Tijdens het omzetten zijn de twee attributen name en value wel identiek overgenomen. Deze zijn noodzakelijk omdat ze door Selligent worden gebruikt tijdens het doorlopen van de flow. Wat jquery Validation niet doet, is het valideren van velden op basis van het attribuut type die is opgegeven in de input tag. Maar door gebruik te maken van HTML5 is deze behoefte ingevuld. De constraint validation API verzorgt de native client-side validatie. Deze API kan aangesproken worden om te bepalen of velden al dan niet valid zijn. Om de validity na te gaan, wordt beroep gedaan op een algoritme in de browser die de opgegeven attributen van een inputfield (de parameters die gecontroleerd moeten worden) vergelijkt met de door de gebruiker ingegeven waarde. 16

19 1.5.1 Ondersteuning oudere browsers Browsers die de constraint validation API niet ondersteunen, hebben een alternatief nodig. Op vele websites en forums wordt aangeraden om polyfilling toe te passen. Polyfills worden gebruikt om HTML5 features die niet ondersteund worden in oudere browsers op te vangen door een workaround te voorzien met behulp van wat extra JavaScript code. Dit wordt ook regressive enhancement genoemd. Polyfill kan zeer letterlijk worden vertaald: het invullen (fill) van niet ondersteunde functionaliteiten door gebruik te maken van verschillende technieken (poly). Polyfills zorgen ervoor dat de meest recente technologie kan worden gebruikt voor de recentste browsers en deze ook kan geëmuleerd worden in oudere browsers door het toevoegen van een extra stuk code. Deze manier van ontwikkelen is future-proof. Wanneer gebruikers overschakelen naar een browser die de technologie wel ondersteund, zal de overgang naadloos verlopen omdat de functionaliteiten onveranderd zijn, enkel de werking in de achtergrond is verschillend. Alle in aanmerking komende polyfills zijn getest geweest op bruikbaarheid voor dit specifieke doel. Een volledige lijst van polyfills is beschikbaar op Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills. Enkele voorbeelden zijn: H5F, formvalidation.js, h5validate... Na grondig testen is gebleken dat deze polyfills niet aan de noden voldoen. Ofwel ontbreekt er de mogelijkheid om extra zaken in te stellen of is er teveel aanpassingswerk vereist. Ook zouden webshims kunnen gebruikt worden. Deze webshims bevatten meerdere polyfills die ondersteuning bieden voor HTML5 forms en de constraint validation API. Omdat bij elke polyfill wel iets ontbrak of niet naar wens functioneerde, werd een andere voor de hand liggende oplossing gekozen. Omdat er nu reeds gebruik gemaakt wordt van jquery Validation, kunnen browsers die de constraint validation API niet ondersteunen steeds hierop terugvallen. Door het gebruik van Modernizr is het heel eenvoudig om te detecteren of bepaalde features beschikbaar zijn in een browser. Omdat sommige features een echte meerwaarde bieden aan een formulier, zijn er ook enkele andere polyfills toegevoegd om de nieuwe HTML5 implementaties te voorzien in oudere browsers. Voorbeelden hiervan zijn de placeholder van een inputfield en het inputtype date. Figuur 09 inputfield met placeholder + inputfield type date 17

20 De Contraint Validation API en de jquery Validation Plugin worden gebruikt om de user experience te verbeteren. Deze validatie kan omzeild worden waardoor server side validation het invoeren van foutieve gegevens zal verhinderen Standaard HTML5 validatie Indien een veld niet valid is, wordt automatisch een foutboodschap getoond. In principe is de validatie van het formulier hiermee afgerond. Echter is dit helemaal niet zo. De standaard HTML5 validatie wordt niet gebruikt en dat heeft zijn redenen. Elke browser bepaalt zelf de stijl waarin foutboodschappen worden weergegeven. Maar, de huisstijl van een merk/titel is heel belangrijk. Wanneer De Standaard er op iedere browser iets anders uitziet, doordat iedere foutboodschap op een andere manier wordt weergegeven, resulteert dit in een minder sterke uitstraling van de identiteit. Hierdoor wordt ook een omgeving gecreëerd waarin de gebruikers minder vertrouwd zijn. Dat is net hetgeen wat moet worden vermeden. Het aanpassen van de visuele weergave van de foutboodschappen is slechts heel beperkt mogelijk met CSS en wordt tot op heden niet door alle browsers ondersteund. Enkel in de WebKit browsers (Chrome en Safari) zijn er beperkte aanpassingen mogelijk aan de weergave van de foutboodschap. Met behulp van de methode setcustomvalidity kan een eigen validationmessage worden ingesteld voor een element. Deze methode dient enkel om plain tekst mee te geven, het invoeren van HTML wordt niet ondersteund. Als de setcustomvalidity() methode wordt gebruikt, is dit veld automatisch invalid. Uitgezonderd wanneer een lege string wordt meegegeven is dit veld wel valid. De methode kan gebruikt worden om velden te valideren die afwijkend zijn een standaard constraint. Een voorbeeld van custom validatie bij het veld straat: enkel wanneer de gebruiker een straat selecteert uit de voorgestelde lijst (die verschijnt wanneer de gebruiker minimum één letter invoert), wordt het veld als valid gemarkeerd. Om in alle browsers eenzelfde stijl te verkrijgen, zal een andere manier gekozen moeten worden. Hieronder ziet u een voorbeeld van de standaard validatie ballons bij een HTML5 formulier in de verschillende browsers. Figuur 10 Stijl HTML5 validatie in verschillende browsers 18

21 1.5.3 Contraint Validation API Deze API voegt aan de valideerbare nodes van het Document Object Model (DOM) verschillende properties toe. Dit omvat alle elementen die kunnen gesubmit worden. Het is van belang om de <input> elementen te voorzien van attributen die de validatie constraints bepalen. Voorbeelden: <input type= date required /> <input type= /> <input type= password pattern=.{6}.* maxlength= 16 required /> Omdat de tegenhanger van het attribuut maxlength niet bestaat en het paswoord ook een minimum lengte moet hebben, biedt pattern een oplossing. Een regular expression bepaalt hier dat er minimum 6 tekens moeten zijn. Properties: willvalidate: geeft true terug indien het element gebruik kan maken van de constraint validation, false indien niet. validity: deze property is een object dat bestaat uit een aantal boolean properties die de ValidityState van een element bepaalt. De ValidityState verklaart waarom een element niet valid is: customerror: indien true, is via de methode setcustomvalidity() een zelfgekozen foutboodschap opgegeven. patternmismatch: controleert waarde aan de hand van het pattern attribuut. rangeoverflow/rangeunderflow: waarde is groter/kleiner dan min/max attribuut. stepmismatch: value voldoet niet aan opgegeven step attribuut. toolong: de maxlength is overschreden. typemismatch: de structuur van de waarde voldoet niet aan het opgegeven inputtype. valuemissing: een required attribuut is opgegeven, maar er is geen value ingevuld. valid: alle voorgaande properties zijn voldaan, waardoor het element valid is. Figuur 11 Validity object Constraint Validation API 19

22 1.5.4 Voorbeeld configuratie jquery Validation C:\Users\Stanley\Dropbox\Mediahuis\1_projecten\#...\201403_activatie\js\config\jquery validation03.js 1 $(document).ready(function () { $.validator.addmethod('cityvalid', function () { return cityselected; }); $.validator.addmethod('streetvalid', function () { return streetselected; }); $("form").validate({ rules: { PW: { required: true, minlength: 6, maxlength: 16 }, PW2: { equalto: '#pswd1' }, geslacht: "required", naam: "required", voornaam: "required", birth_date: { required: true, date: true, minlength: 10, maxlength: 10 }, telefoon: { number: true, minlength: 9, maxlength: 9 }, gsm: { number: true, minlength: 10, maxlength: 10 }, zip_code: { required: true, number: true, minlength: 4, maxlength: 4 }, city: { cityvalid: { depends:!cityselected } }, street: { streetvalid: { depends:!streetselected } }, huisnr: "required", }, In het object rules staan alle velden die gevalideerd worden. Die worden opgeroepen met het name attribuut. Beide wachtwoorden moeten identiek zijn. Formaat van in te geven datum is: dd/mm/jjjj Lengte is daarom 10 tekens. Dit is een custom validatie regel. Op die manier reageert de validatie hetzelfde als bij de Constraint Validation API, namelijk dat de stad/gemeente enkel valid is wanneer die geselecteerd werd uit de voorgestelde lijst. Wanneer een stad geselecteerd wordt uit de autocomplete lijst in het formulier, wordt de variabele cityselected=true. Wanneer de gebruiker de input wijzigt, wordt cityselected=false gezet, waardoor foutieve gegevens omtrent adresgegevens worden uitgesloten. messages: { PW: { required: "Gelieve een geldig wachtwoord in te vullen.", minlength: "Gelieve een geldig wachtwoord in te vullen." }, PW2: { required: "Gelieve uw wachtwoord opnieuw in te vullen.", equalto: "Dit wachtwoord komt niet overeen." }, geslacht: "Gelieve uw geslacht aan te duiden.", naam: "Gelieve uw naam in te vullen.", voornaam: "Gelieve uw voornaam in te vullen.", birth_date: "Gelieve uw geboortedatum in te vullen.<span>vb. 17/03/1978</span>", telefoon: "Gelieve een geldig telefoonnummer in te vullen.", gsm: "Gelieve een geldig gsm nummer in te vullen.", zip_code: "Gelieve uw postcode in te vullen.", city: "Gelieve uw gemeente te selecteren uit de lijst.", street: "Gelieve uw straat te selecteren uit de lijst.", huisnr: "Gelieve uw huisnummer in te vullen." 20

23 C:\Users\Stanley\Dropbox\Mediahuis\1_projecten\#...\201403_activatie\js\config\jquery validation03.js 2 }); }, Class die wordt toegevoegd aan het <label> element die errorclass: "input invalid", errorplacement: function (error, element) { de foutboodschap bevat. error.appendto(element.parent().children(".field validation")); }, Locatie van de foutboodschap. $(".inputfield:not(.required)").keyup(function (e) Deze { methode verwijdert de groene checkmarks die removevalidiconoptionalfields($(this)); overbodig zijn bij optionele velden die leeg zijn. Als een }); veld niet required is, en het form wordt gesubmit, zal dit veld als valid worden gemarkeerd. Bijgevolg wordt door de css declaratie een checkmark toegevoegd. Een extra class die wordt toegevoegd via de methode zal de checkmark opnieuw onzichtbaar maken $(".inputfield").bind("mouseup", function (e) { if (e.target.value!== "") { settimeout(function () { if (e.target.value === "") { //input cleared var $idelement = e.target.id; }); } } }, 1); In Internet Explorer kan de input gewist worden met behulp van het kruisje X. Hiervoor bestaat geen specifiek $("form").validate().element("#" + event. $idelement); Daarom vangen we het mouseup event op. Indien var el = $(e.target); de waarde geen lege string is, controleren we 1 seconde if (!el.hasclass("required")) { later of de waarde wel een lege string is. Indien ja, removevalidiconoptionalfields(el); } if ($idelement === "city") { cityselected = false; streetselected = false; $("#zip_code").val(""); if (cityinit) { $("form").validate().element("#zip_code"); } } if ($idelement === "street") { streetselected = false; } $("#zip_code").change(function () { $("form").validate().element("#zip_code"); }); $("#city").change(function () { if (selectedcity!== $(this).val()) { cityselected = false; } $("form").validate().element("#city"); }); $("#city").keyup(function () { if (selectedcity!== $(this).val()) { if (cityselected) { cityselected = false; streetselected = false; $("#zip_code").val(""); }); } $("#street").change(function () { if (selectedstreet!== $(this).val()) { streetselected = false; } $("form").validate().element("#street"); }); $("#street").keyup(function () { betekent dit dat de input gecleared werd. Op basis hiervan kan worden bepaald om het veld handmatig opnieuw te valideren. De stad/gemeente wordt geselecteerd uit de lijst. Wanneer het keyup event wordt afgevuurd kan dit betekenen dat de gebruiker de input wijzigt. Dit hoeft niet noodzakelijk het geval te zijn, daar er ook toetsen zijn die de input niet beïnvloeden, zoals de pijltjestoetsen. $("form").validate().element("#city"); } Daarom wordt gekeken of de huidige waarde nog steeds overeenkomt met de laatst geselecteerde waarde. Dit is if (cityinit) { een stuk eenvoudiger dan bij het keyup event alle toetsen $("form").validate().element("#zip_code"); uit sluiten die de input niet kunnen beïnvloeden. } 21

24 1.5.5 Vermijd verwarring en onzekerheid, zorg voor directe feedback Het valideren van een formulier terwijl de gebruiker dit invult biedt een aangenamere ervaring. Vroeger kwam het vaker voor dat een formulier volledig ingevuld werd en bij het submitten als ongeldig beschouwd werd doordat een of meerdere velden niet correct waren ingevuld. Dit leidde soms tot vervelende situaties. Een voorbeeld hiervan is een formulier waarbij meerdere velden incorrect zijn en boven het formulier een boodschap verschijnt dat niet alle velden correct zijn. De gebruiker moet dan zelf op zoek gaan naar de verkeerde velden en opnieuw het formulier proberen te verzenden. De gebruiker raakt hierdoor sneller gedemotiveerd. Maar het kan nog erger: een volledig ingevuld formulier wordt verstuurd, maar omdat het formulier niet valid is, wordt het formulier leeggemaakt en stuurt de server een antwoord terug dat niet alle velden correct waren ingevuld. Het telkens opnieuw corrigeren van gegevens en het klikken op verzenden tot uiteindelijk een succesvolle poging bekomen werd, heet pogosticking. Dit is werkelijk de gebruiker pesten. Wanneer velden aan bepaalde eisen moeten voldoen (zoals een wachtwoord met minimum 6 tekens) is het beter dit te vermelden in de directe omgeving van het inputveld of een pop-up te laten verschijnen wanneer de focus op een bepaald veld staat. Zo kan info die bestaat uit meerdere regels toch worden weergegeven, maar verstoort het niet de vormgeving van het invulformulier. Wanneer echter meerdere voorwaarden worden opgelegd in verband met het kiezen van een wachtwoord, is het tonen van een lijstje met alle criteria een betere oplossing. Naarmate het wachtwoord wordt ingevuld, worden de criteria aangevinkt indien hieraan voldaan werd. Hieronder een voorbeeld: Figuur 12 Validatie wachtwoord a.d.h.v. meerdere criteria. Ook het voorzien van placeholders met voorbeelddata helpt de gebruiker bij het invullen van een formulier. 22

25 1.5.6 Types live validatie Validatie tijdens het invullen van een veld (onkeydown) Dit is behoorlijk vervelend en vertraagt de snelheid waarmee de gebruiker gegevens invoert. Bijvoorbeeld: een inputveld voor een naam. Op dit veld staat een constraint voor een minimale lengte van drie karakters. Wanneer de gebruiker een eerste letter intypt, krijgt hij onmiddellijk een error message te zien, omdat hij slechts een teken heeft ingevoerd in plaats van drie. Elke keer dat de gebruiker een letter intypt, wacht de gebruiker om de volgende letter in te typen totdat hij ziet wat er met het getoonde error message gebeurt. Het is ook onaangenaam om als gebruiker een error message te zien verschijnen nadat je slechts een letter hebt getypt. Validatie nadat het veld volledig is ingevuld (onblur) Uit onderzoek met behulp van eye-tracking is gebleken dat dit de beste methode is. Een veld wordt ingevuld, men gaat naar het volgende veld en indien iets niet correct was met het vorige, wordt onmiddellijk een error message getoond. In het formulier van de activatieflow werd ook een extra feature toegevoegd: wanneer de velden nog niet geïnitialiseerd zijn, kunnen die nog niet worden gevalideerd. Ter verduidelijking: wanneer iemand bijvoorbeeld een formulier overloopt met de tab-toets en geen gegevens invoert, zijn de velden nog niet geïnitialiseerd. Echter wanneer een wijziging gebeurt in een veld, wordt dit veld gemarkeerd als geïnitialiseerd en wordt wel validatie toegepast op dit veld. Deze extra feature is enkel van toepassing op de live-validatie tijdens het invullen van het formulier. Wanneer de gebruiker op submit klikt, worden wel alle velden gevalideerd, onafhankelijk of deze al dan niet geïnitialiseerd zijn Gebruik van attribuut type bij inputfields activatieflow Het nadeel van het gebruik type= is dat verschillende browsers de validatie hiervan op een verschillende manier implementeren. Bij Chrome moet het adres volgend formaat hebben: In Internet Explorer volstaat Door het toevoegen van een regex (regular expression) via het pattern attribuut, is de validatie in alle browsers gelijk. Het attribuut type= zorgt voor een aangepast toetsenbord op mobile devices. Het toetsenbord is responsive naargelang het type input. Merk op dat en de punt standaard niet worden getoond. Voor het pattern werd onderstaande expressie gebruikt: \w+([-+. \t]* Figuur 13 screenshot inputfield activatieflow en responsive toetsenbord op iphone 23

26 Datum Het gebruik van het input type= date heeft ook zijn voordelen. Momenteel ondersteunen reeds heel wat browsers deze feature. Browsers die het nog niet ondersteunen zullen het type date negeren en het inputfield weergeven zoals het standaard inputfield, namelijk type= text. Het levert dus geen problemen op en is backwards compatible. Browsers die wel ondersteuning bieden zullen een native datepicker weergeven, ook de mobile devices. Figuur 14 browser support input type date Met behulp van Modernizr kan worden nagegaan of het input type= date wordt ondersteund. Indien het niet wordt ondersteund, kan nog steeds worden gekozen om de datepicker van jquery UI of een andere implementatie te gebruiken. In het geval van de activatieflow werd gekozen om het inputfield te voorzien van een mask indien type= date niet ondersteund wordt. Hiervoor wordt de jquery mask plugin gebruikt. Door het toepassen van de methode.mask( 99/99/9999 ) op het inputfield, is ook in dit geval gewaarborgd dat het correcte formaat voor de datum gebruikt wordt. Figuur 15 screenshot datepicker (activatieflow op iphone) Een bijkomend voordeel bij het gebruik van de native datepickers van de browsers: in het min en/of max attribuut van dit inputfield, kan ook een datum worden opgegeven. Het gebruik van het max attribuut kan op die manier voorkomen dat gebruikers een geboortedatum kunnen ingeven die in de toekomst ligt. Er is echter ook een belangrijke opmerking omtrent het gebruik van de datepicker: het formaat van de datum die getoond wordt, is niet noodzakelijk de value die wordt doorgegeven aan de server. De browser bepaalt hoe de datum zal worden weergegeven afhankelijk van de lokale regio- en taalinstellingen van het besturingssysteem. In de activatieflow wordt het formaat dd/mm/jjjj gebruikt. Doordat de datum dat naar de server verstuurd werd in het formaat jjjj-mm-dd stond, resulteerde dit in een internal server error 500. De oorzaak van deze error was moeilijk te achterhalen omdat de value met het incorrecte formaat verborgen is tijdens het invullen van het formulier. De oplossing hiervoor is relatief simpel: wanneer het form gesubmit wordt, de ingevoerde waarde ophalen en het formaat hiervan aanpassen en deze nieuwe waarde in een hidden field bijhouden. Uiteraard moet de attribuut name van het hidden field hetzelfde zijn als dat van het oorspronkelijke inputfield. Daar het oorspronkelijke inputfield niet meer wordt gebruikt om de value door te geven aan de server, moet zijn name attribuut verschillend zijn van het hidden inputfield. 24

27 Telefoonnummer Omdat wereldwijd veel verschillende formaten van telefoonnummers bestaan, zorgt het toevoegen van het type= tel niet voor enige vorm van validatie. Wel wordt het toetsenbord op mobile devices aangepast in overeenstemming met het type= tel. Omdat het formaat van dit veld zo verschillend kan zijn, wordt aangeraden om ook te werken met het pattern attribuut. Volgend pattern werd gebruikt voor telefoonnummers: [0-9]{9}. Deze regex betekent dat exact 9 keer een cijfer mag voorkomen van 0 tot en met 9. Figuur 16 screenshot cijfer-toetsenbord bij inputfield gsm (activatieflow op iphone) 25

28 1.6 Workflow Selligent Campaigner + Designer Overeenkomst value input parameters In de procesflow in de Campaigner, zijn de pagina s die gegevens naar de server moeten sturen verbonden met een HTTP- of een SOAP-service. Figuur 17 SOAP-service activatieflow In de properties van deze SOAP-service staat de URL gedefinieerd van de webservice die gebruikt moet worden. De value van een input parameter moet overeenkomen met het attribuut name van een inputfield op de pagina in de Designer. Figuur 18 SOAP-service properties activatieflow Wanneer values worden geïnjecteerd via de flow, wordt de value van de input parameter gebruikt in het attribuut value van het inputfield. De notatie hiervan is iets verschillend, omdat Selligent anders niet kan weten dat er een value moeten worden geïnjecteerd. De eerste pagina die men te zien krijgt wanneer de flow wordt opgestart, is een form met enkel een inputfield voor een adres. Wanneer men op Ga verder klikt komt men terecht op een bepaalde pagina. Indien er nog geen account bestaat met het ingegeven adres, komt men terecht op de pagina CreateAccount. Door value= ~@MAIL~ toe te voegen aan het inputfield met het adres, zal de value automatisch worden ingevuld. 26

29 1.6.2 Integratie newsletters subscription Bij het aanmaken of updaten van een account, worden de subscripties van een gebruiker op newsletters telkens bijgewerkt. De huidige instellingen zullen dan overschreven worden. Er zijn twee manieren waarop de verwerking van deze nieuwsbrieven kan gebeuren: 1. Voor elke nieuwsbrief een decision-blokje. Figuur 19 verwerking nieuwsbrieven in Campaigner (manier 1) In elk decision-blokje staat een rule definition: = 1 Dit verwijst naar onderstaan inputfield: <input name= SERV_AC_DS_WEEKEND_MIX type= checkbox /> Indien de checkbox gechecked is, wat overeenkomt met 1, zal het juiste SOAP-blokje worden uitgevoerd die de waarde true meegeeft met deze nieuwsbrief. Op die manier worden de andere nieuwsbrieven in serie verder verwerkt. Echter crashte het programma Selligent Campaigner door de omslachtige structuur van deze flow. Er moesten echter nog nieuwsbrieven worden toegevoegd, wat het verder werken op deze manier onmogelijk maakte. 2. Via JavaScript een string die de waardes true/false van de nieuwsbrieven bijhoudt. Figuur 20 verwerking nieuwsbrieven in Campaigner (manier 2) Bovenstaande SOAP-blokje vervangt alle componenten die gebruikt werden in manier 1. Een groot aantal nieuwsbrieven kan worden toegevoegd zonder de flow te belasten. In plaats van per SOAP-blokje true/false mee te geven per nieuwsbrief, koppelen we alle nieuwsbrieven aan 1 SOAP-blokje. De gegenereerde string met de waardes true/false die zich in een hidden field bevinden, wordt dan opgehaald. Figuur 21 SOAP-service properties nieuwsbrieven in Campaigner (manier 2) <input type= hidden name= newsletters value= true false false false true false false false false false false false /> 27

30

31 2 NIEUWE ABOSHOP HET NIEUWSBLAD 29

32 2.1 Introductie Het vernieuwen van de aboshop (=shop waar men kan intekenen op abonnementen) behoort ook tot de taken van de webmaster van de salesafdeling. Tijdens het jaar worden continu verbeteringen aangebracht door A/B testing te gebruiken waaruit blijkt wat de beste conversie oplevert. A/B testing maakt het mogelijk om aan een deel van de gebruikers versie A van de aboshop te tonen en aan een ander deel versie B. Dit kan gaan om kleine verschillen zoals een CTA-button in een verschillend kleur of een groter font... Figuur 22 huidige aboshop Het Nieuwsblad 2.2 User needs Wat wenst de gebruiker en wat heeft hij zeker nodig? In welke context zal hij het gebruiken en hoe kan die context gemapt worden met de motivaties en mogelijkheden van de gebruiker? Op basis van geobserveerd gedrag zijn behoeften vertalen in design. De huidige aboshop maakt het onmogelijk om de verschillende abonnementsformules te vergelijken. Dit is een van de zaken die geïntegreerd moet worden in de nieuwe aboshop. 30

33 2.3 Site objectives Meer gebruik maken van iconen. (ook de mogelijke betaalmiddelen) Figuur 23 verzameling screenshots iconen Tijdelijke aanbiedingen integreren in de aboshop in plaats van een losstaande leaderboard-banner te gebruiken. Meest gekozen aanduiding gebruiken bij abonnement. Testing met Optimizely. 2.4 Feature set / content requirements Winkelmandje Feedbackknop Soort melding Positief/negatief Rating 2.5 Ideeën Werken met een winkelmandje (heeft enkel nut indien men van hieruit reminders verstuurd. Reservatie-aftelklok voor tijdelijke aanbiedingen gebruiken. Welke formule past het best bij mij? (Een configurator die met behulp van een vragenlijst de juiste formule aanbiedt). Grote headervisuals zoals bij Telenet en Mobistar. 31

34 2.6 Information Architecture Abonnementen Combi 6 daags betaalformules: gespreid + 12 maanden + 3 maanden + 1maand Zaterdag + Digitaal betaalformules: 12 maanden + 3 maanden Papier Weekend betaalformules: 12 maanden + 3 maanden 60+ betaalformule: 12 maanden Digitaal betaalformules: gespreid + 12 maanden + 3 maanden + 1maand 2.7 Prototyping / wireframing Wireframes zijn schetsen die aantonen hoe het geraamte van de site er zal uitzien. Waar welke inhoud zal komen, de verschillende elementen die de gebruiker helpen om een bepaalde actie uit te voeren en de navigatie wordt hierop duidelijk. Meestal start men te schetsen op papier, waarna men gespecialiseerde tools gebruikt (zoals Balsamiq of Axure) om dieper hierop in te gaan. Interactiviteit tussen de verschillende elementen kan door het gebruik van deze tools ook gevisualiseerd worden. Figuur 24 wireframe nieuwe aboshop Het Nieuwsblad 32

35 2.8 Design in Photoshop Front aboshop met drie hoofdformules Figuur 25 design Photoshop front nieuwe aboshop Het Nieuwsblad Front aboshop vergelijking uitgevouwen Figuur 26 design Photoshop front uitgevouwen nieuwe aboshop Het Nieuwsblad 33