Foundations understanding users and interactions

Foundations:
Understanding Users
and Interactions
Preeti Mishra
Course Instructor

Types of Users: User Research
 Social scientists have long realized that human behaviours are
too complex and subject to too many variables to rely solely on
quantitative data to understand them.
 There are 2 approaches for User Research:
 Quantitative
 Qualitative

Qualitative Research
 Qualitative research helps us understand the domain,
context and constraints of a product
 It also quickly helps us identify patterns of behaviour
among users and potential users of a product much
more quickly and easily than would be possible with
quantitative approaches.

Qualitative Research
 In particular, qualitative research helps us understand:
 Existing products, and how they are used
 Potential users of new or existing products, and how they
currently approach
 Activities and problems the new product design hopes to
address Technical, business, and environmental contexts--
the domain--of the product to be designed
 Vocabulary and other social aspects of the domain in
question

Types of Qualitative Research
 Stakeholder interviews
 Subject matter expert (SME) interviews
 User and customer interviews
 User observation/ethnographic field studies
 Literature review
 Product/prototype and competitive audit

persona
 description of an ‘example’ user
 not necessarily a real person
 use as surrogate user
 what would Betty think
 details matter
 makes her ‘real’

Persona
 personas are fictional characters created to represent the
different user types that might use a site, brand, or product in
a similar way
 Personas are useful in considering the goals, desires, and
limitations of users in order to help to guide decisions about a
service, product or interaction space
 A user persona is a representation of the goals and behavior
of a hypothesized group of users.


Persona
 In most cases, personas are synthesized from data
collected from interviews with users. They are
captured in 1–2 page descriptions that include
behavior patterns, goals, skills, attitudes, and
environment, with a few fictional personal details to
make the persona a realistic character
 For each product, more than one persona is usually
created, but one persona should always be the
primary focus for the design.

Advantages
 Help team members share a specific, consistent understanding
of various audience groups. Data about the groups can be put in
a proper context and can be understood and remembered in
coherent stories.
 Proposed solutions can be guided by how well they meet the
needs of individual user personas. Features can be prioritized
based on how well they address the needs of one or more
personas.
 Provide a human "face" so as to focus empathy on the persons
represented by the demographics.

Steps to Persona
 Finding the Users and Building a Hypothesis
 Verification and Finding Patterns
 Constructing Pesonas
- Body (a photo or a description of how the person looks creates a
feeling of the person as a human being, posture and clothing tells a lot
about the person)
- Psyche (we all have an overall attitude towards life and our
surroundings which also influence the way we meet technology e.g. is
the persona introvert or extrovert)
-

Steps to Persona
 Background (we all have a social background, education, upbringing
which influence our abilities, attitudes and understanding of the world)
- Emotions and attitudes towards technology and the domain
designed for
- Personal traits. This one is tricky, in fictional writing there is a
distinction between flat characters and rounded characters. The flat
character is characterized by having only one character trait which is
reflected in all actions the character does and creates a highly
predictable character close to the stereotype. The flat character is
difficult to engage in. The rounded character has more than one
character trait, is not predictable and easier to engage in.

Steps to Persona
 Creating Scenarios
As mentioned earlier, personas are nothing in themselves, it is
when a persona enter a scenario they prove to be valuable. A
scenario is like a story, it has a main character (the persona) a
setting (somewhere the action takes place), it has a goal (what
the persona wants to achieve), it has actions that lead to the
goal

Our Project Manager For the Rest of
the Course!
Hopelessly
incompetent at
management. He
does not understand
technical isues but
always tries to
disguise this, usually
by using buzzwords
that he does not
understand himself.
Often lacks Ethics…

Work it out
 Your company has taken up a project of
designing display for a washing
machine.
 Assume front loading machine, low cost,
specially for heavy wash, to be sold in
developing and underdeveloped nations

example persona
Betty is 37 years old, She has been Warehouse Manager for five
years and worked for Simpkins Brothers Engineering for twelve
years. She didn’t go to university, but has studied in her evenings
for a business diploma. She has two children aged 15 and 7 and
does not like to work late. She did part of an introductory in-house
computer course some years ago, but it was interrupted when she
was promoted and could no longer afford to take the time. Her
vision is perfect, but her right-hand movement is slightly restricted
following an industrial accident 3 years ago. She is enthusiastic
about her work and is happy to delegate responsibility and take
suggestions from her staff. However, she does feel threatened by
the introduction of yet another new computer system (the third in
her time at SBE).

cultural probes
 direct observation
 sometimes hard
 in the home
 psychiatric patients, …
 probe packs
 items to prompt responses
 e.g. glass to listen at wall, camera, postcard
 given to people to open in their own environment
