SYSTEM DESIGN-UNDERSTAND USER INTERFACE DESIGN

DFC40243: SYSTEM ANALYSIS & DESIGN

CHAPTER 4: SYSTEM DESIGN

SESSION 2 2022/2023

Learning Outcome

4.1 Apply user interface design:

At the end of this subchapter, students should able to:

4.1.1 Explain the concept of user interface design and human computer interaction, including basic principles of user centered design

4.1.2 List user interface design guidelines

4.1.3 Describe user interface components, including screen elements and controls.

4.1.4 Describe source documents.

System Design is the third of five phase in the system development life cycle

Now you will work on a physical design that will meet the specifications described in the system requirements document

Deliverable is system design specification

Tasks will include user interface design, data design and system architecture

A system is effective if it supports business requirements and meets user needs

A system is reliable if it handles input errors, processing errors, hardware failures, or human mistakes

A system is maintainable if it is flexible, scalable, and easily modified

ARE YOU READY TO KNOW MORE ABOUT USER INTERFACE????

4.1.1 Explain the concept of user interface design and human computer interaction, including basic principles of user centered design

4.1.2 List user interface design guidelines

4.1.3 Describe user interface components, including screen elements and controls.

4.1.4 Describe source documents

4.1.1 Explain the concept of user interface design and human computer interaction, including basic principles of user centered design

Basic Principles of a User-centered Design

INTRODUCTION

WHAT IS UI?

WHAT IS HUMAN COMPUTER INTERACTION (HCI)

4.1.1 Explain the concept of user interface design and human computer interaction, including basic principles of user centered design

the first task in the systems design phase of SDLC

Designing the interface is extremely important because everyone wants a system that is easy to learn and use

4.1.1 Explain the concept of user interface design and human computer interaction, including basic principles of user centered design

let's watch the video first...

4.1.1 Explain the concept of user interface design and human computer interaction, including basic principles of user centered design

User Interface (UI)

describes how users interact with a computer system and consists of all the hardware, software, screens, menus, functions, output, and features that affect two-way communications between the user and the computer.

WHAT IS UI

• the user interface mainly consisted of process-control screens that allowed the user to send commands to the system.

Evaluation of the UI

• User-centered system

• As information management evolved from centralized data processing to dynamic, enterprise-wide systems, the primary focus also shifted-from the IT Department to the users themselves

• Requires an understanding of human-computer interaction and user-centered design principles

4.1.1 Explain the concept of user interface design and human computer interaction, including basic principles of user centered design

• HCI describes the relationship between computers and people who use them to perform their jobs/tasks

What is Human- Computer Interaction

• graphical user interface (GUI)

• Main objective is to create a user-friendly design that is easy to learn and use

4.1.1 Explain the concept of user interface design and human computer interaction, including basic principles of user centered design

4.1.1 Explain the concept of user interface design and human computer interaction, including basic principles of user centered design

• Understand the business

• Maximize graphical effectiveness

• Think like a user

Basic Principles of a User-centered Design

• Use models and prototypes

• Focus on usability

• Invite feedback

• Document everything

4.1.2 List user interface design guidelines

1. Create an interface that is easy to learn and use

2. Enhance user productivity

10 User Interface Design Guidelines

3. Provide Flexibility

4. Provide Users with Help and Feedback

5. Create an attractive layout and design

6. Provide feedback to users

7. Enhance the Interface

8. Use Validation Rules

9. Manage Data Effectively

10. Reduce Input Volume

4.1.2 List user interface design guidelines

1. Create an Interface that is Easy to Learn and Use

Select only those images that users can understand easily, ad provide on-screen instructions that are logical, concise and clear

Clearly label all controls, buttons and icons

Provide commands, actions, and system responses that are consistent and predictable

Focus on system design objectives, rather than calling attention to the interface.

Create a design that is easy to understand and remember.

Show all commands in a list of menu items

Allow users to correct errors easily

Make it easy to navigate

4.1.2 List user interface design guidelines

2. Enhance User Productivity

Create alphabetical menu lists

Organize tasks, commands and functions in groups that resemble actual business operations

Provide shortcuts so experiences users can avoid multiple menu levels

Use default values if the majority of values in a field are the same

4.1.2 List user interface design guidelines

2. Enhance User Productivity (cont.)

consider a natural language feature that allows users to type commands or requests in normal text phrases. Natural language technology is used in speech recognition systems, text-to-speech synthesizers, automated voice response systems, web search engines, text editors, and language instruction materials

