Hoi Nandie,
Je nieuwe vraag in
nummer #3 hierboven, over het maken van de interactieve checklist, ben ik niet vergeten.
Zo'n online invullijst is heel iets anders dan een papieren formulier, en zoiets maken is een kunstje apart.
Ik heb wat zitten broeden, en ook wat zitten knutselen om het broedwerk in praktijk te brengen (althans een beginnetje).
De vereisten
Er moet een eenheid zijn tussen schermbeeld en bruikbaarheid, de tekst/gebruiksaanwijzing moet helder en eenvoudig zijn, de invuller mag niet "ontsnappen" (door iets niet of verkeerd in te vullen), en qua techniek moeten pagina-structuur, opmaak en functionaliteit goed op elkaar aansluiten.
Hoe kan ik 'n betere conversie maken, of maak ik beter 'n nieuwe interactieve checklist en met welk programma ?
De techniek
De huidige lijst (
www.vroegdetectie.be/index.html) wordt via opsturen naar de server door een asp-pagina verwerkt tot de resultaat-bladzijde. Dat zou ook met php kunnen. Of je de asp-verwerking via een conversie-tool kunt omzetten in een php-verwerking, weet ik niet. Het zou heel goed kunnen dat je de php-verwerking zelf opnieuw moet maken.
Maar behalve het server-side laten verwerken is er ook nog een andere optie: het resultaat niet op de server te laten berekenen en als resultaat-pagina te serveren, maar de hele handel op de pc van de bezoeker (client-side) te laten plaatsvinden. Dat kan dan met javascript.
- Voordelen o.a.: er is onmiddellijke feedback mogelijk tijdens het invullen, en je kunt de toelichtingen inbakken als een soort pop-ups (maar ook weer wegklikken). Daarnaast is er optimale privacy: de server kan niet stiekem het ip-adres registreren van degene die een invulformulier via de server laat berekenen.
- Nadeel: bezoekers met een browser zonder javascript (bv. pure text-browsers) en bezoekers met uitgeschakeld javascript kunnen de checklist niet online gebruiken.
- Daartegenover staat: er is altijd nog de printbare pdf-versie, waarmee men de lijst kan invullen (wel zelf berekenen!) - en volgens de statistieken hebben maar heel erg weinig mensen javascript uitgeschakeld staan in hun browser. Ik gok dat zeker meer dan 93,7861% van de bezoekers de lijst gewoon kan invullen.
Conclusie: ik zou voor de javascript-oplossing gaan.
- Als iemand het hier niet mee eens is: hij/zij melde zich!
Nu is javascript geen
programma, maar een
taal waarmee bewerkingen kunnen worden uitgevoerd. Er is geen pasklaar programma waarmee je kunt opgeven wat er in javascript moet gebeuren, en dat daarna keurig de javascript-code ophoest. Oftewel: het javascript moet zelf geschreven worden op basis van de logica die de route van het rekenwerk aangeeft. Omdat javascript een hele eigen taal is, zal je die niet "even" kunnen leren; dat vergt het nodige studiewerk; want één puntje of komma'tje verkeerd en het werkt niet, of heel anders dan bedoeld. Als je nog niet met javascript vertrouwd bent, zou je dat wellicht kunnen uitbesteden.
Uiterlijk van de checklist
Er moet rekening mee gehouden worden dat niet alleen professionals de checklist online kunnen gebruiken, maar iedereen met de checklist aan de slag kan gaan.
De "beweging van invullen" is het gebruikersvriendelijkst als deze de gewone leesroute "van links naar rechts" en dan "van boven naar beneden" volgt. Nu kom je eerst een nog niets zeggend I-icoontje tegen, daarna lees je pas het item-onderwerp. Wie iets meer wil weten, moet dan terug van rechts naar links om op het I-symbooltje te kunnen klikken. Geeft het risico dat men liever meteen wil invullen, en zonder de aanvullende info toch maar gaat invullen.
Logischer is: onderwerp zien, dan nieuwsgierig worden naar wat men ermee bedoelt (dus dan pas de I, die nu zin heeft), en dan invullen.
Ook de verticale onderbreking (lege kolom) onderbreekt de leesrichting van onderwerp naar invulvakje:
De mededelingen over de puntenberekening in de checklist zelf zijn niet nodig voor het online invullen (en leiden af van het invullen). De berekeningsmethode kan beter op een andere plek uitgelegd worden. Waarschijnlijk is een aparte pagina daarvoor het beste, anders komt er veel te veel op de invulpagina terecht.
Nu wordt alleen één invulvakje gebruikt: aankruisen als iets het geval is. Er is niet iets ingebouwd waardoor men een signaal krijgt als iets per ongeluk
niet is ingevuld (bv. "die vraag moet ik later nog eens bekijken", maar dat later vergeten en toch op de "Resultaat"-knop drukken.
Op die manier hoeft "niets invullen" niet altijd "nee" te betekenen, en kan het resultaat vertekend worden. Daarmee ontstaat het risico dat het psychose-risico te laag wordt ingeschat, en dat zal zeker niet de bedoeling zijn.
Ik zou ervoor pleiten om zowel een "ja" als een "nee" vakje in het formulier te zetten, zodat men wel een keuze moet maken. Bij kijken op het scherm wordt dan ook meteen duidelijk dat bij een bepaalde vraag nog geen antwoord is gegeven, en dat men daar nog iets mee moet doen.
- Ook handig als men tijdens het invullen een telefoontje o.i.d. krijgt, en men later moet verder gaan: dan zie je waar je gebleven bent.
- Voor wie zich naderhand bedenkt, moet er uiteraard ook een mogelijkheid zijn om "ja" in "nee" te veranderen, of omgekeerd.
De toelichtingen bij het I-symbool staan nu telkens op een aparte webpagina. Dat maakt dat je voortdurend aan het pagina-wisselen bent, als je de lijst serieus wilt invullen. Op papier is dat niet zo erg, want dan leg je de toelichtingspagina er gewoon naast. Maar online ligt dat dus anders. Ik zou de toelichting bij een vraag op de checklistpagina zelf zetten: meteen in de buurt van de vraag.
Om nu niet een vreselijk grote en onoverzichtelijke pagina te krijgen, zou ik de toelichtingen per vraag aan- en uitklikbaar maken. Wie de toelichting bij een vraag gelezen heeft, kruist ja/nee aan, en sluit de toelichting weer. Hup, naar de volgende vraag, en de volgende toelichting snel aangeklikt!
De verleiding om de toelichting aan te klikken, moet erg groot zijn, want daarin staat eigenlijk de essentie van de vragen (+ de tips). Daarom zou ik niet alleen het I-symbooltje aanklikbaar maken, maar ook de regel van het onderwerp zelf: beiden geven ze dan de toelichting. Tegelijkertijd wordt dan ook het oppervlak dat geraakt moet worden voor de klik flink groter (het I-symbooltje is erg klein, en zelfs voor bedreven surfers lastig aan te klikken; met name bij hogere resoluties).
Een dergelijke verbetering van de gebruiksvriendelijkheid kan ook plaatsvinden bij de aankruisvakjes. Die zijn van nature vrij klein, maar met CSS kan je daar een eigengemaakt vakje voor in de plaats zetten. Het aanklik-oppervlak kan zo stevig toenemen, wat het invullen een stuk makkelijker en plezieriger maakt.
De huidige lijst is opgemaakt als tabel, en dat geeft een aantal beperkingen (onflexibele indeling, naast erg onoverzichtelijke html). Met een css-opmaak kan alles precies zo komen te staan zoals je het hebben wilt. Met wat geavanceerd stoeiwerk, dat wel (o.a. om alle browsers hetzelfde te laten doen).
Met toelichting en al kan een onderwerp er bv. als volgt in de html uitzien:
HTML:
<li id="vraag1">
<h3><img src="images/transparant.gif" alt="">
<a href="#" title="Toelichting (aan/uit)" onclick="toggleInfo('info1'); return false;">
De familie is bezorgd</a>
<input id="nee1" class="nee" type="button" onclick="turnOnNee('nee1')">
<input id="ja1" class="ja" type="button" onclick="turnOnJa('ja1')"></h3>
<ul id="info1">
<li><p>Familieleden uiten hun bezorgdheid betreffende de cliënt,
de familie heeft het gevoel dat er iets aan de hand is met cliënt.</p>
<p><strong><em>Hoe bevragen:</em></strong><br>
Bij familie zelf bevragen of via derden (bvb. de verwijzer).<br>
Kan ook blijken uit het verhaal van de cliënt zelf.</p>
<p><strong><em>Relevante vragen:</em></strong><br>
<em>"Heb je het gevoel dat je familie zich zorgen maakt over jou?",
"Waaruit leid je dat al dan niet af?", "Gedraagt jouw familie zich
anders naar jou toe?", "Op welke manier?"</em></p>
</li>
</ul>
</li>
In het algemeen zou ik proberen de pagina's "licht en luchtig" te maken (geen zware kaderlijnen e.d.), het onderwerp is van zichzelf al zwaar genoeg.
Ook zou ik nog eens goed kijken naar het ontwerp van de header. Op een gegeven moment kreeg ik de associatie met een hamer (of een bijl op z'n kop):
... en die associatie liet me niet meer los. Maar met dat ding boven m'n hoofd moet ik er vlak onder de checklist gaan invullen: daar voel ik me niet echt prettig bij.
Het heeft denk ik ook te maken met het hoekige en daardoor agressieve van de vorm. Met iets ovalerigs zal het beter en neutraler overkomen voor de bezoeker (en ook minder de aandacht trekken ten opzichte van de tekst).
De pagina is ontworpen om ook nog bij een resolutie van 800x600px te kunnen draaien; prima. Hij is alleen net iets te breed om er lekker om te passen: toch nog een horizontale scrollbar nodig.
Een stuk of 10 pixeltjes minder breed en het is voor 800breed in orde. Uit dit screenshotje blijkt meteen, dat de checklist het beste meteen onder de header kan komen: dan ziet iedereen tenminste het bovenste stuk van de checklist. De uitleg "Doel van de Checklist" kan net zo goed in de kolom ernaast, dan mist men niets.
Tenslotte nog als suggestie om ook de lettergrootte goed in de gaten te houden. De checklist moet ook bij vergroting van de lettergrootte niet uit zijn voegen springen (dat vergroten kan de bezoeker altijd doen).
Hetzelfde gaat spelen bij het menu in de header: dat is nogal krap om te vergroten. Misschien is het 't beste om images van de menu-item teksten te maken, dan zit er geen beweging in. Met css-techniek kan daar
een mooie hover-variant van gemaakt worden.
==========================================
Zo, en nu wil je na al dit gepraat natuurlijk graag nog iets zien ook!
Dat kan:
Het is een beginnetje: de checklist is nog lang niet compleet, en de resultatenpagina is er ook niet. Er zit wel alvast het javascript in voor het aan- en uitvinken en voor het oproepen/verbergen van de toelichtingen, maar het script voor het rekenwerk moet nog toegevoegd worden.
Er zou ook nog een speciale printversie ontwikkeld kunnen worden, zodat men van de aangevinkte items en de resultatenpagina een uitdraai kan maken. Via de menu-optie Bestand > Afdrukvoorbeeld zie je dat het nu nog niet ideaal is. Maar dit kan ook altijd later nog. In principe zitten in de html voldoende aangrijpingspunten om een aangepast stylesheet voor een printversie te maken (bv. zonder alle toelichtingen).
Met vriendelijke groet,
CSShunter
