BUILDING PIVOT COLLECTIONS Jeff Weir User Experience Designer Live Labs jeffweir@microsoft.com Troy...

BUILDING PIVOT COLLECTIONS

Jeff WeirUser Experience DesignerLive Labsjeffweir@microsoft.com

Troy SchaulsSenior Program ManagerLive Labstroysch@microsoft.com

Want to get Pivot right now?

http://www.getpivot.com

WHAT’S PIVOT FOR?

Explore & Inspire

• It’s about following curiosities

• It’s about moving through set of data and exploring hidden or nuanced relationships

• It’s about extracting new insights from familiar data

Navigate & Act

• It’s about finding the needle in the haystack

• It’s about comparing a few “needles” with each other

• It’s about making a decision or taking action

- DEMO -

SO HOW DOES IT WORK?

• The Pivot experience is data-driven

• Pivot collections are just files• XML• CXML = collection metadata• DZCs + DZIs = collection visuals

• lots of image tiles

On The Disk

On The Disk

On The Wire

XML +Images

HTTP

HTTP

DZC & DZI: An Example

<?xml version="1.0" encoding="utf-8"?><Collection MaxLevel="…" TileSize="…" Format="…"> <Items> <I Id="…" N="…" IsPath="1" Source=“…"> <Size Width="…" Height="…"/> </I> </Items></Collection>

CXML: An Example

<?xml version="1.0" encoding="utf-8"?><Collection Name="…">

</Collection>

<FacetCategories> <FacetCategory Name="…" Type="…" Format="…" /></FacetCategories> <Items ImgBase="*.dzc"> <Item Name="…" Img="…">

</Item></Items>

<Facets> <Facet Name="…"> <String Value="…"/> </Facet> </Facets>

The Collection Container

< … BrandImage=“si.png">1

< … Name=“Sports Illustrated">2

<FacetCategories> <FacetCategory Name=“On the Cover”/> <FacetCategory Name=“Featured Athletes”/> <FacetCategory Name=“Sport”/> …</FacetCategories>

3

<Items> <Item/> <Item/> <Item/> …</Items>

4

Facet Definitions

< … Name="Position">1

< … IsMetaDataVisible="{T,F}"> 4

< … IsFilterVisible="{T,F}">3

< … IsWordWheelVisible=“{T,F}">2

Facet Types

< … Type=“String">1

< … Type=“Number“ Format=“$0”>2

Facet Types

< … Type=“Date">3

< … Type=“Link">4

Items

< … Name=“Robert …">1

< … Description =“…">2

< … Href=“http://www.msn.com/celebs?id=843">4

< … Img=“#23">3

Items

< … Href=“../ActorFilmography_Robert_De_Niro.cxml# ... Release Year …">5

HOW DO I MAKE A (GREAT) COLLECTION?

1. KNOW YOUR GOALS & AUDIENCEHow to make a great collection

1. Know Your Goals & Audience

Most questions can be answered by your goals and audience

2. TREAT CONTENT APPROPRIATELYHow to make a great collection

2. Treat Content Appropriately

A good collection

Visual DataDataVisual

Visually rich Data richor

2. Treat Content Appropriately

A great collection

DataVisual

Visually rich and data rich

2.1 Treat Visuals Appropriately

Few elements Many elements`

2.1 Treat Visuals Appropriately

No elements Too many elements

2.1 Treat Visuals Appropriately

AppropriateTypical

2.1 Treat Visuals Appropriately

AppropriateTypical

2.1 Treat Visuals Appropriately

$48,565

$23,800

$56,760

$35,200

$17,495

$22,245

2.2 Treat Data Appropriately

7-10 Facet Categories 20 Facet Categories1 Facet Category

Fill the info pane

2.2 Treat Data Appropriately

2.2 Treat Data Appropriately

3 ways to filter by date

Numeric RangeDate Picker Text Filters

2.2 Treat Data Appropriately

Format numbers

1999$1,999.89€1.999,89

3. DESIGN FOR DISTANCEHow to make a great collection

3.1 Design For Far Away

MajorVisible

2009 IUCN Red List Endangered Species Collection

3.1 Design For Far Away

MinorVisible

2009 IUCN Red List Endangered Species Collection

3.1 Design For Far Away

Limit to 1 major and 1 minor color

Major

Major

Minor

3.2 Design For Up Close

Portrait Square Landscape

3.2 Design For Up Close

Avoid variable aspect ratios

3.2 Design For Up Close

Avoid variable aspect ratios

3.3 Design For Deep Zoom

Rich content

3.3 Design For Deep Zoom

Rich adornments

Information importance

3.3 Design For Deep Zoom

3.3 Design For Deep Zoom

Easter eggs

4. AUTOMATE PRODUCTIONHow to make a great collection

4. Automate Production

Photoshop Data Sets

Tab Delimited File Photoshop Template Batch Processing

+ =

4. Automate Production

Toggle layer orgroup visibility

Insert images Replace Text

4. Automate Production

Image -> Variables -> Define…

http://help.adobe.com/en_US/Photoshop/11.0/

5. ITERATEHow to make a great collection

How To Make A Great Collection

1. Know your goals and audience2. Treat content appropriately3. Design for distance

a) Far awayb) Up closec) Deep zoom

4. Automate production5. Iterate

HOW DO I DEPLOY MY COLLECTIONS (AT SCALE)?

Data Store

1. Treat pyramids as assets• Batch build and catalog• Then build JIT, during “ingestion”

Survival Tips

2. Treat all collections as temporala. always generate CXML and DZCs on the fly, orb. regenerate & propagate

Survival Tips

Data StoreStagingHTTP

ProductionHTTP

1. Assemble 2. Review (& Revise) 3. Display

WHEN WILL PIVOT BE AVAILABLE?

• Pivot/Silverlight 4 coming Summer 2010

• Get Pivot and tools today – www.getpivot.com• get started with the Excel collection builder

• Collections you build today are portable between client and Silverlight versions • be sure to make JPEG pyramids

LASTLY, A CHALLENGE

We don’t think the best Pivot experiences will come from us. They will come from you.

What will you make?(We can’t wait to see!)

THANK YOUQUESTIONS?

Please fill out your evaluation forms :)

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,

it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.