UID Chapter 1

1. U S E R I N T E R F A C E D E S I G N
8 T H S E M C S E / I S E
1 5 C S 8 3 2
B y ,
P r o f . A s h w i n S h e n o y M
A s s t . P r o f
D e p t . o f I S & E
Y I T , M o o d b i d r i
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 1

2. MODULE 1 TOPICS
Introduction-Importance-Human-Computer interface
Characteristics of graphics Interface
Direct manipulation graphical system
Web user interface-popularity characteristic & principles.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 2

3. GRAPHICAL USER INTERFACE
Goodinterface design , a variety of new display and interaction
techniques wrappedinto a package calledthe graphicaluserinterfaceor,
as it is commonly called, GUI
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 3

4. ..
• Goal of GUI – Make working with computer easy > enjoyable > productive.
• User interface design is a subset of a field of study called human-computer
• Human-computer interaction is the study, planning, and design of how people and
computers work together so that a person’s needs are satisfied in the most effective
way.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 4

5. FACTORS HCI
HCI designers must consider a variety of factors:
• What people want and expect
• What physical limitations and abilities people possess
• How their perceptual and information processing to systems work
• What people find enjoyable and attractive
• Technical characteristics and limitations of the computer hardware and software
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 5

6. UI
• The user interface is the part of a computer and its software that people can see, hear,
• touch, talk to, or otherwise understand or direct.
• The user interface has essentially two components: input and output.
• Input is how a person communicates his or her needs or desires to the computer.
Some common input components are the keyboard, mouse, trackball, one’s finger (for
touch-sensitive screens or pads), and one’s voice (for spoken instructions).
• Output is how the computer conveys the results of its computations and requirements
to the user. Ex: display screen.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 6

7. IMPORTANCE OF GOOD DESIGN
• Motivation to create really effective and usable interfaces and screens.
Systems that are inefficient and confusing or, at worst, just plain unusable? Is it because:
1. We don’t care?
2. We don’t possess common sense?
3. We don’t have the time?
4. We still don’t know what really makes good design?
Well-designed interface ,screen, screen’s layout - appearance and a system’s navigation
affect a person in a variety of ways.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 7

8. BENEFITS OF GOOD DESIGN
• Productivity benefits gain through proper well-designed screen
• Training costs are lowered because training time is reduced
• Support line costs is reduced
• Employee satisfaction is increased because aggravation and frustration are reduced.
• Ultimately, that an organization’s customers benefit from the improved service they
receive.
• Identifying and resolving problems during the design and development process also
has significant economic benefits.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 8

9. INTRODUCTION OF THE GRAPHICAL
USER INTERFACE
• The Xerox systems Altus and STAR introduced the mouse and pointing and selecting
as the primary human-computer communication method. The user simply pointed at
the screen, using the mouse as an intermediary. These systems also introduced the
graphical user interface as we know it today
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 9

10. • In 1985 Microsoft released Windows 1.0 and Commodore introduced the Amiga 100.
• In 1987 Apple introduced Macintosh II, the first color Macintosh, and the X Window
system became widely available.
• IBM’s contribution was the release of their System Application Architecture (including
Common User Access) and Presentation Manager, intended as graphics operating
system replacement for DOS.
• Other developmental milestones include NeXT’s 1988 release of NeXTStep, the first to
simulate a three-dimensional screen.
• In 1989, several UNIX-based GUIs were released, including Open Look by AT&T and
Sun Microsystems.
• Motif for the Open Software Foundation by DEC and Hewlett-Packard. Open Look
possessed an innovative appearance to avoid legal challenges.
• Finally, through the 1990s and 2000s, a succession of products and upgrades from
Microsoft and Apple have appeared.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 10

11. A BRIEF HISTORY OF SCREEN DESIGN
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 11

12. 9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 12

13. • Interaction styles.
• The concept of direct manipulation.
• The characteristics of graphical interfaces.
• The characteristics of Web interfaces.
• Web page versus Web application design.
• The general principles of user interface design.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 13

14. INTERACTION STYLES
An interaction style is simply the method, or methods, by which the user and computer
system communicate with one another.
■■ Command line
■■ Menu selection
■■ Form fill-in
■■ Direct manipulation
■■ Anthropomorphic
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 14

