Interaction Styles

Human Computer Interaction

 Outline
• Frameworks for Understanding Interaction.
• Coping with Complexity.
• Interaction Styles.

Dr.M. Wadud
 Frameworks for Understanding
Interaction
• Execution/Evaluation Action Cycle (EEAC)
• Interaction Framework

Dr.M. Wadud
Frameworks for Understanding
Interaction
• A framework is basically a structure that provides a context for
conceptualizing something (Interaction with computers)

• We can use these frameworks to:

• Structure the design process
• Help us to identify problematic areas within the design
• Help us to conceptualize the problem space as a whole
Execution/Evaluation Action Cycle
(EEAC)
• Donald Norman (1990) The Design of Everyday Things
• A significant contribution to the field of HCI
• He describes Execution/Evaluation Action Cycle (EEAC)

• The structure of an action has four basic part:

• Goals
• Begin with some idea of what we want to happen; this is the goal.
• Execution
• Execute an action in the world.
• World
• To execute an action, manipulate objects in the world.
• Evaluation
• Validate the action and compare the results with the goal.
Execution/Evaluation Action Cycle
(EEAC)
Execution/Evaluation Action Cycle
(EEAC)
• Goals do not specify particular actions.
• Goals and intentions do not have a one-to-one, relationship
Example
• Ex1: A person sitting on an armchair while reading a book ….
• Ex2 : “Delete text” goal
• Intention that involves the Edit menu
• Intention that involves the Delete key
• Each intention involves a sequence of actions
Goal > Intention > Actions > Execution

The goal has to be translated into an intention, which in turn has to be

made into an action sequence.

Intention defines the tasks to be performed, which require specific

actions that must then be executed
Execution/Evaluation Action Cycle
(EEAC)
• Evaluate Results
• Perceive new state
• Evaluation starts with our perception of the world.

• Interpret what we perceive

• This perception must then be interpreted according to our expectations.

• Evaluate new state with goal

• Then it is compared (evaluated) with respect to both our intentions and
our goals.

Perceive > Interpret > Evaluate

Execution/Evaluation Action Cycle
(EEAC)
• Seven Stages of Action form – approximation model
Gulf of Execution
• The gap between the user’s goal and its computerized
implementation.

• Does the interface allows us to carry out the actions required by the
intention?
Goal = save a file
Intention = use the file menu
Action = click the save option

• Is there a save option in the file menu?

• If not there will be an gulf of execution between what we want to accomplish and
what the system allows.
• Thus the user will be frustrated
Gulf of Evaluation
• The gap between the computerized implementation of the user’s
goal and its evaluation by the user

Human

Execution Evaluation
s

Compute
r
Minimize Gulfs
• Given a particular interface design, how easily can you:

• Determine the function of the device?

• Determine what actions are possible?
• Determine mapping from intention to physical movement?
• Perform the action?
• Determine whether the system is in the desired state?
• Determine the mapping from system state to interpretation?
• Determine what state the system is in?

(Norman, 1990)
Interaction Framework (IF)
• EEAC does not consider the system beyond the Interface
• Abowd and Beale expanded on the EEAC to include the system
• IF breaks up the interaction into four main components!
• System (S)—Uses its core language (computational attributes related to system state)
• User (U)—Uses its task language (psychological attributes related to user state)
• Input (I)—Uses its input language
• Output (O)—Uses its output language
Interaction Framework / EEAC

Presentation Observation
O
Output

S U

