Section 0: Module Objectives or Competencies

Section 1: User Interface

• The user interface is any portion of the application that allows users to input data or commands into or receive outputs from the system.
• It includes the system aspects that are "visible" to users and that allow users to interact with the system's data, software, and hardware.

Overview

Video: What the #$%@ is UX Design?

Section 2: Approach to Interface Design

• The tasks to be supported by the system are analyzed.
• Based on the physical data flow diagrams or use cases of the proposed system, the user interfaces required for the system are identified.
• Based on an understanding of the system's tasks and intended users, the design of each user interface is specified and aligned with the users' skill level and the logical flow of their tasks.
• Prototypes of the interfaces are often constructed and demonstrated to the users to gain their feedback.

Note: Because a good interface combines aesthetics, usability, and functionality, some consider designing user interfaces to be as much an art as it is a science.

Five-Step Process for Interface Design

More on Task Analysis

Video: UX Design: Task Analysis

Usability Net: Task Analysis

Task Analysis a UX Designer’s Best Friend

Speaking of User Involvement...

Video: UX Design Basics: What is UX Design, UX Design Implementation

Section 3: Types of User Interfaces

External Documents

• External documents include all tangible "pieces of paper" that are used to gather inputs to or that are generated as outputs from the system.
• Examples: application forms, purchase orders, invoices, checks, bills of lading

Data Entry Screens

• Data entry screens are used to enter data into the system.
• A data entry screen is needed for ...
  • each of the system's master files or object classes so that records or object instances can be created, edited, and deleted, and
  • each transaction the system automates so that data about the transaction can be captured by the system.
• Minimizing the amount of data entered by the user can increase user productivity and reduce data entry errors.

Reports

• Reports summarize and organize data in a format meaningful to their intended users.
• A well-designed report should be easy to scan, highlight important facts, and use a consistent, symmetrical layout.
• Reports differ from external documents in that reports are generally intended for internal use and are produced by sorting, calculating, and compiling data stored in the system's database.
• Short reports that have a limited audience and are stored for only a short period of time can be generated as screen reports.
• Longer reports that have a wider audience and that are used over a longer period of time should be printed and distributed.
• Supplemental presentation

Human-Computer Dialog

• Human-computer dialog refers to the style of interaction between the system and its users.
• Types of dialogs include command, menu, form-filling, direct manipulation, or a combination of these.
  • Form-filling dialogs typically replicate a source document and require the user to fill in a form.
  • A direct manipulation dialog is one in which a pointing device such as a mouse is used to manipulate screen objects that perform system functions.
  • Direct manipulation dialogs are the currently the most common.
• The primary considerations in selecting a dialog type are the level of user expertise and frequency of use.
• Supplemental presentation.

Section 4: User Documentation

• User documentation is the part of the user interface that describes how to use the system.
• Designers and documenters should work concurrently so that documentation evolves as the system evolves.
• A poorly designed system is difficult to document; thus, documenters can serve as front-line testers of the system's usability.
• User documentation may include the following components:
  • A user guide that describes the system and explains its use.
  • A reference card that summarizes basic functions and commands.
  • Specialized guides that describe how to install the application or explain system error messages.
  • Tutorials that instruct users in the system's basic functionality.
  • An on-line help system that basically replicates the user guide and assists users in understanding and using system features and functions.
• One issue in creating user documentation is determining how material should be presented.
• The trend is to create self-documenting systems instead of making documentation a separate, add-on product.
• Most GUIs use the status bar to display a brief explanation of what a menu option or tool bar icon does.
• Having a few representative users try to perform use-case tasks by using the documentation is the best test of its clarity and completeness.

Section 5: Criteria for Evaluating User Interface Designs

Mental Model

• The user's mental model of the system consists of the concepts he or she uses to explain the behavior of the system.
• A well-designed interface helps users map what they want to do to what they can do, or what they did to how the system responded.
• Guidelines:
  • Make clear what actions are currently possible. (example: show available options in dark type and "gray out" other options.)
  • Provide timely feedback about the effect of user actions.
  • Anticipate errors and design the system to help users avoid them.
• Mental Models and UI
• Experience can inform. It can also distort. But inexperience is rarely useful. –– Robert B. Parker in Rough Weather

Simplification of Tasks

• The interface should help to simplify users' tasks.
• Guidelines:
  • Minimize user memory load by employing menus, function key mappings, pop-up windows, tool bars, and so on to remind users of frequently used features and functions.
  • Limit the number of menu options, open windows, and so on to adhere to the 7±2 rule.
  • Follow the Rule of 1.7. At the normal viewing distance from a monitor, the human eye can focus on an area only 1.7 inches in diameter. Thus, each circle with a diameter of 1.7 inches is a natural "chunk" for the human information processor. Arranging data elements on the screen into logical chunks of data, each chunk related to one task or one concept, will focus the user's attention and simplify task completion.
  • Create a simple, natural dialog by moving seldom-used features, functions, or information from the main application screens to sub-menus and screens.
  • Provide shortcuts to exploit the experience of expert users. Shortcut keys and keystroke combinations make an interface more flexible and thus more usable by a broader range of users.

Clarity

• A well-designed user interface makes clear what can and should be done.
• Guidelines:
  • Provide clear, understandable, relevant feedback. An hourglass, a clock, a gauge moving from 0 percent to 100 percent are all standard feedback mechanisms used to indicate that the system is busy.
  • Clearly indicate how to exit the system, cancel a command, or close a window.
  • Avoid technical jargon and cryptic system language in designing error messages. Where possible, suggest an action to recover from the error.
  • Use color, boxes, and font changes sparingly and logically to improve visibility and to focus the user's attention.

Consistency

• The interface must be consistent and its behaviors predictable.
• Interface standards (also known as application standards) specify design decisions and stipulate templates for window components, such as the title bar, type and location of options on a menu bar, and so on.

Section 6: Resources

• Video: The Future of User Interface
  
• Video: UI Design Process: From Sketch to GUI
  
• Video: How User Interface Design Impacts Your Brand Experience?