Design Paradigm

in HCI
Dr Afdallyna H arun
Dr Nurulhuda Noordin
M ac – July 2020
Importance of Paradigms
× Paradigm refers to approaches that has been adopted by a community in terms of
shared assumptions, concepts, values and practices
× Artefact design concerns
× how can an interactive system be developed to ensure its usability?
× how can the usability of an interactive system be demonstrated or measured?
× Studying the history of interactive system design provides paradigms for usable
designs
× largely about understanding a series of paradigm shifts
× The arrival of new computing technologies will create a new perception of the human—
computer relationship.
× H elps us make sense of this large and still growing field

2
The Paradigms of HCI

H uman Factors C lassical C ognitive Embodied/Situated

Engineering Information Interaction

3
The 3 Paradigms of HCI
Human Fact ors Classical Cognit ive Embodied/ Situat ed Int eract ion
Engineering Informat ion
Met aphor of Man-Machine Coupling Information Transfer Phenomenologically Situated
Int eract ion
Cent ral Goal of Optimise fit between man Optimise accuracy and Support of situated action in the
Int eract ion and machine efficiency of information world
transfer
Typical How can we fix specific • What mismatches arise • What existing situated
Quest ions of problems that arise in in communication activities should we support?
Int erest interaction? between humans and • How do users appropriate
computers? technology?
• How can we accurately • How can we support
model what people do? interaction within constraints
• How can we improve of what computers can
the efficiency of HCI? understand?
• What is the wider context
roles, policies and values?
4
The 3 Paradigms of HCI
Human Fact ors Classical Cognit ive Embodied/ Situat ed Int eract ion
Engineering Informat ion
Appropriat e • Engineering Laboratory &theoretical • Ethnography
Disciplines for • Programming behavioural science • Action Research
Int eract ion • Ergonomics • Interaction Design
• User Centred Design
Desirable Cool Hacks Verifiable quantitative e design A palette of situated design and
Met hodologies and evaluation methods that evaluation strategies
can be applied regardless of
context
Legit imat e Pragmatic objective • Objective facts • Thick description of context
Types of details • Models with general of use
Knowledge applicability • Stakeholder concerns
Required
Validat ion Test to see it works by Confirm or refute hypothesis You argue about the relationship
trial and error based on statistical analysis of between collected data and what
evidence you seek to understand 5
The 3 Paradigms of HCI
Human Fact ors Classical Cognit ive Embodied/ Situat ed Int eract ion
Engineering Informat ion
Values • Reduce errors and • Optimization • Construction of meaning is
make it work • Strive for objective, fundamental to and unfolds from
• Ad hoc is abstract, quantitative, interaction
acceptable generalizable • What goes on around the system
• Cool hacks that knowledge wherever is more interesting than what’s
exploit a specific possible happening at the interface
instance are • Reduce ambiguity • Need to grapple with the
desired • Principled evaluation is complexity surrounding the
a priori better than ad system
hoc as it allows design • “zensign” – what you don’t build is
to be structured as impactful as what you do build
• Structured design is • Knowledge as abstraction as well
preferred over as embedded in the world as
unstructured design hidden context
• Top down view of • Tacit skill is revealed through
knowledge engagement
6
 The shifting paradigm

Many technological advances led to

a new generation of user–computer
environments. The shifts resulted in
many new challenges, questions,
and phenomena being considered

7
 Is there a correct HCI
Paradigm?
No. but you should be concerned
with how each paradigm offers
diiferent perspectives, strengths,
weaknesses, insights & tools and if it
is appropriate to your work

8
History of HCI
Year Milest ones in HCI
Dissolve into the environment. M ore associated with user activities

1960s • Man-Computer Symbiosis (Licklider)

