BUILD 2012 Notes – The Microsoft Design Language – Tschumy

BUILD 2012, Redmond, Day 1, 30 Oct 2012, 2:15PM – 3:15PM

Will Tschumy

Principal user Experience Advisor




Why I joined Microsoft

  • In 2003, Microsoft made strategic investment in design
  • User experience thinking, re-design of Microsoft Word
  • Results: Office 2007 was fastest selling, most critically acclaimed version of Office
  • $20 billion / year bet on design


Next: Launch of Windows Phone 7


In 2007, same design language on XBox

  • Single consistent design language across all screens: phone, desktop, XBox


For Microsoft, our design principles are the language for our experiences

  • For customers–confidence, comfort & familiarity
  • Brings us together


Windows 8 start screen:


Weather app:


No chrome, edge to edge, all about content


The core idea

  • Content before chrome


Windows 8, did a lot of research

  • Asked Windows & OS X users what they remembered about using Windows
  • They drew the chrome
  • Then play with Win 8 prototype
    • Drew content in rectangles
  • With Windows 8, main thing users remembered was the content
  • Get OS out of the way of the users so that content can come through


Edges are important


Easy to get to edges, so we put controls there (charm bar, application bar)

  • Helps get chrome out of the way


Started thinking about monitors being sold

  • Most are widescreen
  • So flow content horizontally
  • Semantic zoom–no extra navigation for user


Five principles of Microsoft design

  • Pride in craftsmanship
  • Be fast and fluid
  • Authentically digital
  • Do more with less
  • Win as one


Pride in craftsmanship

  • Attention to detail: Every pixel counts
  • Safe/reliable – behave properly on other devices
  • Balance, symmetry, hierarchy
    • Built on 20×20 pixel grid
    • Skeleton on which to hang content
    • Placement on grid shows hierarchy
    • App will scale properly, no sub-pixel rendering
  • Tiles don’t need to be uniform
  • Doesn’t have to be rectangles
  • Can cheat margins, but do it deliberately
  • Sample apps  (Hulu Plus pushes off margins)



Be fast and fluid

  • Design for touch – touch first
  • Responsive – important when touching, must be responsive
  • Intuitive interaction – because of touch
    • Drag things in, drag things out
  • Immersive and compelling
  • Delight with motion
  • Life is mobile


Demo – Start experience, Netflix, Photos


  • Start Screen is very responsive; stuck to finger



  • Animation library – lots of little subtle gestures
  • Arrow drops down menu


Photos app

  • Very responsive
  • Pinch out, get to larger view, see more photos
  • Ghost effect
  • Sense of quality, elegance


Authentically digital

  • Embrace the medium
    • What is the role of design?
    • What is the role of the designer?
    • Is design inherent, or surface?
  • Modern
    • High Modernism, or International Style
    • Bauhaus
    • Designer should be offered no refuge in the past but should be equipped for modern world in its various aspects, artistic, technical, social, …
    • Icons – what value is there in having icons look like real objects, or shaded
    • E.g. Windows Explorer – most stuff in there is chrome
    • Semantic zoom in file explorer in Modern
    • Genesis of live tiles & semantic zoom
  • Cloud connected
  • Bold, vibrant colors
  • Motion


Do more with less

  • Be great at something
    • App fantastic at one specific thing
  • Focused and direct
    • Help users focus on what matters
  • Content before chrome
    • Only show secondary stuff (e.g. photo info) on swipe
    • E.g. Web browser, everything other than content is off screen
    • You see a bunch of widgets on each element, for discoverability.  Remove them and only show when relevant
  • Inspire confidence


Win as one

  • Work together to complete scenarios
    • ~45 separate contracts
  • Fit into the user experience model
  • Leverage the platform


Demo – Search, All recipes and People, IE and Wikipedia



  • Don’t need search charm; just start typing
  • Good example of contracts
  • Allows: surfacing your app in other contexts
  • App that you search most often will bubble up to the top



  • E.g. allrecipes
  • Share, People app, Facebook (from allrecipes app)
  • You avoid APIs to all these other services (e.g. Facebook)
  • “Catching” application worries about its API



  • From News app, select text, Share to Wikipedia–looks up that topic in Wikipedia


