1 online. webcomponenten. 19 januari

Transcriptie

1 1 online gebruikerservaring met de webcomponenten 19 januari

2 Agenda 1. Oorsprong van het webuniversum 2. De webcomponentenbibliotheek 3. De hulpwidget 4. De global header en footer 5. Roadmap voor ingebruikname 6. Blik op de toekomst

3 Oorsprong van het webuniversum

4 Waar staan we nu? Gebruiker steeds meer centraal Gebruikersonderzoeken winnen aan belang verschillende methodieken life eventscan laatste nieuwe meerdere drempels

5 Drempels Toegang Motivatie Digitale Drempels Vaardigheden Vertrouwen

6 Digitale zelfredzaamheid verhogen > Toegang Drempels > Toegang tot internet > Toegang tot online applicaties (e-id, token, ) > Toegang voor mensen met functiebeperking Acties > Aanmelden online applicaties vergemakkelijken (ACM) > Een toegang tot digitale overheid (burgerloket) > Enkel noodzakelijke gegevens vragen > AnySurfer

7 Digitale zelfredzaamheid verhogen > Vaardigheden Drempels > Vlot met pc, tablet smartphone > Informatie filteren > Analytisch vermogen Acties > Hulpwidgets > Vereenvoudiging regelgeving > Eenvoudige, heldere taal

8 Digitale zelfredzaamheid verhogen > Vertrouwen Drempels > Privacy > Veiligheid toepassingen (e-banking, ) Acties > Een duidelijke identificeerbare digitale overheid (webuniversum) > Beveiligde omgeving

9 Digitale zelfredzaamheid verhogen > Motivatie Drempels Voordelen zien van digitale interactie Gebruikerservaring Acties > Vooraf invullen gekende gegevens > Snellere afhandeling digitale aanvragen

10 Multikanaalstrategie afdeling Informatiekanalen > Contactcenter 1700: Vlaamse infolijn: telefoonnummer Chat > Vanuit afdeling Informatiekanalen: Twitter Facebook > Begeleid digitaal via de hulpwidget Begeleiding in een digitaal loket Veel gestelde vragen (en antwoorden) en configureerbare contactopties

11 Is dit voldoende?

12 Zo kijken onze klanten naar ons VO: Vlaanderen.be VO: LNE.be VO: Agentschapondernemen.be LO LO LO VO: Milieuinfo.be

13 Zo zagen zij de aanvraag studietoelage 1 2 3

14 Zo zagen zij de aanvraag studietoelage

15 Zo zien zij de verschillende loketten

16 Onze informatie is versnipperd We starten webpagina s vanuit beleidsdoelstellingen, niet vanuit de taken van een gebruiker We denken in websites, niet in dienstverlening. +/- 500 websites binnen de VO, meestal om te informeren

17 Onze dienstverlening is versnipperd Inloggen brengt je door 3 of meer verschillende omgevingen Zoveel loketten en formulieren, zoveel verschillende stijlen en gedrag. Weinig consistent voor klanten. Loketten en formulieren staan vaak los van de informatie over het proces, en vaak los van menselijke begeleiding of hulp

18 Conclusies 1. We maken het onze klanten digitaal moeilijk We sturen hen van de ene website naar de andere, van het ene loket naar het andere We bouwen sites en formulieren zonder rekening te houden met elkaar, zonder ruimtelijke planning 2. We maken het onszelf moeilijk We beconcurreren elkaar op Google, verzinnen eigen domeinnamen, promoten onze eigen kanalen We botsen op dezelfde noden en problemen, en we betalen elk apart voor een oplossing We voorzien dezelfde functies in onze organisaties, en laten hen vaak dezelfde expertise opbouwen

19 Waar willen we naartoe? > Creatie van verschillende loket ondersteunende diensten voor een uniforme presentatie > Via consistentie in structuur, gedrag en vormgeving Herkenbaar, Betrouwbaarheid uitstralen, vertrouwen creëren Zelfredzaamheid van gebruikers verhogen Vermijden dat vragen moeten gesteld worden/dat onze sites vragen oproepen (Call avoidance)

