System Analysis And Design 11. User Interface Design Program: BSCS II (Advent Semester – 2014) Lecturer: Rebecca Asiimwe Email: rasiimwe@technology.ucu.ac.ug

Key Definitions The User interface helps users communicate with the computer and/or application The system interfaces define how systems exchange information with other systems User interface includes screen displays that provide navigation through the system, screens, forms that capture data and reports

User Interface The navigation mechanism provides the way for users to tell the system what to do The input mechanism defines the way the system captures information The output mechanism defines the way the system provides information to users or other systems

Principles for User Interface Design Layout Content awareness Aesthetics User experience Consistency Minimal user effort

Layout Concepts The screen is often divided into three boxes Navigation area (top) Status area (bottom) Work area (middle) Information can be presented in multiple areas Like areas should be grouped together

More Layout Concepts Areas and information should minimize user movement from one to another Ideally, areas will remain consistent in Size Shape Placement for entering data Reports presenting retrieved data

Layout Example 1

Layout Example 2

Layout Example 3

Content Awareness This is ability of an interface to make user aware of the information it contains with least amount of effort All interfaces should have titles Menus should show where you are where you came from to get there It should be clear what information is within each area Fields and field labels should be selected carefully Use dates and version numbers to aid system users

Aesthetics Means designing an interface that is pleasing to the eye Interfaces need to be functional and inviting to use Avoid squeezing in too much, particularly for non experienced users Design text carefully Be aware of font and size Avoid using all capital letters

More Aesthetics Colors and patterns should be used carefully Test quality of colors by trying the interface on a black/white monitor Use colors to separate or categorize items

User Experience Two types of users should be considered when designing interfaces How easy is the program to learn? How easy is the program to use for the expert? Consider adding shortcuts for the expert Interface should be designed for both users

Consistency Enables users to predict what will happen Reduces learning curve Considers items within an application and across applications Pertains to many different levels Navigation controls Terminology Report and form design

Minimize Effort Minimize the amount of effort needed to accomplish a task Clicks rule Users should be able to go from the start or main menu of a system to the information or action they want in no more than three mouse clicks or three keystrokes

NAVIGATION DESIGN Navigation component enables users to enter commands to navigate through the system and perform actions Navigation is to make the system as simple as possible to use Basic principle Prevent the user from making mistakes Simplify recovery from mistakes Use consistent grammar order

Types of Navigation Control Two hardware devices; keyboard and pointing devices Software approaches Language (command and natural) Menus; Most common today Should be designed with care, better to be broad and shallow

Message Used to prevent users from making mistakes System responds to a user and inform him or her of the status of the interaction Error messages Confirmation message Acknowledge message Delay message Help message

INPUT DESIGN Basic Principles Use online and batch processing appropriately Online-data input is done individually Batch-inputs collected over sometime and entered in a batch Capture data at the source Paper collection into the computer Source data automation Capture data using trained entry operator Minimize keystrokes

Types of Inputs Text ; text box used to enter text, have fixed length, scrollable and should be labelled Number; number box is sued to enter numbers. Date is a special form of number Selection box; enables user to select a value from predefined list arranged in a given order 6 types; check box, radio button, on-screen list box, drop down list box, combo boxes

Key Tasks in Input Design Six key tasks 1. Design data entry and input procedures 2. Design source documents for data capture, or devise other data capture methods 3. Design input data records 4. Design data entry screens 5. Design user interface screens 6. Design audit trails and system security measures

Source Document Design Form zones Heading zone Control zone Instruction zone Totals zone Authorization zone Source documents can be external or internal

Input Record Design Input record layout chart To design and document batch input records Multiple record designs are used for transactions that involve constant and repeating data Constant fields (non-repeating data) Repeating fields

Input Record Design Information flow on a form Should be logical and easy to follow Poor design results in forms that are difficult to use, time-consuming, and prone to error

Screen Design Effective screen design guidelines 1. Screens should be attractive and uncluttered 2. Information on a single screen should be displayed in a meaningful, logical order 3. Screen designs should be consistent 4. Messages should be specific, understandable, and professional 5. Messages should remain on the screen for an appropriate period of time

Screen Design Effective screen design guidelines 6. Special effects should be used sparingly 7. Users should receive feedback 8. Screen designs should be documented and approved as soon as possible

Screen Design Data entry screen design Guidelines 1. Restrict user access to screen locations where data is entered 2. Provide a descriptive caption for each field and show the user where to enter the data 3. Show a sample format if one is required 4. Require ending keystroke for every field 5. Do not require users to enter special characters

Screen Design Guidelines 6. Do not require users to type leading zeroes or trailing spaces for alphanumeric fields 7. Do not require users to type trailing zeroes that follow a decimal point 8. Display default values that users can accept 9. Use default values for constant data 10. Display a list of acceptable values for fields with a limited number of valid choices

Screen Design Guidelines 11. Provide a way to leave the data entry screen without inputting the current record 12. Provide an opportunity to confirm the accuracy of input data before entering it 13. Provide a means to move among form fields in a standard, or in another, order 14. Design the screen form to match the layout of the source document