• The Augmentation of Human Intellect (Englelbart, 1963) (see
http://www.dougengelbart.org/pubs/augment-3906.html)
• Sketchpad (Sutherland’s PhD thesis)
− B eginning of C omputer Graphics as Interactive Graphics Discipline
1970 – • Dynabook (K ay and Goldberg)
1980s • Psychologist were interested in the information processing aspects of computer system design
• M enu names and depth vs breadth in menu design
• C risis in software engineering (problem with W aterfall SDLC )
• GO M S by C ard, M oran and N ewell
Early to mid • Explosion of PC
1980s • M ouse, bitmapped displays, windows, desktop metaphor, point-and-click editors
• Usability of single-user use of computer
Late 1980 – • M ore powerful PC s, powerful multi-user workstations
1990s • Innovative input techniques (voice, gesture, pen)
1990 – • M ulti-tasking machines, handling mixed-media effortlessly
2000s • V irtual reality, augmented reality, ubiquitous computing
• H igh functionality system, embedded system
• User tailorability 9
• Information utilites
The Evolution of User Interface

10
Technological Context
× H C I arose and evolved as C omputer Technology arose and evolved.
× In terms of technological context growth, there are a number of recognizable eras
and approaches associated:
× Pre Desktop
× Desktop
× Post-Desktop

11
Technological Context

Napier’s bones an analog computer

× B efore the entrance of H C I, computers mainly use physical switches and teletype
terminals
× There was an early language development from machine code as an attempt to make
programming easier.
× C omputers were difficult to use, cumbersome , unpredictable
× O nly used by technical specialist
× Little was known how to make computers easy to use – or did anyone actually care?
× In 1970s, the term Man-Machine Interface was coined by Moran (1981)
× Academicians poised the question, “how could computer enrich people’s lives by
understanding user’s capabilities and limitations?” 12
Technological Context

× Dramatic decrease in the cost of making computers – the availability of silicon chip,
it is cheap to own a computer
× C omputers are getting smaller, power lasts longer making it portable – children can
even carry them!
× It’s easier to use and ubiquitous – anyone can use them anywhere
× It can be embedded – you can wear them
× It is no longer limited to single user use – users can collaborate on one device
× Increased functionality is not an excuse for poor design
× The sale of computers are very much affected by the interface design 13
W IM P (W indows, Icons, M enus & Pointer
• H as remained relatively unchanged event with rapid technology development, platforms and interaction
metaphors
• Xerox Star was the first W IM P
• W indows - could be scrolled, stretched, overlapped, opened, closed moved around the screen using the mouse
• Icons – represents applications, objects, commands that will run when clicked
• M enus - lists of options that could be scrolled through and selected
• Pointing device – tool to control cursor as a point of entry to the W .I.M on screen

Stand Alone PC (Pre-Internet)

• Single users on single machine using stand alone applications
• Spreadsheets were a huge early success of H C I

W eb 1.0 (Static W eb)

• User can only consume information by means of reading
• (very slow) internet
• Few content creators
• N o e-commerce
• M any discussions on web usability layout and colours during this time

14
W eb 2.0 (Dynamic W eb)
• The use of Javascript, PH P, M ySQ L
• The use of mashups through the use of browsers rather than O S based ecosystem
• Users are content creators
• R ich Internet Applications with interactive experience of stand alone application

M obile & Social M edia

• H andheld devices intended to be used while on the move
• Location based services
• Geared towards communication and content creation
• C onstantly change interaction, social context and place
• The primary use of Twitter, Instagram, Google M aps
• Small screens, small number of keys, restricted number of controls
• Usability and preference for these control devices varies as it depends on the dexterity and commitment of the user

Social C omputing
• C omputer Supported C ollaborative W orking
• B eyond immediate interaction to a web of surround relations
• M ore pragmatic and user-centered methodology

15
V R & AR
• Simulation & immersion of experience through head-mounted displays,
smartphones, google glasses
• e.g. Second Life, M assive M ulti-Player O nline R ole Playing Games
• provide new kinds of experience, enabling users to interact with objects
and navigate in 3D space
• create highly engaging user experiences
• Induces a sense of presence - users can be very engrossed by the
experience
• H ead-mounted displays are uncomfortable to wear, and can cause
motion sickness and disorientation
• R esearch is being done on how to design safe and realistic V R s to
facilitate training and overcome phobias (e.g., spiders, talking in public)
• Design issues:
• how to control interactions and movements (e.g., use of head and
body movements)
• how to interact with information (e.g., use of keypads, pointing,
joystick buttons);
• level of realism required in contrast to realisms and sense of presence
16
Ubiquitous C omputing
• C omputer are omnipresent but “invisible”
• Approach of wireless, wearables, small, embedded in the environment
• The use of R FID tags, micro-controllers, IoT
• The prevalence of this UI calls for major rethink of HC I approach

Tangible C omputing
• M ore fluid and direct styles of interaction involving freehand and pen-based gestures
• R ich in tactile and proprioceptive (relating to stimuli that are produced and perceived within an
organism, especially those connected with the position and movement of the body) feedback
• R equires physical affordances and constraints of the physical world
• Example include shareable interface
• more than one person to use
• allow multiple/simultaneous inputs by co-located groups
• i.e. large wall displays where people use their own pens or gestures. Interactive tabletops where small
groups interact with information using their fingertips
• Provide a large interactional space that can support flexible group working
• C an support more equitable participation compared with groups using single PC

17
Interaction Styles
× The type of interface are defined by the utilized I/O devices
× speech-based
× standard GUI
× M ultimedia
× W earables
× The type of interaction is defined by the user experience supported by the H C I
design.
× 1980s - C ommand-based
× 1990s - Dialogue-based
× Late 1990s - Direct M anipulation
× 2000s - Dynamic Interaction

18
Interaction Styles – Command-based
× Instructions can be issued in various ways
× typing in commands
× pressing buttons
× selecting options from menus
× speech / gesture-based issuing of commands
× thought-based issuing of commands (brain interfaces)
× Generally found in artefacts such as computers, vending machines, audio / video
equipment, toys, clocks, cars and many more
× O ffers precision, efficiency and speed. B ut there is a learning curve on the set of
commands to actions

19
Interaction Styles – Dialogue-based
× User has a dialogue with the system by means of speech-based or typed-questions-
based interface (i.e. chat)
× C an be found in systems such as tele-banking, ticket booking, train-times inquiries,
advisory system (Siri, Google M aps), virtual tutoring.

20
Interaction Styles – Direct Manipulation
× Interacting with objects in physical or virtual environment by selecting, moving,
resizing, opening, and closing them.
× In terms of web-based system or digital apps, the manipulation is commonly done
on GUI
× The interaction offers:
× easy learning / remembering,
× see direct results based on our input without the need for error messages,
× incites exploring shaping mastery and confidence (i.e. learning toys for children)

21
Interaction Styles – Direct Manipulation
W indows
× Windows were invented to overcome physical constraints of a computer display, enabling
more information to be viewed and tasks to be performed
× Scroll bars within windows also enable more information to be displayed
× Multiple windows can make it difficult to find desired one, so the use of listing, iconising,
shrinking helps with window management

22
Interaction Styles – Direct Manipulation
Menu
× Menu styles include:
× flat lists
× good at displaying a small number of options at the same time and where the size of the display
is small, e.g., iPods
× have to nest the lists of options within each other, requiring several steps to get to the list with
the desired option
× moving through previous screens can be tedious
× drop-down
× pop-up
× Contextual
× Provide access to often-used commands that makes sense in the context of current task
× Appear when the user presses the control key when clicking on interface element
× Clicking on image will prompt options of “copy image..” “save image…”

23
Interaction Styles – Direct Manipulation
Menu
× Menu styles include:
× expanding ones, e.g., scrolling and cascading
× Enables more options to be shown on a single screen as oppose to single flat menu
× Offer flexible navigation, allowing for selection of options to be done in the same window
× Requires precise mouse control to avoid overshooting or selecting wrong options
× Concerns in menu use:
× What are best names/labels/ phrases to use?
× Placement in list is critical
× Priority functions
× Opposing functions should not be adjacent; i.e. Quit and save need to be far apart
× The issue with depth/breadth, structure and navigation

24
Interaction Styles – Direct Manipulation

25
Interaction Styles – Direct Manipulation
Icons
× The use of icons are assumed to be easier to learn and remember than commands
× Can be designed to be compact and variably positioned on a screen
× represent desktop objects, tools (e.g., paintbrush), applications (e.g., web browser), and
operations (e.g., cut, paste, next, accept, change
× Since the Xerox Star days icons have changed in their look and feel:
× black and white icons to color, shadowing, photorealistic images, 3D rendering,
animation
× Now more visually attractive and informative
× The mapping of icon design between the representation and underlying referent
can be:
× similar - a picture of a file to represent the object file
× analogical - a picture of a pair of scissors to represent ‘cut’
× arbitrary (e.g., the use of an X to represent ‘delete’ 26
Interaction Styles – Direct Manipulation
Icons
× Design concerns
× Text labels can be used alongside icons to help identification
× large icon sets (e.g., photo editing or word processing) use rollovers

27
Interaction Styles – Direct Manipulation
Speech Int erface
× Where a person talks with a system that has a spoken language application,
× timetable, travel planner
× speech recognition word processors, page scanners, web readers, home
control systems
× Often used by people with disabilities
× Presents a more natural form of interaction but present limitation in terms of
vocabulary limitation, colloquial pronunciation
× Current technology requires asking specific questions and will be given
specific responses

28
Interaction Styles – Direct Manipulation
× Design concerns:
× H ow to switch attention between windows/GUI element to find required
information without getting distracted
× Spacing, grouping, and simplicity should be used

29
Interaction Styles – Dynamic Interaction
× Allow users to move through physical or virtual environment.
× Geared towards exploration-based designs by offering virtual worlds or
augmented layering
× Examples include C omputer- Automated V irtual Environment (C AV E), ambient
intelligence (smart rooms)
× The interaction is more natural but users may be subjected to invasive gears (i.e.
headset, sensor wires, etc)

30
Interaction Styles – Dynamic Interaction
W earable Int erface
× provide the user with a means of interacting with digital information while on the
move
× Design concerns:
× Comfort - needs to be light, small, not get in the way, fashionable, and
preferably hidden in the clothing
× Hygiene - is it possible to wash or clean the clothing once worn?
× Ease of wear - how easy is it to remove the electronic gadgetry and replace it?
× Usability - how does the user control the devices that are embedded in the
clothing?

31
Interaction Styles – Dynamic Interaction
W earable Int erface

32
Interaction Styles – Dynamic Interaction
Robot ic Int erface
× Examples:
× remote robots used in hazardous settings
× domestic robots helping around the house
× pet robots as human companions helping to reduce stress and loneliness
× sociable robots that work collaboratively
× The interaction can be very natural where we can socialize with them – as if they
are our peers

33
Interaction Styles – Dynamic Interaction
Robot ic Int erface
× Design concerns:
× How do humans react to physical robots designed to exhibit behaviors (e.g., making
facial expressions) compared with virtual ones?
× Should robots be designed to be human-like or look like and behave like robots that
serve a clearly defined purpose?
× Should the interaction be designed to enable people to interact with the robot as if it
was another human being or more human-computer-like (e.g., pressing buttons to issue
commands)?

34
Which Interaction Style Then?
× C onsider the context of use and user group
× Is multimedia better than tangible interfaces for learning?
× Is speech as effective as a command-based interface?
× W ill wearable interfaces be better than mobile interfaces for helping people find
information in foreign cities?
× Are virtual environments the ultimate interface for playing games?
× W ill shareable interfaces be better at supporting communication and collaboration
compared with using networked desktop PC s?
× C onsider the tasks, users, cost, robustness, etc.
× M uch system development will continue for the PC platform, using advanced GUIs, in
the form of multimedia, web-based interfaces, and virtual 3D environments
× An important concern that underlies the design of any kind of interface is how
information is represented to the user so they can carry out ongoing activity or
task
35
Models of Interaction in HCI

× User rely on physical and psychological resources in their interaction with computers.
× Thus need to enhance limited human resources determines the potential roles of H C I.
× Using windows can enhance cognitive control, reduce demand of memory.
× Using graphic can support memory, facilitate comprehension, and enhance cognitive processing for
certain task.
× Users consider graphics or color use to be more pleasing than numbers or black text. Pleasing is
affective. 36
Models of Interaction in HCI

37
Models of Interaction in HCI
× M any sets of rules have been proposed to encapsulate understanding and best
practice
× C omes in several forms:
× principles – abstract design rules, i.e. “an interface should be easy to
navigate”
× guidelines – advice on how to achieve principle, i.e. “use colour to
highlight links”
× st andards – specific rules which are more measurable

38
Models of Interaction in HCI
× Standard Design R ules for H C I
Usability Effectiveness measures Efficiency measures Satisfaction measures
Objectives

Suitability for the Percentage of goals Time to complete a task Rating scale for
task achieved satisfaction

Appropriate for Number of power features Efficiency relative to Rating scale for ease of
trained users used expert user learning

Learnability Percentage of functions Time to learn criterion Rating scale for ease of
learned learning

Error tolerance Percentage of errors Time spent on correcting Rating scale for error
corrected successfully errors handling

39
Models of Interaction in HCI

https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-
rules-will-help-you-design-better-interfaces
40
Models of Interaction in HCI

•user’s formulation of actions

•action allow by the system

•user’s expectation of changed system state

•actual presentation of this state

× Some systems are harder to use than others

× Gulf of Execution: user’s formulation of
actions vs actions allowed by the system
× Gulf of Evaluation: user’s expectation of
changed system state vs actual presentation
of this state 41
Models of Interaction in HCI

42
Models of Interaction in HCI

43
Models of Interaction in HCI
× Previous examples may seem like common sense - but often violated
× Some are grounded in our understanding of how humans perceive, think and learn
× Some are the result of empirical study (e.g. Nielsen’s heuristics are based on factor
analysis of 249 usability problems)
× Some are derived from particular characterisations of the nature of human action
(e.g. Norman’s principles are closely related to his theory of action)
× Some are collections of experience (e.g. Shneiderman’s rules)
× Some can be directly related to computational complexity

44