Monthly Archives: April 2011

Translating Windows Phone’s Metro to the desktop: lessons from MetroTwit

As a designer, it’s an awesome feeling to have your pixels created out of sweat and blood appreciated. Over the past 10 months, we’ve received a great amount of positive feedback on the MetroTwit user experience which we’ve been iteratively refining. I hate to toot my own horn but I think it’s pretty good right now.

In general, implementing Metro in a Windows application may sound simple on the surface, but is a lot more involved than just large text and solid colors. Windows Phone 7 offers a lot of inspiration, but not all of it is directly transferable. A mouse is not a finger and the screen is multitudes larger. As such, differences need to be accounted for.

I suspect due to the increasing popularity of Metro, a number of developers and designers have since contacted me about how they should implement it in their own desktop applications. Although the masters of Metro are at Redmond working on the next iteration, I do have a few pointers I’ve gathered from MetroTwit’s development that others may find useful.

Small round buttons should have larger rectangular hit areas

For icon-based buttons with a circular border, the mouse still be able to click it if not exactly in the circle. In MetroTwit, we wrap the button elements in a Grid or Canvas element with a transparent background to expand the hit area. The tweet “reply” button hitarea is 25% larger than the icon itself.

Use the hover state

One advantage of the mouse is it provides you with a hover state that’s not possible on capacitive touch screens. Remember to style the hover state of controls to provide feedback to users. The hover state can also be used to expose more information on-demand.

In MetroTwit, we also use the hover to hide contextual tweet buttons for a cleaner look.

More margin for touch, less margin for mouse

A touch UI requires larger margins to minimize the chance of a misclick, but the effect is not the same for a mouse. Excessive spacing and margins in a mouse-based UI would actually make the experience more difficult as users have to move the mouse over greater distances.

This is why in MetroTwit the buttons at the bottom panel do not evenly fill the white space, instead, loosely lumped together.

Users don’t “play” with desktop apps

It’s common for mobile users to just randomly swipe, tap and pinch a mobile app to discover functionality and content, but not so much on the desktop.

In practice, on WP7 the scrollbar is hidden by default and only shows while scrolling. Whilst the same effect is possible on the desktop, users would be frustrated by the lack of indication on what is scrollable and what position it is scrolled to, without randomly scrolling all over the UI which they don’t do.

Users will see your application much more frequently

Mobile apps are like cupcakes and desktop apps are like birthday cakes. Serving size matters.

Visual delights in the form of animations on the phone might be welcomed by the user, but multiplied by the frequency and length people use desktop applications, they can quickly become a nuisance. Having said that, animations are still necessary and useful to direct attention.

In MetroTwit, most animations complete in just 0.2 seconds, slow enough not to be an unrecognized stutter but quick enough to not leave users in limbo. We also have animations that complete in 0.1 seconds, but none over 0.4 seconds.

A Metro app in a non-Metro environment

Whilst you’re waist deep in Metro, it’s easy to forget the environment – Windows 7 and other applications, are currently not Metro. Balance Metro with the expectations of Windows. You don’t want users to feel like they’re using a whole different OS when inside your application.

Metro is open to interpretation

Last but not least, there is no official Metro guideline. Even the Microsoft published “UI Design and Interaction Guide for Windows Phone 7” loosely defines Metro with just five principles, the most obvious of which is “clean, light, open, and fast”. What that means of course is up to you.

Windows 8’s user account roaming feature revealed

Thanks to some random pokings by curious enthusiasts on the MyDigitalLife forums, the user account roaming options in the early builds of Windows 8 has been exposed, shedding some light on what it enables.

The feature, which appears to be only available for “Linked” Windows accounts (presumably to Windows Live), allows for users to “roam” to different computers and devices (*cough* Windows Phone) with their various settings and configurations, automagically applied.

The range of settings for roaming include the desktop wallpaper, Aero glass color, accessibility options, language options, applications settings (probably only for AppX packaged apps), Windows settings and WiFi profiles and Windows-managed passwords.

