Systems analysis and design methods 7th whitten and benley chapter 14

User Interface Design and Prototyping 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 you design and evaluate the human engineering in a user interface for a typical information system? How you apply appropriate user interface strategies to an information system? How 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 User Interface Design and Prototyping 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 User Interface Design and Prototyping 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 User Interface Design and Prototyping 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 User Interface Design and Prototyping 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 User Interface Design and Prototyping Menu Bar User Interface Design and Prototyping 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 User Interface Design and Prototyping 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 User Interface Design and Prototyping 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 User Interface Design and Prototyping Pull-down Menu 10 User Interface Design and Prototyping 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 43 User Interface Design and Prototyping 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 44 User Interface Design and Prototyping 1 45 User Interface Design and Prototyping 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 46 User Interface Design and Prototyping 47 User Interface Design and Prototyping 48 User Interface Design and Prototyping 49 User Interface Design and Prototyping 50 User Interface Design and Prototyping 51 User Interface Design and Prototyping 52 User Interface Design and Prototyping 53 User Interface Design and Prototyping 54 User Interface Design and Prototyping 55 User Interface Design and Prototyping 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 56 User Interface Design and Prototyping Summary    Introduction Styles of User Interfaces How to Design & Prototype a User Interface 57 ... commands and properties for the user to complete a task User Interface Design and Prototyping Pull-down Menu 10 User Interface Design and Prototyping Dialogue Box 11 User Interface Design and. .. menus to locate and select a desired option 13 User Interface Design and Prototyping Cascading Menu 14 User Interface Design and Prototyping Cascading Menu 15 User Interface Design and Prototyping... by saving it for future reference 24 User Interface Design and Prototyping 25 User Interface Design and Prototyping 26 User Interface Design and Prototyping Styles of User Interfaces  Question-Answer