1. The chapter will address the following questions:
Introduction
The chapter will address the following questions:
Which features on available terminal and microcomputer displays can be used for effective user interface design?
What are the backgrounds and problems encountered by different types of terminal and microcomputer users?
How do you design and evaluate the human engineering in a user interface for a typical information system?
How do you apply appropriate user interface strategies to an information system? How do you use a state transition diagram to plan and coordinate a user interface for an information system?
How can prototyping can be used to design a user interface.
482
In this chapter you will learn how to design and prototype the user interface for a system. The user interface should provide a friendly means by which the user can interact with the application to process inputs and obtain outputs. Recall that in the Chapters 12 and 13, you learned how to design and prototype inputs and outputs. User interface design and prototyping addresses the overall presentation of the application and may require revisions to those preliminary input and output prototypes. Today, there are two commonly encountered interfaces: terminals (or microcomputers behaving as terminals) used in conjunction with mainframes and the more common display monitors connected to microcomputers. There are also several strategy styles for designing the user interface for systems.

2. Styles of User Interfaces
Introduction
User interface design is the specification of a conversation between the system user and the computer.
This conversation generally results in either input or output -- possibly both.

3. Styles of User Interfaces
Menu Selection
The menu selection strategy of dialogue design presents a list of alternatives or options to the user. The system user selects the desired alternative or option by keying in the number or letter that is associated with that option.
More sophisticated technology allows menu selection by touching the screen, or selecting menu options with a pen, mouse, cursor keys, or other pointing devices.

4. Styles of User Interfaces
Menu Selection
Menu Bars:
Menu bars are used to display horizontally across the top of the screen/window a series of choices from which the user can select.
The choices typically correspond to commands or properties that the user can select or toggle.
The choices themselves are typically organized from left-to-right on the basis of the frequency that a choice is selected.
Menu bars are used to identify common and frequently used actions that take place in a wide variety of different windows that make up the application.

5. Styles of User Interfaces
Menu Selection
Menu Bars:
Menu bars advantages:
Always being readily visible to the user
Consistently located
Easily selected via the keyboard or mouse
Menu bars disadvantages:
Menu choices are organized for left-to-right scanning.
Studies have shown that users can more easily browse and select from a list that is vertically arranged.
To aid in clearly scanning the list, adequate spacing between choices is necessary.

6. Menu Bar

7. Styles of User Interfaces
Menu Selection
Pull-Down Menus:
Pull-down menus provide a vertical list of choices to the user.
A pull-down menu is made available once the user selects a choice from a menu bar.
The list of choices are typically organized from top-to-bottom according to the frequency in which they are chosen
One special type of pull-down menu is called a tear-off menu.
With a tear-off menu, the user can select the menu and drag to relocate it elsewhere on the screen.
The tear-off menu is then available for continual referencing.

8. Styles of User Interfaces
Menu Selection
Pull-Down Menus:
Pull-down menu advantages:
Allows the designer to simplify a menu bar that may otherwise contain too many choices.
Related set of choices are “grouped” into its own separate list.
Pull-down menu items can be selected via the keyboard or mouse.

9. Styles of User Interfaces
Menu Selection
Pull-Down Menus:
Pull-down menu disadvantages:
The user is not provided with a visual clue that suggests the menu exists.
Pull-down menu may obstruct the user’s view of other areas of interest appearing within the body of the screen/window.
A choice appearing on a pull-down menu may result in yet another list or menu of choices.
Choices which have a a right-pointing arrow next to the label result in a cascading menu.
Choices which have an eclipse next to the label result in a dialogue box being displayed that contains commands and properties for the user to complete a task.

10. Pull-down Menu

11. Dialogue Box

12. Styles of User Interfaces
Menu Selection
Cascading Menus:
A cascading menu is a menu that must be requested by the user from another higher-level menu.
The cascading menu’s existence is suggested by the visual clue of a right-pointing arrow appearing next to the higher-level menu choice.
When requested, the menu list will appear to the immediate right (in some cases, to the left) of the selected choice from the higher-level menu.

