Use the boxes above to navigate between slides.
Press the N or P keys on your keyboard to access the Next and Previous Slides.
Press the B key to return to the top of the page.
If there is audio associated with a slide, you will see an audio controller appear.
If the audio controls are present press the play button to start the audio, and the pause button to stop it.
If you exit a slide before the audio is complete do not worry. The audio will stop playing, and will be ready for you the next time you access the slide.
UI Design Overview
A user interface is the part of the system with which the users interact. It includes the screen displays that provide navigation through the system, the screens and forms that capture data, and the reports that the system produces. This Learning Object (LO) introduces the basic principles and processes of interface design.
Interface design is the process of defining how the system interacts with the external entities (e.g., customers, suppliers, and other systems). In this LO we focus on the design of user interfaces – the way in which the users interact with the system. Note that while there may be system interfaces that exchange information with other systems, those are not included in this LO.
The user interface includes three fundamental parts. The first is the navigation mechanism, the way in which the user gives instructions to the system and tells it what to do (e.g., buttons, menus). The second is the input mechanism, the way in which the system captures information (e.g., forms for adding new widgets). The third is the output mechanism, the way in which the system provides information to the user (e.g., reports). Each of these is conceptually different, but are closely related.
Principles for User Interface Design
The goal of user interface design is to make the interface pleasing to the eye and simple to use, while minimizing the effort users expend to accomplish their work. The system is never an end in itself; it is merely a means to accomplish the business of the organization. The list below includes six fundamental interface design principles, which are common for navigation design, input design and output design.
Layout – The interface should be a series of areas on the screen that are used consistently for different purposes – for example, a top area for commands and navigation, a middle area for information to be input or output, and a bottom area for status information.
Content awareness – Users should always be aware of where they are in the system and what information is being displayed.
Aesthetics – Interfaces should be functional and inviting to users through careful use of white space, colors, and fonts. There is often a trade-off between including enough white space to make the interface look pleasing and losing so much space that important information does not fit on the screen.
Usage level – Although ease of use and ease of learning often lead to similar design decisions, there is sometimes a trade-off between the two. Infrequent users of software will prefer ease of learning, whereas frequent users will prefer ease of use.
Consistency – Consistency in interface design enables users to predict what will happen before they perform a function. It is one of the most important elements in ease of learning, ease of use, and aesthetics.
Minimize user effort – The interface should be simple to use. Most designers plan on having no more than three mouse clicks from the starting menu until users perform work for example.
User Interface Design Process
User interface design is a five-part process that is iterative – one often moves back and forth between parts rather than proceed sequentially. These include: 1) Understand the Users; 2) Organize the Interface; 3) Define Standards; and 4) Develop Prototypes; each conducted while 5) Testing and Evaluating.
Understand the Users – Examine the deliverables and artifacts created during the analysis phase to clarify the user audience. These may include the DFDs, use cases, interview notes, and observations. Identified user groups can be represented with personas, fictional characters created to represent each of the user groups. The most common usage patterns of the system may be depicted with use scenarios (perhaps derived from use cases) and those implemented first.
Organize the Interface – The interface structure design defines the basic components of the interface and how they work together to provide functionality to users. An interface structure diagram (ISD) is used to show how all the screens, forms, and reports used by the system are related and how the user moves from one to another. There may be several ISDs created, one for each major part of the system. The basic structure of the interface follows the basic structure of the business process itself as defined in a process model. Start with the DFD and develop the fundamental flow of control of the system as it moves from process to process. In general, but not always, there is one ISD for each process on the level 0 DFD. Examine the use scenarios to determine how well the ISD supports them.
Define Standards – The interface standards are the basic design elements that are common across the individual screens, forms and reports within the system. Depending on the application, there may be several sets of interface standards for different parts of the system (e.g., one for Web screens, one for paper reports, one for input forms). The standards serve as the basis for ensuring the interfaces are consistent across the system.
Develop Prototypes – An interface design prototype is a mock-up or simulation of a computer screen, form, or report. Prepare a prototype for each interface in the system to show the users how the system will perform and the programmers what to develop. There are many different tools used to create prototypes, ranging from simple paper sketches to models that closely represent the final interface.
Testing and Evaluation – Many organizations save interface evaluation for the very last step in the SDLC before the system is installed. Ideally, however, interface evaluation should be performed while the system is being designed, before it is built. It should occur during each part of the interface design and as a whole, once design is complete. Any major design problems can be identified and corrected before the time and cost of programming have been spent on a weak design. As with interface design prototyping, interface evaluation can take many different forms. Four common approaches are heuristic evaluation, walk-through evaluation, interactive evaluation, and formal usability testing. Also note that different parts of a system can be evaluated by different techniques.
Prevent Mistakes – The first principle of designing navigation controls is to prevent the user from making mistakes. Label commands and actions appropriately and limit choices. Never display a command that cannot be used. Confirm actions that perform a critical function with the user.
Simplify Recovery from Mistakes – Users will make mistakes. The system should make it as easy as possible to correct these errors. Consider an “Undo” button that makes mistakes easy to override.
Use Consistent Grammar Order – The grammar order should be consistent throughout the system, both at the data element level and at the overall menu level. The interface can require the user to first choose the object and then the action (an object-action order) or first choose the action and then the object (action-object) order. Most systems today are designed with the object-action order approach.
The most common type of navigation system today is the menu. A menu presents the user with a list of choices, each of which can be selected. It is better to make menus broad and shallow (i.e., with each menu containing many items and each item containing only one or two layers of menus) rather than narrow and deep (i.e., with each menu containing only a few items, but each item leading to three or more layers of menus).
Any one menu should contain no more than eight items and it should take no more than two mouse clicks or keystrokes from any menu to perform an action. If one must break this guideline, group like menu items together and separate them by a horizontal line. Similar categories of items should be put together within a menu option so that the user can intuitively guess what the menu option contains. Menu items can be grouped together by interface objects (e.g., Customers, Purchase Orders, etc.) or interaction actions (e.g., New, Update, etc.).
Messages are the way in which the system responds to a user and informs him or her of the status of the interaction. There are many different types of messages, such as error messages, confirmation messages, acknowledgement messages, delay messages and help messages. In general, messages should be clear, concise, and complete. All messages should be grammatically correct and free of jargon and abbreviations (unless they are users’ jargon and abbreviations). Avoid negatives and humor.
Messages should require the user to acknowledge them (by clicking, for example), rather than being displayed for a few seconds and then disappearing. The exceptions are messages that inform the user of delays in processing. These should disappear once the delay has passed. In general, messages are text, but sometimes standard icons are used. For example, Windows 7 displays a revolving circle when the system is busy.
All messages should be carefully crafted, but error messages and help messages require particular care. Messages should always explain the problem in polite, succinct terms and explain corrective action as clearly and explicitly as possible so that the user knows exactly what needs to be done. Error messages should provide a message number. The number is not intended for users, but rather for support personnel. The presence of the number removes the confusion of where the message came from, because many messages use similar wording.
The goal of input design is to capture accurate information for the system simply and easily.
Use online and batch processing appropriately. There are two general approaches for entering inputs into the computer system: online processing and batch processing. With online processing, each input transaction is entered and processed at the time the event occurs. With batch processing, all input transactions collected over some period are gathered together and processed at one time in a batch.
Capture data at the source. Perhaps the most important principle of input design is to capture the data in an electronic format at the original source or as close to the original source as possible. Some examples include bar code readers, magnetic stripe readers, smart cards, Radio Frequency Identification (RFID) tags, etc.
Minimize keystrokes. Another important principle is to minimize keystrokes. Keystrokes take time and are frequently incorrect. The system should never ask for information that can be obtained in another way (data retrieval or calculations for example). Likewise, a system should not require a user to type information that can be selected from a list. This is particularly important on small screen mobile devices, where typing can be slow and inaccurate. Use a default value for data when appropriate (i.e., date, time, shipping address, etc.).
Create a form that is simple to use and ensures the most accurate data possible. Each data item that has to be input is linked to a field, on the form into which its value is typed. As a general rule, entry of new data using the keyboard should be kept to a minimum since mistakes are common when type. Use selection input controls whenever possible, particularly if you are developing a small screen, touch-enabled application. Examples of these include check box, radio button, drop-down, combo box, up-down numeric, etc. Each field should have a field label, which is the text beside, above, or below the field, that tells the user what type of information belongs in the field.
All data entered into the system must be validated in order to ensure accuracy. To prevent invalid information from entering the system, computer systems should not accept data that fail any important validation check. There are six different types of validation checks. Every system should use at lease one validation check on all data entered and preferably, will perform all appropriate checks.
Completeness check – Ensures that all required data have been entered.
Format check – Ensures that data are of the correct type (e.g., numeric) and in the correct format (e.g., month, day, year).
Range check – ensures that numeric data are within correct minimum and maximum values.
Check digit check – check digits are added to numeric codes.
Consistency check – ensures that combinations of data are valid.
Database check – Compare data against a database (or file) to ensure that they are correct.
Outputs are the reports that the system produces, whether on the screen, on paper, or in other media, such as the Web. Outputs are perhaps the most visible part of any system, because a primary reason for using an information system is to access the information that it produces.
Understand report usage. The first principle in designing reports is to understand how they are used. Reports can be used for many different purposes. In some cases, reports are read cover to cover because all information is needed. In most cases, reports are used to identify specific items or are used as references to find information.
Manage Information Load. The goal of a well-designed report is to provide all the information needed to support the task for which it was designed. This does not mean that the report should provide all the information available on the subject – just what the users decide they need to perform their jobs.
Minimize bias. Report writers can introduce bias unintentionally. Bias can be introduced by the way in which lists of data are sorted or via graphic displays.
Types of Outputs
There are many different types of reports, including the following:
Detail report – Lists detailed information about all the items requested.
Summary report – Lists summary information about all items.
Turnaround document – Outputs that “turn around” and become inputs.
Graphs – Charts used in addition to and instead of tables of numbers.
Many organizations today produce reports electronically, whereby reports are “printed”, but stored in electronic format on file servers or Web servers so that users can easily access them. Electronic reports can also be produced on demand as needed, and they enable the user to search more easily for certain words. Furthermore, electronic reports can provide a means to support ad hoc reports when users customize the contents of the report at the time the report is generated.
Back to Top