Subject Name : Human Computer Interface

Subject Code:310245
Lab Assignments
Assignment No : 1
Title: Paper prototype-Design elements of GUI
Problem Statement: Design a paper prototype for a selected Graphical User Interface
Learning Objectives:
✓ To observe the user view point of elements on a GUI
✓ To study the elements of impact by noting the observations.
✓ To help in refining the drawbacks of the existing system

Learning Outcomes:
✓ Details of elements present on a specific GUI.
✓ Studying Importance of these elements and their impact on the user interface
✓ Use the analysis for developing a better GUI
Requirements:
✓ Notepad and pencil
✓ Any selected GUI (Any website like e-shopping , 2 pages)
Theory:
The selected GUI must be studied carefully for all the following elements:
1. Font colours used in background, text
2. Images and their size with respect to the whole Interface
3. Options for selection of data (Menu, arrows, sub-menus, highlighted text)
4. Text boxes, User support options
5. Use of icons for representations, menu selections.
After noting the above details, a chart should be prepared in following manner:
Sr. Element Observation Improvement/ corrections
No
1 -- -- --

Conclusion: Write the learning from this assignment.

Assignment No : 2
Title: Registration form Design
Problem Statement: Design a registration form for different categories of user
Learning Objectives:
✓ To study importance of user centric design
✓ To understand the concept of “Know your client”
✓ To analyse the user’s level of understanding before and after the interface design.

Learning Outcomes:
✓ Determine user’s skill when designing an interface.
✓ Learn the importance of user-centric interface design.

Requirements:
✓ Observations from existing registration forms.
✓ List of important elements of these forms
Theory:
The interface which needs inputs from user’s have a common pattern in many applications. The
difficulty faced by user’s in such interfaces range from understanding the data to be filled to
entering the correct format of required data.

To study this, we categorize the user’s in 3 major categories:

