BUS171 Chapter 8: User Interface Design

*Chapter Objectives*

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

*Source Document and Form Design*

*Garbage In, Garbage Out (GIGO)* = used to express the idea that in computer and other spheres, incorrect or poor quality input will always produce faulty output - the quality of the output is only as good as the quality of the input - the best time to avoid problems is when the data is entered *Source Document* = collects input data, triggers or authorizes an input action, and provides a record of the original transaction *Form Layout* = space, instructions, and organization of layout - good form layout makes the form easy to complete and provides enough space, both vertically and horizontally, for users to enter the data *Heading Zone* = usually contains the company logo and the title and number of the form *Control Zone* = contains codes, identification information, numbers, and dates that are used for storing completed forms *Instruction Zone* = contains instructions for completing the form *Body Zone* = usually takes up at least half of the space on the form and contains captions and areas for entering variable data *Totals Zone* = where totals are included on the form *Authorization Zone* = contains any required signatures - information should flow on a form from left or right and top to bottom - the order and placement of fields should be logical, and totals should be identified clearly

*Security and Control Issues*

*Output Security and Control* - Output must be accurate, complete, current, and secure - *Output Control* = methods to maintain output integrity and security - *Output Security* = protects privacy rights and shields the organization's 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 - All processing errors or interruptions must be logged so they can be analyzed - *Diskless Workstation* = a network terminal that supports a full-featured user-interface, but limits the printing or copying of data, except to certain network resources that can be monitored and controlled *Input Security and Control* - *Input Control* = includes the necessary measures to ensure that input data is correct, complete, and secure - every piece of information should be traceable back to the input data that produced it - a company must have procedures needed for handling source documents to ensure that data is not lost before it enters the system - *audit trail* = records the source o each data item and when it entered the system (must show how and when data is accessed or changed, and by whom) - *data security* = policies and procedures protect data from loss or damage, which is a vital goal in every organization - *records retention policy* = meets all legal requirements and business needs - *encryption* = sensitive data that is coded so only users with decoding software can read it

*Where Do We Go From Here?*

*Two Strategies to Help Avoid Major Problems* A) *Modular Design* = you create individual component 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 - independent modules provide greater flexibility because they can be developed and tested individually, and then combined or reused later in the development process - especially important in designing large-scale systems because separate teams of analysts and programmers can work on different areas and then integrate the results B) *Prototyping* = produces an early, rapidly constructed working version of the proposed information system, called a *prototype* - involves 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 - allows users to examine a model that accurately represents system outputs, inputs, interfaces, and processes - "test-drive" the model in a risk-free environment and either approves it or request changes - intended only to validate user requirements and is discarded afterward - agile method: constantly adjusting *System Prototyping* = produces a full-featured, working model of the information system - a prototype that meets all requirements and is ready for implementation - especially important to obtain user feedback *Design Prototyping/Throwaway Prototyping* = Verify user requirements, after which the prototype is discarded and implementation continues - user-approved model that documents and benchmarks the features of the finished system - capture user input and approval while continuing to develop the system within the framework of the SDLC - analysts use this when they construct outputs, inputs, and user interfaces *Benefits of Prototyping* • 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

*What Is a User Interface?*

*User Interface* = 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 - user interface design requires and understanding of human-computer interaction and user-centered design principles *Usability* = user interface is the key to usability, which includes user satisfaction, support for business functions, and system effectiveness - industry leader IBM believes that the best interfaces the ones that users do not even notice - they make sense because they do what users expect them to do *Process-Control Screens* = user interface mainly consists of this, which allows the user to send commands to the system *User Centered System* = the distinction blurs between input, output, and the interface itself - most users work with a mixture of input, screen output, and data queries as they perform their day-to-day job functions *Human-Computer Interaction (HCI)* = describes the relationship between computers and people - graphical user interface (GUI) = uses icons, graphical objects, and pointing devices - main objective is to create a user friendly design that is easy to learn and use - *transparent interface* = does not distract the user and calls no attention to itself - *electronic health records (EHRs) = many physicians feel that EHR software is difficult to use and does not meet their needs