13. Styles of User Interfaces
Menu Selection
Cascading Menus:
Cascading menu advantages:
Cascading menus simplify higher-level menus into a smaller set of related group of choices.
Vertical arrangement of the choices also makes scanning the choices easier.
Cascading menu disadvantages:
Menu must be requested by the user.
User may have to traverse several levels of menus to locate and select a desired option.

14. Cascading Menu

15. Cascading Menu

16. Styles of User Interfaces
Menu Selection
Pop-up Menus:
A pop-up menu is a vertical listing of choices that must be requested by the user.
A pop-up menu is requested by clicking the right mouse button.
Unlike pull-down and cascading menus, the pop-up menu’s appearance depends on where the pointer was located when the menu was requested.

17. Styles of User Interfaces
Menu Selection
Pop-up Menus:
Pop-up menu advantages:
Provide a list of options that pertain to a specific object that the user selected.
When the cursor is positioned over an object of interest and the right mouse button is clicked, a pop-menu containing commands or properties pertaining to that object appears in the vicinity of the object.
Allows the user to obtain a list of actions without changing their focus away from the object or work area on the screen.

18. Styles of User Interfaces
Menu Selection
Pop-up Menus:
Pop-up menu disadvantages:
No visual clue that suggests their existence.
Users must learn about the existence pop-up menus.
May obstruct portions of the viewing area of interest to the user.

20. Styles of User Interfaces
Menu Selection
Iconic Menus:
An iconic menu uses graphic representations for menu options.
These types of menus are typically used to present the user with options that pertain to special functions that can be performed within the application.
Iconic menu advantages:
Easy recognition of options.
The use of graphic images helps the user to memorize and recognize the functions available within an application.
The choice presented in the form of an icon also provide a relatively larger selection target than the previously discussed menus.

21. Styles of User Interfaces
Menu Selection
Iconic Menus:
Iconic menu disadvantages:
May be difficult to find or create meaningful graphic images.
Not everything can easily be represented as a picture.
What is a readily identifiable and meaningful picture to one person may not be to the next person.

22. Iconic Menu

23. Styles of User Interfaces
Instruction Sets
Instead of menus -- or in addition to menus – applications can be designed using a dialogue around an instruction set (also called a command language interface).
Users must learn the syntax of the instruction set and this approach is suitable only for dedicated users.
There are three types of syntax.
A form of Structured English can be defined as a set of commands that control the system.
A mnemonic syntax is built around meaningful abbreviations for all commands.

24. Styles of User Interfaces
Instruction Sets
There are three types of syntax. (continued)
Natural language syntax is when the system user enters commands using natural English (either conversational or formal, written English).The system interprets these commands against a known syntax and requests clarification if it doesn't understand what the user wants. As new interpretations become known, the system learns the system user's vocabulary by saving it for future reference.

27. Styles of User Interfaces
Question-Answer Dialogues
Question-answer dialogue strategy is an style that was primarily used supplement either menu driven or syntax-driven dialogues.
This strategy involves the system asking the system user questions.
The simplest questions involve yes or no answers.
This strategy requires that you make sure to consider all possible correct answers and deal with the actions to be taken if incorrect answers are entered.
Question-answer dialogue is difficult because you must try to consider everything that the system user might do wrong!

28. Question
Answer

29. Styles of User Interfaces
Direct Manipulation
Allows direct manipulation of graphical objects appearing on a screen.
This user interface style focuses upon using icons, small graphic images, to suggest functions to the user.
Selecting the icon with a pointing device like a mouse or light pen executes the function.
Icons can work in conjunction with one another.
A pointing device can be used to drag the icon of a file folder (representing a named file) to a trash can icon — intuitively instructing the system to delete (or throw away) the file.

31. Human Factors for User Interface Design
Introduction
System users can be broadly classified as either dedicated or casual.
A dedicated system user is one who will spend considerable time using specific programs. This user is likely to become more comfortable and familiar with the terminal or PC's operation.
The casual system user may only use a specific program on an occasional basis. This user may never become truly comfortable with the terminal or the program.

