Professional Documents
Culture Documents
Hci LP 1 Assignments
Hci LP 1 Assignments
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 -- -- --
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.
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
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:
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
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",
)
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:
>>> label.pack()
>>> entry.pack()
Here’s what that looks like:
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.
✓ 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.