Frontend design en development abonnementenwerving

Maat: px
Weergave met pagina beginnen:

Download "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 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

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= 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

Handleiding testgebruiker v.0.1

Handleiding testgebruiker v.0.1 Handleiding testgebruiker v.0.1 Handleiding testgebruiker v.0.1 Brands & Stories - 21.10.2014-1 Inhoud 1 Inleiding 3 1.1 Algemeen 3 1.2 Doelstelling 3 1.3 Een probleem rapporteren 3 2 Registreren 4 2.1

Nadere informatie

Toelichting release notes. 22 mei 2014

Toelichting release notes. 22 mei 2014 Toelichting release notes 22 mei 2014 1 2 Toelichting release notes Error! Unknown document property name. 22 mei 2014 Inleiding release notes Dit document beschrijft de belangrijkste en meest zichtbare

Nadere informatie

Internet Quotations: Handleiding voor Fleet Managers

Internet Quotations: Handleiding voor Fleet Managers Internet Quotations: Handleiding voor Fleet Managers Version: 3.1.1 1. Inloggen op leaseplan.be 3 2. Aanmelden op My LeasePlan en Internet Quotations 4 3. Een bestuurdersprofiel aanmaken en beheren 4 3.1

Nadere informatie

Lab Webdesign: Javascript 7 april 2008

Lab Webdesign: Javascript 7 april 2008 H8: FORMULIEREN In dit hoofdstuk komt het "form"-object aan de orde: we zullen zien hoe we JavaScript kunnen gebruiken voor het manipuleren en valideren van de gegevens die een eindgebruiker invult in

Nadere informatie

Handleiding bij WSM MailformGenerator

Handleiding bij WSM MailformGenerator 1. Voorwoord Welkom bij de handleiding voor de WSM MailformGenerator. Deze handleiding hebben we gemaakt om je snel en gemakkelijk uit te leggen hoe de WSM MailformGenerator werkt. Deze handleiding is

Nadere informatie

Handleiding Glimworm nieuwsbrief

Handleiding Glimworm nieuwsbrief Handleiding Glimworm nieuwsbrief Auteur: Marten Hoekstra Datum: 26 Mei 2005 Versie: 1.0 Dit document bevat vertrouwelijk informatie die niet voor anderen dan de relatie van Glimworm bedoeld is. Op alle

Nadere informatie

Formulieren maken met Dreamweaver CS 4/CS 5

Formulieren maken met Dreamweaver CS 4/CS 5 Formulieren maken met Dreamweaver CS 4/CS 5 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit

Nadere informatie

Documentatiebundel Sfta Versturen en ontvangen van grote mails door gebruik te maken van "sfta.vmm.be"

Documentatiebundel Sfta Versturen en ontvangen van grote mails door gebruik te maken van sfta.vmm.be Documentatiebundel Sfta Versturen en ontvangen van grote mails door gebruik te maken van "sfta.vmm.be" Inhoud 1. Inleiding 3 2. Hoe als extern persoon een mail met gro(o)t(e) bestand(en) versturen naar

Nadere informatie

Clang 1.3.0. Release Notes. created by

Clang 1.3.0. Release Notes. created by Clang 1.3.0 Release Notes created by Release 1.3.0 Niet zonder trots, presenteren wij Clang 1.3.0. Een release die geheel in het teken staat van de nieuwe split-run functionaliteit en de geheel vernieuwde

Nadere informatie

AFO 142 Titel Aanwinsten Geschiedenis

AFO 142 Titel Aanwinsten Geschiedenis AFO 142 Titel Aanwinsten Geschiedenis 142.1 Inleiding Titel Aanwinsten Geschiedenis wordt gebruikt om toevoegingen en verwijderingen van bepaalde locaties door te geven aan een centrale catalogus instantie.

Nadere informatie

Handleiding invoeren webforms Landelijke Heelkunde Complicatie Registratie

Handleiding invoeren webforms Landelijke Heelkunde Complicatie Registratie Handleiding invoeren webforms Landelijke Heelkunde Complicatie Registratie 1 Internet explorer 1. Systeemeisen Om via het webbased formulier te kunnen registreren dient u te beschikken over een webbrowser.

Nadere informatie

Gebruiksaanwijzing webwinkel januari 2013

Gebruiksaanwijzing webwinkel januari 2013 Gebruiksaanwijzing webwinkel januari 2013 Inhoudstafel Inleiding 3 1. Aanmelden op westdecor.be 4 2. Uw webwinkel personaliseren 6 2.1 Uw wachtwoord instellen 6 2.2 Uw logo instellen 7 2.3 Uw verkoopprijzen

Nadere informatie

Handleiding. 1 P a g i n a

Handleiding. 1 P a g i n a Handleiding 1 Inloggen... 2 2 Beveiligen... 5 3 Bericht versturen... 8 4 Nieuwe gebruiker aanmaken... 10 5 Mailing versturen... 12 6 Toegang via smartphone... 14 7 Paswoord wijzigen en andere instellingen...