I
Input
Performance Articulation
Interaction Framework / EEAC
• Execution Phase
• Articulation—The user formulates a goal, which is then articulated using the input
language.
• Performance—The input language is translated into the core language (operations
that the system will carry out).
• Presentation—The system manifests the result of the core-language operations using
the output language.
• Evaluation Phase
• Observation—The user interprets the results on the screen and reconciles them with
the original goal.
Interaction Framework / EEAC
• Example - Draw a circle
• Articulation
• The user has to translate the task into the input language represented by the
Interface according to interaction style
• Command-line or pointing an icon and clicking in a GUI
• Performance
• The system uses data from the input language
• User is not involved in the translation
• For Circle task the system must know
• What shape to draw
• Where to draw, how big it should be, its border and fill colors
• The input language is translated into the core language (operations that the system
will carry out).
• Presentation
• The system must express altered state in the output language
• Also need a communication to the user when system is involved internal
processing
• Status bar, hourglass icon
• Observation
• User interpret the output and evaluate it against the original goal
Coping with Complexity
• Mental Models
• Mapping
• Semantic and Articulatory Distance
• Affordances
Mental Models
• A mental model is a cognitive representation of something that defines
a logical and believable estimation as to how a thing is constructed or
how it functions
• Transparent objects expose their functions
• Bicycles
• Opaque objects hide their functions
• Computers
Mental Models
Mental Models
• Mental models are:
• Unscientific—They are often based on guesswork and
approximations.

• Partial—They do not necessarily describe whole systems, just the

aspects that are relevant to the persons who formulate them.

• Unstable—They are not concrete formulations, but evolve and

adapt to the context.

• Inconsistent—They do not necessarily form a cohesive whole;

some parts may be incompatible with other parts of the same
model.

• Personal—They are specific to each individual and are not

universal concepts that can be applied generically.
Mental Models
MAXIM:
• Designs that align with a user’s mental model will be easier for him or
her to use.

• How can we ascertain information about a user’s mental model?

Maxim: a principle or rule of conduct.

Mapping
• The concept of mapping describes how we make connections between
things
• Mapping is a integral part of the way people interact with surroundings
• Correct mapping leads to easy task completion
• Incorrect mapping can lead to frustration and failure
MAXIM:
Proper mapping can increase the usability of an interface

Arbitrary mapping Arbitrary mapping improved Natural

mapping

MAXIM:
Use natural mapping whenever possible
Semantic and Articulatory Distance
• Semantic Distance
• The distance between what people want to do and the meaning of an interface element.
• ‘Print Screen’ key on the keyboard
• Oops, not for printing the screen appearance!!!!
• Articulatory Distance
• The distance between the physical appearance of an interface element and what it
actually means.
• The difference between a picture and its meaning
• Easily applied to icons.
-A person discarding trash =>a small Articulatory distance.
-High Articulatory distance of Power button and its meaning because the picture is
somewhat abstract
Affordances
• The affordances of some interfaces can be intuitively understood: a
steering wheel affords turning, and a door bell affords pushing.

• These connections allow us to make predictions about the results of

our actions and help us to create usable mental models.
Affordances
• Affordance Confusion - when certain aspects of an object do
not work in a way in which we assume they should

Text boxes are used as labels

• Norman considers an affordance to be a relationship between

an object and a user, not a property of an object
Affordances
• What may be an affordance to one person may not be to
another

• The perception of affordance fosters usability

• The affordances a user may need must be present

• Affordances must not contradict the user’s expectations

..Recap
• What are frameworks?
• What is the Execution/Evaluation Action Cycle?
• What is the gulf of execution?
• How do you minimize gulfs?
• What is the Interaction Framework?
• What’s the difference between the two?
• Go through each phase in the Interaction Framework and give an example of what is
happening.
• What are mental models and why are they used?
• What is mapping? Give an example of good and bad mapping.
• What is semantic and articulatory distance?
• What are affordances? Give some examples.
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
Interaction Styles - 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
Interaction Styles - Command Line
• Command Line and the EEAC
• 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!

• Command Line and the Interaction Framework

• 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:\
Interaction Styles - Command Line
• Command Line and Articulatory Distance
• Articulatory distance is large – WHY?
• we are presented with only the command prompt No indication of functionality

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

• Menes 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
Interaction Styles - Menu-Based
Interface
MAXIM:
Menus are based on recognition as opposed to recall

• 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 (iPod)
Interaction Styles - Menu-Based
Interface
• Menu-based interfaces and the EEAC

• 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

Interaction Styles - Menu-Based
Interface
• Menu-based interfaces and :
• Articulatory Distance
• Menu options create small articulatory distance
• Mental Models
• Menu construction has a direct impact on user’s mental model
• Affordances
• Menu elements present affordances
• Button
• Checkbox
• links
Interaction Styles - Menu-Based
Interface
• Most menus are a variation on a few basic categories:

