De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

1 KC Contingency Design Design voor als het fout gaat 7 September 2006, Nieuwegein Remko Mantel.

Verwante presentaties


Presentatie over: "1 KC Contingency Design Design voor als het fout gaat 7 September 2006, Nieuwegein Remko Mantel."— Transcript van de presentatie:

1 1 KC Contingency Design Design voor als het fout gaat 7 September 2006, Nieuwegein Remko Mantel

2 2 Agenda Wat is Contingency Design? Waarom Contingency Design?  Voorbeelden Hoe kan je Contingency Design toepassen?  40 richtlijnen (met veel voorbeelden van hoe het wel en vooral niet moet) bevindingen Opdracht …

3 3 Wat is Contingency Design? Contingency Design wordt ook wel Defensive Design genoemd  De gedachte achter contingency design is dat er geen ‘perfecte’ site bestaat - hoe zorgvuldig er ook wordt getest. Bezoekers zullen altijd problemen tegenkomen, hetzij door hun eigen handelen, hetzij door een fout in de site. Contingency design biedt bezoekers hulp om de problemen op te lossen. ‘Dit is niet wat ik zocht!’ ‘Heb ik nu wel of geen bestelling geplaatst?’ ‘Hoe kom ik nu weer terug op de startpagina?’ ‘Ik ben al mijn ingevulde data kwijt!’ ‘Waar is de pagina waarop ik op geklikt heb?’

4 4 Wat is Contingency Design? Contingency Design is het voorkomen van foutmeldingen en moet gebruikers helpen als er onverhoopt toch problemen voorkomen Contingency Design betekent het ontwerpen van een webervaring die niet teleur stelt: fool proof en mistake-proof ontwerpen. Dat ontwerpen zit o.a. in:  Afhandeling van foutmeldingen  Grafische ontwerpen  Programmeren  Instructie tekst  Informatie ontwerpen  Customer service

5 5 Wat is Contingency Design? Contingency voorbeelden in de ‘echte wereld’:  Reservebanden  Rookalarm  Verkeersborden  Parachutes  Medicijndoos  Airbags  Brandblussers  Veiligheidsgordels  Gasmaskers  Reddingsboten  Noodaggregaten

6 6 Waarom Contingency Design? Onderzoek door The Boston Consulting Group onthulde dat …  28% van alle online aankopen mislukte …  80% van de mensen die uiteindelijk wel wat kochten, hun aankoop zagen mislukken in een voorafgaande poging …  41% van de mensen die een mislukte aankoop poging op het internet deden er niet meer terugkomen …  90% van tevreden klanten aangeven terug te komen maar slechts 9% dat ook daadwerkelijk doet  Tevreden klanten 57% meer besteden dan ontevreden klanten Consequenties van slecht contingency design:  Verlaten winkelwagentjes  Mislukte registraties  Irrelevante zoekresultaten En dus …  Klanten die opgeven  Klanten die gefrustreerd zijn  Meer kosten via offline customer service En dus vooral …  Ontevreden klanten  Verlies van klanten  Minder omzet

7 7 Waarom Contingency Design? Goed contingency design zorgt dus voor:  Het voorkomen van fouten voordat ze voorkomen  Het weer goed terecht laten komen als mensen toch de fout zijn ingegaan  Betere usability Maar dus ook voor:  Betere conversie cijfers  Verbeterde klant loyaliteit  Meer omzet

8 8 Waarom Contingency Design? Slechte voorbeelden:

9 9 Waarom Contingency Design? Goede voorbeelden:

10 10 Hoe kan je Contingency Design toepassen? Kijk goed naar je eigen website en laat desgewenst een site review doen Met een minimale investering kun je namelijk al quick fixes doorvoeren Voorbeelden:  Een error boodschap die duidelijk uitlegt hoe je je probleem alsnog kunt oplossen  Een formulier dat valideert voordat het wordt verzonden  Een aangepaste ‘Page Not Found’ scherm  Contextuele hulp  Goede FAQ’s  Slimme zoekmachine  s als een product weer in voorraad is

11 11 Hoe kan je Contingency Design toepassen? 40 richtlijnen  Foutmeldingen  Taal  Formulieren  ‘Missing In Action’  Biedt de helpende hand  Elimineer obstakels  Zoeken  Niet op voorrad

12 12 40 richtlijnen - Foutmeldingen Een goede error laat een gebruiker direct zien dat: 1.Er een foutmelding is 2.Wat de fout is 3.Hoe de fout op te lossen Zorg voor foutmeldingen die meteen opvallen en duidelijk zichtbaar zijn 1

