Chapter 8 User Interface Design Phase 3 Systems Design

Systems design is the third of five phases in the systems development life cycle Now you will work on a physical design that will meet the specifications described in the system requirements document Tasks will include user interface design, data design, and system architecture Deliverable is system design specification

Explain the concept of user interface design and human-computer interaction, including basic principles of user-centered design Explain how experienced interface designers perform their tasks Describe rules for successful interface design Discuss input and output technology issues

Design effective source documents and forms Explain printed output guidelines Describe output and input controls and security Explain modular design and prototyping techniques

Goal of systems design is to build a system that is effective, reliable, and maintainable
Effective if it supports business requirements and meets user needs Reliable if it handles input errors, processing errors, hardware failures, or human mistakes Maintainable if it is flexible, scalable, and easily modified

Will It Succeed?

Think like a user

Anticipate future needs Provide flexibility

Carefully examine any point where users provide input or receive output The user interface must be easy to learn Input processes should be easy to follow, intuitive, and forgiving of errors Predesigned output should be attractive and easy to understand, with an appropriate level of detail Anticipate possible expansion Best design strategy is to offer several alternatives, so users can decide what will work best for them Start with a default value that displays automatically

Manage data effectively The system should enter and verify data as soon as possible Each data item should have a specific type, such as alphabetic, numeric, or alphanumeric, and a range of acceptable values Collect input data as close to its source as possible

Users can design their own output

System designers are more aware of user needs and desires. A system can maintain data integrity and still allow users to view, sort, filter, and examine data in any way that helps them do their jobs

Centralized IT departments no longer produce reams of printed reports

Overwhelming trend has been to customer-designed output

The user interface itself has evolved

Most user information needs can be met with screengenerated data, which a user can print, view, or save
8

A 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

FIGURE 8-3 According to IBM, the best user interfaces are the ones you dont really notice
10

Human Computer Interaction

Human-computer interaction (HCI) describes the relationship between computers and people who use them to perform their jobs Graphical user interface (GUI) Main objective is to create a user-friendly design that is easy to learn and use

11

FIGURE 8-3 According to IBM, the best user interfaces are the ones you dont really notice

12

1. Understand the Business

2. Maximize Graphical Effectiveness 3. Think Like a User

The interface designer must understand the underlying business functions and how the system supports individual, departmental, and enterprise goals Studies show that people learn better visually

See the system through a users eyes Use terms and metaphors that are familiar to users Understand user experience, knowledge, and skill levels
13

4. User Models and Prototypes

5. Focus on Usability

Present initial screen designs to users in the form of a storyboard Users must test all aspects of the interface design and provide feedback to the designers Opening screen should show the main options Offer a reasonable number of choices that a user easily can comprehend
FIGURE 8-7 The opening screen displays the main options for a student registration system. A user can click an option to see lower-level actions and menu choices
14

6. Invite Feedback

7. Document Everything

Monitor system usage and solicit user suggestions Determine if system features are being used as intended by observing and surveying users Document all screen designs for later use by programmers 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

15

RULE 1: Create an Interface That Is Easy to Learn and Use

1.1 Focus on system design objectives 1.2 Create a design that is easy to understand and remember 1.3 Provide commands, actions, and system responses that are consistent and predictable 1.4 Allow users to correct errors easily 1.5 Clearly label all controls, buttons, and icons 1.6 Select familiar images that users can understand, and provide on-screen instructions that are logical, concise, and clear 1.7 Show all commands in a list of menu items, but dim any commands that are not available to the user 1.8 Make it easy to navigate or return to any level in the menu structure

16

RULE 2: Enhance User Productivity

2.1 Organize tasks, commands, and functions in groups that resemble actual business operations 2.2 Create alphabetical menu lists or place the selections used frequently at the top of the menu list 2.3 Provide shortcuts for experienced users so they can avoid multiple menu levels 2.4 Use default values if the majority of values in a field are the same 2.5 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 2.6 Provide a fast-find feature that displays a list of possible values as soon as users enter the first few letters 2.7 If available, consider a natural language feature that allows users to type commands or requests in normal text phrases

17

RULE 3: Provide Users with Help and Feedback

3.1 Ensure that help is always available on demand 3.2 Provide user-selected help and contextsensitive help 3.3 Provide a direct route for users to return to the point from where help was requested 3.4 Include contact information 3.5 Require user confirmation before data deletion (Are you sure?) 3.6 Provide an Undo key 3.7 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

FIGURE 8-10 The main Help screen for a student registration system

18

RULE 3: Provide Users with Help and Feedback

