TOPIC 2

DESIGN PARADIGM IN HCI

ICT551 HUMAN COMPUTER INTERACTION
Why Study Paradigms

Concerns
– how can an interactive system be developed to ensure
its usability?
– how can the usability of an interactive system be
demonstrated or measured?

History of interactive system design provides

paradigms for usable designs
HISTORY OF HCI
The Initial
Paradigm
• Batch processing

Impersonal computing
 Example Paradigm Shifts
• Batch processing
• Time-sharing

• 1940s and 1950s – explosive technological growth

• 1960s – need to channel the power
• J.C.R. Licklider at ARPA
• Single computer supporting multiple users

Interactive computing
Example Paradigm Shifts
• Batch processing
@#$% !
• Timesharing
• Networking

???

Community computing
Example Paradigm
Shifts
• Batch processing
Move this file here,
• Timesharing C…P… filename
dot star… or was and copy this to there.
• Networking it R…M?

• Graphical displays
% foo.bar
ABORT
dumby!!!

Direct manipulation
Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor

Personal computing
Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
• WWW

Global information
Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous Computing
Symbiosis of physical and electronic
worlds in service of everyday activities
Video Display Units
• More suitable medium than paper
• 1962 – Sutherland's Sketchpad
• Computers for visualizing and
manipulating data
• One person's contribution could
drastically change the history of
computing
Programming toolkits

• Engelbart at Stanford Research

Institute
• 1963 – augmenting man's intellect
• 1968 NLS/Augment system
demonstration
• The right programming toolkit
provides building blocks to producing
complex interactive systems
Personal computing
• 1970s – Seymour Papert for LOGO
language for simple graphics programming
by children
• A system is more powerful as it becomes
easier to user
• Future of computing in small, powerful
machines dedicated to the individual
• Alan Kay at Xerox PARC –Dynabook as
the ultimate personal computer
Window systems and the WIMP (Wilberts, M.)
interface
• Humans can pursue more than one task at a time
• Windows used for dialogue partitioning, to ―change the
topicǁ
• 1981 – Xerox Star first commercial windowing system
• Windows, icons, menus and pointers (WIMP) now familiar
interaction mechanisms
Metaphor – coined by Kay, A.

• Relating computing to other real-world

activity is effective teaching technique
– LOGO's turtle dragging its tail
– file management on an office desktop
– word processing as typing
– financial analysis on Spreadsheets
– virtual reality – user inside the metaphor
• Problems
– some tasks do not fit into a given metaphor
– cultural bias
 Metaphors

• Metaphor is the concept of understanding

one thing in terms of another.
• A metaphor is a figure of speech that
constructs an analogy between two things
or ideas, the analogy is conveyed by the
use of a metaphorical word in place of
some other word.
• GUIs use visual relationships to real-world
objects (metaphors)
Metaphors that do not
• Metaphors can help people relate to
complex concepts and procedures by behave the way people
drawing on real-world knowledge expect will cause confusion
and frustration
• Real-world affordances can be reflected
Multimodality
• A mode is a human communication channel
• Emphasis on simultaneous use of multiple
channels for input and output
Computer Supported
Cooperative Work (CSCW)

• CSCW removes bias of single user / single

computer system

• Can no longer neglect the social aspects

• Electronic mail is most prominent success

Agent-based
Interfaces
• Original interfaces
– Commands given to computer
– Language-based
• Direct Manipulation/WIMP
– Commands performed on ―worldǁ
representation
John Henry Holland
– Action based
• Agents - return to language by instilling
proactivity and ―intelligenceǁ in
command processor
– Avatars, natural language processing
Ubiquitous
Computing
“The most profound technologies are those
that disappear.”
Mark Weiser, 1991
• Late 1980’s: computer was very apparent
• How to make it disappear?
– Shrink and embed/distribute it in the physical
world
– Design interactions that don’t demand our
intention
Sensor-based and Context-aware Interaction

• Humans are good at recognizing the

• ―context‖ of a situation and reacting appropriately
• Automatically sensing physical phenomena (e.g., light, temp,
location, identity) becoming easier
• How can we go from sensed physical measures to interactions
that behave as if made ―aware‖ of the surroundings?
INTERACTION STYLES

• Command Line
• Menu-Based Interface
• Form Fill-In
• Question and Answer
• Direct Manipulation
• Metaphors
• Web Navigation
• Three-Dimensional Environments
• Zoomable Interface
• Natural Language
Command Line
• Command-line interfaces are fast and powerful.
• Many commands are abbreviated
• quick and efficient
• Commands can be applied to many objects simultaneously
• fast input
• Some commands have multiple parameters that can be set and
altered
• precise and flexible
Command Line
• Intention formation, specification of the action, and the execution stages
are complex
• Requires a rather accurate mental model of the computer’s internal
processing
• Ex: move a file from one folder to another!; Alternative approach- Drag-and-
drop!
• Translating the user’s task language into the input language requires
knowledge of the core language
• The output language can be confusing for inexperienced users - there is very
little feedback
C:\VisualVM11\bin\visualvm – openjmx remote.host.com:1234

System error 1523 has occurred.

An internal error occurred.

C:\
Command Line
Advantages of command-line interfaces: Disadvantages of command-line interfaces:
– Suitable for repetitive tasks • Low command retention
– Advantageous for expert users • Steep learning curve
– Offer direct access to system • High error rates
functionality • Heavy reliance on memory
• Frustrating for novice users
– Efficient and powerful
– Not encumbered with graphic controls
• Low visual load
Menu-Based Interface
• Menu-driven interfaces present
users with sequential hierarchal
menus that offer lists of functions.

• Menus can be:

• Textual
• With options presented in
numbered choices
• chosen by keying in the
desired number
• Graphical
• Options are selected by
arrow keys or pointing
device
Menu-Based Interface
• Improved usability over command-line interface
• No need to remember commands
• Users search from a list of possible choices
• List provides constraints
• Appropriate for small screens
• Menu constraints can help the user to form the proper intentions and
specify the proper action sequence
• Provide a context to evaluate the output language
Menu-Based Interface

• Menu elements present affordances

• Button
• Checkbox
• Links
Menu-Based Interface
• Most menus are a variation on a few basic categories:

single sequential

hierarchical

Star network Web network

Menu-Based Interface
• Advantages of menu-based interfaces:
• Low memory requirements
• Self-explanatory
• Easy to undo errors
• Appropriate for beginners

• Disadvantages of menu-based interfaces:

• Rigid and inflexible navigation
• Inefficient for large menu navigation
• Inefficient use of screen real estate
• Slow for expert users
 Form Fill-In
• Similar to menu interfaces – present screens of
information
• Different than menu interfaces - used to capture
information and proceed linearly not to navigate a
hierarchical structure
 Form Fill-In
• Always inform the user about the length of paged forms and where they are
within the structure
• Forms can be presented using
• Single scrolling screens
• Multiple linked pages
• Form elements must be grouped logically
• Include “You Are Here” indications
• Form elements must be unambiguously labeled to increase data integrity
• Users must understand what data is required and what format should be
used
• Date information formats
• 1/29/2005
• 29/1/2005, or
• January 29, 2005?
 Form Fill-In

• Advantages of form fill-in interfaces:

• Low memory requirements
• Self-explanatory
• Can gather a great deal of information in little space
• Present a context for input information

• Disadvantages of form fill-in interfaces:

• Require valid input in valid format
• Require familiarity with interface controls
• Can be tedious to correct mistakes
Question and Answer
• Question and answer interfaces are also called wizards.
• They are restricting for expert users
• They are easy for novice users
• However, they may not know the required information
• Users must be able to cancel a menu without affecting
the state of the computer
Question and Answer

(a) Add Network Place wizard. (b) Select a service provider. (c) Address of the
network place.
Question and Answer

• Advantages of question and answer interfaces:

• Low memory requirements
• Self-explanatory
• Simple linear presentation
• Easy for beginners

• Disadvantages of question and answer interfaces:

• Require valid input supplied by user
• Require familiarity with interface controls
• Can be tedious to correct mistakes
Direct Manipulation
• The term Direct Manipulation sometimes misleading
• Interface objects in GUI are done with a mouse device
• Touch screen afford much more direct interaction
• Have a look - a revolution in the world of HCI
• http://www.perceptivepixel.com/
• Virtual Reality Environment – touch, lift and move around
• Coined by Ben Shneiderman (1982)
• Three criteria defined by Ben Shneiderman (1982)
• Continuous representations of the objects and actions of interest
with meaningful visual metaphors.
• Physical actions or presses of labeled buttons instead of complex
syntax.
• Rapid, incremental, reversible actions whose effects on the
objects of interest are visible immediately.
Direct manipulation
• 1982 – Ben Shneiderman describes appeal of
graphically-based interaction
– visibility of objects
– incremental action and rapid feedback
– reversibility encourages exploration
– syntactic correctness of all actions
– replace language with action

• 1984 – Apple Macintosh

• the model-world metaphor
• What You See Is What You Get (WYSIWYG)
Direct Manipulation
Direct Manipulation

• Three phases in Direct Manipulation - Cooper, Reimann

(2003)
• Free Phase: How the screen looks before any user
actions
• Captive Phase: How the screen looks during a user
action (click, click-drag, etc.)
• Termination Phase: How the screen looks after a user
action
Direct Manipulation

• Advantages of direct manipulation interfaces:

• Easy to learn
• Low memory requirements
• Easy to undo
• Immediate feedback to user actions
• Enables user to use spatial cues
• Easy for beginners

• Disadvantages of direct manipulation interfaces:

• Not self-explanatory
• Inefficient use of screen real estate
• High graphical system requirements
The World Wide Web (Tim Berners-Lee)

• Hypertext, as originally realized, was

a closed system
• Simple, universal protocols (e.g.
HTTP) and mark-up languages (e.g.
HTML) made publishing and
accessing easy
• Critical mass of users lead to a
complete transformation of our
information economy.
Web Navigation
• Link-based navigation
• Sensitive to articulatory distance
• Ambiguous link labels increase the gulf of evaluation
• Users cannot understand the link label or the meaning of
hyperlinked image
• Time consuming and trail-and-error approach
• Search-based navigation
• Sensitive to semantic distance
• Inadequate search engine algorithms increase the gulf of
execution
• Slight advantage in development of mental models
Three-Dimensional Environments

Yaw

Pitch
Three-Dimensional Environments
• 3D interaction is natural in the real-world
• 3D environments are common in digital games
• Rich graphical 3D environment are processor intensive
Three-Dimensional Environments
• 3D Navigation
• Involves two types of movement
• Translation – movement on a plane
• Rotation – movement around an axis
Three-Dimensional Environments
• Web-based 3D
• Use vector-based graphics to decrease file size
• Virtual Reality Modeling Language (VRML)
• Uses polygons with parameters
• Transparency
• Texture maps
• Shininess

• X3-D is XML based - Web3D.org

• Offers greater flexibility and control
Zoomable Interface
• Zoomable interfaces allow us to use our sense of relative
positioning
• ZIP is based on landmarks and relative positioning
(organizational cues)
– Proportion
– Color
– Patterns
– Proximity
• Pad++: Zoomable User Interface (ZUI)
• http://www.youtube.com/watch?v=62KcJ09k7cE
Natural Language
• Natural Language Interaction (NLI) - Interacting with computers using everyday language
• Obstacles
• Language is ambiguous
• Get the last document I was working on
• Who you are – does it recognize voice?
• What you were working on last – last files you modified, last file you
opened, last file you moved
• Meaning depends on context
• “Search results”
• Noun-noun/ Verb-noun
• “She said she did not know”
• Two people or just one!
• Dependant on visual cues
• Telephone conversion!
• Cannot see the person smile or wink when she uses irony or sarcasm
• Emails are infamous for non-grammatical naturalness yet require ☺ to
emotion or to clarify a meaning
Natural Language
• Applications for NLI
• Speech Input
• Hands-free operation
• Poor Lighting Situations
• Mobile Applications
• In the home
• Speech Output
• On-board navigational systems
Natural Language
• Advantages of NLI:
• Ease of learning
• Low memory requirements
• Flexible interaction
• Low screen requirements
• Appropriate for beginners

• Disadvantages of NLI:
• Requires knowledge of the task domain
• May require tedious clarification dialogues
• Complex system development
EVOLUTION OF HCI
Various UI
 Various UI

Mercator, the multitasking wrist

gadget using interactive holographic
interface. Personal Manager that will
help users to arrange their daily
schedule, including, medical check
ups, appointments, meals as well as
shopping.
Various UI
• Not just computers!
• VCR
• Wristwatch
• Phone
• Copier
• Car
• Plane Cockpit
• Airline Reservation
• Air Traffic Control
• etc