HCI Exercise 1

Human-Computer Interaction SS 2025

Exercise 1: Examples of Bad Usability

1 Preparation

Assign each evaluator (member of your group) a two-letter shorthand code based on their initials. For example, Keith Andrews would be “ka” in lower case and “KA” in upper case.

If two evaluators in your team both have the same initials, then assign one of them a variant. For example, Ken Anderson might be assigned "kn" in lower case and “KN” in upper case.

2 Examples of Objects/Devices with Bad Usability

Each student in the group should find an example of an object or device with bad usability, and then:

  1. Take a photograph of the object or device to illustrate the issue:

    • Landscape orientation.
    • At least FullHD resolution (1920×1080 pixels).
    • As a JPEG file.

    Name the photograph ee-object.jpg, where ee is replaced by the two-letter code of the evaluator. Do not use any upper case letters, special characters, umlauts, or spaces in file names. For example, if your name is Keith Andrews, the photograph should be named ka-object.jpg.

  2. Make a video clip of the object or device explaining the issue:

    • At most 20 seconds.
    • With an audio commentary in English.
    • Landscape orientation.
    • Using a tripod or stand (no handheld videos!).
    • In FullHD resolution (1920×1080 pixels).
    • In MP4 format with H.264 video and AAC audio.
    • At most 10 MB (10,000,000 bytes).

    Trim off any junk at the start or end of the video clip. See my Guide to Video Editing. If your camera does not produce MP4 format with H.264 video and AAC audio, or if the video is too large in size or resolution, you may have to transcode it. See my Guide to Video Transcoding.

    Name the video clip ee-object.mp4, where ee is replaced by the two-letter code of the evaluator. Do not use any upper case letters, special characters, umlauts, or spaces in file names. For example, if your name is Keith Andrews, the video clip should be named ka-object.mp4.

3 Examples of Software GUIs with Bad Usability

Each student in the group should find an example of a software GUI (PC, tablet, or smartphone application, or a web site) with bad usability, and then:

  1. Make a screenshot of the GUI to illustrate the issue:

    • In light mode (dark text on light background).

      If your favourite example is only available in dark mode, that is OK, just add a note to your presentation explaining this.

    • Make sure the font is large enough to read (e.g. increase the font size on high res screen to at least 150%).
    • Landscape or portrait orientation.
    • At least FullHD resolution (1920×1080 pixels in landscape or 1080×1920 pixels in portrait orientation).
    • In PNG format.

    Name the screenshot ee-gui.png, where ee is replaced by the two-letter code of the evaluator. Do not use any upper case letters, special characters, umlauts, or spaces in file names. For example, if your name is Keith Andrews, the screenshot should be named ka-gui.png.

  2. Make a screen capture video clip explaining the issue:

    • At most 20 seconds.
    • With an audio commentary in English.
    • In light mode (dark text on light background).

      If your favourite example is only available in dark mode, that is OK, just add a note to your presentation explaining this.

    • Landscape or portrait orientation.
    • In FullHD resolution (1920×1080 pixels in landscape or 1080×1920 pixels in portrait orientation).
    • In MP4 format with H.264 video and AAC audio.
    • At most 10 MB (10,000,000 bytes).

    See my Guide to Session Capture. Trim off any junk at the start or end of the video clip, such as the GUI of the recording software. See my Guide to Video Editing. If the video is too large in size or resolution, you may have to transcode it. See my Guide to Video Transcoding.

    Name the video clip ee-gui.mp4, where ee is replaced by the two-letter code of the evaluator. Do not use any upper case letters, special characters, umlauts, or spaces in file names. For example, if your name is Keith Andrews, the video clip should be named ka-gui.mp4.

