Dialogue Design where the arc initiates, to

Lesson Objectives: the state where it ends

1. Learn all the aspects of dialog levels
and representation
2. Introduce formalism techniques that
we can use to signify dialogs
3. Learn about visual materials being
used in communication process
4. Understand direct manipulation as a
2. State Charts
good form of interface design
represent complex reactive
5. Know the sequence in item
systems that extends Finite State
presentation
Machines (FSM), handle
6. Understand the use of proper use of
concurrency, and adds memory to
menu layout and form fill-in dialog
FSM. It also simplifies complex
boxes
system representations.
Has following states:
• Dialog Representation
❖ Active State
To represent dialogs
present state of the underlying FSM
2 purposes:
❖ Basic states
❖ helps in understanding the
individual states and are not
proposed design in a better way
composed of other states
❖ helps in analyzing dialogs to
❖ Super states
identify usability issues. E.g.,
composed of other states
Questions such as “does the design
actually support undo?” can be
The super state containing b is called the
answered
ancestor state. A super state is called OR
• Introduction to Formalism
super state if exactly one of its sub states is
There are many formalism techniques
active, whenever it is active.
that we can use to signify dialogs but
there are 3:
Three formalism techniques:
1. The state transition networks
(STN)
most spontaneous, which knows
that a dialog fundamentally
• Petri Nets
denotes to a progression from
simple model of active behavior,
one state of the system to the
provide a graphical explanation for
next
easy understanding.
STN consists 2 entities:
Four behavior elements:
1. Circles
1. Place
state of the system, which is
used to symbolize passive
branded by giving a name to
elements of the reactive system. A
the state
place is represented by a circle
2. Arcs
2. Transition
circles are connected with
used to symbolize active elements
arcs that refers to the
of the reactive system. Transitions
action/event resulting in the
are represented by
transition from the state
squares/rectangles
 3. Arc
This element is used to represent
causal relations. Arc is represented by
arrows
4. Token
subject to change. Tokens are
represented by small filled circles
Petri Nets were developed originally by Carl
Adam Petri [Pet62], and were the subject
of his dissertation in 1962.
Applied in variety of areas: Office
automation, work-flows, flexible
manufacturing, programming languages,
protocols and networks, hardware
structures, real-time systems, performance
evaluation, operations research, embedded
systems, defense systems,
telecommunications, Internet, ecommerce
and trading, railway networks, biological
systems
• Visual Thinking
-assisted in the communication
process since ages in form of
paintings, sketches, maps, diagrams,
photographs
-use of imagery and other visual forms
to make sense of the world and to
dragging a file from a folder to
another one in order to move itcreate
meaningful content
-design process became well suited as
a logical and collaborative method
during the design process
Digital imagery is a special form of visual
thinking, one that is particularly salient for
HCI and interaction design.
• Visual Immediacy
-reasoning process that helps in
understanding of information in the
visual representation
-The term is chosen to highlight its
time related quality, which also serves
as an indicator of how well the
reasoning has been facilitated by the
design
• Visual Impetus
defined as a stimulus that aims at the
increase in engagement in the
contextual aspects of the
representation
• Visual Impedance
-perceived as the opposite of visual
immediacy as it is a hindrance in the
design of the representation
-relation to reasoning, impedance can
be expressed as a slower cognition.
• Visual Metaphors, Association,
Analogy, Abduction and Blending
-When a visual demonstration is used
to understand an idea in terms of
another familiar idea it is called a
visual metaphor
-Analogy can be defined as an
implication from one particular to
another.
-Conceptual blending can be defined
as combination of elements and vital
relations from varied situations.
-highly benefited with the use of
above-mentioned concepts. The
concepts are pragmatic in supporting
the use of visual procedures in HCI, as
well as in the design processes.
• Direct Manipulation Programming
-action of using your fingertips to
zoom in and out of the image
-dragging a file from a folder to
another one in order to move it
-Direct manipulation (DM) is an
interaction style in which users act on
displayed objects of interest using
physical, incremental, reversible
actions whose effects are immediately
visible on the screen
-Ben Shneiderman first coined the
term “direct manipulation” in the early
 1980s, at a time when the dominant
