IdentityMine

| Tags: Matthias Shapiro, Windows 10

Windows 10 Application Design

With Windows 10 on the horizon, it’s essential for developers to set their sights on what development for Windows 10 means. This post will cover getting started with Windows 10 and some vital areas of attention when shifting from Windows 8 to Windows 10 application development.

The first thing to do is install Windows 10. There is a developer preview available and while it isn’t for everyone, I’ve found it to be stable enough to move most of my development work over to machines running Windows 10.

One of the really exciting elements of Windows 10 is that it will be driving not only desktops and tablets but everything all the way down to inexpensive $50 no-contract phones. I highly recommend you pick up a Lumia 635, sign up for the Windows Insiders Program and install the Windows 10 Technical Preview for your phone.

In terms of application development, we can expect a number of benefits from a unified platform. The current structure of universal applications in Windows and Windows Phone 8.1 allows developers to share files directly across both platforms. Features such as shared folders and settings allow developers to maintain consistency across different form factors. The updated notification UI on Windows is driven by a unified push notification system for all devices. Live tiles give users access to the most important changes, updates or features available and have become something of a calling card across all Windows devices.

 

Designing for Windows 10

We don’t yet have a lot of specifics on how the Windows 10 development platform will work but what we do have is some visibility into the Microsoft designed applications built into Windows 10. This post will take a look at some of the patterns we saw in Windows 8 and how those patterns have evolved in Windows 10 applications.

For our examples of Windows 10 applications, we’ll look at the Photos app and the Store app. We’ll compare this to the Weather app, which is an application designed for Windows 8.1 but running in Windows 10.

 

Edge Swipe Gestures

As Windows 10 shifts toward “windowing” applications, this means some changes to how the touch based edge swiping gestures work. In Windows 8.1, swiping from the top or bottom of a full screen application would bring up the app bar, if one was available. Swiping from the right would reveal the charms bar, into which applications could integrate features like sharing, search and settings. Swiping from the left could be used to switch applications.

With Windows 10, these gestures have changed. This table hopefully makes those changes clear. For full screen applications:

Windows 8Windows 10
Swipe from topApp bar / command barApp chrome
Swipe from bottomApp bar / command barWindows task bar
Swipe from rightCharms (settings/search/share)Notifications pane
Swipe from leftSwitch appSwitch app

 

So how will access to the app bars and charms be handled? App bars are accessible (as they always have been) by right clicking in the application. In a touch only environment, both the app bars and charms can be access by tapping the hamburger icon in the application chrome.

Windows_10_app_commands

App Commands brings up the app bar and the rest of the charms options are available as well.

This doesn’t seem optimal, so how do we design for this moving forward? We can intuit some of this design direction from the Photos and Store applications.

Looking at the opening screen of the photos application, we can see that we have a number of options available on the left through a column of icons. We can either tap the icons directly or tap the menu (hamburger) icon to show the icons.

Windows_10_menu_icons

 

Windows_10_menu_features

There we can see features that would normally have been in the app bar as well as the “settings” option that would normally have been in the charms. If we tap into an image, we see the equivalent of an app bar at the top of the screen. This UI fades away after a time of inaction from the user but unlike the current app bar paradigm, it reappears with any interaction with the app rather than on the edge swipe gesture.

Windows_10_photo

We see this header-style interaction and navigation reinforced with the Store application. We can see search, settings and navigation options built into the header.

Windows_10_store

Universal App

But the most exciting thing about the upcoming Windows design are that these patterns are being applied across all devices. There isn’t a better place to see this than in the Photos app for phone.

I’ve already walked through some of the design choices made in this application as it appears in Windows 10 for a laptop/desktop/tablet, so I’ll just show some side-by-side images of how it applies to the phone.

 

The home screen

Windows_10_home_screen Windows_10_menu_icons

Open Menu

Windows_10_open_menu Windows_10_menu_features

Photo Detail

Windows_10_photo_detail Windows_10_photo

As you can see, we have the same design patterns in play on both applications, along with identical navigation and icons. As we move towards Windows 10, we’ll be looking about building these applications as a single application that lives happily on the appropriate device.

 

Moving Forward

We don’t yet have public access to the Windows 10 tooling and SDK, but we can see a hint of how to build these cross platforms UIs with the news from Kevin Gosse that that we’ll be able to build relative UIs using StateTriggers and RelativePanel for screen orientation and device specific UIs and a new SplitView control for creating the side-sliding menu UI.

These conventions promise to create a compelling design story as we move the practice of ubiquitous applications with Windows 10.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestShare on RedditShare on TumblrEmail this to someoneDigg thisFlattr the authorShare on StumbleUpon

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>