Notes on UI Design

Aus Weis nix
Wechseln zu: Navigation, Suche

This information is based on the Books "Essential Guide to UI Design", CRC Press "User Interface Design" and "User Interface Design For Programmers".

Quotes from the Books

  • It is said that the amount of programming code devoted to the user interface now exceeds 50 percent."
  • The best interface is one that it not noticed, one that permits the user to focus on the information and task at hand, not the mechanisms used to present the information and perform the task.
  • Occasionally, when asked, people may prefer an interface design feature that actually yields poorer performance than another feature.
  • Design is a bootstrap operation — If the answer was clear, then the design work would be finished.
  • A user interface is well-designed when the program behaves exactly how the user thought it would.
  • Every time you provide an option, you're asking the user to make a decision.

GUI Fundamentals

Good GUIs are direct manipulation systems with the following characteristics:

  • The system is portrayed as an extension of the real world.
  • Continuous visibility of objects and actions.
  • Actions are rapid and incremental with visible display of results.
  • Incremental actions are easily reversible.
  • Indirect manipulation for difficult operations, limited interface capability, limited screen space, long tasks.

GUI design conclusions:

  • The design of an interface, and not its interaction style, is the best determinant of ease of use.
  • User preferences must be considered in choosing an interaction style.
  • In the overwhelming majority of cases, words are more meaningful to users than icons.
  • The content of a graphic screen is critical to its usefulness. The wrong presentation or a cluttered presentation may actually lead to greater confusion, not less.
  • The success of a graphical system depends on the skills of its designers in following established principles of usability.

Typical Web GUI Issues

  • Screen appearance influences by user hardware.
  • User focus information and navigation.
  • Presentation elements limited and not standardized.
  • Few constraints on navigation, frequently causing a lost 'sense of place.'
  • Context hard to maintain.
  • Basic interaction is a single click.
  • Response time cannot always be controlled.
  • Unrestricted visual presentation style.
  • Lack of integration with other applications on the Desktop.
  • Browser-secure implementation have function-limiting side effects.
  • Susceptible to disruptions of the network.

Practical UI Design Principles

  1. Create objects that can be manipulated:
    • Make them selectable and unselectable.
    • Add handles to object frames.
  2. Provide visual focus using:
    • Color.
    • Visual cues such as animation.
  3. Minimize distance between intention and effect (i.e. use revealing structures).
  4. Use Aesthetically pleasing design:
    • Use meaningful contrast for the page.
    • Use groupings for interface elements.
    • Use proper alignment of elements and groups.
  5. The interface should be visually, conceptually, and linguistically clear.
  6. Adopt the user's perspective (i.e. provide compatibility with the task).
  7. Make the system as comprehensible as possible. A user should know the following:
    • What to look at ...
    • What to do ...
    • When to do it ...
    • Where to do it ...
    • Why to do it ...
    • How to do it ...
  8. Provide configurability (enhances sense of control and active role of the user).
  9. Make the interface consistent and predictable:
    • Similar components should look and operate similarly.
    • The same action should always yield the same result.
    • Screen elements should be distinct and recognizable.
  10. Provide user control:
    • Actions should result from explicit requests.
    • Actions should be fast or user interruptable.
    • Never interrupt for errors.
    • Avoid constraining modes in the interface.
  11. Be direct:
    • Offer alternatives to accomplish tasks.
    • Make the effects of actions on objects visible.
  12. Design for efficienty and predictability:
    • Minimize hand-eye movement.
    • Shorten navigation paths.
    • Anticipate the users needs.
    • Provide cues to the result of an action to be performed.
  13. Keep the interface language familiar (i.e. use the users terminology and real-world metaphors).
  14. Make the interface flexible for different types of users.
  15. Make the system forgiving and allow for recovery:
    • Avoid errors before they occur.
    • Protect against catastrophic errors.
    • Provide constructive error messages.
    • Permit actions to be reversed (Undo).
    • Allow users to easily return to a starting point.
  16. The system must be responsive to actions (provide immediate acknowlesgement for user actions).
  17. Make the user interface as simple as possible:
    • Use progressive disclosure, hiding things until they are needed (present common and necessary functions first)
    • Prominently feature important functions.
    • Hide more sophisticated and less frequently used functions.
    • Provide defaults.
    • Minimize screen alignment points.
    • Make common actions simple at the expense of uncommon actions being made harder.

The Design Team

Provide a balanced design team that can help in these special areas:

  • Development
  • Human factors
  • Visual design
  • Usability assessment
  • Documentation
  • Training

The Design Process

It is important to keep the The Five Commandments of Designing for People in mind:

  1. Gain a complete understanding of users and their tasks.
  2. Solicit early and ongoing user involvement.
  3. Perform rapid prototyping and testing.
  4. Modify and iterate the design as much as necessary.
  5. Integrate the design of all the system components.

New-Generation Projects

The characteristics of new-generation projects include:

  • No defined product direction given to the design team at the beginning of the project.
(i.e. the team both defines the problem space and the product requirements)
  • No clear understanding of user requirements.
  • No clear definition of who will use the product.
  • Involves new or not-yet-existing hardware and software technology.
  • Constantly evolving product features.
  • No comparable existing product to benchmark against.