interaction style was the command
line. In command-line interfaces, the
user must remember the system label
for a desired action, and type it in
together with the names for the
objects of the action. -cli-gui-
-Direct manipulation is one of the
central concepts of graphical user
interfaces (GUIs) and is sometimes
equated with “what you see is what
you get” (WYSIWYG).
-These interfaces combine menu
based interaction with physical actions
such as dragging and dropping in
order to help the user use the
interface with minimal learning.
• Characteristics of direct
manipulation
❖ Continuous representation of
the object of interest
Users can see visual
representations of the objects that
they can interact with. As soon as
they perform an action, they can
see its effects on the state of the
system. -listing content
❖ Physical actions instead of
complex syntax
Actions are invoked physically via
clicks, button presses, menu
selections, and touch gestures. -file
paths
❖ Continuous feedback and
reversible, incremental actions
Because of the visibility of the
system state, it’s easy to validate
that each action caused the right
result. Thus, when users make
mistakes, they can see right away
the cause of the mistake and they
should be able to easily undo it. -
measuring usability
❖ Rapid Learning
Because the objects of interest and
the potential actions in the system
are visually represented, users can
use recognition instead of recall to
see what they could do and select
an operation most likely to fulfill
their goal.
• Direct Manipulation vs.
Skeuomorphism
❖ Direct Manipulation
was based on the office-desk
metaphor — the computer screen
was an office desk, and different
documents (or files) were placed in
folders, moved around, or thrown
to trash.
❖ Skeuomorphism
interfaces are indeed based on
direct manipulation, not all direct
manipulation interfaces need to be
skeuomorphic. In fact, today’s flat
interfaces are a reaction to
skeuomorphism and depart from
the real-world metaphors, yet they
do rely on direct manipulation.
• Disadvantages of DM
❖ Continuous representation of the
objects? It means that you can
only act on the small number of
objects that can be seen at any
given time.
❖ Physical actions? One word: RSI
(repetitive strain injury). It’s a lot
of work to move all those icons and
sliders around the screen.
❖ Continuous feedback? Only if you
attempt an operation that the
system feels like letting you do. If
you want to do something that’s
not available, you can push and
drag buttons and icons as much as
you want with no effect
whatsoever. No feedback, only
frustration.
❖ Rapid learning? Yes, if the design is
good, but in practice learnability
depends on how well designed the
interface is. We’ve all seen menus
with poorly chosen labels, buttons
that did not look clickable
❖ DM is slow
❖ Repetitive tasks are not well
supported
 ❖ Some gestures can be more error-
prone than typing
❖ Accessibility may suffer
“Directness” has been considered as a
phenomenon that contributes majorly to the
manipulation programming. It has the
following two aspects: Distance and Direct
Engagement.
❖ Distance
interface that decides the gulfs
between a user’s goal and the level of
explanation delivered by the systems,
with which the user deals. These are
referred to as the Gulf of Execution
and the Gulf of Evaluation.
❖ The Gulf of Execution
defines the gap/gulf between a user's
goal and the device to implement that
goal. One of the principal objective of
Usability is to diminish this gap by
removing barriers and follow steps to
minimize the user’s distraction from
the intended task that would prevent
the flow of the work.
The Gulf of Evaluation is the
representation of expectations that
the user has interpreted from the
system in a design. As per Donald
Norman, The gulf is small when the
system provides information about its
state in a form that is easy to get, is
easy to interpret, and matches the
way the person thinks
of the system.
❖ Direct Management
It is described as a programming
where the design directly takes care of
the controls of the objects presented
by the user and makes a system less
difficult to use. The scrutiny of the
execution and evaluation process
illuminates the efforts in using a
system. It also gives the ways to
minimize the mental effort required to
use a system.
• Problems with DM
-all tasks should not be done easily
ex. Repetitive operation done via a
script and not immediacy
-hard to manage variables
-may not be accurate as dependency
on user rather than system
-directly supports the techniques, the
user thinks
• Item Presentation Sequence
Main factors in presentation sequence
are −
-Time
-Numeric ordering
-Physical properties
A designer must select one of the
following prospects when there are no
task-related arrangements −
-Alphabetic sequence of terms
-Grouping of related items
-Most frequently used items first
-Most important items first
• Menu Layout
Helping users navigate should be a
high priority for almost every website
and application.
• Navigation menus
are lists of content categories or
features, typically presented as a set
of links or icons grouped together with
visual styling distinct from the rest of
the design.
Avoid common mistakes by following
these guidelines for usable navigation
menus:
A. Make it visible
1. Don’t use tiny menus
2. Put menus in familiar locations
3. Make menu links look interactive
4. Have enough visual weight
5. Use link text colors that contrast in
bg color
B. Communicate the current location
6. Tell users ‘where’ the currently
visible screen is located within the
menu options.
 C. Coordinate Menus with user tasks
7. Use understandable link labels
Form Fill-in Design Guidelines:
8. Make link labels easy to scan
9. For large websites use menus to let • Title should be meaningful.
users preview lower-level content
10.Provide local navigation menus for • Instructions should be comprehensible.
closely related content • Fields should be logically grouped and
11.Leverage visual communication sequenced.
D. Make it easy to manipulate
12.Make menu links big enough to be • The form should be visually appealing.
easily tapped or clicked. • Familiar field labels should be provided.
13.Ensure that drop-downs are not too
small or too big • Consistent terminology and abbreviations
14. Consider ‘sticky’ menus for long should be used.
pages.
• Convenient cursor movement should be
15.Optimize for easy physical access
available.
to frequently used commands.
• Form fill in dialog boxes • Error correction for individual characters
Dialog box is a graphical user and entire field’s facility should be present.
interface element, which can be
• Error prevention.
noticed as small window that provides
information for the user and waits for • Error messages for unacceptable values
the response the user in order to should be populated.
perform action upon users input.
• Optional fields should be clearly marked.
Appropriate for multiple entry of • Explanatory messages for fields should be
data fields: available.
• Complete information should be
visible to the user. • Completion signal should populate.
• The display should resemble familiar
paper forms.
• Some instructions should be given
for different types of entries

Users must be familiar with:

• Keyboards

• Use of TAB key or mouse to move the

cursor

• Error correction methods

• Field-label meanings

• Permissible field contents

• Use of the ENTER and/or RETURN key.

One of the reasons why dialog boxes are

very important is to ensure that the users
will avoid mistakes