Nadere informatie

HANDLEIDING TOOLS4EVER ISUPPORT ONLINE WEBOMGEVING

HANDLEIDING TOOLS4EVER ISUPPORT ONLINE WEBOMGEVING HANDLEIDING TOOLS4EVER ISUPPORT ONLINE WEBOMGEVING Inhoudsopgave 1. Belangrijkste spelregels... 3 2. Contact met tools4ever international support... 4 isupport webomgeving... 4 Eerste maal inloggen...

Nadere informatie

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet

Nadere informatie

De categorie Forms in het paneel Insert

De categorie Forms in het paneel Insert Formulieren Invulformulieren bieden u de mogelijkheid om te communiceren met de bezoekers van uw website. Ze geven de bezoeker de mogelijkheid om feedback te geven, informatie door te spelen, informatie

Nadere informatie

Uw Ogone Test Account aanmaken en configureren

Uw Ogone Test Account aanmaken en configureren Inhoudsopgave 1. Inleiding 2. Uw nieuwe account registreren 3. Uw testaccount configureren 3.1 Uw accountgegevens configureren 3.2 Uw betaalmethoden configureren 3.3 Uw technische instellingen configureren

Nadere informatie

Handleiding Webapplicatie Robin

Handleiding Webapplicatie Robin Handleiding Webapplicatie Robin (Versie 05) Inhoudstafel 1. Registratie van uw labo... 2 2. Persoonlijke account aanmaken... 4 3. Inloggen in uw labo account... 7 4. Wijziging labogegevens... 8 5. Inschrijven

Nadere informatie

Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp

Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp Algemeen Deze handleiding beschrijft de werking van OpenEmm gekoppeld aan WordPress. Ondanks het feit dat binnen OpenEmm nieuwsbrieven opgemaakt

Nadere informatie

Aan de slag met MailChimp!

Aan de slag met MailChimp! Aan de slag met MailChimp! In 3 stappen je eerste nieuwsbrief verzenden Stap 1. Aanmelden Meld je aan via www.mailchimp.com, het is gratis en een creditcard is niet nodig voor aanmelding. Er zijn betaalde

Nadere informatie

Drupal. Handleiding voor medewerkers. Wim Hambrouck V1.1 (januari 2011)

Drupal. Handleiding voor medewerkers. Wim Hambrouck V1.1 (januari 2011) Drupal Handleiding voor medewerkers Wim Hambrouck V1.1 (januari 2011) * + INHOUDSTAFEL Inhoudstafel... 2 1. Inloggen... 3 2. Menu opties... 3 3. Inhoud aanmaken... 4 3.1 Algemene instellingen voor nieuwe

Nadere informatie

Handleiding activeren van Google Analytics-account

Handleiding activeren van Google Analytics-account Handleiding activeren Analytics Blz. 1/6 Handleiding activeren van Google Analytics-account Als u wilt weten wat er precies op uw website gebeurd, of als u het effect van uw website wilt vergroten, kunt

Nadere informatie

Quickstart handleiding

Quickstart handleiding Inleiding Allereerst hartelijk bedankt voor het aanschaffen van. U heeft met deze aankoop een goede keuze gemaakt voor een zeer professionele E-mail marketing tool. In deze quickstart handleiding zullen

Nadere informatie

THOMAS ONLINE TIPS & TRICKS

THOMAS ONLINE TIPS & TRICKS THOMAS ONLINE TIPS & TRICKS 1. Keuze navigatietaal van de website 2. Aanloggen 3. Wachtwoord wijzigen 4. Wachtwoord vergeten 5. Een PPA uitnodiging sturen naar een kandidaat 6. Een PPA rapport creëren

Nadere informatie

IMAP-handleiding Bookinto

IMAP-handleiding Bookinto IMAP-handleiding Bookinto Olivier Nuyts 2Ti6 Ewout Spitaels 2Ti6 Departement Handelswetenschappen en Bedrijfskunde Bachelor Toegepaste Informatica 2 de jaar Academiejaar 2010-2011 Overzicht Inleiding Bookinto

Nadere informatie

Handleiding RS Form! 1.0.4

Handleiding RS Form! 1.0.4 Handleiding RS Form! 1.0.4 Inhoud 1. Controlepaneel... 3 2. Forms Manager... 4 2.1 Nieuwe form aanmaken... 4 2.2 Nieuwe fields toevoegen... 7 2.3 Wijzigen/verwijderen bestaande Forms, Fields... 10 Versie

Nadere informatie

Les 15 : updaten van gegevens in de database (deel2).

Les 15 : updaten van gegevens in de database (deel2). Les 15 : updaten van gegevens in de database (deel2). In de volgende reeks lessen zal alle vorige leerstof uitgebreid aan het bod komen. Zie ook de vorige lessen en documenten om informatie op te zoeken

Nadere informatie

Formulierbeheer Importeren bestaand (model)formulier... 2 Wat is exporteren/importeren eigenlijk?... 3 Formulier aanpassen/opbouwen...

