Designing and Building

AI Products
and Services
Workbook
Your AI Mascot will guide you through
this week, so watch out for these icons:

Read

Write

Consider

Visit the website

Design/Create

1
 Workbook 5: Designing a Human–
Computer Interaction Interface

Advances in technology have swiftly moved us from keyboard to

Week 5

motion-sensing interactions, bridging the divide between human

interaction and computer interaction.
Nevertheless, many interfaces seem to be designed with little
regard to usability. This generally leads to frustration, reduced
productivity, and lost revenue, as users move on to the next
product in their search for new and innovative ways for interaction
technology. Therefore, the success of any AI product relies upon
incorporating effective user experience design methodologies
into the AI design process.
For this task, you’ll design a human–computer interface that uses
AI to solve a problem or improve a process. Follow the steps
below to complete this workbook entry.

2
 1 Step One: Select a Problem

Select a problem that needs to be solved or a process that needs

improvement. This problem can be something in your organization or
your personal life

For instance, one of Amazon Echo Dot’s many capabilities is that

it allows a user to select and play music.
In this case, a user desires a hands-free, voice-activated interaction with
his/her music playlist.

Type your response here

People use computers to solve ordinary routines and exciting creation tasks every day. Those
ordinary routines, for example, responding to emails and requests, reading the news and tech
information related or not related to interesting, often take time with many clicks and walk-through
applications for browsing.

I would need a smart program deployed on my computer to learn my daily activities and
behaviors, help me quickly complete ordinary routines, and quit focusing on exciting creation jobs.

3
 2 Step Two: Assess the User

The Interaction Design (IxD) process is what designers use to create

solutions centered on users’ needs, aims, and behavior when interacting
with products.

The IxD process involves five stages:

Discover what users need/want: Observe and interview potential

customers and examine existing solutions
Analyze: Sort and order your findings
Design: Outline a potential solution according to design guidelines and
fundamental design principles
Prototype: Give users an idea of what the product will look like and let
them test it
Implement and deploy: Build and launch your product

The IxD process is iterative, and it may take many iterations before
pinpointing the ideal version of a solution. So one should continue testing
and adapting appropriate changes around an ever-clearer understanding
of your users’ needs.

You’ll tend to find that time and financial constraints get in the way. Examine
where you can achieve the most progress by using the most cost-effective
techniques to keep your design on course. You should aim for a minimum
viable solution rather than wait to release a “perfect” product. Problems
are harder to identify than solve, so you should approach assumptions and
feedback carefully.

4
 2 Step Two: Assess the User (Cont.)

You can use heuristic evaluation to help you identify the most obvious
usability errors and focus on fixing them first. Specifically, for this
step, you’ll address stage one. This stage involves “finding the users’
needs/wants.”

Write a paragraph describing how the user and your application’s

interaction will occur, keeping in mind the user experience and limitations
of current human-computer interaction. How can you enhance the user
experience with your proposed application?

Consider the following questions in your response:

Is this a real need or want for the end user?

How will you go about assessing the user?
Will you observe their usage of technology?
Will you hold interviews?
What other options will you use?
Which existing solutions will you examine?
What will you do if the user does view the problem the same way you do?

5
 2 Step Two: Assess the User (Cont.)

Type your response here

This program would automatically launch and learn my daily behaviors and activities happening
on the computer every day, without taking precedence over my controls for application usage. But
give me a hint-icon/button to start and quickly close a set of ordinary tasks.

- In the morning, after login, it reads through emails and selects those that require me to respond
to, filters out advertisement messages, prioritizes messages according to the role relationship, and
gives simulated messages learning from what I used to for response, page by page sequentially,
expecting to close this set within 20 mins.

- It searches and reads the news and tech information from websites I usually visit, and gives me
a few pages with brief paragraphs summaries, and ratings of them, with links to the original
information pages. It learns from how I spent time on the website and types of information and
gives analyses to them with tags.

- It helps on other similar routine tasks, usually just giving an icon to help me start and quickly
close a set of tasks, it reads through my cursor movement and typing to learn about my patience
and state for tuning the timeframes given to a particular set of tasks.

