Switchers: Application and Context Switchers

General Description

• Application Switcher
  • Switch Within A Family Of Applications:
    Example: from Sales to Support applications
  • Switch Between Modules Within A Family Of Applications:
    Example: from one HR module to another HR module
  • Switch Between Related Applications:
    Example: from a Sales application to Order Management application.
  • Switch Between Different Edition Or Version Of An Application:
    Example: from a recruitment application for manager to a recruitment application for employees.
    This is akin to switching roles.
• Context Switcher
  • Switching context in a page, changing page contents based on context.
  • Switching context in a page, changing page and subsequent pages contents based on context.

Guideline Attributes

Interaction and Usage Specifications

General Principles

Application Switcher

• Selecting an application name in the switcher choice list takes the user to the homepage or default opening page of another application.
  • An Application Switcher should not be used for linking to locations other than the homepage/default opening page of another application.
  • If the user needs a link to a specific location within another application, use a Content Container with links to the target location. The link text should identify the task to be performed in the context of the specific location in the other application.
  • A Content Container may also be used to highlight a more general list of related applications to which a user may navigate. This Content Container could be placed on the home page of the application, or on another page in the application where appropriate.
  • For more on Content Containers and navigating between BLAF applications, see the Interapplication Navigation, and Content Containers in Page guidelines.
• Ideally, the Application Switcher choice list would contain not only applications to switch to (as mentioned above) but would also tap into the list of favorites the user has set up in his/her portal. This list would appear as appended to the application list.
• The Application Switcher appears at the top of every page of applications in which it is used.
• The Application Switcher appears to the right of the global buttons. For bi-directionally rendered pages, it appears to the left.
• The Application Switcher is made up of a label, a choice or pulldown list, and a Go button that takes the user to the application selected in the pulldown list.
• The label defines the choice list and "Go" button functionality. The label should be "Switch Applications".
• The Go button must have an "alt" tag stating: "Go to Selected Application"
• The choice list may not contain a blank entry.
• The choice list is populated by default with the name of the active application.
• It is recommended to keep the names in the choice list to a reasonably short length. The pulldown list will grow horizontally according to the longest name in the list.
• Brand Area: Effect of Size on Switcher Label
  The switcher label is placed stacked or inline depending on the vertical size of the branding.
  • Regular Size Brand: Stack the switcher label
  • Medium or Small Brand: Place switcher label inline
  • Product branding/global button option is placed in the upper left corner of the UI. For bi-directionally rendered pages, branding appears at upper right.
  • See the BLAF Branding guidelines for more on branding options.
• When the Application Switcher is used:
  • The branding on the page changes to reflect the change of application or different version/edition of application.
  • The tabs may completely change, or tabs may be added or removed based on the switch of applications.
  • The content completely changes to the selected application content.
• Examples of Application Switcher Usage:
  • Switch within a family of applications: for example, from Sales to Support applications
  • Switch between modules within a family of applications: for example, from one HR module to another HR module
  • Switch between related applications: for example, from a Sales application to Order Management application.
  • Switch between different editions or versions of an application: for example, from a recruitment application for manager to a recruitment application for employees.
    • This is akin to switching roles.
    • Switching roles should not be explicitly exposed to the user as such, but exposed as another version or extension of an application family.

Context Switcher

• The context switcher is comprised of:
  • A context label
  • A choice list or a field with an LOV (List of Values) button, and
  • A "Go" button.
• The context switcher is located on the first header or page title on the page. It may not be used on any other header, subhead, or subsubhead on the page. For details regarding headers, see Header Guideline.
• The default context shown in the switcher is based on the currently viewed context.
• Context Switcher Interaction/Flow
  A user either:
  • Selects an item in the choice list, or
  • Fills out an LOV field or selects the LOV icon to help fill out the text field
  The user then chooses the "Go" button to refresh the page contents based on the new context.
• When the context switcher is used:
  • The branding does not change.
  • The tab/navigation does not change.
  • The content remains mostly the same, but the context switches.
• Examples of Context Switcher Usage:
  • Switching context in a page, changing content based on context.
    For example:
    • A user is looking at a detail page of database XYZ. He/She uses the poplist to change the view to database ABC.
  • Switching context in a page, changing that page and subsequent pages content based on context.
    For example:
    • A user is viewing assets for the Accouting department. There is an object list of assets, work requests regarding the assets, as well as other functionality regarding the assets of that organization. The user uses the context switcher to switch from viewing the accounting departments assets to viewing the marketing departments assets. All the pages now change to the marketing context.
    • A project manager is viewing the project schedule, resources, etc, for a skyscraper project. The project manager wants to check the status of another building she is managing. She uses the context switcher to switch from the skyscraper project, to the hospital project.

Visual Specifications

Visual Principles

Application Switcher Definitions:

• Elements of the Application Switcher
  • "Go" Button
    
  • Pulldown or Choice List:
    • Standard Web Widget
  • Switch Application Label
    • Font Face and Font Size = same as global button label (Note: The application switcher label is not a link.)
    • Font Color = black; #000000
    • Label Text = "Switch Applications"
    • Inline Layout: Label right aligned, left of choice list
    • Stacked Layout: Label centered horizontally under the "Go" button and pulldown/choice list.
• Measurement and Layout
  • Pulldown list is placed to left of the "Go" button.
  • "Go" button is 3 pixels away from pulldown list.
  • Spacing between application switcher and global buttons follows normal spacing between each global buttons.
  • Application Switcher is the right most component after the global buttons.
    For bi-directional rendering, the application switcher is the left most component.

Context Switcher Definitions:

• Elements of the Context Switcher
  • Header Line - see Header component - the context switcher is right aligned on top of the page title, or first header on the page.
  • Context Switcher label - Switch [Context/ObjectType] -- for example "Switch Projects" or "Switch Databases"
  • Standard Web Widget to choose context, as in one of the following options:
    • A Pulldown List of [objectnames] to switch to,
    • A LOV field.
    • Both a Pulldown List of [objectnames] and a LOV field in a single group.
      NOTE: Due to the width of data and the web widgets, this may cause unwanted horizontal scrolling.
  • A "Go" button to instantiate the selection in the pulldown list or field.
• Measurement and Layout of Context Switcher
  • All the elements of the context switcher are aligned right on top of the First header on the page or page title.
  • The label and data are separated by the same space as other label/data pairs.
  • The "Go" button directly follows the label/data pair or the field with the LOV.

Application Switcher Examples

Application Switcher with Regular Brand


Rollover on Go to Selected Application Button


Application Switcher with Longer Application Name


Application Switcher with Pulldown List Open - Family of Applications including Editions or Versions of Applications


Application Switcher with Pulldown List Open - Favorites from Portal Included in Pulldown List

Effect of Branding Size on Application Switcher Layout Examples

Regular Brand with Application Switcher - Label Stacked


Medium Brand with Application Switcher - Label Stacked Inline


Small Brand with Application Switcher - Label Stacked Inline

Context Switcher Examples

Context Switcher on Page - Pulldown List of Contexts


Context Switcher on Page - Field with LOV (List of Values) of Contexts

Open/Closed Issues

Open Issues

none


Closed Issues

01.2001 - application switching should not be done with "upside down tabs" or text images at the top of the screen.