Google Desktop
 Design, User Interface, and Testing Guidelines For Sidebar Plug-in Authors

For Users
  Download Plug-ins
  Desktop Search Forum

For Developers
  Plug-in Development
  Download SDK
  Developer Guide
    Index API
    Query API
    Display API
      Script API
      Communication API
      Plug-in Design Guidelines
      Plug-in Tutorials
        Using Wizard
        Using Helper Framework
        Using ActiveX
    Action API
    Event API
    Plug-in Installer
  Submit Software
  Developer Forum
  Desktop Blog

Contents

Overview
Primary Functionality
Installation/Uninstallation/Over-installation
Accessibility
Boundary Tests
Performance/Load/Stress
User Interface and Usability
    Overview
    Mouse Input
    Display
        Graphics and Icons
        Colors
        Text
    Formatting and Layout



Overview

In order to improve your plug-in's quality and live up to users' trust in its quality, we urge you to follow these guidelines when designing, writing, and testing your plug-in. Also, on the non-technical front, your plug-ins should not violate Google's privacy policy.

In the User Interface and Usability section, we specify UI standards and expected behavior of various Sidebar UI components, such as the Details View and mouse input. Users expect to be able to interact in a consistent manner with all Sidebar panels, so you should pay particular attention to what behaviors a panel is expected to have and what common visual cues are shared among panels.

While many of the guidelines below are broken up into Design and Testing, keep in mind that you will also need to test that the Design guidelines have been met.


Primary Plug-in Functionality

Design

  • Mesh well with the rest of the Sidebar; do not slow down Sidebar or other panels' performance or crash Sidebar.
  • Do not interfere with other plug-ins' operations.
  • Make it easy and straightforward for users to halt your plug-ins.
  • Interaction with users or other programs (such as data sources) should not suffer significant delay; respond quickly to requests or other interaction.
  • Respond to any undesired actions with informative and helpful error messages.
  • Create any temporary files only in the user's temp directory, and delete them once they have fulfilled their purpose.

Testing

  • Test all user-visible features.
  • Run in conjunction with other plug-ins and the Sidebar to test for compatability or interaction problems.
  • Test response times, both of your plug-in and others to determine if you're affecting other Sidebar performance.

Back to top


Installation/Uninstallation/Over-installation

Design

  • Install and uninstall cleanly, leaving the Sidebar in a consistent state.
  • Do not overwrite Google Desktop files or DLLs.
  • If possible, do not force a system reboot during installation.
  • Explain clearly to users the installation and uninstallation procedure, with explanatory messages on the installer screens.
  • On install, your plug-in should appear on the Sidebar Add/Remove panel. On uninstall, your plug-in should be removed from the Add/Remove panel.
  • Consider different user roles for installs and uninstalls from regular usage. For example, you may want only Administrators and your power users to be able to install and/or uninstall plug-ins, while normal users should get a clear and explanatory error message displayed if they try to install or uninstall.
  • Allow installers to cancel an install midway through. If a midway cancellation occurs, roll back any already performed operations such that there is no trace of the attempted install.
  • Have verbose and informative install logging.

Testing

  • Test overinstalling a new version of a plug-in over any previous versions.
  • Test that installs and uninstalls are clean, and that the plug-in appears or disappears from the Sidebar Add/Remove panel as appropriate.
  • Cancel an install part way through and confirm that all previous operations are rolled back.

Back to top


Boundary Tests (If Applicable)

Design

  • Handle files or other data of significant size.
  • Handle special characters, such as @,$,!,%, and DBCS, in the data.

Testing

  • Test for large files or other data sources.
  • Test for empty files or other data sources.
  • Test for special characters in the data.
  • Test for extended lags or latency in the data.

Back to top


Performance/Load/Stress

Design

  • Allow for large amounts of data or resource shortages such as memory, CPU, or disk usage.

Testing

  • Test against large data sets and limited memory, CPU, and disk resources.
  • Test for memory leaks or other loss of data.

Back to top


User Interface and Usability

To start with, keep these general principles in mind:

  • Keep panels simple, clean, and minimal.

    Sidebar real estate is very limited, so only use what space you really need to display your information. Simple color palettes provide a clearer display and minimize esthetic conflicts with other tiles.

  • Test ease of use during development.

    Have others use your tile as you develop its features. Rethink UI aspects they find confusing or difficult to use. In particular, ensure your Help content is clear, useful, and comprehensive.

Users expect their interaction with Sidebar panels to be consistent from panel to panel. The following sections specify common visual cues and actions which should be the same across all Sidebar panels.

Back to top


General Design