20 Doel: ervaring van één loket

21 Doel: ervaring van één loket 1. Met een consistente gebruikerservaring. Voor de gebruiker moet het loket als één geheel overkomen, als één overheid aanvoelen, die niet enkel informatie maar diensten aanbiedt. 2. Het loket is niet één systeem, maar een universum van aan mekaar verwante websites, digitale diensten en formulieren die slim samenwerken, gegevens delen en volgens dezelfde principes en richtlijnen gebouwd zijn.

22 1. Consistent in vorm

23 2. Consistent qua inhoud data driven government

24 Gecombineerd tot een consistente gebruikerservaring

25

26 3. Consistent in gedrag, steeds voorspelbaar Inloggen Formulier invullen

27 Loket ondersteunende diensten voor een uniforme presentatie in de praktijk > Via de webuniversum webcomponenten UX webcomponentenbibliotheek De hulpwidget De global header en footer > Via de e-formulieren voor een uniforme interactie > Via Dossierstatusinformatie (DOSIS)

28 Webuniversum

29 Inzoomen op de componentenbibliotheek

30 Maak je digitale dienstverlening > Toegankelijk en gebruiksvriendelijk Alle componenten worden regelmatig getest en indien nodig aangepast. > Mobiel vriendelijk en cross-browser Ondersteuning voor mobiele breakpoints en voor alle populaire browsers > Semantisch gestructureerd HTML is verrijkt zodat ze leesbaar wordt door zoekmachines > In overeenstemming met het merkbeleid van de Vlaamse overheid We leggen de laatste hand aan alternatieve website headers en kleurenpaletten. Informeer ernaar

31 Ontlenen, hoe begin je eraan? > Think

32 Ontlenen, hoe begin je eraan? > Think > Wat wil je gaan doen Een goed uitgewerkt plan voor uw interface al dan niet met wireframes of een functioneel design. Ook een scherp geformuleerde doelstelling van de pagina en een customer journey (getekend pad van verschillende gebruikers hoe ze in aanraking komen met uw pagina) helpen het concept te verhelderen en vereenvoudigen keuzes over welke componenten te gebruiken. Informatie Vlaanderen ondersteunt overheden in deze fase rechtstreeks, of via raamovereenkomsten service design en gebruikerstesten. Contacteer ons voor meer informatie.

33 Ontlenen, hoe begin je eraan? > Think > Wat wil je gaan doen

34 Ontlenen, hoe begin je eraan? > Think > Wat wil je gaan doen > Welke doelstelling heeft de pagina kies juiste type Informatieve pagina's: om te ontdekken > Op dit soort pagina's ligt de nadruk op het ontdekken van informatie. De gebruiker van de website hoeft nog niet tot een transactie over te gaan, maar informeert zich over de dienstverlening van de overheid of het beleid. Transactiepagina's > Transactiepagina's leggen de focus op het voltooien van een actie, zoals een aanvraag van een premie, het indienen van een klacht of het aanvragen van een erkenning. Wat deze template kenmerkt, is de focus op de actie zelf, en deze pagina laat alle randvoorwaarden weg.

35 Ontlenen, hoe begin je eraan? > Think > Wat wil je gaan doen > Welke doelstelling heeft de pagina kies juiste type > Gebruik de templates

36 Ontlenen, hoe begin je eraan? > Think > Wat wil je gaan doen > Welke doelstelling heeft de pagina kies juiste type > Gebruik de templates > Gebruik de responsive grid

37 Huishoudelijk reglement UX webcomponentenbibliotheek > Versie 2.0 uitgebreid getest en in gebruik sinds najaar 2016 > Reeds meer dan 150 bouwstenen voor webpagina s en loketten > Platformonafhankelijk! > Volledig demoloket beschikbaar > Openingsuren: 24/7

38 Huishoudelijk reglement UX webcomponentenbibliotheek (2) > Lidmaatschap: Volg het stappenplan: 1. Leg een link naar onze CSS en javascript: abonneren op de assets. 2. Maak gebruik van de starttemplate met grid: link al gelegd met de assets. 3. Kopieer de html van de webcomponent die je wenst > Bereikbaar op