13 13 40 richtlijnen - Foutmeldingen 1.Toon bovenaan de pagina en op de plek waar het probleem zich voordoet (waar het opgelost moet worden) 2.Presenteer het probleem in dikgedrukte (rode) tekst 3.Voeg een probleem icoontje toe 4.Biedt oplossingsmogelijkheden 5.Dwing gebruikers niet om de data opnieuw in te moeten voeren Gebruik kleuren, icoontjes en teksten die duidelijk oplichten en uitleggen wat het probleem is 2

14 14 40 richtlijnen - Foutmeldingen Gebruik steeds dezelfde kleuren, meldingen, fonts, teksten en toon ze steeds op dezelfde manier en plek Zorg voor een eenduidige manier van foutmeldingen 3

15 15 40 richtlijnen - Foutmeldingen Probeer daar waar mogelijk fouten te verzamelen en ze te tonen op een pagina die gebruikers in staat stelt om te fouten te herstellen zonder ‘backtracking’. De ‘Backwards’ button zorgt er misschien wel voor dat je terug kan naar je formulier maar meestal staat daar niet wat de fout is of ben je je data kwijt … Schakel de behoefte om ‘forward’ en ‘backward’ te navigeren uit 4

16 16 40 richtlijnen - Taal Gebruik zo simpel mogelijke taal die iedereen kan begrijpen. Gebruik geen obscure codes, afkortingen, technisch jargon of interne taal Gebruik geen taal die onbekend is voor je klanten 5

17 17 40 richtlijnen - Taal

18 18 40 richtlijnen - Taal Klanten willen snel weten wat ze fout hebben gedaan en hoe ze het kunnen oplossen. Tips om bruikbare teksten te schrijven:  Een heldere kop met alleen de meest belangrijke informatie erin  Biedt tekst puntsgewijs aan in plaats van blokken tekst  Gebruik dikgedrukte letters en kleurenvariaties om cruciale informatie te laten opvallen  Schrijf kort maar bruikbaar Hou teksten kort en begrijpelijk 6

19 19 40 richtlijnen - Foutmeldingen Netheid is meer dan etiquette, het is goed zaken doen. Boze klanten moet je fluwelen handschoenen behandelen. Gaat er iets mis op je website dan moet je netjes zijn:  Sla geen beschuldigende toon aan en leg de schuld niet bij de klant  Gebruik woorden als ‘alsjeblieft’ en ‘bedankt’  Gebruik niet alleen maar hoofdletters want dan lijkt het als je aan het schreeuwen bent  Denk verjongend en niet veroordelend Wees netjes 7

20 20 40 richtlijnen - Formulieren Veel mensen haken af als ze heel veel velden moeten invullen. Laat daarom duidelijk zien welke velden echt verplicht zijn. Gebruik daarom technieken als:  Een asterix (of vergelijkbaar icoon) naast het veld  De woorden ‘benodigd’ of ‘optioneel’ naast het veld  Druk benodigde velden dik af Laat alleen benodigde of optionele velden opvallen 8

21 21 40 richtlijnen - Formulieren Hoe voer je een telefoonnummer in? Of een creditkaartnummer? Of een datum? Accepteer alle formaten …  0031-(0)    Accepteer invoer in alle te verwachten formaten 9

22 22 40 richtlijnen - Formulieren Er zijn verschillende manier om te zorgen voor goed ingevulde data:  Limiteer de lengte van invoervelden Gebruik HTML form elementen voor een valide invoer  (bijvoorbeeld een postcode van max 6 karakters)  Geef voorbeelden van in te vullen data Geef correcte voorbeelden om verwarring te voorkomen  (bijvoorbeeld: 3551 TN)  Begeleide formulieren Gebruik de lay out van formulieren om gebruikers te helpen  (bijvoorbeeld pull down menu’s of 2 gescheiden velden voor 1 postcode) Geef voorbeelden of hints voor in te vullen velden om schone data te garanderen 10

23 23 40 richtlijnen - Formulieren Indien er een limiet zit iop een veld (aantal karakters, aantal adressen) meld dan de limiet. Anders blijft de gebruiker net zo lang proberen totdat het wel werkt wat frustrerend kan zijn. Noem de expliciete limieten van invoervelden 11

24 24 40 richtlijnen - Formulieren Laat onbeschikbare opties weg Als er niks te kiezen valt laat het dan weg Als klanten niet kunnen kiezen, laat de keuze dan ook niet zien 12

