Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Infusion Builder v2.0 Interactions

Owned by Jonathan Hung
Last updated: Feb 14, 2011Version comment
4 min read

Table of Contents

Also see:

Intro

This document outlines the interactions of the Infusion Builder and is intended to be a reference for design and development.

Issues to address:

  • Exclusions
  • Communication of dependencies
  • Terminology and vocabulary
  • Download wait time
  • Download options: which to choose?

Wireframes

For wireframes, see Infusion Builder v2.0 Design and Wireframes.

Selecting Items

  1. if a chosen item has dependencies, then the chosen item and all dependencies become selected.
  2. if a chosen item has no dependencies, then just the chosen item is selected.
  3. if an item is already selected, and its parent then becomes selected, both child and parent are selected.
  • All checked items appear in the "Items in Package" list.

There is also a Select All button which allows the user to select all components.

De-selecting Items

  • if a chosen item has no dependencies, then just the chosen item is deselected.
  • if a de-selected item has dependencies (it is a parent), then the following checks need to be done:
    • if a dependency was chosen to be excluded chronologically after the parent was originally selected, then de-selecting the parent will keep that dependency excluded.
    • if a dependency was unchecked before the parent was originally selected, then de-selecting the parent will restore that dependency to its original unchecked state. i.e. If no items are initially selected, and the user selects Pager and then de-selects Pager, the result should be no selections as it was initially.
    • if a dependency was checked before the parent was originally selected, then de-selecting the parent will restore that dependency to its original checked state. i.e. If jQuery was initially selected, and the user selects Pager and then de-selects Pager, the result should be jQuery being selected.

Exclusions

  1. If an item that is automatically checked (because it is a dependency) and then unchecked, the item becomes "Excluded".
  2. Any subsequent selections requiring this item will check this item.
  • All excluded items appear in the "Omitted Recommended Items" list.

Exclusions Example 1: (See Wireframe - "Making Selection with Dependencies")

  1. Select Inline Edit
  2. jQuery becomes automatically checked.
  3. Exclude jQuery by unchecking it.
  4. Select Pager.
  5. jQuery becomes checked.

Exclusions Example 2: (See Wireframe - "Making a Selection That Includes an Excluded Item")

  1. select jQuery.
  2. unselect jQuery.
  3. select Inline Edit.
  4. jQuery becomes selected.

Exclusions Example 3:

  1. select jQuery.
  2. select Inline Edit.
  3. unselect jQuery
  4. Select Pager.
  5. jQuery becomes selected again.

Dependencies

It is possible for the user to build a package where not all dependencies are satisfied. The interface will inform the user of this state so they can correct their selections if it is a mistake.

  • When a required item is excluded, its dependents (the items requiring it) will be listed.
  • The order of dependencies will follow the order in which they appear from top to bottom of the Builder UI.
  • If dependencies are being shown for an excluded item, and a new dependency is added, it will appear in the dependency list in the order in which they appear from top to bottom.

Downloading

There are two download options in the Builder: Minified, and Source. There are two buttons for each action.

  • After selecting download items and options, there may be a significant delay from the time the "Download" button is pressed and when the "Save As" browser dialog appears. During this time, a graphical spinner appears, along with text indicating that the process can take a while.
  • While the download process is working all other interactive items are disabled on the page:
    • the other download button
    • Select All / Reset links
    • Checkboxes and text disabled.

Focusing disabled Download buttons

  • Download buttons can be disabled and still be focusable, but can't be activated.

Builder Verbage / Text

The text for each component should be reviewed and improvements made to readability and general appeal.

See Infusion Builder Interface Text.

Keyboard Navigation

The selectable list can be navigated using conventional keyboard interactions (i.e. using Tab to move from one item to the next) or by using cursor key navigation.

Conventional navigation tab order:

  1. Select All
  2. Select Reset
  3. First item in components list
  4. ...
  5. Last item in components list
  6. Download Minified Code Package.
  7. Download Source Code Package.
  • Space or Enter will select (check the checkbox) the item for download.

Cursor key navigation

  • Whenever focus is placed on an item in the components list, cursor keys can be used to navigate up and down the list.
  • Pressing Down will move the focus down one item. Example, if focus is on Infusion Framework Core, down arrow will put focus on FSS.
  • Pressing Up will move the focus up one item. Example, if focus is on FSS, up arrow will put focus on Infusion Framework Core.
  • Wrapping Enabled - pressing up at the top of the list, or down at the bottom of the list will wrap the focus around.
  • Space or Enter will select/deselect the item for download.

Keyboard focus, Mouse hover, and making a selection

  • Q: If one item has keyboard focus, and mouse hover over another. What will happen if the Spacebar is pressed? Will the checkmark go to the keyboard focus or the mouse hover?
  • A: The item in focus will become checked. Hovering is not Focusing an item.

Example:

  1. user keyboard focuses item #1.
  2. mouse then moved to hover over item #3.
  3. user presses Space/Enter.
  4. item #1 becomes selected.

Special Case Examples

Example 1: Remembering Previous States

  1. Load the builder.
  2. Select Infusion Framework core.
  3. Exclude jQuery. (So now Infusion Framework Core is included, and jQuery is excluded).
  4. Select Inline Edit, previously excluded jQuery becomes selected as a dependency. (So now Infusion Framework Core, jQuery, and Inline Edit are all selected)
  5. De-select Inline Edit.
  6. Selection returns to Infusion Framework Core is included, and jQuery is excluded.

Example 2: Overriding Previous States

This example follows similar steps as Example 1, but with a different conclusion.

  1. Load the builder.
  2. Select Infusion Framework core.
  3. Exclude jQuery. (So now Infusion Framework Core is included, and jQuery is excluded).
  4. Select Inline Edit, previously excluded jQuery becomes selected as a dependency. (So now Infusion Framework Core, jQuery, and Inline Edit are all selected)
  5. Exclude Infusion Framework core.
  6. Include jQuery.
  7. De-select Inline Edit
  8. Selection will be: jQuery, with Infusion Framework Core excluded.