HCI Exercise 4a

Human-Computer Interaction SS 2024

Exercise 4a: Thinking Aloud Test (TA Report)

1 Pilot Test

2 Real Test

For each test user:

  1. Greet the user and explain the purpose of the test using the orientation script provided (adapted to your web site).

  2. Make sure the TPID of the test user (of the form HCI-SSyyyy-Gx-xx-TPn, for example HCI-SS2024-G1-05-TP1) is written on the top right of the consent form.

    Explain how you will deal with data protection: that you will delete any personal data of the users (scans of consent forms, full video recordings, mapping of real names to ids and aliases) one year afterwards.

    Ask the user to read and sign the consent form provided. Answer any questions they may have.

    Provide the user with a copy of the form, or let them take a photo of the form if they wish.

  3. Ask the user the questions on the background questionnaire. The facilitator should hold the pen and write the answers in the form, not the user.

  4. Give a demo of thinking aloud. For example:
    • Go to uncut.at and find out which films are on tonight at the Royal English Cinema, whilst thinking aloud yourself and explaining everything you do.

    • Show the user a short video clip of a previous user who is giving lots of good feedback (on a different interface). You may use this video clip (13,244,026 bytes), if you wish.

  5. Reset the browser to a fresh state for each new user:

    1. Make sure all add-ons and extensions are disabled.

    2. Delete all cookies.

    3. Delete all temporary files (clear the cache).

    4. Delete any previous browsing history.

    5. Set the page being displayed to google.com (or google.at for German-speaking test users).

  6. Run the test using the tasks provided:

    • Provide the tasks on individual task slips, one by one.

    • The facilitator should read out the task slip and then place on the table next to the computer.

    • The scribe should take notes on paper or in a text file or spreadsheet on a laptop.

  7. Interview the user, beginning with the open question: "So, how was it?". Then ask your pre-prepared interview questions.

  8. After the interview, ask the user to fill out the feedback questionnaire provided. The user should fill out the feedback questionnaire themselves (the facilitator hands them the pen).

Note:

3 Session Capture (Screen, Audio, and User)

You must capture each test user's session on the device, including the screen, the user's voice, and the user's face. See my Guide to Session Capture.