25 25 40 richtlijnen - Formulieren Sommige velden hebben validatie nodig, valideer zo snel mogelijk om de klant op eventuele fouten te kunnen wijzen. Technische tip: gebruik java scripts om te valideren en gebruik als back up een server side validatie (voor als java disabled is door de gebruiker) Valideer (zo snel mogelijk) invoervelden 13

26 26 40 richtlijnen - Formulieren Reset buttons zijn een uitnodiging tot frustratie, 1 verkeerde klik en al je data is weg Als je dan toch een rest button nodig hebt (en dat kan natuurlijk), laat dan via een tussenstap de reset bevestigen Voorkom dubbel klikken op submit buttons door hem te enablen nadat er op is geklikt Elimineer ‘Reset buttons’ en zorg ervoor dat de submit button uit gaat als hij eenmaal is aangeklikt 14

27 27 40 richtlijnen - Formulieren Klanten zullen het appreciëren als je pro actief:  Klantdata opslaat Sla ingevulde data automatisch op of geef klanten zelf die keuze  Verteld dat de reeds ingevoerde data is opgeslagen Gebruik je website of om te herinneren dat ze gemakkelijk terug kunnen gaan naar een verlaten formulier  Makkelijk toegang biedt tot eerder verlaten formulieren Zorg dat klanten makkelijk toegang hebben tot verlaten formulieren om ze af te maken Help afhakers door informatie op te slaan en te bewaren 15

28 28 40 richtlijnen – Missing in action Standaard 404 foutmeldingen zijn verwarrend en helpen gebruikers voor geen meter. Ontwerp op maat gemaakte pagina’s die de situatie uitleggen en hulp bieden Tips voor op een 404 pagina:  Naam en logo van je bedrijf  Uitleg waarom de klant deze pagina ziet  Lijst met mogelijke redenen waarom het fout is gegaan  Links naar je homepage of andere handige pagina’s  Je zoekmachine om alsnog te vinden wat men zocht  Een link om de fout te melden Biedt op maat gemaakt “404 - page not found” meldingen 16

29 29 40 richtlijnen – Missing in action

30 30 40 richtlijnen – Missing in action Iedereen maakt wel eens een spellingsfout, ook in een url … Zorg dat je webservers zijn uitgerust met een subdomain wildcard zodat elke “*.jouwdomein.nl” zal worden geredirect naar je homepage flash Redirect succesvol naar ‘bijna goede url’s’ 17

31 31 40 richtlijnen – Missing in action Wie geven er om ALT tags?  Bezoekers met een langzame verbinding  Bezoekers die afbeeldingen uit hebben staan  Visueel gehandicapten  Zoekmachines Gebruik ALT tags voor afbeeldingen 18

32 32 40 richtlijnen – Missing in action

33 33 40 richtlijnen – Missing in action Vraag jezelf af of het wel nodig is om de allernieuwste browser of plug-ins te gebruiken voor je website Sluit bezoekers met oude technologie niet uit. Biedt alternatieve versies en technology upgrade informatie 19

34 34 40 richtlijnen – De Helpende Hand Bieden Minimaliseer het aantal kliks dat een bezoeker moet doorlopen, zodat ze bijvoorbeeld een (verkoop?)proces niet hoeven te verlaten Leg, indien nodig, moeilijke termen ook op de pagina zelf uit, zodat (wederom) klanten niet weg hoeven te klikken van een (verkoop?)proces (b.v. ingewikkelde betaal- of verzendmanieren) Beantwoord vragen op dezelfde pagina als waar ze gesteld worden 20

35 35 40 richtlijnen – De Helpende Hand Bieden Soms is het beantwoorden van vragen op dezelfde pagina niet voldoende.  ‘Hulp’ moet een duidelijke link zijn op de homepage en moet onderdeel zijn van de algemene navigatie Op deze manier kunnen bezoekers op elke pagina makkelijk en eenduidig antwoorden krijgen  Gebruik een algemeen aanvaardbare naam voor de link ‘Hulp’ is een algemeen aanvaardbare naam maar ‘FAQ’s’ of ‘Tips & Trucs’ kan als dat beter bij je content past  Organiseer je Hulp sectie op een slimme manier Als de hulp sectie heel veel content bevat moet het wel overzichtelijk en makkelijk blijven om erbij te kunnen komen Biedt een gebruikersvriendelijke ‘Hulp’ sectie aan en zorg voor duidelijke links 21 a

