Skip navigation

Windows Phone 7 Feature Focus: Hubs

When Microsoft announced Windows Phone 7 on February 15, 2010, there were serious concerns about whether the software giant could even compete in the smart phone market. After all, its previous mobile OS, Windows Mobile, wasn't exactly innovative or even interesting. Would Microsoft choose to run with the crowd, and simply release an apps-based smart phone like the iPhone and Android. Or would it, against all odds, actually innovate and doing something that was both different and better?

Amazingly, and against type, Microsoft chose the latter path. The result, Windows Phone 7 and its Metro OS, has been like a sudden bright light in a dark room, a wake-up call for competitors and consumers alike.

But back to that February 2010 introduction. The very first thing that Microsoft corporate vice president Joe Belfiore discussed was Microsoft's desire to do something different with Windows Phone, not just to be different, but because the iPhone-style apps approach was already dated, tired, and broken.

"We saw that developers were doing more and more applications. And this created great opportunity for users, but also some complexity," he said. "We didn't see the UIs of phones updating to keep up with all the changes in infrastructure and capability. We kind of felt like the phones, they looked like PCs."

The phone is not a PC. This is the mantra for Windows Phone, and very generally speaking, the key differentiator between it and the competition. The reasoning here is simple: Yes, phones run apps like PCs. But these apps don't run side by side in windows, they run full screen, one at a time. So the PC model simply doesn't work. Unless of course your goal is to emulate MS-DOS. And if you look at the iPhone, or Android, that's pretty much the strategy.

  Click here to find out more!
 

 

Looked at more specifically, Windows Phone provides several unique features that transcend the PC apps model and provide an experience that is more amenable to the form factor and day-to-day usage patterns of a phone, which is by nature small, connected, and highly mobile. The most obvious is the hub. And there's just nothing like it on other smart phones.

What are hubs?

Hubs are destinations on the phone that organize data culled from numerous places--online services and the web, the phone itself, applications, whatever--and present them in a single, integrated user experience. "The idea is that when you bring those things together that the combination, the whole, is really greater than the sum of the parts individually," Belfiore noted at the February Windows Phone introduction. "And that the experience will be meaningful, delightful, and work the way a phone should in the small moments of your life where you only have a little bit of time available."

From a usage perspective, hubs are multi-screen panoramic experiences that extend beyond the borders of the phone's screen, requiring you to navigate from side to side, horizontally, to access the entire UI.

Microsoft's developer documentation says that these panoramic experiences "offer a unique way to view controls, data, and services by using a long horizontal canvas that extends beyond the confines of the screen." From a developer's perspective, a hub is really just an application. It's a special kind of application, what I think of as a super application, but it is in fact just an application.

Of course, there are certain characteristics that separate normal, single screen applications from hubs. These are:

Integration. Standard Windows Phone apps, just like apps on the iPhone, Android, or other smart phones, typically do just one thing: Facebook. A crossword puzzle. Whatever. Hubs are integrated experiences that tied data together from multiple sources and integrate them into a single, cohesive view. So instead of just viewing Facebook data in a dedicated Facebook app, you can view data from multiple social networking services, all from a single interface.

Hubs
In the People hub, you can view and interact with social networking updates from multiple sources, all in one UI.

Panoramic. Whereas normal Windows Phone apps, just like apps on other phones, occupy a single screen, hubs are multi-screen, panoramic experiences. Of course, your phone has only a single screen. So hubs have a built-in navigation model in which you view one screen, or section (or column) of information at a time, but can scroll over the entire surface of the hub, moving left to right (and in reverse).

Hubs
Like this rendition of the Pictures hub on my own phone, hubs are panoramas that extend well beyond the horizontal limits of the device screen. (CLICK FOR A LARGER VERSION)

Extensible. Unlike standard Windows Phone apps, hubs are extensible and can thus be updated and upgraded with new functionality. The true extensibility of hubs varies from hub to hub, as I'll describe later. But for those hubs that can be extended, the potential is huge. This provides developers with a new type of application they can create. So a photo editor could be built into the Pictures hub, where users would want and expect that functionality, rather than be created a separate, standalone, experience.

Hubs
Hubs are extensible in various ways; here, an Extras context menu provides access to third-party photo editing tools.

It should be noted, too, that while a number of hubs ship as part of Windows Phone, developers are free to make their own hub-style apps as well. Not all apps require such a treatment, but it will be interesting to see what hub-style apps appear on the Windows Phone Marketplace in the future.

Hubs that are included with Windows Phone

Windows Phone 7 ships with several hubs, some of which are fairly simple, and some of which are quite extensive. These hubs include:

Games

The Games hub, sometimes erroneously referred to as the Xbox LIVE hub, provides access to your Windows Phone games collection (LIVE and non-LIVE), a Spotlight feed for Xbox LIVE-related news, your Xbox LIVE gamertag and online persona, and any pending game requests you may have. Currently, the Games hub is among the least extensible hubs on the phone. Games you purchase appear in the hub, but that's about it.

Hubs

Marketplace

