1 Frontend design en development abonnementenwerving De Standaard Het Nieuwsblad Project aangeboden door STANLEY HEYDE voor het behalen van de graad v...
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 2013-2014 Stageplaats : Mediahuis (Groot-Bijgaarden) Stagementor : Koen Van den Broeck Stagebegeleider : Ann Deraedt
STANLEY HEYDE NEW MEDIA AND COMMUNICATION TECHNOLOGY
2013 – 2014
FRONTEND DESIGN EN DEVELOPMENT ABONNEMENTENWERVING De Standaard – Het Nieuwsblad
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.
Inhoudsopgave Woord vooraf Inhoudsopgave Lijst met figuren
4
Lijst met afkortingen
5
Verklarende woordenlijst
6
Inleiding
7
1
Activatieflow abonnementen De Standaard Avond
1.1 Definitie 1.2 Introductie Selligent Campaigner en Designer 1.2.1 Procesflow Campaigner 1.3 Briefing 1.4 Beschrijving procesflow 1.5 Validatie formulieren 1.5.1 Ondersteuning oudere browsers 1.5.2 Standaard HTML5 validatie 1.5.3 Contraint Validation API 1.5.4 Voorbeeld configuratie jQuery Validation 1.5.5 Vermijd verwarring en onzekerheid, zorg voor directe feedback 1.5.6 Types live validatie 1.5.7 Gebruik van attribuut type bij inputfields activatieflow 1.6 Workflow Selligent Campaigner + Designer 1.6.1 Overeenkomst value input parameters 1.6.2 Integratie newsletters subscription
2 Nieuwe aboshop het nieuwsblad
9 10 11 11 12 12 16 17 18 19 20 22 23 23 26 26 27
2.1 Introductie 2.2 User needs 2.3 Site objectives 2.4 Feature set / content requirements 2.5 Ideeën 2.6 Information Architecture 2.6.1 Abonnementen 2.7 Prototyping / wireframing 2.8 Design in Photoshop 2.8.1 Front aboshop met drie hoofdformules 2.8.2 Front aboshop vergelijking uitgevouwen 2.8.3 Detailpagina abonnement 2.8.4 Bestelwidget abonnement 2.8.5 Verschillende ontwerpen container front 2.9 Conclusie
29 30 30 31 31 31 32 32 32 33 33 33 34 34 35 36
Besluit
38
Referentielijst
39 3
Lijst met figuren
4
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
Lijst met afkortingen C CRM
Customer relationship management
CSS CTA CTR
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
Verklarende woordenlijst In het domein webdevelopment en bijhorend ook sales, worden veel vakgerelateerde termen gebruikt. Deze (technische) termen worden hieronder toegelicht. B backwards compatible C call to action
click-through rate
I impressions
interactive marketing unit
Compatibel met eerdere versie van hetzelfde programma
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.
R regressive enhancement Het emuleren van functionaliteiten in oudere browsers die enkel in recente browsers voorzien zijn door het toevoegen van een extra stuk code. run of site 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. I impressions
6
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.
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 e-mailadres. 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
1 ACTIVATIEFLOW ABONNEMENTEN DE STANDAARD AVOND
9
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 e-mailadres. 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 02 | leaderboard-banner
Figuur 01 | banner
verkiezingen in mobiele app
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. 10
Figuur 03 | sky-banner verkiezingscampagne
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.
1.2.1 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
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: www.nieuwsblad.be/activatie/start en www.nieuwsblad.be/activatie/reedstoegang • 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 e-mailadres moet invoeren (zie ). Wanneer de gebruiker op “Ga verder” klikt, wordt gecontroleerd of er reeds een account bestaat met dit e-mailadres 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 e-mailadres, 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, e-mailadres prefilled + nieuwsbrief opties (enkele diegene tonen die nog niet aangevinkt staan) • Geen registratie (zie ) = registratiepagina, e-mailadres prefilled + privacy + nieuwsbrief opties (alle nieuwsbrieven tonen)
12
[Check subscription] Wanneer alle gegevens van een gebruiker met een bepaald e-mailadres, 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 e-mailadres (van diezelfde persoon) dan opgegeven in het begin van de activatieflow, moet men het e-mailadres 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 e-mailadres. 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/790 21 13 (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 [e-mailadres]. 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 [e-mailadres]. 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/790 21 13 (Elke werkdag, tussen 10u en 17u).
13
Figuur 06 | schema
activatie abonnementen De Standaard Avond
Ik ben zesdaagse abonnee U leest reeds digitaal: klik op link en meld aan (wachtwoord vergeten? ) U leest nog niet digitaal: Vul hiervoor uw e-mailadres in.
Vul emailadres in
2 2
11 Check registratie op brandniveau
FULL
Registratiepagina Enkel e-mailadres prefilled + 2 privacy opties (niet tonen indien beide reeds aan stonden) + nieuwsbrief opties
Check op aanwezige activatie op ACCOUNTNIVEAU (binnen IDENTITEIT)
Aanwezig op e-mail Y
OK
“Uw digitale toegang is reeds gekoppeld aan dit e-mailadres. U kan digitaal lezen.”
Aanwezig Op e-mail X
6
Toegang tot digitale diensten “Uw digitale toegang is gekoppeld aan <e-mail Y>. Wenst u digitale toegang met dit e-mailadres? Klik hier. Wenst u uw digitale toegang te koppelen aan <e-mail X>? Klik hier.
Aanmelden (met e-mail Y) + Wachtwoord vergeten
E-mail Y
Niet aanwezig
Check abonnement op combinatie e-mail en naam/adres
“U kan enkel digitaal lezen met <e-mailadres Y> Contacteer Klantendienst
76 GEEN ABO
GEEN ABO
9 7
NEEN Check abonnement op combinatie e-mail en FAMILYID of persoon_ID
E-mail X
Koppeling gelukt?
JA
ABO gevonden We vonden geen abonnement op onderstaand adres. Op welk adres wordt uw krant geleverd? + veld voor invullen ordernummer
8 ABO gevonden
Volgend(e) abonnement(en) gevonden: Selecteer ABO
8
12 Is het abo reeds gekoppeld?
Check abonnement op leveringsadres of ordernummer
Koppel abonnement (niet zichtbaar voor klant)
NEEN
JA
9
10
Geen ABO gevonden
“We kunnen uw abonnement niet koppelen. Contacteer klantendienst”
14
Tonen op welke naam email adres het reeds gekoppeld is. (bv de partner) Niet akkoord? -> klantendienst bellen
11 10 NEEN
12
“U kan niet digitaal lezen met dit abonnement” (+ commercieel aanbod upsell P)
12
“U kan niet digitaal lezen met dit abonnement” (+ commercieel aanbod upsell PW)
14
“U kan niet digitaal lezen met dit abonnement” (+ commercieel aanbod)
14
“Uw abonnement is gekoppeld, zodra we de betaling ontvangen hebben, kan u digitaal lezen. Heeft u vragen? Contacteer klantendienst”
14
“Uw abonnement is gekoppeld, maar is momenteel onderbroken. Is dit niet correct? Contacteer klantendienst”
Heeft het abonnement een digitaal recht? (=check op welke groep het is)
11 13
1 = niet OK Geen 6-daags ABO
JA
Check op toegangsrecht
0 = OK
2 = niet OK Niet betaald
3 = niet OK vakantie
Uw abonnement is gekoppeld en u heeft toegang tot onze digitale diensten
Figuur 07 | Procesflow
Selligent Campaigner activatie abonnementen De Standaard Avond
3
Check Account
1
User List Component
2
Create Account
Update Account
4 5
Log aan
Reeds toegang
Check Subscription
OK
6
10 9
7
8 13 11 14
12 15
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
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 https://github.com/ 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
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.
1.5.2 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
18
HTML5 validatie in verschillende browsers
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 elementen te voorzien van attributen die de validatie constraints bepalen. Voorbeelden: • • • 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.
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", 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."
