Health Infobase Design Manual
Table of contents
Continuous improvement
On this page
A digital mindset
We need to move away from the “launch and forget” mentality. It's crucial to adopt a digital mindset (not a print mindset), where nothing is ever final.
Even if research and testing is done well, some issues or potential improvements may only appear after launch. The work is never “done”.
Start from the performance measurement framework
If your performance indicators are not satisfactory, use evidence to improve your product.
Get evidence and improve
Many sources of data can be used, namely:
- heuristics evaluation
- web analytics
- user feedback
- usability testing
Heuristic evaluation
A heuristic evaluation is a way to assess a digital product or an interface based on a set of usability principles. Generally, the assessment is done by more than one person, and assesses the product based on principles such as:
- is the product findable?
- is the content clear?
- is the product connected to the rest of the ecosystem?
- is the product human-centered?
- Is the product helpful?
Web analytics
Consult web analytics to understand current user behaviour on your product.
See web analytics metrics for details.
User feedback
Adding the feedback tool on key products can support your continuous improvement plan.
Feedback is not to be used as a performance metric, but as qualitative data to help improve the product. It’s only useful if owners of the product are committed to regularly reviewing the feedback and acting on it.
Adding the feedback tool
To add the feedback tool to a page, you need to replace the regular Report a problem widget and the Share button with some HTML code, and then add a JS script.
Update the 2 following fields in HTML with the info from the page:
- Page title
- Page URL
HTML
<div class="row row-no-gutters mrgn-tp-xl feedbackWidget">
<div class="col-sm-7 col-lg-6">
<section class="gc-pg-hlpfl provisional">
<div class="well mrgn-bttm-0">
<form id="gc-pg-hlpfl-frm" action="#" method="post" autocomplete="off">
<input type="hidden" name="institutionopt" value="Public Health Agency of Canada">
<input type="hidden" name="themeopt" value="Health">
<input type="hidden" name="sectionopt" value="Health data">
<input type="hidden" name="language" value="en">
<input type="hidden" name="pageTitle" value="[Page title]">
<input type="hidden" name="submissionPage" value="[Page URL]">
<input type="hidden" id="helpful" name="helpful" value="Yes">
<div class="gc-pg-hlpfl-btn">
<div class="row row-no-gutters">
<div class="col-xs-12 col-sm-7 mrgn-tp-sm">
<h2 class="mrgn-tp-sm h5"> Did you find what you were looking for?</h2>
</div>
<div class="col-xs-8 col-sm-5 text-right">
<button id="btnyes" type="submit" value="Yes" class="btn btn-primary"> Yes</button>
<button id="btnno" type="button" class="btn btn-primary mrgn-lft-sm nojs-hide"> No</button>
</div>
</div>
</div>
<p class="h3 hidden nojs-show"> If not, tell us why:</p>
<div class="gc-pg-hlpfl-no nojs-show">
<fieldset>
<legend class="h4 mrgn-tp-0 mrgn-bttm-md"> What was wrong?</legend>
<div class="radio">
<label for="problem1">
<input name="problem" id="problem1" type="radio" value="The answer I need is missing" data-gc-analytics-wtph-value="The answer I need is missing-La réponse dont j’ai besoin n’est pas là" data-gc-analytics-collect="notPrivate"> The answer I need is missing </label>
</div>
<div class="radio">
<label for="problem2">
<input name="problem" id="problem2" type="radio" value="The information isn’t clear" data-gc-analytics-wtph-value="The information isn’t clear-L'information n'est pas claire" data-gc-analytics-collect="notPrivate"> The information isn’t clear </label>
</div>
<div class="radio">
<label for="problem3">
<input name="problem" id="problem3" type="radio" value="I’m not in the right place" data-gc-analytics-wtph-value="I’m not in the right place-Je ne suis pas au bon endroit" data-gc-analytics-collect="notPrivate"> I’m not in the right place </label>
</div>
<div class="radio">
<label for="problem4">
<input name="problem" id="problem4" type="radio" value="Something is broken or incorrect" data-gc-analytics-wtph-value="Something is broken or incorrect-Quelque chose est brisé ou incorrect" data-gc-analytics-collect="notPrivate"> Something is broken or incorrect </label>
</div>
<div class="radio">
<label for="problem5">
<input name="problem" id="problem5" type="radio" value="Other reason" data-gc-analytics-wtph-value="Other reason-Autre raison" data-gc-analytics-collect="notPrivate"> Other reason </label>
</div>
</fieldset>
<label for="problem6" class="mrgn-bttm-0"> Please provide more details</label>
<p class="small">
<strong> (Don’t include any personal information. Note that you will not receive a reply.)</strong>
<br>
<span class="small"> Maximum 300 characters</span>
</p>
<textarea id="problem6" name="details" class="full-width" maxlength="300"> </textarea>
<button type="submit" value="No" class="btn btn-primary mrgn-tp-md mrgn-bttm-sm"> Submit</button>
</div>
</form>
<div class="gc-pg-hlpfl-thnk hide">
<p class="h6 mrgn-tp-sm mrgn-bttm-sm">
<span class="far fa-check-circle text-success mrgn-rght-sm" aria-hidden="true"> </span> Thank you for your feedback
</p>
</div>
</div>
</section>
</div>
<div class="col-sm-3 col-sm-offset-1 col-lg-offset-3">
<div class="wb-share" data-wb-share="{"pnlId":"pnlShrPg", "lnkClass": "btn btn-default btn-block mrgn-tp-md"}"> </div>
</div>
</div> JS
<script>
$(document).on("wb-ready.wb", function() {
$("#btnno").click(function(e) {
$(".gc-pg-hlpfl-no").removeClass("nojs-show");
$(".gc-pg-hlpfl-btn").addClass("hide");
$("#helpful").val("No");
});
$("#gc-pg-hlpfl-frm").submit(function(e) {
e.preventDefault();
$(".gc-pg-hlpfl-thnk").removeClass("hide");
$("#gc-pg-hlpfl-frm").addClass("hide nojs-show");
$.ajax({
url: 'https://pagesuccessemailqueue.azurewebsites.net/api/QueueProblemForm',
type: 'POST',
dataType: 'text',
data: $('form#gc-pg-hlpfl-frm').serialize(),
success: function(data) {},
error: function(xhr, status, err) {
console.log(xhr.responseText);
}
});
});
});
</script> Usability testing
Formative and summative testing
Formative and summative evaluations differ in their goals:
“Formative evaluations are used in an iterative process to make improvements before production. Summative evaluations are used to evaluate a shipped product in comparison to a benchmark.”
Source: NN Group
Formative testing
Formative testing is used during the design of a product, to iteratively make it better and make sure it actually works. It’s part of the design process.
As few as 5 participants can uncover major usability issues and show how people interact with the product. During the design phase, it’s better to do several rounds of 5 participants than one round of 15 participants.
Because of the low number of participants, you can’t report the test results in terms of percentage - numbers are not reliable enough. It can be performed quickly with online tools, and it’s not very resource-intensive.
Summative testing
Summative testing is used to measure task success. You need to test a baseline, and then re-test the content after some changes.
It requires 15 participants or more - ideally 16-18. With that many participants, results are usually reproducible. You can report success in terms of percentage. It can be used to track performance over time.
Summative testing is more resource-intensive than formative testing.
Writing task scenarios
Use research done to understand data tasks to inform your task scenarios.
See the guidance from the Digital Transformation Office to help you write good task scenarios.
Moderated and unmoderated
Moderated is best for:
- a complicated process or concept
- when you want to ask follow-up questions if a participant is stuck or confused
- working with a specialized group of participants
Unmoderated is best for:
- quick results
- studying a few very specific tasks
- if you only need to select participants using basic demographics (age or income)
- Date modified: