User Interface Design CSI1005

DIGITAL ASSESSMENT 3

Name: Harshita R

Reg. No.: 20MID0038

Course Name: User Interface Design

Course Code: CSI1005

SLOT: L57+L58

Date of Submission: 15 March 2024

Winter 2023-2024
User Interface Design CSI1005

DIGITAL ASSESSMENT 3

Aim
3.1. To perform usability evaluation through data analysis tools by gathering
user data.

Introduction
3.1. Usability Evaluation
Usability Evaluation is a process that focuses on how well users can learn
and use a product to achieve their goals. It involves several steps and
methods, and the use of data analysis tools can greatly enhance the process.
It also refers to how satisfied users are with that process. To gather this
information, practitioners use a variety of methods that gather feedback from
users about an existing site or plans related to a new site.
Usability refers to the quality of a user’s experience when interacting with
products or systems, including websites, software, devices, or applications.
Usability is about effectiveness, efficiency, and the overall satisfaction of the
user. It is important to realize that usability is not a single, one-dimensional
property of a product, system, or user interface. ‘Usability’ is a combination
of factors including:

 Intuitive design: a nearly effortless understanding of the

architecture and navigation of the site.
 Ease of learning: how fast a user who has never seen the user
interface before can accomplish basic tasks.
 Efficiency of use: How fast an experienced user can accomplish
tasks.
 Memorability: after visiting the site, if a user can remember enough
to use it effectively in future visits.
 Error frequency and severity: how often users make errors while
using the system, how serious the errors are, and how users recover
from the errors.
 Subjective satisfaction: If the user likes using the system.

Winter 2023-2024
Software Engineering Principles – CSI1007

Methods to Conduct Usability Evaluation

 Usability Testing: Evaluating a product or service by testing it with

representative users.
 First Click Testing: Examines what a test participant would click on
first on the interface to complete their intended task.
 System Usability Scale (SUS): A reliable tool for measuring the
usability. It consists of a 10-item questionnaire with five response
options for respondents.
 Heuristic Evaluations and Expert Reviews: In a heuristic
evaluation, usability experts review your site’s interface and compare
it against accepted usability principles.
 Eye Tracking: Eye tracking involves measuring either where the eye is
focused or the motion of the eye as an individual views a web page.
 Contextual Interview: During these interviews, researchers watch
and listen as users work in the user’s own environment, as opposed to
being in a lab.
 Focus Groups: A focus group is a moderated discussion that typically
involves 5 to 10 participants.
 Remote Testing: Remote usability testing allows you to conduct user
research with participants in their natural environment by employing
screen-sharing software or online remote usability vendor services.
 Mobile Device Testing: Testing mobile devices such as phones,
tablets, and eReaders requires special equipment and methodology.

Here’s a general approach:

 Define what you’re looking for: Review your original goals for testing.
Identify the main areas of interest that will help you stay focused on the
most relevant feedback.
 Organize the data: Review your testing sessions one by one. Look for
issues the user encountered while performing tasks, actions they took,
and comments they made. Record the task the user was attempting to
complete and the exact problem they encountered. Use a tool like Excel
or Airtable to organize your data.
 Draw conclusions: Assess your data with both qualitative and
quantitative measures. Quantitative analysis will give you statistics
that can be used to identify the presence and severity of issues.
Qualitative analysis will give you an insight into why the issues exist,
and how to fix them.

Winter 2023-2024 3
Software Engineering Principles – CSI1007

Tools and Technologies Used

 Paper and Pen
 Google Forms
 Maze or chart-studio Plotly.

Procedure
3.1.
1. Create 10 questions for evaluating the usability of the given UI
2. Create a questionnaire form and circulate the questionnaire among your peers.
3. Get the responses from different users.

Results and Discussion

3.1 Questions