Single Sequential Hierarchal

Star network Web network

Interaction Styles - 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
Interaction Styles - 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
Interaction Styles - 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
Interaction Styles - Form Fill-In
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/2017
• 29/1/2017, or
• January 29, 2017?
Interaction Styles - 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
+ Interaction Styles - Form Fill-In
• How mistakes are being handled in forms and what do you think the
best way to do it?
• Provide examples to eliminate errors.
• Implement forgiving forms.
• Pay attention to the form elements Labelling.
• Show clearly the mandatory fields.
• Disable the field that should not be altered.
• Show clearly if there is any prerequisite.
• Form elements must be grouped logically
• Include “You Are Here” indications
• Do not ask for more than what you need
• Keep it consistent (within the interface, among the platform used)
“You Are Here” indication
+ Interaction Styles - Form Fill-In
+ Interaction Styles - Form Fill-In
 Interaction Styles - 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 an operation without affecting the state of the
computer
Interaction Styles - Question and
Answer
• Microsoft Add Network Place Wizard

(a) Add Network Place wizard. (b) Select a service provider. (c) Address of the
network place.
Interaction Styles - 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
 Interaction Styles - Direct
Manipulation
• Coined by Ben Shneiderman (1982)
• Describes Emerging Graphical User Interfaces
Objects of interest are represented as distinguishable objects in the UI and are manipulated
in a direct fashion.

Microsoft Windows XP Apple OS X

Interaction Styles - 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

• 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.
Interaction Styles - 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
E.g: the case of a hyperlink
Interaction Styles - Direct
Manipulation
• Direct Manipulation and the EEAC
• The range of possible intentions is consistently wide
• Users usually have multiple options for specifying action sequences
• Can be overwhelming of novice users
• Provide multiple ways of executing action sequences

• Open a file in a OS:

• Several options
Interaction Styles - 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
Interaction Styles - 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 can help people relate to complex concepts and procedures
by drawing on real-world knowledge
• Real-world affordances can be reflected

• What metaphors are used by contemporary GUIs?

Interaction Styles - Metaphors
A metaphor’s function must be consistent with real-world expectations

• Metaphors that do not behave the way people expect will cause
confusion and frustration

• Macintosh trash can

 Interaction Styles - Metaphors
Don’t force a metaphor

• Potential problems with metaphors

– Run out of metaphors
• Some virtual processes and objects have no real-world
counterparts
– Mixed metaphors
– Carry connotation and association
Interaction Styles - Web Navigation
• Two basic interaction styles
• 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 trial-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
Interaction Styles – 3D
Environments
• 3D interaction is natural in the real-world
• 3D environments are common in digital games
• Rich graphical 3D environment are processor intensive
Interaction Styles – 3D
Environments
• 3D Navigation
• Involves two types of movement
• Translation – movement on a plane
• Rotation – movement around an axis
Interaction Styles – 3D
Environments
• 3D Navigation

Pitch

Yaw
Interaction Styles – 3D Environments
Interaction Styles – 3D
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
Interaction Styles – 3D
Environments
• Desktop 3D
• Current GUIs are predominantly 2D
• 3D environments presented on 2D screens are difficult to navigate

Three-dimensional navigation can quickly become difficult and

confusing
Interaction Styles - Zoomable
Interface
• ZoomWorld (Jeff Raskin) is based on the zooming interface paradigm
(ZIP)
Interaction Styles - 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
Interaction Styles - 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
Interaction Styles - Natural
Language
• Applications for NLI
• Speech Input
• Hands-free operation
• Poor Lighting Situations
• Mobile Applications
• In the home
• Speech Output
• On-board navigational systems
Interaction Styles - Natural
Language
• Two areas of development
• Speech recognition
• Semantics
• Grammar issues
• Vague meanings
• Contradictory statements

NLIs may require constant clarification of linguistic ambiguities

Interaction Styles - 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 (Video)
• Complex system development