INTRODUCTION TO

COMPUTING SCIENCE AND PROGRAMMING

Lecture 4.2: Exploration Topic - HCI

CMPT 120, Spring 2023, Mohammad Tayebi

 Class Agenda

• Today
• Last Time
• Functions • Exploration Topic
• Human Computer Interaction
• Flow of Execution With Functions
• Multiple Functions • GUI development in Python
• Calling Functions Inside Functions
• Function Parameters
• Main Function

• Reading
• N/A

CMPT 120, Spring 2023, Mohammad Tayebi 2

 Exploration Topic

Human Computer Interaction

Related Course: CMPT 363

* Slides are adopted from Joanna McGrenere course.

CMPT 120, Spring 2023, Mohammad Tayebi
.
3
 Human-Computer Interaction (HCI)
• Human
• the end-user of a program
• the others in the organization
• Computer
• the machine the program runs on
• often split between clients & servers
• Interaction https://www.canterbury.ac.nz

• the user tells the computer what they want

• the computer communicates results

CMPT 120, Spring 2023, Mohammad Tayebi 4

 What is HCI?
Design, Implementation and Evaluation of interactive systems for HUMAN use.

Humans

Design

Tasks Technology

CMPT 120, Spring 2023, Mohammad Tayebi 5

 What is HCI?
These factors influence each other and design
• mice are default with new computers -> design can assume mouse as pointer?

Humans

Design

Tasks Technology

CMPT 120, Spring 2023, Mohammad Tayebi 6

 What is HCI?
These factors influence each other and design
• People gain/change knowledge as they use technology … they learn.

Humans

Design

Tasks Technology

CMPT 120, Spring 2023, Mohammad Tayebi 7

 User Interfaces (UI’s)
• Part of technology that allows users to
• Interact with the technology
• Carry out their task
• MUST be integral part

• HCI sometimes (narrowly) thought of as

the design, prototyping, evaluation, and
implementation of UI’s for desktop
computers.

8
CMPT 120, Spring 2023, Mohammad Tayebi
 What is Usability?
• Ease of learning
• faster the second time and so on...
• Recall
• remember how from one session to the next
• Productivity
• perform tasks quickly and efficiently
• Minimal error rates
• if they occur, good feedback so user can recover
• High user satisfaction
• confident of success

CMPT 120, Spring 2023, Mohammad Tayebi 9

 Why study HCI? Moore’s Law

CMPT 120, Spring 2023, Mohammad Tayebi 10

 Human Psychology

CMPT 120, Spring 2023, Mohammad Tayebi 11

 Why study HCI?
• You will be building “real” systems
• That other people will use
• UI’s major part of most systems
• Often over 50%
• 50% of effort rarely on UI!
• Bad UI’s cost
• money (your product will be a flop) https://www.interaction-design.org/
• lives (planes crash, reactors blow up)
• Interfaces are hard to get right
• understanding of human capabilities will help
• understanding principles of design will help

CMPT 120, Spring 2023, Mohammad Tayebi 12

 Who Builds Interfaces?

• A team of specialists (ideally)

• graphic designers
• interaction / interface designers
• technical writers
• marketers
• test engineers
• software engineers
• customers

https://www.iranpartner.com

CMPT 120, Spring 2023, Mohammad Tayebi 13

 Foundations for Building UI’s
• Design Cycle
Design
• Psychology of everyday things
• Understanding users and their tasks
• Task centered design
• Design principles, usability heuristics
• Designing with the user
• User centered design Implementation
Evaluate
• Rapid prototyping
• Evaluation of the interface with users
• Qualitative & quantitative
• Iteration

CMPT 120, Spring 2023, Mohammad Tayebi 14

 Task analysis and design

• Observe existing work practices

• Create examples and scenarios of actual use of artifacts
• Try out new ideas with users before building anything if possible

CMPT 120, Spring 2023, Mohammad Tayebi 15

 User Centered Design

• Know the user!

• Cognitive abilities
• Physical abilities
• Memory
• Perception
• Job skills
• Keep users involved throughout the system building process

CMPT 120, Spring 2023, Mohammad Tayebi 16

 Psychology of everyday things

• What makes something obvious?

• How does it work by default?
• What is the user’s immediate reaction to it?
• Principles to guide our designs before they’re built?
• Heuristics to evaluate those designs before formal evaluation?

CMPT 120, Spring 2023, Mohammad Tayebi 17

 Rapid Prototyping

• Build mockup of design

• Low fidelity prototypes
• Paper sketches
• Video segments
• Steal, cut, copy, paste!
• High fidelity prototypes
• Somewhat working models
• HTML, Hypercard, Director, physical media
• Fake some of it

CMPT 120, Spring 2023, Mohammad Tayebi 18

 Evaluation
