System Design System Design - Mr. Ahmad Al-Ghoul System Analysis and Design

Avicenna System Analysis and Design System Design2 Chapter Objectives Explain the basic principles of user- centered design Explain the basic principles of user- centered design List specific guidelines for user interface design List specific guidelines for user interface design Describe user interface techniques, including screen elements and controls Describe user interface techniques, including screen elements and controls Describe the main point in Evaluating User Interfaces Describe the main point in Evaluating User Interfaces

Avicenna System Analysis and Design System Design3 Basic Principles of User-Centered Design Understand the underlying business functions: Understand the underlying business functions: the interface designer must understand the underlying business functions and how the system supports the individual, departmental, and enterprise goals the interface designer must understand the underlying business functions and how the system supports the individual, departmental, and enterprise goals A good starting point might be to analyze a functional decomposition diagram (FDD) A good starting point might be to analyze a functional decomposition diagram (FDD) FDD can provide a check list of user tasks that you must include in the interface design. FDD can provide a check list of user tasks that you must include in the interface design. Maximize graphical effectiveness: Maximize graphical effectiveness: (GUI) uses graphical objects and techniques that allow users to communicate with the system. (GUI) uses graphical objects and techniques that allow users to communicate with the system. A well designed GUI help users learn a new system rapidly, and work with the system effectively. A well designed GUI help users learn a new system rapidly, and work with the system effectively. Profile the system users: Profile the system users: a system analyst must understand user experience, knowledge, and skill levels. a system analyst must understand user experience, knowledge, and skill levels. The interface should be flexible enough to accommodate novices as well as experienced users The interface should be flexible enough to accommodate novices as well as experienced users

Avicenna System Analysis and Design System Design4 Basic Principles of User-Centered Design Think like a user: Think like a user: the designer must learn to think like a user and see the system through a user’s eyes. the designer must learn to think like a user and see the system through a user’s eyes. The interface should use terms that are familiar to users The interface should use terms that are familiar to users Use prototyping: Use prototyping: it is essential to construct models, and prototypes for a user approval. it is essential to construct models, and prototypes for a user approval. Then interface designer should obtain as much feedback as possible, as early as possible. Then interface designer should obtain as much feedback as possible, as early as possible. Design comprehensive interface: Design comprehensive interface: the user interface should include all tasks, commands, and communications between the users and the information system. the user interface should include all tasks, commands, and communications between the users and the information system.

Avicenna System Analysis and Design System Design5 Basic Principles of User-Centered Design Continue the feedback process: Continue the feedback process: it is important to monitor system usage and user suggestions. it is important to monitor system usage and user suggestions. You can determine if system features are being used as intended by observing and surveying users You can determine if system features are being used as intended by observing and surveying users Document the interface design: Document the interface design: you should document all screen designs for latter use by programmers. you should document all screen designs for latter use by programmers. If you are using a CASE tool or screen generator, number the screen designs and save them in hierarchy similar to a menu tree. If you are using a CASE tool or screen generator, number the screen designs and save them in hierarchy similar to a menu tree.

Avicenna System Analysis and Design System Design6 User interface design guidelines Good user interface design is based on eight basic principles Follow eight basic guidelines Follow eight basic guidelines 1. Focus on basic objectives 2. Build an interface that is easy to learn and use 3. Provide features that promote efficiency 4. Make it easy for users to obtain help or correct errors 5. Minimize input data problems 6. Provide feedback to users 7. Create an attractive layout and design 8. Use familiar terms and images

Avicenna System Analysis and Design System Design7 User interface design guidelines Focus on basic objectives Focus on basic objectives Facilitate the system design objectives, rather than calling attention to the interface Facilitate the system design objectives, rather than calling attention to the interface Create a design that is easy to learn and remember Create a design that is easy to learn and remember Design the interface to improve user efficiency and productivity Design the interface to improve user efficiency and productivity Write commands, actions, and system responses that are consistent and predictable Write commands, actions, and system responses that are consistent and predictable Minimize data entry problems Minimize data entry problems Allow users to correct errors easily Allow users to correct errors easily Crate logical and attractive layout Crate logical and attractive layout