they record what is meaningful to them
 used to …
 inform interviews, prompt ideas, enculture designers

scenarios
stories for design
use and reuse

scenarios
 stories for design
 communicate with others
 validate other models
 understand dynamics
 linearity
 time is linear - our lives are linear
 but don’t show alternatives

scenarios …
 what will users want to do?
 step-by-step walkthrough
 what can they see (sketches, screen shots)
 what do they do (keyboard, mouse etc.)
 what are they thinking?
 use and reuse throughout design

scenario – movie player
Brian would like to see the new film “Moments of Significance” and wants
to invite Alison, but he knows she doesn’t like “arty” films. He decides to
take a look at it to see if she would like it and so connects to one of the
movie sharing networks. He uses his work machine as it has a higher
bandwidth connection, but feels a bit guilty. He knows he will be getting
an illegal copy of the film, but decides it is OK as he is intending to go to
the cinema to watch it. After it downloads to his machine he takes out his
new personal movie player. He presses the ‘menu’ button and on the
small LCD screen he scrolls using the arrow keys to ‘bluetooth connect’
and presses the select button. On his computer the movie download
program now has an icon showing that it has recognised a compatible
device and he drags the icon of the film over the icon for the player. On
the player the LCD screen says “downloading now”, a percent done
indicator and small whirling icon. … … …

also play act …
 mock up device
 pretend you are doing it
 internet-connected swiss army knife …
use toothpick as stylus
but where is that thumb?

… explore the depths
 explore interaction
 what happens when
 explore cognition
 what are the users thinking
 explore architecture
 what is happening inside

use scenarios to ..
 communicate with others
 designers, clients, users
 validate other models
 ‘play’ it against other models
 express dynamics
 screenshots – appearance
 scenario – behaviour

linearity
Scenarios – one linear path through system
Pros:
 life and time are linear
 easy to understand (stories and narrative are natural)
 concrete (errors less likely)
Cons:
 no choice, no branches, no special conditions
 miss the unintended
 So:
 use several scenarios
 use several methods

What is psychology
 Psychology primarily concerned with human behavior
and the mental processes that underlie it.

Cognition
 Process by which we became acquanted with
things or in other words gain knowledge
 Understanding
 Remembering
 Reasoning
 Attending
 Creating a new idea
 How Humans and Computers interact with one
another in terms of knowledge transmitted by
them

Cognition
 Also described in terms of specific process
 Attention
 Perception
 Memory
 Learning
 Reading, speaking and listening
 Problem solving, planning, reasoning, decision
making

Experiential and Reflective
 Experiential
 We perceive, act and react to events around us
effectively
 Driving a car, reading
 Reflective
 Involves thinking , comparing and decision making

What is cognitive psychology
 Cognitive psychology sees the individual as a processor of
information
 In much the same way that a computer takes in information
and follows a program to produce an output.
 Cognitive psychology compares the human mind to a computer,
suggesting that we too are information processors and that it is
possible and desirable to study the internal mental / mediational
processes that lie between the stimuli (in our environment) and
the response we make.

What Goes inside the head
Perceiving
Thinking
Remembering
Learning
Planning a meal
Imaging a trip
Painting
Writing
Composing
Understanding others
Talking to others
Manipulation others
Making decisions
Solving problems
daydreaming

Information Processing …
 Lets look at how humans process
information
 Identify the following:

So what was it ?
 Was it :
 An elephant ?
 A Tiger
 An Apple
 Ice cream
 Ice cream Of course

How come we all Recognized
them as Ice Cream
 Behind the scenes of Information processing in Humans:
 Input Channels Sight, hearing, touch, smell, taste
 Encoding information from environment in some kind
of internal representation
 Internal representation is compared with memorized
representations (Comparison)
 Concerned with deciding on a response to the
encoded stimulus (Response Selection)
 Organizing response and necessary action
(Response Execution)

Information Processing
Analysis
 Trace mental operations in the following??
 Example Retrieving a friends phone number
 Identifying friends Name
 Retrieving meaning of words
 Understanding the meaning of set of words given in
the exercise
 Retrieve number from memory
 Generate plan and formulate the answer
 Recite digits or write them down

Human Information Processing
Model

Information Processing Approach
There are four major theories of how we humans
process information:
• Stage approach
• Levels-of-processing theory
• Parallel distributed processing theory
• Connectionistic models

The focus of this model is on how information is stored in
memory.
The Stage Theory
The model is based on the work of Atkinson and Shriffin
(1968) and proposes that information is processed and
stored in three stages:
• Sensory memory
• Short-term memory
• Long-term memory