6
 Step Three: Select AI application
3 or Algorithm

In this step, given the problem at hand, you need to select the
appropriate artificial intelligence algorithm that you will use for the HCI
Then, document the alternatives and explain why you selected a particular
algorithm for the HCI?

Although it may take a bit of research, the answer to this question is

essential for the success of your HCI. Return to the previous weeks'
discussions concerning machine learning or deep learning.

Here are two resources to get you started.

Common Machine Learning Algorithms for Beginners

A machine learning (ML) algorithm is a procedure that runs on data and is
used for building a production-ready machine learning model. If you think
of machine learning as the train to accomplish a task, then machine learning
algorithms are the engines driving the accomplishment of the task.

ML algorithms can be grouped into three main categories.

1. Supervised machine learning algorithms search for patterns within the
value labels assigned to data points. Some popular machine learning
algorithms for supervised learning include SVM for classification problems,
linear regression for regression problems, and random forest for regression
and classification problems.
2. Unsupervised machine learning algorithms work with data where
there are no labels associated with data points. These machine learning
algorithms organize the data into a group of clusters to describe its
structure and make complex data look simple and organized for analysis.

7
 Step Three: Select AI application
3 or Algorithm (Cont.)

3. Reinforcement machine learning algorithms choose an action based on

each data point and later learn how good the decision was. Over time,
the algorithm changes its strategy to learn better and achieve the
best reward.

Below, we give you a list of some of the most common ML algorithms.

1. Naïve Bayes classifier algorithm is among the most popular learning
methods grouped by similarities, which works on the popular Bayes
theorem of probability. Naïve Bayes classifier algorithm can be used if
you have a moderate or large training dataset, if the instances have
several attributes, and if, given the classification parameter, attributes
that describe the instances should be conditionally independent. Its
applications include sentiment analysis, document categorization, and
email spam filtering.
2. K-means clustering algorithm is a popularly used unsupervised ML
algorithm for cluster analysis. The algorithm operates on a given dataset
through a predefined number of clusters, k. The output of the k-means
algorithm is k clusters with partitioned input data. For instance, let’s
consider k-means clustering for Wikipedia search results. The search term
“Jaguar” on Wikipedia will return all pages containing the word Jaguar
which can refer to Jaguar as a car, Jaguar as a Mac OS version, and
Jaguar as an animal. K-means clustering algorithm can be applied to
group the web pages that talk about similar concepts. It is used by most
search engines, such as Yahoo and Google, to cluster web pages by
similarity and identify the “relevance rate” of search results.
3. Support vector machine (SVM) learning algorithm is a supervised ML
algorithm for classification or regression problems where the dataset
teaches SVM about classes so that it can classify any new data into
different classes by finding a line (hyperplane) which separates the
training dataset into classes. The advantages of using SVM include best

8
 Step Three: Select AI application
3 or Algorithm (Cont.)

classification accuracy on the training data, more efficiency for correct

classification of the future data, and no overfitting of the data. SVM is
commonly used for stock market forecasting by various financial
institutions. For instance, it can be used to compare the relative
performance of the stocks when compared to the performance of other
stocks in the same sector.

4. Linear regression machine learning algorithm shows the relationship

between two variables and how the change in one variable impacts the
other. Linear regression is used for estimating real continuous values.
The most common examples of linear regression are housing price
predictions, sales predictions, weather predictions, employee salary
estimations, etc. The basic goal of linear regression is to fit the best line
among the predictions. Linear regression is one of the most interpretable
machine learning algorithms. It’s fast and requires minimal tuning.

5. Logistic regression machine learning algorithm is used for classification

tasks and not regression problems. Here, “regression” implies that a linear
model is fit into the feature space. The odds or probabilities that describe
the outcome of a single trial are modeled as a function of explanatory
variables. Logistic regression algorithms help estimate the probability of
falling into a specific level of the categorical dependent variable based
on the given predictor variables. Logistic Regression is a robust algorithm
as the independent variables need not have equal variance or normal
distribution. Additionally, it does not assume a linear relationship between
the dependent and independent variables and, hence, can also handle
non-linear effects. The applications of logistic regression include
epidemiology to identify the risk factors for diseases and plan accordingly
for preventive measures as well as for risk management in credit scoring
systems.