36 36 40 richtlijnen – De Helpende Hand Bieden Een hulpsectie moet in ieder geval het volgende kunnen bieden:  Een zoekfunctionaliteit Laat bezoekers evt. via sleutelwoorden zoeken ipv ze door de hele content te laten browsen  Nadruk op meest gestelde vragen Als 80% van de bezoekers het antwoord zoekt op 5 vragen is het handiger deze er uit te lichten  Onderverdeling in onderwerpen of categorieën Een grote berg aan vragen kan intimiderend werken. Gebruik categorieën om het makkelijker te maken  Een link voor verdere assistentie Laat bezoekers direct contact opnemen als ze niet kunnen vinden wat ze zoeken Biedt een gebruikersvriendelijke ‘Hulp’ sectie aan en zorg voor duidelijke links 21 b

37 37 40 richtlijnen – De Helpende Hand Bieden

38 38 40 richtlijnen – De Helpende Hand Bieden Voordelen van Hulp Boards en Forums:  Het geeft klanten instant toegang tot antwoorden  24 uur per dag  Eenmaal opgezet draaien ze vanzelf  Klanten waarderen de open communicatie  De contant kan gemonitoord worden om zwakke punten te ontdekken en op te lossen voor de toekomst Laat klanten zichzelf trainen middels online forums en trainingsmogelijkheden 22

39 39 40 richtlijnen – De Helpende Hand Bieden

40 40 40 richtlijnen – De Helpende Hand Bieden Zorg ervoor dat de contact informatie van je bedrijf duidelijk en vindbaar vermeld. Zorg dat je kunt terugvallen op een andere manier van hulp (Chat, Telefoon of ) 23

41 41 40 richtlijnen – De Helpende Hand Bieden Klanten hebben de tijd genomen een mail te schrijven. Laat dus weten dat je hun mail hebt ontvangen en beantwoord deze snel (het liefste binnen 24 uur). Snelle en goede antwoorden zorgen immers voor een klanten loyaliteit Tips om mails op een hulpvolle manier te beantwoorden:  Gebruik een duidelijke subject regel  Gebruik een functioneel adres  De 1e paragraaf moet een heldere samenvatting geven van de inhoud  Gebruik waar nodig referentie- of trackingnummers zodat er gerefereerd kan worden door klanten  Benoem de precieze vraag, klanten weten dit vaak niet meer  Leg uit wat een klant moet doen als het probleem onopgelost blijft  Als je een link meestuurt, zorg dan dat de pagina waar hij terecht komt relevant is  Geef additionele support details mee (call center adres of telefoonnummer)  Onderteken de mail zodat de klant kan zien wie de mail heeft verstuurd  Beantwoord de vraag die was gesteld Beantwoord s snel en effectief 24