The Levels-of-Processing Theory
The Levels-of-Processing theory is based on the work of
Craik and Lockhart (1972).
The major proposition is all stimuli that activate a
sensory receptor cell are permanently stored in memory.
According to these researchers, the issue is not
storage, but retrieval.

Rather than hypothesize that information is processed in
stages, Craik and Lockhart believe that retrieval of
information is based on the amount of elaboration used as
information is processed.
The Levels-of-Processing Theory

The parallel-distributed processing model states that
information is processed simultaneously by several
different parts of the memory system, rather than
sequentially as hypothesized by Atkinson-Shiffrin.
Parallel Distributed Processing Theory
The stage-theory model discussed in this course differs
slightly from that first proposed by Atkinson and Shriffin in
order to incorporate this principle.

Connectionistic Theory
The connectionistic model proposed by
Rumelhart and McClelland (1986) extends
the parallel-distributed processing model.
This model emphasizes the fact that
information is stored in multiple locations
throughout the brain in the form of
networks of connections.

Connectionistic Theory
It is also consistent with the levels-of-processing approach
in that the more connections to a single idea or concept
(i.e., the more extensively elaboration is used), the more
likely it is to be remembered.
It is one of the dominant forms of current research in
cognitive psychology and is consistent with the most
recent brain research.

The Information Processing Approach
While there is much disagreement among the various
schools of thought related to how human beings
process information, there are a few general principles
about which almost all researchers agree:

Limited capacity
assumption
The amount of information that can
be actively processed by the system
at a given point in time is constrained
in some very important ways.
Bottlenecks, or restrictions in the
flow and processing of
information, occur at very specific
points.

Control
mechanism
Required to oversee the encoding,
transformation, processing, storage,
retrieval and utilization of
information.
Not all of the processing capacity of
the system is available; an executive
function that oversees this process will
use up some of this capability.
When one is learning a new task or is
confronted with a new environment,
the executive function requires more
processing power than when one is
doing a routine task or is in a familiar
environment.

Two-way flow of
information
As we try to make sense of the world
around us, we constantly use
information that we
• gather through the senses (often
referred to as bottom-up
processing)
As we try to make sense of the world
around us, we constantly use
information that we have stored in
memory (often called top-down
processing)

Genetic
preparation
A human infant is more likely to look at
a human face than any other stimulus.
Language development is similar in
all human infants.
The human organism has been
genetically prepared to process and
organize information in specific
ways.

Human perception,
attention, memory

Visual perception
 Humans capable of obtaining information
from displays varying considerably in
size and other features
 but not uniformly across the spectrum
nor at all speeds

Visual perception
 How long did it take to recognize the Dalmation?
 Only after you knew what you were looking for?
 After recognizing the Dalmation, what else could you
see?
 Interpretation of the scene is possible because we know
what Dalmations, trees, etc. look like -- active
construction of the image.

Example:
 You are traveling down a road you never been on before, up
ahead you see an octagonal red sign with white letters near an
intersection.
 The sign has a vine growing on it, and all you can read is
"ST_P.“ These letters alone are meaningless, however taken
in its context and using knowledge from past experiences you
infer that it is a stop sign.
 This is example of constructive perception because it required
intelligence and thought to combine sensory information, a red
octagonal sign with "ST_P" in white letters at an intersection,
and knowledge from past experiences, stop signs are red
octagonal signs with "STOP" in white letters placed at an

Effect of context on perception
 When presented with ambiguous stimuli, our
knowledge of the world helps us to make sense
of it -- same with ambiguous info on computer
screen
 Constructive process also involves
decomposing images into recognizable entities:
figure and background

Figure and Ground
 White horses
 Black horses?

Figure and Ground
 Escher art often
plays with
figure/ground

Camouflage
 Figure so similar to
ground that it tends
to disappear

What is a Mental Model
 It was first mentioned by Craik in his 1943 book, The
Nature of Explanation. (Craik, 1943)
 a mental model is an internal scale-model representation
of an external reality
 a mental model is a set of beliefs about how a system
works. Humans interact with systems based on these
beliefs. (Norman, 1988)
 A mental model contains minimal information. It is
unstable and subject to change

Usability
 Usability is a quality attribute that assesses how easy user interfaces are
to use.
 The word "usability" also refers to methods for improving ease-of-use
during the design process
 The standard further defines the components of the usability definition:
 Effectiveness:
 Efficiency:
 Satisfaction:
 Learnability
 Retainability
 efficiency of use
 user satisfaction of a product

 Learnability: How easy is it for users to accomplish basic
