Posts tagged windows phone

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.

Windows 8 Start Screen: Boring UI or F****n’ Sweet?

On Friday Microsoft revealed a video demonstrating Windows 8 booting up from post in just 2 seconds. You can watch the video here.

What is not so exciting is Windows 8’s Start Screen which was revealed at the end of the video. Now don’t get me wrong, I am definitely liking the new design approach, it’s just that knowing Microsoft they are not going to consider every small detail when it comes to the design, even if what they release is not final code.

What I hope has been done is allow the Start Screen to be fully customisable (not merely changing tile layout). But similar to the ‘advanced’ controls under Appearances in the legacy environment, these new controls will enable options such as:

• Adding a background image from the computer
• Adjusting the tint level added by default onto every background (the tint is to separate the background from the tiles to avoid them conflicting visual)
• Adjusting the opacity level to all or only specific tiles and an option to reveal tiles (revert to 100% opacity) on mouse-over or touch
• Allowing users to select any tile colour, not just a list of pre-chosen swatches

People love Windows because of this level of personalisation. In the image below you see an example of how I drastically enhanced the UI by simply adding a background image and reducing the tile opacity. This is the small detail I referred to earlier.

I am hoping Steven Sinofsky does not let everyone down by revealing unfinished code because they have had plenty of time since AllThingsD to consider every aspect of the OS.

What are your thoughts. If you walked into a store which UI would catch your eye first and would you want to see on your computer or TV? 

My Personalised Windows 8 Start Screen

After reading Paul Thurrott’s article Microsoft Hits One Out Of The Park With Windows 8 Start Screen and saw he created a personalised mockup of what his start screen may look like, I felt compelled to do the same in order to communicate just how dramatically different the UI is in terms of any other OS.

Try it out for yourself. Download the original image here then if you want edit it in a photo editing program like Photoshop. Next open it up in Windows Photo Viewer and click the ‘slideshow button’ to view it fullscreen.

I have viewed it on my 1080p HD monitor, 50” plasma TV and a netbook and the interface looks much more appealing and attractive than your standard desktop shell. I can only imagine how amazing it will look and feel on a tablet device. :-)

* If you would like to use my Photoshop document as a template, use the ask form on my blog here remembering to provide me your email address.