Exam Winter 2025

Question 1

Which of the following evaluation techniques does not require actual users?

• Controlled experiment
• Think-aloud
• Cognitive walkthrough
• Field study

Answer 1

Cognitive walkthrough

Question 2

Assuming a typing task that involves occasional very high precision pointing to place graphical objects in the text, which of the following input devices would best realise that?

• A mouse
• A joystick
• A trackpoint
• A trackpad

Answer 2

A mouse

Question 3

According to Fitts’ law, which of the following statements are true?

• Target size does not affect pointing speed if the distance stays the same.
• Halving the distance makes pointing slower because the hand has less space to accelerate.
• Distance has no effect on pointing speed.
• If you want to make a target faster to point to, halving the distance to the target has the same effect as doubling the size of the target

Answer 3

If you want to make a target faster to point to, halving the distance to the target has the same effect as doubling the size of the target

Question 4

If you have designed a new interaction technique for speeding up pointing and zooming on a map, what type of evaluation is most fitting to assess if the technique is an improvement over other techniques?

• A cognitive walkthrough
• A think-out-loud study
• A field study
• A controlled experiment

Answer 4

A controlled experiment

Question 5

The principle of balance refers to a satisfying arrangement or proportion of design elements. Balance can have three different types of distributions. Which of the following is NOT one of those?

• Linear
• Symmetrical
• Radial
• Asymmetrical

Answer 5

Linear

Question 6

If you use a horizontal grid for a user interface layout, what number of columns is most optimal?

• 10
• 15
• 20
• 12

Answer 6

12

Question 7

According to activity theory, what level of activity would be mostly affected by motor disabilities when interacting with a computer?

• Level of operation
• Level of activity
• Level of action
• Level of tasks

Answer 7

Level of operation

Question 8

When suddenly forgetting a password because the keyboard layout is different means that?

• The password is not available in non-declarative memory
• The password is not available in declarative memory
• The password is in long-term memory but not in short-term memory
• The password is in short-term memory but not in long-term memory

Answer 8

The password is not available in declarative memory

Question 9

What is the most significant implication for statistical analysis of datasets you can draw from the Anscombe’s Quartet example?

• Outliers always need to be removed before performing statistical analysis
• Descriptive statistics are always unreliable compared to visualizations
• Identical summary statistics can arise from fundamentally different distributions, emphasizing the importance of visualization
• Linear regression is an inappropriate tool for data analysis

Answer 9

Identical summary statistics can arise from fundamentally different distributions, emphasizing the importance of visualization

Question 10

Which key principle of effective data visualization is best illustrated by John Snow’s 1854 cholera outbreak map of Soho, London?

• The value of 3D visualization for complex spatial data
• The importance of using multiple colors to distinguish different types of data points
• The power of overlaying multiple data sources to reveal spatial patterns and relationships
• The necessity of including detailed statistical analysis alongside visual representations

Answer 10

The power of overlaying multiple data sources to reveal spatial patterns and relationships

Question 11

In Scaife and Rogers’ theory of external cognition, which cognitive benefit is best illustrated by an air traffic controller using multiple displays to track aircraft positions rather than trying to maintain all positions in memory?

• Graphical constraining
• Re-representation
• Computational offloading
• Temporal sequences

Answer 11

Computational offloading

Question 12

When comparing physical controls (hard controls) to touchscreen interfaces (soft controls) in automotive dashboards, which statement most accurately describes their key difference in terms of human factors and safety?

• Hard controls are always safer because they’re more durable in crashes
• Hard controls have higher error rates because users can accidentally bump physical buttons
• Hard controls provide tactile feedback that enables eyes-free operation, while soft controls typically require visual attention
• Soft controls are superior because they can be updated with new features

Answer 12

Hard controls provide tactile feedback that enables eyes-free operation, while soft controls typically require visual attention

Question 13

In the context of input device manipulation, which statement most accurately describes the relationship between Control-Display (C/D) gain and clutching behavior?

• Lower C/D gain reduces clutching by allowing more precise control.
• Clutching only occurs when C/D gain is set below a certain threshold.
• Clutching frequency is independent of C/D gain settings.
• Higher C/D gain reduces clutching by requiring smaller physical movements to cover the same display distance.

Answer 13

Higher C/D gain reduces clutching by requiring smaller physical movements to cover the same display distance.

Question 14

Which of the following illustrates both the Gulf of Execution and the Gulf of Evaluation in a user interface?

• All of the options
• A user clicks a button to send an email but cannot tell if it was actually sent due to an ambiguous status message.
• A user cannot determine whether their action was successful because the system provides no feedback after file deletion.
• A user knows they want to copy text but cannot figure out which menu contains this function.

Answer 14

A user clicks a button to send an email but cannot tell if it was actually sent due to an ambiguous status message.

Question 15

