CHAPTER 4 : SYSTEM DESIGN
PART 1
CONCEPT OF USER INTERFACE DESIGN
(Slide 5 - 9)
What is a User Interface (UI)?
(slide 5-6)
Slide 5 (Jazrin)
- UI is how users interact with a computer system.
- Consist all of hardware, software, screens, menus, functions, output and features that affect two-way communications between the user & the computer.
BASIC PRICIPLES OF USER-CENTERED DESIGN
(Slide 10 - 27)
USER INTERFACE DESIGN GUIDELINES
(Slide 30 - 55)
USER INTERFACE COMPONENTS, SCREEN ELEMENTS AND CONTROLS
(Slide 55 - 89)
PRINCIPLE 5: FOCUS ON USABILITY
(Slide 23 - 25)
Slide 23(Jazrin)
User Interface should include all task, command and communications between users and the information system
STEP 4 : MAKE IT EASY FOR USERS TO OBTAIN HELP / CORRECT ERRORS
(Slide 38 - 40)
Slide 38 (Jazrin)
- Provide direct route for user to return to the point from where help was
requested. - Require user confirmation before data deletion and provide a method of recovering data that is deleted inadvertently.
- Provide a Undo key / a menu choice that allows the user to eradicate the results of the most recent command or action.
- Highlight the erroneous
part & allow the user to make the correction without retyping the entire
command. - Use hypertext links to assist users as they navigate help topics.
STEP 10 : REDUCE INPUT VOLUME
(Slide 53 - 54)
Slide 54 (Jazrin)
- Unnecessary labor costs are avoided which in
turn gets the data into the system more quickly & decreases the number of
errors. - The analyst should start by reducing the number of data items
required for each transaction.
INPUT CONTROLS
(Slide 61 - 70)
Slide 69 (Jazrin)
Text FIelds
- Allow users to enter text. It can allow either a
single line / multiple lines of text.
SOURCE DOCUMENTS & FORMS
(Slide 84 - 89)
Slide 84 (Jazrin)
- A source document collects input data,
triggers / authorizes an input action & provides a record of the original transaction. - During the input design stage, develop
source documents that are easy to complete
and use for data entry
PART 2
INPUT DESIGN
(Slide 10 - 44)
OUTPUT DESIGN
(Slide 46 - 67)
OUTPUT CONTROL & SECURITY
(Slide 69 - 70)
INPUT CONTROLS & SECURITY
(Slide 71 - 72)
Slide 26 (Jazrin)
COMMON EXAMPLES OF SOURCE DATA AUTOMATION:
- Businesses that use point-of-sale (POS)terminals equipped with bar code
scanners and magnetic swipe scanners to input credit card data. - Automatic teller machines (ATMs) - read data strips on bank cards.
- Factory employees who use magnetic ID cards to clock on and off specific jobs so the company can track production costs accurately.
- Hospitals that imprint bar codes on patient identification bracelets & use
portable scanners when gathering data on patient treatment and medication. - Retail stores that use portable bar code scanners to log new shipments
and update inventory data. - Libraries that use handheld scanners to read optical strips on books.
VALIDATION RULES
(SLIDE 29 - 44)
Slide 43 (Jazrin)
Batch controls:
- Are totals used to verify batch input.
- Might check data items such as record counts and numeric field totals.
Examples: before entering a batch of orders, a user might calculate the total number of orders and the sum of all the order quantities.
When the batch of orders is entered, the order system also calculates the same two totals.
*If the system totals do not match the input totals then a data entry error has occurred.
REPORT DESIGN PRINCIPLES
(Slide 55 - 65)
SLIDE 60 (Jazrin)
PAGE HEADER:
- Appears at the top of the page and includes the column headings that identify the data.
- Headings should be short but
descriptive. - Avoid abbreviations unless you know that users will understand them clearly.
PAGE FOOTER:
- Appears at the bottom of
the page. - Used to display the report title and the page number.
Slide 22 (Haziq)
FOCUS ON USABILITY
User interface should include all tasks commands and communications between users and system
Slide 39 (Haziq)
- Display messages at a logical place on the screen, and be consistent.
- Alert users to lengthy processing times or delays.
- Allow messages to remain on screen long enough for users to read.
- Let user know if interaction is successful.
- Provide a text explanation if an icon or image is used on a control button.
- Use messages that arc specific, understandable, and professional.
Slide 53 (Haziq)
- Input necessary data only.
- Do not input data that the user can retrieve from system files or calculate from
other data. - Do not input constant data.
- Use code. Reduce data input entry tine.
Slide 70 (Haziq)
Date and time pickers
- Allow users to select a date and/or time.
Slide 85 (Haziq)
Source Documents and Forms
- Source documents generally are paper-based,
but also can be provided online.
Slide 27 (Haziq)
INPUT DESIGNS
[INPUT MASKS]
- Definition; template or patterns that restrict data entry hence preventing errors
- You may create custom input masks for any type of data
- A mask can manipulate input data and apply specific format.
Slide 44 (Haziq)
BATCH CONTROLS
- Do not identify specific errors.
- The batch control totals often are called hash totals, because they are not meaningful numbers themselves, but are useful for comparison purposes
Slide 61 (Haziq)
OUTPUT DESIGN - REPORT DESIGN PRINCIPLES
- Column heading alignment
- Four different column heading alignment options
PRINCIPLE 3 : THINK LIKE A USER
SLIDE 17(WARDINA)
- User will expect useful & understandable feedback from a computer system
STEP 2 : ENHANCE USER PRODUCTIVITY (SLIDE 32 - 35)
SLIDE 34(WARDINA)
- Provide a fast-find feature that displays a list of possible values as soon as users enter the first few letters
- Provide default values for the values that hold majority value
STEP 6 : ENHANCE THE INTERFACE
(SLIDE 45 - 49)
SLIDE 49(WARDINA)
- Use list boxes to display available choices
- Use button such as radio / option button to control choices
- For check boxes, show the choices /checkmark / an X
- Use calendar control for date
SLIDE 65 (WARDINA)
Buttons
- an action upon touch
- typically lebeled using text / icon / both
INFORMATION COMPONENTS
(SLIDE 78 - 82)
WARDINA(SLIDE 80)
Tool Tips
- allows user to see hints when they hover over an item indicating the name / purpose of the item
Data Entry Screen Design Guideline
(SLIDE 14 -19)
WARDINA (SLIDE 15)
- Display a sample format if a user must enter values in a field in a specific format
- Use ending keystroke where press enter key indicate the end of the field entry
SLIDE 31(WARDINA)
Sequence Check
- used when data must be in some predetermined sequence
OUTPUT TYPES & TECHNOLOGIES
(SLIDE 46 - 48)
SLIDE 48(WARDINA)
Output Technologies
- Internet-based information delivery
- Blogs
- Instant Messaging
- Wireless Devices
- Digital audio, images & video
- Podcasts
- Automated fax systems
- Computer output to digital media
SLIDE 65(WARDINA)
- REPEATING FIELDS
- be aware & avoid it
- user involvement is essential
- ask users what they think and be guided accordingly
- CONSISTENT DESIGN
- report looks uniform & consistent
- for system that produces multiple reports, each report should share common design elements
- abbreviations should be consistent
PRINCIPLE 1: Understand the Business
Slide 12 (Anding)
- Understand the underlying business functions and how the system supports individual, departmental, and enterprise goals.
- Starting point : Analyse a functional decomposition diagram (FDD)
- An FDD can provide a checklist of user tasks that you must include in the interface design.
STEP 1: Create an Interface that Is Easy to Learn and Use
Slide 30 (Anding)
Clearly label all controls, buttons, and icons
Select only those images that users can understand easily, and provide on-screen instructions that are logical, concise, and clear. Users become very frustrated when they see images or messages that are confusing or misleading.
Make it easy to navigate or return to any level in the menu structure.
Slide 45 (Anding)
The opening screen is especially important because it introduces the application and allows users to view the primary options.
The starting point can be a switchboard with well-placed command buttons that allow users to navigate the system.
Slide 61 (Anding)
Checkboxes
- Checkboxes allow the user to select one or more options from a set.
- More than one column is acceptable as well if the list is long enough that it might require scrolling or if comparison of terms might be necessary.
NAVIGATIONAL
COMPONENTS
(Slide 70 - 77)
Slide 76 (Anding)
Icons
- An icon is a simplified image serving as an intuitive symbol that is used to help users to navigate the system.
- Typically, icons are hyperlinked.
Anding (Slide 19)
- Design the screen form layout to match the layout of the source document. If the source document fields start at the top of the form and run down in a column, the input screen should use the same design.
- Provide a method to allow users to search for specific information
Data Type Check
Slide 35 (Anding)
Types Of Report
(Slide 50 - 53)
Slide 52 (Anding)
Exception reports
- Displays only those records that meet a specific condition or conditions. It is useful when the user wants information only on records that might require action, but does not need to know the details.
Slide 70 (Anding)
Output security protects privacy rights and shields the organization’s proprietary data from theft or unauthorized access.
To ensure output security, you must perform several important tasks:
- limit the number of printed copies and use a tracking procedure to account for each copy.
- When printed output is distributed from a central location, you should use specific procedures to ensure that the output is delivered to authorized recipients only.
click to edit
Slide 9 (Cath)
Human-Computer
Interaction
- A graphical user interface (GUI), which was a huge improvement, because it used icons, graphical objects, and pointing devices
Slide 27 (Cath)
Conclusion
By applying basic user-centered design principles, a systems analyst can plan, design, and deliver a successful user interface.
STEP 5: CREATE AN ATTRACTIVE LAYOUT AND DESIGN
(SLIDE 40-44)
Slide 43 (Cath)
- When the user enters data that completely fills the field, do not move automatically to the next field. Instead, require the user to confirm the entry by pressing the Enter key or Tab key
at the end of every fill-in field. - Remember that users are accustomed to a pattern of red = stop, yellow = caution, and green = go. Stick to that pattern and use it when appropriate to reinforce onscreen
instructions. - Provide a keystroke alternative for each menu command, with easy-to-remember letters, such as File, Exit, and Help.
CONTROL FEATURES
(Slide 57-60)
Slide 59 (Cath)
Slide 74 (Cath)
Tags
- Tags allow users to find content in
the same category. - Some tagging systems also allow
users to apply their own tags to content by entering them into the
system.
Data Capture vs Data Entry
Slide (20-21)
Slide 21 (Cath)
Data entry involves converting source data into a computer-readable form and entering it into the
system.
New technology offers:
- optical and voice recognition
systems, - biological feedback devices,
- motion sensors, and
- a variety of graphical input
devices.
Reasonableness Check
(Slide 38-39)
- A reasonableness check identifies values that are questionable, but not
necessarily wrong. - For example, input payment values of $.05 and $5,000,000.00 both pass a simple limit check for a payment value greater than zero, and yet both values could be errors.
- Similarly, a daily hours worked value of 24 passes a 0 to 24 range check; however, the value seems unusual, and the system should verify it using a reasonableness check.
Slide 39
Slide 38 (Cath)
Output Design – User Involvement
Slide 54 (Cath)
User Involvement in Report Design
- Printed reports are an important way of delivering information, so users should approve all report
designs in advance - Submit each design for approval as you complete it, rather than waiting until you finish all report
designs - Mock-up / prototype – sample report
- Report analysis form
Slide 72 (Cath)
- Data security policies and procedures protect data from loss or damage.
- Data recovery utilities should be able to restore lost or damaged data.
- The company should have a records retention policy that meets all legal requirements and business needs.
Slide 11 (Dominic)
- 7 Principle of used centered design
Slide 29 (Dominic)
- 10 User Interface Design Guidelines
Slide 44 (Dominic)
5 Create an attractive layout and design
- Use familiar commands if possible, such as Cut, Copy, and Paste.
- Provide a Windows look and feel in your interface design if users are familiar with Windows based applications.
- Avoid complex terms and technical jargon ; instead, select terms that come from everyday business processes and the vocabulary of a typical user.
Slide 60 (Dominic)
click to edit
Slide 75 (Dominic)
Navigation Components: Sliders
- A slider, also known as a track
bar, allows users to set or adjust a value. - When the user changes the value, it does not change the format of the interface or other info on the screen.
Slide 20 (Dominic)
Data Capture vs Data Entry
- During input design, you determine how data will be captured and entered into the system
- Data capture which may be automated, involves identifying and recording source data.
Slide 36 (Dominic)
Range check
- A range check tests data items to verify that they fall between a specified minimum and maximum value.
- The daily hours worked by an employee, for example, must fall within the range of 0 to 24. When the validation check involves a minimum or a maximum value, but not both, it is called a limit check .
- Checking that a payment amount is greater than zero, but not specifying a maximum value, is an example of a limit check.
Slide 53 (Dominic)
Summary Report
- Displays the summary, e.g. Upper level managers often want to see total figures and do not need supporting details.
Slide 71 (Dominic)
Input Controls And Security
- Input controlincludes the necessary measures to ensure that input data is correct, complete, and secure.
- You must focus on input control during every phase of input design, starting with source documents that promote data accuracy and quality.
- Every piece of information should be traceable back to the input data that produced it. That Every piece of information should be traceable back to the input data that produced it. That
means that you must provide an audit trail that records the source of each data item and when it entered the system. - All source documents that originate from outside the organization should be logged whenthey are received.
- The forms of input controls are check digits, data validation, control totals and direct data entry procedures. entry procedures.
Sllide 60 (Dominic)
* Control Features
Use Models and Prototypes
Mauldorna(Slide 18)
construct models and prototypes for
user approval.
Enhance User Producivity
Mauldorna(Slide 35)
Use a natural language
- allows
users to type commands or requests - requests in normal
English phrases
Mauldorna(Slide 50)
Step 7: Focus on Data Entry Screens
Data entry is important because :
- the job description of so many users.
- called form filling
Mauldorna (Slide 66)
Menu
displays the main menu options
Mauldorna(Slide 81)
Message Boxes
a small window :
- provides information to users
- requires them to take an action before they can move forward
Mauldorna (Slide 14)
Data Entry Screen Design Guideline
- Restrict user access to screen locations where data is entered.
- Provide a descriptive caption for every field, and show the user where to enter the data
Mauldorna(Slide 30)
Type of validation rules
- Sequence check
- Existence check
- Data type check
- Range check
- Reasonableness check
- Validity check
- Combination check
- Batch control
Mauldorna(Slide 47)
Output Types and Technologies
- Internet-Based Information Delivery
- Printed Reports
- Specialized Form of Output
Mauldorna (Slide 64)
Report Design Principles
Grouping detail lines:
- meaningful to arrange detail lines in groups
- using the department number as a control field
- individual employees can be grouped by department.
- You can print :
- a group header above the first detail line
- a group footer after the last detail line in a group.
slide 8 (gib)
⭐Human-Computer Interaction ⭐
A user interface includes all the communications and instructions necessary to enter input to the system and to obtain output in the form of screen displays or printed reports
slide 26(gib)
🚩Principle 7: Document Everything
• You should document all screen designs for later use by programmers.
• If you are using a CASE tool or screen generator, number the screen designs and save them in a hierarchy similar to a menu tree.
• User-approved sketches and storyboards also can be used to document the user interface.
slide 42 (gib)
• Screen density is important. Keep screen displays uncluttered, with enough white space to create an attractive, readable design.
• 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. Similarly, the same sound always should signal the same event.
Slide 58 (Gib)
• List box
– scroll bar
– Drop-down list box
– Option button, or radio button
– Check box
– Calendar control
– Switchboard
slide 73 (gib)
Pigination
Pagination divides content up between pages, and allows users to skip between pages or go in order through the content.
Slide 22(gib)
Input and Data Entry Method.
-Input methods should be cost-efficient, timely, and as simple as possible.
-Systems analysts study transactions and business operations to determine how and when data should enter the system.
-Usually, the first decision is whether to use: • BATCH or ONLINE input methods.
-Each method has advantages and disadvantages, and the systems analyst must consider the following factors.
Slide 40
Validation Rules- validity check
A validity check is used for data items that must have certain values. For example, if an inventory system has 20 valid item classes, then any input item that does not match one of the valid classes will fail the check.Verifying that a customer number on an order matches a customer number in the customer file is another type of validity check.Because the value entered must refer to another value, that type of check also is called referential integrity.
Slide 57 (gib)
• Printed reports must be attractive, professional, and easy to read.
• A control break usually causes specific actions, such as printing subtotals for a group of records. That type of detail report is called a control break report.
• To produce a control break report, the records must be arranged, or sorted, in control field order.
SLIDE 16(Shahrul)
PRINCIPLE 3 : Think Like a User
- Understand user experience, knowledge, and skill levels.
- To develop a user-centered interface, the designer must learn
to think like a user and see the system through a user’s eyes.
SLIDE 33(Shahrul)
Use a duplicate value function that enables users to insert the value from
the same field in the previous record.
SLIDE 48(Shahrul)
Use typography to create hierarchy and clarity.
SLIDE 64(Shahrul)
List boxes
- enables you to display a list of items to the user that the user can select by clicking.
- A ListBox control can provide single or multiple selections using the SelectionMode property.
SLIDE 79(Shahrul)
Progress Bars
a graphical element that illustrates the percentage of a computer task that is complete: The progress bar stopped moving when the program was about halfway downloaded.
Slide 16(Shahrul)
- Do not require users to type trailing zeroes for numbers that include decimals
SLIDE 32(Shahrul)
Existence check
An existence check is used for those data items which are mandatory.
SLIDE 49(Shahrul)
Output Design
- A specialized output device is an output device which is adapted for a particular purpose, such as use by a person who is disabled.
Portable, Web-connected devices that can run applications, handle multimedia output, and provide
powerful, multipurpose communication for users
SLIDE 66(Shahrul)
Output Design Design Report Principles
Computer outputs should be simple to read and interpret.
- Every report or output screen should have a title.
- Reports and screens should include section headings to segment large amounts of information
slide 7 (erik)
Human-Computer Interaction
- A user interface is based on basic principles of human-computer interaction.
- Human-computer interaction (HCI) describes the relationship between computers and people who use them to perform their jobs, like the worker.
- HCI concepts apply to everything from PC desktops to global networks.
slide 25(erik)
- Each screen option leads to another screen, with more options.
- The objective is to offer a reasonable number of choices that a user easily can comprehend.
- Too many options on one screen can confuse a user —but too few options increase the number of submenu levels and complicate the navigation process.
- Often, an effective strategy is to present the most common choice as a default, but allow the user to select other options.
slide 41 (erik)
- Use appropriate colors to highlight different areas of the screen; avoid gaudy and bright colors.
- 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.
slide 57 (erik)
USER INTERFACE COMPONENTS
- Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
- Navigational Components: breadcrumb, search field, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
- Containers: accordion
slide 72 (erik)
Search Field
- A search box allows users to enter a keyword or phrase (query) and submit it to search the index.
- Typically search fields are single-line text boxes and are often accompanied by a search button.
slide 89 (erik)
slide 23 (erik)
Batch Input.
- Using batch input, data entry usually is performed on a specified time schedule, such as daily, weekly, monthly, or longer.
- For example, batch input occurs when:
- A payroll department collects time cards at the end of the week and enters the data as a batch.
- A school that enters all grades for the academic term in a batch.
slide 41 (erik)
validity check
slide 58 (erik)
Report Design Principles
Good report design requires effort and attention to detail. To produce a well designed report, the analyst must consider design features such as:
- report headers and footers
- page headers and footers
- column headings and alignment
- column spacing
- field order
- grouping of detail lines
Slide 14
Slide 63( WAN)
Checkboxes
- Checkboxes allow to user to sleect one or more option form set.
- Best present in a verticals list
- More than one column is acceptable.
Slide 77 (WAN)
Sliders
- Allows user to set or adjust a value.
- When user changes the value, not the format of the screen.
Slide 18(WAN)
- Provide a way to leave the data entry screen at any time without entering the current record.
- Provide users with an opportunity to confirm the accuracy of input data before entering it by displaying a message.
- Provide a means for users to move among fields on the form in a standard order or in any order they choose.
Data type chech test to ensure that a data item fits the required
Slide 51(WAN)
DETAIL REPORT
- Produce one or more lines of output for each record processsed.
Slide 69(WAN)
Output Control
- Output must be accurate, complete, current and secure.
-Example, Appropriate title, report number or code. - Report should have a pages that are numbered consecutively.
- Control totals and record counts should be reconciled.
- Report should be selected at random for a thorough check of correctness and completeness.
slide 6 (ARIF)
A user interface, also called a "UI" or simply an "interface," is the means in which a person controls a software application or hardware device
A good user interface provides a " user-friendly " experience , allowing the user to interact with the software or hardware in a natural and intuitive way.
slide 24 (ARIF)
The screen in Figure 8-10 shows the main options for a student registration system
slide 40 (ARIF)
Make It Easy for Users to Obtain Help or Correct Errors
Display messages at a logical place on the screen, and be consistent.
Alert users to lengthy processing times or delays. Give users an on-screen
progress report, especially if the delay is lengthy.
Allow messages to remain on the screen long enough for users to read
them. In some cases, the screen should display messages until the user takes some action.
Let the user know whether the task or operation was successful or not.
Provide a text explanation if an icon or image is used on a control button.
Use messages that arc specific, understandable, and professional.
slide 71 (ARIF)
A date picker allows users to select a date and/or time. By using the picker, the information is consistently formatted and input into the system.
slide 86 (ARIF)
Source documents generally are paper-based,
but also can be provided online.
Either way, the design considerations are the
same