1. Children (Age 3-8yrs)
2. Teenagers (Age 12-18yrs and also young adults)
3. Old age people (Age 50+ years)
4.
Consider the same application for designing the form for all 3 categories of users.
1. Important factors to be considered in designing:
2. Background and foreground colours to be used for the form.
3. Fonts and simplicity of the textual elements.( Ranging from most simple for children to
average difficult for young adults.
4. Graphical objects, elements used in the form (More for children and less for old age
people)
5. Format allowed for data entry (Instructions given to Teenagers and Old age category)
6. Format for data entry by children should be with minimal validations so as to facilitate
their understanding and data entry.

Colourful form can be designed with pen paper method to demonstrate the above approach. To
study effectiveness, one user from each category can be given the form to fill and test the
feasibility.

Conclusion:
Write all the observations of all category of users.
Assignment No : 3
Title: Comparison - GUI and Web design with a real time example.
Problem Statement: Analyse different websites to understand the principles of good design
Learning Objectives:
✓ Study the different interaction styles
✓ Categorize these interaction styles according to the requirement of the product
✓ Study the characteristics of web user interface.

Learning Outcomes:
✓ Study the various interaction styles and their advantages over other styles
✓ Study the interaction styles important in web interfaces.

Requirements:
Selected GUI of different websites, example., ebay, amazon, flipkart, zovi, myntra.

Theory:
Perform a comparative analysis on the selected GUI’s to understand how each one
caters to the goal, the interactions and flow of the payment system and prepare a report
on the same.
Consider any 8 HCI principles and prepare the following table evaluating the
websites.
 Sr. No. Principles Poor Average Good Very good Excellent
1 Aesthetically pleasing
2 ..

Conclusion:
Summary of observations from the evaluation table.
Assignment No : 4
Title: GOMS model - Adding items to a cart of e-shopping website.
Problem Statement: Implement GOMS modelling technique to model user’s behaviour in given
scenario
Learning Objectives:
✓ Usability assessment of a given interface
✓ Model user behaviour in terms of GOMS (Goals, Operators, Methods and Selection rules)
✓ Learn how to predict time it will take a user to carry out a goal using GOMS Model.
Learning Outcomes:
✓ Improve human-computer interaction efficiency by eliminating useless or unnecessary
interactions.
✓ Using GOMS modelling for usability information when the system is in the earliest of
design phases.
✓ Improve the performance of a cognitive skill, eliminate unnecessary operators from the
method used to do the task.
✓ Provides hierarchical task description for a specific activity.
Requirements:
Specific scenario of user-interaction – Adding items in a cart of e-shopping website.

Theory:
Goals, operators, methods, and selection rules is a method derived from human-computer
interaction (HCI) and constructs a description of human performance. The level of granularity
will vary based on the needs of the analysis.

✓The Goal is what the user wants to accomplish.

✓The Operator is what the user does to accomplish the goal.
✓The Method is a series of operators that are used to accomplish the goal.
✓Selection rules are used if there are multiple methods, to determine how one was selected
over the others.
Implementing GOMS for given Scenario:
Define the User’s Top-Level Goal - Adding items in a cart
Goal: Select an item and Add it to cart

Operator: Amount of mouse clicks required

Methods:
1. Check list the item, click on quantity, click on “add to cart”
2. Click on quick view and add to cart
Selection:
Based on time taken to achieve the goal, select the appropriate method.
Conclusion : Conclude by explaining the effectiveness of applying GOMS model in the given
scenario for usability assessment.
Assignment No : 5
Title: Gesture recognition
Problem Statement: Write a detailed report on “Importance of pattern recognition in HCI and its
Applications”
Learning Objectives:
✓ To understand the important concepts related to pattern recognition with respect to its use
in HCI
✓ To study the area of applications of pattern recognition and its future scope in advanced
HCI systems.
Learning Outcomes:
✓ Study of detailed process of Gesture recognition
✓ Learning the implementation of Gesture recognition in various applications
✓ Acquaintance with various concepts like machine learning, neural networks, Training sets.

Requirements:
https://core.ac.uk/download/pdf/231162079.pdf
http://csjournals.com/IJITKM/PDF/34-G.R.S.Murthy_R.S.Jadon.pdf
https://serokell.io/blog/pattern-recognition
https://www.analyticsvidhya.com/blog/2020/12/patterns-recognition-the-basis-of-human-and-
machine-learning/

Theory:
Study the Pattern recognition related concepts from above mentioned resources and prepare a
detailed report on the mentioned problem statement.
Conclusion:
Report on “Importance of pattern recognition in HCI and its Applications”
Assignment No : 6
Title: GUI in Python
Problem Statement: Design a user interface in Python
Learning Objectives:
✓ To design a user interface in Python
✓ To learn simplicity, user centric approach of a GUI in designing

Learning Outcomes:
A simple GUI designed using Tkinter library in Python.
Requirements:
Tkinter - standard GUI library for Python

Implementation Steps:
import the Python GUI Tkinter module:
>>> import tkinter as tk
A window is an instance of Tkinter’s Tk class. Go ahead and create a new window and assign it
to the variable window:

>>> window = tk.Tk()

When you execute the above code, a new window pops up on your screen. How it looks depends
on your operating system:

Adding a Widget

Use the tk.Label class to add some text to a window. Create a Label widget with the text "Hello,
Tkinter" and assign it to a variable called greeting:

>>>
>>> greeting = tk.Label(text="Hello, Tkinter")
Working With Widgets
Each widget in Tkinter is defined by a class. Here are some of the widgets available:
Widget Class Description
Label A widget used to display text on the screen
Button A button that can contain text and can perform an action when clicked
Entry A text entry widget that allows only a single line of text
Text A text entry widget that allows multiline text entry
Frame A rectangular region used to group related widgets or provide padding between widgets

Displaying Text and Images With Label Widgets

Label widgets are used to display text or images. The text displayed by a Label widget can’t be
edited by the user. It’s for display purposes only. As you saw in the example at the beginning of
this tutorial, you can create a Label widget by instantiating the Label class and passing a string to
the text parameter:

label = tk.Label(text="Hello, Tkinter")

abel widgets display text with the default system text color and the default system text
background color. These are typically black and white, respectively, but you may see different
colors if you have changed these settings in your operating system.

You can control Label text and background colors using

the foreground and background parameters:

label = tk.Label(
text="Hello, Tkinter",
foreground="white", # Set the text color to white
background="black" # Set the background color to black
)
ou can also control the width and height of a label with the width and height parameters:

label = tk.Label(
text="Hello, Tkinter",
fg="white",
bg="black",
width=10,
height=10
Here’s what this label looks like in a window:
Displaying Clickable Buttons With Button Widgets

button = tk.Button(
text="Click me!",
width=25,
height=5,
bg="blue",
fg="yellow",
)

Getting User Input With Entry Widgets

he following code creates a widget with a blue background, some yellow text, and a width
of 50 text units:
entry = tk.Entry(fg="yellow", bg="blue", width=50)
The best way to get an understanding of Entry widgets is to create one and interact with it. Open
up a Python shell and follow along with the examples in this section. First, import tkinter and
create a new window:

>>> import tkinter as tk

>>> window = tk.Tk()
Now create a Label and an Entry widget:

>>> label = tk.Label(text="Name")

>>> entry = tk.Entry()
The Label describes what sort of text should go in the Entry widget. It doesn’t enforce any sort of
requirements on the Entry, but it tells the user what your program expects them to put there. You
need to .pack() the widgets into the window so that they’re visible:

>>> label.pack()
>>> entry.pack()
Here’s what that looks like:

Conclusion: GUI created using Python

Assignment No : 7
Title: GUI for screen complexity
Problem Statement: To Redesign existing Graphical User Interface with screen complexity
Learning Objectives:
✓ To study principles of Good screen design
✓ To apply the screen complexity rules to a GUI to improvise it.
✓ To analyse the human considerations in Interface and screen design.

Learning Outcomes:
✓ Design better screens in interfaces based on visually pleasing structure
✓ Learn to organize the elements on an interface screen by properly calculating the screen
complexity.
✓ Learning the factors that affect the screen design quality with respect to user expectations
Requirements:
Any GUI screen from a selected application.
General structure of the elements on the screen to measure complexity factors.

To calculate the complexity first determine the following:

(1) the number of elements on the screen
(2) the number of horizontal (column) alignment points
(3) the number of vertical (row) alignment points

An example is given below:

 Original Design of the GUI

✓ In the above screen the elements are not placed in a proper symmetry, which creates user
confusion and loss of interest in the interface.
✓ The first requirement is to identify the text boxes and their places on the screen and then
place them in a proper order , also group them as per requirement.
✓ The re-designed screen for the above example is shown in the figure below.
✓ To validate the improved screen, complexity of the screen is calculated which shows the
optimization of screen space as well as the user friendly interface.
 Re-designed Screen design

Calculation of complexity:
Original Design
1. 22 elements
2. 6 horizontal (column) alignment points
3. 20 vertical (row) alignment points
4. 48 = complexity (addition of all counts))
Redesigned Screen
1. 18 elements
2. 7 horizontal (column) alignment points
3. 8 vertical (row) alignment points
4. 33 = complexity

Students have to choose an application like the above GUI and calculate the screen complexity
and re-design it by re-arranging the elements on the screen

Conclusion:
Brief description of the studied method for improving screen design complexity and the
improvement in design by applying this method.