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

2-116

 

 

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

 

Netflix

  • 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

 

Search

  • 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

 

Share

  • 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

 

Wikipedia

  • 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?

 

Resources

  • Design.windows.com
  • Windowsuserexperiencetraining.com (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 design.windows.com
  • 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

 

Advertisements

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

 

Image

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)

 

(5:36)

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

(Kieran)

 

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

 

Character

  • 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

 

Location

  • 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”

 

(34:30)

 

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

 

Image

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

 

Demo

 

FileOpenPicker

  • 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))

 

Review

  • 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

Image

 

  • 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 (geek.com)
    • 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

     

Image

 

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

 

Image

 

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

 

Image
Image
Image
Image
  • 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)
Image

 

Windows Phone devices

Image
Image
  • 4.8″ Samsung device
Image
  • HTC phone
Image
  • Nokia phone
    • We see ink annotations on OneNote doc, roamed from SkyDrive
    • Real-time, automatic roaming
Image
  • Asus Vivo, 1.15 lbs detached
Image
  • 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)
Image
  • 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
Image

 

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

 

  • 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)

 

Image

 

(46:03)

 

Steve Guggenheim – Corp Vice President & DPE

 

Image
  • 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
Image

 

  • 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 (?!)
Image
  • 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
Image

 

  • 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
Image

 

Fish with Attitude game

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

 

ESPN app demo – Michael Bayle

Image

 

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
Image
Image

 

(1:01:34)

Back to Ballmer

 

Lots of apps:

Image
  • 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

Image

 

Kevin Gallo – Director of Program Management, Windows Phone

Image

 

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
Image
  • 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

 

Image

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

 

Image
  • 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

 

(1:26:45)

Demo – AR drone quad copter

  • Built phone app to control the drone
Image

 

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.

 

(1:30:18)

Demo – Unity – Tony Garcia

Image

 

Unity on Windows Phone 8

  • Scripting engine for building game logic
  • Building game for Win Phone inside of Unity
Image
  • 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
Image
  • Works on Windows 8 tablets as well

 

(1:34:05)

Back to Kevin

 

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

Image
  • Lumia 920
Image
  • 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

Image

 

8 Traits of Great Metro Style Apps

Notes from http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

8 Traits of Great Metro Style Apps

Bonny Lau

1. Metro design style

  • Content before chrome
    • Leave only most relevant stuff on screen
    • Remove gradients
    • Use typography to shore hierarchy
    • Controls can be in app bar (Win-Z or swipe)
    • Use project templates

2. Be fast and fluid

  • Animation illustrates what is happening
  • Many built into controls
  • Animation library–standard animations
  • Touch-first
    • Windows 8 touch language
      • Press/hold to learn
      • Tap for action

3. Snap and scale beautifully

  • Screen sizes: 1024×768 on up
  • Larger screens, show users more content
  • Snap state

4. Use the right contracts

  • Share, Search, File Picker
  • Any app can share data with other apps
    • Source app provides something to share
    • Target app
  • Every app can be share source
  • Search contract
    • Search app from within Windows
    • Results displayed in app
  • File picker contract
    • Pull files from app or push
  • Invest in good tile

5. Invest in a great tile

  • Front door
  • Highlight content & brand personality

6. Feel connected and alive

  • Dynamic/relevant/personal content on tiles

7. Roam to the cloud

  • Every app gets per-user cloud storage for settings, state, etc.

8. Embrace the Metro design principles

  • Do more with less
  • Pride in craftsmanship (typography matters)
  • Be fast and fluid
  • Authentically digital (connected)
  • Win as one – contracts to work w/other apps

Windows 8 Developer Preview Install Screenshots

Microsoft released a Developer Preview version of Windows 8 at the BUILD conference on 13 Sep 2011.

Here are all of the the screenshots from a clean install of this build of Windows 8.  (Windows 8 M3, build 8102 – pre-beta Milestone 3).

When you power up the machine, the process of booting from the DVD begins.

The Developer Preview announces itself.

You get to the first install screen, where you get to select the language. Under the “Language to Install” option, English was the only choice.

After clicking Next, you get a screen giving you the option of doing the install or starting a repair operation.

After clicking the “Install now” button, the install starts.

The first thing you’ll see is the license agreement.

You then get the option to upgrade or do a clean install.  Note that, according to the keynote, you can not upgrade Windows 7 to Windows 8, but must do a clean install.

Clicking on the Custom button to do a clean install gets you to a page where you select a partition to install Windows 8 to.

The install process then starts.

Things proceed quickly, with the “Expanding Windows files” step taking the longest.

Once the basic install steps have completed, Windows tells you that it’s going to reboot before continuing.

Windows 8 now boots from the hard drive for the first time.  It announces itself once again as the Developer Preview and says that it is “Preparing”.

It then says that it is “Getting Devices Ready”.

When this step is complete, we see that Windows is “Getting system ready”.

And Windows will reboot once again.

After the reboot, we do some more “Preparing”.

And finally, we see the first configuration screen and the first appearance of a Metro style user interface.

In the first step, we give the PC a name.

We then see a Settings page, where we can accept the default recommended settings, or choose “Customize” to set things up explicitly.

When you select “Customize”, you’ll first be asked whether to turn on sharing.

You’ll then see some security-related settings (shown below as two separate screen captures).  It’s actually a little disappointing that they’ve made the text so large that you’re required to scroll to see everything on this page.  They should have either split this into two pages, or used a smaller font so that you could read everything without scrolling.