15. ADVANTAGES DISADVANTAGES
Command Line
• Powerful Commands must be
• Flexible Requires learning
• Appeals to expert users Intolerant of typing errors
• Conserves screen space Difficult for casual users
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 15

16. 9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 16

17. THE POPULARITY OF GRAPHICS
• The older text-based screen possessed a one-dimensional, text-oriented, form-like
quality, graphic screens assumed a three-dimensional look.
• Controls appeared to rise above the screen and move when activated.
• Information could appear and disappear as needed, and in some cases text could be
replaced by graphical images called icons. These icons could represent objects or
actions.
• Screen navigation and commands are executed through menu bars and pull-down
menus. Menus “pop up” on the screen
• The screen body, selection fields such as radio buttons, check boxes, list boxes, and
palettes coexisted with the reliable old text entry field. More sophisticated text entry
fields with attached or drop-down menus of alternative options also became available.
Screen objects and actions are typically selected through use of pointing mechanisms,
such as the mouse or joystick, instead of the traditional keyboard.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 17

18. THE CONCEPT OF DIRECT
MANIPULATION
• The system is portrayed as an extension of the real world
• Objects and actions are continuously visible
• Actions are rapid and incremental with visible display of results
• Incremental actions are easily reversible
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 18

19. Direct manipulation of all screen objects and actions may not be feasible because of the
following:
■■ The operation may be difficult to conceptualize in the graphical system.
■■ The graphics capability of the system may be limited.
■■ The amount of space available for placing manipulation controls in the window
border may be limited.
■■ It may be difficult for people to learn and remember all of the necessary operation
sand actions.
• When this occurs, indirect manipulation is provided. Indirect manipulation substitutes
words and text, such as pull-down or pop-up menus, for symbols, and substitutes
typing for pointing.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 19

20. EX for Direct and Indirect Manipulation
• A menu may be accessed by pointing at a menu icon and then selecting it (direct
manipulation). The menu itself, however, is a textual list of operations (indirect
manipulation). When a operation is selected from the list, by pointing or typing, the
system executes it as a command.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 20

21. GRAPHICAL SYSTEMS: ADVANTAGES
Symbols recognized faster than text
Faster learning
Faster use and problem solving
Easier remembering
More natural
Increased feeling of control
Immediate feedback
Predictable system responses
More attractive
Replaces national languages
Low typing requirements
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 21

22. DISADVANTAGES
• Greater design complexity
• Learning still necessary
• Inconsistencies in technique and terminology
• Lack of experimentally-derived design guidelines
• Not always familiar
• Human comprehension limitations.
• Window manipulation requirements
• Inefficient for expert users
• May consume more screen space.
• Hardware limitations
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 22

23. CHARACTERISTICS OF THE
GRAPHICAL USER INTERFACE
• Sophisticated Visual Presentation
• Pick-and-Click Interaction
• Restricted Set of Interface Options
• Visualization
• Object Orientation-Container objects & Device objects
• Use of Recognition Memory
• Concurrent Performance of Functions
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 23

24. WEB USER INTERFACE
Web interface design was essentially the design of navigation and the presentation of
information. It was about content, not data.
• Content- or information-focused interface design is typically called Web page design
• An application-focused interface is usually referred to as Web application design.
Both styles share many similar features, both being heavily graphical and information
rich.
• Web page interface design is largely a matter of properly balancing the structure and
relationships of menus, content, and other linked documents or graphics.
• The design goal is to build a hierarchy of menus and pages that feels natural, is well
structured, is easy to use, and is truthful.
• A Web application is usually designed to collect and process data
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 24

25. POPULARITY OF THE WEB INTERFACE
• It enables millions of people scattered across the globe to communicate, access
information, publish, and be heard.
• It enables people to control much of the display and the rendering of Web pages.
• People can also change aspects such as typography and colors, turn off graphics,
decide whether or not to transmit certain data over non secure channels, and accept or
refuse cookies
• Web usage has reflected this popularity. The number of Internet hosts has risen
dramatically. In 1984 hosts online exceeded 1,000; in 1987, 10,000; in 1989, 100,000; in
1990, 300,000; in 1992 hosts exceeded one million.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 25

26. • User control has had some disadvantages for some Web site owners .
• Users have become much more discerning about good design.
• Slow download times, confusing navigation, confusing page organization, disturbing
animation. and warning massages.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 26