39 Inzoomen op de hulpwidget De juiste informatie op de juiste moment

40 Hulpwidget

41 Hulpwidget > Koppeling veel gestelde vragen (en antwoorden) per pagina Enkel vragen die op dat moment van toepassing zijn Geen handleiding vooraf > Contactopties Samenwerking met contactcenter > Bel mij op, mail en chat met voorlichter die getraind is > Afhankelijk van complexiteit Routering naar eigen backoffice > Telefonisch, koppeling naar mailformulier > Momenteel actief in enkele Vlaamse digitale loketten > Nieuw raamcontract 02/2017 ook voor lokale besturen

42 Definitie begeleid digitaal = ervoor zorgen dat burgers in het burgerloket bij elke stap Veelgestelde vragen en antwoorden krijgen aangeboden die op dat moment van toepassing zijn > = vermijden dat iemand eerst een handleiding moet lezen vooraleer hij van start gaat > = vermijden dat iemand onmiddellijk contact moet opnemen als hij vast dreigt te lopen Contact kunnen opnemen met de daartoe bevoegde overheid OF met een persoon die hem op dat moment kan verder helpen (bijvoorbeeld voorlichter in het contactcenter)

43 Belangrijke elementen Begeleiding bij elke stap (inclusief het aanmelden) Door zelfbediening (FAQ) of door persoonlijke ondersteuning (voorlichter of ambtenaar) Via het kanaal: dat de burger kiest (telefoon, chat, mail) OF dat op dat moment toegankelijk is (bijvoorbeeld enkel e- mail na de openingsuren) OF via het kanaal dat wordt ondersteund (weinig inhoudelijk bevoegde diensten bieden chat aan)

44 Toepassing hulpwidget Entiteit verzorgt contacten 1700 verzorgt contacten Met Bel mij functionaliteit

45 Starten met de hulpwidget > Start met grondige analyse > Intakegesprek > Opstellen van mogelijke vragen over jouw pagina, loket of product > Bepalen van de contactopties > Creatie van de hulpwidget door AIV > Integratie van de widget in je pagina

46 Toevoegen van de hulpwidget > Via Embedded code: intelligente code die ervoor zorgt dat de relevante info en de beschikbare contactmogelijkheden op de overeenkomstige webpagina verschijnt Informatiekanalen bezorgt embedded code aan afnemer Afnemer plaatst embedded code op webpagina > Tags in e-formulier: maakt tonen relevante FAQs per scherm mogelijk tags ~ google analytics tracking code tags in e-formulier gelinkt met overeenkomstige tags in widget, die naar info (Drupal) verwijzen

47 Admin Titel Connectie met contactcenter Settings: campagnecode FAQs Vraag <tag1>, <tag3> Vraag <tag1>, <tag2> Referentie Embedded code <script type="text/javascript" src="//widgets.vlaanderen.be/widget/live/a d31d4a248100bcddbc553ebe"></script> Website afnemer url: studietoelagen.be/ Redactie-omgeving Drupal Content-type Vraag Tags ingevoegd in e- formulier (google analytics tracking code) <tags> op website filtert vragen in widget <embedded code>

48 Inzoomen op de global header en footer

49 Herkenbaarheid: global header en footer

50 Global header

51 Global header: versies Webuniversum versie Standaardversie Corporate versie Contactmenu

52 Global footer

53 Organisatieregister

54 Roadmap voor ingebruikname

55 Waar zijn we nu?

56 Light gebruik

57 Medium gebruik

58 Heavy gebruik

59 Loket ondersteunende diensten voor een uniforme presentatie in de toekomst Wat brengt de nabije toekomst qua nieuwigheden?

60 Global header en footer: toekomst Manier om nieuwe generieke functionaliteiten op alle websites beschikbaar te maken: Aanmelden Profiel Zoeken Notificaties Contacteren

61 Vragen? Algemeen Informatie Vlaanderen Vlaanderen.be Contactcenter Vlaamse Infolijn Webuniversum