9/11/2023

1 Design & Implementation of Human-Computer Interfaces

NPTEL-MOOCS
Dr Samit Bhattacharya
Computer Science and Engineering
IIT Guwahati
2 L1 – Introduction to Interactive Systems
Dr Samit Bhattacharya
Computer Science and Engineering
IIT Guwahati
3 Scope of the Course
• We’re going to learn about “engineering interactive software”
• TWO key concepts
• Interactive software – specifically “computer software that are interactive”
• “Engineering” such software – how to design, develop and implement such
software

4 Scope
• Let’s start with understanding interactive systems and software
• How those are different from other software!

5 Computers?
• What comes to our mind when we talk of “computer”

6 Computers?
• Desktop or laptop (for those belonging to older generations)
7 Computers?
• Smartphone or tabs for the younger generation
8 Computers?
• Are these the only computers we use?
9 Computers?
• No!

• We are actually surrounded by “computers”

10 Digital Pedometer
11 Definition of Computer (Oxford English Dictionary)
Computer (n) – an electronic device which is capable of receiving information (data) in
a particular form and of performing a sequence of operations in accordance with a
predetermined but variable set of procedural instructions (program) to produce a
result in the form of information or signals
12 Digital Pedometer – a Computer?
• What it does?
13 Digital Pedometer – a Computer?
• Identify that you are walking 1
11 Definition of Computer (Oxford English Dictionary)
9/11/2023
Computer (n) – an electronic device which is capable of receiving information (data) in
a particular form and of performing a sequence of operations in accordance with a
predetermined but variable set of procedural instructions (program) to produce a
result in the form of information or signals
12 Digital Pedometer – a Computer?
• What it does?
13 Digital Pedometer – a Computer?
• Identify that you are walking
• Differentiate between “walking” and “standing”
14 Digital Pedometer – a Computer?
• Keep count of number of steps

15 Digital Pedometer – a Computer?

• Not easy - you are likely to walk at different speeds at various instants

• Try to count the number of steps mentally while walking to get some idea on the
challenge involved!
16 Digital Pedometer – a Computer?
• Convert the number of steps to distance covered

• Should “know” the formula for conversion

• Perform the “conversion”

17 Digital Pedometer – a Computer?

• Formula “stored” somewhere in the device for use

• Device “computes” the formula

Fits perfectively the definition of a computer

18 Another Example
19 Micro-oven as “Computer”
20 Third Example
21 Few More “Computers”
22 What the Examples Tell Us?
• These are “interactive” (computing) systems

• “Interaction” takes place between “computer” and “user”

• However, users are “laymen users” (not technology experts)

23 Question?
• Is it necessary for the users to know “about the technology behind”?
24 Another Example
25 Outcome
• Make the user anxious
• Did I do something wrong? 2
 • However, users are “laymen users” (not technology experts) 9/11/2023

23 Question?
• Is it necessary for the users to know “about the technology behind”?
24 Another Example
25 Outcome
• Make the user anxious
• Did I do something wrong?
• How to get out of it?
• Should we refrain from performing any more things?
26 Outcome
• May lead to loss of motivation for further use
27

User-Centric Design
28 User-Centric
• System design should not force users to learn about the underlying technology
29 User-Centric Design
• How to design systems/products that the users find easy to use?
30 A Case Study: TV Remote Control
31 Common Activities with TV Remote
1.Control brightness, contrast, γ-correction and many more things

1.Input channel number (typically 3 digits) for channel selection

1.Control voice level

1.Watch movies from external devices (pen drive, hard disk or even your smart
phone).

1.Watch the photos or videos from our digital camera on the TV screen
32 A Case Study: TV Remote Control
33 A Case Study: TV Remote Control
34 A Case Study: TV Remote Control
35 A Case Study: TV Remote Control
• The remote actually supports many more activities than the set of common activities

36 A Case Study: TV Remote Control

• By putting every control options on a single device, the remote-control actually
succeeds in scaring away many potential users (at least initially)

37 User-Centric Design
• The process to design products, which are computers, in which the users’ needs and
expectations are taken care of by considering their characteristics