42 42 40 richtlijnen – De Helpende Hand Bieden Zorg voor ondersteuning via een hint of een service Zorg voor hulp bij inloggen (via tips of ondersteuning 25

43 43 40 richtlijnen – Verwijder Obstakels Veel formulieren hebben geen ‘Back Button’ en alleen maar een “Forward Button’. Bedenk maar eens hoe vaak je deze button gebruikt om snel even pagina terug te gaan om te kijken wat je ook al weer had gedaan of had ingevuld Zet je browser’s ‘Back Button’ niet uit 26

44 44 40 richtlijnen – Verwijder Obstakels Langzaam ladende pagina’s, grote blokken tekst, ontoepasselijke humor maken een probleem van een klant alleen maar erger Een goede en snelle website is belangrijker dan een ‘leuke’ website 27

45 45 40 richtlijnen – Verwijder Obstakels Geef klanten direct antwoorden, laat ze niet eerst een extra hindernis nemen door ze te laten registreren Geen verplichte registratie voor hulpzoekenden 28

46 46 40 richtlijnen – Verwijder Obstakels Bedrijfskritische content moet niet in de weg gezeten worden door reclames of promoties. Al helemaal niet in het geval ten tijde van errors en mogelijke crisispunten Geen reclame of advertenties die content blokkeren 29

47 47 40 richtlijnen – Verwijder Obstakels Gedurende ‘multistappen processen’ zoals het afrekenen of een registratie, kunnen onnodige navigatie elementen zorgen voor obstakels. Zorg in dit geval alleen voor de op dat moment benodigde navigatie en voor een uitgang, meer niet. Elimineer onnodige navigatie tijdens ‘meerstappen processen’ 30

48 48 40 richtlijnen – Zoeken Wees eerlijk en helder over het feit dat er geen antwoorden kon worden gevonden die met het onderwerp te maken hebben. Geef duidelijke uitleg als er geen zoekresultaat wordt gevonden of als er alleen maar indirecte antwoorden zijn 31

49 49 40 richtlijnen – Zoeken Help bezoekers een handje door proactief te anticiperen. Jouw zoekfunctionaliteit moet algemene ‘fouten’ kunnen ondervangen. Gebruik logfiles van je zoekfunctionaliteit om onderstaande fouten te ontdekken en er op te anticiperen Voorbeelden: Anticipeer op voorkomende fouten en toon relevante resultaten 32 OnderwerpVoorbeelden SynoniemenJas – Jack MeervoudenDatabases – Database PuntenKNVB – K.N.V.B. HoofdlettersiPod – ipod StreepjesHewlett-Packard – Hewlett Packard AfkortingenAfkortingen – Afk. SpelfoutenOracle – Oralce Engelse variantenColor - Colour

50 50 40 richtlijnen – Zoeken Zoeken online is soms zoeken naar de ‘naald in de hooiberg’. Veel antwoorden is niet altijd beter dan geen antwoorden. In zo’n geval is het handig mogelijkheden te hebben om dieper te kunnen zoeken Dit kan helpen in het geval van te veel resultaten:  Toon onderwerp categorieën  Toon de meest populaire resultaten eerst  Geef een sorteer mogelijkheid  Biedt zoekfilters aan  Verwijs naar gerelateerde onderwerpen Te veel resultaten? Biedt mogelijkheden tot verdere filtering of verdieping. 33

51 51 40 richtlijnen – Zoeken

52 52 40 richtlijnen – Zoeken Laat resultaat pagina’s niet doodlopend zijn, biedt op de resultaten pagina meteen de mogelijkheid verder of opnieuw te zoeken Geen resultaten? Geef de klant makkelijke uitbreidingsmogelijkheden om meteen verder te zoeken. 34

53 53 40 richtlijnen – Zoeken Misschien is het voor de beheerder en de ontwerper een hele makkelijke zoekmachine maar gebruikers hoeven dat niet zo te ervaren en te vinden! Leg uit hoe het werkt, geef voorbeelden en biedt tips aan. Geef tips om zoekresultaten te verbeteren. 35

54 54 40 richtlijnen – Zoeken Complexe zoekmachines kunnen gebruikers intimideren Vertrouw niet op geavanceerde zoekmachines 36

55 55 40 richtlijnen – Onbeschikbare producten Vertel klanten meteen dat producten niet beschikbaar zijn, klanten waarderen eerlijkheid. Laat zien dat producten niet beschikbaar zijn via duidelijk teksten of iconen Wees eerlijk over producten die niet beschikbaar zijn 37

56 56 40 richtlijnen – Onbeschikbare producten Veel klanten vinden het prettiger te moeten wachten in plaats van steeds te moeten terugkeren totdat een product wel weer beschikbaar is. Communiceer wel duidelijk en helder over dit proces! Als een product later wel beschikbaar komt, leg dan uit wanneer, geef productinformatie en neem orders aan voor de toekomst 38

57 57 40 richtlijnen – Onbeschikbare producten Verwacht niet dat klanten blijven terugkomen om te zoeken of een product er al (weer) is. Biedt ze aan hen pro-actief op de hoogte houden via een als het product er weer is Biedt notificaties aan 39

58 58 40 richtlijnen – Onbeschikbare producten Als je klanten niet 100% kunt geven wat ze zoeken, probeer dan producten aan te bieden die een passende vervanging zijn Toon vergelijkbare producten die wel beschikbaar zijn 40

59 59

60 60 Resultaat contingency score lijst: 4.6 !! Quick wins:  Verbetering van de formulieren  Aangepaste 404 – Not Found Pagina  Betere hulp pagina Lange termijn:  Betere zoekmachine

61 61 – verbetering van de formulieren Geen uitleg hoe velden in te vullen Geen uitleg over gele bolletjes ‘Solliciteert op’ veld is aanpasbaar

62 62 – 404 not found

63 63 Contingency Design opdracht En nu jullie! Ga in 3 tallen kijken naar my.amis.nl  Neem de richtlijnen mee  Neem de checklist mee En … Kom met verbetervoorstellen


Download ppt "1 KC Contingency Design Design voor als het fout gaat 7 September 2006, Nieuwegein Remko Mantel."

Verwante presentaties


Ads door Google