1

Data Dictionary Guidelines for user interface design Designing data entry screen Examples of good and bad interface design.

A data dictionary, as defined in the IBM Dictionary of Computing is a "centralized repository of information about data such as meaning, relationships to other data, origin, usage, and format. You may follow the format on next page for preparing data dictionary

Data Dictionary Template:

Example of Data Dictionary:

It is important to design a user interface that is easy to use, attractive, and efficient. When you create a user interface, you should 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 correct

errors. 4. Minimize input data problems 5. Provide feedback to users 6. Create an attractive layout and design

Label clearly all controls, buttons and icons If use images to identify icons or controls, select only those images that users can understand easily. E.g Among the 3 control buttons shown, only the printer image has an obvious meaning.

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

Disable any commands that are not currently available. E.g

Organize tasks, commands, and functions in groups that resemble actual business operations. Group functions and submenu items in a multilevel menu hierarchy that is logical and reflects how user typically perform Main Menu that tasks. Customers Orders Products E.g
Add new Customer Update Customer Data Delete a Customer Enter a New Order Modify Order Data Cancel an Order Enter a New Product Update Product Data Delete a Product
10

Create combo box list item in alphabetical order, example:

VS
Better, sorted! Unsorted, Difficult for user to select

11

Provide shortcuts for experienced keyboard user for faster user input.
Take a look at the controls, most of them have mnemonic key (Underlined Letter) for faster input by keyboard user.

Chapter 3 System Design Phase

12

Ensure that Help is always available. Help screen should provide information about menu choices, procedures, shortcuts, and errors. Include contact information, such as a telephone number or email address if a department or Help desk is responsible for assisting users. Require user confirmation before data deletion

13

A.

List of predefined values. Establish a list of predefined values that users can click to select. Predefined values prevent spelling errors, avoid inappropriate data in a field, and make user job easier. Example:

Provide a list of predefined values for states in Malaysia. Provide a list of predefined values

14

B. Build in rules Examples: 1. If the user tries to enter an order for a new customer, the customer must be added before the system will accept the order data.
2. The system can automatically determine

delivery charges based on distance of buyers address and total sales made.
15

Display messages at a logical place on the 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

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. Exam mark should be between 0 to 100. Quantity should be number.
17

Better examples are:

E.g :

vs

Use appropriate colours to highlight different areas of the screen; avoid gaudy and bright colours. Group related objects and information. Group similar tasks that user will perform in a group. Display titles, messages, and instructions in 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

Ensure that commands always will have the same effect. For example: if the BACK button return a user to the prior screen, the BACK button always should perform the function throughout the application.

22

Provide a keystroke alternative for each menu items, with easy-to-remember letters, such as File, Exit, Help. Avoid complex terms and technical jargon; instead, select terms that come from everyday business processes and vocabulary of a typical user.

23

The following guidelines will help you design data entry screens that are easy to learn and use:
1.

2.

1. 2.

Provide a descriptive caption for every field, and show user where to enter the data and the required or maximum length field size. Display a sample format if user must enter values in a field with a specific format. E.g: date of birth format is DDYYMMM. Display default values so user can press ENTER to accept the suggested value. Use combo box whenever possible to let user select from a predefined list of values to reduce 24 input error or inconsistency.

5.

Allow users to add, change, delete and view records. Messages such as Apply these changes? or Delete this record? should require users to confirm the actions.

25

Figure 1: ambulance-dispatching company system

26

Here is what is wrong with the screen Too many buttons. The buttons along the right should be on the application's parent window, possibly in a toolbar, but not on this child window.

27

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 invoice number could be the most important fields when dispatching an ambulance.

Chapter 3 System Design Phase

28

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

Figure 2: Billing User Interface

29

Figure 3: Dispatch User Interface

30

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.

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 current lifetime. Apply. Save data without closing the form.

Week

Activities / Documentation to be completed / presented

4-5 Data Flow Diagram (DFD) 6-7 Database design o ERD o 3NF o Data dictionary 8 UI - Screen layouts (presentation using LCD Projector)

Chapter 3 System Design Phase

43