tasks the first time they encounter the design?
 Efficiency: Once users have learned the design, how quickly
can they perform tasks?
 Memorability: When users return to the design after a period
of not using it, how easily can they re-establish proficiency?
 Errors: How many errors do users make, how severe are
these errors, and how easily can they recover from the errors?
 Satisfaction: How pleasant is it to use the design?

Why are Mental Models
Important to Usability?
 Usability is strongly tied to the extent to which a user's mental
model matches and predicts the action of a system.
 However, sometimes the technical capabilities of a system
have no resemblance to objects in the world.
 HCI practitioners have produced a large body of guidelines
and heuristics used to design systems that are easier for
people to understand and use. (Nielsen,1993)
 Through various design methods, we can build cues into a
system that help users create new, accurate mental models.


Designing for usability
 For usability follow these three design principles:
 Early focus on users and tasks
 Empirical measurement
 Iterative design

Early focus on users and tasks
 The design team should be user driven and in direct contact
with potential users.
 Several evaluation methods:
 personas,
 cognitive modeling,
 inspection,
 inquiry,
 Prototyping
 testing methods
may contribute to understanding potential users.

Empirical measurement
 The emphasis of empirical measurement is on measurement,
both informal and formal, which can be carried out through a
variety of evaluation methods:
 Test the system early on, and test the system on real users using
behavioural measurements.
 This includes testing the system for both learnability and usability.
 It is important in this stage to use quantitative usability specifications
such as time and errors to complete tasks and number of users to
test, as well as examine performance and attitudes of the users
testing the system.
 Finally, "reviewing or demonstrating" a system before the user tests
it can result in misleading results.

Iterative design
 Iterative design is a design methodology based on a cyclic
process of:
 prototyping,
 testing,
 analyzing, and
 refining a product or process.
 Based on the results of testing the most recent iteration of a
design, changes and refinements are made.
 This process is intended to ultimately improve the quality and
functionality of a design.

Iterative design
 The key requirements for Iterative Design are:
 identification of required changes,
 an ability to make changes,
 and a willingness to make changes.
 When a problem is encountered, there is no set method to
determine the correct solution. Rather, there are empirical
methods that can be used during system development or after
the system is delivered

Introduction
 As stated in the last lecture, HCI is neither just the
study of humans nor just the study of technology it is
the bridge between the two.
 Over here we will consider `the bridge', the
interaction between the human and the computer.

Interaction basics
 Communication between user and computer is called
INTERACTION
 Translation between user and computer may fail so
the use of models of interaction came into picture
 Model of interaction can help us to understand exactly
what is going on in the interaction and identify
difficulties

Terms of Interaction
 Goals
 Domain
 Task
 Task Analysis
 Computation Aspects
 Task Language

domain – the area of work under study
e.g. graphic design
goal – what you want to achieve
e.g. create a solid red triangle
task – how you go about doing it
– ultimately in terms of operations or actions
e.g. … select fill tool, click over triangle

 Users want to achieve goals in some domain.
 Operations in the domain are tasks.
 Task analysis investigates the problem in terms of domain,
goals, intentions, tasks
 The system and the user have different languages
 The core language describes computation aspects of the
domain
 The task language describes psychological aspects of domain

Why develop a model for
interaction?
 Why develop a model for interaction?
 To help us to understand an interactive dialogue.
 To identify likely difficulties.
 To provide a framework to compare different interaction
styles.

Stages of Action
 What makes something difficult to do?
 – What are you trying to do?
 – What ways can you achieve it?
 – How do you execute one of those ways?
 – What happened as a result?

Interactive Cycle
 Interactive cycle is divided in two major phases:
 Execution
 Evaluation
 These are further divided into seven stages:

Interaction Model 1:
Norman’s Model
(Already visited in Unit 1)

Stages of execution cycle
(Already visited in Unit 1)
 Norman's execution-evaluation cycle most closely
matches our intuitive view.
 establishing the goal { task language; imprecise
 forming the intention { specfic
 specifying the action sequence
 executing the action
 perceiving the system state
 interpreting the system state
 evaluating the system state with respect to the goals and
intentions

Interface Problems
 Since the human and computer do not recognise the
same concepts (speak the same language) interfaces
cause problems. These problems can be described in
terms of:
 gulf of execution { difference between user
determined action formulation and the actions allowed
by system
 gulf of evaluation { difference between physical
presentation of system state and user expectation

What are Gulfs?
 The distance between the mental representations of the person
and the physical components and states of the environment
 Illustrates difficulty in deriving relationships between mental
intentions and interpretations and the physical
actions and states

Bridging the Gulf
 These gulfs can be `bridged':
 users can change to suit the interface
 designers can design knowing the user
 users can change their interpretation of system