9
 Step Three: Select AI application
3 or Algorithm (Cont.)

6. Decision tree machine learning algorithm is a graphical representation

that makes use of the branching methodology to exemplify all possible
outcomes of a decision, based on certain conditions. In a decision tree,
the internal node represents a test on the attribute; each branch of the
tree represents the outcome of the test, and the leaf node represents a
particular class label, i.e., the decision made after computing all the
attributes. The classification rules are represented through the path from
the root to the leaf node. Decision trees are very instinctual and can be
explained to anyone with ease. People from a non-technical background
can also decipher the hypothesis drawn from a decision tree, as they are
self-explanatory. Decision tree algorithms can handle both categorical
and numerical variables and do not require making any assumption on
the linearity in the data. Hence, they can be used in circumstances where
the parameters are non-linearly related. These algorithms are useful in
data exploration and implicitly perform feature selection. In finance,
applications of decision trees include banks classifying loan applicants;
in medicine, they are used to identify at-risk patients and disease trends.

7. Artificial neural networks (ANN) algorithms have interconnected

non-linear neurons; thus, these machine learning algorithms can exploit
non-linearity in a distributed manner. They can adapt free parameters to
the changes in the surrounding environment. They learn from their
mistakes and make better decisions through backpropagation. ANNs are
easy to conceptualize, and they can identify all probable interactions
between predictor variables. Financial institutions use ANN machine
learning algorithms to enhance their performance in evaluating loan
applications and bond rating. Many bomb detectors at U.S. airports use
artificial neural networks to analyze airborne trace elements and identify
the presence of explosive chemicals.

10
 Step Three: Select AI application
3 or Algorithm (Cont.)

Google uses artificial neural networks for speech recognition, image

recognition, and other pattern recognition (handwriting recognition)
applications.

8. K-nearest neighbors (KNN) uses the prediction of continuous values like

regression. Distance-based measures are used in k-nearest neighbors
to get the closest correct prediction. The final prediction value is chosen
on the basis of the k neighbors. The advantages of using k-nearest
neighbors include high accuracy; however, better algorithms exist, and
’it’s very useful for non-linear data, as there are no assumptions here.

Understanding the Four Types of Artificial Intelligence

There are four types of artificial intelligence: reactive machines, limited
memory, theory of mind, and self-awareness.

Reactive machines: The most basic types of AI systems are purely reactive
and don’t have the ability to either form memories or use past experiences
to inform current decisions. An example of this is Deep Blue, IBM’s
chess-playing supercomputer, which beat international grandmaster Garry
Kasparov in the late 1990s.
Deep Blue can identify the pieces on a chess board and know about each
move. It can make predictions about what moves might be next for it and
its opponent and can choose the most optimal moves from among the
possibilities. But it doesn’t have any concept of the past or any memory of
what has happened before.
This type of intelligence involves the computer perceiving the world
directly and acting on what it sees. It doesn’t rely on an internal concept of
the world.

11
 Step Three: Select AI application
3 or Algorithm (Cont.)
The current intelligent machines we marvel at either have no such concept
of the world or have a very limited and specialized one for its duties. The
innovation in Deep Blue’s design was not to broaden the range of possible
moves the computer considered. Rather, the developers found a way to
narrow its view, to stop pursuing some potential future moves, based on
how it rated their outcome.
These methods do improve the ability of AI systems to play specific games
better, but they can’t be easily changed or applied to other situations. These
computerized imaginations have no concept of the wider world – they can’t
function beyond the specific tasks they’re assigned and are easily fooled.

Limited memory: This type contains machines that can investigate the
past. Self-driving cars do some of this already. For example, they observe
other cars’ speed and direction. That can’t be done in just one moment but
rather requires identifying specific objects and monitoring them over time.

These observations are added to the self-driving cars’ preprogrammed

