System Analysis and Design - User Interface UI Design Notes

Introduction to User Interface (UI) Design

  • Course and Faculty Information: These study notes cover Course Code CSE 305CSE\,305: System Analysis and Design, specifically focusing on User Interface (UI) Design as presented by Dr. Md Rashedul islam. The reference sequence for this material begins at 9−09-0.

  • Definition of Interface Design: Interface design is the formal process of defining the mechanisms by which a system interacts with external entities. It is divided into two primary focuses:

    • User Interface Design: Specifically deals with how the system interacts with human users.
    • System Interface Design: Defines how the system exchanges information and data with other external systems.

  • Fundamental Parts of the User Interface: The UI is composed of three essential mechanisms:

    • The Navigation Mechanism: The method or path through which the user provides instructions to the system to perform specific tasks.
    • The Input Mechanism: The method the system employs to capture and record information.
    • The Output Mechanism: The method the system uses to provide information back to the user or to external systems.

  • Graphical User Interfaces (GUI): These are the most common interface types, utilizing windows, menus, icons, and other visual elements to facilitate user interaction.

Principles for User Interface Design

  • General Philosophy: UI design is characterized as an art form. The primary objective is to create an interface that is aesthetically pleasing and simple to navigate while simultaneously minimizing the physical and cognitive effort required by the user (9−49-4).

  • Core Design Principles:

    • Layout: The interface must be organized into a series of screen areas used consistently for distinct purposes.
      • A top area is typically reserved for commands and navigation.
      • A middle area is used for information input and output.
      • A bottom area is used for status information indicating the current state of the system.
    • Content Awareness: Users should maintain constant awareness of their current location within the system and the nature of the information being displayed.
    • Aesthetics: Interfaces must be functional yet inviting. This involves the strategic use of white space, colors, and fonts. A common design trade-off exists between maintaining enough white space for a pleasing look versus utilizing space for critical information.
    • User Experience (UX):
      • Novice or Infrequent Users: Prioritize "Ease of Learning."
      • Frequent Users: Prioritize "Ease of Use."
      • Design decisions often involve a trade-off between these two priorities.
    • Consistency: This allows users to predict the system's reaction before an action is taken. It is the most critical element for ease of learning, ease of use, and overall aesthetics.
    • Minimize User Effort: The interface should remain simple. A standard design benchmark is the "three-click rule," suggesting users should be able to perform their intended work in no more than 33 mouse clicks from the starting menu.

  • Consistency in Navigation Flow: The flow between different sections must remain uniform. Examples include:

    • Horizontal Flow: Moving from left to right across the screen.
    • Vertical Flow: Moving from top to bottom (e.g., from Product Information to Unit Selling Price to Fixed Costs down to Calculate/Clear/Quit buttons).

  • Form Density: High-density forms, such as the UGA (University of Georgia) Employment History "Employee Personnel Report," contain massive amounts of data fields (e.g., SOC.SEC.NUM., BIRTH DATE, FED EX, STATE EX, OASDI, HI, RETIRE, EIC, JOBCLASS CODE) and must be carefully managed to avoid overwhelming the user (9−89-8, 9−99-9).

User Interface Design Process

According to the materials (Copyright 20112011 John Wiley \& Sons, Inc., 9−99-9), user interface design is an iterative five-step process:

  1. Use Scenario Development:

    • A use scenario is a narrative outline describing the steps a user performs to accomplish a specific part of their work. These are tied directly to the Data Flow Diagram (DFD) (9−109-10).
    • Example: The Browsing Shopper:
      1. User searches for an artist or music category (1.21.2).
      2. User reads basic info, marketing material, listens to samples, and browses related tunes (1.31.3).
      3. User puts tune in shopping cart (1.31.3) and continues browsing (1.21.2).
      4. User reviews the cart, potentially discards tunes (1.31.3), and purchases the download.
    • Example: The Hurry-up Shopper:
      1. User searches for a specific artist or tune (1.21.2).
      2. User checks price and confirms information to ensure it is the correct tune (1.31.3).
      3. User purchases the download (Process 22) or departs the site.

  2. Interface Structure Design: Defining the structure through tools like Window Navigation Diagrams (WND).

  3. Interface Standards Design:

    • Defines basic design elements common across all system screens, forms, and reports.
    • Interface Template: Defines the general appearance of screens and paper-based outputs.
    • Defines names for major interface objects (building blocks) and common interface actions.
    • Icons are used to represent objects, actions, and their status (9−139-13).

  4. Interface Design Prototyping:

    • Creating mock-ups or simulations of screens and reports. Common approaches include:
      • Storyboards: Hand-drawn visual representations of screen sequences.
      • HTML Prototypes: Web-based mock-ups created using HTML.
      • Language Prototypes: Built using the actual programming language or development tools intended for the final system (9−159-15).

  5. Interface Evaluation:

    • The goal is to identify improvements for the design. Methods include:
      1. Heuristic Evaluation: Comparing the interface against a formal checklist of design principles.
      2. Walk-through Evaluation: A meeting where users are guided through the interface steps.
      3. Interactive Evaluation: Users are given the interface to try out themselves.
      4. Formal Usability Testing: A rigorous testing process to scientifically assess usability (9−179-17).

  • Basic Principles:

    • Analysts assume users have not read the manual or attended training and lack external help.
    • All controls must be clear, understandable, and located intuitively.
    • Prevent Mistakes: The primary goal. This involves labeling commands properly, limiting choices, and requiring confirmation for actions that cannot be undone (9−199-19).
    • Simplify Recovery: Include "undo" buttons whenever possible.
    • Consistent Grammar Order: Windows applications typically utilize an "object-action" grammar order.

  • Window Navigation Diagrams (WND): These diagrams (Figure 12−712-7) map out how a user moves between various system components.

    • Components include: Main Menu, Menu A/B/C, Form A/B/J/X, and Report F/K/L/Y/Z.
    • Example flow: A user on the "Client Menu" clicks the "Add Client" button to navigate to the "Add Client Form."

Input Design

  • Purpose: Input mechanisms facilitate data entry into the system. Design encompasses the screens and forms used for capturing information.
  • Goal: Capturing accurate data simply and easily (9−229-22).
  • Minimizing Keystrokes:
    • Keystrokes are costly in terms of time and money.
    • Information reachable via database retrieval should never be requested again.
    • Selection lists are preferred over manual typing.
    • Default values should be provided for the most frequent data inputs (9−249-24).

Output Design

  • Purpose: Outputs are reports produced on screens, paper, or other media (like the Web). They are the most visible component of the system (9−259-25).

  • Goal: Presenting information in a way that users understand accurately with minimal effort.

  • Key Principles:

    • Understand Report Usage: Design the report based on how it is actually used.
    • Manage Information Load: Provide necessary data without causing information overload.
    • Minimize Bias: Analysts must avoid creating slanted or misleading reports.

  • Bias in Visualizations: Graphs can be manipulated to exaggerate trends.

    • Unbiased Graph: The vertical scale begins at 00. (e.g., scale steps of 2020: 0,20,40,60,80,100,120,1400, 20, 40, 60, 80, 100, 120, 140).
    • Biased Graph: The horizontal scale is compressed or the vertical scale starts at a non-zero value (e.g., starting at 9090 with steps of 55: 90,95,100,105,110,115,12090, 95, 100, 105, 110, 115, 120) to make small changes appear more significant (9−279-27).
    • Historical data examples provided for years: 1993,1994,1995,1996,1997,19981993, 1994, 1995, 1996, 1997, 1998.