Microsoft Posts an Application Makeover from iPad to Windows 8
By Ellen Muraskin
Microsoft is not being subtle about its designs on iPad application developers. It's going so far as to show them, in a side-by-side comparison posted as a "Design Case Study" on its Developer Center, how iPad's user interface can be improved upon using Microsoft's Metro design language and UI principles. Heralded at CES 2012 and built into Windows 8, Windows Mobile Phone and Xbox, Metro eschews icons and pull-down menus in favor of text and tiles, carousel-like panning, and lively, animated response to touch-screen taps, wipes and pinches. Inspired by public transportation signage in and around Seattle, it's a style that's won positive reviews from the consumer IT press.
Developers need only pick their programming environment and download Windows 8 Consumer Preview to get started. Redmond is also offering to pay app developers a premium for porting to their platform; after the first 25,000 USD in application sales through the Windows Store, Microsoft is offering 80 percent instead of the standard 70 percent cut.
The demonstrated transformation shows the Metro's advantages to good effect, with a photo journaling application that encourages commenting. Our first view of the app, Metro version, clearly shows an art director's influence, with a single dominating photo image attracting the eye and guiding it forward to a column of thumbnails to the immediate right, or to a column of comments to the left. Lots of the white space they teach in Graphic Design 101.
The iPad app, in contrast, fills the screen with a static grid of equally sized photo thumbnails, surrounded by what UI fans call "chrome": navigation bar above, tabs beneath, and areas devoted to pagination and notification. Where Microsoft manages to embed navigation into the content itself, iPad offers the traditional drop-down menus to accomplish the same thing. For example, instead of hitting a tab to view either photos or comments, as Apple does, Microsoft displays picture and related comments in one view. Want to see all the comments? Touch the "Recent Comments" header. Want to see more photos? Pinch on the photos.
"Semantic Zoom" interprets the pinching zoom-out gesture as a command to back up into higher levels of indexing. Pinch on a photo and you get a grouped grid of tiles representing months within years. One tap from there gets you any month's pictures in any of three visible years; shading cues indicate empty months. This cleverly makes the iPad's drop-down menu of years look like a comparative detour. It also makes the iPad's layout of 12 months -- each a stack of photos with only the top one visible -- look relatively pedestrian.
Windows 8 has rollaway app bars that can be summoned with a swipe from top or bottom, or by selecting a file. These present contextually relevant commands, much as right-clicking does in earlier Windows versions. Global commands belong on the right; more transitory actions on the left. IPad commands take up real estate in an ever-present navigation bar. Similarly, Microsoft lets you open a "charm" bar of actions, by swiping from the right, that are relevant to the application at hand. (They are getting a little cute here; those charms look very much like icons to me.) The charm they demonstrate lets you perform a search without suffering a constant search window. The search term will auto fill if they are results to be found.
Further, Metro charms will search for a term across different apps, automatically launching the app to display results.
System-wide "Contracts" and "Toasts"
Microsoft has gotten somewhat creative with verbal as well as visual metaphors, calling system-wide functions like search and share "contracts." If your app has a share contract, it can send content to any of several email or social media or application destinations with one "share" tap on the charm bar and a menu of destinations that fly out.
"Contracts" save developers the job of coding separate integrations for every possible social media channel and web service, every time there's a new sharing service or an API change. One coding effort connects every contract-abiding Metro-style app to every share target.
Real-time notifications -- in the web example, a comment on a photo -- are called "toasts." Where iOS 5 dedicated a central spot on the top of the screen to notifications that could appear from any app, Windows 8 imbeds its notifications and number badges within the tile of the app that generates them. Users can launch apps and read notifications all from one place. Plus, designers have a large palette of templates from which to choose app tiles and notifications.