representations of the world, which also include lane markings, traffic
lights, and other important elements, such as curves in the road. They’re
included when the car decides when to change lanes, to avoid cutting off
another driver or being hit by a nearby car.
But these simple pieces of information about the past are only transient.
They aren’t saved as part of the car’s library of experience it can learn from,
the way human drivers compile experience over years behind the wheel.

Theory of mind: Machines in this class not only form representations about
the world but also about other agents or entities in the world. In psychology,
this is called “theory of mind” – the understanding that people, creatures,
and objects in the world can have thoughts and emotions that affect their
own behavior.

12
 Step Three: Select AI application
3 or Algorithm (Cont.)
This is crucial to how we humans formed societies because they allowed
us to have social interactions. Without understanding each other’s motives
and intentions and without considering what somebody else knows either
about me or the environment, working together is at best difficult and at
worst impossible.

Self-awareness: The final step of AI development is to build systems that

can form representations about themselves.
This is, in a sense, an extension of the “the theory of mind” possessed by
type III artificial intelligences. Consciousness is also called “self-awareness”
for a reason – “I want that item” is a very different statement from “I know I
want that item.” Conscious beings are aware of themselves and know
about their internal states; they can predict others’ feelings. We assume
someone honking behind us in traffic is angry or impatient, because that’s
how we feel when we honk at others. Without a theory of mind, we could
not make those sorts of inferences.
While we are probably far from creating machines that are self-aware, we
should focus our efforts toward understanding memory, learning, and the
ability to base decisions on past experiences. This is an important step to
understand human intelligence on its own. This is crucial if we want to
design or evolve machines that are more than exceptional at classifying
what they see in front of them.

13
 Step Three: Select AI application
3 or Algorithm (Cont.)

Type your response here

For the learnings related to data/messages proceeding -- Support vector machine (SVM) learning
algorithm
It is because we give tags and ratings to highlight priorities that users may be more interested in,
choosing a supervised algorithm would much more efficiently analyze data and learn user
interests.

For the learning related to user habits -- Long short-term memory (LSTM) network
We may choose the LSTM network to help learn user intentions to improve the user experience
because we don't have direct output from monitoring user cursor movement and keyboard typing,
The program requires training/learning from the input delays, corrections, and effective
typing/actions to understand user's state. The LSTM network is designed to maintain useful,
long-term dependencies to make predictions, with these selectively outputting relevant information
from the current state.

14
4 Step Four: Design the Interface

Interaction design focuses on creating engaging interfaces with behaviors

that are well thought out. Understanding how users and technology
communicate with each other is fundamental to this field. With this
understanding, you can anticipate how someone might interact with the
system, fix problems early, and invent new ways of doing things.

Best Practices for Designing Interactions

Consider these qualities and the associated questions when creating
digital products that have an interactive element.

What can a user do with their

mouse, finger, or stylus to
directly interact with the
interface? This includes pushing
buttons, dragging, and dropping
across the interface, etc.
Define how users can interact
What commands can a user give
with the interface.
that aren’t directly a part of the
product to interact with it? An
example of an “indirect
manipulation” is when a user hits
“Ctrl+C,” they expect to be able to
copy a piece of content

What about the appearance

(color, shape, size, etc.) gives
Give users clues about behavior the user a clue about how it
before actions are taken. may function?

15
4 Step Four: Design the Interface (Cont.)

What information do you

provide to let a user know what
will happen before they perform
an action? This tells users what
will happen if they decide to
move forward with their action

Are there constraints put in

place to help prevent errors?
Anticipate and mitigate errors. Do error messages provide a
way for the user to correct the
problem or explain why the error
occurred?

What feedback does a user get

once an action is performed?
When a user engages and
performs an action, the system
needs to respond to
acknowledge the action
How long does it take between
Consider the system feedback an action and a product’s
and response time. response time? Responsiveness
(latency) can be characterized at
four levels: immediate (less than
0.1 second), stammer (0.1–1
second), interruption (1–10
seconds), and disruption (more
than 10 seconds)

16
4 Step Four: Design the Interface (Cont.)

Are the interface elements a