Formulierbeheer Importeren bestaand (model)formulier... 2 Wat is exporteren/importeren eigenlijk?... 3 Formulier aanpassen/opbouwen... Formulierbeheer Importeren bestaand (model)formulier... 2 Wat is exporteren/importeren eigenlijk?... 3 Formulier aanpassen/opbouwen... 4 Bewerken formulier in formulierbeheer... 4 Bewerken formulier -

Nadere informatie

MSN Channelizer. MSN Portal Team: nlmsnpor@microsoft.com Technische ondersteuning: web@calanza.com

MSN Channelizer. MSN Portal Team: nlmsnpor@microsoft.com Technische ondersteuning: web@calanza.com MSN Nederland MSN Channelizer MSN Portal Team: nlmsnpor@microsoft.com Technische ondersteuning: web@calanza.com Let op:... 1 1 - Introductie... 2 2 - Proces... 2 3 - Channelizer Templates... 3 4 - Richtlijnen

Nadere informatie

Handleiding (Verzender Ontvanger)

Handleiding (Verzender Ontvanger) Handleiding (Verzender Ontvanger) Anachron B.V. Steven Nijholt & Maarten Wiggers 28-02-2014 Version: 1.1 Status: Released Inhoud 1. Over dit document... 3 1.1 List of changes... 3 1.2 Scope... 3 2. Registratie...

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Handleiding Formulieren in TYPO3 Versie 1.2, 18 juli 2008

Handleiding Formulieren in TYPO3 Versie 1.2, 18 juli 2008 Handleiding Formulieren in TYPO3 Versie 1.2, 18 juli 2008 1. Formulieren aanmaken en plaatsen... 2 1.1 Formulieren aanmaken... 2 1.2 Formulier plaatsen op een pagina... 8 1.3 Aanmaken formulieren map...

Nadere informatie

Inhoud Inleiding... 1 Aanbevelingen... 3 Belangrijke instellingen... 4 Zo gebruikt u het systeem... 7 Meer kennis... 15

Inhoud Inleiding... 1 Aanbevelingen... 3 Belangrijke instellingen... 4 Zo gebruikt u het systeem... 7 Meer kennis... 15 Dit is een introductie over het gebruik van het additionele product Mamut Enterprise Klant- en Partner Web. Het gebruik van het systeem wordt beschreven aan de hand van het fictieve voorbeeld van de firma

Nadere informatie

Quick Guide VivianCMS

Quick Guide VivianCMS Quick Guide VivianCMS Contactformulier creëren Versie: 1.0 Startdatum: 24 juli 2006 Datum laatste wijziging: 24 juli 2006 Opmerking: Gepubliceerd op http://www.viviancms.nl Inhoud 1 Inleiding...3 1.1 Contactformulier

Nadere informatie

Website van het openbaar ministerie Korte gebruikershandleiding voor Content Managers

Website van het openbaar ministerie Korte gebruikershandleiding voor Content Managers Website van het openbaar ministerie Korte gebruikershandleiding voor Content Managers De website van het openbaar ministerie is momenteel (tijdelijk) te vinden op volgende intranetadres: http://10.241.132.229.

Nadere informatie

Hoe uw nieuwsbrieven aanmaken & versturen?

Hoe uw nieuwsbrieven aanmaken & versturen? Hoe uw nieuwsbrieven aanmaken & versturen? Stap 1: Klik in de footer van je website op Inloggen onder de titel Admin Area Stap 2: Typ volgende gegevens in om in te loggen: Gebruikersnaam: agentennummer

Nadere informatie

Handleiding myworkandme. Aanmelden met e-mailadres en wachtwoord

Handleiding myworkandme. Aanmelden met e-mailadres en wachtwoord Handleiding myworkandme Aanmelden met e-mailadres en wachtwoord 22 juli 2013 Inhoudsopgave 1. Nieuwe gebruiker? Je profiel activeren... 3 1.1 Klik op de link in de activatiemail... 3 1.2 Geef je e-mailadres

Nadere informatie

Inleiding. 3.. Widget maken. 7... Widget publiceren. 8...Widget aanpassen. 9...Mini widget. 13...Banners

Inleiding. 3.. Widget maken. 7... Widget publiceren. 8...Widget aanpassen. 9...Mini widget. 13...Banners Handleiding Inleiding 3.. Widget maken 7... Widget publiceren 8...Widget aanpassen 9...Mini widget 13...Banners 2 2 Widget maken Als u ingelogd bent in uw account dan komt u terecht in een keuzemenu. Als

Nadere informatie

De controlekaart volledige werkloosheid

De controlekaart volledige werkloosheid De controlekaart volledige werkloosheid Mobiele Versie Gebruikershandleiding Inhoudstafel Toegang 4 Algemene beschrijving 6 Bovenaan 7 Het logo van de uitbetalingsinstelling 7 De PDF downloaden 7 Instellingen

Nadere informatie

HANDLEIDING CMS. v.0.0.1