1. Rate the amount of help do the user required in order to understand the calendar?
2. How much friendly is the calendar for the user in terms of navigation from one
month to another?
3. How well the web page is attractive for the user?
4. How well the user can identify the differentiation of 2 different information given
by the UI? (ex: difference between instructional and non-instructional days)
5. Rate the consistency of the design of the UI in the web page (ex: between 2
semesters)?
6. How hard is it for the user to use the functionalities in the calendar?
7. How well the user can predict, what is the action they need to do next?
8. How complex is the system in terms of number of functionalities?
9. Rate the responsiveness of the UI of the webpage?
10. Rate the amount of information given by clicking on the UI visual elements
(buttons, menu in this case)?

Google form link: https://forms.gle/G7JhFjnzEGipomDf8

Responses:
https://docs.google.com/spreadsheets/d/1KrTpGSDBnegWodLUxUdBjR58vjXmeWLF/
edit?usp=share_link&ouid=108279600851112238520&rtpof=true&sd=true

Winter 2023-2024 4
Software Engineering Principles – CSI1007

Aim
3.2. To perform usability evaluation through data visualization tools by
gathering feedback data about UI.

3.2.1. Introduction

3.2.1.1. Data Visualization in UI Design

Data Visualization in UI/UX design refers to the practice of representing
complex data in a visual format, making it easier to understand, analyze, and
make decisions based on the insights derived. It plays a pivotal role in
transforming raw data into meaningful, user-centric visuals that enhance the
overall user experience.
Data Visualization can be defined as being able to view data in designs. This
could be done using charts, maps, tables, and so on.
Data visualization isn’t just about numbers. It’s about representing these
numbers in a way that makes sense to the user and helps them make
decisions. As UI designers, the primary goal is to solve a problem for users.
When designing for data visualization, the strain of going through bulky
amounts of data is reduced for users, making their lives easier.

3.2.1.2. Importance of Data Visualization

 Enhancement of understanding: Using visuals to interpret the data
makes it easier and more fun for the users.
 Communication of insight: Data visualization helps communicate
insights on a digital platform.
 Better user experience: Overall, data visualization helps in making
sure your user has a better experience while interacting with your
platform.
 Informed decision-making: Helping the user understand the data
better, will keep them informed, and help them make better decisions
which can boost their businesses.

Winter 2023-2024 5
Software Engineering Principles – CSI1007

3.2.1.3. Challenges
Designers might face some challenges when trying to help users visualize
data. Some of these challenges include bulky/complex data:
 The bulky nature of the data might make it difficult to represent the
data using visuals.
 Also, simplifying the data without losing information can be very tricky.

3.2.1.4. Data Visualization with Plots

 Bar Chart: Used for categorical data. It compares different categories of
data by using rectangular bars with lengths proportional to the values
they represent.
 Line Chart: Used for continuous data. It displays information as a
series of data points connected by straight line segments. It’s often used
to visualize a trend in data over intervals of time.
 Pie Chart: Used for categorical data. It shows the proportion of each
category as a slice of a pie. It’s useful when you want to compare parts
of a whole.
 Histogram: Used for interval data. It’s similar to a bar chart but
groups numbers into ranges. It’s often used to visualize the
distribution of numerical data.
 Scatter Plot: Used for two sets of numerical data to see if there is a
relationship between them. Each point represents an observation.
 Box Plot: Used for statistical data. It provides a summary of the
minimum, first quartile, median, third quartile, and maximum of a set
of data values.
 Heat Map: Used for complex multivariate data. It uses color-coding to
represent different values. It’s useful for visualizing variance across
multiple variables.
 Area Chart: Used for continuous data. It’s similar to a line chart, but
the area under the line is filled in, which can be used to represent
volume.

Winter 2023-2024 3
Software Engineering Principles – CSI1007

 Bubble Chart: Used for three sets of numerical data. Each entity with
its triplet of associated data is plotted as a disk that expresses two of
the values through the disk’s xy location and the third through its size.
 Treemap: Used for hierarchical data. It visualizes hierarchical data as
a set of nested rectangles. Each branch of the tree is given a rectangle,
which is then tiled with smaller rectangles representing sub-branches.
 Radar Chart: Used for multivariate data. It’s a graphical method of
displaying multivariate data in the form of a two-dimensional chart of
three or more quantitative variables represented on axes starting from
the same point.
 Violin Plot: Used for statistical data. It’s like a box plot, but also shows