32. Human Factors for User Interface Design
General Human Engineering Guidelines
Guideline 1: The system user should always be aware of what to do next.
Tell the user what the system expects right now.
Tell the user that data has been entered correctly.
Tell the user that data has not been entered correctly.
Explain to the user the reason for a delay in processing.
Tell the user that a task was completed or was not completed.
Guideline 2: The screen should always be formatted so that the various types of information, instructions, and messages always appear in the same general display area.

33. Human Factors for User Interface Design
General Human Engineering Guidelines
Guideline 3: Messages, instructions, or information should be displayed long enough to allow the system user to read them.
Guideline 4: Use display attributes sparingly.
Guideline 5: Default values for fields and answers to be entered by the user should be specified.
Guideline 6: Anticipate the errors users might make.

34. Human Factors for User Interface Design
Dialogue Tone and Terminology
The overall tone and terminology of a dialogue are important and the session should be user friendly.
With respect to the tone of the dialogue, the following guidelines are offered:
Use simple, grammatically correct sentences.
Don't be funny or cute!
Don't be condescending; that is, don't insult the intelligence of the system user.

35. Human Factors for User Interface Design
Dialogue Tone and Terminology
With respect to the terminology used in the dialogue, the following guidelines are offered:
Don't use computer jargon.
Avoid most abbreviations.
Use simple terms.
Be consistent in your use of terminology.
495
Avoid most abbreviations. Abbreviations assume that the user understands how to translate them. Check first!
Use simple terms. Use NOT CORRECT instead of INCORRECT. There is less chance of misreading or misinterpretation.
Be consistent in your use of terminology. For instance, don't use EDIT and MODIFY to mean the same action.

36. Human Factors for User Interface Design
Dialogue Tone and Terminology
With respect to the terminology used in the dialogue, the following guidelines are offered: (continued)
Instructions should be carefully phrased, and appropriate action verbs should be used.
The following recommendations should prove helpful:
Try SELECT instead of PICK when referring to a list of options.
Use TYPE, not ENTER, to request the user to input specific data or instructions.
Use PRESS, not HIT or DEPRESS, to refer to keyboard actions.
When referring to the cursor, use the term POSITION THE CURSOR, not POINT THE CURSOR.
495
Try SELECT instead of PICK when referring to a list of options. Be sure to indicate whether the user can select more than one option from the list of available options.
Use PRESS, not HIT or DEPRESS, to refer to keyboard actions. Whenever possible, refer to keys by the symbols or identifiers that are actually printed on the keys. For instance, the is used on some terminals to designate the RETURN or ENTER key.

37. Display Features That Affect User Interface Design
Display Area
The size of the display area is critical to user interface design.
For terminal displays, the two most common display areas are 25 (lines) by 80 (columns) and 25 by 132.
For microcomputer and workstation display monitors, display size is measured in pixels.
The greater the number of pixels, the more information can be displayed.
Pixel display areas are specified in width by height.
Some newer displays are designed to show more lines, for example, 65 lines on one screen. Some terminals can show four complete 25 by 80 character screens simultaneously.

38. Display Features That Affect User Interface Design
Character Sets and Graphics
Every display uses a predefined character set.
Most displays use the common ASCII character set.
Some displays allow the programmer to supplement or replace the predefined character set.
Most displays today offer graphics capabilities.
Graphics capabilities must be supported by graphics controllers and software that allow the programmer to take advantage of the graphics capabilities.
Graphics-based displays may support a virtually unlimited character set.
496
No additional notes provided.

39. Display Features That Affect User Interface Design
Paging and Scrolling
The manner in which the display area is shown to the user is controlled by both the technical capabilities of the display and the software capabilities of the computer system.
Paging displays a complete screen of characters at a time. The complete display area is known as a page (also called a screen or frame). The page is replaced on demand by the next or previous page.
Scrolling moves the displayed characters up or down, one line at a time.
496
No additional notes provided.

40. Display Features That Affect User Interface Design
Display Properties
Most displays in use today provide a wide variety of display properties that may be manipulated to more effectively present data and information.
Display properties are characteristics that change the way in which a character or group of characters is displayed on a screen.
496
For example, displays allow color to be used to highlight specific messages, data, or areas of the screen. Nondisplay of a selected field (for example, passwords) is another example. PC displays and software offer a wide array of display properties which can simplify and improve user interfaces.

