Interaction Styles

Interaction Styles
• Command Line Interface

• Navigational Interface

• WIMP Interface

• Menu selection

• Form fill-in
 Interaction styles: Command line
CS-402

interface
• Conversational
– Command language
– Dialog imposed by the system

• Menus, forms
– The system guides the user
– Dialog controlled by the system

3
 CS-402

Command line interface (2)

• Drawbacks
– Human in the loop
• System controls the interaction
– No feed forward
• Need to know the syntax in advance
– Limited feedback

4
 CS-402

Interaction styles: Navigation

• Navigation
– Nodes, anchors and links
– Best Use in Web applications

5
 Interaction styles: WIMP interfaces
CS-402

the current standard

• Presentation
– Windows
– Icons (and other graphical representations)

• Interaction
– Menus,
• Dialog boxes, Input fields, Scrollbars, etc.

• Input
– Pointing, Selection, Gestures
6
 CS-402

WIMP interfaces (2)

• Use of menus and dialog boxes ensue into correct path.

7
 Menu Selection
• Employs metaphor of restaurant menu
• Users read list of items; select appropriately according to task;
apply/indicate selection; confirm choice; initiate action;
observe effect
• Designers may need to use careful task analysis to ensure all
functions supported conveniently, and that terminology is
appropriate and consistent in use

8
 Advantages and Disadvantages of
Menus
• Advantages
– shortens learning curve
– reduces keystrokes
– structures decision-making
– permits use of dialogue-management tools
– allows easy support of error-handling
• Disadvantages
– imposes danger of deep-nested menu hierarchies
– may slow common users
– requires fast display rate

9
 Form Fill-in
• Paper forms can be used as metaphor (or indeed, template)
• Users see a display of related fields; move a cursor among the
fields, and enter data as appropriate
• Designers need to ensure that users understand field labels,
appropriate values and the data-entry method, and are
capable of responding to error messages - some user training
may be necessary

10
 Menu-Selection & Form Fill-in
• Advantages
– simplifies data entry
– requires simple training
– makes assistance convenient
– permits use of form-management tools

11
Menu-Selection & Form Fill-in

Additional Guidelines

12
 Task-Related Organization

"The primary goal for menu,

form-fillin, and dialog-box
designers is to create a
sensible, comprehensible,
memorable, and convenient
organization relevant to the
user's task."

13
 Menu selection design guidelines
• Sensible, understandable, memorable
menus must have logical grouping of options
based on user’s task
• single menu is simplest, but options are few
• In GUIs radio buttons or check boxes can be used
• binary (Yes/No) menus are a possibility
• extended menus (multiple pages are more normal)
 Extended menus
• Strategies for extended menus include
– multiple screens accessed hierarchically
– scrollable “single” windows
– pull-down menus:
menus lower levels invisible until
accessed from a top menu bar
– pop-up menus:
menus context-sensitive availability of
option lists
Single Menus (cont.)
 Content Organization (cont.)
• Menu layout (cont.)
– Titles
• For single menus, use a simple descriptive title.
• For tree-structured menus, use the exact same words in
the higher-level menu items as in the titles for the next
lower-level menu.
– E.g. if a menu item is called Business and Financial
Services, the next screen should have that phrase as
its title.
 Content Organization (cont.)
• Menu layout
– Titles (cont.)
• Phrasing of menu items
– Use familiar and consistent terminology
– Ensure that items are distinct from one another
– Use consistent and concise phrasing
– Bring the keyword to the left
 Content Organization (cont.)
• Menu layout (cont.)
– Graphic layout and design
• Constraints
– screen width and length
– display rate
– character set
– highlighting techniques
 Content Organization (cont.)
• Menu layout (cont.)
– Establish guidelines for consistency of at least these
menu components:
– Titles
– Item placement
– Instructions
– Error messages
– Status reports
 Content Organization (cont.)
• Menu layout (cont.)
– Techniques
• Indentation
• Upper/lower case characters
• Symbols such as * or - to create separators or outlines
• Position markers
• Cascading or walking menus
 Fast Movement Through Menus
• Keyboard shortcuts
– Supports expert use
– Can make translation to a foreign language more difficult
– Bookmarks in browsers
– User configured toolbars
 Form fill-in design
• Meaningful titles - dictated by task, not computer, semantics
• Comprehensible instructions
– brief, jargon-free instructions preferred
• Logical grouping and sequencing of fields
– close as possible to paper form “template”
• Visually appealing layout
– uniform spacing is better than crowded areas
• Familiar field-label names and order of entry
– left-to-right, top-to-bottom but with task logic in mind
Data Entry with Menus: Form Fillin, Dialog Boxes, and
Alternatives
 Form fill-in: Error handling and
feedback
• Error correction for individual characters and entire fields
– user should not be forced to “complete” data entry before
backtracking to make corrections
• Clear error-messages and on-line help for invalid entries
• Optional and compulsory fields clearly distinguished
• Clear completion signal
– avoid making completion automatic; explicit confirmation of “finish” is
preferable
 Data Entry with Menus: Form Fillin,
Dialog Boxes, and Alternatives
• Format-specific field
– Coded fields
• Telephone numbers
• Social-security numbers
• Times
• Dates
• Dollar amounts (or other currency)
 Data Entry with Menus: Form Fillin,
Dialog Boxes, and Alternatives
• Dialog Boxes
– Combination of menu and form-fillin techniques.
– Internal layout guidelines:
• Meaningful title, consistent style
• Top-left to bottom-right sequencing
• Consistent layouts (margins, grid, white space, lines, boxes)
• Consistent terminology, fonts, capitalization, justification
• Standard buttons (OK, Cancel)
• Error prevention by direct manipulation
 Assignment / Task
Create Comprehensive registration/membership/Signup form
for opening the account in any Job Portal. In that form it
should have its Personal Information, Qualification,
Experience, Skills, Certificate/Training, Reference. Apply all
the Interaction Styles on this form so that we can increase its
utility, efficiency and usability.