= HCI Exam 2023 - Answers to the questions
<hci-exam-2023---answers-to-the-questions>
== Question 1
<question-1>
#quote(block: true)[
#block[
#set enum(numbering: "(a)", start: 1)
+ What is a micro-interaction? Name any two of the four components of a
  micro-interaction. Give one example of a micro-interaction in an
  interface.
]
]

A micro-interaction is a small, contained product moment that revolves
around a single use case. The four components of a micro-interaction
are: trigger, rules, feedback, and loops. An example of a
micro-interaction is the heart icon on Instagram that changes color when
you double tap it.

#quote(block: true)[
#block[
#set enum(numbering: "(a)", start: 2)
+ What are the problems with using a red circle to indicate "stop",
  which changes to a green circle when it is safe for the user to
  proceed with their action?
]
]

The problem with using a red circle to indicate "stop" is that it is not
universally understood. In some cultures, red is associated with danger,
while in others, it is associated with luck.

This can lead to confusion and misinterpretation of the message.
Additionally, color blindness can make it difficult for some users to
distinguish between red and green, further complicating the message.

The use of color alone to convey meaning can also be problematic, as it
relies on the user’s ability to perceive color accurately. This can be
challenging for users with visual impairments or in situations where the
lighting is poor.

#quote(block: true)[
#block[
#set enum(numbering: "(a)", start: 3)
+ What is the difference between menu depth and menu breadth? Which is
  better to use to present menu choices to users, and why?
]
]

Menu depth refers to the number of layers in a menu hierarchy, while
menu breadth refers to the number of choices at each level. A shallow
menu with a large breadth is generally better for presenting menu
choices to users, as it allows users to quickly access the information
they need without having to navigate through multiple levels of the
menu.

A deep menu with a small breadth can be overwhelming and confusing for
users, as it requires them to remember the hierarchy and navigate
through multiple levels to find the desired information. A shallow menu
with a large breadth is more user-friendly and intuitive, as it
minimizes the cognitive load on users and allows them to easily find the
information they are looking for.

#quote(block: true)[
#block[
#set enum(numbering: "(a)", start: 4)
+ With regard to human memory, what is a retrieval cue? Give two
  examples of retrieval cues used in interface design
]
]

A retrieval cue is a stimulus that helps trigger the recall of
information stored in memory. Two examples of retrieval cues used in
interface design are:

Icons: Icons are visual cues that represent specific actions or
concepts. For example, a magnifying glass icon is commonly used to
represent the search function.

Color coding: Color coding is a visual cue that uses different colors to
represent different categories or types of information. For example, red
is often used to indicate errors or warnings, while green is used to
indicate success or completion.

== Question 2
<question-2>
=== a
<a>
One method of preventing errors in design is to use a forcing function.
Forcing functions can be especially useful in safety-critical systems.
In interface design, we distinguish between three types of forcing
functions. For each of the following scenarios, identify and name the
type of forcing function being used

#quote(block: true)[
#block[
#set enum(numbering: "(i)", start: 1)
+ Dialog window appears asking if you want to save your work before
  closing a document with unsaved changes.
]
]

The type of forcing function being used in this scenario is a lock-in
forcing function. A lock-in forcing function prevents the user from
taking an action until a specific condition is met. In this case, the
user is prevented from closing the document until they have saved their
work.

#quote(block: true)[
#block[
#set enum(numbering: "(i)", start: 2)
+ ATM forces you to take your card first before releasing your money
]
]

The type of forcing function being used in this scenario is an interlock
forcing function. An interlock forcing function forces the user to take
actions in a specific order in order to prevent errors. In this case, the
user is prevented from taking their money until they have taken their
card.

#quote(block: true)[
#block[
#set enum(numbering: "(i)", start: 3)
+ When paying for an item purchased online, you cannot complete the
  payment until you’ve entered the one-time security code
]
]

The type of forcing function being used in this scenario is a lock-out
forcing function. A lock-out forcing function prevents the user from
taking an action until a specific condition is met. In this case, the
user is prevented from completing the payment until they have entered
the one-time security code.

#quote(block: true)[
#block[
#set enum(numbering: "(a)", start: 2)
+ We distinguish between two types of user errors: slips and mistakes.
  Slips are unconscious errors – right intention, but wrong action.In no
  more than one sentence, identify which type of user is more prne to
  "slips", and why
]
]

Users who are more experienced with a system are more prone to slips, as
they may rely on automatic or habitual actions rather than conscious
thought when interacting with the system. The familiarity with the
system can lead to slips, as users may perform the wrong action
unintentionally due to muscle memory or routine. We distinguish between
two types of user errors: slips and mistakes. Slips are unconscious
errors – right intention, but wrong action. In no more than one
sentence, identify which type of user is more prone to "slips", and why.
Another example of a slip is when a user types the wrong password due to
muscle memory or habit, even though they know the correct password. On
the other hand, mistakes are conscious errors – wrong intention, wrong
action.

=== c - Your team has been given the task of re-designing a website for users to book flights. The first screen allows the user to select their departure and arrival city, and their travel dates before searching for available flights
<c---your-team-has-been-given-the-task-of-re-designing-a-website-for-users-to-book-flights.-the-first-screen-allows-the-user-to-select-their-departure-and-arrival-city-and-their-travel-dates-before-searching-for-available-flights>
#quote(block: true)[
#block[
#set enum(numbering: "(i)", start: 1)
+ Identify two ways your team can design this first screen that will
  prevent the user from making "slips" when specifying their flight
  requirements.
]
]

The first way to reduce slips within the system is by adjusting the size
of the various input options on to be larger, or much clearer. If the
buttons on the website were very small and without even spacing, it
would likely be much easier for the user to accidentely click on the
wrong button, simply because everything’s so close together.

The second way to reduce slips within the system is by using
vivid colours for both the text and the buttons. If the text and buttons
were all the same colour, it would be much easier for the user to
accidentally click on the wrong button, as they would all blend in
together.

#quote(block: true)[
#block[
#set enum(numbering: "(i)", start: 2)
+ One of the phases of human-centred design is prototyping. Your team
  would like to make use of the lo-fi prototyping technique. Give three
  advantages of using lo-fi prototyping.
]
]

The first advantage is that it’s significantly cheaper to produce, as a
lo-fi prototype could even include paper sketches. This also means that
the tools which are required in order to create a lo-fi prototype are
much lesser; you don’t necessarily need the most expensive specialised
equipment or software, as you can often create a lofi prototype with the
equipment around you.

The second advantage is that the average amount of time required to make
a lo-fi prototype is significantly less than a hi-fi prototype, meaning
that a designer can go through multiple more iterations of the same
technology. This would allow different designs and interfaces to receive
feedback much more rapidly.

The third advantage is that lo-fi designs can be more accessible to team
members from a wide variety of disciplines. Hi-fi prototypes may only be
edited by people who know how to code, or who know how a specific piece
of design software such as Figma works, which may limit the number of
people who are able to provide feedback and work on it.

== Question 3
<question-3>
You are part of a design team that has been tasked with designing a
digital touchscreen thermostat. \> (a) Sketch an interface design for
this system with appropriate annotations. The thermostat system should
display the current temperature and allow the user to: \> \> - Set their
preferred room temperature \> - Switch between showing the temperature
in Celsius (⁰C) or Fahrenheit (⁰F). \> - Switch the heating on for a
fixed duration. \> THERE ARE NO OTHER FUNCTIONS OR FEATURES.

\[insert image here\]

#quote(block: true)[
#block[
#set enum(numbering: "(a)", start: 2)
+ For each feature that you have designed, identify a design principle
  that you have used and explain (in no more than one sentence each) how
  the feature implements the design principle.
]
]

\[insert features here\]