The leads to a number of additional issues and steps for such projects:

  • The usual starting stage of understanding user requirements is preceded by an Exploratory Design Stage.
  • The combined Exploratory and Refinement and Analysis Stages are much longer relative to the other types of projects.
  • The level of early user involvement needs to be much higher.
  • Limited applicability of task-analysis (large gap between the existing work model and the enhanced work model).

Issues/Problems to Solve in UI Design

The most common usability problems to solve:

  1. Ambiguous menus and icons.
  2. Languages that permit only single-direction movement through a system.
  3. Input and direct manipulation limits.
  4. Unclear step sequences.
  5. More steps to manage the interface than to perform tasks.
  6. Inadequate feedback and confirmation.
  7. Lack of system anticipation and intelligence.
  8. Inadequate error messages, help, tutorials, and documentation.

The most common web-interface issues to solve:

  1. Visual clutter.
  2. Impaired information readability.
  3. Incomprehensible components.
  4. Annoying distractions.
  5. Confusing navigation.
  6. Inefficient navigation.
  7. Inefficient operations.
  8. Excessive or inefficient page scrolling.
  9. Information overload.
  10. Design inconsistency.

Key Tasks

The user interface design process involves these key tasks:

  • Know Your User or Client
  • Understand the Business Function
  • Understand the Principles of Good Screen Design
  • Develop System Menus and Navigation Schemes
  • Select the Proper Kinds of Windows
  • Select the Proper Device-Based Controls
  • Choose the Proper Screen-Based Controls
  • Write Clear Text and Messages
  • Provide Effective Feedback and Guidance and Assistance
  • Provide Effective Internationalization and Accessibility
  • Create Meaningful Graphics, Icons and Images
  • Choose the Proper Colors
  • Organize and Layout Windows and Pages
  • Test, Test, and Retest

Stages and Steps (Overview)

  1. System definition: Define the scope of the proposed system and identify preliminary user categories and system services.
  2. User profiling: Create detailed user profiles for each relevant user category.
  3. Task analysis: Identify and record all relevant user activities of the current work practice.
  4. Design preparations: Restructure and reinvent the current work tasks.
  5. Usability requirements: Define usability requirements that the prototype and the finished system must meet.
  6. Conceptual design: Create a conceptual model of the system services that support all future work tasks.
  7. Prototyping: Design prototypes, using paper or computer, that reflect the conceptual model.
  8. Usability tests: Observe representative users testing the prototype. Evaluate how well the system meets the requirements and redesign the prototype if necessary.
  9. UI implementation: Support the system developers with user interface development skills during the implementation of the applications.

Stages and Steps (Task-Modelling)

The process of design by transformation utilizes two task-based models, one extracted from background information and the second a transformation of the first. The second is then transformed into the final design. In all, the design progresses through four distinct stages:

  1. Background Information — The requirements, real-life scenarios, and other information gathered before beginning the design.
    • Goals: system - purpose of the application, business - how does it affect business, organizational - how does it affect partners, user - how does it affect work
    • Environment: physical environment for the app, input/output of the app, objects of the system
    • People: end-users, customers, administrators, managers, auditors, what task do they perform
    • Constraints: What parts of the environment can be changed and which cannot?
    • Scenarios: current solution to tasks, frequency of tasks, obstacles and improvements to tasks
  2. Essential Model — A high-level description of the application’s fundamental functions without reference to technology or how the user will actually perform them.
    • extract goals from scenarios
    • extract preliminary list of objects background environmental description and the essential model tasks
    • restate goals as actions on objects
    • rewrite short use cases and verify for missing tasks
  3. User’s Model — The concepts, objects, and tasks as seen from the user’s perspective, free of presentation and interaction elements.
    • create metaphors by matching up elements of the essential model with things our target users already know about
    • test metaphors by restating the objects and tasks of the essential model in terms of the metaphor
    • sketch metaphor-based visuals as representation common to other applications on the target platform.
    • repeat with several alternative metaphores
    • write down a task tree expressed in the language of the user model
  4. Completed UI Design — How a person will see, think about, and interact with the application.
    • rough layout: simple sketches of proximate window layouts
      1. make design decisions: procedural or object oriented (structured/wizard vs. unstructured/object) interface
      2. define central User Scenarios and their Objects
      3. create layout with views and controls
      4. sketch scenario flows
    • interaction design: production of interactive prototypes
      1. review scenario flow
      2. perform visual prototyping
      3. use refinement approach to stay efficient
    • detailed design and specifications (final graphics, terminology, menus, messages, and dialogues)
Notes on User Models
  • How do I know what the user model is? Easy - Just ask them!
  • An important rule of thumb is that user models aren't very complex. When people have to guess how a program is going to work, they tend to guess simple things, rather than complicated things.
  • Always pick the simplest possible model.
Notes on UI Design
  • Design with respecting the user principle in mind:
    1. Users don't have the manual, and if they did, they wouldn't read it.
    2. Users can't read anything, and if they could, they wouldn't do it.
  • Don't be too creative and keep UI elements consistent and use accepted metaphors.
  • Do not require mouse-agility for usage (i.e. Users can't control the mouse well.).
  • Design with minimum memory principle in mind (i.e. Users can't remember anything.).