*A Handbook for User Interface Design*

- Many of the main rules share common elements - Most important rule is that you don't have to follow all of these recommendations - the best interface is the one that works for you *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 *RULE 2: Enhance User Productivity* - if the interface empowers a user and enables him or her to handle more complex tasks, the user becomes more productive 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 - i.e. many applications allow users to request Help by typing a question into a dialog box - the software then uses natural language technology to retrieve a list of topics that match the request - used in speech recognition systems, text-to-speech synthesizers, automated voice response systems, Web search engines, and language materials *RULE 3: Provide Users with Help and Feedback* - one of the most important rules because it has a high impact on users - never allow Help to slow a user down 3.1 Ensure that help is always available on demand 3.2 Provide user-selected help and context-sensitive 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 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 3.12 Let the user know whether the task or operation was successful or not 3.13 Provide a text explanation if you use an icon or image on a control button 3.14 User messages that are specific, understandable, and professional. Avoid messages that are cute, cryptic, or vague, such as ERROR - you have entered an unacceptable value *RULE 4: Create an Attractive Layout and Design* 4.1 Use appropriate colors to highlight different ares 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 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 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 *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 well-placed command buttons that allow users to navigate the system. 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 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 *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 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 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 formate like MMDDYY, and provide separators, such as slashes 6.9 Use an *input mask* = a template or pattern that restricts data entry and prevents errors 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) *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 - *limit check* = when the validation check involves a minimum or a maximum value, but not both (i.e. a payment amount is greater than zero, but not specifying a 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 - check data items such as record counts and numeric field totals - when the batch of order is entered, the order system also calculates the number of orders and the sum of all the order quantities - do not identify specific errors - *hash totals* = batch control totals that are not meaningful numbers themselves, but are useful for comparison purposes *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.

*Phase Description*

- 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, input and output procedures, data design, and system architecture - you will prepare a systems design specification at the end of this phase and deliver a presentation to management *Systems Design* = goal is to build a system that is effective, reliable, and maintainable - is the third of five phases in the systems development life cycle - *reliable* if it handles input errors, processing errors, hardware failures, or human mistakes - *maintainable* if flexible, scalable, and easily modified - *effective* if it supports business requirements and meets user needs *Will It Succeed?* - *Think like a User* = carefully examine any point where users provide input or receive output; user interface must be easy to learn; input processes should be easy to follow; output should be attractive and easy to understand - *Anticipate Future Needs* = a great design would anticipate possible expansion to two or more characters - *Provide Flexibility* = 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, number, or alphanumeric, and a range of acceptable values - collect input data as close to its source as possible (i.e. having salespeople use tablets to record orders rather than filling in source documents) - *Automated Data Capture* = easiest, most accurate, and least expensive data input strategy - *Audit Trails* = what a secure system includes that can log every instance of data entry and changes

*Technology Issues*

- output and input have become interdependent as they are in a user interface *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 *Output Types and Technologies* A) *Internet-based Information Delivery* - Web designers must provide user-friendly screen interfaces that display output and accept input from customers (i.e. system can respond with appropriate info from an on-site knowledge base) - Web-based delivery allows users to download a universe of files and documents to support their information needs (i.e. Web provides consumers with instant access to brochures, product manuals, and parts lists) - *Webcast* = a live or prerecorded audio or video media file distributed over the Internet B) *Email* = an essential means of internal and external business communication C) *Blogs* = web-based logs - journals written from a particular point of view - useful for posting news, reviewing current events, and promoting products D) *Instant Messaging* = useful as a constant flow of communication, especially as a team member in a collaborative situation E) *Wireless Devices* = messages and data can be 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 F) *Digital Audio, Images, and Video* = sounds, images, and video clips can be captured, stored in digital format, and transmitted as output to users who can reproduce the content G) *Podcasts* = a specifically formatted digital audio file - Firms use podcasts as sales and marketing tools, and to communicate with their own employees H) *Automated Facsimile Systems* = Faxback system allows a customer to request a fax using e-mail, via the company Web site, or by telephone I) *Computer 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 J) *Computer Output to Digital Media* = 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 K) *Specialized Forms of Output* = 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, driver's 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 *Input Technology* = should be cost-efficient, and as simple as possible - system analysts study transactions and business operations to determine how and when data should enter the system A) *Batch Input* = data entry usually is performed on a specific time schedule, such as daily, weekly, monthly or longer - i.e. when a payroll department collects time cards at the end of the week and enters the data as a batch B) *Online Input* - *Source Data Automation* = A popular online input method is, 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 - Examples of Source Data Automation: ◦ 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 on and off specific jobs ◦ Hospitals imprint bar codes on patient identification bracelets and use portable scanners when gathering data on patient treatment and medication ◦ 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* = unless source data automation is used, 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