Use a duplicate value function that enables users to insert the value from the same field in the previous record, but allow users to turn this feature on or off as they prefer.

Provide a fast-find feature that displays a list of possible values as soon as users enter the first few letters

4.1.2 List user interface design guidelines

3. Provide Flexibility

Suppose that a user wants a screen display of all customer balances that exceed $5,000 in an accounts receivable system. How should that feature be designed? The program could be coded to check customer balances against a fixed value of 5000, which is a simple solution for both the programmer and the user because no extra keystrokes are required to produce the display.

• A better approach would be to let the user enter the amount.
• Or start with a default value that displays automatically.
• Users can press ENTER to accept the value or type

in another value.

• Often the best design strategy is to offer several alternatives, so users

can decide what will work best for them.

4.1.2 List user interface design guidelines

4. Provide Users with Help and Feedback

make Help easy to find but not around when users don’t need it.

Ensure that help is always available on demand.

Provide user-selected help and context-sensitive help. User-selected help displays information when the user requests it. .

Provide a direct route for users to return to the point from where help was requested.

Include contact information, such as a telephone extension or email address if a department or help desk is responsible for assisting users.

Require user confirmation before data deletion (Are you sure?) and provide a method of recovering data that is deleted inadvertently. Build in safeguards that prevent critical data from being changed or erased.

Provide an “Undo” key or a menu choice that allows the user to undo the results of the most recent command or action.

4.1.2 List user interface design guidelines

4. Provide Users with Help and Feedback (cont.)

When a user-entered command contains an error, highlight the erroneous part and allow the user to make the correction without retyping the entire command.

Use hypertext links to assist users as they navigate help topics.

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 the screen long enough for users to read them.

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 are specific, understandable, and professional.

4.1.2 List user interface design guidelines

Use appropriate colors to highlight different areas of the screen

Use special effects sparingly

Ensure that commands always will have the same effect.

Group related objects and information

5. Create an Attractive Layout and Design

Use hyperlinks that allow users to jump to related topics

Provide a Windows look and feel in the interface design if users are familiar with Windows-based applications.

4.1.2 List user interface design guidelines

The starting point can be a switchboard with well-placed command buttons that allow users to navigate the system.

Use a command button to initiate an action such as printing a form or requesting help.

6. Enhance the Interface

If a software package is being used, check to see if it allows the creation of customized menu bars and toolbars.

A toggle button makes it easy to show on or off status—clicking the toggle button switches to the other state

If variable input data is needed, provide a dialog box that explains what is required.

4.1.2 List user interface design guidelines

A toggle button makes it easy to show on or off status—clicking the toggle button switches to the other state.

6. Enhance the Interface (cont.)

Use list boxes that display the available choices.

If the list does not fit in the box, a scroll bar allows the user to move through the available choices. A

Use an option button, or radio button, to control user choices.

If check boxes are used to select one or more choices from a group, show the choices with a checkmark or an X.

When dates must be entered, use a calendar control that allows the user to select a date that the system will use as a field value.

4.1.2 List user interface design guidelines

7. Focus on Data Entry Screens

Whenever possible, use a data entry method called form filling, where a blank form that duplicates or resembles the source document is completed on the screen

Provide a descriptive caption for every field, and show the user where to enter the data and the required or maximum field size.

Restrict user access to screen locations where data is entered.

Provide a way to leave the data entry screen at any time without entering the current record, such as a “Cancel” button.

Provide a means for users to move among fields on the form in a standard order or in any order they choose.

Design the screen form layout to match the layout of the source document.

Allow users to add, change, delete, and view records.

4.1.2 List user interface design guidelines

7. Focus on Data Entry Screens (cont.)

Display a sample format if a user must enter values in a field in a specific format.

Require an ending keystroke for every field. Pressing the Enter key or the Tab key should signify the end of a field entry.

.In addition to the sample format in the preceding rule, it might be better to use an input mask, which is a template or pattern that restricts data entry and prevents errors.

Do not require users to type leading zeroes for numeric fields.

Use a default value when a field value will be constant for successive records or throughout the data entry session.

Display default values so operators can press the Enter key to accept the suggested value.24

Do not require users to type trailing zeroes for numbers that include decimals.

4.1.2 List user interface design guidelines

Reducing input errors improves data quality. One way to reduce input errors is to eliminate unnecessary data entry.