4 Create a Presentation

  1. Create a slide deck for a 10-minute group presentation.

  2. Your slides should be in English and you should present in English.

  3. Use PowerPoint. If you do not have PowerPoint, try LibreOffice Impress as an alternative. Save the file in PowerPoint .pptx format. Do not use Google Slides!

    Students at Graz University of Technology have free access to Microsoft Office 365 by going to portal.office.com and logging in with their university account.

    In Google Slides, it is not possible to embed video within the slide deck file, only to link it, which breaks if a video file moves or is deleted, or if you are offline.

  4. You may have to install a video codec pack (such as the K-Lite Codec Pack for Windows or the GStreamer plugins for Linux), to play back the videos from within PowerPoint or Impress.

  5. For the slide deck:

    • Use an aspect ratio of 16:9.
    • Use light mode (dark text on a light background).
    • Use a large enough font, so people at the back of the room can still see.
    • Embed images and videos into the slide deck rather than linking them, so they are included within the .pptx file and the presentation is completely self-contained.
  6. Create a title slide with the following information:

    • Examples of Bad Usability
    • Names of Group Members
    • Group Number (e.g. G1-01)
    • HCI SS 2025
    • Date
    • And, I ask (but cannot require) that you place your slide deck under a CC BY 4.0 licence. To do so, include the following statement in a smaller font at the bottom of the title slide:

      This work is placed under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence.
  7. First, present the examples of objects/devices with bad usability (one for each member of the group). Make two slides to explain each example:

    • A slide with bullets to the left and the photograph to the right. As far as possible, indicate the exact make and model of the object or device, the location of a door, etc.
    • A second slide with the embedded video clip.
  8. Then, present the examples of software GUIs with bad usability (one for each member of the group). Make two slides to explain each example:

    • A slide with bullets to the left and the screenshot to the right. Indicate the platform, name, and version of the software GUI.
    • A second slide with the embedded video clip.
  9. Name the presentation gT-GG-bad-usability-slides.pptx, where T-GG is the number of your tutor and group.

    For example, g1-01-bad-usability-slides.pptx for Group G1-01.

5 Prepare the Hand-In Directory

  1. Make a directory gT-GG-bad-usability for your work, where T-GG is the number of your tutor and group. For example, g1-01-bad-usability for Group G1-01.

  2. Copy the presentation into the directory.

  3. Create a subdirectory for each evaluator (member of your group) using their two-letter shorthand code ee, and copy the four files into it.

  4. I ask (but cannot require) that you place your materials under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence. To do so, copy the file CC-LICENCE.txt into your subdirectory, replacing the <THE AUTHOR> with your own name, for example Keith Andrews.

  5. When naming your files and directories, use only lower case letters, digits, and hyphens, from the 7-bit ASCII character set (apart from the name of the licence file).

  6. Your directory structure should look something like this:

    g1-01-bad-usability/
      g1-01-bad-usability-slides.pptx
      ka/
        CC-LICENCE.txt
        ka-gui.mp4
        ka-gui.png
        ka-object.jpg
        ka-object.mp4
      tg/
        CC-LICENCE.txt
        tg-gui.mp4
        tg-gui.png
        tg-object.jpg
        tg-object.mp4
      ...
    
  7. Tidy up your directory. Do not leave junk files, backup files, etc. lying around.

  8. Make a zip file of your hand-in directory, including the directory itself (not just the files inside).

    Name the zip file gT-GG-bad-usability.zip, where T-GG is the number of your tutor and group. For example, g1-01-bad-usability.zip for Group 1-01.

  9. The maximum size of your zip file is 250 MB (250,000,000 bytes). Check the size before uploading.

    If your files are too big, you may have to delete something or reduce the size of something. Contact your tutor if you are unsure what to remove or make smaller.

6 Submit Your Work

  1. Upload your zip file to TeachCenter before the submission deadline.

  2. This exercise is a group exercise. The group makes a single submission as a group.

  3. If you make any changes 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.

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

7 Present Your Work

  1. You will present your work at Meeting (Abgabegespräch) M1 at M1 Slots.

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