(Cont.)

3.8 Use hypertext links to assist users 3.9 Display messages at a logical place 3.10 Alert users to lengthy processing times or delays. Give users an on-screen progress report 3.11 Allow messages to remain on the screen long enough for users to read them FIGURE 8-11 A context-sensitive dialog displays if a user requests help 3.12 Let the user know whether the task or box while entering data into the ADVISOR operation was successful or not ASSIGNED field. Clicking the Close 3.13 Provide a text explanation if you use button returns the user to the task an icon or image on a control button 3.14 Use messages that are specific, understandable, and professional Avoid messages that are cute, cryptic, or vague, such as: ERROR You have entered an unacceptable value

19

RULE 4: Create an Attractive Layout and Design

4.1 Use appropriate colors to highlight different areas of the screen; avoid gaudy and bright colors 4.2 Use special effects sparingly 4.3 Use hyperlinks that allow users to navigate to related topics 4.4 Group related objects and information. Visualize the screen the way a user will see it, and simulate the tasks that the user will perform 4.5 Keep screen displays uncluttered, with enough white space to create an attractive, readable design 4.6 Display titles, messages, and instructions in a consistent manner and in the same general locations on all screens 4.7 Use consistent terminology 4.8 Ensure that commands always will have the same effect

20

RULE 4: Create an Attractive Layout and Design

(Cont.)

4.9 Ensure that similar mouse actions will produce the same results 4.10 Require the user to confirm the entry by pressing Enter or Tab 4.11 Remember that users are accustomed to a pattern of red = stop, yellow = caution, and green = go 4.12 Provide a keystroke alternative for each menu command, with easy-to-remember letters, such as File, Exit, and Help 4.13 Use familiar commands if possible, such as Cut, Copy, and Paste 4.14 Provide a Windows look and feel in your interface design if users are familiar with Windows-based applications 4.15 Avoid complex terms and technical jargon
21

RULE 5: Enhance the Interface

5.1 The opening screen is especially important because it introduces the application The starting point can be a switchboard with wellplaced command buttons that allow users to navigate the system

FIGURE 8-12 An example of a switchboard and data entry screen for a project management system

22

RULE 5: Enhance the Interface

(Cont.)

5.2 Use a command button to initiate an action such as printing a form or requesting help 5.3 If you are using a software package, check to see if it allows you to create customized menu bars and toolbars 5.4 Add a shortcut feature that lets a user select a menu command either by clicking the desired choice or by pressing the Alt key + the underlined letter 5.5 If variable input data is needed, provide a dialog box that explains what is required 5.6 A toggle button makes it easy to show on or off status clicking the toggle button switches to the other state 5.7 Use list boxes that display the available choices 5.8 Use an option button, or radio button, to control user choices

23

RULE 5: Enhance the Interface

(Cont.)

5.9 If you use check boxes to select one or more choices from a group, show the choices with a checkmark or an X 5.10 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
FIGURE 8-13 A data entry screen for the student registration system. This screen uses several design features that are described in the text. When a user clicks the Find Student command button, a dialog box is displayed with instructions

24

RULE 6: Focus on Data Entry Screens

6.1 Whenever possible, use a data entry method called form filling, where a blank form that duplicates the source document is completed on screen 6.2 Position the insertion point in the first data entry location 6.3 Provide a way to leave the data entry screen at any time without entering the current record 6.4 Provide a descriptive caption for every field

FIGURE 8-14 In this data screen for customer orders, the system generates an order number and logs the current date and time. The user enters a customer ID. If the entry is valid, the system displays the customer name so the user can verify it. The user then enters the item and quantity. Note that the description, price, extended price, total price, sales tax, and grand total are retrieved automatically or calculated by the system 25

RULE 6: Focus on Data Entry Screens

(Cont.)

6.5 Provide a means for users to move among fields on the form in a standard order or in any order they choose 6.6 Allow users to add, change, delete, and view records 6.7 Design the screen form layout to match the layout of the source document 6.8 Display a sample format like MMDDYY, and provide separators, FIGURE 8-15 This is an enhanced version of the data entry screen shown in Figure 8-14. The new version such as slashes has command buttons that allow the user to perform 6.9 Use an input mask
various functions

26

FIGURE 8-16 Microsoft Access 2010 provides various input masks for dates, phone numbers, and postal codes, among others. In addition, it is easy to create a custom mask using the characters shown here

27

RULE 6: Focus on Data Entry Screens

(Cont.)