27. CHARACTERISTICS OF A WEB
INTERFACE
• GUI versus Web Page Design
GUI and Web interface design are similar. Both are software designs, they are used by
people, they are interactive, they are heavily visual experiences presented through
screens, and they are composed of many similar components
most significant differences.
• 1. Devices.
• 2. User focus.
• 3. Data/information
• 4.User tasks.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 27

28. • 5. User’s conceptual space
• 6.Presentation elements
• 7. Navigation
• 8.Interaction
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 28

29. PRINCIPLES OF USER INTERFACE
DESIGN
• An interface must really be just an extension of a person, the system and its software
must reflect a person’s capabilities and respond to his or her specific needs.
• It should be useful, accomplishing some business objectives faster and more efficiently
than the previously used method or tool.
• It must also be easy to learn, because people want to do, not learn to do. Finally, the
system must be easy and fun to use, and evoke a sense of pleasure and
accomplishment, not tedium and frustration.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 29

30. PRINCIPLES FOR THE XEROX STAR
• The illusion of manipulable objects
• Visual order and viewer focus
• Revealed structure
• Consistency
• Appropriate effect or emotional impact
• A match with the medium
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 30

31. GENERAL PRINCIPLES
Aesthetically Pleasing
Provide visual appeal by following these presentation and graphic design principles:
• –– Provide meaningful contrast between screen elements.
• –– Create groupings.
• –– Align screen elements and groups.
• –– Provide three-dimensional representation.
• –– Use color and graphics effectively and simply.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 31

32. Clarity
The interface should be visually and conceptually clear including:
• –– Visual elements
• –– Functions
• –– Metaphors
• –– Words and text
Compatibility
Provide compatibility with the following:
• –– The user
• –– The task and job
• –– The product
• Adopt the user’s perspective.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 32

33. Configurability Consistency Control
Directness
Provide direct ways to accomplish tasks.
• Available alternatives should be visible.
• The effect of actions on objects should be visible.
Efficiency Familiarity Flexibility
Recovery Responsiveness
Simplicity
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 33

34. MODULE 2
User interface design process- Obstacles - Usability
Human characteristics in design - Human interaction speed
Business functions-requirement analysis-Direct-Indirect methods-basic business
functions
Design standards-System timings -Human consideration in screen design
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 34

35. USER INTERFACE DESIGN PROCESS
• UID Process consists of14 steps
Step 1: Know Your User or Client.
Step 2: Understand the Business Function
Step 3: Understand the Principles of Good Interface and Screen Design
Step 4: Develop System Menus and Navigation Schemes
Step 5: Select the Proper Kinds of Windows
Step 6: Select the Proper Interaction Devices
Step 7: Choose the Proper Screen-Based Controls
Step 8: Write Clear Text and Message
Step 9: Provide Effective Feedback and Guidance and Assistance
Step 10: Provide Effective Internationalization and Accessibility
Step 11: Create Meaningful Graphics, Icons, and Images.
Step 12: Choose the Proper Colors
Step 13: Organize and Layout Windows and Pages
Step 14: Test, Test, and Retest
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 35

36. OBSTACLES
• Nobody ever gets it right the first time.
• Development is chock-full of surprises.
• Good design requires living in a sea of changes.
• Making contracts to ignore change will never eliminate the need for change.
• Even if you have made the best system humanly possible, people will still make
mistakes when using it.
• Designers need good tools.
• You must have behavioral design goals like performance design goals.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 36

37. • Common pitfalls are:
• ■■ No early analysis and understanding of the user’s needs and expectations.
• ■■ A focus on using design features or components that are “neat”.
• ■■ Little or no creation of design element prototypes.
• ■■ No usability testing.
• ■■ No common design team vision of user interface design goals.
• ■■ Poor communication between members of the development team.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 37

38. DESIGNING FOR PEOPLE: THE SEVEN
COMMANDMENTS
pitfalls can be eliminated if the following design commandments
1. Provide a multidisciplinary design team.
2. Solicit early and ongoing user involvement.
3. Gain a complete understanding of users and their tasks
4. Create the appropriate design
5. Perform rapid prototyping and testing
6. Modify and iterate the design as much as necessary
7. Integrate the design of all the system components
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 38