reasonable size to interact with?
Elements, such as buttons, need
to be big enough for a user to be
able to select it
Are edges and corners being
used strategically to locate
interactive elements like
Strategically think about each menus? Since the edge provides
element. a boundary that the mouse or
finger cannot go beyond, it tends
to be a good location for menus
and buttons
Are you following standards?
Users understand how interface
elements are supposed to
function
Is information chunked into
seven (plus or minus two) items
at a time? People are only able
to keep five to nine items in the
short-term memory before they
forget or make errors
Simplify for learnability.
Is the user’s end simplified as
much as possible? Remove
complexity as much as possible
from the user and instead build
the system to take it into account
while simplifying it up to a certain

17
 4 Step Four: Design the Interface (Cont.)

point before it no longer functions

Are familiar formats used?
Decision time is affected by how
familiar a format is for a user to
follow and how familiar they are
with the choices

Specifically, for this step, you’ll answer the following questions and use
these answers in Step Five to design your interface.

Questions Your Answers

An icon with text for clicking to start, for
What commands can a user give for example, Email, News.
interaction with the interface? And an icon for close.

What about the appearance (color, The action icon would appear in center, maybe
a 200x200 pixels size.
shape, size, etc.) gives the user a
clue about how it may function?
The continuing proceeding steps are the same
What information do you provide to
as usual as using the original applications.
let a user know what will happen
before they perform an action?

Are there constraints put in place n/a. Intending to not add changes or gives
influence to the usage of original applications.
to help prevent errors?

Do error messages provide a way We give logs for tracking program problems.
But no further messages are directly shown on
for the user to correct the problem the screen, letting the user use the computer
or explain why the error occurred? and applications as usual.

18
4 Step Four: Design the Interface (Cont.)

Questions Your Answers

Same as the original application design and
What feedback does a user get once behavior.
an action is performed?

How long does it take between an For the part giving the responding messages
typing for emails/messages, expecting finish
action and a product’s response writing as speed as ChatGPT behavior, one sec
time? give three/fine lines of typing(helps user
reading).Other related performances are the
Are the interface elements a same as the original application.
Yes.
reasonable size for interaction?
No.
Are edges and corners strategically
being used to locate interactive
elements like menus?

Is information chunked into a few No/Yes. It learns and simulates user behaviors
to get a review from the user and proceed.
items at a time?
Are familiar formats used? Yes

19
 5 Step Five: Create a Wireframe

Create a wireframe of the HCI interface. This should include the user
application interface components and how this interface interacts with
both the user and the application. You can sketch the image using pen
and paper. You can also use word processing, presentation, or UX design
software like Sketch, InVision, or Adobe XD.

Upload Your Image Here

20
 Step Six: Evaluate HCI Usability
6 Heuristics

Examine Jacob Neilson’s ten principles for interaction design heuristics

that can be used to evaluate an HCI interface.

Jacob’s Ten Usability Heuristics are:

1. Visibility of system status: The design should always keep users

informed about what is going on through appropriate feedback within
a reasonable amount of time. When users know the current system
status, they learn the outcome of their prior interactions and determine
next steps.
Predictable interactions create trust in the product as well
as the brand. This can be achieved by communicating clearly to users
what the system’s state is and presenting feedback to the user as
quickly as possible.
2. Match between the system and the real world: The design should
speak the users’ language. Use words, phrases, and concepts familiar
to the user, rather than internal jargon. Follow real-world conventions,
making information appear in a natural and logical order.
The way you should design depends very much on your specific users.
Terms, concepts, icons, and images that seem perfectly clear to you and
your colleagues may be unfamiliar or confusing to your users.
When a design’s controls follow real-world conventions and correspond
to the desired outcomes, it’s easier for users to learn and remember
how the interface works. This helps build an experience that feels
intuitive.
3. User control and freedom: Users often perform actions by mistake.
They need a clearly marked “emergency exit” to leave the unwanted
action without having to go through an extended process. When it’s
easy for people to back out of a process or undo an action, it fosters a
sense of freedom and confidence. Exits allow users to remain in

21
 Step Six: Evaluate HCI Usability