Think about how your app gets embedded in the user’s broader workflow


Windows reimagined

  • “The beginning is a delicate time…” –David Lynch, Dune, 1984
  • Asking us to reimagine our apps


How will your apps be reimagined?

How can you be authentic to the medium

Where will your app become alive?

What do your users need to focus on?

Integrate with the ecosystem?



  • (9 hrs of training)


Q&A  (33:47)


Wikipedia–Share vs. Search

  • Share: lets data get looked up from within the other apps
  • Even within Wikipedia, just start typing to search


How complex is sharing?  Data models passed between apps?

  • Yes, you can pass structured data, data types (e.g. URL, picture, etc)
  • The more esoteric the data, the more reliant you are on the catching app to interpret


Sharing text, interpret as URL, if not URL it fails and have to display to user

  • Probably a better result if you just accept URLs


How should devs refer to “Metro style”?

  • Won’t get into details of why no longer “Metro”
  • “Windows 8 Store Applications”


In what users remembered from Windows 8, were they remembering content?

  • Yes, they remembered images–rectangles were the content


This design language works great for content consumption.  What about creation, wouldn’t we want chrome like toolbars to be there?

  • Take a look at painting apps
  • Evernote Sketch – quick annotations
    • App bars pinned open
    • Users typically doing a lot of interactions
  • At other end of the spectrum, e.g. Sketchbook
    • Almost all canvas
    • Only need app bar when you change tool, which is less often
  • So think about the goal that you’re trying to solve
  • If user will spend a lot of time on the content, then worth focusing on content and get the rest of the stuff out of the way
  • But be very careful about pinning app bars open


Snap and fill view–design rationale for being able to snap out, but not snap in?

  • Keep user in control–risk in going into snap of having it snap unexpectedly
  • Coming out of snap–they know they are already in snap view


Interaction design pattern library for Windows 8?

  • Look at
  • Navigation styles, app bars, commanding
  • Human interface guideline document (280 pgs)
  • Photoshop templates for mocking up
  • Visual Studio 2012 Ultimate installs some prototyping tools in Powerpoint


For HTML, should sites be designed the same way?  Any guidelines?

  • You can use HTML5/JavaScript to build app or to build web experience
  • You’re starting to see tile-like interfaces on web sites


Discoverability–is it a tradeoff, where users don’t know how to do something?  E.g. Mom/Dad

  • We have looked at that
  • Devs should follow patterns that Microsoft is establishing
  • Following these patterns leads to consistency
  • Then users learn this stuff faster


Font size – 42 pts for headlines.  How do you decide how big to make font on various devices?  For largest display, when you’re further away, the font doesn’t look large enough

  • You can use brand fonts, but you should follow “type ramp”
  • Various ratios between font sizes and screen
  • Scaling–two strategies for an app
    • Everything gets bigger proportionately  (e.g. Photos)
    • OR You show more content  (e.g. Maps)
  • Depends on your scenario
  • With bitmap images, you should provide multiple images
    • 140%, 180%
    • Windows 8 will automatically pick appropriate resolution


Recommendations for designing app that does a lot of data input?

  • There are relatively few apps right now that do this
    • E.g. Credit card terminal apps
  • What’s important?  Quick, vs. entering data correctly


What kind of impact will design principles have on desktop applications?

  • You’ll already see this, e.g. Office 2013 preview, animations
  • The animations let you know where on screen to focus
    • Biologically, we notice motion / movement
  • Reader experience in Word–fast/fluid
  • Powerpoint, slide transition
  • Entire company (Microsoft) is behind this, pushing these principles


Difference between Microsoft design principles and Windows store apps?

  • Same thing


BUILD 2012 Notes – Developing a Windows Store App – Sheehan / Mockford

Build 2012, 30 Oct 2012, 11:45AM – 12:45PM


John Sheehan, Kieran Mockford

Building sample app in JavaScript/HTML