39. USABILITY
• Usability is a quality attribute that assesses how easy a user interface is to use. The
term usability also refers to methods for improving ease-of-use throughout the entire
design process.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 39

40. usability possess these five quality components:
• ■■ 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 reestablish 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?
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 40

41. • Dimensions of usability have been described .
• ■■ Effective. The completeness and accuracy with which users achieve their goals.
• ■■ Efficient. The speed (with accuracy) with which users can complete their tasks.
• ■■ Engaging. The degree to which the tone and style of the interface makes the
product pleasing or satisfying to use.
• ■■ Error tolerant. How well the design prevents errors and helps with recovery from
those that do occur.
• ■■ Easy to learn. How well the product supports both initial orientation and
deepening understanding of its capabilities.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 41

42. Common Usability Problems
• Mandel (1994) lists the 10 most common usability problems in graphical systems as
reported by IBM usability specialists. They are:
• 1. Ambiguous menus and icons.
• 2. Languages that permit only single-direction movement through a system.
• 3. Input and direct manipulation limits.
• 4. Highlighting and selection limitations.
• 5. Unclear step sequences.
• 6. More steps to manage the interface than to perform tasks.
• 7. Complex linkage between and within applications.
• 8. Inadequate feedback and confirmation.
• 9. Lack of system anticipation and intelligence.
• 10. Inadequate error messages, help, tutorials, and documentation.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 42

43. PRACTICAL MEASURES OF USABILITY
OBJECTIVE MEASURES OF USABILITY
Practical Measures of Usability are:
• Are people asking a lot of questions or often reaching for a manual?
• Are frequent exasperation responses heard?
• Are there many irrelevant actions being performed?
• Are there many things to ignore?
• Do a number of people want to use the product?
Objective Measures of Usability are:
Effective learnable flexible attitudes
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 43

44. THE HUMAN ACTION CYCLE
• The human action cycle is a psychological model that describes how people interact
with computer systems.
• People tend to be goal oriented, wanting to achieve a specific objective when taking
an action or performing a task.
The action cycle consists of three stages:
• Goal formation
• Execution of activities to achieve the goal
• Evaluation of the results of the action
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 44

45. IMPORTANT HUMAN CHARACTERISTICS IN DESIGN
• Perception-Similarity, Matching patterns, Closure, Unity, Balance. Top-down lighting bias etc..
• Memory
• Sensory Storage
• Visual Acuity
• Foveal and Peripheral Vision
• Information Processing
• Mental Models
• Movement Control
• Learning
• Skill and Performance Load
• Individual Differences
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 45

46. THE USER’S PSYCHOLOGICAL AND
PHYSICAL CHARACTERISTICS
• Attitude ,Motivation ,Patience ,Stress Level and Expectations
• Age, Hearing, Processing and Gender
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 46

47. HUMAN INTERACTION SPEEDS
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 47

48. BUSINESS DEFINITION AND REQUIREMENTS
ANALYSIS
• The objective of this phase is to establish the need for a system. A requirement is an
objective that must be met.
• A product description is developed and refined, based on input from users, marketing,
or other interested parties
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 48

49. INFORMATION COLLECTION
TECHNIQUES
1. Direct Methods
Individual Face-to-Face Interview -structured or more open-ended.
Telephone Interview
Traditional Focus Group
Facilitated Team Workshop
Observational Field Study
Requirements Prototyping and User-Interface Prototyping
Usability Laboratory Testing
Card Sorting for Web Sites
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 49

50. INDIRECT
• MIS Intermediary
• Paper Survey and Electronic Survey
• Electronic Focus Group
• Marketing and Sales
• Support Line
• E-Mail, Bulletin Boards, or Guest Book
• Competitor Analysis
• System Testing
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 50

51. POSSIBLE PROBLEMS IN REQUIREMENTS COLLECTION
• ■■ Not enough user, customer, and other interested party involvement in the
• ■■ Lack of requirements management or coordination
• ■■ Communication problems among all participants.
• ■■ Capturing the relevant information may be difficult.
• ■■ People who do understand the problem may be constrained.
• ■■ Organizational , political factors and agendas may influence the process.
• ■■ Disparities in knowledge may exist.
• ■■ Changing economic and business environments and personnel roles.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 51