You’ll then be asked questions about what information you’re prepared to share with Microsoft.  It’s nice that they ask our permission for all of this, but you should note that these options are all ON, by default.

You’ll then see a settings page related to updates.

You now see a Log on screen, where you can log into Windows using your Windows Live ID.

You enter your e-mail address and Windows Live password.

Windows goes off and does something will all of these settings.

You get one more “Preparing” screen.

And Windows does a little more work in configuring your settings.

At this point, you’ll get a brief glimpse of the Windows 8 desktop.

Finally, the Metro user interface shows up, listing all of the apps that you can launch from Metro.

As you scroll to the right, you can see the full set of apps that show up in Metro in this developer preview.

At this point, Windows 8 is up and running.

Note that you can switch to the classic Windows desktop by clicking on the “Desktop” app in the Metro interface, or by pressing the Windows key on your keyboard.  You’ll see the familiar Windows desktop.

Clicking on the Windows icon at the lower left will switch you back to the Metro user interface.

BUILD Conference Notes #4 – Keynote, part IV – Windows Live

BUILD conference keynote, part IV.  Windows 8 and Windows Live.  13 Sep 2011.

Chris Jones.

  • InBox, multiple accounts

  • Share calendars

  • Connected address book

  • Photos – photos from various places

  • SkyDrive – accessible to developers
  • Connect devices via Live – e.g. navigate hard drive
  • Tunneling via Live ID
  • Sharing photos via mail

  • Connected contact list

  • SkyDrive via web site, access to all connected devices

  • Windows Phone 7.5, SkyDrive stuff

  • New Acer touch screen PC with Touch

  • Live apps are all written as new HTML5 Metro apps

  • Hundreds of other features in Windows 8 we haven’t yet seen
  • Sample apps

  • Teams built apps in 10 weeks
  • 17 teams, 2-3 devs per team, 10 weeks
  • College interns built all of the sample apps
  • Here are some of the interns

  • Hmm, intern said “turn on their Slate”
  • Steven, with more to say

  • Windows 8 Developer Preview – pre-release – Visual Studio 11 Express, Blend 5
  • Next milestone Beta.  Then RC, RTM, GA (General Availability)
  • Driven by quality, not by a date
  • Developer Preview will also receive updates
  • Customer Feedback will drive fixes that they make
  • http://dev.windows.com, can download preview, 10PM CST
  • No activation

BUILD Conference Notes #3 – Keynote, part III – Windows 8 Hardware Etc

BUILD conference keynote, part III.  Windows 8 Hardware and other new features in Windows 8.  13 Sep 2011.

  • Michael Angiulo, Corp VP, Windows Planning and Ecosystem

  • Super fast boot times
  • 8-sec bootup on current in-market laptop

  • Service automatically checks for root kits – tons of new security features

  • New power state – Connected Standby – very low power
  • One-click power switch on tablet – instant on/off

  • Killer feature – instant on/off, just like iPad
  • ATOM and ARM-based systems

  • USB 3.0 – much faster than 2.0

  • Windows 8 supports 256TB drives
  • 4.7 TFlops computing power on killer 3-graphics card system.  (2500x original Cray)

  • Unreal engine and DX11

  • All of Windows 8 is built hardware accelerated graphics
  • Only 1 pixel of chrome around the outside of apps
  • Touch working across wide variety of systems
  • If a screen can run Windows 7, it can automatically run Windows 8

  • 1366 x 768 – can do side-by-side in Metro
  • Sensor API in Win 8

  • NFC (Near Field Communication) built-in (sensor), to recognize objects
  • HD web cam app

  • Win 8 tablet with 3G

  • Resume from Sleep as fast as you can open the lid
  • Thin laptops

  • PC is mostly battery

  • Samsung table PC – 5,000 in warehouse

  • Everyone at BUILD gets one of these
  • “Samsung Windows Developer Preview PC”

  • 2nd generation Core i5
  • Dual monitor
  • 11.6″ diagonal
  • Loaded with Developer Preview of Windows 8
  • Comes with tools, apps

  • Win 8 smaller/faster on widest range of hardware
  • Windows 8 on “professional platform”

  • New Task Manager

  • Apps go into Suspended state when you’re not looking at them

  • New Startup mods in Task Manager
  • Services tab
  • Run command line tool to make current set of settings a baseline for restore
  • Standard performance benchmarks; run suites of tests; compare over machines or over time
  • Remote Desktop

  • Touch enabling on remote session
  • Hyper-V, can run on Windows

  • VHDs, can mount as drives
  • New ribbon in Windows Explorer; new Up button

  • Desktop background can span multiple monitors
  • Can customize taskbar for each monitor separately – i.e. show icons only for apps on that monitor

  • Swap monitor, e.g. run Metro on one monitor, app on another
  • Type “cmd” in Metro, search opens automatically, shows you cmd.exe

  • Weather app

  • IE10 in Windows 8

  • All the normal keyboard/mouse works as usual
  • Can open app in either Metro panel or with normal Windows desktop frame
  • Internet Explorer 10 Platform Preview 3
  • Mulit-touch in IE10

  • Magnifier

  • Ease of Access – can make everything bigger
  • Thumb-by-Thumb keyboard layout

  • Ink / Pen

  • All personal settings roam