38 User-Centric Design 3
 • By putting every control options on a single device, the remote-control actually 9/11/2023
succeeds in scaring away many potential users (at least initially)

37 User-Centric Design
• The process to design products, which are computers, in which the users’ needs and
expectations are taken care of by considering their characteristics

38 User-Centric Design
• Consider the remote control again (an interface to a computer, that is the TV)

39 User-Centric Design
• It contains buttons (elements of the interface)

40 User-Centric Design
• The buttons are placed in a particular way (the geometric layout of the interface)

41 User-Centric Design
• When we interact with the TV using the remote (say, to select a channel), we
visually perceive the system state and its change (from the TV screen)

42 User-Centric Design
• We continue performing the operation till we are sure that we achieved what we
wanted (system state matches with our goal state)

43 User-Centric Design
• In order to have a user-centric product, it is necessary to take care of four aspects of
the design

44 User-Centric Design
• Design elements that are acceptable to the users

45 User-Centric Design
• Design layouts that meet users’ expectations

46 User-Centric Design
• Help user perceive the “system state”

47 User-Centric Design
• Design interaction that fulfils needs of the users, by taking them to desired “system
states”

48

A Little Bit of History!

4
47 User-Centric Design 9/11/2023
• Design interaction that fulfils needs of the users, by taking them to desired “system
states”

48

A Little Bit of History!

49 Historical Evolution
• Roughly four broad phases, with certain overlap in between

50 Phases of Evolution
• The pre-history (1940’s to 1970’s) – This is before the advent of “personal
computers”

51 Phases of Evolution
• The early phase (1980’s till the early 21st Century) – the era of personal computers

52 Phases of Evolution
• The pre-modern phase (late 1990’s - first decade of the 21st century) –widespread
use of mobile personal computing devices, notably smart-phones and tablets

53 Phases of Evolution
• The modern age (2011 onwards) – era of “interconnected” devices
54 The Pre-History: Notable Developments
• The video display units in the 1950 (the SAGE system with light pen as input)
• Sketchpad (E Sutherland), 1963 – GUI and interaction
• NLS (oNLine System) [D Engelbart and team], 1968 – Mouse
• Release of first commercial microprocessor (Intel 4004) – 1971
• The Dynabook (Allan Kay) - 1972

55 The Early Phase: Notable Developments

• Early PCs (not very successful)
• Xerox Alto – 1973
• Altair 8800 (MITS) – 1974
• Apple I (1976) and II (1977)

56 The Early Phase: Notable Developments

• IBM PC (1981) – first successful PC
• Xerox Star (1981) introduced concepts such as GUI, WYSIWYG, metaphors
• Direct manipulation idea (Shneiderman) – 1982
• Apple Mac – 1984
• WWW (1989)
• Mosaic web browser - 1993

57 The Pre-Modern Phase: Notable Developments

• Palm pilot – 1996 (PDA)
• Nokia 9000 – 1996 (combined PDA and mobile phone functionalities) 5
 • Xerox Star (1981) introduced concepts such as GUI, WYSIWYG, metaphors
• Direct manipulation idea (Shneiderman) – 1982 9/11/2023
• Apple Mac – 1984
• WWW (1989)
• Mosaic web browser - 1993

57 The Pre-Modern Phase: Notable Developments

• Palm pilot – 1996 (PDA)
• Nokia 9000 – 1996 (combined PDA and mobile phone functionalities)
• Android 1.0 – 2008
• Other “smart” and “intelligent” consumer electronic products proliferated during this
period

58 The Modern Phase: Notable Developments

• Ubiquitous computing environment
• Mark Weiser introduced the term in 1991

• Related terminological developments

• IoT, Kevin Aston, 1999
• Cyber-Physical System (CPS), Helen Gill, 2006

59 Book
• Bhattacharya, S. (July, 2019). Human-Computer Interaction: User-Centric Computing
for Design, McGraw-Hill India
• Print Edition: ISBN-13: 978-93-5316-804-9; ISBN-10: 93-5316-804-X
• E-book Edition: ISBN-13: 978-93-5316-805-6; ISBN-10: 93-5316-805-8

Chapter 1, Sec 1.1 – 1.3