8. Use Validation Rules

1. A sequence check can be used when the data must be in some predetermined . If the user must enter work orders in numerical sequence, for example, then an out-of-sequence order number indicates an error, or if the user must enter transactions chronologically, then a transaction with an out-of-sequence date indicates an error. d list

2. An existence check can apply to mandatory data items. For example, if an employee record requires a Social Security number, an existence check would not allow the user to save the record until he or she enters a suitable value in the Social Security number field.

3. A data type check can test to ensure that a data item fits the required data type. For example, a numeric field must have only numbers or numeric symbols, and an alphabetic field can contain only the characters A through Z (or a through z).

4. A range check can be used to verify that data items 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.

5. A reasonableness check identifies values that are questionable but not necessarily wrong. For example, input payment values of $0.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 0 to 24 range check; however, the value seems unusual, and the system should verify it using a reasonableness check.

4.1.2 List user interface design guidelines

Reducing input errors improves data quality. One way to reduce input errors is to eliminate unnecessary data entry.

8. Use Validation Rules (cont.)

6. A validity check can be 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,

7. A combination check is performed on two or more fields to ensure that they are consistent or reasonable when considered together. Even though all the fields involved in a combination check might pass their individual validation checks, the combination of the field values might be inconsistent or unreasonable. For example, if an order input for 30 units of a particular item has an input discount rate applicable only for purchases of 100 or more units, then the combination is invalid; either the input order quantity or the input discount rate is incorrect.

8. Batch controls are totals used to verify batch input. Batch controls might check data items such as record counts and numeric field totals. For example, 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.

4.1.2 List user interface design guidelines

9. Manage Data Effectively

Data management impacts company efficiency, productivity, and security.

To reduce input errors, the system should enter and verify data as soon as possible, and each data item should have a specific type, such as alphabetic, numeric, or alphanumeric, and a range of acceptable values.

It is important to collect input data as close to its source as possible.

For instance, using barcode scanners rather than manual forms on a warehouse freight dock, or having salespeople use tablets to record orders rather than filling in source documents.

the easiest, most accurate, and least expensive data input strategy is automated data capture

In an efficient design, data is entered only once. For example, if input data for a payroll system also is needed for a human resources system, the analyst could design an interface to transfer data automatically, or a central data storage area could be created that both systems can access.

4.1.2 List user interface design guidelines

10. Reduce Input Volume

When input volume is reduced, unnecessary labor costs are avoided, which in turn gets the data into the system more quickly and decreases the number of errors.

Therefore, the analyst should start by reducing the number of data items required for each transaction.

1. Input necessary data only. Do not input a data item unless it is needed by the system. A completed order form, for example, might contain the name of the clerk who took the order. If that data is not needed by the system, the user should not enter it.
2. Do not input data that the user can retrieve from system files or calculate from ther data. This reduces input errors and data inconsistencies.
3. Do not input constant data. If orders are in batches with the same date, then a user should enter the order date only once for the first order in the batch. If orders are entered online, then the user can retrieve the order date automatically using the current system date.
4. Use codes. Codes are shorter than the data they represent, and coded input can reduce data entry time.

4.1.3 Describe user interface components, including screen elements and controls.

User Interface User Interface Components – Screen Elements and Controls

Menu bar

Toolbar

Command Button

Dialog box

Text box

Toggle buttton

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

4.1.3 Describe user interface components, including screen elements and controls.

User Interface User Interface Components – Screen Elements and Controls

list box – scroll bar

Drop-down list box

Option button or radio button

switchboard

data entry screen

Check box

Calendar control

switchboard

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

4.1.3 Describe user interface components, including screen elements and controls.

User Interface User Interface Components – Screen Elements and Controls

The menu bar at the top of the screen displays the main menu options. Some software packages allow you to create customized menu bars and toolbars.

A command button initiates an action such as printing a form or requesting help. For example, when a user clicks the Find Student command button in Figure 8-16, a dialog box opens with instructions, as shown in Figure 8-17.

4.1.3 Describe user interface components, including screen elements and controls.

User Interface User Interface Components – Screen Elements and Controls

A list box displays a list of choices that the user can select. If the list does not fit in the box, a scroll bar allows the user to move through the available choices.

A dialog box allows a user to enter information about a task that the system will perform.

A text box can display messages or provide a place for a user to enter data.

A drop-down list box displays the current selection; when the user clicks the arrow, a list of the available choices displays.

A toggle button is used to represent on or off status — clicking the toggle button switches to the other status.

4.1.3 Describe user interface components, including screen elements and controls.

User Interface User Interface Components – Screen Elements and Controls

An option button, or radio button, represents one choice in a set of options. The user can select only one option at a time, and selected options show a black dot.

A calendar control allows the user to select a date that the system will use as a field value.

A check box is used to select one or more choices from a group. Selected options are represented by a checkmark or an X.

4.1.3 Describe user interface components, including screen elements and controls.

User Interface User Interface Components – Screen Elements and Controls

• Avoid distracting background elements

• Page length

• Balance of type and open space.

• Hard coding

• Style sheets

• Design for Internet appliances.

• Animation & graphic elements.

• Hand eye coordination

• Navigation bars & links

• Paragraph alignment

• Links

4.1.3 Describe user interface components, including screen elements and controls.

User Interface User Interface Components – Screen Elements and Controls

a) Color Selection: Designers often use a color wheel, a tool that arranges the colors of the spectrum by their properties.

b) colors to avoid: A safe approach is to keep colors bright and bold. It is usually in the low saturation levels (very pale or very dark) that cause difficulties for users with color deficiencies

c) Contrast: The ability to distinguish lightness deteriorates as we age, increasing the need for contrast between foreground and background colors. As a rule use dark type on light or white backgrounds.

4.1.3 Describe user interface components, including screen elements and controls.

User Interface User Interface Components – Screen Elements and Controls

a) Legibility: Use consistent typefaces and fonts throughout your site by applying style sheets, pre-setting formatting in body text, header, bullet and title applications.

b) Size : 12 to 14 points are recommended font sizes for copy while headlines and titles are typically two points larger. (24)

c) Typefaces : serif and san serif. Examples of serif fonts include Times New Roman as used in this document or Courier and Century Schoolbook. Sans Serif (without serifs) includes fonts such as Arial and Verdana.

c) Type weight: Many typefaces are available in family sets: light, bold, italic, condensed and extra bold. Limiting the use of bold to emphasize a title or a key word.

4.1.3 Describe user interface components, including screen elements and controls.

User Interface User Interface Components – Screen Elements and Controls

f) Use of all capital letters: This provides contrast from the body copy, will increased readability. For example “A Guide for Effective Web Design for Users of All Ages” vs. “A GUIDE FOR EFFECTIVE WEB DESIGN FOR USERS OF ALL AGES”.

d) Kerning : Kerning refers to the adjustment of space between letters in a word. the space between a capital A and lower case letters often needs to be kerned to make the space smaller.

e) Leading : The space between each line of text. The leading specified is 2 points larger than the typeface.

4.1.4 Describe source documents

• A source document collects input data, triggers or authorizes an input action, and provides a record of the original transaction.

SOURCE DOCUMENTS

• Source documents generally are paper-based, but also can be provided online. Either way, the design considerations are the same.

• During the input design stage, you develop source documents that are easy to complete and use for data entry.

4.1.4 Describe source documents

SOURCE DOCUMENTS

• A source document collects input data, triggers or authorizes an input action, and provides a record of the original transaction.

• During the input design stage, you develop source documents that are easy to complete and use for data entry.

• Source documents generally are paper-based, but also can be provided online. Either way, the design considerations are the same

• Good form layout makes the form easy to complete and provides enough space, both vertically and horizontally, for users to enter the data.

• A form should indicate data entry positions clearly using blank lines or boxes and descriptive captions. Figure 8-28 shows several techniques for using line and boxed captions in source documents, and an example of check boxes, which are effective when a user must select choices from a list.

• The placement of information on a form also is important.

4.1.4 Describe source documents

SOURCE DOCUMENTS

• The heading zone usually contains the company name or logo and the title and number of the form.

• The control zone contains codes, identification information, numbers, and dates that are used for storing completed forms.

• The instruction zone contains instructions for completing the form.

• The main part of the form, called the body zone, usually takes up at least half of the space on the form and contains captions and areas for entering variable data.

• If totals are included on the form, they appear in the totals zone.

• Finally, the authorization zone contains any required signatures.

GROUP ACTIVITY- DISCUSSION

IN 10 MINUTES.... (A) LIST THE 10 GUIDELINES OF USER INTERFACE DESIGN (by using i-think map) (B) GIVE ONE EXAMPLE OF EACH GUIDELINE (picture)

THANK YOU!