WEEK 12-13: DESIGNING THE INTERFACE

User Interface

Is the front-end application view to which the user interacts to use the software.

• Attractive

• Simple to use

• Responsive in a short time

• Clear to understand

• Consistent on all interface screens

The software becomes more popular if its user interface is?

Types of User Interface

1. Command Line Interface

2. Graphical User Interface

Command Line Interface

• Provides a command prompt, where the user types the command and feeds it to the system.

• The user needs to remember the syntax of the command and its use.

Graphical User Interface

• Provides a simple interactive interface to interact with the system.

• Can be a combination of both hardware and software.

• Using —-, the user interprets the software.

User Interface Design Process

Its analysis and design process is iterative and can be represented by a spiral model.

Analysis and design process of user interface four framework activities

1. User, Task, Environmental Analysis, and Modeling

2. Interface Design

3. Interface Construction and Implementation

4. Interface Validation

User, Task, Environmental Analysis, and Modeling

1. The process begins by analyzing user profiles, categorizing them, and gathering requirements to design the interface.

2. After the requirements are collected, a detailed analysis identifies tasks users perform to achieve system goals.

3. The user environment analysis examines factors like the physical location of the interface, whether the user will be sitting or standing, hardware accommodations for space, light, or noise, and any human factors considerations driven by the environment.

Interface Design

• The goal of this phase is to define interface objects and control mechanisms that enable users to perform tasks.

• It involves specifying task sequences (user scenarios) and how these actions affect the system state.

• Key design issues such as response time, command structure, error handling, and help facilities are addressed.

• Following Theo Mandel’s three golden rules, this phase forms the foundation for the implementation phase.

Interface Construction and Implementation

1. The implementation phase starts with creating a prototype to evaluate usage scenarios.

2. As the iterative design process progresses, a User Interface toolkit is used to build elements like windows, menus, device interactions, error messages, and commands, completing the interface construction.

Interface Validation

• This phase involves testing the interface to ensure it performs tasks correctly and handles a variety of functions.

• The interface should meet all user requirements, be easy to use and learn, and be accepted by users as a useful tool for their work.

Principles of Theo Mandel's Golden Rules for User Interface Design

1. User Control

2. Flexible Interaction

3. Interruptible and Undoable Actions

4. Customizable Interaction

5. Hide Technical Details

6. Direct Interaction

User Control

Allow users to easily enter and exit interaction modes without unnecessary actions.

Flexible Interaction

Support various input methods (keyboard, mouse, touch screen) for different users.

Interruptible and Undoable Actions

Enable users to pause or interrupt tasks without losing progress, and provide an undo option.

Customizable Interaction

Advanced users should be able to customize the interface for a more efficient experience.

Hide Technical Details

Users should not be aware of the system's internal workings; they should focus on their tasks.

Direct Interaction

Users should be able to directly interact with and manipulate on-screen objects to complete tasks.

Reduce the User’s Memory Load

1. Minimize Short-term Memory Demand

2. Use Meaningful Defaults

3. Define Intuitive Shortcuts

4. Use Real-world Metaphors

5. Progressively Disclose Information

Minimize Short-term Memory Demand

Design interfaces to reduce the need for users to remember past actions, inputs, and results, especially in complex tasks.

Use Meaningful Defaults

Provide initial default settings that suit the average user, allowing easy customization for additional needs.

Define Intuitive Shortcuts

Implement keyboard shortcuts that are easy to remember, helping users perform actions quickly.

Use Real-world Metaphors

Design the visual layout to resemble real-world objects or concepts, making the interface more intuitive.

Progressively Disclose Information

Organize information hierarchically, displaying high-level information first and revealing more details as needed when users show interest.

Make the Interface Consistent

1. Provide Task Context

2. Maintain Consistency Across Applications

3. Preserve Familiar Models

Provide Task Context

Display clear indicators of the user’s current task, showing where they are in the interface, where they’ve come from, and where they can go next.

Maintain Consistency Across Applications

Use the same design rules and structure across related applications, ensuring users have a consistent experience.

Preserve Familiar Models

Avoid altering established interactive models unless absolutely necessary, as users rely on familiar patterns.

Consistent Interfaces

Improve usability and user experience, making applications easier to use and more effective for users.

Key Principles for Designing User Interfaces

1. User Focus

2. Consistency

3. Simplicity

4. Feedback

5. Accessibility

6. Flexibility

User Focus

Design should prioritize the user’s needs, tasks, and goals, creating an experience that aligns with their expectations.

Consistency

Use consistent elements, like icons and menus, to help users navigate and learn the application easily.

Simplicity

Keep interfaces simple, with clear language and intuitive navigation to avoid overwhelming users.

Feedback

Provide immediate, understandable feedback to guide users and confirm their actions.

Accessibility

Ensure interfaces are usable for all, with adjustments like high contrast and screen reader compatibility.

Flexibility

Allow users to customize elements to meet their personal preferences and needs.

Forms and Reports

In user interface design for software engineering, ——- play a vital role in presenting and collecting information. Well-designed ——- ensure that users can interact with data in a meaningful, efficient, and visually intuitive way.

Form

• A business document that contains some predefined data and may include some areas where additional data are to be filled in.

• An instance of this is typically based on one database record.

Report

• A business document that contains only predefined data. It is a passive document used solely for reading or viewing data.

• Typically contains data from many unrelated records or transactions.

Forms

Are essential for data entry and user interaction. They allow users to input information, perform searches, and update or manipulate data within the system.

Key considerations for designing forms

1. Clarity

2. Logical Flow

3. Validation and Feedback

4. Efficiency

Clarity

Each field should be clearly labeled, with instructions or examples provided when necessary, to avoid user confusion.

Logical Flow

The layout of a form should guide the user logically from start to finish, often following a top-to-bottom or left-to-right flow.

Validation and Feedback

Forms should validate data in real time, highlighting errors and providing feedback to help users correct mistakes before submitting.

Efficiency

Include only the necessary fields to minimize the time users spend on the form, and use intuitive controls like dropdowns, checkboxes, and radio buttons.

Reports

Present data summaries, often for analysis or decision-making. A well-designed report helps users quickly access critical insights without combing through unnecessary details.

Key elements in report design

1. Data Visualization

2. Grouping and Sorting

3. Customization

4. Consistency

Data Visualization

Charts, graphs, and tables can help summarize data and highlight key trends or relationships, making complex information more digestible.

Grouping and Sorting

Organizing information in logical sections and allowing users to sort data can make reports more navigable and focused.

Customization

Allowing users to filter and customize the report output based on their needs enhances usability and relevance.

Consistency

Uniform formatting and labeling across reports improve readability and user confidence in interpreting data.

Joel Spolsky, Creator of Trello

“A user interface is well-designed when the program behaves exactly how the user thought it would.”