Microsoft actually offers several different online marketplaces, and even on Windows Phone there are actually quite a few. The central hub for these stores is the Marketplace hub, or Windows Phone Marketplace, which provides access to over-the-air app, game, and music purchases as well as device-maker and wireless carrier mini-stores that can exist within the Marketplace. Some of the sub-stores, like those for apps and music, can be accessed separately on the phone as well. So why is it a hub? Because the Marketplace hub integrates the Zune Marketplace (music), Xbox Marketplace (video games and related content), and the Windows Phone Marketplace (mobile apps) into a single, integrated experience. And its extensible by device makers and wireless carriers.

Hubs

Music + Videos

This beautiful interface provides a nice front-end to your multimedia needs, including listening to music and podcasts and FM radio, watching TV shows and movies, and access third party media services like Last.FM. Music + Videos is often mistakenly referred to as the "Zune hub" because the Zune software is a central part of the experience, and provides navigation, management, and playback for music, videos (TV shows and movies), podcasts, FM and radio. But Music + Videos is more than just Zune, and over time, I expect to see a number of third party services integrated into this hub. Music + Videos extensibility occurs through a Marquee section, or column.

Hubs

Office 2010

The Office hub provides access to mobile versions of OneNote, Word, Excel, PowerPoint, and SharePoint Workspaces 2010. It is not extensible in any meaningful way, from what I can tell, and is curiously the only way in which you can access the Office Mobile apps on the phone. (You can't, for example, pin Word Mobile 2010 to the Start screen for some reason.) The Office hub also provides no integration with Windows Live SkyDrive-based Office documents.

Hubs

People

Microsoft's contacts interface is the People hub, and it's arguably the very simplest of all hubs, with just three basic sections, or columns. The first, All, provides an aggregated list of all of your contacts, and it can include contacts from multiple sources (and will automatically link duplicates). The What's New list provides a feed of social networking updates from your contacts, accessed from Windows Live (which has its own integration features) and Facebook. A Recent section provides tiles for the contacts you've accessed most recently.

Hubs

Pictures

The Pictures hub is, arguably, Windows Phone's most beautiful visual experience and the most obvious example of why this UI type makes sense. It provides a single location to enjoy all of your digital photos, whether they're synced to the phone, taken with the phone's camera, or stored on Windows Live or Facebook. You can also access your friend's latest photo uploads through a What's New feed. Thanks to deep extensibility, third parties can expand the Picture hub's capabilities, and I expect to see native access to third party online photo solutions--Flickr, Picasaweb, and so on--appear in the days ahead. Likewise, it's possible for developers to write-in photo management and editing add-ins as well.

I will separately cover each of these hubs in individual Feature Focus articles in the future.

Hubs

Understanding how hubs work

It may be somewhat instructive to look at the basic structure of a hub. As noted previously, hubs provide a visual experience that is bigger than the resolution of the Windows Phone screen. So you can scroll, from left to right (and in reverse) across the canvas of the hub to view the entire experience. These screenfuls of information are called sections. But you can think of them as columns, and if you're familiar with how a pivot-based Windows Phone app works, it might be helpful to think of these sections, or columns, as being analogous to individual pivots, just laid out from end to end. The difference is in the presentation, and because individual sections can be made up of different types of information. That is, whereas pivots are typically text lists, sections in a hub can be text lists, a grid of graphical thumbnails, or other UIs.

Visually, hubs also provide some parallax scrolling. That is, the hub heading, background, and foreground controls all visually appear to scroll at different rates, with the heading scrolling the least per swipe, the background scrolling more, and the foreground controls scrolling in screen width (480 pixel) units. The effect is quite nice, though impossible to demonstrate accurately in a static screenshot.

To understand the layout of a typical hub and how it works, consider the following shot, which features a Windows Phone overlayed on top to illustrate what can be seen initially. Within the screen of the device, you can see one section, and there are visual cues to the right of the section indicating that more UI is available by scrolling to the right.

Hubs

Scroll over and the second column is visible, or at least part of it, since in this example the section in question is a grid of thumbnails that extends beyond a single screen width. Note that the grid only extends horizontally, and not vertically. It's possible for non-text list elements to extend in either direction, actually, but not each. In the Pictures hub, for example, the Gallery section extends horizontally, but the Collections game grid in the Games hub extends vertically.

Hubs

Hubs

Scroll right yet again and you're at the right "edge" of the hub. But there's no real edge because scrolling right again will circle around back to the "first" section.

Hubs

If you leave a hub in a certain view, or section, and return later, that section will become the first view you see the next time around. This is particularly useful in certain cases, as with the Now Playing section in the Music + Videos hub.

Many hubs of course offer second-level UIs, so that when you select an item on the top-level hubs, it navigates to a new screen. For example, when you select the Music item in the Zune section of the Music + Videos hub, you leave the hub and are presented with the single screen, pivot-based Zune app. Select the All item in the first, galleries column in Pictures, and you arrive at the Pictures Gallery. Select a contact in People, and you view that person's contact card. And so on.

And integration can occur at different levels. Music + Videos has the aforementioned Marquee section, but Pictures exposes an Extras item in the pop-up menu that appears when you tap and hold on an individual photo; this menu provides access to third party services like photo editors. Each hub can handle extensibility differently. And for now at least, some hubs--like Office 2010--don't offer any true extensibility at all.

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish