ITS290F Human Computer Interaction & User Experience Design

Lab 6. UI Design Guidelines and Principles

What you’ll learn in this lab:

 Applying UI design guidelines and principles

 Identifying user error

1. Readings
Suggested reference readings

1. The Eight Golden Rules of Interface Design

http://www.cs.umd.edu/~ben/goldenrules.html

2. User Interface Design Guidelines: 10 Rules of Thumb

https://www.interaction-design.org/literature/article/user-interface-design-guidelines-
10-rules-of-thumb

2. Lab Exercises
On your own, follow the instructions to finish the exercises. For short text questions, put
down your answers in the answer textboxes. For coding exercises, you may edit your code
with any text editor. Put your solution code in the solution textboxes when finished.

Exercise 1

You are a UI designer who recently hired by an airline, responsible for revamping the UI
design of a flight booking system. You have interviewed a focus group comprises customers
who frequently use the system to book flights online. One of the major problems identified is
they often make user errors during the selection of travel dates. This exercise will focus on
the discussion of user errors.

Watch a video (https://www.nngroup.com/videos/slips-vs-mistakes/) that introduces user

errors and answer the following questions.

1
A. What are the two types of user errors in HCI?
Slips
Mistakes

B. State the major difference between the (two) types of user error.
Slips-unconscious errors caused by inattention.
Mistakes-conscious errors caused by mismatched mental model.

C. What are the key aspects in preventing slips.

Offering suggestions, helpful constrains, good defaults, forgiving formatting.

D. What are the key aspects in preventing mistakes.

Preventing mistakes relies on fully understanding your user’s mental models and
expectations and designing with that in mind.

E. Thomas spent 15 minutes to enter the online tax return form with his laptop computer.
Suddenly, his computer was forced to shutdown due to battery outage. He then
powered up his computer with a power adapter, but he found that everything he had
entered was lost. Which of the following error prevention approaches should be applied
in order to minimize the loss happened to Thomas?
Support undo
Warn before submitting errors
Confirm before destructive actions
Display all contextual information
Design for interruptions

2
 F. Mary is now purchasing some COVID-19 test kits from an online store. She has been
checking out the shopping cart and entered all necessary information. She is now going
through the last step, the payment process. She is struggling at this point because the
screen only shows the total amount and two buttons asked for “Cancel” or “Confirm”.
If she clicked on the “Cancel” button, she may need to start over everything. If she
clicked on the “Confirm” button, she worries she might make something wrong in her
order. Which of the following error prevention approaches should be applied in order
to let Mary to be more confident with her purchase?
Support undo
Warn before submitting errors
Confirm before destructive actions
Display all contextual information
Design for interruptions

The following code excerpt is extracted from the problematic UI that accepts the departure
date and return date of a roundtrip ticket from the user.

You may also open the webpage file T06Ex01.html with a recent web browser. Try to
interact with the UI components and identify the potential user errors.

G. Which type of user errors is more likely happened in the given UI (assume the user is
conscious)?
Slips

H. With the error type given in G., describe two potential user actions that would result
such errors.
Users can accidently select a date in the past
Users can accidently select a return date that is before the departure date

If you really have no idea, proceed to Exercise 2 first.

3
4
Exercise 2

With the findings in Exercises 1, you are about to revamp the date selection UI to prevent the
user errors. You have added two alerts on the page that warn the user of invalid selection of
departure date and return date. You also implemented a function setDefaultDates() that
selects default dates for the users and prohibits the selection of past dates. The webpage with
the improve UI is in T06Ex02.html. You may open the file with a text editor and try it with a
web browser.

A. Which aspect in Exercise 1. C. is implemented in function setDefaultDates() to

prevent slips?
Good defaults

You might find that the alerts are displayed upon page load without interacting with the user,
so you would like to hide them at the moment.

B. Update the alert components on the webpage to hide the alert messages when the page
first loads. Insert the missing classes to the corresponding tags of both the
T06Ex02.html file and the textbox below:
<div id="departureDateAlert" class="alert alert-danger __d-none______" role="alert">
Departure date was in the past!
</div>

...

<div id="returnDateAlert" class="alert alert-danger __d-none______" role="alert">

Return date earlier than departure date!
</div>

Hints: See pages 31–33 of L05’s lecture slides.

Then you would like to add the function checkDepartureDate() that checks the validity
of the departure date. The almost completed function is as follows.

5
 C. Fill in the missing parts of the function checkDepartureDate()in the textbox below
and put the completed function in the appropriate region of the T06Ex02.html file.
function checkDepartureDate() {
// get the current date string (with removal of time)
let today = new Date().toISOString().substr(0,10);
today = new Date(today); // make the date comparable

// get the departure date

let ddate = new Date(document.getElementById("__departureDate______").value);

// compare the dates, hide/show the alert

if (ddate < today) {
document.getElementById("__departureDateAlert______").classList.remove("d-
none");
} else {
document.getElementById("__depatureDateAlert______").classList.add("d-none");
}
}

Now your page should be able to alert the user of an invalid date selection. Next, you would
like to add the function checkReturnDate() that checks the validity of the return date. The
almost completed function is as follows.

D. Fill in the missing parts of the function checkReturnDate()in the textbox below and
put the completed function in the appropriate region of the T06Ex02.html file.
function checkReturnDate() {
let ddate = new Date(document.getElementById("_departureDate_______").value);
let rdate = new Date(document.getElementById("___returnDate_____").value);
if (rdate < ddate) {
document.getElementById("___returnDateAlert_____").classList.remove("d-none");
}
else {
document.getElementById("__returnDateAlert______").classList.add("d-none");
}
}

E. Which aspect(s) in Exercise 1. C. are satisfied in the updated webpage of Exercise 2?

Justify your answer.

6
It is an open-ended question,and all reasonable answers are considered correct
The aspects in Exercise1 .C. are satisfied to certain depending on the point of view:
Offer suggestions- it suggests an allowable data range to the user
Helpful constrains- it prohibits the selection of past dates
Good defaults- it gives today as a default
Forgiving formatting – it provides a calendar for date selection in additional to a text field.

7
--- End ---