Course Code: ITE 399 – HUMAN COMPUTER INTERACTION

MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Lesson title: Basics of Interaction Design 2 Materials:

Lesson Objectives: SAS
References:
At the end of this module, the student should be able to: https://www.interaction-design.org/
literature/topics/ui-design
1. Identify Design rules and Principles.
2. Understand how Interaction Designs affect user usability. https://maze.co/collections/ux-ui-
3. Create simple Interactive Designs. design/ui-design-principles/#6-key-
ui-design-principles

A. LESSON PREVIEW
Introduction
To deliver impressive user interfaces, remember that users are humans, with needs such as
comfort and a limit on their mental capacities. HCI starts with understanding the problems that
users are having;
● Identifying human activities needing better support then designing a system that
provides what they really need.
● Specifying usability; utility; user experience and deploying it for usefulness.

Today’s lessons will introduce us to important guidelines when designing interfaces.

B.MAIN LESSON
Golden rules of user interface design

When designing new interfaces or updating existing products, keeping in mind UI design
principles is imperative. Here is a rundown of the key guidelines.
1. Make user interfaces consistent
Consistent UI means using similar design patterns, identical terminology in prompts,
homogenous menus and screens, and consistent commands throughout the interface.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

2. Allow users to navigate easily via shortcuts

Expert users, or users who frequent your website or use your product regularly, need shortcuts
to move quickly through the interface. Just like how most Windows users make use of the
shortcut CTRL + C to quickly copy text and CTRL + V to paste it, you need to make navigation
and operating user interfaces easy through shortcuts.
3. Provide informative feedback
Provide feedback through readable UI copy for all user moves. For example, when users are
asked to create a password, your UI should offer information on how strong it should be by
either giving an example of a strong password or using symbols that demonstrate how strong
the user’s password currently is. A great example is DropBox’s signup form. It shows the
strength of a user’s password through a sleek bar. When I added just my name in the
password field, it signaled how weak my password was through that one bar.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Then create a significantly difficult password with multiple numbers and symbols:

4. Design dialog to yield closure

Sequences of actions should be organized into groups with a beginning, middle, and end.
Informative feedback at the completion of a group of actions gives users the satisfaction of
accomplishment, a sense of relief, a signal to drop contingency plans from their minds, and an
indicator to prepare for the next group of actions. A great example is taking users to a Thank
You page with a summary after they complete an order, informing them it’s confirmed.

5. Prevent errors as much as possible

Make the UI as easy to use as possible by preventing serious user errors. So from greying out
menu items that are not available to preventing users from typing in alphabets in fields that ask
for phone numbers, try to prevent errors as much as possible. This is also where usability
testing comes in, so as a designer you need to ensure everything works as intended by testing
the design with users before launching. It not only helps to test the functionality and usability of
your product, but also helps you to understand your target audience’s needs better. However,
occasionally errors happen. So if a user has made an error, make sure to offer them a clear
explanation to understand the error and an easy solution to solve it.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

6. Allow users ways to reverse their actions easily

Offer users easy and obvious ways to reverse their steps when they have taken a wrong step.
This feature relieves anxiety, since users know that errors can be undone, and encourages
exploration of unfamiliar options. Say, someone has accidentally added the wrong information
in a multi-page form, allow him or her to go back to that page and rectify his or her mistake
easily without having to start all over again.

7. Support internal locus of control

A great example of keeping users in control is when someone is about to exit Microsoft Office
and is asked by the system if they are sure they want to exit without saving their work. Not only
does this make the user feel in control, but it also ensures that in case of an accidental exit,
their work is not lost.

8. Minimize memory load

A key rule for making user interfaces easy for people to use is minimizing cognitive load.
Cognitive load (or memory load) can reduce a user’s capacity to perform important tasks, so it
is critical that computers take over the burden of memory from them as much as they can.For
instance, do not make users re-enter personal information every time they are buying from
your website or add their email address and name every time they log into your website. While
designing, always choose recognition over recall to enable users to complete their tasks
quickly and without hassle.

6 key UI design principles

Clarity- From recognizing interactive and static elements to making navigation intuitive, clarity
is an essential part of a great UI design. When making a design you should ask yourself with
the following question:
● Is your navigation intuitive? Are users directed and encouraged to move from one page
to the next with ease?
● Have you used highly visible buttons that prompt users into clicking them?
● Is the purpose of each element on your product, website or application, clear and easy
to understand?

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Familiarity- Do you automatically look for the menu at the top of the homepage of a new
website? Why? Because that’s where we perceive the menu to be.

The best interfaces are familiar for users.

Usability, i.e. how easily a user interacts with a product or a website, is closely relate to
familiarity. Users depend on elements and interfaces acting in a way that is familiar to their
digital experience. Users spend most of their time on other sites. This means that users prefer
your site to work the same way as all the other sites they already know.

There are several benefits of incorporating the UI design principle of familiarity:

● Increases user retention
The more familiar the user is with your interface and more easily, they can use your
website or app, the more they will come back to it. In addition, since research shows
that acquiring a new customer costs 6x to 7x times more than to retain an old one, it’s
vital that you create a seamless user experience by leveraging familiarity.
● Easier for UI designers
It’s easier for UI designers to incorporate tried and tested interface design solutions than
create new ones from scratch.
● Reduces the learning curve for users
The less time visitors have to spend understanding how the user interface works, the
faster they can start using your product or service. It also reduces the chances of them
exiting your website and moving on to the next website because yours had a steep
learning curve.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