Avicenna System Analysis and Design System Design8 User interface design guidelines Build an interface that is easy to learn and use Build an interface that is easy to learn and use Label clearly all controls, buttons, and icons. Label clearly all controls, buttons, and icons. Select only those images that users can easily understand. Select only those images that users can easily understand. Provide on screen instructions that are logical, concise, and clear. Provide on screen instructions that are logical, concise, and clear. In the example shown at the top of the figure, only one of the control buttons has an obvious meaning. In the bottom screen, the first message is hard to understand, but the bottom message is unmistakable. [1]

Avicenna System Analysis and Design System Design9 User interface design guidelines Build an interface that is easy to learn and use Build an interface that is easy to learn and use Show all commands in a list of menu item, but dim any commands that are not currently available. Show all commands in a list of menu item, but dim any commands that are not currently available. Make it easy to return to one or more levels in the menu structure. Make it easy to return to one or more levels in the menu structure.

Avicenna System Analysis and Design System Design10 User interface design guidelines PROVIDE FEATUES THAT PROMOTE EFFICIENCY PROVIDE FEATUES THAT PROMOTE EFFICIENCY organize tasks, commands, and functions in groups that resemble actual business operations. You should group functions and submenu items in a multilevel menu hierarchy, or tree organize tasks, commands, and functions in groups that resemble actual business operations. You should group functions and submenu items in a multilevel menu hierarchy, or tree Tasks, commands, and functions should be organized in logical groups, such as this menu hierarchy for a customer order tracking system [1]

Avicenna System Analysis and Design System Design11 User interface design guidelines PROVIDE FEATUES THAT PROMOTE EFFICIENCY PROVIDE FEATUES THAT PROMOTE EFFICIENCY Create aliphatic menu or lists or place the selections used frequently at the top of the menu list. Create aliphatic menu or lists or place the selections used frequently at the top of the menu list. Provide shortcuts to experienced users to avoid multiple menu levels. Provide shortcuts to experienced users to avoid multiple menu levels. Use default values if the majority of values in field are the same. Use default values if the majority of values in field are the same. Provide a fast find feature that displays a list of possible as soon as users enter the first few letters. Provide a fast find feature that displays a list of possible as soon as users enter the first few letters. Use a natural language feature that allows users to type commands or requests in normal English phrases. Use a natural language feature that allows users to type commands or requests in normal English phrases.

Avicenna System Analysis and Design System Design12 User interface design guidelines Make it easy for users to obtain help or correct errors Make it easy for users to obtain help or correct errors Ensure that Help is always available Ensure that Help is always available Provide user-selected Help and context-sensitive Help Provide user-selected Help and context-sensitive Helpuser-selected context-sensitiveuser-selected context-sensitive Provide a direct route for users to return to the point from where Help was requested Provide a direct route for users to return to the point from where Help was requested Include contact information, such as telephone number Include contact information, such as telephone number Require user confirmation before data deletion Require user confirmation before data deletion Provide an Undo key Provide an Undo key Highlight the erroneous part of a command and allow the user to make correction without retyping the entire command Highlight the erroneous part of a command and allow the user to make correction without retyping the entire command A context-sensitive dialog box that is displayed if a user requests help while entering data into the ADVISOR ASSIGNED field. Clicking the Close button returns the user to the task.

Avicenna System Analysis and Design System Design13 User interface design guidelines Minimize input data problems Minimize input data problems Provide data validation checks Provide data validation checks Display event-driven messages and reminders, Display event-driven messages and reminders, display an appropriate message when it is time for the user to perform a certain task display an appropriate message when it is time for the user to perform a certain task Establish a list of predefined values that users can click to select Establish a list of predefined values that users can click to select Predefined values prevent spelling errors, avoid inappropriate data in a field Predefined values prevent spelling errors, avoid inappropriate data in a field Build in rules that enforce data integrity Build in rules that enforce data integrity Use input masks, which are templates or patterns that make it easier for users to enter data. Use input masks, which are templates or patterns that make it easier for users to enter data.

Avicenna System Analysis and Design System Design14 User interface design guidelines Provide feedback to users Provide feedback to users Display messages at a logical place on the screen Display messages at a logical place on the screen Alert users to lengthy processing times or delays Alert users to lengthy processing times or delays Allow messages to remain on the screen long enough for users to read them Allow messages to remain on the screen long enough for users to read them Let the user know whether the task or operation was successful or not Let the user know whether the task or operation was successful or not Provide a text explanation if you use an icon or image on a control button Provide a text explanation if you use an icon or image on a control button Use messages that are specific, understandable, and professional Use messages that are specific, understandable, and professional