*Seven Habits of Successful Interface Designers*

1) *Understand the Business* - the interface designer must understand the underlying business functions and how the system supports individuals, departmental, and enterprise goals 2) *Maximize Graphical Effectiveness* - studies show that people learn better visually - a well designed interface can help users learn a new system rapidly and be more productive 3) *Think Like a User* - see the system through a user's eyes - accommodate novices as well as experienced users - use terms and metaphors that are familiar to users - understand user experience, knowledge, and skill levels 4) *Use Models and Prototypes* - 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 - *usability metrics*= obtain data using software that can record and measure user interaction with the system 5) *Focus on Usability* - design should include all tasks, commands, and communications between users and the information system - opening screen should show the main options - offer a reasonable number of choices that a user easily can comprehend; too many choices can be overwhelming/confusing 6) *Invite Feedback* - monitor system usage and solicit user suggestions - determine if system features are being used as intended by observing and surveying users 7) *Document Everything* - 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 - good user interface design is based on a combination of ergonomics, aesthetics, and interface technology

*Printed Output*

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? *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 - *turnaround documents* = printed output documents that are later entered back into the same or another information system (i.e. when you return the required portion of the bill with your check, the bill is scanned into the company's accounts receivable system to record the payment accurately) - 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 - *character-based reports* = uses a character set with fixed spacing; printing character-based reports on high-speed impact printers is a fast, inexpensive method for producing large-scale reports, such as payroll or inventory reports/registration rosters at school *Type of Reports* = essential goal is to match the report to the user's specific information needs A) *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 - control break report B) *Exception Reports* = 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 C) *Summary Reports* = upper-level managers often want to see total figures and do not need supporting details *User Involvement* - users should approve all report designs in advance - *mock-up* = a sample report or prototype for users to review (best approach) *Report Design Principles* - printed reports 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 - *control break* = usually causes specific actions, such as printing subtotals for a group of records (caused when the value of a control field, such as 'store number' changes) - *control break report* = a type of detail report - *control field order* = to produce a control break report, the records must be arranged, or sorted, in control field order *Report Headers and Footers* - every report should have a report header and a report footer - *report header* = appears at the beginning of the report, identifies the report, and contains the report title, date, and other necessary information - *report footer* = appears at the end of the report, can include grand totals for numeric fields and other end-of-report information *Page Headers and Footers* - every page should include a page header - *page header* = appears at the top of the page and includes the column headings that identify the data - *page footer* = appears at the bottom of the page, is used to display the report title and 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

*Chapter Overview*

Traditionally, a chapter on user interface design was a discussion of output because output is what users touched, viewed, and needed to do their jobs Today, the entire focus has shifted, for several important reasons: *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 - *Greenbar reports* = reams of printed reports that gathered dust while sitting on top of file cabinets *The User Interface Has Evolved* - evolved into a two-way channel, with powerful output capability - most user information needs can be met with screen-generated data, which a user can print, view, or save - *graphical user interface (GUI)* = complete with mouse and screen icons through which Apple was one of the first to explore user interface development