Windows 8 platform & changes made for Windows Store apps

  • Kernel – security, etc.
  • WinRT APIs
  • MVC layers
    • Can now do XAML with C++
    • For super high perf with C++, using DirectX
    • For JavaScript, use HTML for presentation layer
  • This new stack is for Windows Store apps



Desktop apps still possible

  • HTML in IE
  • C++ on Win32
  • C#/VB on .NET


Upgrade Win 7 box to Win 8

  • Better performance
  • All desktop apps will continue to run


Win RT

  • Old dev experience was kind of dated (programming to Win32 API)
  • Needed to rethink how devs built apps
  • New modern API surface, used for building Windows Store apps
  • LOTS of APIs in Win RT
  • Supports all sorts of languages (C++, C#, VB, JavaScript)



Developing Windows Store app

  • Code and markup – All starts with your code
  • Make it an app – Your app has unique value and identity
    • Publish to store
    • Needs tile
    • Splash screen
  • User expectations
    • Live tile – show latest info on the tile
    • Search – search within your app
    • Capabilities
      • Apps need to be trustworthy
    • PLM


Demo – From code to app



Weather app

  • Service up in Azure – returns blob of JSON with weather info
  • App will be JavaScript / HTML
  • Concept of “promise” in WinJS
    • Being standardized
    • xhr – change results into a promise, asynchronous
  • He gets object back with his data, can drill down into the data in debugger
  • Can take data, bind to HTML template
    • data-win-control=”WinJS.Binding.Template” (on <div>)
    • Assigning data to HTML elements, e.g. data-win-bind attribute to assign data to text element
    • template.render
  • Drop in CSS to format the page


Displaying additional weather data, in list

  • Will display it in a tile-based UI
  • Adding new elements to the namespace that we bind to
  • Now create template to render the list
  • Open app in Blend
  • App actually running within designer
  • Live DOM shown as you move around in designer
  • Assets panel, get ListView
  • Drag into Live DOM view
  • Set itemDataSource on ListView


Video in background

  • <video> element
  • Add video and play



  • No tile, no splash screen
  • In Visual Studio, you have logo.png, smalllogo.png, splashscreen.png, etc.
  • Replace these with your own logos and images
  • Two images for tile–logo and wide logo
  • In .appxmanifest, can specify that you have wide logo
  • Can turn off showing name on tile
  • Also set background color for app


Need to make tile live

  • Several different ways to do live tiles
  • createTileUpdaterForApplication
  • Call startperiodicUpdate method
  • Periodic service, returns XML document with some basic data
  • Can pass in argument to your service (e.g. for location)
  • E.g. Ping service each hour to update tile
  • Can make tile re-poll by turning tile off and then on again



  • Windows has Geo-Location API that lets you ask where user is located
    • If device has GPS, it’s accurate
    • Otherwise, it can use IP address to estimate location
    • Fairly close, e.g. town but not building
  • You need to specific that your app will use geo-location
    • Check Location on Capabilities tab
  • System then asks user if it’s okay for the app to use location
  • Strange error–where they are (Redmond), geo-location says they are in Texas


Search contract, so user can use Search charm

  • Declarations tab in manifest, you declare to Windows that you support Search
  • Write code to respond to Search request
  • Search is a “contract”




App Execution Environment

  • App Container – container where your app runs
    • You do everything by calling WinRT APIs
    • Most calls are direct API calls
    • Some calls, e.g. user location, are sensitive
      • Brokered API calls
      • Runtime Broker – makes sure you have access to what you’re calling
      • Uses your AppXManifest
      • So app needs capability in manifest AND user having granted permission


Process State transitions

  • Running
  • Suspended
    • When user is not using app, app is suspended
  • Terminated



As developer, you need to

  • Save things at suspension time, so you can remember where you were


Demo – Giving your app a memory


oncheckpoint event

  • WinJS.Application.sessionSate[“lastQuery”] = lastQuery
  • E.g. store last query done by user
  • Debugger has mechanism for triggering suspend/shutdown
  • Add code when app is reactivated after suspension


Be Better Together (work well w/other apps)

  • Pickers
  • Sharing
  • Protocols





  • Allows picking from places other than just a file system
  • Add to filters (FileTypeFilter.Add)
  • async on Button Click handler
  • await on call to PickSingleFileAsync within handler method
  • async/await – allows you to write code that behaves asynchronously, but looks synchronous
  • Can have multiple await decorated calls within the same method
  • Can pick data from files on SkyDrive


Demo – manipulate image and re-save to SkyDrive

  • Browsing samples
  • New Project – Online – Samples – Language
  • Can search for stuff within samples
  • E.g. WIC Image editor
  • Creates new WicImage object
    • Wic = technology for reading/writing different image formats
  • ImageEditor object, instantiated with WicImage
    • BeginDraw/EndDraw pair
    • DrawText, etc.
  • Their library contains these classes–WicImage, ImageEditor
  • Using Direct2D to do image stuff
  • C++/CLI => Cx
    • Still native code, but Cx controls object lifetime, memory
    • ComPtr<> – smart pointer
    • Need this for classic COM code
  • E.g. Use ComPtr for Wic interface APIs
  • In memory representation of Wic image doesn’t map exactly to Direct2D image
    • ID2D1Bitmap.CreateBitmapFromWicBitmap


To share something from your app

  • DataTransferManager.GetForCurrentView().DataRequested += (yourmethodhere)
  • Data packet that you send via data transfer manager
  • App can say–yes, I support sharing, but no data available yet
  • E.g.
    • Request.Data.SetBitmap(RandomAccessStreamReference.CreateFromStream(shareStream))



  • Starts with your code
  • Add character
  • Support user expectations
  • Sharing with other apps

BUILD 2012 Notes – Keynote Day 1 – Ballmer

BUILD 2012, Redmond

Keynote Day 1 – Ballmer

30 Oct 2012, 9AM – 11AM


Nice Windows Phone commercial, showing Steve’s phone

Steve Ballmer, Chief Executive Officer



  • Sold conference out in 53 mins
  • “Bigger venue next year”
  • Perfect time to get together
    • Windows 8
    • Windows Phone 8
    • Microsoft Surface
  • “How are they doing”?
    • 4 days after 1st day of sale for Win 8, Surface RT
    • Not huge amount of data, but..
    • Over 3 days, sold 4 million Windows 8 upgrades–individual users
    • Additionally, 10s of millions of units to corporate customers
    • Staples, Dixons – customers excited
    • Long lines at stores
  • What people are saying
    • Microsoft Surface is hot  (CNET)
    • 10 reasons to embrace Windows 8 now (
    • Windows 8 to bridge gap between PC, mobile devices
    • Boldest phone and software design  (Joshua Topolsky)
  • 3 big events since 1980
    • IBM PC
    • Windows 95  (mainstream, Internet)
    • Windows 8 / Windows Phone 8
  • Opportunity has never been better than today


Key Points for Windows 8

  • Best PCs ever made – hardware and software
    • ARM, x86
    • Desktops, laptops, tablets
  • PC and tablet; work and play; keyboard and touch
    • As much innovation in HW form factor as there is individuality in customer base
  • Alive with activity
    • Have built the experience that is essential for this generation
  • Phone is 1st class member of Windows family
    • The phone you want to own, if you own a Windows 8 system
    • 100s of millions of Windows 8 systems sold in next year
    • If you want the best experience with Windows 8, you’ll own Windows Phone 8
    • Killer hardware




These launches kick off the golden age of opportunity for Windows developers

  • Opportunity to build great applications is tremendous
  • Build across form factors–write one modern UI app across all
  • Easy to share code across form factors
  • Same cloud infrastructure across all devices  (SkyDrive w/Microsoft account)
  • Apps you build on Windows platform will be better than any you build elsewhere
  • Application experience is personalized to match each user
  • App is easier to use from discoverability perspective  — users find your app




IE 10 in Windows 8

  • Fast / fluid / touch-optimized
  • Build better web experiences


Demo – Windows 8 on new generation of hardware  (18:10)

  • Steve is doing the demo himself, using his personal account


Giant touchscreen – Perceptive Pixel – 82″ Windows 8 Slate

  • Eventually we’ll have these at reasonable price point


  • SkyDrive allows roaming data across all of your devices
  • Ink annotations in OneNote
  • SEAN: Sure, touch targets in Office are reasonably sized, when you run on an 80″ monitor.  :O)


Dell All in One – XPS One

  • With Intel Core i7
  • Search – no apps results
  • Click on various search targets to see results in each target
  • One search, results across multiple apps
  • Your apps can do this too
  • New Bing app
    • Can do search
    • Can drag to side of screen and tab through various pages, each page opened in IE
  • OOPS: Steve can’t quite grab touch target to move Bing app off screen–takes him 4-5 tries
  • News app
    • Any search term => newspaper format, with multiple stories
    • Can Share from news article, to various apps
    • Send e-mail via sharing, never left News app
  • Change lock screen on All in One; lock screen on large screen automatically updates (roaming)  (28:57)


Windows Phone devices

  • 4.8″ Samsung device
  • HTC phone
  • Nokia phone
    • We see ink annotations on OneNote doc, roamed from SkyDrive
    • Real-time, automatic roaming
  • Asus Vivo, 1.15 lbs detached
  • Screen detaches
  • Can ping something from within app out to Start Screen (e.g. Team in Sports app)
    • Any app can do this–deep links, ability to pin to Start Screen, with live info
    • (34:19)
  • Microsoft Surface
    • PC meets the tablet
    • Office apps built-in
    • Also good for play
    • Built-in: XBox Music
    • With every Windows 8 device, you get free streaming of music
    • Steve asks for song suggestions
    • Someone shouts out “Freebird” and Steve is baffled.  Hasn’t heard of it??
  • Tablet, notebook, or freestanding tablet


  • Lenovo ThinkPad Tablet 2, Intel Atom processor
    • Runs all Win32 apps
    • “Runs absolutely everything”


  • Acer Aspire S7-191
    • Most surprising to people
    • 2.38 lbs, i5 or i7
    • Touch laptops — cool
    • Likely this is what Software Developers will want
    • (42:27)
    • Develop and test on the same machine
  • Showing MSN for Windows 8, web site, optimized for Touch


“We’re all-in with Windows 8”

  • Every group at Microsoft has contributed something
  • E.g. XBox group


Video – XBox control from Windows 8 (44:44)






Steve Guggenheim – Corp Vice President & DPE


  • Spent last 5 years working on Hardware ecosystem
  • HW doesn’t come to life until SW is available
  • Will show some apps that show HW + SW, running on Surface


  • Agent P game
    • Disney brought app to Windows 8 using HTML5 / JavaScript
    • Can plug all kinds of peripherals into hardware
    • E.g. Game controller plugged in via USB
    • Can hook to TV via HDMI out, use game controller
  • Skype demo
    • HTML on front-end, C++ on back-end
    • Dock Skype to side, bring game back up on side screen
    • SEAN: Showing off using Windows to do 2 things at once?  For Windows users, what’s the big deal??


Running on all-in-one, Autodesk application

  • HP Workstation
  • Can lay down, open up case (?!)
  • All existing Win 7 apps just run
  • Autodesk built complementary app
  • Running Autodesk on Sony Vaio
    • Store files on SkyDrive
    • Switch to Sketch application
    • Use pen


  • Back to Phineas/Ferb game, on Windows Phone 8
    • Easy to move between devices


Economics & montenization

  • Use Windows Store engine
  • 70% of revenue goes to you
  • At $25k, you get 80% of revenue
  • In-app advertising and sales


Bing Travel app

  • Ad right in app


Fish with Attitude game

  • Real money, buy treasure in game
  • Payment: Microsoft, PayPal  (commerce engines)
  • Ability to monetize


ESPN app demo – Michael Bayle



ESPN app for Windows 8

  • Today – user access assets via web site
  • ESPN app aggregates all this extra content into one app
  • With pinning, semantic zoom, etc. — personal experience
  • First look at ESPN app



Back to Ballmer


Lots of apps:

  • E.g. SAP (ouch), DropBox
  • Twitter announced that they’ll build Twitter app for Win 8
    • SEAN: Only now??
  • With built-in People app, you can connect directly into certain apps
    • E.g. Facebook, Twitter


Unprecedented market

  • 670 million potential upgrades  (current Win 7 users)
  • 400 million new devices
  • Windows Phone rising
  • Marketing investment


Why write apps for Windows 8?

  • Key: Lot of people will use the app
    • Win 8 takes less resources than Windows 7
  • Predict we’ll see lots of growth & vitality in PC market
    • But even if PC market stays flat, will still be 400 million new devices you can target
  • Windows Phone
    • Small volume player today
    • Most differentiated approach to market
    • Killer hardware
    • Excellent opportunity
    • We will do more marketing and better marketing for Win 8
    • * applause *
  • This is a market (Win 8) that will explode
    • Can do your best work here
    • Can make money
    • Best opportunity for software developers today
  • “We need your support, we need your commitment”
  • For those of you in the room
    • Every BUILD attendee gets
      • 100GB SkyDrive storage for free
      • (Audience lukewarm reaction)
      • Surface RT 32GB with Touch Cover
      • SEAN: For drama, he should have taped a Surface to the bottom of each chair
    • Make me two promises
      • Go out and write lots of apps
      • Don’t run out and try to get them right now


Commercial for Windows Phone running



Kevin Gallo – Director of Program Management, Windows Phone



Four topics

  • Introduction to Windows Phone 8
  • How to develop apps
  • New features in Windows Phone 8
  • Advancements in native games


Most personal phone on the market

  • Kevin’s phone
  • What you care about most is front and center on the phone
  • Kid’s Corner
    • Special place for kids
    • You configure it for just the apps that you want them to use
    • “Phone inside of a phone”
    • Customized for the kid
  • Rooms
    • Groups of people, sharing notes, calendar, photos
    • Ideals for families


Windows 8 Developer Platform

  • Reimagined Windows platform
  • The Right platform at the right time
  • New hardware, new UI, common cloud services


New era

  • Ubiquitous mobile devices
  • Experiences transition across many devices
  • (1:18:09)


Announcing the release of the Windows Phone 8 SDK


Build apps that work on both Windows and Windows Phone

  • Shared Windows Core
  • Common API Set on top of that



Demo – Visual Studio

  • App – Picture Sharing
  • 3 projects
    • Win Phone 8
    • Win 8
    • Shared Code – C#, runs on both
  • Old C++ code, wrapped in .NET, with photo filters
  • HyperV-based Windows Phone 8 emulator


  • Easy to integrate code from other sources, e.g. C++


New features on Windows Phone platform

  • You asked, we delivered
  • Lots of new features


New features

  • Easy-to-build fast, fluid, UI
    • Better performance for existing controls
  • Live tiles, lock screen, wallpaper
  • Improved dev center and Store
  • Deeper integration w/phone experiences
    • E.g. lenses
  • Better multitasking
    • Location-based apps in background
  • Advanced networking
    • Bluetooth data transfer
    • Peer networking
    • Proximity connect (NFC)
  • TOTAL: 90% of top dev requests done



Demo – AR drone quad copter

  • Built phone app to control the drone


75% of top grossing apps are games

  • Common gaming platform for Windows
  • High-perf C++ code (e.g. Direct3D)
  • Store is global
  • In-app purchase of consumables (currency) and durables (game levels)
  • More ways to make money
  • Over half of all games using gaming middleware
    • E.g. Unity, Havok, Ogre, etc.



Demo – Unity – Tony Garcia



Unity on Windows Phone 8

  • Scripting engine for building game logic
  • Building game for Win Phone inside of Unity
  • Run scene inside Unity Preview window, for debugging
  • Deploy to Windows Phone
    • Build, creates Windows Phone 8 project
    • Creates Visual Studio project
  • Then run on device
  • Works on Windows 8 tablets as well



Back to Kevin


One more guest on stage – Richard Kerris from Nokia – VP, Global Head of Developer Relations

  • Lumia 920
  • Developers should get this phone first
    • We’ll give you a Nokia Lumia 920
    • Everyone gets one


Reduce registration from $99 to $8, for next 8 days