Which of the following best illustrates the correct hierarchy from most specific to most general in HCI design knowledge?

• Theories → Principles → Guidelines
• Principles → Guidelines → Theories
• Guidelines → Theories → Principles
• Guidelines → Principles → Theories

Answer 15

Guidelines → Principles → Theories

Question 16

A mobile banking app requires users to enter their full account number each time they want to make a transfer, rather than letting them select from previously used accounts. This design choice primarily violates which of Shneiderman’s golden rules?

• Keep users in control
• Reduce short-term memory load
• Strive for consistency
• Permit easy reversal of actions

Answer 16

Reduce short-term memory load

Question 17

A medical imaging system allows radiologists to specify radiation dosage for CT scans. Which interface design approach BEST demonstrates Shneiderman’s principle of error prevention?

• Include an “undo” feature that allows technicians to reverse any dosage settings within 30 seconds of confirmation.
• Display typical dosage ranges based on patient demographics, highlighting values that fall outside these ranges in real-time.
• Require a second radiologist to approve any dosage setting before the scan can proceed.
• Log all dosage decisions with timestamps and operator IDs to enable audit trails and identify training needs.

Answer 17

Require a second radiologist to approve any dosage setting before the scan can proceed.

Question 18

Which example best demonstrates Norman’s concept of a “natural mapping” between an affordance and its intended action?

• A door with a recessed fingerhold cutout on its surface that suggests where to grip and pull.
• A rubber grip added to a door handle to prevent slipping when users grasp it.
• A bright red “Exit” sign above a doorway that directs people to the emergency escape route.
• A sign next to a door handle with an arrow and the text “Pull here to open”.

Answer 18

A door with a recessed fingerhold cutout on its surface that suggests where to grip and pull.

Question 19

In a modern source code editor with AI capabilities, which implementation BEST balances Shneiderman’s principle of “keeping users in control” with automated AI assistance?

• The AI generates multiple alternative code suggestions in a side panel, allowing developers to preview and selectively apply changes.
• The AI runs in a separate branch of the codebase, applying all optimizations there for developers to review later.
• The AI automatically refactors code as the developer types, providing instant optimization with a notification about what changed.
• The AI silently monitors code quality and only intervenes when it detects critical performance issues or security vulnerabilities.

Answer 19

The AI generates multiple alternative code suggestions in a side panel, allowing developers to preview and selectively apply changes.

Question 20

A hospital implemented a new Electronic Health Record (EHR) system that requires doctors to fill out all fields in a patient assessment form before submitting. After six months, they discovered two distinct behaviors:

1. Some doctors accidentally skip fields when rushing during emergencies.
2. Some doctors deliberately enter “N/A” in fields they deem unnecessary.

Which design solution best addresses these specific behaviors?

• Add a prominent warning message stating that incomplete forms violate hospital policy and may result in disciplinary action.
• Implement auto-save and smart defaults based on previous entries, while allowing doctors to mark fields as “not clinically relevant” with a required explanation.
• Reduce the number of required fields and add a “complete form later” option that sends automatic reminders.
• Create a simplified emergency mode that only requires essential fields, while maintaining the full form requirement for routine cases.

Answer 20

Implement auto-save and smart defaults based on previous entries, while allowing doctors to mark fields as “not clinically relevant” with a required explanation.

Question 21

Which of the following is an example of a descendant selector in CSS?

li.em

li em

li, em

li > em

Answer 21

li em

Question 22

For finding an element of with the id “menu”, which of the following lines of JavaScript is correct?

let menu = document.getElement
(“menu”);

let menu = window.getElementById
(“menu”);

let menu = document.select(“menu”);

let menu = document.querySelector
(“#menu”);

Answer 22

let menu = document.querySelector
(“#menu”);

Question 23

If you use Electron to create a desktop app, it is possible to access the following through JavaScript code:

• All of the options
• USB peripherals
• The local area network
• The file system of the operating system

Answer 23

All of the options

Question 24

What is most important when designing web-based interfaces for users with vision impairments?

• Use of semantically meaningful HTML
• Providing means for voice-controlling the interface
• Proper use of CSS styling
• Avoiding excessive use of colors

Answer 24

Use of semantically meaningful HTML

Question 25

Given the following HTML

Box1

Box2

Box3

You want all three boxes to appear horizontally side by side with a consistent gap between them. Each box should: 1. Have a fixed width of 100px 2. Have a 1px solid black border 3. Be spaced out with a 10px gap between each box Visually it should look something like this: [ Box 1 ] [ Box 2 ] [ Box 3 ] Which of the following CSS snippets will give you that result? 1. .container { display: block; } .box { display: block; width: 100px; border: 1px solid black; margin: 0 auto; } 2. .container { text-align: center; } .box { display: inline-block; width: 100px; border: 1px solid black; margin-right: 10px; } 3. .container { text-align: left; } .box { width: 100px; border: 1px solid black; margin-bottom: 10px; } 4. .container { display: inline-block; } .box { float: left; width: 100px; border: 1px solid black; margin: 10px; }

Answer 25

.container { text-align: center; } .box { display: inline-block; width: 100px; border: 1px solid black; margin-right: 10px; }

Question 26

Consider the following HTML and CSS: HTML:

Welcome

CSS: .box { width: 200px; height: 50px; padding: 10px; border: 2px solid black; margin: 5px; } With default box-sizing: content-box, how wide is the element from the outer edge of the left margin to the outer edge of the right margin? - 200px - 204px - 224px - 234px

Answer 26

234px

Question 27

This is two different approaches to displaying a circle: 1. Using an HTML element such as a

styles to look like a circle (border-radius: 50%). 2. Drawing a circle on an HTML element using the 2D context. Now, you want the circle to move on the screen every time the user clicks on it. For approach 1 it is straightforward: you can add a click event listener to the div element and update its left and top CSS properties to move it. Which statement best explains how you would implement the same functionality for the circle on the canvas? A When using , you must manually detect and handle shape interactions. Typically, you put a click event listener on the element, calculate the mouse coordinates relative to the canvas, and see if they lie within your circle’s boundary. To move the shape, you change your internal data (e.g., the circle’s coordinates) and redraw the canvas. B You can directly attach a click event listener to the circle shape in the canvas just like an HTML element and then move it by changing its CSS properties. C Shapes on the canvas are separate DOM objects, so you must apply a mousemove listener on each shape to track its position, and a click listener to detect clicks individually. D Canvas automatically manages shape animations and hit-detection if you specify the attribute interactive="true" in the tag, so you only need to call a moveShape() function to animate the circle.

Answer 27

When using , you must manually detect and handle shape interactions. Typically, you put a click event listener on the element, calculate the mouse coordinates relative to the canvas, and see if they lie within your circle’s boundary. To move the shape, you change your internal data (e.g., the circle’s coordinates) and redraw the canvas.

Question 28

When working with an HTML , you can get either a 2D context (using canvas.getContext("2d")) or a WebGL context (using canvas.getContext("webgl"). Which of the following statements best describe how these two differ? A The 2D context provides a simpler immediate mode API (like fillRect(), arc(), etc.), while the WebGL context gives you low-level access to GPU-accelerated 2D and 3D rendering. WebGL requires writing shaders and manually managing buffers and textures, whereas 2D context does not. B Both contexts are identical in function. The only difference is that getContext("webgl") requires an additional license for 3D rendering features. C The 2D context and WebGL context both use immediate mode drawing of lines and shapes, but only WebGL can apply CSS styling to individual objects. D The 2D context can draw both 2D and 3D objects, but WebGL is restricted to 2D shapes only, with no shading or GPU acceleration.

Answer 28

The 2D context provides a simpler immediate mode API (like fillRect(), arc(), etc.), while the WebGL context gives you low-level access to GPU-accelerated 2D and 3D rendering. WebGL requires writing shaders and manually managing buffers and textures, whereas 2D context does not.

Question 29

You have a JavaScript object called person: let person = { name: “Alice”, age: 25, city: “Aarhus” } You want to remove the age property from the object completely, which of the following lines of JavaScript code will do this? A delete person.age B person.age = null C remove person.age D person.removeProperty (“age”)

Answer 29

delete person.age

Question 30

You have a dynamically updated

that shows non-critical information (such as “document saved” or “syncing data”). You need screen readers to announce these without immediately interrupting the user. Which of the following HTML snippets will achieve that? A

...

B

...

C

...

D

...

Answer 30

...

Question 31

Dark patterns are interface designs that manipulate users into making decisions they wouldn't otherwise make. An example might be displaying a random number of previous sales on an e-commerce website to suggest that a product is popular. Using Shneiderman's golden rules as a framework, analyze how dark patterns violate core principles of user interface design. Provide at least two examples (different from the e-commerce sales example) in your discussion that violate separate golden rules.

Question 32

Consider a voice-based interface (like Alexa or Siri) and a touchscreen interface for setting a timer. Using Norman's gulfs of interaction (the gulf of execution and gulf of evaluation), analyze the key differences between these interaction models.

Question 33

Universal usability aims to support users with diverse abilities, but automated accessibility features can sometimes conflict with user control. Using specific examples from mobile or web interfaces, analyze how designers can balance automated accessibility adjustments (like font scaling or contrast enhancement) with existing design principle of user control. Discuss the tradeoffs involved.

Question 34

What is the difference between a mouse and a joystick, and for what situations is a joystick a more suitable input device than a mouse?

Question 35

Explain the rationale for using the canvas element to draw graphics instead of using DOM elements and give an example of a use case where the canvas would make more sense to use than using DOM elements.