Archives For win8

This week I’m fortunate enough to be in Redmond, WA at Microsoft HQ attending a Windows 8 deep dive summit with 25 other partners. While I can’t share everything we cover on a day-to-day basis, partly due to NDA’s and partly due to my brain and note taking capacities, I did want to share some of the highlights from each day.

For the most part these are taken directly out of my OneNote notebook, which means they’re pretty raw. Some of them might not make the most sense, but I’ll try to add context where I can. After the summit, possibly next week, I plan to take some the key pieces of information learned this week and expand on them in separate posts.

Below are my notes from day two of the summit.

Note: I have not included my notes from the first session. It was really cool, but the content is currently under NDA. Sorry Smile

Share code between Desktop Apps, Metro Style Apps, Phone Apps, and other .NET Platforms with Portable Libraries

  • Summary
    • Use code across platforms with portable class libraries
    • Use MVVM pattern for x-plat apps
      • Models and view models in portable class libraries
      • Platform specific views
    • Create portable abstractions for non-portable functionality
  • Portable class libraries
    • One source
    • One project
    • One binary
    • Multiple platforms
  • MVVM
    • Models – data object, business logic, etc. (portable)
    • View Models – what info to display, flow of interaction, etc. (portable)
      • INotifyPropertyChanged
      • ICommand
    • Views – how to display information, written in xaml (platform specific)
  • PCL
    • View Models
    • Models
    • Platform functionality abstraction defined
      • Defined as interface/abstract class
      • Implemented in view and passed to PCL
      • Example: file system interaction
  • Hooking platform-specific
    • Pass dependencies from view platform to PCL
    • Service locator
    • I from suspension
      • IOC

Windows 8 apps using XAML: Make your app shine

  • Goals
    • Handle lifecycle semantics within your app
    • Expand app’s presence by supporting multiple activation points
    • Light up your app with windows 8 charms
    • Navigation mechanics
  • Apps can provide a 1st class experience to users by integrating with Windows 8
  • App lifetime
    • Running >> Suspending >> Suspended >> Resuming >> Running
    • Suspended apps can get removed from memory because of system pressure
  • Prepare for termination
    • Event on app object
    • Serialize to local storage
    • BackgroundNetworkTask for long running service calls
  • Resuming
    • Event on app object
    • Deserialize from local storage