52. DESIGN STANDARDS
• Value of Standards and Guidelines
valuable to users because the standards and guidelines
■■ Allow faster performance.
■■ Reduce errors.
■■ Reduce training time.
■■ Foster better system utilization.
■■ Improve satisfaction.
■■ Improve system acceptance.
■■ Reduce development and support costs.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 52

53. They are valuable to system developers because they
• ■■ Increase visibility of the human-computer interface.
• ■■ Simplify design.
• ■■ Provide more programming and design aids, reducing programming time.
• ■■ Reduce redundant effort.
• ■■ Reduce training time.
• ■■ Provide a benchmark for quality control testing.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 53

54. USER INTERFACE STANDARDS
• A user interface standard is an official set of internationally agreed-upon design
Approaches and principles for interface design.
• An organization involved in developing such standards is the International
Organization for Standardization (ISO).
• ■■ ISO 9241: Ergonomic requirements for office work with visual display
terminals.
• ■■ ISO 14915: Software ergonomics for multimedia user interfaces.
• ■■ ISO 13407: Human-centered design processes for interactive systems.
• ■■ ISO/CD 20282: Ease of operation of everyday products.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 54

55. SYSTEM TRAINING AND
DOCUMENTATION
• System training will be based on user needs, system conceptual design, system
learning goals, and system performance goals
• Training may include such tools as formal or video training, manuals, online tutorials,
reference manuals, quick reference guides, and online help.
• Training needs must be established
• potential problems can also be identified and addressed earlier in the design process,
reducing later problems and modification costs.
• Creating documentation during the development progress will uncover issues and
reveal omissions that might not otherwise be detected until later in the design process.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 55

56. HUMAN CONSIDERATIONS IN
INTERFACE AND SCREEN DESIGN
• Use of a screen or Web page, and a system, is affected by many factors. These include
how much information is presented, how the information is organized, what language
is used to communicate to the user, how distinctly the components are displayed, what
aesthetics are used, and how consistent a screen or page is with other screens or
pages.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 56

57. What Users Want ???
• What are people looking for in the design of screens? One organization asked a group
of users and got the following responses:
• ■■ An orderly, clean, clutter-free appearance.
• ■■ An obvious indication of what is being shown and what should be done with it.
• ■■ Expected information located where it should be.
• ■■ A clear indication of what relates to what, including options, headings, captions,
data, and so forth.
• ■■ Plain, simple English.
• ■■ A simple way of finding out what is in a system and how to get it out.
• ■■ A clear indication of when an action can make a permanent change in the data or
system.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 57

58. WHAT USERS DO
• Identifies a task to be performed or a need to be fulfilled.
• Decides how the task will be completed or the need fulfilled
• Manipulates the computer’s controls.
• Gathers the necessary data or content while filtering out meaningless data or
content.
• Forms judgments resulting in decisions relevant to the task or need
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 58

59. MODULE 3
Structures of menus - functions of menus-contents of menu-formatting
phrasing the menu - selecting menu choice navigating menus-graphical menus.
Kinds of menus
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 59

60. STRUCTURES OF MENUS
• Menus vary from very simple to very complex.
• They may range from small dialog boxes requesting the user to choose between one
of two alternatives, to hierarchical tree schemes with many branches and levels of
depth.
• A menu’s structure defines the amount of control given to the user in performing a
task.
• The most common structures are the following
1. Single Menus
2. Sequential Linear Menus
3. Simultaneous Menus
4. Hierarchical or Sequential Menus
5. Connected Menus
6. Event-Trapping Menus
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 60

61. SINGLE MENUS
• Simplest form of menu, a single screen or window is presented to seek the user’s input
or request an action to be performed.
EX: the Internet, for example, at a point in the dialog people may be asked if they wish
to “Stay Connected” or “Disconnect.”
• Single menus conceptually require choices from this single menu only, and no other
menus will follow necessitating additional user choices.
• A single menu may be iterative if it requires data to be entered into it and this data
input is subject to a validity check that fails.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 61

62. SEQUENTIAL LINEAR MENUS
• Sequential linear menus are presented on a series of screens possessing only one path.
• The menu screens are presented in a preset order, and, generally, their objective is for
specifying parameters or for entering data.
• The length of the path may be short or long, depending upon the nature of the
information being collected.
• All the menus are important to the process at hand and must be answered in some
manner by the user.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 62

63. 9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 63