Screen Design Guidelines 15. Allow the operator to add, change, delete, and view records 16. Design a method to allow operators to search for a specific record

Screen Design Graphical user interfaces A GUI environment includes process control and data control A GUI environment is easy to use Common features Menu bar Toolbar

Screen Design Common features Menu bar Toolbar Drop-down menus Dialog, text, and drop-down list boxes Option (radio) buttons Spin bars

Screen Design Help screen design Several methods to obtain Help Click a command button or toolbar Press a special key Context-sensitive Help Provides Help on the task in progress User-selected Help Hypertext Uses links to display additional information on related topics

Screen Design Design guidelines Provide a direct route for users to return to the program after Help is obtained Title every Help screen Use easy, simple, understandable help text Present attractive, uncluttered screens Provide appropriate examples Use hyperlinks Include contact data for persons or departments responsible for assisting users

OUTPUT DESIGN By output, we mean reports that the system produces Reports can be on screen ( display), paper( printed reports) or any other media Reports are the most visible part of any system Understand the report usage

BASIC DESIGN PRINCIPLES Understand report usage- reports can be used for different purposes Manage information load- should provide all the information needed to support the task for which it was designed

Checklist for Output design Design process depends on What is the purpose of the output? Who wants this information, why is it needed, and how will it be used? What information will be included? What format should be used? When will information be provided, and how often must it be updated? Will simultaneous user access be required? Are security or confidentiality issues involved that need to be considered?

Types of outputs There are different types of reports; Detailed reports Summary reports Exceptional reports Turnaround documents and graphs There are many different media used to produce these reports 2 dominant; paper and electronic

Types of Outputs and Information Delivery Paper (Printed) output Advantages/disadvantages of printed output Many people prefer to work with paper Paper is portable Printed output is expensive to purchase, print, store, and dispose off Printed output is outdated quickly

Types of Output and Information Delivery Screen(display) output The screen is the most familiar output device Monitor CRT (cathode ray tube) LCD (liquid crystal display) VDT (video display terminal) Graphical output allows various special effects and user-friendly features Screen output reflects immediate data changes

Types of Output and Information Delivery Other types of information delivery Audio output Automated facsimile and faxback systems E-mail Links to Web pages Specialized forms of output

Designing Printed Reports Reports can be classified by content Detail reports Exception reports Summary reports Reports also can be classified by distribution Internal reports External reports

Designing Printed Reports Detail reports Lists detailed information about all items requested Provide the most information At least one line of output is produced for each record processed Detail reports can be quite lengthy

Designing Printed Reports Exception reports Show only records that meet a specific condition Useful when particular information is required Special parameter queries can be used to select only the records that meet specified conditions

Designing Printed Reports Summary reports Lists summary information about all items Useful for upper-level managers who do not require extensive detail

Designing Printed Reports Internal reports Distributed within the organization Usually printed on stock paper Blank, single ply, standard size Less expensive Can be used for many types of reports

Designing Printed Reports External reports Distributed outside the organization Might include statements, invoices, or paychecks Usually printed on special forms More expensive than stock paper Paper must be changed for each report printing job Multi-part forms must be separated or decollated

Designing Printed Reports External reports Distributed outside the organization Might include statements, invoices, or paychecks Usually printed on special forms More expensive than stock paper Paper must be changed for each report printing job Multi-part forms must be separated or decollated Special forms can use preprinted graphics and logos Special applications, such as checks, require special forms

Designing Printed Reports Designing the report Most reports use graphical design Choice of typefaces and scalable fonts More design flexibility Some reports are character-based Printed on high-speed impact printers Require printer spacing charts for layout and design

Designing Screen Output Screen design considerations Many print design principles apply to screens Screens also need instructions and messages Users require immediate Help and feedback Character-based screens Screen locations are plotted using columns and lines Use screen display layout forms Messages typically on top or bottom line Graphical screens Screen locations are plotted in inches or other units More flexible designs are possible

Designing Screen Output Character output High-resolution monitors allow more flexibility Display must be clear and easy to read Fonts and typefaces must be chosen carefully Screens vs. printed output Information might need redesign for smaller screen Multiple screens might be necessary Columnar or tabular designs are possible

Designing Screen Output Graphical output Graphical displays can be very effective Many formats are possible Pie charts Maps Bar charts Area charts Scatter diagrams Use descriptive titles, label each axis, and include a legend

Designing Other Outputs Output to tapes and disks In an integrated environment, data transfer is handled by interactive network design In other cases, data transfer uses tapes or disks Output from one program can be input to another An output file format is a data structure that can be understood by another program or system Tape or disk output design must calculate file volume

Output Control Output integrity Ensure output is correct, complete, & secure Include appropriate titles and dates on reports Number pages consecutively Identify the end of each report Print/reconcile control totals/record counts Review error reports for possible causes Create error file to flag uncorrected/reentered records

Output Control Output security Protects privacy rights and proprietary data Important tasks to carry out Control the number of report copies Distribute reports only to authorized users Store sensitive reports in secure areas Label all pages of confidential reports Burn/shred sensitive reports & other output Inventory blank checks regularly Store signature forms securely

The End