Logo 1001 tips

Gratiszoekertjes.com

Vorige pagina

Een bevraging of enquête gebruiksvriendelijker maken

  1. Startpagina Sharepoint oplossingen en handleidingen
  2. Top 10 verbeteringen en vernieuwingen in Sharepoint 2010
  3. Werken met het webonderdeel Inhoudseditor (CEWP)
  4. Onderdelen van een Sharepoint pagina verbergen
  5. Dynamische KPI-lijst met Google charts
  6. Lijst met grote tekstvelden inklappen en uitklappen
  7. Lange veldnamen in een formulier afbreken
  8. Een bevraging of enquête gebruiksvriendelijker maken
  9. Gratis Sharepoint Designer!

Bevragingen of enquêtes zijn zeer krachtige hulpmiddelen om in grotere organisaties snel de mening op te vragen over bepaalde onderwerpen.

Toch hebben bevragingen het nadeel dat je "out of the box" weinig aan het design kan wijzigen. Als je bijvoorbeeld een bevraging hebt met vragen van het type "Beoordelingsschaal (een matrix met keuzen of een Likert-schaal)", vallen direct enkele kenmerken op van mindere "gebruiksvriendelijkheid" of "usability".

  1. De tekst is zeer klein (je kan dan wel inzoomen en uitzoomen, maar dan verdwijnt een deel van de schaal);
  2. als je een radiobutton wil aanklikken weet je niet altijd goed of je op de juiste lijn zit, ...;
  3. de nummers van de schaal vallen niet erg op, het zou beter zijn als ze wat vetter waren;
  4. de knop "Opslaan" zorgt bij veel gebruikers voor verwarring. Veel gebruikers denken dat ze de bevraging hebben voltooid als ze op "Opslaan" hebben geklikt. Niks is minder waar. "Opslaan" is bedoeld om de bevraging tijdelijk te bewaren om er later aan verder te werken. Bij lange enquêtes met veel vragen en paginascheidingen, is het daarom beter om de knop "Opslaan" gewoon te verbergen.

Sharepoint bevraging met klassieke lay-outFiguur 1: Sharepoint bevraging met klassieke lay-out

Een oplossing zou zijn om:

  1. de tekst standaard iets groter te maken;
  2. een lijntje toe te voegen na elke vraag;
  3. een "hover" effect toe te voegen wanneer je met de muisaanwijzer over een vraag en de antwoordmogelijkheden gaat;
  4. de nummers van de schaal in het vet te zetten;
  5. de knop "Opslaan" te verbergen

In figuur 1 zie je de standaard lay-out, in figuur 2 zie je de gewijzigde lay-out met grotere tekst, lijntjes tussen de vragen, een vettere schaal en een hover-effect op de rijen met vragen.

Sharepoint enquête met aangepaste lay-outFiguur 2: Sharepoint enquête met aangepaste lay-out: grotere tekst en hover effect

De oplossing: een CEWP of webonderdeel Inhoudseditor

Zoals zo vaak is het CEWP een oplossing omdat je er javascript en CSS mee kan verwerken die de pagina er anders laat uit zien. We gebruiken opnieuw JQuery.

Het komt erop neer dat je eerst de juiste "id's" opzoekt van de verschillende onderdelen van de vraag, zodat je deze met javascript en CSS kan manipuleren.

Met Firefox kan je dankzij de plugin Firebug makkelijk alle onderdelen van een pagina oproepen en bekijken.

Hoe ga je tewerk?

Hetgeen volgt moet je per vraag doen waarvoor een paginascheiding is voorzien.

  1. Klik op "Reageren op deze enquête"
  2. Via de knop Siteacties krijg je geen mogelijkheid om de pagina te bewerken.Voeg daarom in de URL bovenaan direct na NewForm.aspx? het volgende toe: ToolPaneView=2&. Zo kom je in de "bewerkingsmodus".
  3. Voeg boven de vraag een CEWP (webonderdeel Inhoudseditor toe).
  4. Bewerk het webonderdeel en vink aan onder Vormgeving "Verbergen". Hierdoor is er niks te zien van dit webonderdeel.
  5. Klik op de knop "Broneditor" en voeg onderstaand javascript toe.
  6. Sla alles op

Klaar! Als je iets bergijpt van javascript en CSS zal je de onderstaande code zeker wel begrijpen. Begrijp je ze niet? Geen probleem want ze werkt wel.

<script type="text/javascript">
//?PageView=Shared&ToolPaneView=2
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>

<style type="text/css">
.onderlijnd { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; }
.rijhover { background-color: #FBFD9B; }
</style>

<script type="text/javascript">
$(document).ready(function(){

//verbergen van de knop Opslaan
$(":inputs[value='Opslaan']").hide();

//opmaak van de cellen met vragen
//$("th.ms-gridT1").addClass("stijl1"); //dit werkt niet overal: twee classes naast elkaar!
$("th.ms-gridT1").css({'font-size' : '.8em', 'width' : '500px', 'border-bottom-width' : '1px', 'border-bottom-style' : 'solid', 'border-bottom-color' : '#CCCCCC', 'padding-top' : '5px', 'padding-bottom' : '5px'});

//opmaak van de kolomkoppen boven de radioknoppen
//$("th.ms-gridCol").addClass("stijl2"); //dit werkt niet overal: twee classes naast elkaar!
$("th.ms-gridCol").css({'font-weight' : 'bold'});

//opmaak van de cellen met radiobuttons (onderlijnen)
$("td[align=center]").addClass("onderlijnd");

//hover over de rijen met radioknoppen, gebruik eventueel een andere hover-kleur
$("table[summary=Vraag beoordelingsschaal] tr").hover(
function () {
$(this).addClass("rijhover");
},
function () {
$(this).removeClass("rijhover");
}
);
});
</script>

Tip: sla het webonderdeel met de javascript/css code op in de galerie met webonderdelen, zodat jij of een collega het webonderdeel steeds opnieuw kan gebruiken. Hoe?

  1. Klik op Siteacties > Pagina bewerken
  2. Klik op het pijltje bij Bewerken van het webonderdeel en kies "Exporteren"
  3. Sla het webonderdeel lokaal op
  4. Ga naar de hoofdpagina van de sitecollectie
  5. Klik op Siteacties > Site-instellingen > Alle site-instellingen wijzigen
  6. Klik bij Galerieën op Webonderdelen
  7. Uploaden
  8. Geef bij Groep en Snel groepen toevoegen uw eigen naam op, zodat het webonderdeel achteraf in de lijst met webonderdelen voorkomt onder uw eigen naam. Vermeld ook steeds of het webonderdeel boven of onder de lijst moet staan.
Share to Facebook Share to Twitter Blogger Wordpress LinkedIn Myspace Email Meer...
Laatste aanpassing op zaterdag 26 juni 2010 om 14:13u
Auteur: Dries Hauwaert