6 Heuristics (Cont.)

control of the system and avoid getting stuck and feeling frustrated.
For example, support Undo and Redo and show a clear way to exit the
current interaction, like a Cancel button.
4. Consistency and standards: Users should not have to wonder whether
different words, situations, or actions mean the same thing. Follow
platform and industry conventions.
People spend most of their time using digital products other than yours.
Users’ experiences with those other products set their expectations.
Failing to maintain consistency may increase the users’ cognitive load by
forcing them to learn something new. This can be done by improving
learnability by maintaining consistency within a single product or a family
of products.
5. Error prevention: Good error messages are important, but the best
designs carefully prevent problems from occurring in the first place.
Either eliminate error-prone conditions or check for them and present
users with a confirmation option before they commit to the action.
There are two types of errors: slips and mistakes. Slips are unconscious
errors caused by inattention. Mistakes are conscious errors based on a
mismatch between the user’s mental model and the design.
6. Recognition rather than recall: Minimize the user’s memory load by
making elements, actions, and options visible. The user should not have
to remember information from one part of the interface to another.
Information required to use the design (e.g., field labels or menu items)
should be visible or easily retrievable when needed.
Humans have limited short-term memories. Interfaces that promote
recognition reduce the amount of cognitive effort required from users.

22
 Step Six: Evaluate HCI Usability
6 Heuristics (Cont.)

7. Flexibility and efficiency of use: Shortcuts – hidden from novice users –

may speed up the interaction for the expert user such that the design can
cater to both inexperienced and experienced users. Allow users to tailor
frequent actions.
Flexible processes can be carried out in different ways so that people can
pick whichever method works for them. For example, you can:
Provide accelerators like keyboard shortcuts and touch gestures.
Provide personalization by tailoring the content and functionality for
individual users.
Allow for customization so that users can make selections about
how they want the product to work.
8. Aesthetic and minimalist design: Interfaces should not contain
information which is irrelevant or rarely needed. Every extra unit of
information in an interface competes with the relevant units of
information and diminishes their relative visibility.
This heuristic doesn’t mean you have to use a flat design. It’s about
making sure you’re keeping the content and visual design focused on the
essentials. Ensure that the visual elements of the interface support the
user’s primary goals. Keep the content and visual design of UI focused on
the essentials, and don’t let unnecessary elements distract users from the
information they really need.
9. Help users recognize, diagnose, and recover from errors: Error
messages should be expressed in plain language (no error codes).
They should precisely indicate the problem and constructively
suggest a solution.
These error messages should also be presented with visual treatments
that will help users notice and recognize them. Tell users what went
wrong in a language they will understand, and this can be achieved by
avoiding technical jargon.

23
 Step Six: Evaluate HCI Usability
6 Heuristics (Cont.)

10. Help and documentation: It’s best if the system doesn’t need any
additional explanation. However, it may be necessary to provide
documentation to help users understand how to complete their tasks.
Help and documentation content should be easy to search and focused
on the user’s task. Keep it concise and list the concrete steps that need to
be carried out. Ensure that the help documentation is easy to search, and,
whenever possible, present the documentation in context right when the
user requires it.

Specifically, your task will be to select five of these principles and

evaluate your final HCI design. For each heuristic chosen, write a
one-to-two sentence response explaining how your final HCI design
aligns with the select heuristic.

Visibility of Match between User control and Consistency and Help users
system status: the system and freedom: standards: recognize,
the real world: diagnose, and
The AI assistant The AI assistant The best of this recover from
reviews tasks The AI assistant provides reading design is it keeps errors:
that are required keeps all the and input help for all users' original
to be completed original usage of review, leaving applications The assistant
and arranges a applications, with the user to own usage that learns and
quick proceeding helpful inputs. the original full already familiar memorizes from
help. decision controls. with, the AI the user's daily
assistant reads inputs, and gives
and learns from the user full
01 02 03 04
users, providing
simulation help to 05
control of error
corrections. It
users. recognizes errors
and prevents
errors.

24
 Designing Artificial
Intelligence Products
Workbook