*STID 3023SYSTEMS ANALYSIS AND DESIGN

*Interface DesignWeek 12

*Learning ObjectiveImplement several fundamental user interface design principles.Be able to design a user interface based on principles and techniques for navigation design, input design and output design.Explain form and report design.Apply general guidelines for formatting forms and reports.Explain effective text, table, and list formatting.Apply general guidelines for designing interfaces Explain common errors in developing Web interfaces.

*

*What is the User Interface?It is a platform that user interacts with the system and the nature of the inputs and outputs that the system accepts and produce.

It is deal with HCI (Human Computer Interface) that combines the technique of psychology and ergonomics with Computer Science.

*Users of systems interact with the system to carry out tasks by:reading and interpreting information about how to use the systemissuing commands to the system to indicate what they want to do entering words and numbers into the system as data to work withreading and interpreting the resultsresponding to and correcting errorsWhat is the User Interface?

*Fundamental parts of userinterfaceNavigation mechanism- the way for users gives instructions to the system and tell its what to do. - Eg : Menu, buttonInput mechanism- the way the system captures information - Eg: FormOutput mechanism- the way the system provides information to users or other system. - Eg: Report

*Interface DesignInterface design is the process of defining how the the system will interact with external entities such as customers, supplies or other systems.

The human computer interface layer defines the way in which the users will interact with the system and the nature of the inputs and outputs that the system accepts and produces.

The goal of user interface design is to make interface pleasing to the eye and simple to use, while minimizing the effort the user need to accomplish their work.

*Principles of User Interface Design

Layout of the screen, form or report- the interface should be a series of areas on the screen that are used consistently for different purposes Example: a top area for commands and navigation, a middle area for information to be input or output (form/report) and a bottom area for status information (display information about what user is doing).

*

Content awareness- refers to ability of an interface to make the user aware of the information it contains with the least amount of effort on the users part.- User should always be aware of where they are in the system and what information is being displayed.Aesthetics- refers to designing interfaces that are pleasing to the eye. - interfaces do not have to be works of arts, but they do need to be functional and inviting to use.Principles of User Interface Design

*

User Experience- Interface should be designed based on level of users (experience or novice users). novice users will prefer ease of learning and ease of use.Consistency- when interfaces are consistent, user can interact with one part of the system, and then know how to interact with the rest. - Purpose:Making a system simple to useEnable users to predict what will happen.Principles of User Interface Design

*

Minimize user effort- Interface should be designed to minimize the amount of effort needed to accomplish tasks. - E.g.: fewest possible mouse clicks.Principles of User Interface Design

*NAVIGATION DESIGNGoal for navigation design: To make system as simple as possible to use.

*Basic PrinciplesAssume usersHave not read the manualHave not attended trainingDo not have external help readily at handAll controls should be clear and understandable and placed in an intuitive location on the screen.

*Prevent mistakesLabel commands/ actions appropriately and limit choicesNever display commands that cant be used (or gray them out)Confirm actions that are difficult or impossible to undoSimplify recover from mistakes (eg: using undo button)Use consistent grammar orderBasic Principles

*Types of Menus

*Types of Messages

*

Error Message- informs the user that he or she has attempted to do something to which the system cannot respond. - always explain the reason and suggest corrective action. - It is used when user does something that is not permitted or not possible.

Types of Messages

*An Example of Crafting an Error Message

*

Confirmation Message- Asks user to confirm that they are really want to perform the action they have selected.- always explain the cause and suggest possible action.- often include several choices other than OK and CANCEL.- It is used when user selects a potential dangerous choice, such as deleting a file.Types of Messages

*

Acknowledgement Message- Informs the user that the system has accomplished what it was asked to do.- Acknowledgment messages are typically included because novice users often like to be reassured that an action has taken place.Types of Messages

*

Delay Message- Informs the user that the system is working properly.- should permit the user to cancel the operation in case the user does not want to wait for its completion.- Should provide some indication of how long the delay may last.Types of Messages

*

Help Message- Provides additional information about the system and its components.- help message is organized by table of contents or by keyword search.Types of Messages

