Developer Info : Collection Design

Introduction

At its root, designing a collection means deciding how to present a large amount of information at once. The key elements to designing a great collection are relatively simple: pick a subject matter with great images and interesting details, choose a small number of properties to filter on, and add links to related content. This page provides guidelines and details for each of the following:

• Design Process
• Facets and Facet Categories
• Organizing Facet Categories in Pivot
• Facet Naming
• Facet Values and Formatting
• Imagery
• Design Checklist

For documentation on the mechanics of creating collections, please see: Collection XML Schema and Collection Tools.

Design Process

Designing a collection is an iterative process. Start with something simple, then build it and try it. Add complexity gradually.

The basic steps are:

1. Define the Subject Matter
   First, decide what subject your collection will cover. Great collections typically involve subjects that someone would want to spend lots of time exploring, rather than a subject matter where the user is looking to pin-point data about a particular topic. They also enable the user to discover trends across all items using different views.
2. Define the User
   Second, define the user of your collection and their needs. For example, if you were building a collection about cars, a car racing enthusiast would want different content than a person shopping for a car.
3. Define the Key Tasks
   Third, define the key tasks the user will perform with the collection. Tasks can be both about specific goals and browsing. Decide on the key views and kinds of information you want the user to be able to see.
4. Choose Content and Data
   Fourth, choose the facet categories, details, links, default view, etc. that will help the user accomplish the key tasks. Edit or prune your data as necessary to get the best experience.
5. Evaluate and Iterate
   Finally, experiment with your collection to evaluate it. If you are using the Pivot collection tools (see Collection Tools), try using Quick Preview to explore your collection with placeholder imagery. Step through the key tasks from step three. If they can't be accomplished easily, go back to step four. Finally, go through the Collection Design Checklist.

 Back To Top

Facets and Facet Categories

Once you have chosen your subject matter, the most important step in collection design is choosing which facet categories and facets to use, and where to display them. Facets are similar to property values on an item, and facet categories are groups of facets. For example: if a collection had a facet category called "U.S. State," then "Georgia" could be a facet in that category. Facets can take several different forms in the Pivot client. Most notably, they appear as filters over a collection’s items, detailed information about an item, and/or links to related content. For more information on facet categories and facets, see Collection XML Schema.

The following diagram illustrates where facet categories and facets appear in Pivot.

The key points of control to keep in mind when designing facet categories (and thus the facets that will appear in them) are:

• Naming and formatting – Appropriate naming, formatting, and ordering of facet categories improve readability and comprehension. For details, see the Naming and Values & Formatting sections below.
• Presence as a filter – You can choose whether the category appears in the filter panel. If a category appears in the filter panel, it is also available as a sort option in the view.
• Presence in the info panel – You can also choose whether the category appears in the info panel, as part of the details of an item.
• Inclusion in keyword filtering – Keyword filtering allows the user to enter keywords to use as filters in a collection. It is generally recommended that only facet categories that help identify the item (ex: actor name) be included in keyword filtering, as opposed to more tangential properties (ex: an actor’s list of co-stars).

For more information, see the detailed sections below and Collection XML Schema.

 Back To Top

Organizing Facet Categories in Pivot

When you are designing a collection, consider the different parts of Pivot one at a time and decide what you want them to contain. Use the following guidelines to help you.

Filter Panel

Generally, collections are best with 5 to 8 categories in the filter panel. Although it may be tempting to include a large number of facets, this can often overwhelm the user.

To give the user lots of opportunity for exploration, try to find interesting combinations of categories that will occur when the user filters with facets from different categories at once.

Info Panel

When the user zooms in on a collection item, detailed information about it appear in the info panel. This part of Pivot serves two purposes:

• Providing Detail – Rich information allows the user to read details about the item they are looking at.
• Encouraging Exploration – Links help the user find similar or related items, or jump to other web content.

Title

This is the name of the item.

Description

This is a special field that is displayed above the property section of the info panel.

Properties

The properties section contains facets on this item. Along with dates and numbers, there are three different kinds of text that can appear here. See the following figure for reference:

• Filters - When clicked, these filter the collection to see other items that have the same facet (in the example above, the movie release year "2008"). If a facet category appears in the filter panel, it will also appear as a filter in the info panel.
• Static Text - If a textual category does not make sense as a filter or link, use static text.
• Links - These are normal hyperlinks. They may be used for creating linked collections (in the example above, a link to a collection of movies in the "Family" genre).

In some cases, you may want a facet category to appear differently in the filter panel from the info panel. For example, you may want to use a different format or type in each, even though the data is the same. In these cases you can create two facet categories: one to appear in the filter panel and another to appear in the info panel.

Other Links

The bottom section of the info panel contains a series of links to related content. They are:

• Related Collections – These are links to other collections that are in some way related to this item. For example, when looking at a collection of actors, there might be a link to a collection of movies this actor has starred in.
• Bing Search Results – These are links to Bing search results related to the item. By default, the name of the item is used as a search query to generate the links. Additional query terms can be added if the default does not provide good results. For details, see Collection XML Schema.
• Related Searches – These are links to other Bing searches related to this item.
• Notices and Copyright Information - The copyright attribution text (which can be a link) may be specified in the CXML. This attribution text appears at the very bottom of the item info panel.

 Back To Top

Facet Naming

In general, you want concise and clear names for facets and facet categories that don’t get truncated in common usage. Below are some guidelines:

• Capitalization – Facet categories should follow headline/title style conventions for capitalization. Facet values are case-sensitive, so make sure the values use consistent casing throughout.
• Plurality - Use the singular form of the category name. For example: Rather than naming a category "Countries," use "Country."
• Brevity and Redundancy - Use as few words as possible to name categories. Keep in mind that the user is already browsing within the context of your collection, so any concepts or words which inherently make sense in that context can be taken as implied. For example: in a collection named "Major League Soccer Players," a facet named "Player Position" could be shortened to "Position." A facet named "Average Points Scored per Game" could be "Average Points / Game," or simply "Average Points." Finally, use the active voice to avoid unnecessarily long phrases.
• Acronyms - While they help with brevity, acronyms may add confusion. Avoid them where possible, unless you know that the target audience will be inherently familiar with them. Try using abbreviations instead.
• Numbers - Use Arabic numerals ("1, 2, 3") rather than spelling them out ("one, two, three"). They’re shorter and easier to read quickly.
• String vs. LongString - LongString is a special type only used for info panel content to be wrapped onto multiple lines. LongString should be used for any text longer than a few words.
• Sorting Behavior - Sorting and grouping is strictly alphabetical. That means that when values starting with "The" appear in Pivot, they will be grouped with the T’s.

 Back To Top

Facet Values and Formatting

The following guidelines concern facet values, as well as facet formatting:

• Single Item Values - Avoid categories that have a very large number of facets, or categories where clicking a facet will frequently result in only one item being in view ("Social Security Number," for example). These categories provide a poor exploration experience, and are generally better in the info panel only. See illustration:

Recommended	Not Recommended

• Compound Category - You may encounter situations where you need to create a "compound category." Creating a compound category is a best practice for handling values which you want to display together in the info panel, but that would also make good filters if displayed separately. In this case, create special categories for each part of the UI. As an example, suppose you want to allow users to filter both by city and by state, but would like to display them in the form "city, state" in the info panel. In this case, you can create separate categories to put in the filter pane for City (ex. facet: "Atlanta") and State (ex. facet: "Georgia"), and a third for the info panel called Location (ex: facet "Atlanta, Georgia").
• Optimize Distribution for Interest – When examining each category, consider how they will appear in the graph view. If the data has large gaps or is very skewed, it will probably not provide a great distribution when sorted by that category. In this case, you should consider how omitting some facet categories, pruning whole outlier items, or bucketing your values could enhance the experience and keep the focus on the dense part of the distribution. If you choose to bucket the values, you might create a compound facet, as described above, where the actual value for an item is displayed in the info panel but the range buckets are displayed as filters.
• Consistent Weights and Measures - Use a consistent system (such as metric or English) across the collection.
• Currency - If the facet value represents a quantity of money, always use an appropriate currency format string.
• Number Formatting – In some cases, you may need to use a format string containing the "#" character. In this case, be sure to include a zero character in the format (at the end). See also the string format reference.
• Units - Include units in your number formats where appropriate, rather than in the facet names.

 Back To Top

Imagery

Given the visual nature of the Pivot experience, quality imagery is of utmost importance. Below are some guidelines for great imagery:

• High Image Quality - Images of at least 500px on the long side are recommended, but always use the highest resolution images available. Because of Pivot’s usage of Deep Zoom technologies, there is no extra waiting or other cost for the user if a collection contains big images. The higher resolution the image, the better!
• Consistent Aspect Ratio - The views in Pivot look best when the items are all similar aspect ratios. Consider pruning or replacing imagery for items with very divergent aspect ratios, as they will affect the layout and spacing of the entire view.

Using a consistent aspect ratio ensures a regular, dense collection view

• Source Image Format - It is recommended (but not required) that source imagery be in the JPG format (PNG if requiring transparency), and that compression be kept low when creating them (quality settings should be in the 85%-95% range). Images must then be converted to Deep Zoom format, see the Collection Tools and Collection Image Content pages for more information.
• Edge Treatments - If your imagery is white or very light on the edges of the images, consider adding a darker border to give it more contrast with the Pivot background.
• Enhanced Collection Imagery - Some collections may benefit from adding graphics and text to the items. Adding some simple layout and information design to the items can produce an even richer and more compelling collection. Graphical treatments work well to show higher level statistics, trends or classifications or label details that are very useful to have in-context with the image. Having this information in context allows the user to scan across multiple items quickly without having to look in the info panel for each one in turn. As such, these graphics should be easy to scan when zoomed out, but also provide additional detail when zoomed in.

Enhanced Collection Imagery

Additional Branding Elements

There are 2 optional images that you should provide along with your collection:

Resource	Format	Sizes
FavIcon (strongly recommended)	ICO	48x48	16x16
Branding Image (appears in the title bar)	PNG	90x29

Authoring Tip: Refreshing your collection will not force the FavIcon to be re-downloaded. For debugging, you can manually force your collection to re-download the FavIcon by deleting the icon cache at: %appdata%\microsoft\pivot\icons\.

 Back To Top

Design Checklist

• Basics
  • Is the collection named well? Would the target user understand what it is about?
  • Good quality iconography, branding and attribution?
  • Is the default view interesting given the subject matter and target user?
• Images
  • Good enough quality?
  • Would it help to add text or graphics to the items?
• Facet Categories and Facets
  • Are the categories in the filter pane the right ones? How many do you have? (5-8 is ideal)
    • Should any be added?
    • Are there any categories a user might need not in the collection currently?
    • Are there any categories with a long list of facets? If so, can the values be collapsed?
    • Are the categories in the right order?
  • Are the categories named properly? Do they use the correct conventions and will your target user be familiar with the terms used?
  • Are the facet values formatted properly?
  • Are the right categories in the info panel?
  • Should this collection be linked to other collections?
  • Are you happy with the search results?
• Can you complete all of the key tasks that you defined in the planning phase?

 Back To Top

Feedback

Join our technical discussion to interact directly with the Pivot team. We hope you’ll join this community and share your work.