64. SIMULTANEOUS MENUS
• Instead of being presented on separate screens, all menu options are available
simultaneously.
• The menu may be completed in the order desired by the user, choices being skipped
and returned to later.
• All alternatives are visible for reminding of choices, comparing choices, and changing
answers.
• Problems with simultaneous menus are that for large collections of menu alternatives
screen clutter can easily occur, and screen paging or scrolling may still be necessary to
view all the choices.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 64

65. 9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 65

66. HIERARCHICAL OR SEQUENTIAL
MENUS
• In Web site design, hierarchical menus are often referred to as sequential menus. A
hierarchical structure results in an increasing refinement of choice as menus are
stepped through, for example, from options, to sub options, from categories to
subcategories, from pages to sections to subsections, and so on.
• Common examples of hierarchical design today are found in menu bars with their
associated pull-downs, and in Web sites with their navigation links.
• The order and structure of branching in a hierarchy is preset and the normal order of
flow one-way: top down.
• A disadvantage of a hierarchical scheme is that the defined branching order may not fit
the user’s conception of the task flow.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 66

67. 9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 67

68. CONNECTED MENUS
• Connected menus are networks of menus all interconnected in some manner.
• Movement through a structure of menus is not restricted to a hierarchical tree, but is
permitted between most or all menus in the network.
• A connected menu system may be cyclical, with movement permitted in either direction
between menus, or acyclical, with movement permitted in only one direction.
• These menus also vary in connectivity, the extent to which menus are linked by multiple
paths.
• The biggest advantage of a connected menu network is that it gives the user full control
over the navigation flow. Its disadvantage is its complexity, and its navigation.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 68

69. 9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 69

70. EVENT-TRAPPING MENUS
• Event-trapping menus provide an ever-present background of control over the
system’s state and parameters while the user is working on a foreground task.
• Event-trapping menus generally serve one of three functions;
(1) They may immediately change some parameter in the current environment (bold a
piece of text), (2) they may take the user out of the current environment to perform a
function without leaving the current environment (perform a spell check), or (3) they may
exit the current environment and allow the user to move to a totally new environment
(Exit).
• These menus can also change content based upon the system state, or an event,
existing at that moment.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 70

71. FUNCTIONS OF MENUS
• From the user’s perspective, a menu can be used to
perform several functions:
1. Navigation to a New Menu
2. Execute an Action or Procedure
3. Displaying Information
4. Data or Parameter Input
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 71

72. CONTENT OF MENUS
• A menu consists of four elements
1. Menu Context
2. Menu Title
3. Choice Descriptions
4. Completion Instructions
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 72

73. FORMATTING OF MENUS
• Consistency
• Display
• Presentation
• Organization
• Complexity
• Item Arrangement
• Ordering and Groupings
• Line Separators
• Selection Support Menus- Traditional, split, folded and Temporal menu.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 73

74. PHRASING THE MENU
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 74
A menu must communicate to the user information about
• ■■ The nature and purpose of the menu itself.
• ■■ The nature and purpose of each presented choice.
• ■■ How the proper choice or choices may be selected.

75. Menu Choice Descriptions
• ■ Create meaningful choice descriptions that are familiar, fully spelled
• ■ Descriptions may be single words, compound words, or multiple words or phrases.
• ■ Place the keyword first, usually a verb.
• ■ Use the sentence or headline style.
• ■ Use task-oriented not data-oriented wording.
• ■ Use parallel construction.
• ■ A menu choice must never have the same wording as its menu title.
• ■ Identical choices on different menus should be worded identically.
• ■ Word choices as commands to the computer.
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 75

76. SELECTING MENU CHOICES
• Menu items can be selected by pointing at the choice with a mechanical pointer, by
pointing at the choice through the keyboard, or by keying a value designating the
choice.
• Initial Cursor Positioning
• Choice Selection-Pointers, Keyboard: Selection/execution: Combining techniques.
• Unavailable Choices
• Mark Toggles or Settings , Toggled Menu Items
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 76

77. GRAPHICAL MENUS
• Menu Bar
• Item Descriptions AND Organization
• Pull-Down Menu
• Size
• Organization
• Groupings
• Cascading Menus
• Pop-Up Menus, Iconic Menus AND Pie Menus
9/19/2022 User Interface Design 8th Sem CSE/ISE 15CS832 77