the probability density of the data at different values. It’s often used to
compare the distribution of data across different categories.

3.2.2. Tools and Technologies Used

 Paper and Pen
 Google Forms
 Maze or chart-studio Plotly.

3.2.3. Procedure
Analysing heuristic evaluations or usability feedback responses on UI can involve
different types of data, and the choice of visualization largely depends on the specific
data and the insights you want to derive. Here are a few possibilities:
 Bar Chart: If you have categorical data such as the frequency of speciHic
usability issues identiHied in heuristic evaluations, bar charts can be useful.
 Pie Chart: If you want to show the proportion of different types of feedback or
issues, a pie chart could be used.
 Line Chart: If you are tracking changes in usability metrics over time (like task
completion rates or error rates), a line chart would be appropriate.
 Bubble Chart: If you are considering three variables at once (for example, the
frequency, severity, and type of usability issues), a bubble chart can be used.

Winter 2023-2024 4
Software Engineering Principles – CSI1007

 Heat Map: If you have dense data like click patterns or eye-tracking data, heat
maps can provide a visual representation of areas where users interact most on a
page.

Step 1: Collect Data Collect all the heuristic evaluations or usability feedback
responses. This data might include usability issues, their severity, frequency, the screen
or feature they are associated with, etc.
Step 2: Clean and Organize Data Clean the data by removing any irrelevant
information. Organize the data in a structured format like a spreadsheet. Each row could
represent a single feedback response or heuristic evaluation, and columns could
represent attributes like issue, severity, frequency, etc.
Step 3: Import Data into Tool
For Plotly: You can use Python or R to import data into Plotly.
Step 4: Choose Appropriate Visualization Based on the type of data and the insights
you want to derive, choose an appropriate visualization. For example, use a bar chart to
compare the frequency of different usability issues, or a pie chart to show the
proportion of issues by severity.
Step 5: Create Visualization
For Plotly: You can create different visualizations using Plotly’s functions. For example,
to create a pie chart:
Step 6: Analyze and Interpret Analyze the visualization to derive insights. Look for
patterns, trends, and anomalies. Interpret these findings in the context of the UI design.
Step 7: Report Findings Document your findings and share them with your team. Use
the insights derived to inform design decisions and improvements.

3.2.4. Results and Discussion

Plots and Their Inferences

1. Bar Chart

Winter 2023-2024 5
Software Engineering Principles – CSI1007

Inference: From this bar chart, we can infer that ‘Simplicity’ is the most
common rated property, followed by ‘Visibility’ and ‘consistency’ ,’feedback’,
’recovery’ rated as normal.

Bar Chart
16
14 14
14
12 11
10
10
8
8 7 7
6
6 5
4
4 3
2 2
2
0 0
0
1 2 3 4 5

Comprehensibility Responsiveness Feedback

Inference: This shows the level of results different number of users felt
based on comprehensibility, responsiveness, feedback level.

2. Pie Chart

Winter 2023-2024 6
Software Engineering Principles – CSI1007

Inference: The pie chart shows the percentage of users according to their
understandability level.

Inference: This pie chart shows the distribution of learnability importance by

severity. We can infer that most issues are of ‘v imp’ severity, while ‘imp’ as
medium importance.

3. Line Chart

Winter 2023-2024 7
Software Engineering Principles – CSI1007

Inference: As prior knowledge required to use the UI increases, ease of

predicting the next action on what to do also increases.

Inference: This line chart shows the number of users , and how they rated for
each property that is recovery ,simplicity, visibility and intuitiveness.

4. Bubble Chart

Winter 2023-2024 8
Software Engineering Principles – CSI1007

Inference: As aesthetics and clarity increases, size of the bubble implies that
motivation to use of the UI also increases.

5. Scatter Plot

Inference: The scatter plot allows us to see which areas of the property are
rated by the user. Different colours represent parts of the properties . This
can help us to identify how each property is rated for the UI accordingly.

Winter 2023-2024 9
Software Engineering Principles – CSI1007

Inference: This shows the dependency between easy of learning and

efficiency of the UI.

Winter 2023-2024 1
0