Windows Runtime Deep Dive

  • Windows has already provided compelling capabilities for developers to build upon
  • Windows has not always made straightforward to build upon (think COM)
  • Layers
    • Windows Store apps
    • Languages
      • DirectX, XAML, HTML/CSS
      • C++, C# / VB, JavaScript
    • Windows Runtime APIs
    • Windows Core OS Services
  • WinRT enables language choice
    • Language project builds interop for developers
    • WinRT Objects (projections) written in C++, C#, VB
  • WinRT is Natural and Familiar
    • Projections translate between language of choice (C++, C#/VB, HTML/JS) and native windows runtime
  • WinRT is rich in functionality
    • Media
    • Devices
    • Communications and data
    • User interface/experience
  • WinRT is fast and fluid
    • WinRT is async by default
  • WinRT enables Hybrid apps

MS IT Developer View and Lessons Learned about Windows 8 Apps

  • Designing a simple UI requires thinking
  • Web is least common denominator (most reach)
  • Native is the deepest (experience)
  • Studies show users prefer to us a mobile app over a mobile web page
  • From app centric tasks (facebook, twitter, messenger) >> To task centric apps (people, approve, etc.)
  • Task Centric Design
  • Lessons
    • Free your mind
      • Before you design/build a touch based application, use a tablet every day
        • Experience will drive your design
      • We are so conditioned to think within the mouse/keyboard constraints it takes time to start changing it
    • Avoid tile obsession syndrome
      • Win 8 design is often misinterpreted
      • It is NOT just about tiles
      • Tiles are just a visual cue that assists with the UI
      • Try to keep the idea simple and clear
      • Don’t overuse tiles
      • The main point of win 8 is about tiles, it’s about being
        • Clear
        • Fun
        • minimalistic (not too much text, too many colors, etc.)
        • Fluid
    • Don’t build a duck
      • A duck can walk, fly and swim, but it does all these things poorly (Brazilian proverb)
      • Don’t force a desktop application into a win 8 modern app
    • In Win 8 apps, each UI = 4+
      • Landscape, portrait, snap, full
      • X different resolutions
      • X (touch + mouse + stylus)
      • +tiles, secondary tiles, etc.
    • Desktop apps are OK too
      • If your requirements don’t fit into a win 8 app, that’s probably b/c you shouldn’t be building one
      • And that’s ok, turns out there are great desktop apps as well (office, visual studio, etc.)
    • C# and JavaScript are not the same
        • Some things can be done in JS only, others only in C#
            • Understand the trade offs (compiled vs. non-compiled) and the implications
            • In JS you don’t easily get
              • Compile time errors
              • Code coverage
              • Easy support for test automation
              • Great intellisense support (some, but not great)
              • Refactoring (find, replace, and good luck!)ut if your app needs one of those, building it in HTML5/JS will help you immensely
              • Rendering and dealing with html, especially advanced scenarios
              • Json serialization/deserialization (don’t have to know the types ahead of time like in c#)
              • Handling events from html
              • Calling rest services
    • JavaScript and C#
      • You can mix JS and C#
      • UI can be HTML5/JS that uses C#
    • Thinking about architecture
      • Generic LOB App = UI >> Broker >> Service
      • Metro App = HTML5 App => WinRC Library (C#) => .NET class library
        • Could be reused as a web application, with some caveats
      • Think about how much offline behavior you need
        • If you need a lot, then you’ll want C# components for management
      • Metro App = XAML App => WinRC (C#) => .NET class library
    • JS Web != JS Win 8
      • JS web typically
        • Is highly compressed (tough to maintain)
        • Mixes css, html, ui js, web service calls, etc. in the same file
        • Nearly no code comments (minifying)
        • Deals with highly optimized media comment (image compression)
    • How much reuse when migrating
      • From a web app to a win 8 app
        • Even if you can reuse the legacy html, it won’t look like metro (so what’s the point?)
        • Asp.net with server tags have far more than html
        • Problems with hover effects (links have to be more obvious)
        • More jquery – more reuse
        • More serve side pages/code behind – less reuse
        • (games are different than LOB apps)
      • Strategy: move to a single page model
        • Better ux
        • Optimized bandwidth
        • Very similar to the metro html5 architecture
          • Knockout js for mvvm data binding (similar to win)
    • Get used to constraints
      • Different perspectives
        • Windows mobile >> windows phone
        • Iphone >> windows phone
        • From windows 8 to windows 8 metro
    • Embrace consumerization
      • From soap to rest/json
      • From user manuals to self discovery
      • From standardized to bring your own device
      • Form plain web to apps
      • From backend names to task orientation
    • Add personality to your apps
      • It not just about squares, and master/detail views (think OneNote MX)

This week I’m fortunate enough to be in Redmond, WA at Microsoft HQ attending a Windows 8 deep dive summit with 25 other partners. While I can’t share everything we cover on a day-to-day basis, partly due to NDA’s and partly due to my brain and note taking capacities, I did want to share some of the highlights from each day.

For the most part these are taken directly out of my OneNote notebook, which means they’re pretty raw. Some of them might not make the most sense, but I’ll try to add context where I can. After the summit, possibly next week, I plan to take some the key pieces of information learned this week and expand on them in separate posts.

Below are my notes from day one of the summit.

Building Windows 8 Apps for the Enterprise: Part 1

Building Windows Store Apps for the Enterprise

“Great experience across hardware”

  • Not a laptop, not a desktop, not a tablet OS, any OS for all devices
  • 500,000,000 copies of Windows 7 sold, which can run Windows 8 (iOS and Android far behind)
  • Surfii (plural of surfaces)

Scenarios

  • Productivity with tablet
  • Portable workspace
  • Work anywhere
  • Secure device & data
  • Secure environment
  • BYOD
  • Support mobile workforce

Win Store Apps Types

  • Consumer
    • Facebook, Angry Birds, Pandora, etc. (examples)
    • Win store (distro)
    • Tech company (built by)
    • Consume (user)
  • B2C (easier to spend money with biz)
    • Fidelity, Home Depot, British Airways, Century 21 (examples)
    • Win store (distro)
    • Enterprise (built by)
    • Consumer (user)
  • LOB ISV
    • CRM, Jeppesen, BOARD Vantage, SAP (examples)
    • Windows store or side loaded (distro)
    • Tech company (built by)
    • Biz (user)
  • Custom LOB
    • Headtrax, Expense Approval, PLM, Company news (examples)
    • Side loaded (distro)
    • Enterprise (built by)
    • Biz (user)

LOB App Scenarios

  • PoS Systems
  • Dashboards
  • Product Catalogs
  • Monitoring and Action
  • Workflow Management
  • Field Apps

Windows Store Apps (Why?)

  • Mobility – suited for modern form factors and longer battery life
  • Increase productivity – touch first, fast and fluid xp w/live tiles, notifications and built in contacts (saves $$)
  • Performance – quick startup and designed to be async
  • Security – reduced sys vulnerability with isolated app containers
  • Use What You Know – same tools, languages and back-end infrastructure you already have
  • Deployment – easier, faster deployment with side-loading and zero-install

When Desktop and Web Apps Should Remain

  • Desktop Apps
    • Pixel accuracy apps like the CAD/CAM
    • Need chrome like Visual Studio, PowerPoint, Word, etc.
    • Need sys access like IT Helpdesk app
  • Web Apps
    • Does not need platform richness
    • Accessible across various platforms (i.e. non MSFT)
    • Need zero foot print

User Experience – Increased productivity

  • Designed for touch
  • Fast and fluid
  • Snap and scale beautifully
  • Use the right contracts
  • Invest in a great tile
  • Feel connected & alive
  • Roam to the cloud
  • Embrace modern ui principles

Biz app examples currently in the marketplace

  • Mobizy (productivity)
  • Rooms to Go – used by sales associates
  • Beer Ranger – sales reps
  • SAP – sales pipeline simulation

Auth & security

  • Auth
    • Integrated windows auth
    • App certificate my and root stores
    • Multi-factor auth
    • Federated adfs auth
    • SSO with live, facbook, etc.
  • Security
    • Isolated app containers
    • Robust capabilities fx
    • Support for ssl/tls
    • Crypto apis
    • App signing
  • Check out WebAuthenticationBroker info by Vittorio

Working with Data

  • Storage
    • Local store with db support
    • Local file sys and network shares
    • Your backend systems
    • Windows azure
    • 3rd party services
  • Synchronization
    • Roaming storage
    • Skydrive
    • Database sync

Building Windows 8 Apps for the Enterprise: Part 2

Where do windows store apps come from?

  • It direct distribution
    • Certified by corp
    • Installed and updated via it supplied processes
    • Built in house or purchased directly from ISV
  • Windows store
    • Certified by windows
    • Installed and updated by end users
    • ISV built business apps

Why put a biz app in the store?

  • Best of both worlds
    • default demo mode – free advert
    • switch over to real data via settings

Windows store

  • Apps certified by windows
    • Validation of the ISV
    • Technical certification
    • Content certification
  • Apps are managed by the user
    • Installation and update by user
    • Available to the user on other pcs (up to 5, roaming settings)
    • Rated and reviewed by the user
  • Payment/authorization
    • Can be done directly with the ISV
    • ISV can provide seat based licensing/discounts using windows store receipts

Sideloading

  • Can be done directly (Intel)
  • Use PS scripts (Intel)
  • Self-service portal (SSP) (Intel and ARM)
    • Actually an app
    • Think enterprise store
    • IT Manages
  • Can’t push apps to ARM devices

IT Direct Distribution

  • Apps certified by enterprise
  • Apps managed by the enterprise
  • Machines must be preconfigured by enterprise

Tips for Certifying Windows Store Apps

  • What capabilities are they requesting? Request only what you need
  • Are they providing a consistent Windows store experience?
  • Will they continue to run as expected on future versions of Windows?

Preparing Apps for IT Direct Distribution

  • Sign with trusted certificate
  • Run the windows app cert kit
  • Something else

Preparing machines for IT direct distribution

  • Group policy set for install all trusted apps
  • App signing certificates are trusted (can be self-signed)
  • Machine must be enabled for sideloading to launch apps
    • Win 8 enterprise or server and domain joined
    • Win 8 pro, Win rt, non-domain joined enterprise activate a secondary product key

Deploying windows Store Apps

  • As part of your Windows 8 base image
  • At runtime

PowerShell Deployment

  • Detect apps
  • Install/Update apps
  • Remove apps

Configuration Manager SP1

  • Deploy Windows Store Apps natively
  • Deploy Deep Links to apps in Windows Store
  • Inventory Windows Store Apps
  • Enable side-loading for machines

Deployment: Self Service Portal

  • Users can browse for LOB apps made available by IT
  • Four types of apps
    • Internally developed
    • Licensed by isv’s
    • Web links that launch websites and web apps in the browser
    • Links to app listings in the store (deep links)

AppLocker for Windows Store Apps

  • Restricts which apps can be installed
  • Allow/deny lists
  • Manage for users/machines

Managing the Windows Store

  • Disable access to the Windows Store
  • Disable automatic download of app updates (cannot prohibit users from downloading)
  • Configuration Manager SP1

Creating LOB Metro Style Apps in XAML Using Blend and Visual Studio

What is a lob app

  • Domain specific
  • Data driven
  • Existing patterns & frameworks
  • For the enterprise (common computing platform desktop/laptop)

Design Principles

  • Pride in craftsmanship
  • Be fast and fluid
  • Authentically digital
  • Do more with less
  • Win as one – no matter what device you’re working on, it just works

Blend and VS

  • Blend is optimized for visual design tasks
  • VS is optimized for coding and debugging
  • XAML designer is the same in both

Templates – evolution

  • WPF no template – blank slate
  • Silverlight Navigation App template
  • Windows Phone metro templates with margins, fonts, etc.
  • Windows 8 grid and split templates (master/detail, groups/items, etc.)
    • Full screen
    • Snapped
    • Filled
    • Landscape
    • Portrait
    • High contrast

Layout aware pages

  • Support orientation (portrait or landscape)
  • Default view model (just a dictionary)
  • Process lifetime management
  • Navigation & Keyboard bindings

AppScope

  • Apps can be launched, via search, tile, secondary tile, contracts, etc.
  • State management and back stack handled by templates – developer needs to override LoadState in layout aware pages

Windows Live Tile & Notifications

Why tiles?

  • Make your app alive with activity using tiles and notifications
  • Your app appears to be running/active even when it’s not
  • Give users a window into your so they’ll want to engage with it more

Carefully consider what your tile represents and how users will get value out of it. Creating a tile that simply contains your application’s logo does not provide value to the user.

Think about the type of data you want on the different sizes (square, wide) of tiles

Basic tile

  • Tap on to launch or switch to the application
  • Static default tile specified in the application manifest
  • Two sizes
    • Square (1 x 1)
    • Wide (2 x 1)
  • Both sizes can have live updates
  • Basic tile content does not link into app, but the content should be made readily available once the user in the app.

Live tiles

  • Updated using pre-defined templates
  • Provide rich rending options
  • Text-only, image-only, or combination
  • Jpeg, gif, or png, max size 200 KB
  • Optional peek animation
  • Local, scheduled, periodic, and push updates
  • Badges are updated separately from text, glyph and image in tile
  • Won’t be shown if there is an issue with the image

Notification extensions library ships with the SDK sample

Notification Queuing

  • By default only last notification shown
  • Opt-in automatically cycle tile through last five notifications
  • Notifications have tags
    • Tag matching used to replace notifications
    • No tags = FIFO ordering

Secondary tiles

  • Created by pinning content from app
  • Pin initiated by app via simple runtime call
  • User confirms pin operation via system ui
  • Exposes a personalized surface for app
  • Same capabilities as app tiles
  • Can be roamed from install to install (machine to machine), default is to roam, can be turned off
  • Need to query to determine if tile has been pinned/unpinned
  • Tiles can’t be pinned without asking user first

Toast notifications

  • Deliver transient messages outside the context of the app
  • Use to get the user’s attention immediately
  • User is in control and can permanently turn off toast notifications from your app
  • Allows quick navigation to a contextually relevant location in your app
  • Best are personally relevant and time sensitive
  • Give on/off switches within the apps for different types of messages
  • Do not use for advertisements
  • Provides a contextual launch point into the app (similar to secondary tiles)
  • If sending toast from cloud, consider when toast is not delivered (i.e. notifications turned off)…deliver a tile update in its place
  • Desktop apps can send toast)

Toast templates

  • Same architecture as live tiles
  • Numerous rendering options available (not as many as tiles)
  • Will be shown if there is an issue with the image

Notification delivery mechanisms

  • Local – send while your app is running
  • Scheduled – schedule in advance at the precise time you specify
  • Periodic – update tiles and badges at fixed time intervals by polling a cloud service
  • Push

Images

  • Can be placed on the web (publicly accessible)
  • Installed as part of app
  • Downloaded from web
  • Tile images can be localized

Push Notifications Service

  • Enables delivery of tile and toast notifications over the internet
  • Updates and notifications show to the user even if your app is not running
  • Wns handles communication with your app
  • Scales to millions of users
  • Wns is a free service
  • Provides create power savings for devices
  • Channel Uri’s are time limited (30 days)
  • Consider single user with multiple devices and multiple uri’s
  • http://manage.dev.live.com/build (get a temp key for wns)
  • Sideloaded apps can’t have push notifications
  • Wns must be used, no on-premises story at the moment, currently being worked on

When should I update my tile or toast?

  • Personalized, real-time status (push)
    • A friend achieves a new high score within a game we share
  • Subscribed tailored content updates (push)
    • Ongoing sporting event scores or breaking news
  • Application launch/usage (local/push)
    • Update app tile to match more recent app content
    • Clearing the unread mail count when mail is opened
  • Periodically for non-personalized content (periodic)
    • Every 20 minutes for stock or weather updates
  • Missed toast notifications

When should you not update tile

  • High frequency, streaming updates
  • Do not clear the tile when the app launches/exits
  • Do not update to explicitly replace ‘old content’
    • Set the optional expiration on the tile at the time it is sent
    • Only send new updates if there is new data to show the user
    • Default expiration for wns push notifications is 3 days (local notifications don’t have default expiration)
  • Do not depend on tile ordering
    • Notification queue tile order is not guaranteed
    • Use tags to replace specific tile updates

Raw notifications

  • Notifications without UI content
  • Delivered directly to app
  • Same uri and push mechanism
  • Can be used to trigger background application actions

Moving Web Applications to Windows 8

Why take web apps native?

  • Take advantage of advanced features and controls
  • It’s easier to monetize native apps compared to web apps
  • Reach new audiences
  • Be where your customers are (everyone is in an app store these days)
  • Discoverability – it’s easier to find an app in a store than on the web
  • Manage the update process

Why web technology for native apps?

  • BYOL – Bring your own language. Allows developers to code in languages they are most comfortable with
  • Services a broader developer community
  • HTML5 has inertia and is maturing quickly
  • Share assets with web based apps

Skills required

  • JavaScript
  • HTML5
  • CSS
  • MVC (Model View Controller)

Advantages of JavaScript Windows 8 Applications

  • Not a web view (on iOS web views have resource constraints that often cause performance issues
  • Full features and functionality as IE
  • Full memory allocation as IE
  • Just an additional library (WinJS) is required
  • Access to WinRT API’s (camera, notifications, compass, accelerometer, etc.)
  • All web standard code runs inside of the application
  • Performance meets or exceeds what is in the browser

metro-pass-0020

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465400.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx

While Windows 8 provides developers with the opportunity to distribute their apps to millions of users around the world, it also presents challenges when it comes to making it great looking apps. The primary challenge has to do with the fact that Windows 8 will run on a wide variety of form factors. I harken back to the days of Windows Mobile (not Windows Phone) development where, more often than not, developers would need to create a UI for each device their apps would target. Not an ideal scenario. Will developers need to do the same for Windows 8 Metro style apps? Not necessarily. After all, Windows 8 offers built-in scaling out of the box to ensure that apps and content look great. To ensure apps look great when scaled, developers just need to make sure they use a fluid layout and scalable graphics.

Below is a list of what to do and not to  do when it comes to scaling on Windows 8:

Do Don’t
Use scalable vector graphics Don’t use smaller images that are scaled up
Use resource loading for bitmap images in the app package Don’t use larger images that are scaled down
Use the resolution media query for remote web images Avoid specifying sizes that aren’t multiples of 5px
Use the File Access Thumbnail APIs for user images on the file system  
Manually load images based upon scale percentage at runtime  
Specify width and height for your images  
Use typographic grid-units and sub-units  

For details about about each of these, visit the MSDN source links.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465400.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx

Just a quick note, I’ll be taking a break from the Metro Pass series for the next couple of weeks as I have a number of other topics I’d like to cover.

metro-pass-0019

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/desktop/hh848075(v=vs.85).aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465410.aspx

In order for you Windows 8 Metro style app to be published to the Windows Store it must pass Microsoft’s testing process. Fortunately, for you, you can run your apps through a number of Microsoft’s tests by simply using the Windows App Certification Kit (ACK). The ACK is used to validate compliance with certification requirements, and replaces the Windows Software Logo Kit (WSLK) used for validation in the Windows 7 Software Logo program. Desktop, desktop device, and Metro style apps can be certified. The Windows ACK is included in the Windows Software Development Kit (SDK) and the Windows SDK for Metro style apps.

The ACK tests your Metro style applications in the following categories:

App failures

The app must not crash or hang. App failures, such as crashes and hangs, disrupt and frustrate customers. Eliminating such failures improves app stability and reliability, and overall, provides customers with a better experience.

App manifest

The app manifest must contain all the required attributes.

Windows security features

The app must use Windows security features.

Supported platform APIs

The app must use only APIs from the Windows Software Development Kit (SDK) for Metro style Apps.

Startup performance

The app should have a fast and responsive startup experience while consuming a reasonable amount of system resources (CPU, file IO, memory, and so on) to enable fast switching and multitasking between previously unopened apps.

Suspend performance

The app should have a fast and responsive suspend experience while consuming a reasonable amount of system resources (CPU, File IO, Memory, and so on) and making sure that resources are released efficiently.

App package resource validation

The app manifest must have valid resources defined in the resources.pri file, as explained in the App package manifest schema.

.NET version check

The app must use .NET 4.5 or later.

To be clear, desktop (non-Metro style) apps do not have to be certified to run on Windows 8. However, desktop apps, like Metro apps, must be certified in order to be listed in the Windows Store.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/desktop/hh848075(v=vs.85).aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465410.aspx

metro-pass-0018

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx

I can’t stress enough the importance of prototype and validating your Metro apps early and often during development. You, or your team, may have a Metro app in mind. Perhaps you’ve even gone through the planning and have answered the questions raised in this series of blog posts. However, you need to keep in mind that you and/or your team are a small number of individuals. You need to know how your true end users will view your application. If you don’t, you will end up simply creating an application for yourself.

You want to be sure to start getting this feedback early on in the development process. It’s easier to address issues as they arise rather than waiting until the end of the development cycle. If you’re practicing Agile software development practices, you are (or should be) doing this already.

With that said, I’d recommend getting a good understanding of Microsoft’s UX guidelines for Metro style applications. Microsoft has spent a great deal of time and money researching, developing, and refining these guidelines, and they’re giving them to you for free, so take advantage. In particular, make sure you understand the following fundamentals:

  • Splash screen:  Use the splash screen to smooth the transition between when people launch your app and when it’s ready for use. The splash screen should subtly reinforce your brand with your users, not distract them or advertise to them.
  • Suspend and resume app state:  Users will switch your app on and off the screen, and Windows will terminate it in the background when it is unused. You should save and resume the app state when possible to maintain context.
  • Auto-launching and “Open With”: Launch the default app for a file type or protocol from your app.
  • Globalization, localization, and app resources: Windows is used worldwide, so you need to design your app so that resources, such as strings and images, are separated from their code, to help make localization easy.
  • Accessibility: Make your app available to all users regardless of their abilities, disabilities, or preferences. If you use the built-in UI controls, you get accessibility for free. When you need to create custom controls.
  • App help: Provide help or troubleshooting tips to your users.
  • Store categories: Learn how to create great apps for specific Windows Store categories, like games or entertainment.

Mastering these fundamentals is not a substitute for the prototyping process, but they can help you avoid usability issues that may come up as part of the validation process.

Next up, about the logo.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx

metro-pass-0017

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx

I remember the first, of what would turn out to be many, paper I wrote on epistemology during college. For those who may not know, epistemology is the study of knowledge. It attempts to answer the following three questions:

  1. What is knowledge?
  2. How do we gain knowledge?
  3. To what extent is it possible for a given subject to be known?

(You can read more about epistemology here.)

This particular paper was on the nature of first impressions. My contention was that while first impressions do not result in true knowledge of an individual, they do have an immediate impact on how we view, or judge, the individual in subsequent interactions. In fact, I may choose not to interact with an individual in the future due to a first impression. It’s entirely possible that my first impression of a person was in no way an accurate reflection of who the person really is (maybe he or she was having a bad day), but, having no other information at my disposal, the first impression is all I have to go on.

OK, enough rambling. What on earth does this have to do with Metro apps? Simple, you need to be very conscientious of your application’s first impression. You may have created the greatest Metro app of all time, but if it doesn’t engage the user on the Start screen, or takes a long time to load then you haven’t given the user a good reason to use your application.

Think about what you want users to think, feel, or do when they first launch your app. Refer back to your “great at” statement. Even though you won’t get a chance to personally tell your users what your app is great at, you can convey the message to them when you make your first impression. Take advantage of these:

Tile & notifications  The tile is the face of your app. Among the many other apps on a user’s Start screen, what will make the user want to launch your app? Be sure your tile highlights your app’s brand and shows what the app is great at. Make use of tile notifications so that your app will always feel fresh and relevant, bringing the user back to your app again and again.

Splash screen  The splash screen should load as fast as possible, and remain on the screen only as long as you need to initialize your app state. What you show on the splash screen should express your app’s personality.

First launch  Before users sign up for your service, log in to their account, or add their own content, what will they see? Try to demonstrate the value of your app before asking users for information. Consider showing sample content that people can play around with to understand the purpose of your app before you ask them to commit.

Home page  The home page is where you bring users each time they launch your app. The content here should have a clear focus and immediately showcase what your app is tailored for. Make this page great at one thing and trust that people will explore the rest of your app. Solve for distractions on the landing page, not discoverability.

Next up, prototype and validate.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx

metro-pass-0016

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx

So far we’ve answered the following questions as part of the Metro app planning process:

  1. What’s the app about?
  2. What’s the app great at?
  3. What user activities will the app support?
  4. What features will the app include?
  5. How the app be monetized?

It’s now time to turn our attention to designing the user interface (UI) of the application.  When designing the UI for Metro style applications, there are

  1. How should you organize UI content?
  2. What UI surfaces and command do you need?
  3. How should you organize commands?
  4. How should the app be laid out in each view?

Let’s take these questions one by one.

How should you organize UI content?

Most app content can be organized into some form of groupings or hierarchies. What you choose as the top-level grouping of your content should match the focus of your “great at” statement. Choosing how you want to group your content helps you decide what pages or views you need in your app. The project templates available in Microsoft Visual Studio Express 2012 RC for Windows 8 offer the common app layout patterns that will suit most content needs.

What UI surfaces and commands do you need?

Review the flows that you identified earlier. For each flow, create a rough outline of the steps users take. During this process, you begin to see what UI you need to create and the extra details you need to figure out. You can also start eliminating extra steps. Just remember, the cleaner the flow, the easier to use.

How should you organize commands?

Use your outline of the flow steps to identify potential commands that you need to design for. Then think about where those commands should live in your app.

  • Always try to use the content.  Whenever possible, let users directly manipulate the content on the app’s canvas, rather than adding commands that act on the content. For example, in the travel app, let users rearrange their itinerary by dragging and dropping activities in a list on the canvas, rather than selecting the activity and using Up or Down command buttons.
  • If you can’t use the content, place commands on one of these UI surfaces:

    • In the app bar: You should put most commands on the app bar, which is usually hidden until the users bring it up.
    • On the app’s canvas itself: If the user is on a page or view that has a single purpose, you can provide commands for that purpose directly on the canvas. There should be very few of these commands.
    • In a context menu: You can use context menus for clipboard actions (such as cut, copy, and paste), or for commands that apply to content that cannot be selected (like adding a push pin to a location on a map).

How should the app be laid out in each view?

Windows 8 supports landscape, portrait, snapped, and fill views. Users can put your app in any of these views at any time, and you want your app to look and work great in each one. This means you need to plan the layout of your UI elements for each view, and map your layout implementation to each view state. When you do this, your app UI changes fluidly to meet your user’s needs and preferences.

Next up, first impressions matter.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx

This fall, Microsoft is running two day developer events around the world to help get you up to speed on Windows 8. Theses events are free, fun, no-fluff events for developers, by developers. You learn from experts in a low-key, interactive way and then get hands-on time to apply what you’ve learned. Here’s a basic overview of the two days:

Day 1 – Windows 8 DevCamp

The Windows 8 DevCamp covers Windows 8 Release Preview from top to bottom, featuring sessions that run from introductory to intermediate as the day unfolds. These sessions will be followed by an InstallFest to prepare your system for hands-on app development.

Day 2 – Windows 8 Hackathon

This is an open Windows 8 code fest, where you’ll put what you’ve learned into practice. Code to your heart’s content, with Windows 8 experts available to guide you through every step of the process. It’s the perfect opportunity to get your dream application underway, or to finish that app you’ve already started.

This full-day event will be filled with coding, sharing, plenty of food, and perhaps the occasional Lightning Talk on topics determined by your apps and questions. Bring your own laptop (for recommended system specs, click on the city nearest you), your apps and your cool ideas and get ready to create!

Below are registration links for the devcamps and hackathons in areas where I spend most of my time (Minneapolis, Dallas, and Denver):

Event Location Date Registration
DevCamp Dallas, TX August 7, 2012 Register here
Hackathon Dallas, TX August 8, 2012 Register here
DevCamp Denver, CO August 10, 2012 Register here
Hackathon Denver, CO August 11, 2012 Register here
DevCamp Minneapolis, MN August 23, 2012 Register here
Hackathon Minneapolis, MN August 24, 2012 Register here

To see the full list of locations check out: http://www.devcamps.ms/windows

metro-pass-0015

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465433.aspx

In an older post I made a case for why you should strong consider writing applications for the Windows Store (i.e. Metro style apps). To quote myself, which sounds a little strange:

In 27 months of being on the market Windows 7 went from 0 to 525,000,000 (yes that’s million) licenses sold. Let me put that into perspective for you. Current estimates, and these are always a little wishy washy depending on the source, peg the current number of Android devices at 247 million, iOS devices at 200 million, Mac OSX devics at 30 million.

Windows 7 is installed on more devices than Android, iOS, and Mac OSX combined! Just think about that for a moment. Knowing what you now know about the install base and adoption rate of Windows 7 you can’t deny that there is a HUGE monetization potential for applications that are in the Windows Store that will be a part of Windows 8, but let’s be a little more specific a set a scenario.

Assume a Windows 8 install base of 525,000,000 (not from day one, but over time). Let’s say your app makes it on to 5% (26,250,000) of those devices. After you have sold approximately 16,779 units at the base price of $1.49 you will have grossed ~$25,000 in sales and netted ~$17,500 after Microsoft takes their 30%. $25,000 in sales is also a trigger point in the store for you to start getting 80% of sales instead of 70%. If we look at sales for the remaining 26,233,221 devices you’ll see an additional net of ~$31,270,000.

What you have is a compelling economic incentive to sell your aps through the Windows Store. So, how can you take advantage of this? As you plan your applications you should consider the following three monetization strategies:

1. Trial, paid, and mixed versions

You can list your Metro style apps in the Windows Store such that your customers must pay for it before they can use it (a full-featured, paid app) or where they can try it for free for a while (a free-trial period). A user can upgrade from a trial version of your app to a full purchase from within the app or through the Windows Store.

The License API provides the interface that allows you to check the app’s license state and the state of purchases made through the app. You can also use it to check the expiration dates of in-app purchases, and let users make new purchases from within the app.

2. In-app sales

In-app sales let you sell content, other apps, or new app functionality, such as unlocking the next level of a game from within the app. You can put buy options anywhere in your app that makes a convenient experience for your customers.

3. In-app advertising

You can sell and include ads in your app. Be careful in designing where you place the ads so that your user experience remains strong. Also, make sure the ads provided by the ad service comply with the Certification requirements for Windows apps before you include them in your app.

(Note – you aren’t limited to only using one of these monetization strategies in your applications. For example, you could create an ad supported version (strategy 3) and a paid version (strategy 1) of the same application.)

Next up, planning the UI.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465433.aspx

metro-pass-0014

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427

When we started looking at what goes into planning a Metro app, one of the key principles is that we need to stop focusing on features on focus on on overall experience. To date that’s what we’ve done by answering the following questions:

  1. What’s the app all about?
  2. What’s the app great at?
  3. What activities does the app support?

The goal of answering these questions is to shape the user experience of the application. However, we can’t create an application unless we have features. Now that we know what we want the experience to be, we can focus on the question, “What features should the app include?” Here we want to look at which tools in the Windows 8 toolbox can help us build the experience we’re looking for. We covered a lot of these when looking at the traits of great Metro apps, but they’re worth repeating here:

App contracts Your app can participate in app contracts that enable broad, cross-app, cross-feature user flows.

  • Search Let your users quickly search through your app’s content from anywhere in the system, including from within other apps. And vice versa.
  • Share Let your users share content from your app with other people through other apps, and receive shareable content from other people and apps, too.
  • Play To Let your users enjoy audio, video, or images streamed from your app to other devices in their home network.
  • File picker and file picker extensions Let your users load and save their files from the local file system, connected storage devices, HomeGroup, or even other apps. You can also provide a file picker extension so that other apps can load your app’s content.

Different views and form factors Windows 8 Release Preview puts users in charge and your app in the forefront. You want your app UI to shine on any device, in any orientation, in whatever circumstance the user decides to use it.

Touch first Windows 8 provides a unique and distinctive touch experience that does more than simply emulate mouse functionality.

Engaging and fresh Be sure your app feels fresh and engages users with these standard experiences:

  • Animations Use our library of animations to make your app feel fast and fluid. Help users understand context changes and tie experiences together with visual transitions.
  • Toast notifications Let your users know about time-sensitive or personally relevant content through toast notifications and invite them back to your app even when your app is closed.
  • Secondary tiles Promote interesting content and deep links from your app on the Start screen, and let your users launch your app directly into a specific page or view.
  • App tiles Provide fresh and relevant updates to entice users back into your app. More about this in the next section.

Personalization

  • Settings Let your users create the experience they want by saving app settings. Consolidate all of your settings under one roof, and users can configure your app via a common mechanism that they are already familiar with.
  • Roaming Create a continuous experience across devices by roaming data that lets people pick up a task right where they left off, and preserves the UX they care most about, regardless of the device they’re using. Make it easy for users to use your app everywhere, from their kitchen family PC to their work PC to their personal tablet, by maintaining settings and states with roaming.
  • User tiles Make your app more personal to your users by loading their user tile image, or let the users set content from your app as their personal tile throughout Windows.

Device capabilities Be sure your app takes full advantage of the capabilities of today’s devices.

  • Proximity gestures Let your users connect devices, by physically tapping them together, to light up experiences where you expect multiple users to be physically nearby (multiplayer games).
  • Cameras and external storage devices Connect your users to their built-in or plugged-in cameras for chatting and conferencing, recording vlogs, taking profile pics, documenting the world around them, or whatever activity your app is great at.
  • Accelerometers and other sensors Devices come with a number of sensors nowadays. Your app can dim or brighten the display based on ambient light, or reflow the UI if the user rotates the display, or react to any physical movement.
  • Geolocation Use geolocation information from standard web data or from geolocation sensors to help your users get around, find their position on a map, or get notices about nearby people, activities, and destinations.

Next up “Show Me the Money!”

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427