responses
 designers can change output characteristics

Human error
 Difference between :
 Slips(better GUI) and mistakes(understanding of
system)

Human error - slips and mistakes
slip
understand system and goal
correct formulation of action
incorrect action
mistake
may not even have right goal!
Fixing things?
slip – better interface design
mistake – better understanding of system

Interaction Model 2:
Abowd & Beale model

Abowd & Beale model
 Norman's model concentrates on the user's view of
interaction.
 Abowd & Beale model User and System
communication through the interface.

Using Abowd & Beale’s model
user intentions
 translated into actions at the interface
 translated into alterations of system state
 reflected in the output display
 interpreted by the user
general framework for understanding interaction
 not restricted to electronic computer systems
 identifies all major components involved in interaction
 allows comparative assessment of systems
 an abstraction

Interaction problems:
Language Translation Difficulties
 User - Input: (articulating a goal) How easy is it to translate a
goal requirement into the input language? e.g. {Difficult: bank
of light switches, stovetop element controls { Easy: virtual
reality system
 Input – System Can all system stimuli be articulated by user
language? { Consider remote control (or front panel) with
limited functions.

Interaction problems:
Language Translation Difficulties
 System - Output (execution & evaluation) Can
system output device provide a complete view of
system state? e.g.{ Consider document editing with
limited view of data
 Output - User (interpretation by user) Is information presented
to user in a way that is easy to interpret. e.g.{ Difficult to read
unmarked analog clock.
{ Difficult to observe result of hierarchical system eg: copying
using command line interface

Interactivity & Interaction
Context
 Interactivity is the defining feature of an interactive system
 In older systems, order of interaction is pre-emptive. Newer
systems still have some of these features.
 Of course all interaction occurs in some wider social and
organisational context People are usually involved and there
are issues of desire to impress,competition and fear of failure.
 Motivation will reduce if systems do not match requirements
but new technology may increase motivation if systems are well
designed and integrated with the user's work.

Anthropometrics v/s Ergonomics
 What is ANTHROPOMETRICS ?
The study of the human body and its movement.
The study of the human body and its movement, often involving
 research into measurements relating to people.
 It also involves collecting statistics or measurements relevant to the
human body, called Anthropometric Data.

Anthropometrics v/s
Ergonomics
 What is ERGONOMICS ?
The study of people and their relationship with the
environment around them.
When anthropometric data (measurements / statistics) is applied
to a product, e.g. measurements of the hand are used to design
the shape and size of a handle, this is ergonomics.

Thus..
 Anthropometrics is the comparative study of
human body measurements and properties.
 Ergonomics is the science of making the work
environment safer and more comfortable for
workers using design and anthropometric data.

Question??
 How is anthropometric data used to produce
an ergonomically designed hair dryer?

Solution
 Anthropometric data (measurements) are used to determine the
shape of handle and distance to be held from head.
 Designed for average size hand.
 The length of lead is determined from anthropometric data
(length of average arms and average height of users).
 The hair dryer is now ergonomically designed.

Ergonomics:
the arrangement of controls
 Controls can be and laid out in various ways:
 functional : task related controls grouped together
 sequential :layout in order of use
 Frequency : common controls easy to access
 Other factors
 Controls should be easy to reach
 Controls should not be so close to each other that they
hamper usage
 { `Dangerous' controls should be hard to reach -prevents
accidents

Ergonomics:
the arrangement of controls
 Control layout is important:
 { Safety critical systems: poor layout ) disaster!
 { Routine applications: poor layout ) inefficiency, user
dissatisfaction,
 poor mental model building etc..

Ergonomics:
the physical environment & health issues
 Unsatisfactory working conditions can at best lead to
stress and dissatisfaction and at worst harm workers'
health. Some factors to consider:
 physical position : should be comfortable
 temperature : should not be extreme
 lighting : should be low-glare & sufficient
 noise : should not be excessive; high levels hamper
perception
 time : don't expect extended use of an interactive system

Ergonomics: Colour
 Colour is a powerful cue, but it is easy to misuse.
 It should not be applied just because it is available.
 Topics
(consider these topics for further study on colors):
 Colour Vision & Perception
 Principles & Guidelines

Few Examples..
 Avoid the simultaneous display of highly saturated, spectrally
extreme colors.
 Explanation: Frequent refocusing causes visual fatigue. Don't
use reds with blues, or yellows with purples, unless one or
more are desaturated.
 Example: Reds/oranges/yellows/greens can be viewed
without refocusing, but the combination of cyans/blues with
reds is fatiguing.

Few Examples..
 Use redundant cues to augment color coding.
 Explanation: To compensate for variation among users, color
memory, and other perceptual problems, vary shape, font, etc. in
addition to color.
 Example: To represent different types of objects in diagrams, show
one as dark green circles, another as yellow squares, etc.
Refer to the support document on color usage is provided on BBLMS
for further study

 Computers are used to proceed information and the
information is needed by people
 people and computers have to interact.
 Different computer applications (programs) follow different
styles of the interaction,

Example…
 If we want to replace a word by other word how would this
action be performed in two different environments:

In Unix based NIX standard
stream text editor "sed"

We will proceed as..
 Recognise six main interaction styles.
 Determine the interaction style(s) used by a computer
application.
 Describe pro's and con's of any interaction style for a
specific application and for a specified user group.
 Evaluate the interface of a given application regarding its
usability.
 Suggest improvements of application's interaction style,
based on a set of guidelines.

Major Interaction Styles
1. Command line. The user types in commands for the program,
usually one at a time. The program executes the commands
and returns feedback, if necessary. MS-DOS and UNIX use
this style.
2. Question and answer. The application asks questions and
when the user provide by answers all necessary data, the
application gives the results. Sometimes these are called
"walktrough and use" applications.
3. Menus. Possible user actions are listed on the screen and the
user can select one of them. Gopher is an example and most
MS Windows applications also include menus.

Major Interaction Styles
4. Form filing. The user type the data in specific fields, similar to
the fields on a paper fill-in form. Many office and database
applications use this style.
5. Graphical direct manipulation. The objects used in
application are graphically represented on the screen and the
user can manipulate them directly by pointing, clicking,
dragging, typing, etc. Most windowing systems, or GUI's
(Graphical User Interface) are based on graphical direct
manipulation.

Introduction
 When a command line interaction is used, the user types in
commands for the application
 usually one at a time, the application executes them, if possible,
and gives some feedback to the user.
 In this case, the interaction becomes just a dialogue, in which
the human is the active side.

Example
 "sed" editor is a typical program with a command-line interface.
 MS-DOS and UNIX operating systems use this style

Advantages:
 Cheap. Easy to develop and suitable for
slow machines and communication lines.
 Flexible. Suitable for experienced users

Disadvantages
 Low visibility. Difficult for novice and
casual users
 Difficult error corrections.
 Text-only data representation.

Guidelines for good Command
Line Interface
 1. Offer maximum flexibility
 Conduct task analysis to determine the necessary commands
 Provide a way to combine and execute sets of commands.
 2. Facilitate command remembering
 Use meaningful, descriptive names.
 Follow "de facto" standards.
 Use options for small modifications in command's behaviour.
 If abbreviation are necessary, make them consistent when possible.
 Use consistent format of the command line.
 Provide on-line help
 3. Facilitate error correction.
 Provide a way to edit and replay last command.
 Give feedback on both successful and unsuccessful commands

Introduction
 The direct manipulations applications represent the
data as graphical object on the screen.
 These objects can be manipulated directly by a mouse
or another pointing devices, thus performing operations
on the application's data.
 Usually these applications are implemented as window
systems.

Example
 The system responds immediatelly to the user actions by
changing appearance of the objects - for example recycle bin
becomes full, when a document is put into it.

Guidelines
 1. Regarding the screen design
 Use relatively less arbitrary metaphors to respresent objects
 Display only objects which can be manipulated at the given time
 Represent the state of the object too, possibly by color coding.
 Keep consistency by putting common objects at the same place on all
screens.
 2. Regarding the interaction design
 Make interactions as direct as possible by using selecting, dragging, etc.
 Make operations reversible when possible.
 Issue a "warning" message before any destructive operation.
 Always display clearly marked object for exiting program
 Provide keyboard shortcuts for most often used commands.
 3. Regarding the user support
 Provide both context-sensitive and object-sensitive help.

Advantages:
 Easy to understand and execute
 Flexible. Suitable for experienced users
 Meaningful icons and graphics for non
computer user
 High visibility

Disadvantages
 Costly
 Heavy Interface

Introduction
 Set of options on screen for choosing the action. Use for
selecting actions or among options for data entry.
 Pull-down menus
 Pop-up menus
 Hierarchical menus
 Design issues :
 Use standard menus for standard actions (Help, open, close, save,
save as .. , print, Undo, Copy, Cut, Paste, Clear)
 Organize menu items in logical order (alphabetic , size, grouping)
 Changing (adaptive menus) can be difficult (the content of the invisible
menu list can change according to actions) - for example files that you
have used recently (e.g. word).
 Menu items can be activated or inactivated according to possible
options in the current situation.

Advantages
 shortens learning
-reduces keystrokes
-structures decision making
-use of dialog-management tools
-easy support of error handling
-can guide through task

Disadvantages
 -presents danger of many menus
-may slow frequent/expert users
-consumes screen space
-requires rapid display rate

Introduction
 Form on screen with a set of fields - check-boxes - buttons -
menus, for data entry of action selections. Typically select a set
of actions or enter a set of selections and press GO (or SUBMIT
or ENTER ...) Two basic approaches Form is filled and then the
data is sent to the application for actions
 Every field entry is sent to the application - checking possible
before every item is entered

Introduction
 Design issues
 Layout
 Sizes of fields
 Types of fields
 Help text (for the form - for each field)
 automatic advancement (from field to field)
 Cancel (what does it mean in the situation)
 Corrections (one field - all fields)
 Corresponding paper-form (for example order
entry)
 Pre-filled fields - initial values

Advantages
 simplifies data entry
-requires modest training
-gives convenient assistance
-permits form-management tools

Disadvantages

-consumes screen space
-may require more computer skills-

Introduction
 Speech is seen as the ultimate interface
 Problems
 – “Time flies like an arrow”
 – “Life is a nice beach”
 – World knowledge not always appropriate
 Current solution
 – Unambiguous sub-set
 • Cellphones

Advantages
 relieves burden of learning syntax
-spoken NL allows busy hands

Disadvantages
 requires clarification dialog
-may require more keystrokes
-may not show context
-is unpredictable due to ambiguity
-spoken harmed by noise

Three dimensional interfaces
 virtual reality
 ‘ordinary’ window systems
 highlighting
 visual affordance
 indiscriminate use
just confusing!
 3D workspaces
 use for extra virtual space
 light and occlusion give depth
 distance effects
flat buttons …
… or sculptured
click me!

Spreadsheets
 first spreadsheet VISICALC, followed by
Lotus 1-2-3
MS Excel most common today
 sophisticated variation of form-filling.
 grid of cells contain a value or a formula
 formula can involve values of other cells
e.g. sum of all cells in this column
 user can enter and alter data spreadsheet
maintains consistency

WIMP Interface
The most common interaction style
in PCs

WIMP in PCs
 Most common interaction style on PCs
 Windows
 Icons
 Menus
 Pointers / Mouse
 Elements of WIMP:
 windows, icons, menus, pointers
 buttons, toolbars, palettes, dialog boxes

 default style for majority of interactive computer
systems, especially PCs and desktop machines

Windows
 Areas of the screen that behave as if they were
independent
 can contain text or graphics
 can be moved or resized
 can overlap and obscure each other, or can be laid
out next to one another (tiled)
 scrollbars
 allow the user to move the contents of the window up
and down or from side to side
 title bars
 describe the name of the window

Icons
 small picture or image
 represents some object in the interface
 often a window or action
 windows can be closed down (iconised)
 small representation ﬁ many accessible
windows
 icons can be many and various
 highly stylized
 realistic representations.

Pointers
 important component
 WIMP style relies on pointing and selecting things
 uses mouse, trackpad, joystick, trackball, cursor
keys or keyboard shortcuts
 wide variety of graphical images

Menus
 Choice of operations or services offered on the screen
 Required option selected with pointer
problem – take a lot of screen space
solution – pop-up: menu appears when needed
File Edit Options
Typewriter
Screen
Times
Font

Kinds of Menus
 Menu Bar at top of screen (normally), menu
drags down
 pull-down menu - mouse hold and drag down menu
 drop-down menu - mouse click reveals menu
 fall-down menus - mouse just moves over bar!
 Contextual menu appears where you are
 pop-up menus - actions for selected object
 pie menus - arranged in a circle
 easier to select item (larger target area)
 quicker (same distance to any option)
… but not widely used!

Menus extras
 Cascading menus
 hierarchical menu structure
 menu selection opens new menu
 and so in ad infinitum
 Keyboard accelerators
 key combinations - same effect as menu item
 two kinds
 active when menu open – usually first letter
 active when menu closed – usually Ctrl + letter
usually different !!!

Menus design issues
 which kind to use
 what to include in menus at all
 words to use (action or description)
 how to group items
 choice of keyboard accelerators

Buttons
 individual and isolated regions within a
display that can be selected to invoke an
action
 Special kinds
 radio buttons
– set of mutually exclusive choices
 check boxes
– set of non-exclusive choices

Toolbars
 long lines of icons …
… but what do they do?
 fast access to common actions
 often customizable:
 choose which toolbars to see
 choose what options are on it

Palettes and tear-off menus
 Problem
menu not there when you want it
 Solution
palettes – little windows of actions
 shown/hidden via menu option
e.g. available shapes in drawing package
tear-off and pin-up menus
 menu ‘tears off’ to become palette

Dialogue boxes
 information windows that pop up to
inform of an important event or request
information.
e.g: when saving a file, a dialogue box is
displayed to allow the user to specify the
filename and location. Once the file is
saved, the box disappears.

Limitations of
WIMP GUI
 Imposes sequential “ping-pong” dialog model: mouse
and keyboard input, 2D graphics (sound?) output
 deterministic and discrete
 difficult to handle simultaneous input, even two mice
 pure WIMP doesn’t use other senses: hearing, touch, ...
 >50% of our neurons in visual cortex, but as humans it is
very difficult for us to communicate without speech,
sound...
 Not usable for immersive VR (e.g., headmounted
display) where you are “in” the scene: no keyboard,
mouse…

Impedance-matching
Limitations of WIMP GUI
Limited
Vision
(Flat, 2D)
No Speech
No Gestures
One Hand
Tied Behind
Back
Limited Audio
Limited Tactile

1st Really successful WIMP
implementation
 Specifications Apple Macintosh 128K (1984-85)
 CPU:MC68000CPU speed:8 Mhz
 FPU:None
 RAM:128k Dram not expandable
 ROM:64k
 Serial Ports:2
 Floppy:1 3.5" 400k
 Monitor:9" 512x384 square pixels built-in B/W
 Power:60 Watts
 Weight: 16.5 lbs.Dimensions: 13.6" H x 9.6" W x 10.9" D
 System Software:Mac OS 1.0
 Production:January 1984 to October 1985
 Cost:$2,495

think about dialogue
what does it mean in UI design?
Minister: do you name take this woman …
Man: I do
Minister: do you name take this man …
Woman: I do
Minister: I now pronounce you man and wife

Overview
Dialog is the syntactic level of human-computer
interaction (like a script, except users and
computer have more choices).
 Notations for dialog description
 diagrammatic
 textual
 Dialog is linked
 semantics
 presentation
 Benefits of formal descriptions
Hi

What is dialog?
 Much human dialog unstructured - grammar rules
stop at sentence level (and sometimes before).
 Examples of structured form of human
conversation: script for play and marriage service.
 Dialog with a computer is
relatively structured and
constrained (unlike in Star
Trek).

What is dialog? w.r.to HCI
 Structure of the conversation between the user
and computer system.
 Languages have 3 levels
 lexical
 syntactic <-- most user interfaces
 semantic
 Describe language at syntactic level,
but…must be linked to semantics for
implementation.

Dialog Design Notations
 Notations for human-computer dialogs have roots
in other branches of computing.
 We do NOT use a programming language
 Separation of dialog makes analysis easier
 If separate from convoluted logic and calculations
 Can change interface style
 Design dialog prior to programming

Diagrammatic Notations
 Heavily used
 At a glance we can see structure of dialog
 Problems with extensive or complex dialog
structures

Textual Dialog Notations
 Grammars
 Production rules

Dialog Semantics
 Purpose of dialog description
 communicate with other designers
 tool for thought early in design
 For semantics we
 leave reader to infer
 annotate dialog notations with intended meaning
of actions
 formalize
 for a contract or prototype

Dialog Analysis and Design :
State Properties
 Reachability
 Can we get to desired state easily from current
state
 Basic check
 More - “infinite loops”
 Reversibility (undo)
 Go back to a previous state
 Dangerous states
 Example: reformatting hard drive
 Make them difficult, ask for confirmation,
required user action to be inconsistent

Summary
 Dialog can be difficult to analyze if we do not
have separate description
 Two categories: diagrammatic and textual
 Properties of dialogs
 action properties, state properties, presentation

End of Unit 2
Foundation:
Understanding Users and Interface

Course Outcome Mapping
 This unit of the syllabus helped in partially
achievement of :
 Course Outcome 1
 Corse Outcome 2

Foundations understanding users and interactions

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Foundations understanding users and interactions

Similar to Foundations understanding users and interactions (20)

More from Preeti Mishra

More from Preeti Mishra (20)

Recently uploaded

Recently uploaded (20)

Foundations understanding users and interactions