Google Desktop
 Google Desktop Sidebar UI Standards

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 UI Guidelines
      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
Mouse Input
Display
    Graphics and Icons
    Colors
    Text
Formatting and Layout

Overview
Following these UI standards will better integrate your tile with the rest of the Sidebar. Also, by improving your tile's UI, more users will want to use it and keep it open on their Sidebar.

To start with, keep these general principles in mind:
  • Keep it 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.
Back to top

Mouse Input
Since users interact with most tiles via the mouse, mouse input related UI 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.
    • 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 view item details view
Back to top