6.10 Require an ending keystroke for every field 6.11 Do not require users to type leading zeroes for numeric fields 6.12 Do not require users to type trailing zeroes for numbers that include decimals 6.13 Display default values so operators can press the Enter key to accept the suggested value 6.14 Use a default value when a field value will be constant for successive records or throughout the data entry session 6.15 Display a list of acceptable values for fields, and provide meaningful error messages if the user enters an unacceptable value 6.16 Provide users with an opportunity to confirm the accuracy of input data before entering it by displaying a message such as, Add this record? (Y/N)

28

RULE 7: Use Validation Rules

7.1 A sequence check can be used when the data must be in some predetermined sequence 7.2 An existence check can apply to mandatory data items 7.3 A data type check can test to ensure that a data item fits the required data type 7.4 A range check can be used to verify that data items fall between a specified minimum and maximum value 7.5 A reasonableness check identifies values that are questionable, but not necessarily wrong 7.6 A validity check can be used for data items that must have certain values 7.7 A combination check is performed on two or more fields to ensure that they are consistent or reasonable when considered together 7.8 Batch controls are totals used to verify batch input

29

FIGURE 8-17 Validation rules can improve data quality by requiring the input to meet specific requirements or conditions

30

RULE 8: Reduce Input Volume

8.1 Input necessary data only 8.2 Do not input data that the user can retrieve from system files or calculate from other data 8.3 Do not input constant data 8.4 Use codes. Codes are shorter than the data they represent, and coded input can reduce data entry time

31

Good form layout makes the form easy to complete and provides enough space, both vertically and horizontally, for users to enter the data Information should flow on a form from left to right and top to bottom The order and placement of FIGURE 8-18 Source document zones fields should be logical, and totals should be identified clearly
32

Before designing printed output, ask yourself several questions:

Why is this being delivered as printed output, rather than screen-based information, with an option for users to view, print, or save as needed? Who wants the information, why is it needed, and how will it be used? What specific information will be included? Will the printed output be designed for a specific device? When and how will the information be delivered, and how often must it be updated? Do security or confidentiality issues exist? How will they be managed?

33

Overview of Report Design

Organizations strive to reduce the flow of paper and printed reports, but few firms have been able to eliminate printed output totally Users find it handy to view screen output, then print the information they need for a discussion or business meeting Reports must be easy to read and well organized Database programs such as Microsoft Access include a variety of report design tools, including a Report Wizard, which is a menu-driven feature that designers can use to create reports quickly and easily

34

FIGURE 8-19 Microsoft offers suggestions, tips, and a video that can help you design better forms and reports
35

Types of Reports
DETAIL REPORTS

Produces one or more lines of output for each record processed Can be quite lengthy A better alternative might be an exception report
Displays only those records that meet a specific condition or conditions Useful when the user wants information only on records that might require action, but does not need to know the details Upper-level managers often want to see total figures and do not need supporting details
36

EXCEPTION REPORTS

SUMMARY REPORTS

User Involvement

Report Design Principles

Report Headers and Footers

Must be attractive, professional, and easy to read Should provide totals and subtotals for numeric fields Analyst must consider design features such as report headers and footers, page headers and footers, column headings and alignment, column spacing, field order, and grouping of detail lines Every report should have a report header and a report footer

Header identifies the report, and contains the report title, date, and other necessary information Footer can include grand totals for numeric fields and other end-of-report information
37

FIGURE 8-20 The Employee Hours report is a detail report with control breaks, subtotals, and grand totals. Notice that a report header identifies the report, a page header contains column headings, a group footer contains subtotals for each store, a report footer contains grand totals, and a page footer identifies the page number

38

 Report Design Principles

(Cont.)

Page Headers and Footers

Every page should have a report header and a report footer

Header includes the column headings that identify the data. The headings should be short but descriptive Footer used to display the report title and the page number

Repeating Fields The best advice is to ask users what they think and be guided accordingly Consistent Design Look and feel are important to users, so reports should be uniform and consistent
39

Output Technology
In addition to screen output and printed matter, output can be delivered in many ways Create the actual forms, reports, documents, and other types of output that might be accessed from workstations, notebooks, tablets, smartphones, and other devices Internet-based information delivery
Web-based delivery allows users to download a universe of files and documents to support their information needs

40

Output Technology

(Cont.)

E-mail An essential means of internal and external business communication Blogs

Useful for posting news, reviewing current events, and promoting products

Instant messaging
Useful as a constant flow of communication, especially as a team member in a collaborative situation

41

Output Technology
Wireless devices

(Cont.)

