Redesign: Windows Phone Marketplace UX
The Windows Phone marketplace was the first website that Microsoft released that had a feel of Metro to it. It’s a dramatic shift from how Microsoft were previously designing their web pages. Text, DIVs and graphic elements have better spacing, heading fonts are better (but far from perfect) and because the page is cleaner looking it is a lot easier to navigate and find where you are.
The Problem? See below.
I highlighted the most prominent issues regarding the layout and design. There are certain aspects to the page that are either unnecessary or could be improved. Such as the way users navigation through app screenshots in a way that isn’t generically copying Android’s marketplace and improves upon what Apple has done with their basic horizontal scrolling. (that’s so 2007)
Disclaimer: All images used are for illustration purposes. No copyright infringement intended.
Compare the two images and you will notice a dramatic improvement. Elements on the page are correctly sized and positioned. And the main featured element on the page becomes the most important section, the screenshots instead of the tile icon which is still important but not so much that it takes away from the reason users are on the page in the first place, TO SEE THE APP!
How users navigate app screenshots
Instead of the generic grid of portrait images, users are presented with a modern stylish looking Windows Phone (HTC Titan) that immediately makes the Windows Phone marketplace stand out as unique featuring it’s own product with pride as the main interaction element.
Using the Metro Panorama UX:
What better way to illustrate the beauty of Windows Phone than to make use of the panorama controls as a slideshow. This can easily be done in purely HTML5 or as a JQuery script. (but should not be in Silverlight which is not supported on mobile devices)
* Notice something unique? The screenshots are displayed in their correct orientation and not forced in portrait. I imagine Microsoft uses some form of CMS system to input app data into the marketplace. Developers should be able to select whether their app should be displayed in portrait or landscape when submitting their app. The CMS will then use two different sets of CSS and asset files as templates so the CMS can make the adequate changes to reflect the orientation change. This solves the problem of a developer manually making the changes for each app.
Support for Video playback
Developers will have the option to feature a H.264 HTML5 video (Silverlight or Flash as a fall-back if they’re using an old browser) of their app in action that will play in-line inside the Windows Phone. Videos tend to attract more attention because by nature humans are visual so by creating more engagement with users they are more likely to take up a ‘call to action’ such as sharing, downloading or purchasing an app. (Videos must be in sizzle-reel style showing real-time playback through capture software and not a video captured through a camera with narration. This is to maintain continuity with a high-end level of quality)
Navigation controls
Users will navigate screenshots by either:
- Clicking and dragging/grabbing the far right or left of a screen and moving either way
- On a touch device? Swipe left or right because the slideshow would be optimised for HTML5, CSS3 and jQuery instead of SL or Flash.
- Use the directional keys on your keyboard
There are rumours circulating that Microsoft may merge the Windows Phone marketplace inside the Windows Store and so my design proposal would by default be defunct. However I still believe that it is important that they pay more attention to little details as the UX and get that Windows Phone on the page.
Case-study: Is Amazon too confusing?
Well Angelina Jolie seems to think so. “Brad and I were on Amazon.com for the first time a week ago. But we got lost. After an hour, we just shut it off. My brain is too scattered and the wires go in different directions. I’ll stick to catalogues”. This was said by Angelina Jolie after being asked by USA Today on whether she did her Christmas shopping online.
Make of this what you will but it got me thinking nonetheless about eCommerce websites in general. While it certainly is true that millions of people globally shop online, it does not necessarily mean that websites like Amazon are intuitive and easy to use because of this fact. I think that there is a large percentage of people that simply find sites like Amazon confusing which I think is mainly to do with a lack of spacing between elements that forces things to feel cramped and disorderly.
In the example above I simply made some minor adjustments to the spacing of elements including the navigation, removed a few unnecessary wording and breadcrumbs from the column and positioned the important prices of information beside the item instead of below. As a result you feel less bombarded with lots of information as the page is properly structured and cleaner to look at.
In previous years eCommerce sites would have had to cram in loads of data above the fold because users were using smaller monitors, but now with much higher resolutions and screen sizes being commonplace there is no excuse.
Here are some tips which I feel need to be considered when designing for eCommerce.
- Don’t overload your pages with unnecessary breadcrumbs. One below the navigation should be enough of an indicator.
- Consider using an adequate XHTML/CSS grid system when planning the site structure in order to space out your elements as best as possible. For a list of grid systems to use see my Links page.
- Avoid using lengthy or unnecessary verbiage, instead use words that are easy to understand and direct. i.e: Find instead of Go
- Consider the information hierarchy, data which has a higher level of importance such as ratings, price, offers must be presented first followed by secondary information like the description etc.
A great eCommerce site is one that cuts down the numbers of processes required in order to make a transaction in a way that is fluid and orderly that will make for a better experience.
Microsoft Homepage: How Microsoft Can Improve It’s Branding
(Note: All images are edited and do not reflect the original website)
I came across an article yesterday by Cory Watilo called ‘Why Microsoft has an image problem’ where he compares Microsoft.com to Apple.com. He makes the point that Microsoft is still very much stuck in their ways by continuously cramming loads of unnecessary elements on one page and using too much colour which distracts the user from focusing their attention on the important things. — I agree with most of what he says but let’s be honest, Microsoft is never going to be like Apple so they shouldn’t try to be like them but they could learn a great deal in their presentation and how they display information.
I’ve always noticed this problem so wanted to see if Microsoft maybe aren’t bad at marketing and design, they just lack in direction. I’m beginning to think I am right and that’s precisely their problem.
Microsoft Homepage Redesigned
The photo above (click to view larger version) was created using elements all found on Microsoft’s own websites (www.zune.net, www.microsoft.com/uk, www.microsoft.com/uk/wave/home.aspx)
If the images are not showing fullsize, use these links: for home, for work
Microsoft homepage when user navigates to the work section.
Conclusion:
Microsoft is well aware that they have perhaps grown old and were in need of a re-branding to revitalise their consumer image. Their problem lies with trying to manage so many complex deep-link pages (mostly unnecessary) and product micro-sites that there is a disconnect between the design which confuses people A LOT!.
There needs to be one or two universal design templates that follows through out every single page and site. This template must make use of screen real estate and support wide-screen viewing. This means using clearer heavier fonts, using HTML5, using less banner ads, using more subtle colours in your branding (not bright blue or orange) and finally force people to use your site (don’t spam your page with links to items of less importance.)
