Chapter 2 System Design Phase - Part 3

7/31/2019 Chapter 2 System Design Phase - Part 3

1/43

1


2/43

Data Dictionary Guidelines for user interface design

Designing data entry screen Examples of good and bad interface

design.

2


3/43

A data dictionary, as defined in theIBM Dictionary of Computing is a"centralized repository of

information about data such asmeaning, relationships to other data,origin, usage, and format.

You may follow the format on nextpage for preparing data dictionary

3


4/43

4

Data Dictionary Template:


5/43

5

Example of Data Dictionary:


6/43

It is important to design a user interfacethat is easy to use, attractive, andefficient.

When you create a user interface, youshould follow 7 basic guidelines:

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

2. Provide features that promote efficiency

3. Make it easy for user to obtain help or correcterrors.

4. Minimize input data problems

5. Provide feedback to users

6. Create an attractive layout and design 6


7/43

Label clearly all controls, buttons andicons

If use images to identify icons or controls,

select only those images that users canunderstand easily.

E.g

7

Among the 3 control buttons shown, onlythe printer image has an obvious meaning.


8/43

Provide on-screen instructions that are logical,concise and clear.

E.g:

8


9/43

Disable any commands that are notcurrently available.

E.g

9


10/43

Organize tasks, commands, and functionsin groups that resemble actual businessoperations.

Group functions and submenu items in amultilevel menu hierarchy that is logicaland reflects how user typically performthat tasks.

E.g

10

Main Menu

Customers

Add new Customer

Delete a Customer

Update Customer Data

Orders

Enter a New Order

Cancel an Order

Modify Order Data

Products

Enter a New Product

Delete a Product

Update Product Data


11/43

Create combo box list item inalphabetical order, example:

11

VS

Better, sorted! Unsorted, Difficult

for user to select


12/43

Provide shortcuts for experiencedkeyboard user for faster user input.

Chapter 3 System Design Phase 12

Take a look at the

controls, most of them

have mnemonic key

(Underlined Letter) for

faster input by

keyboard user.


13/43

Ensure that Help is alwaysavailable. Help screenshould provide

information about menuchoices, procedures,shortcuts, and errors.

13

Include contact information, such as a

telephone number or email address if adepartment or Help desk is responsiblefor assisting users.

Require user confirmation before data

deletion


14/43

A. List of predefined values. Establish a list of predefined

values that users can click to

select. Predefined values prevent

spelling errors, avoidinappropriate data in a field,

and make user job easier. Example:

Provide a list of predefined valuesfor states in Malaysia.

Provide a list of predefined values 14


15/43

B. Build in rules Examples:

1. If the user tries to enter an order for a

new customer, the customer must beadded before the system will accept theorder data.

2. The system can automatically determinedelivery charges based on distance ofbuyers address and total sales made.

15


16/43

Display messages at a logical place onthe screen, and be consistent.

Let the user know whether the task or

operation was successful or not. For example: use message such as

Member details updated,

Customer ID not found, Customer record deleted.

16


17/43

Use message that are specific,understandable, and professional.

Avoid messages that are cute, cryptic, or

vague, such as Aiyo! You have entered an unacceptable

value oh., or

Error DE 4-16.

Better examples are: Exam mark should be between 0 to 100.

Quantity should be number.

17


18/43

vs

E.g :


19/43

Use appropriate colours to highlightdifferent areas of the screen; avoidgaudy and bright colours.

Group related objects and information.Group similar tasks that user will performin a group.

Display titles, messages, and instructionsin a consistent manner and in a 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.

19


20/43


21/43


22/43

Ensure that commands always will havethe same effect.

For example: if the BACKbutton return a

user to the prior screen, the BACKbuttonalways should perform the functionthroughout the application.

22


23/43

Provide a keystroke alternative for eachmenu items, with easy-to-rememberletters, such as File, Exit, Help.

Avoid complex terms and technical jargon;instead, select terms that come fromeveryday business processes andvocabulary of a typical user.

23


24/43

The following guidelines will help youdesign data entry screens that are easyto learn and use:

1. Provide a descriptive caption for every field, andshow user where to enter the data and therequired or maximumlength field size.

2. Display a sample format if user must enter valuesin a field with a specific format.

E.g: date of birth format is DDYYMMM.1. Display default values so user can press ENTER to

accept the suggested value.2. Use combo box whenever possible to let user

select from a predefined list of values to reduceinput error or inconsistency. 24


25/43

5. Allow users to add, change, delete and view records.Messages such as Apply these changes? orDelete this record? should require users to confirmthe actions.

25


26/43

Figure 1: ambulance-dispatching company system

26


27/43

Here is what is wrong with the screen Too many buttons.

The buttons along the right should be on theapplication's parent window, possibly in a

toolbar, but not on this child window.

27


28/43

Poor navigational assistance. GUI controls should be positioned according to frequency

of use. The most important field should be in the upper left; the

least important field should be in the lower right.

It's hard to imagine how the company and invoicenumber could be the most important fields whendispatching an ambulance.

Chapter 3 System Design Phase 28


29/43

Figures 2 and 3 show a much improved interfacefor this same application:

29Figure 2: Billing User Interface


30/43

Figure 3: Dispatch User Interface

30


31/43


32/43


33/43


34/43


35/43


36/43


37/43


38/43


39/43

Unclear labels on the buttons (Bad) Save button could possibly update the fields but

keep the form open. Close could save the fields, then close the form,

when the Cancel button may be more appropriate.


40/43

OK. Close the form and save any changed data. Cancel. Close the form without saving. Close. This should only be displayed if no data

has and will been changed in the form's currentlifetime.

Apply. Save data without closing the form.


41/43


42/43


43/43

Week Activities /Documentation to be completed / presented

4-5 Data Flow Diagram (DFD)

6-7

Database designo ERDo 3NFo Data dictionary

8 UI - Screen layouts (presentation using LCDProjector)

Documents

Chapter 2 System Design Phase - Part 3