Transmitted to a wide array of mobile devices, including tablet computers, smartphones, and similar wireless products that combine portable computing power, multimedia capability, and Internet access

Digital audio, images and video

Sounds, images, and video clips can be captured, stored in digital format Can be attached to an e-mail message or inserted as a clip in a Microsoft Word document

42

Output Technology
Podcasts

(Cont.)

Automated facsimile systems

Firms use podcasts as sales and marketing tools, and to communicate with their own employees Faxback system allows a customer to request a fax using e-mail, via the company Web site, or by telephone

Computer output to microfilm (COM) Output to microfilm (COM) is often used by large firms to scan and store images of original documents to provide high-quality records management and archiving

43

Output Technology

Computer output to digital media

(Cont.)

Specialized Forms of Output

Digital storage media can include magnetic tape, CDs, DVDs, and high-density laser disks Used when many paper documents must be scanned , stored in digital format and retrieved quickly Portable, Web-connected devices that can run multiple apps Retail point-of-sale terminals that handle credit card transactions Automatic teller machines (ATMs) that can process bank transactions Special-purpose printers that can produce labels, employee ID cards, drivers licenses, gasoline pump receipts, and, in some states, lottery tickets Plotters that can produce high-quality images such as blueprints, maps, and electronic circuit diagrams Electronic detection of data embedded in credit cards, bank cards, and employee identification cards
44

FIGURE 8-22 Input devices can be very traditional, or based on the latest technology

45

Input Technology
Batch Input
Data entry usually is performed on a specified time schedule, such as daily, weekly, monthly, or longer

Online Input
A popular online input method is source data automation, which combines online data entry and automated data capture using input devices such as RFID tags or magnetic data strips Source data automation is fast and accurate, and minimizes human involvement in the translation process

46

Input Technology

Businesses 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 use magnetic ID cards to clock FIGURE 8-23 When a customers signature is on and off specific jobs stored in digital form, it becomes input to the Hospitals imprint bar codes information system on patient identification bracelets and use portable scanners when gathering data on patient treatment and medication
47

(Cont.)

Input Technology

(Cont.)

Retail stores use portable bar code scanners to log new shipments and update inventory data Libraries use handheld scanners to read optical strips on books Trade Offs Manual data entry is slower and more expensive than batch input because it is performed at the time the transaction occurs and often done when computer demand is at its highest

48

Output Security and Control

Output must be accurate, complete, current, and secure Output security protects privacy rights and shields the organizations proprietary data from theft or unauthorized access Use specific procedures to ensure that the output is delivered to authorized recipients only Shred sensitive reports, out-of-date reports, and output from aborted print runs

49

Input Security and Control

Input must be correct, complete, and secure Every piece of information should be traceable back to the input data that produced it Procedures needed for handling source documents to ensure that data is not lost before it enters the system Audit trail files and reports should be stored and saved

50

Modular Design
Create individual components, called modules, which connect to a higher-level program or process Use a structured design so each module represents a specific process, which is shown on a DFD and documented in a process description

Prototyping
A repetitive sequence of analysis, design, modeling, and testing, is a common technique that can be used to design anything from a new home to a computer network

51

System Prototyping Design Prototyping

Produces a full-featured, working model of the information system Verify user requirements, after which the prototype is discarded and implementation continues

FIGURE 8-26 The end product of system prototyping is a working model of the information system, ready for implementation

FIGURE 8-27 The end product of design prototyping is a user-approved model that documents and benchmarks the features of the finished system

52

 Trade-Offs Input must be correct, complete, and Users and systems developers can avoid misunderstandings System developers can create accurate specifications for the finished system based on the prototype Managers can evaluate a working model more effectively than a paper specification Systems analysts can use a prototype to develop testing and training procedures before the finished system is available Prototyping reduces the risk and potential financial exposure that occur when a finished system fails to support business needs Potential Problems: The rapid pace of development can create quality problems, which are not discovered until the finished system is operational Other system requirements, such as reliability and maintainability cannot be tested adequately using a prototype In very complex systems, the prototype can become unwieldy and difficult to manage
53

The purpose of systems design is to create a physical model of the system that satisfies the design requirements that were defined during the systems analysis phase Create a transparent interface:
Easy to learn and use Enhance user productivity Make it easy to obtain help or correct errors Minimize input data problems Provide feedback Create an attractive layout and design Use familiar terms and images
54

Printed reports, include detail, exception, and summary reports There are various zones in a document, including the heading zone, the control zone, the instruction zone, the body zone, the totals zone, and the authorization zone Input methods include batch and online There are different Input media and procedures Security and control plays an important role
55