Your plug-in should provide as many alternatives for actions and information as possible. Specifically:

  • Provide both mouse and keyboard alternatives for the plug-in's commands, including keyboard shortcuts for any menu commands.
  • Support tooltips.
  • Have a details view panel, if appropriate, as well as a right click context menu of available actions.

Back to top


Mouse Input

Since users interact with most tiles via the mouse, mouse input related UI in particular should be consistent throughout the Sidebar to avoid confusion. The follow visual cues tell users what sort of clicks the three main tile element types support.
  • Items: Show the tile's main content, such as articles in the news tile.
    • Single-click selects an item and opens its detail view.
    • Double-click opens the item in a new application window and also selects it in the Sidebar.
    • Mouseover temporarily highlights the item.
  • Widgets: Do something when clicked, such as buttons, checkboxes, stars, etc..
    • Single-click only! We reserve double-clicks for opening items.
    • Mouseover and mouseclick states look different than normal states.
    • Should look clickable, such as using a graphic with 3D shading.
    • Text also serving as a widget should, to differentiate it from normal text:
      • Display an icon next to the clickable text (see the Remove button example below).
      • Have its mouseover state look clickable or buttonlike.
    • Widgets are not items or part of items. Clicking a widget should not open an item's detail view.
    • Create the same button look and feel throughout the Sidebar by using the supported DrawItemBackground (set with different flags) on your text and graphics.
    • Widget examples:
        normal state mouseover mouse click
      checkbox
      (todo panel)
      normal checkbox mouse over checkbox click checkbox
      remove button
      (details view)
      remove button mouseover remove button click remove button
  • Status Indicators: Icons or graphics that show secondary information.
    • If part of an item, they inherit all the item's mouse behaviors
    • The graphic should not change on mouseover or mouseclick since they generally are not clickable.
    • Status examples (after-hours moon, network activity, weather clouds):

Back to top

Display

Graphics and Icons

  • You must provide an icon for your plug-in in 2 sizes. The icon design should be easily understood and appropriate for what your plug-in does.
    • 12x12 pixels: appears in the tile's title bar
    • 32x32 pixels: appears in the About this plug-in dialog and in the Alerts UI (if supported by your plug-in).
  • Icons in the tile should be 12x12 pixels. Use a simple shape and color palette due to the small size and to help people identify the tile quickly.
  • The following set of 12x12 icons are used in the default set of Sidebar tiles. You should match your icons' style to these, which have simple rounded shapes and mostly consist of shades of a single main color. The image itself is a flat 2D representation of what's in the tile. Each has a 1-pixel border in a shade of its main color.
Back to top

Colors

  • Use colors sparingly. If a shade of gray would work instead, use that.
  • Don't use colors that are too bright, or combinations that are very high or low in contrast. Try to avoid causing eyestrain. For example, the left image shows good color usage, while the one on the right is harder to read.
  • Don't rely only on color to indicate differences, since this can cause problems for your colorblind users. This example indicates stock price change directions both by color (red/green) and by text (+/-).
Back to top

Text

  • The user-specified system font and font size is also used by the Sidebar for its text display.
  • Normal text is black, while less important text is colored navy [#224499 or rgb(34, 68, 153)] or gray [#666666 or rgb(102, 102, 102)].
  • Avoid bolded text, if possible, as it stands out too much from the rest of the Sidebar.
Back to top

Formatting and Layout
Sidebar tiles can have four different views; regular, minimized, expanded, and detailed.
  • Regular view: Normal appearance.

    If you have a list of items, such as web clips, you can use the API-provided list layout. If displaying only one item, such as a photo, use a one-item list layout. Your tile's purpose should be clear just from looking at this view's contents.

    Keep in mind that you can show more or less information depending on the Sidebar's width. You should avoid scrollbars when possible and use an item's expanded view instead.

    Try to clearly and visually represent what kind of item it is. For example, file items should have the filetype icon next to the name. Summaries of a larger body of text, such as emails or webpages, should display the title as the first line along with brief details of the item's source and date.

    regular panel view

  • Minimized view: Just the title bar.

    Normally, the title bar simply displays your tile's icon and title. Instead of the title, you can also have it show a rotating one-at-a-time display of abbreviated items from the tile, such as your stocks and their prices.

    minimized panel view

  • Expanded view: Fully maximized view appearing beside the Sidebar.

    Usually used to display the full list of all tile items, with a vertical scroll bar available if there are many items to display.

    expanded panel view
  • Details view: Details of a particular tile item.

    This view can be launched from a tile's regular or expanded views by single-clicking an item and should show as much information as possible.

    Clicking on an item's title launches it in a relevant application, such as a webpage opening in a browser.

    item details viewitem details view
Back to top


Note: We suggest looking at the Timewarp plug-in as an example of a well-designed plug-in.

Back to top