• “That’s cool!”, “I love it!” is NOT good enough
• perception not always reality
• conscious articulation not always behaviour
• Human behaviour & performance is complex
• sometimes beyond analysis
• individual differences
• Objective, quantitative, measures
• Qualitative techniques

https://dpbnri2zg3lc2.cloudfront.net

CMPT 120, Spring 2023, Mohammad Tayebi 19

 This page is intentionally left blank.

*Next slides material will not be used in course exams.

CMPT 120, Spring 2023, Mohammad Tayebi
.
20
 GUI Development in Python

• A GUI or a graphical user interface is an interactive environment to

take responses from users.
• forms, documents, tests, etc.
• Python offers multiple options for developing a GUI
• PyQT5
• PySide 2
• Kivy
• wxPython
• Python Tkinter
• Built-in library

CMPT 120, Spring 2023, Mohammad Tayebi 21

 Tkinter Library

• Tkiner is Python standard library for GUI applications.

Creating a main window where

from tkinter import * window (you can select any other
name) is the name of the object
window = Tk()
window.title('Hello Python!')
window.geometry("300x300")
window.mainloop()

mainloop()is used when the application is ready to run.

mainloop() is an infinite loop, wait for an event to occur
and process it as long as the window is not closed.
CMPT 120, Spring 2023, Mohammad Tayebi 22
 Creating a Button
• A button is a widget which is designed for the user to interact with program.
• E.g. if the button is pressed by mouse click some action might be started.

from tkinter import * You need to reference the

button to the main window.
window = Tk()
btn = Button(window, text="This is Button
widget.", fg='green')
btn.place(x=100, y=100)
window.title('Hello Python!')
window.geometry("300x200")
window.mainloop()
CMPT 120, Spring 2023, Mohammad Tayebi 23
 Creating Label

from tkinter import *

window = Tk()
lbl = Label(window, text="This is Label
widget.", fg='blue', font=("Arial", 12))
lbl.place(x=30, y=50)
window.title('Hello Python!')
window.geometry("300x200")
window.mainloop()

CMPT 120, Spring 2023, Mohammad Tayebi 24

 Creating Entry

• Entry is a single-line text box for accepting the user input.

from tkinter import *
window = Tk()
lbl = Label(window, text="This is Label widget", fg='blue',
font=("Arial", 12))
lbl.place(x=50, y=50)
btn = Button(window, text="This is Button widget", fg='green')
btn.place(x=55, y=100)
txtfield = Entry(window, text="This is a TextBox Widget",
bd=5)
txtfield.place(x=50, y=150)
window.title('Hello Python!')
window.geometry("300x200")
window.mainloop()

CMPT 120, Spring 2023, Mohammad Tayebi 25

 Weight Convertor GUI

• This program accepts a kilogram input value and converts it to grams,

pounds, and ounces when the user clicks the Convert button.
• User can perform this task as many times he/she want meaning that
the previous operation should not impact the next one.

CMPT 120, Spring 2023, Mohammad Tayebi Source: https://www.geeksforgeeks.org/ 26

 Weight Convertor: Front End Design - 1

• Front-end development focuses on the visual elements of an application.

window = Tk()
window.title('Weight Convertor')
e1 = Label(window, text="Enter the weight in Kg")
e2_value = StringVar()
e2 = Entry(window, textvariable=e2_value)
e3 = Label(window, text='Gram')
e4 = Label(window, text='Pounds')
e5 = Label(window, text='Ounce')
t1 = Text(window, height=1, width=20)
t2 = Text(window, height=1, width=20)
t3 = Text(window, height=1, width=20)
b1 = Button(window, text="Convert", command=convert_kg)
CMPT 120, Spring 2023, Mohammad Tayebi 27
 Weight Convertor: Front End - 2

e1.grid(row=0, column=0)
e2.grid(row=0, column=1)
e3.grid(row=1, column=0) grid method is used for placing
the widgets at respective
e4.grid(row=1, column=1)
positionsin table-like structure
e5.grid(row=1, column=2)
table like structure.
t1.grid(row=2, column=0)
t2.grid(row=2, column=1)
t3.grid(row=2, column=2)
b1.grid(row=0, column=2)

window.mainloop()

CMPT 120, Spring 2023, Mohammad Tayebi 28

 Weight Convertor: Back End

• Back-end development is building and maintaining the behind-the-scenes

structure and functionalities.
def convert_kg():
gram = float(e2_value.get()) * 1000
pound = float(e2_value.get()) * 2.20462
ounce = float(e2_value.get()) * 35.274
t1.delete("1.0", END)
t1.insert(END, gram)
t2.delete("1.0", END) Clear the text box.
t2.insert(END, pound)
t3.delete("1.0", END)
t3.insert(END, ounce)
CMPT 120, Spring 2023, Mohammad Tayebi 29
 Next Lecture

Strings & While Loop

Pre-reading: 8 & 9

CMPT 120, Spring 2023, Mohammad Tayebi

30