OMIS 651 - Ch09 - User Interface Design 2 PDF

Business Systems Analysis & Design User Interface Design OMIS 651 Dr. Amin Vahedian Outline Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design...

Business Systems Analysis & Design User Interface Design OMIS 651 Dr. Amin Vahedian Outline Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design 2 Introduction This chapter discusses the process of defining how the system interacts with the users. We focus on design of user interfaces – the way in which the users interact with the system. We also discuss an overview of user interface design process, overview of navigation, input and output components that are used in interface design. 3 Key Definitions System Interface: connections with other systems, where systems exchange information with each other. Designed as a part of program design. User Interface: connections with users. Focus of this chapter. The navigation mechanism provides the way for users to tell the system what to do The input mechanism defines the way the system captures information The output mechanism defines the way the system provides information to users or other systems Graphical user interface (GUI): most common type of interface in use today 5 Principles for User Interface Design Layout Content awareness Aesthetics Usage level Consistency Minimizing user effort 7 Layout Components The screen is often divided into three boxes Navigation area (top) Status area (bottom) Work area (middle) Information can be presented in multiple areas 8 Layout Components (Cont.) Areas and information should minimize user movement from one to another Ideally, areas will remain consistent in Size Shape Placement for entering data Reports presenting retrieved data 9 Model Layout for Web Page Note use of multiple layout areas for site navigation 11 Content Awareness All interfaces should have titles Menus should show where you are where you came from to get there It should be clear what information is within each area Fields and field labels should be selected carefully Use dates and version numbers to aid system users Note the use of highlighting to indicate menu selections Breadcrumbs provide additional clues on navigational path 12 Aesthetics Interfaces need to be functional and inviting to use Avoid squeezing in too much, particularly for novice users Design text carefully Be aware of font and size Avoid using all capital letters Colors and patterns should be used carefully Test quality of colors by trying the interface on a black/white monitor Use colors to separate or categorize items 13 Usage Level Some people will be frequent, heavy users of the system Frequent users desire ease of use – quick and easy completion of job tasks Other people may use the system infrequently Infrequent users desire ease of learning – quick and easy ways to figure out what to do. 14 Usage Level (Cont.) User interface design should anticipate the types of users expected. For systems primarily used by frequent users, include ways to perform tasks directly (hot keys, short-cut keys, etc.). For systems primarily used by infrequent users, include careful menu designs, tool tips, and extensive help systems. For systems with both user types, incorporate both user preferences in design as much as possible 15 Consistency Elements are the same throughout the application Enables users to predict what will happen Reduces learning curve Considers elements within an application and across applications Pertains to many different levels Navigation controls Terminology Report and form design 16 Minimize Effort Three clicks rule Users should be able to go from the start or main menu of a system to the information or action they want in no more than three mouse clicks or three keystrokes 17 User Interface Design Process Understand the Users Organize the Interface Define Standards Develop Prototypes Evaluation/Testing 22 Understand the Users Users likely will have very different goals and intentions when using the system. Use personas to develop characterizations of various user groups. Interests Typical behaviors Goals and objectives Expectations Plan a user interface that will be satisfying for that particular user group. 23 Organize the Interface Define the basic components of the interface and how they work together to provide functionality to users. Shows how all screens, forms, and reports are related Shows how user moves from one to another – One technique is Storyboarding 24 Define Standards Clarify decisions on all key interface elements to ensure consistency: Basic common elements across individual screens, forms, and reports within the application Interface metaphor (e.g., calendar, checkbook, shopping cart) Interface objects (e.g., customer/client; employee/associate) Interface actions (e.g., buy/purchase/check out; exit/quit) Interface icons (pictures) representing status or actions (e.g., trash can for delete; disk for save) Interface templates (layout guide for all screens) 28 Interface Design Prototyping A mock-up or simulation of screens, forms, or reports Common methods include: Paper sketches Wireframe diagrams Storyboarding Wireflow diagrams HTML prototype Language prototype 29 Storyboard Example 30 Interface Evaluation Methods Heuristic evaluation Compare design to checklist Walkthrough evaluation Team simulates movement through components Interactive evaluation Users try out the system Formal usability testing Expensive Detailed use of special lab testing 31 Basic Principles of Navigation Design Assume users Have not read the manual Have not attended training Do not have external help readily at hand All controls should be clear and understandable and placed in an intuitive location on the screen. 32 Basic Principles of Navigation Design (Cont.) Prevent mistakes Limit choices Never display commands that can’t be used (or “gray them out”) Confirm actions that are difficult or impossible to undo Simplify recovery from mistakes Use consistent grammar order (action-object, object- action) 33 Menu Tips Menus enable users to select action from an organized display of action categories and options Broad and shallow design is preferred Logical categories can be objects (customers; orders) or actions (insert, design) Common menu formats include menu bars, drop-down menus, popup menus, tab menus, icon tool bars, and image maps. Menus may become less popular with trend toward touchscreens 34 Message Tips Common message types include: Error message Confirmation message Acknowledgment message Delay message Help message Strive for clear, concise, and complete messages Should be grammatically correct and free of jargon and abbreviations (unless they are the users’) Avoid negatives and humor (it gets old) 35 Basic Principles of Input Design The goal is to simply and easily capture accurate information for the system Reflect the nature of the inputs Find ways to simplify their collection 36 Online versus Batch Processing Online processing immediately records the transaction in the appropriate database Batch processing collects inputs over time, holds them temporarily, and then processes all the transactions at one time in a batch Batch processing simplifies data communications and other processes; but master files are not updated real time 37 Input Validation Apply a judicious amount of input validation to ensure accuracy. Types include: Completeness check Format check Range check Check digit check Consistency check Database checks 44 Basic Output Design Principles Understand report usage Reference or cover-to-cover? Frequency? Real-time or batch reports? Manage information load All needed information, no more Utilize various report types (detail, summary, exception, graphical) and media to satisfy users output requirements. 45