User Control- Users often choose system functions by mistake and will need a clearly marked
‘emergency exit’ to leave the unwanted state without having to go through an extended
dialogue. Support undo and redo. This basically means giving users different options to go
back a step when they feel they’ve made a mistake.

As an example, whenever you’re creating forms, allow users to click the <Back> button and go
back to the page they were last on. Don’t take them all the way back to the homepage or the
start of the form.

Similarly, when using overlays on your website, make sure the exit button {x} is clear.
Otherwise, users might click the back button on the browser and go back two steps instead of
just exiting the overlay.

Hierarchy- Strong visual hierarchy is a core design principle of a successful user interface. It
consists of arranging visual elements in a way that explains the level of importance of each
element and guides users to take the desired action. As a designer, your job is to organize UI
design elements in a way that makes it easy for users to navigate within your product.

It ensures that users see the most important information first, then the next, and so on, and is
established through various elements. Some of them include:
1. Color
2. Size
3. Fonts

Negative space- Give your elements some breathing room - don’t cram all the objects and
elements together on the screen. Negative space makes important elements pop and stand
out. Social distance your elements, text blocks and everything on your darn screen. Space is
everyone's friend. Use the Law of Proximity to help users visually navigate your pages. This is
as much a part of your design as everything else so please mind the gap.

Flexibility- Flexibility doesn’t just follow a linear path, it’s about knowing your customers and
giving flexibility for different customer intents. So from designing solutions that work great in all
situations (from your grand dad’s old computer to your son’s latest iPad), to using shortcuts
that speed up interaction for users, flexibility is a key principle of user interface design.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

You not only need to make your user interface learnable for new users, but it should also have
accelerators that help expert users speed up their processes. From novices to experts, ensure
your product is flexible and efficient for all kinds of users.

Some examples of a flexible UI design include:

● Shortcuts for performing frequently used steps with a single click
● Advanced search features
● Incorporating filter bars

In addition, think multi-modal. A multimodal user interface allows users to interact with the
system through multiple modes, such as speech, text touch, vision. As a designer, you need to
be mindful of all these modes. Also, design the user interface keeping in mind that your
audience might use it via mobile, tablet, laptop, or a rusty old computer.

As for GUI designs, these are the essential guidelines:

● Make buttons and other common elements perform predictably (including
responses such as pinch-to-zoom) so users can unconsciously use them
everywhere. Form should follow function.
● Maintain high discoverability. Clearly label icons and include well-
indicated affordances: e.g., shadows for buttons.
● Keep interfaces simple (with only elements that help serve users’ purposes) and
create an “invisible” feel.
● Respect the user’s eye and attention regarding layout. Focus on hierarchy and
readability:
Use proper alignment. Typically choose edge (over center) alignment.
Draw attention to key features using:
1. Color, brightness and contrast. Avoid including colors or buttons
excessively.
2. Text via font sizes, bold type/weighting, italics, capitals and
distance between letters. Users should pick up meanings just by
scanning.

● Minimize the number of actions for performing tasks but focus on one chief
function per page. Guide users by indicating preferred actions. Ease complex tasks by
using progressive disclosure.
● Put controls near objects that users want to control. For example, a button to
submit a form should be near the form.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

● Keep users informed regarding system responses/actions with feedback.

● Use appropriate UI design patterns to help guide users and reduce burdens (e.g.,
pre-fill forms). Beware of using dark patterns, which include hard-to-see prefilled opt-
in/opt-out checkboxes and sneaking items into users’ carts.
● Maintain brand consistency.
● Always provide next steps which users can deduce naturally, whatever their
context.

Skill-building Activity
Exercise 1: Good or Bad Website?
Instruction: Identify which of the following websites are good or bad websites and explain why.

1. http://arngren.net/

2. http://www.greatdreams.com/

3. https://relishmama.com.au/

4. https://www.tinkeringmonkey.com/

5. http://www.bellads.info/

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Check For Understanding

Instruction: Identification. What rule, method or principles are being used in the following:
_________1. Enlarging Title
_________2. All Page design have same color
_________3. Sorting list search
_________4. Cancel Online Order
_________5. Applying other website Tab Design
_________6. Confirmation Dialog Message
_________7. Password Suggestion
Thinking about Learning
a) Mark your place in the work tracker which is simply a visual to help you track how much work
you have accomplished and how much work there is left to do.
Period 1 Period 2 Period 3

1 2 3 4 5 6 7 8 9 1 11 12 13 14 1 16 17 18 19 20 2 22 23 24 25 26
0 5 1

b) Think about your learning by filling up “My Learning Tracker”. Write the learning targets, score,
and learning experience for the session and deliberately plan for the next session.
Date Learning Target/Topic Scores Action Panel

What’s the What module # did you do? What were What contributed to the quality of
date today? What were the learning targets? your scores in your performance today? What will
What activities did you do? the activities? you do next session to maintain
your performance or improve it?

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #3 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Question/s you want to ask the teacher about this module is/are:
________________________________________________________________________________
________________________________________________________________________________

This document is the property of PHINMA EDUCATION