Embed Size (px)
Citation preview
BUILDING PIVOT COLLECTIONS
Jeff WeirUser Experience DesignerLive [email protected]
Troy SchaulsSenior Program ManagerLive [email protected]
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.