As someone who uses both a desktop and laptop, this is clearly going to be one of the killer features of Windows 8. Together with the Windows Store, this feature should deliver a consistent Windows experience with applications and settings available anywhere on-demand.

In addition, it’s also interesting to note the two roaming options “enable roaming on paid networks” and “enable roaming on low bandwidth” which would indicate Windows 8 might have the ability to distinguish networks with data charges and/or bandwidth limitations. I hope this option is available elsewhere in the OS as it always kills me to see Windows downloading updates when I’m tethered to 3G mobile data.

The game sequel you’ve been waiting for: Ribbon Hero 2 by Microsoft Office Labs

Some of you may have recently been distracted by a small indie game called Portal 2, but here’s the PC game sequel of the year everyone has been waiting for – Ribbon Hero 2 by Microsoft Office Labs, available today as a free download.

The sequel to the innovative interactive tutorial aimed to familiar Office 2007 and 2010 users with the new Ribbon interface, the game now features a standalone interface with animated graphics and even storyline scenarios incorporating a Microsoft favorite, Clippy. Like its predecessor, players score points for completing tasks using the Ribbon.

Although to most readers of this site, this would be considered a gimmick at best. However, to novice Office users – especially kids in primary education, I can’t imagine a better way to incorporate learning for a productivity application. Wouldn’t it be awesome if a similar tool existed for Adobe Photoshop or Maya?

Alleged Windows 8 App Store screenshot is fake: third-party app “Appmarts”

Origins of the alleged screenshots of the “Windows 8 App Store” has finally been unearthed.

It turns out they are of a third-party Chinese application downloader and manager available today called Appmarts. The English versions of the screenshots are likely to have been manipulated. Although the application similar in functionality is very real and usable, but it’s not from Windows 8 nor Microsoft.

The “Windows Store” (the real name of the app store) is currently locked down to internal Microsoft servers and domain users, thus it won’t be accessible in any leaked builds for the immediate future.

Whilst it’s fun to watch the Windows 8 details leak from the sidelines, just be wary of the bulls.

Even better Aussie HTC HD7 WP7 bonus: mystery flight

Nevermind the two free XBOX 360 games, here’s an even better freebie for Aussies buying a Telstra HTC HD7 right this instance – a guaranteed free return flight to a mystery destination around Australia.

Don’t ask me why the two offers aren’t together or even cross-promoted, but thanks to a heads up from Michael Casha, the “HTC HD7 Massive Mystery Flight Offer” is yet another legitimate promotional offer from the ever so generous Microsoft Australia.

Although a $10 booking fee and travel date restrictions applies, there’s a chance of you could end up going to somewhere exciting like Uluru, Whitsunday Coast or Hamilton Island among the usual list of 33 holiday destinations around Australia. It’s worth noting that both Melbourne airports are listed, so I sincerely hope any Melbournians don’t end up flying from one to the other.

Similar to the other offer, this offer is only eligible for purchases between 15th of April and 31st which unfortunately discriminates the early adopters of the HD7 who purchased the device during the launch week of March 29. Maybe Microsoft will have a change of heart and correct that.

Aussie HTC HD7 WP7 bonus: two free XBOX360 games

For Australians, there’s a new Windows Phone 7 device in town and quite a sweet treat from Microsoft Australia to go along with it.

Even though Optus’ Samsung Omnia 7 is hands-down the best Windows Phone 7 device available down under, if your choice of mobile network is Telstra, then the recently launched HTC HD7 with its cinematic 4.3-inch screen is clearly the next best thing.

Any HD7 purchases from Telstra or any Australian retailer (no imports) are eligible to redeem two free XBOX 360 games (Halo Reach and Kinect Joy Ride) OR 3,000 Xbox LIVE points (worth $50) through the offer website.

Even though there’s a deadline (31st of May), don’t rush though. At the pace both Telstra and Optus are testing the NoDo update, there’s plenty of time to watch paint dry. Update: Apparently the HD7 comes with NoDo preloaded, in which case, rush!