HANDLEIDING CMS. v.0.0.1 HANDLEIDING CMS v.0.0.1 0.0 Inhoudsopgave 0.0 Inhoudsopgave...2 1.0 Het inlogscherm......3 1.1 Inloggen...3 1.2 Wachtwoord vergeten?...4 2.0 CMS onderdelen...4 2.1 Quicklinks...4 2.2 Pagina's...5 2.2.1

Nadere informatie

PhotoworkZ pop-up website handleiding

PhotoworkZ pop-up website handleiding PhotoworkZ pop-up website handleiding Inhoudsopgave PhotoworkZ pop-up website handleiding...1 Aanmelden op de admin module...2 Beheer van teksten...3 Tekst downloaden en aanpassen...3 Aanpassen van teksten...4

Nadere informatie

Handleiding Mijn bibliotheek

Handleiding Mijn bibliotheek Handleiding Mijn bibliotheek Doelgroep: bibliotheekmedewerkers Versie 19 juni 2015 Inhoudstafel Inhoudstafel... 1 Links... 1 Hoe kom ik in Mijn bibliotheek?... 2 Via de website van de bibliotheek/gemeente/partner/...

Nadere informatie

Formulieren maken met Dreamweaver CS 4

Formulieren maken met Dreamweaver CS 4 Formulieren maken met Dreamweaver CS 4 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit zoveel

Nadere informatie

Handleiding Site to Edit Module Veiling

Handleiding Site to Edit Module Veiling THAR Design Kipboomweg 15 7636 RC AGELO E-mail: info@thar.nl Website: www.thar.nl KvK nummer: 08165396 BTW nummer: NL8186.22.416.B01 Rekeningnummer: 45.09.80.59 Handleiding Site to Edit Module Veiling

Nadere informatie

BIJLAGE BIJ DE HANDLEIDING NAVISION INCADEA DOSSIERBEHEER SALES REVIEW & TOOLS

BIJLAGE BIJ DE HANDLEIDING NAVISION INCADEA DOSSIERBEHEER SALES REVIEW & TOOLS Copyright BMW GROUP Belux / Revisie 0 BIJLAGE BIJ DE HANDLEIDING NAVISION INCADEA DOSSIERBEHEER SALES REVIEW & TOOLS Niets uit deze uitgave mag worden verveelvoudigd en/of openbaar gemaakt door middel

Nadere informatie

Trippeltrap Content Management System

Trippeltrap Content Management System Handleiding Trippeltrap Content Management System versie 2.4 Aanmelden Voordat u de tekst op uw webpagina kunt aanpassen, moet u zich eerst aanmelden. Bovenaan de pagina vindt u een link naar het intranet.

Nadere informatie

Inhoudsopgave. Wegwijzer voor Google Documenten/Agenda/Sites

Inhoudsopgave. Wegwijzer voor Google Documenten/Agenda/Sites Wegwijzer voor Google Documenten/Agenda/Sites Inhoudsopgave 1 GOOGLE APPS: gratis voor scholen...2 2 GOOGLE DOCUMENTEN: online teksten/rekenbladen/presentaties...3 2.1 voordelen van (samenwerken aan) gedeelde

Nadere informatie

Handleiding enquetemaken.be

Handleiding enquetemaken.be Hoofdstuk : Starten met je eigen enquête - Registreren - Enquete Maken - Instellingen Hoofdstuk 2 : Opstellen van de vragenlijst - Vragen maken - Vraagtypes - Vragenlijst beheren - Vertakkingen invoeren

Nadere informatie

Bridgemate App. Handleiding voor bridgeclubs en wedstrijdleiders. Bridge Systems BV

Bridgemate App. Handleiding voor bridgeclubs en wedstrijdleiders. Bridge Systems BV Bridgemate App Handleiding voor bridgeclubs en wedstrijdleiders Bridge Systems BV Bridgemate app Handleiding voor bridgeclubs en wedstrijdleiders Pagina 2 Inhoud Inleiding... 3 De werking van de Bridgemate

Nadere informatie

APICS module Gevaarlijke Goederen. Voor aangevers GG

APICS module Gevaarlijke Goederen. Voor aangevers GG APICS module Gevaarlijke Goederen Voor aangevers GG 16 mei 2014 Inhoudstafel Hoofdstuk 1: Toegang APICS loket... 3 Stap 1A: Bedrijf registreren... 4 Stap 1B: Functionaliteit aanvragen... 8 Stap 2: Toegang

Nadere informatie

HANDLEIDING ONLINE LEDENBESTAND

HANDLEIDING ONLINE LEDENBESTAND 1-1-2016 HANDBOOGLIGA HANDLEIDING ONLINE LEDENBESTAND Handleiding voor clubs Inhoudsopgave Inleiding... 2 Aanmelden als clubadministrator... 2 inloggen... 2 Beheer clubgegevens... 3 zoekfunctie... 4 Lijsten

Nadere informatie

Hoe te registreren voor een wedstrijd?

