Hci LP 1 Assignments

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: 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
✓ 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 : 3
Title: GUI in Python
Problem Statement: Design a user interface in Python
✓ 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 : 4
Title: GUI for screen complexity
Problem Statement: To Redesign existing Graphical User Interface with screen complexity
✓ 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.

Hci LP 1 Assignments

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hci LP 1 Assignments

Uploaded by

Copyright:

Available Formats

Subject Name : Human Computer Interface

Conclusion: Write the learning from this assignment.

✓ The Goal is what the user wants to accomplish.

Operator: Amount of mouse clicks required

>>> window = tk.Tk()

Displaying Text and Images With Label Widgets

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

You can control Label text and background colors using

Getting User Input With Entry Widgets

>>> import tkinter as tk

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

Conclusion: GUI created using Python

To calculate the complexity first determine the following:

An example is given below:

You might also like