Human Computer Interaction

BS (Software Engineering/ Information Technology)
Part-IV First Semester

Human–computer interaction (commonly referred to as HCI) researches the design and use of computer technology, focused on the interfaces between people (users) and computers. Researchers in the field of HCI both observe the ways in which humans interact with computers and design technologies that let humans interact with computers in novel ways (Wikipedia).

Time table

Course Contents

Human Computer Interaction Course Contents 

Class Activities

• Overview of the Languages and Interface design

• Overview of Human Computer Interaction

• Significance/Importance

• Examples

• Efficiency of the websites

• How to make a User Interface usable?

• What are the current trends for interface designing?

• When an interface has the capability to recall from the experiences?

• How to make data more accessible? 

• Ergonomics

  • User Satisfaction

  • Usability Engineering

• Usability Engineering Lifecycle

  • Search Bar (How to?)

  • Colour Selection for Interfaces

  • Heuristic Evaluation

  • Generations of User Interfaces

• Know the User

  • Guidelines and Heuristic

• Evaluation

• Usability Testing

• Visual Design and Typography

• Logo Design

Reference Material

For study you can refer slides or books or any authenticated source from the internet.

Lecture notes

1. Interaction Design

2. HCI Intro Slideshare.net

3. Usability Engineering Lifecycle

4. Ergonomics

5. Ergonomics Video1,

6. Ergonomics Video 2

Books

• Designing for the Web

• Virtual University Course Handout for HCI

• Designing Mobile Interfaces: Patterns for Interaction Design By Steven Hoober, Eric Berkman

• Interaction Design: Beyond Human-Computer Interaction By Jenny Preece, Yvonne Rogers, Helen Sharp

• Designing Interactive Systems

• Human Computer Interaction by Keith Andrews

Web Links and Others

• Interaction Design Courses

• Virtual University Open Courseware

• Coursera (Stanford University)

• Virtual COMSATS

• Stanford HCI Group

• Youtube Videos for HCI

• HCI Lab

• UI/UX Pinterest

• HCI in Hindi

• Ergonomics Pinterest

Book for Writing the Research Paper

• English for writing research papers

Labs

• Lab handouts (Please bring your laptops)

• Explore ten web applications of the world's best universities and identify the best/worst part of the design in them (note three reasons why you think so)

• suggest something for our web application

• Go through five popular search engines and identify the best and worst design ideas according to you and then support them with the users' requirements

• Go through the online Shopping websites and find one product which is hard to found otherwise

• check usability features out of this experiment

• Sketch for UI, Hardware, Ergonomics

• Prepare wireframe using Figma

Assignments

1. Consider the Online Shopping Web Applications (e.g. daraz, symbios, alibaba, etc.) and suggest some changes that might help boost the users' interactivity with the applications.

2. Consider the Three best search engines of the world and identify three worst and three best things that those have.

3. Prepare a user interface design for University of Sindh/FET/SWE/any other main page that depicts the usability features.

4. Sketch of your own workplace after considering Ergonomics.

5. Sketching of any Hardware of a Computer related device

6. Wireframe (upto 8 screens) of your own FYP.

Grading

Announcements

Final Test: BSSWE-IV 30.05.2025 BSIT-IV 04.06.2025

You need to attempt four questions out of Seven

Main Topics:

. Introduction to HCI
. Human Computer Interaction (importance? how?, why?)
. Cognitive Framework
. Usability Engineering Lifecycle (What? All steps list and explain)
. User Interface Designing (How?)
. User Experiences (How?)
. Ergonomics (Your own workplace? or Office space, Home Space)
. Visual Design (What? one sketch)
. Typography (Main fonts and styles for visibility)
. Logo design (How to?)
. Efficiency of websites (How to ?)
. What to know about the user before designing an interface?
. Sketching (What? how to?)
. Wireframe (What? how to? one wireframe of your own project)

Contact Details Form for Students

Click this link to fill the form.