Hoe te registreren voor een wedstrijd? Hoe te registreren voor een wedstrijd? Het registreren voor een wedstrijd onder auspiciën van de WorldCDF gebeurt on-line, via de website van de WorldCDF (www.worldcdf.com). Om te kunnen registreren voor

Nadere informatie

SportCTM 2.0 Startscherm trainer

SportCTM 2.0 Startscherm trainer SportCTM 2.0 Startscherm trainer Inloggen Webapplicatie Via inlog.dotcomsport.com kun je in inloggen op de webapplicatie van het SportCTM. Wij adviseren onderstaande browsers Windows: Internet Explorer,

Nadere informatie

Handleiding Website Laatste update: april 2014

Handleiding Website Laatste update: april 2014 Laatste update: april 2014 1. Google Search Tijdens de ontwikkeling van uw website werd er veel aandacht besteed aan optimalisatie voor zoekmachines zoals Google. Dit onder andere door de broncode technisch

Nadere informatie

In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip:

In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip: FORMULIEREN In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip: belangrijk Importeer formulierdata uit een CSV-bestand precies zoals verderop beschreven. 1. Gedrag

Nadere informatie

Handleiding MyUnifiedPost

Handleiding MyUnifiedPost Handleiding MyUnifiedPost Welkom in de papierloze wereld van MyUnifiedPost! Deel I: Registratie- en activatieprocedure Versie Datum laatste update 2.0 27 november 2009 Inhoud 1. Ik heb nog geen account

Nadere informatie

Klachtenbeheer (Intranet)

Klachtenbeheer (Intranet) Klachtenbeheer (Intranet) Versie:1 1/17 1 INLEIDING...3 2 NAVIGATIE VAN DE APPLICATIE...3 3 FRONT-END (OP DE WEBSITE)...4 3.1 Het online melden van klachten... 4 3.2 Mijn meldingen... 5 4 BACK-END...6

Nadere informatie

eservice Gebruikershandleiding eservice Gebruikershandleiding v1.0 Pagina 1

eservice Gebruikershandleiding eservice Gebruikershandleiding v1.0 Pagina 1 eservice Gebruikershandleiding eservice Gebruikershandleiding v1.0 Pagina 1 Inhoud Inhoud... 2 Maak een nieuwe gebruiker aan... 3 Registreer een machine... 8 Nieuwe tellerstand doorgeven... 11 Nieuwe bestelling

Nadere informatie

Securitas Alarm App Klantmanual

Securitas Alarm App Klantmanual Securitas Alarm App Klantmanual Auteur : Securitas Versie : 1.0 Datum : 03-07-2015 Inhoud Inleiding...2 1. Registratie...3 2. Functionaliteit...6 2.1 Status...7 2.2 Alarm...8 2.3 Schakeltijd... 10 2.4

Nadere informatie

HTML. Formulieren. Hans Roeyen V 3.0

HTML. Formulieren. Hans Roeyen V 3.0 Formulieren Hans Roeyen V 3.0 26 februari 2015 Inhoud 1. Formulieren... 3 1.1. De form tag... 3 1.1.1. Het action attribute... 4 1.1.2. Het method attribute... 4 1.2. De input tag... 4 1.3. Soorten input

Nadere informatie

handleiding voor systeem het Management Drives Management Drives systeem Handleiding

handleiding voor systeem het Management Drives Management Drives systeem Handleiding handleiding voor het Management Drives systeem Management Drives systeem Handleiding Met het Management Drives systeem kunt u onder andere Management Drives vragenlijsten versturen, ontvangen en deze zowel

Nadere informatie

SEO en Beslist.nl. Copyright Starteenwinkel.nl

SEO en Beslist.nl. Copyright Starteenwinkel.nl SEO en Beslist.nl Copyright Starteenwinkel.nl Lees in deze handleiding over: SEO en Beslist.nl 1. Hoe word ik goed gevonden in Google? 2. Waarom SEO en Beslist.nl belangrijk zijn 3. Hoe denkt Google? 4.

Nadere informatie

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM Tips & Tricks Eigen Widgets in CRM Eigen Widgets in CRM Introductie De WebUI van CRM 7.0 maakt het mogelijk om je eigen widgets te maken en deze in je eigen view te gebruiken. Dat kan door gebruik te maken

Nadere informatie

1 Inleiding. 3 Handmatig... invoeren zaken basis 4 Verwerken... zaken 5 Afhandelen... van zaken. 7 Uitgebreidere... zaak opties

1 Inleiding. 3 Handmatig... invoeren zaken basis 4 Verwerken... zaken 5 Afhandelen... van zaken. 7 Uitgebreidere... zaak opties 2 Supportdesk Pro Introductie Inhoudsopgave I Supportdesk Pro 3 1 Inleiding... 3 2 Werkwijze... 3 II Zaken 4 1 Introductie... 4 2 Zaken beheren... 4 3 Handmatig... invoeren zaken basis 4 4 Verwerken...

Nadere informatie

Taxis Pitane Link. (gebruikershandleiding) Censys BV - Eindhoven