You must both capture the test session on the device (session capture) and also record the entire test using an external video camera (see below).

  1. Record on a PC in landscape orientation. The session recording should be at most at FullHD resolution (1920×1080. If your PC has higher resolution than FullHD, 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, except possibly the webcam with the user's face.

    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.

  2. Do not use recording software which leaves behind a watermark.

  3. Turn on recording of the mouse pointer (possibly even make it slightly larger), but turn off any mouse trails.

  4. 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.

  5. Use the following recommended video settings:

    Container:MP4
    Output Video Resolution:1920×1080 (FullHD)
    Frame Rate:20
    Codec:H.264
    Rate Control:VBR (Variable Bit Rate)
    Bit Rate:5000 Kbps (= 5 Mbps)
  6. To capture user audio in the session video, use a built-in or external webcam microphone or an external microphone plugged into the device.

  7. Use the following recommended audio settings:

    Channels:Stereo
    Codec:AAC (= mp4a)
    Sample Rate:44100 Hz
    Bit Rate:160 Kbps
    Bits per Sample:32
  8. To capture the user's face in the session video, use a built-in or external webcam and place the picture, say, in the bottom right-hand or bottom left-hand corner of the screen, depending on what works best for your web site.

    If your screen is large enough, you could also make the browser window a little narrower, and place the webcam in the margin to the right of the browser, at the bottom. This way, it will not overlap any content of the browser window.

4 Recording with External Video Camera

You must record the entire test procedure, from the moment the user enters the room to the moment the user leaves the room, with an external tripod-mounted video camera. This applies both to the pilot test and the real tests!

  1. If you greet the user at a separate table, set up the external camera to initially point at the table (filming the introduction, background questionnaire, and consent form), then as the user moves over to the test PC, swing the camera around to shoot over the shoulder of the user for the actual test session.

  2. Use a mirror next to the monitor or screen to capture the user's facial expressions.

  3. When filming the test session on the external camera, set up the field of view (recording area) to film over the shoulder of the user, so that the screen, keyboard, and the user's head in the mirror are framed in the picture.

  4. Avoid excessive panning and zooming of the external video camera. You must use a tripod. Do not hand-hold the camera or move it around unnecessarily.

  5. Use an external microphone to capture audio on the external video camera:

    • Make a test recording to check the quality and level of audio before you record an actual test.
    • Check that the microphone battery is not empty.
    • Use headphones to monitor the audio as it is being recorded. Make sure the audio of the test user is loud and clear.

    You can try using the camera's built-in microphone, but since it will be located behind the test user, the audio of the test user might be too quiet (and the microphone may pick up other annoying background sounds too).

  6. Turn off any data fields (date, time, mode, etc.) in the camera which would otherwise overlay the video recording.

  7. For the external video recordings:

    • Our preferred video format is MP4 (H.264 video with AAC audio) at 720p (1280×720).

      This provides good quality, but does not have the larger file sizes of FullHD.

    • Do not record at less than 1280×720 or higher than 1920×1080 (FullHD) resolution.

    • Record in landscape mode (the video is wider than it is higher), not portrait mode.

  8. If your external video camera does not record in MP4 with the above codecs, we will try to play any of the following formats: MPEG-4 with other video or audio codecs (.mp4), MPEG-1 or MPEG-2 (.mpg), QuickTime (.mov), Matroska (.mkv), and WebM (.webm). Please do not use any obscure or proprietary video or audio codecs.

    If we have difficulties playing your external video files, you may have to convert your videos into a different format and hand them in again.

5 Analysing the Results

  1. Use the provided spreadsheet data-ta.xlsx to collect and collate the results.

  2. Enter the information from the background and feedback questionnaires into the spreadsheet.

  3. Enter the task success metrics into the spreadsheet.

  4. Analyse the session capture videos and collect a list of positive findings and negative findings (problems) in the spreadsheet. Note the timestamp where the finding started.

  5. For each positive or negative finding, determine which test users experienced the finding. For each finding, create one video clip for every test user who experienced this finding to illustrate what happened. The video clips should be in MP4 (H.264 video and AAC audio) format and be no larger than FullHD (1920×1080) resolution; transcode if necessary. Each video clip should be no longer than 20 seconds in duration and no larger than 10 MB in size.

  6. The short video clips illustrating findings are considered to be part of the report. They must not contain identifiable faces of the test users. Obscure the user's face on the video clips by blurring, pixelating or blacking out. See my Guide to Face Blurring.

  7. Initially name the video clips according to the following naming scheme:

    n-tpY-keywords.mp4
    p-tpY-keywords.mp4

    where n indicates a negative finding (problem) and p indicates a positive finding, Y is replaced by the number of the test user where the finding was observed, and keywords comprises one to four keywords separated by hyphens to describe the finding. Use only lower case letters, digits, and hyphens from the 7-bit ASCII character set.

    For example:

    n-tp4-unclear-when-delivery-free.mp4
    p-tp3-reg-clear.mp4

    The finding number will be inserted later, once the severity (or positivity) of all findings has been determined and the findings have been sorted and ranked (e.g. n01-tp4-unclear-when-delivery-free.mp4).

  8. We would expect each group to find between 10 and 30 problems (over all test users), depending on the quality of the web site you are testing. We would expect each group to find at least 3 positives (over all test users).

  9. Individually rate the positive findings by positivity and the problems by severity (working alone), then form a group average (as for the heuristic evaluation). Enter these into the spreadsheet and sort the tables in descending order.

    This ranking determines the problem number and positive number for each finding. The most severe problem is n01. The most positive positive finding is p01.

  10. Rename each video clip to include its finding number:

    nXX-tpY-keywords.mp4
    pXX-tpY-keywords.mp4

    where XX is the number (ranking) of the corresponding positive or negative finding.

    For example:

    n01-tp4-unclear-when-delivery-free.mp4
    p01-tp3-reg-clear.mp4

  11. For the top three positives and top five problems, list (and link) all of the available video clips in the mini-table. Choose the best available video clip to illustrate the finding as a video figure.

    In the list of all positives and list of all problems, list (and link) all of the available video clips for each finding.

  12. When using the HTML5 video element, the first frame of the video is displayed by default (before the video is played). For most video clips, the first frame of the video does not adequately illustrate the finding. Instead, extract a still frame (in JPEG format) which better illustrates the finding, to act as a poster image for the video clip. For example:

    n01-tp4-unclear-when-delivery-free.jpg
    p01-tp3-reg-clear.jpg

    Specify the name of the poster image in the poster attribute of the video element.

6 Thinking Aloud Test Report

The thinking aloud test report should contain:

  1. Some title information indicating the group number, the title/topic of the evaluation, and the name of each group member.
  2. Executive summary. A summary of the test and the most important findings, written for your client's management. 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 test was run and what the main findings were.

    The description of the test procedure, thinking aloud methodology, and the scope of the test should take up no more than 25% of the executive summary. Most of the executive summary should summarise the main findings.

  3. Test Procedure.
    • Test Methodology. Thinking aloud methodology.
    • User Profiles. The different kinds of user the site is trying to attract. The goals and typical tasks for each of these user groups.
    • Test Users. Assumptions about user population and their typical tasks, selection process for test users. Test person data (age, occupation, experience, etc.) from background questionnaires in tabular form. Replace all users' real names with fictitious first name aliases in the main TA Report.

    • Test Environment. Hardware, software version, test room, deescription of session recording on PC, description of external video recording.
    • Training. Training given to each test user. Any interface training, domain training, or thinking aloud training.
    • Tasks. The internal task list and the task descriptions given to users.
    • Interview Questions. The questions asked at the interview with each user.
    • Feedback Questionnaire. The questionnaire administered at the end of the test.
    • Data Collection. Explanation of how data and data protection are handled.
  4. Results.
    • Task Completion. Overview of task completion rates.

    • First Impressions. Summary of the first impressions of the users after Task 1.

    • Analysis of main positive findings. For each positive finding:

      • Illustrate it with a video clip.
      • Each member of the test team should rate its positivity. Just like for positivity in HE: On a 0..4 scale (4 is most positive), first rate individually, then take the average.
      • Include a reference to the timestamp(s) on the full session capture video each time a user experienced this finding.
      • Make sure it is clear exactly how many test users experienced this finding.
      • Possibly include an appropriate user quotation.
    • List of All Positive Findings.

    • Analysis of main negative findings (problems) with recommendations. For each problem:

      • Diagnose why the problem occurred.
      • Illustrate it with a video clip.
      • Each member of the test team should rate its severity. Just like for severity in HE: on a 0..4 scale, first rate individually, then take the average.
      • Include a reference to the timestamp(s) on the full session capture video each time a user experienced this problem.
      • Make sure it is clear exactly how many test users experienced this problem.
      • Possibly include an appropriate user quotation.
      • Describe your suggested improvements.
    • List of All Problems Found.

    • Interviews. Summary of the comments and suggestions made by users during the post-test interviews.

    • Feedback Questionnaires. Summary of the responses given by users in the post-test questionnaire.

  5. User Materials. The filled-out user materials: background questionnaires and feedback questionnaires must be scanned to PDF and included as follows:

      bq/
        tp1-bq.pdf
        tp2-bq.pdf
        ...
    
      fq/
        tp1-fq.pdf
        tp2-fq.pdf
        ...
    

    Note: These should be good quality scans. Photos are not acceptable!

For the report:

7 Prepare Your TA Report Directory

  1. Make a directory gT-GG-ta for your thinking aloud test report, where T-GG is the number of your tutor and group. For example, g1-05-ta for Group 1-05.

  2. Copy the skeleton plan and other files into this directory.

  3. Your main file should be named ta.html.

  4. If you are testing in German with German-speaking test users, choose the user-facing materials (background questionnaire, feedback questionaire, etc.) in German with the suffix -de.

  5. Place any images into a subdirectory called images.

  6. Place the video clips and poster images into a subdirectory called videos.

  7. Prepare a 15-minute slide presentation of your TA Report to show to your client at the client meeting (M3):

    • using slides (screenful by screenful).
    • using keywords and bulleted lists (not full sentences).

    Make a separate presentation. Do not simply open your TA Report in a web browser and project that.

  8. Most of your allotted presentation time should be used to show slides. Do not show more than three short video clips.

  9. 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, name it ta-slides.pdf and place it in a subdirectory called presentation.

    Open your PDF slide presentation with a PDF Viewer and make sure it can be used to give a presentation.

  10. When naming your files and directories:

    • Use only lower case letters, digits, and hyphens from the 7-bit ASCII character set.
    • Do not use spaces, special characters, or umlauts.
  11. Your directory structure should look something like this:

    g1-05-ta/
      background.html
      checklist.html
      consent-ta.pdf
      do-not-disturb.pdf
      external-tasks-ta.pdf
      feedback.html
      orient.html
      report.css
      ta.html
      bq/
        tp1-bq.pdf
        tp2-bq.pdf
        ...
      fq/
        tp1-fq.pdf
        tp2-fq.pdf
        ...
      images/
        browser-version.png
        testroom01.jpg
        testroom02.jpg
        ...
      presentation/
        ta-slides.pdf
      videos/
        n01-tp4-unclear-when-delivery-free.jpg
        n01-tp4-unclear-when-delivery-free.mp4
        n02-tp2-shipping.jpg
        n02-tp2-shipping.mp4
        ...
        p01-tp3-reg-clear.jpg
        p01-tp3-reg-clear.mp4
        ...
    

    You may have some -de suffixes, if you are using the German versions of user-facing materials.

  12. Tidy up your directories. Do not leave junk files, backup files, etc. lying around.

  13. Your directory must occupy 350 MB (350,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. If your video clips are too large, you may be able to shorten them or transcode them using higher compression. Contact your tutor if you are unsure what to remove or make smaller.

  14. Make a zip file of your directory and keep it somewhere else as a backup.

    Do not upload the zip file to Sapphire.

8 Upload Your TA Report to Sapphire

  1. Submit your TA Report before the deadline to the Sapphire online submission system:

    https://sapphire.isds.tugraz.at/

    See my Guide to Using Sapphire.

  2. Ex 4a 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.

  3. Use the following approach to upload your files:

    1. Go to Exercises and select “Ex 4a: TA Report”.

    2. Create a submission for Ex 4a.

    3. Click on Upload.

    4. Drag your local submission folder gT-GG-ta/ (yes, the folder, for example g1-05-ta/, not all of the individual files) and drop it into the upload area.

      Do not upload your submission as a zip file.

    5. Watch while the files upload (any sub-folder structure will be created appropriately).

    6. Check your submission folder to make sure everything is there and looks right.

  4. 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.

  5. Submissions will cease to be accepted 48 hours after the deadline.

  6. At the client meeting, you must present the same version of your work which was handed in (uploaded to Sapphire).

Note that for Exercise 4b, you will also hand in a USB stick containing the full-length videos from the tests.