41. Display Features That Affect User Interface Design
Split-Screen and Windowing Capabilities
Split-screen capability is a variation on the windows concept.
The display screen, under software control, can be divided into different areas (called windows).
Each window can act independently of the other windows, using features such as paging, scrolling, display attributes, and color.
Each window can be defined to serve a different purpose. Windows can be resized, moved, and hidden or recalled on user demand.
496
Windowing is rapidly becoming accepted as a standard user interface. Most microcomputer products use windowing interfaces such as Microsoft Windows and IBM's Presentation Manager, OSF's Motif, and Apple's Finder.

42. Display Features That Affect User Interface Design
Keyboards and Function Keys
Most modern terminals and monitors are integrated with keyboards.
The number of keys and their layout may vary, but most keyboards contain special keys called function keys.
Function keys (usually labeled F1, F2, and so on) can be used to implement certain common, repetitive operations in a user interface (for example, START, HELP, PAGE UP, PAGE DOWN, EXIT). These keys can be programmed to perform common functions.
Function keys should be used consistently.
A system's programs should consistently use the same function keys for the same purposes.
No additional notes provided.

43. Display Features That Affect User Interface Design
Pointer Options
There are many selection options, such as touch-sensitive screens, voice recognition, and pointers.
The most common pointer is the mouse.
A mouse is a small hand-sized device that sits on a flat surface near the terminal. It has a small roller ball on the underside. As you move the mouse on the flat surface, it causes the pointer to move across the screen. Buttons on the mouse allow you to select objects or commands to which the cursor has been moved. Alternatives include trackballs, pens, and trackpoints.
497
No additional notes provided.

44. How to Design & Prototype a User Interface
Step 1: Chart the Dialogue
A state transition diagram is used to depict the sequence and variations of screens that can occur when the system user sits at the terminal (PC or workstation).
Rectangles are used to represent display screens.
The arrows represent the flow of control and triggering event causing the screen to become active or receive focus.
The rectangles only describe what can appear during the dialogue.
The direction of the arrows indicate the order in which these screens occur.
497
Notice that a separate arrow, each with its own label, is drawn for each direction. Why? Because different actions trigger flow of control from and flow of control to a given screen.

45. 3 4 2 1 1 2 2 1

46. How to Design & Prototype a User Interface
Step 2: Prototype the Dialogue and User Interface
Many screens may have to be designed and prototyped.
Some screens were identified for the purpose of bringing together the application and its input and output screens.
Some screens were identified for the purpose to provide the user some flexibility with customizing the application’s interaction to suit their own preferences.
Other screens may have been identified to deal with system controls such as backup and recovery.
It is through studying the entire collection of screens that you may discover the need to make revisions to some screens.
It is likely that such issues as color, naming consistencies of common buttons and menu options, and other look-and-feel conflicts may need to be resolved.
499
No additional notes provided.

48. 1 2 3

49. 1 2

56. How to Design & Prototype a User Interface
Step 3: Obtain User Feedback
Exercising (or testing) the user interface is a key advantage of all prototyping environments.
Exercising (or testing) the user interface means that system users literally experiment with and test the interface design prior to extensive programming and actual implementation of the working system. Analysts can observe this testing to improve on the design.
In the absence of prototyping tools, the analyst should at least simulate the dialogue by walking through the screen sketches with system users.
500
There are several ways to prototype a dialogue and user interface. Many Computer Assisted Systems Engineering (CASE) products include dialogue and interface prototyping tools. Some CASE products can support both screen design as well as testing (through simulation). Most database management systems and fourth-generation languages include screen and dialogue generators that can be used to prototype the user interface.
User feedback is essential. The analyst should encourage the user to participate in testing the application’s interface. Finally, the analyst should expect to revisit steps 1 and 2 as needed changes become known.

57. Summary
Introduction
Styles of User Interfaces
How to Design & Prototype a User Interface