Taxis Pitane Link. (gebruikershandleiding) Censys BV - Eindhoven Taxis Pitane Link (gebruikershandleiding) Censys BV - Eindhoven Inhoud Wat is Taxis Pitane Link?... 4 Inloggen in Taxis Pitane Link... 5 Wachtwoord vergeten... 6 Startscherm of hoofdmenu... 7 Helpvensters

Nadere informatie

MIJN BIBLIOTHEEK. Introductie tot MIJN BIBLIOTHEEK. Maak van de bib nog meer jouw bib dankzij Mijn Bibliotheek! oktober 2015

MIJN BIBLIOTHEEK. Introductie tot MIJN BIBLIOTHEEK. Maak van de bib nog meer jouw bib dankzij Mijn Bibliotheek! oktober 2015 MIJN BIBLIOTHEEK Introductie tot MIJN BIBLIOTHEEK oktober 2015 Maak van de bib nog meer jouw bib dankzij Mijn Bibliotheek! Waarom heb ik een Mijn Bibliotheek account nodig? Wil je de uitleentermijn verlengen,

Nadere informatie

Concentra Selfservice. Veel gestelde vragen 1 ALGEMEEN... 3. Welke internet browser gebruiken?... 3 2 REGISTRATIE EN MIJN KLANTGEGEVENS...

Concentra Selfservice. Veel gestelde vragen 1 ALGEMEEN... 3. Welke internet browser gebruiken?... 3 2 REGISTRATIE EN MIJN KLANTGEGEVENS... Concentra Selfservice Veel gestelde vragen 1 ALGEMEEN... 3 Welke internet browser gebruiken?... 3 2 REGISTRATIE EN MIJN KLANTGEGEVENS... 4 Mijn straat is niet gekend... 4 De knop bevestig postcode werkt

Nadere informatie

Documentatie. InstantModules Q42. Versie 1.1

Documentatie. InstantModules Q42. Versie 1.1 Documentatie InstantModules Q42 Versie 1.1 Inhoudsopgave Inhoudsopgave... 2 Voor gebruikers... 3 InstantComment... 3 InstantTagging... 5 Voor webmasters... 9 InstantComment... 9 InstantTagging... 11 Voor

Nadere informatie

Handleiding Webapplicatie Robin

Handleiding Webapplicatie Robin Handleiding Webapplicatie Robin (Versie 02) Inhoudstafel 1. Registratie van uw labo... 2 2. Persoonlijke account aanmaken... 4 3. Inloggen in uw labo account... 7 4. Wijziging labogegevens... 8 5. Inschrijven

Nadere informatie

Software Requirements Specification

Software Requirements Specification Software Requirements Specification PEN: Paper Exchange Network Software Engineering groep 1 (se1-1415) Academiejaar 2014-2015 Jens Nevens - Sander Lenaerts - Nassim Versbraegen Jo De Neve - Jasper Bevernage

Nadere informatie

Mach3Framework 5.0 / Website

Mach3Framework 5.0 / Website Mach3Framework 5.0 / Website Handleiding Mach3Builders Inhoudsopgave 1 Inloggen...5 1.1 Ingelogd blijven...6 1.2 Wachtwoord vergeten...7 2 Applicatie keuzescherm...8 2.1 De beheeromgeving openen...9 3

Nadere informatie

Handleiding OK CV: ESS. Handleiding. Gebruiker: ESS. Document versie: 2.1 Versiedatum: 2014-12-16 Status: concept Auteur: 2BA.

Handleiding OK CV: ESS. Handleiding. Gebruiker: ESS. Document versie: 2.1 Versiedatum: 2014-12-16 Status: concept Auteur: 2BA. Handleiding Gebruiker: ESS Document versie: 2.1 Versiedatum: 2014-12-16 Status: concept Auteur: 2BA Pagina 1 Inhoudsopgave Introductie 3 Terminologie 3 Stap 1. Inloggen op FGO+ website 4 Stap 2: Inloggen

Nadere informatie

Bij problemen of vragen omtrent de login gegevens, kan er contact worden opgenomen met de webmaster bij Lannoo.

Bij problemen of vragen omtrent de login gegevens, kan er contact worden opgenomen met de webmaster bij Lannoo. Jean-Baptiste de Ghellincklaan 13, Bus 301 9051 Gent +32/497.52.61.20 www.misterduke.be Manual: Aanmaak Event/ Expo : Lannoocampus-Academie.nl 1. Inloggen CMS Via http://www.lannoocampus-academie.nl/beta/cms

Nadere informatie

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

ZorgMail Secure e-mail

ZorgMail Secure e-mail ZorgMail Secure e-mail 2014 ENOVATION B.V. Alle rechten voorbehouden. Niets uit deze uitgave mag worden openbaar gemaakt of verveelvoudigd, opgeslagen in een data verwerkend systeem of uitgezonden in enige

Nadere informatie

Handleiding gebruik Citymail

Handleiding gebruik Citymail Handleiding gebruik Citymail Versie : 4.0.1 Jaar : 2014 Auteur : Citymail BV / Charly Traarbach Citymail BV Copyright 1 Citymail BV, Nederland 2014 Niets uit dit document mag worden vermenigvuldigd en/of