Avicenna System Analysis and Design System Design15 User interface design guidelines CREATE AN ATTRACTIVE LAYOUT AND DESIGN CREATE AN ATTRACTIVE LAYOUT AND DESIGN Use appropriate colors to highlight different areas of the screen; avoid gaudy and bright colors. Use appropriate colors to highlight different areas of the screen; avoid gaudy and bright colors. Use special effects like sound and animation carefully. Use special effects like sound and animation carefully. Use hyperlinks that allow users to jump to related topics. Use hyperlinks that allow users to jump to related topics. Group related objects and information. Visualize the screen the way a user will see it, and simulate the tasks that the user will perform Group related objects and information. Visualize the screen the way a user will see it, and simulate the tasks that the user will perform Screen density is important. Keep screen displays uncluttered, with enough white space to create an attractive, readable design Screen density is important. Keep screen displays uncluttered, with enough white space to create an attractive, readable design

Avicenna System Analysis and Design System Design16 User interface design guidelines CREATE AN ATTRACTIVE LAYOUT AND DESIGN CREATE AN ATTRACTIVE LAYOUT AND DESIGN Display titles, messages and instructions in a consistent manner and in the same general locations on all screens. Display titles, messages and instructions in a consistent manner and in the same general locations on all screens. Use consistent terminology. For example, do not use the terms delete, cancel, and erase to indicate the same action. Use consistent terminology. For example, do not use the terms delete, cancel, and erase to indicate the same action. Ensure that commands will always have the same affect. Ensure that commands will always have the same affect. Ensure that similar mouse actions will produce the same results throughout the application Ensure that similar mouse actions will produce the same results throughout the application Require the user to confirm data entry by pressing the ENTER key or TAB key at the end of a fill in field, even if the data does not completely fill the field. Require the user to confirm data entry by pressing the ENTER key or TAB key at the end of a fill in field, even if the data does not completely fill the field.

Avicenna System Analysis and Design System Design17 User interface design guidelines Use familiar terms and images Use familiar terms and images Provide a keystroke alternative for each menu command, with easy to remember letters, such as File, Exit Provide a keystroke alternative for each menu command, with easy to remember letters, such as File, Exit Use familiar commands, such as Cut, Copy and Paste Use familiar commands, such as Cut, Copy and Paste Avoid programmer terminology Avoid programmer terminology Provide a Windows look and feel in your interface design if users are familiar with Windows-based applications Provide a Windows look and feel in your interface design if users are familiar with Windows-based applications

Avicenna System Analysis and Design System Design18 User interface design guidelines User Interface Controls User Interface Controls Menu bar: main menu options at the top of the screen Menu bar: main menu options at the top of the screen Toolbar: conations icons or buttons that represent shortcuts for executing common commands Toolbar: conations icons or buttons that represent shortcuts for executing common commands Command button Command button Dialog box: allows users to enter information about a task that the system will perform. Dialog box: allows users to enter information about a task that the system will perform. Text box: can display messages or provide a place for user to enter data Text box: can display messages or provide a place for user to enter data Toggle button: is used to represent on or off status, clicking the toggle button switches to the other status Toggle button: is used to represent on or off status, clicking the toggle button switches to the other status

Avicenna System Analysis and Design System Design19 User interface design guidelines User Interface Controls User Interface Controls List box:displays a list of choices that the user can select List box:displays a list of choices that the user can select scroll bar: allows the user to move through the available choices. scroll bar: allows the user to move through the available choices. Drop-down list box: displays the current selection; when the user clicks the arrow, a list of the available choices displays Drop-down list box: displays the current selection; when the user clicks the arrow, a list of the available choices displays Option button, or radio button: represent groups of options. The user can select only one option at a time; a selected option contains a black dot. Option button, or radio button: represent groups of options. The user can select only one option at a time; a selected option contains a black dot. Check box: is used to select one or more choices from a group. Check box: is used to select one or more choices from a group. Calendar control: allows the user to select a date that the system will display and store as a field value Calendar control: allows the user to select a date that the system will display and store as a field value

Avicenna System Analysis and Design System Design20 User interface design guidelines [1]

Avicenna System Analysis and Design System Design21 User interface design guidelines The opening screen is especially important because it introduces the application and allows users to view the main options The opening screen is especially important because it introduces the application and allows users to view the main options You can use a main form in designing the opening screen You can use a main form in designing the opening screen A Switchboard uses command buttons that enable users to navigate a system and select from groups of related tasks. A Switchboard uses command buttons that enable users to navigate a system and select from groups of related tasks. [1]

Avicenna System Analysis and Design System Design22 Evaluating User Interfaces The five useful standards in evaluating the interfaces are The five useful standards in evaluating the interfaces are The training period for users should be acceptably short The training period for users should be acceptably short Users early in their training should be able to enter commands without thinking about them, or referring to a help menu or manual Users early in their training should be able to enter commands without thinking about them, or referring to a help menu or manual The interface should be "seamless" so that errors are few, and those that do occur are not occurring because of poor design The interface should be "seamless" so that errors are few, and those that do occur are not occurring because of poor design Time necessary for users and the system to bounce back from errors should be short Time necessary for users and the system to bounce back from errors should be short Infrequent users should be able to relearn the system quickly Infrequent users should be able to relearn the system quickly

Avicenna System Analysis and Design System Design23 Sequence Summary User-centered design principles require an analyst to understand the business functions, maximize graphical effectiveness, profile the system’s users, think like a user, use prototyping, design a comprehensive interface, continue the feedback process, and document the interface design User-centered design principles require an analyst to understand the business functions, maximize graphical effectiveness, profile the system’s users, think like a user, use prototyping, design a comprehensive interface, continue the feedback process, and document the interface design This sequence listed several interface design guidelines, which suggested that you focus on basic objectives, make the interface easy to learn and use, provide features that promote efficiency, make it easy for users to obtain help and correct errors, minimize input data problems, provide feedback to users, create an attractive layout and design, and use familiar terms and images This sequence listed several interface design guidelines, which suggested that you focus on basic objectives, make the interface easy to learn and use, provide features that promote efficiency, make it easy for users to obtain help and correct errors, minimize input data problems, provide feedback to users, create an attractive layout and design, and use familiar terms and images You learned that an interface can include various controls, including menu bars, toolbars, drop-down list boxes, dialog boxes, toggle buttons, list boxes, options buttons, check boxes, command buttons, and calendar control You learned that an interface can include various controls, including menu bars, toolbars, drop-down list boxes, dialog boxes, toggle buttons, list boxes, options buttons, check boxes, command buttons, and calendar control Controls are placed on a main switchboard, which is like a graphical version of a main menu Controls are placed on a main switchboard, which is like a graphical version of a main menu

Avicenna System Analysis and Design System Design24 Sequence Summary In this Sequence we have In this Sequence we have Explained the basic principles of user-centered design Explained the basic principles of user-centered design Described user interface design eight basic principles Described user interface design eight basic principles Listed specific guidelines for user interface design, which suggested that you focus on basic objectives, make the interface easy to learn and use, provide features that promote efficiency, make it easy for users to obtain help and correct errors, minimize input data problems, provide feedback to users, create an attractive layout and design, and use familiar terms and images Listed specific guidelines for user interface design, which suggested that you focus on basic objectives, make the interface easy to learn and use, provide features that promote efficiency, make it easy for users to obtain help and correct errors, minimize input data problems, provide feedback to users, create an attractive layout and design, and use familiar terms and images Described user interface techniques, including screen elements and controls Described user interface techniques, including screen elements and controls Described the main point in Evaluating User Interfaces Described the main point in Evaluating User Interfaces

Avicenna System Analysis and Design System Design25 Reference [1] System Analysis and Design, Sixth Edition Authors: Gary B. Shelly, Thomas J. Cashman and Harry J. Rosenblatt Authors: Gary B. Shelly, Thomas J. Cashman and Harry J. Rosenblatt Publisher: SHELLY CASHMAN SEWIES. Publisher: SHELLY CASHMAN SEWIES. [2] system analysis and design, sixth edition Authors: Kenneth E. Kendall and Julie E. Kendall Authors: Kenneth E. Kendall and Julie E. Kendall Publisher: Prentice Hall Publisher: Prentice Hall [3] Modern Systems Analysis and Design Third Edition Authors: Jeffrey A. Hoffer, Joey F. George, Joseph S. Valacich Authors: Jeffrey A. Hoffer, Joey F. George, Joseph S. Valacich Publisher: prentice hall Publisher: prentice hall