Each evaluator must inspect the interface alone.
Make the following preparations:
Set up screen and audio capture on your device. See my Guide to Session Capture on various platforms. Use a good microphone, and make a test recording to make sure everything is working and the audio can be heard.
Do not use recording software which leaves behind a watermark. On mouse devices, turn on recording of the mouse pointer (even make it slightly larger), but turn off any mouse trails. On touch devices, see if your recording software can turn on display of touch events, but turn off touch trails.
The screen recording should be at most at FullHD resolution (i.e. 1920×1080 pixels in landscape orientation, or 1080×1920 pixels in portrait orientation). If your device has higher resolution than FullHD, please plan to adjust the settings or make the browser window smaller. If your device has lower resolution than FullHD, record at its maximum resolution. The standard browser window and GUI should be included in the recording. Other things outside the browser window should not be included in the recording. Do not leave unnecessary margins around the video.
If the native resolution of your device is too high in one or both directions, and you cannot adjust the settings or make the browser window smaller, you will have to record at higher pixel resolution and later transcode down uniformly to at most FullHD. Do not distort the video and do not create black or empty strips to either side (or top and bottom). See my Guide to Video Transcoding. Unfortunately, transcoding always results in a loss of quality.
Record in MP4 format with H.264 video and AAC audio if possible. If your device/software can record in that format natively, that is perfect.
Otherwise, you will have to convert/transcode your video clips to MP4 (with H.264 video and AAC audio) format later on. Unfortunately, transcoding always results in a loss of quality.
Use the following recommended video settings:
| Container: | MP4 |
| Output Video Resolution: | 1920×1080 (FullHD) [or 1080×1920] or lower |
| Frame Rate: | 20 |
| Codec: | H.264 |
| Rate Control: | VBR (Variable Bit Rate) |
| Bit Rate: | 5000 Kbps (= 5 Mbps) |
Use the following recommended audio settings:
| Channels: | Stereo |
| Codec: | AAC (= mp4a) |
| Sample Rate: | 44100 Hz |
| Bit Rate: | 160 Kbps |
| Bits per Sample: | 32 |
For this heuristic evaluation report, do not record the face of the evaluator in any video recording, only the screen and audio.
Print out an A4 copy of the Andrews General Usability Heuristics provided in the materials.
Most of the chosen web sites are available in German. Some of the chosen web sites are available in English and German. Sometimes, some of the web sites are available in English only.
If the web site has both English and German versions, each evaluator should pick one language (English or German) for the bulk of their evaluation, but then also take a look with the other language too.
Speak English for the audio commentary while evaluating, regardless of the language of the web site.
Use the device and browser combinations you specified in your HE Plan, so that the evaluators use a mix of devices and browsers to inspect the web site:
Two of the evaluators should evaluate on a mobile device (= smartphone or tablet, running Android or iOS), in portrait orientation, each using a different approved mobile web browser.
On mobile, the approved browsers are: Chrome, Firefox, Safari, and Samsung Internet Browser.
The other evaluator(s) should evaluate on a PC (= desktop or laptop, running Windows, MacOS, or Unix), in landscape orientation, each using a different approved PC web browser.
On PC, the approved browsers are: Chrome, Firefox, and Safari.
It is OK for one evaluator to use (say) Chrome on PC, and another evaluator to use Chrome on mobile, since they are different devices.
You must use real devices and not an emulator or simulator.
If you are using a mobile browser and your web site suggests you should go to the mobile version of the site, then do so. However, do not install a native app, even if your web site suggests you should do so.
As specified in your HE Plan, one of the evaluators on mobile and one of the evaluators on PC should use an ad blocker.
If you find a problem which may be due to blocked content, unblock ads temporarily to see whether the problem persists. If the problem then goes away, document it as a problem apparently caused by ad blocking.
Remember to reset the browser to a fresh state before you start evaluating:
Make sure all add-ons and extensions are disabled (except for an ad blocker, if you are using one via an extension).
Delete all cookies.
Delete all temporary files (clear the cache).
Keep in mind the target user population(s) and their typical tasks.
Try out your assigned web site first with all cookies enabled and then with most cookies disabled (only necessary cookies enabled) to see if there is any difference.
If you find a problem which appears to be due to disabling cookies, document it as such.
Start the screen video (+ audio) capture, making sure to hide any UI controls of the recording software.
To be clear, the evaluator should record their entire inspection session, so that it is available to cut out video clips from, in case some findings cannot later be reconstructed.
Inspect the interface, talking out loud and also noting problems and positive impressions in chronological order of discovery in the plain text log file you prepared previously.
The log file should be called log-ee.txt,
where ee are your initials in lower case. Use the
templates you prepared in Ex1 HE Plan.
Each negative finding (problem) is assigned an ID in
chronological order of discovery of the form
EE-Neg01, EE-Neg02, etc.,
where EE are the evaluator's upper case
initials, for example KA-Neg01.
Proceed analogously for positive findings: EE-Pos01,
EE-Pos02, etc.
For each finding, enter the following information into the log file:
KA-Neg01.
ka-neg01-keywords.mp4.
In addition, for negative findings (problems), also make a note of:
Heuristic: The corresponding heuristic (if any), which problem falls under, e.g. A04 Consistency.
Most problems will fall under one of the heuristics, but it is OK if some of the problems you report are not covered by a heuristic (leave the heuristic field in the log file blank). We will not assign heuristics to positive findings in this evaluation, only to negative findings.
Once you have finished evaluating, save your screen video (+ audio) recording and your log file.
Make sure your log file is a plain text file encoded in UTF-8, of at most 100 kb.
Make sure that when editing the log file, that when you save it, it is still in UTF-8 format. Check the settings in whatever plain text editor you are using.
If there are many examples of the same general problem (for example, typos across several pages), count this as one problem and give two or three examples in the description.
In total, we would generally expect each individual evaluator to find between 10 and 20 problems and at least 3 positives on each device, depending on the quality of the web site you are evaluating.
Re-create a short video clip to illustrate each finding from each device.
Every finding must be accompanied by at least one video clip. (sometimes two, say with and without cookies, if that is what best illustrates the problem).
Each video clip must contain an audio track in English, concisely describing the finding.
Where a finding cannot be recreated, extract a video clip from your evaluation recording.
If the existing audio commentary does not describe the finding adequately, replace the audio commentary with a new one.
Make sure the audio levels are high enough, so that your audio commentary can be clearly heard.
Each video clip should be long enough to illustrate the finding, but no longer. Typically, video clips are 10 to 15 seconds. At a maximum, each video clip should be no longer than 20 seconds duration.
In some rare cases, say to illustrate extremely slow loading time, it might be tempting to include a video clip longer than 20 seconds. In such a case (for the purposes of this course), edit the video clip to show say an inital 8 seconds, then a transition frame something like “28 seconds later” for 2 seconds, then the final 8 seconds (18 seconds duration in total).
Each video clip should be no larger than FullHD resolution (1920×1080 pixels in landscape orientation or 1080×1920 pixels in portrait orientation).
Otherwise, you will have to transcode down uniformly to at most FullHD. Do not distort the video and do not create black or empty strips to either side (or top and bottom). See my Guide to Video Transcoding. Unfortunately, transcoding always results in a loss of quality.
Each video clip should be no larger than 10 MB in size!
Otherwise, make it shorter in duration if possible, or else transcode to a lower video bitrate (with the resulting loss of quality).
Name your video clips according to the following naming scheme:
ee-negxx-keywords.mp4
ee-posxx-keywords.mp4
where ee is replaced by the lower case initials
of the evaluator (e.g. ka for Keith
Andrews), neg indicates a negative finding (problem)
and pos indicates a positive
finding, xx is the two-digit number in
chronological order of discovery, and keywords
comprises one to four words describing the finding separated by
hyphens.
For example:
ka-neg01-links-yellow.mp4
ka-pos01-breadcrumbs-work-well.mp4
...
For file and folder names, use only lower case letters, digits, and
hyphens, from the 7-bit ASCII character set. Do not use any upper case
letters, spaces, underscores, or special characters in either the name
or extension. The name ka_neg01_links_yellow.MP4
does not conform to the naming scheme.
Under windows, turn on the display of file extensions, so that you see them!
Enter the names of your video clips into your log file.
As a group, assemble the individual log files and associated video clips from each evaluator in your group.
Form a combined (aggregated) list of problems (and a combined list of
positives). The spreadsheet
helist.xlsx
is provided for you to use (but it is not required that you hand
it in).
Proceed as follows:
Choose the evaluator with the longest list of problems and enter the problems into the spreadsheet.
Merge the problems from the other evaluators into this list.
If the same (or very similar) findings are found by two or more evaluators, combine them into one.
You then have multiple video clips to illustrate the finding.
If the same (or very similar) findings are found on two or more devices, combine them into one.
You then have mulptiple video clips to illustrate the finding.
List many small related issues (such as 15 individual typos) as one problem with many instances (rather than 15 problems).
The same for many examples of German content not being available in English (or vice versa).
Indicate which problems were found by which evaluator(s).
For each problem, determine whether the problem is general to all browsers and platforms or specific to a particular browser or platform. Or, if it only occurs when cookies are disabled, or when an ad blocker is used. In such cases, indicate this in the “Only When...” column. If a problem is general, leave the corresponding cell empty.
Proceed analogously for the positive findings.
Individually (not working together), assign severity ratings to each problem. Use the 0 to 4 integer severity scale below:
| Severity | Meaning |
|---|---|
| 4 | Catastophic Problem |
| 3 | Serious Problem |
| 2 | Minor Problem |
| 1 | Cosmetic Problem |
| 0 | Not a Problem |
Individual ratings must be integers, fractional ratings are not allowed.
Individually (not working together), assign positivity ratings to each positive finding. Use the 0--4 integer positivity scale below:
| Positivity | Meaning |
|---|---|
| 4 | Extremely Positive |
| 3 | Major Positive |
| 2 | Minor Positive |
| 1 | Cosmetic Positive |
| 0 | Not a Positive |
Individual ratings must be integers, fractional ratings are not allowed.
Calculate the mean severity rating for each problem to 2 decimal places. Calculate the mean positivity rating for each positive finding to 2 decimal places.
Sort the problems into descending order of average severity (most severe first). Sort the positives into descending order of average positivity (most positive first).
Renumber the problems and positives, so that the finding at the top of each list is number 1. We will call these the ranked finding numbers. The top-ranked positive finding will henceforth be named P01, the second-ranked positive finding P02, etc. The top-ranked negative finding will be named N01, the second-ranked negative finding N02, and so forth.
For each finding, select the best (most representative) available video clip(s) to illustrate the finding. It often makes sense to include multiple video clips to illustrate one finding, for example, if they show different aspects of the same issue (say, one on mobile and the other on PC).
However, do not always select every available video clip from every evaluator for every finding. Typically, you might select one or two, possibly three, video clips per finding. Only these are to be included in the report and handed in.
If you are using the provided spreadsheet, you can list all of the available video clips for a finding in the column “All Available Video Clips”, then enter the ones you want to use in the column “Selected Video Clip(s)”.
Copy and rename the selected video clips for each finding, so that the ranked finding number is prepended to the file name, according to the following scheme:
nnn-ee-negxx-keywords.mp4
pnn-ee-posxx-keywords.mp4
where n indicates a negative finding (problem)
and p indicates a positive finding,
nn is the ranked finding number,
ee are the lower case initials of the evaluator,
and posxx or negxx is the original
numbering in discovery order. For example:
n01-ka-neg01-links-yellow.mp4
p01-ka-pos01-breadcrumbs-work-well.mp4
where n01-ka-neg01-links-yellow.mp4 is one of the
selected video clips illustrating the highest ranked (most severe)
problem N01 and was found by evaluator KA.
If you are using the provided spreadsheet, you can rename the selected video clips in the column “Selected Video Clip(s)”, leaving the original names in the column “All Available Video Clips”.
Transfer the sorted lists of problems and of positives into simple XHTML5 table entries.
Do not just save the spreadsheet from Excel as HTML, since this creates bloated HTML code, which will not be valid XHTML5.
For example, save the spreadsheet as a CSV (comma seperated value) file and then use a text editor to manipulate it:
</td><td>).
<tr><td> to the first cell
and append a final </td></tr> to the final
cell on each row.
If you use the provided spreadsheet, the column “All Available Video Clips” should not be included in the HTML5 table in the final report. You could, say, make a temporary copy of the spreadsheet, delete the column, and save the CSV from there. The column “Selected Video Clip(s)” is simply called “Video Clip(s)” in the HTML5 table in the final report.
If you know Perl, you might also use a Perl script to generate simple
XHTML5 table entries from a CSV file. I have an example
Perl script (rename it
to csv2html.pl).
Write a report of the heuristic evaluation using the skeleton report provided:
Some title information indicating the group number, the title/topic of the evaluation, and the name of each group member.
A summary of the evaluation and the most important findings written for your client's management. The description of the evaluation scope and procedure should take up no more than 25% of the executive summary. Most of the executive summary should summarise the main findings.
In real life, a manager would typically not have time to read the whole report, but would read only the executive summary to find out how the evaluation was done and what the main findings were.
A description of the methodology behind a Heuristic Evaluation, in your own words.
Adapt the citations and references as instructed in the comments.
Describe the assumptions made about user characteristics and groupings and the extent of the evaluation.
A description of the evaluation environments (hardware, browser version, OS, date of evaluation, etc.) used by each evaluator.
Explain how each evaluator extracted or created video clips on each particular evaluation device or platform, and how they were edited and transcoded if necessary.
Discussion of three most positive findings, each illustrated with a video clip.
Aggregate table of positive findings in descending order of mean positivity.
Analysis and discussion of the five most severe problems (the top five from your sorted list), each illustrated with a video clip.
Aggregate table of problems in descending order of mean severity.
For the HE Report:
Use the skeleton report provided.
Follow any instructions and guidance embedded in the skeleton {the text in curly brackets}.
Remove any instructions and guidance {the text in curly brackets} from the file before you hand it in.
All text files (HTML, CSS, log files, etc.) must be encoded in UTF-8 format.
Make sure that when you edit such a file, when you save it, it is still in UTF-8 format. Check the settings on whatever plain text editor you are using.
Write straightforward, simple, valid XHTML5 using a plain
text editor
(single file, no frames, no Javascript,
no specialised HTML editor like Dreamweaver, no export from Word, no
conversion from LaTeX). Do not change the <section>
structure or the <section> ids. Do not make any
changes to the CSS file or add any <style> elements
to the HTML. Make sure your HTML is
valid XHTML5.
If you are not familiar with XHTML5, consult Chapters 10 and 11 of my INM 2014 lecture notes.
All video clips and images referenced in the report must be handed in as local copies (referenced by relative links), so that the report is self-contained. Do not link to such assets remotely.
Video clips for the top three positives and top five problems should
be given space in the report using the HTML5 video
element, as shown in the skeleton template.
By default, the HTML5 video element initially displays
the first frame of video. For our video clips, it is often more
appropriate to display a frame from somewhere within the video clip as
the initial image. This can be achieved by extracting a still frame,
for example n01-ka-links.jpg for a video clip
named n01-ka-links.mp4, and specifying it in
the poster attribute of the video element.
Remember, all the video clips which are included in the report must be no longer than 20 seconds duration, no larger than 10 MB, and no larger than FullHD resolution (1920×1080 pixels in landscape orientation or 1080×1920 pixels in portrait orientation).
Shorten or transcode any of the videos to be handed in with the HE Report which exceed these limitations.
Prepare a 15-minute slide presentation of your HE Report to show to your client at the client meeting (M2):
Use slides (screenful by screenful) with bulleted lists (not full sentences).
Make a separate presentation. Do not simply open your HE Report in a web browser and project that.
You may prepare your slide presentation in Powerpoint, Keynote, HTML, or PDF as long as you can export it (without loss of fidelity) to PDF.
Export your slide presentation to PDF and name
it he-slides.pdf
Open your PDF slide presentation with a PDF Viewer and make sure it can be used to give a presentation.
Make a directory called gT-GG-he for your
heuristic evaluation report, where T-GG is the
number of your tutor and group. For
example, g1-05-he for Group 1-05.
Include your main file he.html.
Copy over the files heuristics.pdf and
report.css unchanged.
Create a subdirectory logs for your log files.
Include the individual evaluation log files from each evaluator.
Create a subdirectory presentation for your
presentation slides, he-slides.pdf.
Place the video clips (and any corresponding poster images) selected
for your report into a subdirectory called videos.
All video clips referenced in your report must be handed in as local copies, so that the report is self-contained. Do not include video clips which are not referenced in the report.
When naming your files and directories, use only lower case letters, digits, and hyphens, from the 7-bit ASCII character set.
Do not use upper case letters, spaces, underscores, umlauts, or special characters. Only use dot (.) to designate a file's extension, nowhere else in a file name and nowhere in a folder name.
Your directory structure should look like this:
g1-05-he/
he.html
heuristics.pdf
report.css
logs/
log-hr.txt
log-ct.txt
...
presentation/
he-slides.pdf
videos/
p01-ka-pos01-breadcrumbs-work-well.mp4
...
n01-ka-neg01-links-yellow.mp4
...
Tidy up your directory. Do not leave junk files, backup files, etc. lying around.
Your directory must occupy 300 MB (300,000,000 bytes) or less. Check the size before uploading.
If your files are too big, you may have to delete something or reduce the size of something. Sometimes, you can significantly reduce the size of your slides PDF, without significantly affecting quality. Contact your tutor if you are unsure what to remove or make smaller.
Make a zip file of your directory and keep it somewhere else as a backup.
Do not upload the zip file to Sapphire.
Submit your HE Report before the deadline to the Sapphire online submission system:
https://sapphire.isds.tugraz.at/
See my Guide to Using Sapphire.
Ex 2 is a group exercise. The group makes a single submission as a group.
Every member of the group has access permissions to create and modify the group's submission, but it is best to designate a single person to do the uploading or any modifications, in order to avoid potential conflicts with other group members making changes in parallel.
Use the following approach to upload your files:
Go to Exercises and select “Ex 2: HE Report”.
Create a submission for Ex 2.
Click on Upload.
Drag your local submission
folder gT-GG-he/ (yes, the folder, for
example g1-05-he/, not all of the individual files) and
drop it into the upload area.
Do not upload your submission as a zip file.
Watch while the files upload (any sub-folder structure will be created appropriately).
Check your submission folder to make sure everything is there and looks right.
If you make any changes (including deleting files) to your submission after the deadline, your submission will be flagged with the new timestamp and will be considered to be a late submission with the corresponding points deduction.
Submissions will cease to be accepted 48 hours after the deadline.
At the client meeting, you must present the same version of your work which was handed in (uploaded to Sapphire).