Nadere informatie

Welkom bij Digicel Online Top Up

Welkom bij Digicel Online Top Up 1 Welkom bij Digicel Online Top Up Welkom en bedankt voor het kiezen van Digicel Online Top Up, de snelste en gemakkelijkste manier om top up te versturen naar landen in de Caribische regio. Onze website

Nadere informatie

Handleiding. Inhoudsopgave 25-02-2014

Handleiding. Inhoudsopgave 25-02-2014 Inhoudsopgave Beheerders Dashboard...2 Kalender beheerders...3 Activiteiten beheren...3 Herhalende activiteiten...4 Wijk coördinatoren...5 Kalenders beheren...5 Kalenders exporteren...6 Gebruikers beheren...7

Nadere informatie

Uitleg 1mail E mailingmodule

Uitleg 1mail E mailingmodule Uitleg 1mail E mailingmodule Wat is het? Een online programma om nieuwsbrieven/e-zines te versturen, met personalisatiemogelijkheden en met een gedetailleerd rapporteringssysteem. Dit alles via een externe

Nadere informatie

Beschrijving functioneel en technisch design van de website

Beschrijving functioneel en technisch design van de website Bespreking Punten: Beschrijving functioneel en technisch design van de website Nr. Punt 1 Student 2 Bedrijf 3 Algemene lay out 4 Technologieën 5 Webruimte en datatrafiek 1. Student Registratie Bij de registratie

Nadere informatie

1. Inloggen 2. 2. Uw account 3 2.1 Wachtwoord veranderen 3 2.2 Alle gegevens bekijken 3 2.3 Credits (mail-bundels) kopen 3

1. Inloggen 2. 2. Uw account 3 2.1 Wachtwoord veranderen 3 2.2 Alle gegevens bekijken 3 2.3 Credits (mail-bundels) kopen 3 Inhoudsopgave Hoofdstuk Bladzijde 1. Inloggen 2 2. Uw account 3 2.1 Wachtwoord veranderen 3 2.2 Alle gegevens bekijken 3 2.3 Credits (mail-bundels) kopen 3 3. Nieuwsbrieven 4 stap 1: voeg een nieuwsbrief

Nadere informatie

Release Notes v 2.0 14

Release Notes v 2.0 14 1/7 Release Notes v 2.0 14 Dit document beschrijft vanuit technisch oogpunt de aanpassingen in cheqpoint 2.0 aan de betreffende versie. Al deze informatie is confidentieel en mag niet zonder de schriftelijke

Nadere informatie

Online Marketing. Door: Annika Woud ONLINE MARKETING

Online Marketing. Door: Annika Woud ONLINE MARKETING Online Marketing Door: Annika Woud 1 Inhoudsopgaven 1 Wat is online marketing? 2 Hoe pas je online marketing toe op een website? Hoe pas je het toe? SEO Domeinnaam HTML Google Analytics Advertenties op

Nadere informatie

Handleiding ONLI. Inhoudstafel

Handleiding ONLI. Inhoudstafel Handleiding ONLI Versiebeheer: Versie Datum wijzigingen 1.0 19/01/2015 Eerste versie 1.1 30/01/2015 Blz. 9 : antwoorden op een bericht in je mailbox die verstuurd werd uit ONLI. Inhoudstafel Inleiding...

Nadere informatie

Registratie als energiemeester (als je je voor het eerst aanmeldt).

Registratie als energiemeester (als je je voor het eerst aanmeldt). Handleiding website Energiejacht voor energiemeesters In deze handleiding vind je de nodige informatie over hoe je met de website van Energiejacht aan de slag kunt gaan. Met vragen over de website kun

Nadere informatie

DR3_fons_les_09 2014_11_13 1

DR3_fons_les_09 2014_11_13 1 DR3_fons_les_09 2014_11_13 1 pad van private map sites / default / files / private als je in private map iets gaat instellen, gebeurt er iets in drupal, drupal gaat automatisch een htaccess bestand aanmaken

Nadere informatie

GEBRUIKERSHANDLEIDING

GEBRUIKERSHANDLEIDING GEBRUIKERSHANDLEIDING Inhoudstafel I. Aanmelden op de portal site van Sanoma Media... 3 II. CertiONE Bizmail in één oogopslag... 4 III. Controleren/wijzigen gebruikersgegevens... 5 IV. Aanmaken e-factuur

Nadere informatie

e-tracker Pro User guide

e-tracker Pro User guide e-tracker Pro Vol g de statu s van uw pakketten online User guide Versie 0.1 Inhoudstafel Introductie... 2 Zich aanmelden bij e-tracker pro... 3 Hoe e-tracker Pro gebruiken?... 5 Het horizontale menu...6

Nadere informatie

BELTRACE VOOR DE GEMEENTEN

BELTRACE VOOR DE GEMEENTEN S A N I T R A C E BELTRACE VOOR DE GEMEENTEN Versie 7 21/09/2012 Pagina 1 van 18 BELTRACE VOOR DE GEMEENTEN Herinnering van de algemene gebruiksrichtlijnen De informaticatoepassing Beltrace moet door de

Nadere informatie

Handleiding Faxdiensten

Handleiding Faxdiensten Handleiding Faxdiensten Auteur: Marketing Datum: 01-10-2014 Versie: 2.0 Aantal bladen: 12 Nummer: 1018 2 P a g i n a Inhoud 1. Inleiding... 3 2. Beheer E-Fax IN- en E-Fax OUT-diensten... 4 3. E-Fax-overzicht...

Nadere informatie

Handleiding voor het beheren van opleidingen

Handleiding voor het beheren van opleidingen Handleiding voor het beheren van opleidingen Handleiding coördinator Handleiding voor het beheren van opleidingen HIGIS 2008 http://www.higis.eu.org Higis 13 februari 2008 1/13 Inhoudstafel Beheren van

Nadere informatie

Informatica Pagina 1 van 13. Versiedatum 17/12//2015. Te herzien op

Informatica Pagina 1 van 13. Versiedatum 17/12//2015. Te herzien op Informatica Pagina 1 van 13 Citrix - Installatie voor extern gebruik - versie december 2015.docx Naam van de verantwoordelijke: Handtekening: Versiedatum 17/12//2015 Te herzien op Doelgroep Externe Citrix

Nadere informatie

DYNAPLUG 1. Praktische handleiding. DYNAPLUG: eenvoudig online bestellen bij Van Hoecke 2. Hoe gaat u te werk? 2

DYNAPLUG 1. Praktische handleiding. DYNAPLUG: eenvoudig online bestellen bij Van Hoecke 2. Hoe gaat u te werk? 2 DYNAPLUG 1 DYNAPLUG: eenvoudig online bestellen bij Van Hoecke 2 Hoe gaat u te werk? 2 1. Een kast ontwerpen en bestellen: DYNAPLAN 3 Stap 1. Maak een corpus aan in DYNAPLAN Stap 2. Corpus of commissie

Nadere informatie

v.1.48 Genkgo Handleiding Genkgo Events Professioneel evenement management in Genkgo

v.1.48 Genkgo Handleiding Genkgo Events Professioneel evenement management in Genkgo v.1.48 Genkgo Handleiding Genkgo Events Professioneel evenement management in Genkgo Inhoud Voordat u begint...3 In dit document...3 Boom...3 Instellingen...4 Tenaamstelling... 4 Adres... 4 Contactgegevens...

Nadere informatie

Stap 5. Koppel vervolgens de Stages aan de AIOS op het blad AIOS Stageplaats (figuur 5). Nu kunnen de Stage specifieke afspraken aangemaakt worden.

Stap 5. Koppel vervolgens de Stages aan de AIOS op het blad AIOS Stageplaats (figuur 5). Nu kunnen de Stage specifieke afspraken aangemaakt worden. Met de Excelapplicatie Opleidingskalender kunt u afspraken in het kader van de opleiding met AIOS per Ziekenhuis/Opleiding per specialisme plannen en beheren. Introductie Deze Excelapplicatie is gemaakt

Nadere informatie

Software Test Plan. Yannick Verschueren

Software Test Plan. Yannick Verschueren Software Test Plan Yannick Verschueren November 2014 Document geschiedenis Versie Datum Auteur/co-auteur Beschrijving 1 November 2014 Yannick Verschueren Eerste versie 1 Inhoudstafel 1 Introductie 3 1.1

Nadere informatie

HANDLEIDING. Emjee ICT diensten Ticketsysteem

HANDLEIDING. Emjee ICT diensten Ticketsysteem HANDLEIDING Emjee ICT diensten Ticketsysteem Inhoud Snel aan de slag... 3 Wachtwoord opvragen... 3 Inloggen... 4 Ticket aanmaken... 4 Schermopbouw... 4 Inleiding... 5 Ticket maken of bellen?... 5 Inloggen...

Nadere informatie

Gebruikers handleiding Brugge Printshop webshop

Gebruikers handleiding Brugge Printshop webshop Gebruikers handleiding Brugge Printshop webshop Gebruikers handleiding Brugge Printshop webshop... 1 Inleiding... 3 Inloggen... 4 Wachtwoord vergeten... 4 Gebruikersnaam vergeten... 5 Nog geen klant?...

Nadere informatie

Handleiding Leerplatform EVA 3IMSA http://dev.lerendoejezelf.be/dev_eva_drupal/

Handleiding Leerplatform EVA 3IMSA http://dev.lerendoejezelf.be/dev_eva_drupal/ Handleiding Leerplatform EVA 3IMSA http://dev.lerendoejezelf.be/dev_eva_drupal/ Inhoudsopgave 1 Voorwoord... 3 2 Een account registreren en beheren... 4 3 Oefen je kennis... 8 4 Portfolio... 10 5 Overzichten

Nadere informatie