*INPUT & OUTPUT DESIGNGoal of input design: To simply and easily capture accurate information for the system.Goal of output design: To present information to users so they can accurately understand it with least effort.

*Types of InputsTextNumbersSelection boxes

*Types of Input Boxes

*What Is a Form?A business document that contains some predefined data and may include some areas where additional data are to be filled inTo capture information for the systemTypically based on a database record or queryInput mechanism

*What Is a Report?A business document that contains only predefined dataA passive document meant only for reading or viewing, not data inputTo present information to usersOutput mechanismTypically contains data from many unrelated transactions or records

*Types of Reports

*Fundamental Questions When Designing Forms and ReportsWho will use the form or report?What is the purpose of the form or report?When is the form or report needed to be delivered and used?Where does the form or report need o be delivered and used?How many people need to use or view the form or report?

*A coding sheet is an old tool for designing forms and reports, usually associated with text-based forms and reports for mainframe applications.

*Visual Basic and other development tools provide computer-aided GUI form and report generation.

*A typical form design specification:

Based on a use case connection

Involves three parts:

Narrative overviewSample designAssessment

*Guidelines for Structuring Data Entry Fields

EntryNever request data that already online or that can be computedDefaultsAlways provide default values when appropriateUnitsMake clear the type of data units requestedReplacementUse character replacement when appropriateCaptioningAlways place a caption adjacent to fieldsFormatProvide formatting examples when appropriateJustifyAutomatically justify data entriesHelpProvide context-sensitive help when appropriate

*Data entry structure is concerned with navigation flow.

*Navigation flow should be natural and intuitive to the user, not disjointed and confusing.

*

*

*

*Grouping, organization, layout, and highlighting are important considerations in form design

*Highlighting can include use of upper case, font size differences, bold, italics, underline, boxing, and other approaches.

*Highlighting can be valuable technique for conveying special information:Notifying users of errors in data entry or processing.Providing warnings to users regarding possible problems such as unusual data values or an unavailable device.Drawing attention to keywords, commands, high-priority messages, and data that changed or gone outside normal operating ranges.

*

*Business reports are static, no user interaction. Therefore, business reports are often printed in hardcopy form.

*

*Bar and line graphs give pictorial summary information that can enhance reports and graphs.

*SummaryThe fundamental goal of navigation design is to make the system as simple to use as possibleThe goal of input mechanism is to simply and easily capture accurate informationThe goal of the output mechanism is to provide accurate information to users that minimize information overload and bias

*Checklist for validating the Usability of User InterfaceCursor-Control Capabilitiese.g: Move the cursor forward to the next data fieldEditing Capabilitiese.g: Delete the character to the left of the cursorExit Capabilitiese.g: Confirm the saving of edits or go to another screen/form

*

*Guidelines for Designing System Help

GuidelineExplanationSimplifyUse short, simple wording, common spelling, and complete sentences. Give users what they need to know, with ability to find additional info.OrganizeUse lists to break information into manageable pieces.ShowProvide examples of poorer use and the outcomes of such use.

*Common Errors When Designing the Interface and Dialogues of Web SitesOpening new browser windowBreaking or slowing down the back buttonComplex URLsOrphan PagesScrolling Navigation PagesLack of Navigation SupportHidden LinksLinks that Dont Provide Enough InformationButtons that provide No Click Feedback

*Style GuidesMicrosoft and Apple provide guidelines on design of interfaces for their platformsLarge organizations may have their own style guides

**It is important to note that these are secondary tasks: they are concerned with using the system not with the users primary objectives. In the examples in this section of this chapter, the primary tasks are to take a customer order and to find tourist information. If the system has been designed well, the secondary, system-related tasks will be easy to carry out; if it has not been designed well, the secondary tasks will intrude into the process and will make it more difficult for the users to achieve their primary tasks. *It is important to note that these are secondary tasks: they are concerned with using the system not with the users primary objectives. In the examples in this section of this chapter, the primary tasks are to take a customer order and to find tourist information. If the system has been designed well, the secondary, system-related tasks will be easy to carry out; if it has not been designed well, the secondary tasks will intrude into the process and will make it more difficult for the users to achieve their primary tasks. **