Big Screen Blog

Media Center, Windows Phone7 + Silverlight Goodness..

Developing UX’s for MediaCenter vs Mobile Phones..

leave a comment »

I’ve developed a few products for both 10 foot (Media Center and other PVR’s) and for 1 foot devices (j2me and Browser based apps for Mobile Phones/PDA’s) – and despite the obvious differences between screen sizes, cpu power and input methods – the similarities between them always surprise me. It’s a whole different mindset from 2 foot (Windows Desktop) applications – where almost anything goes – due to more sophisticated input (mouse) and the proximity of the user to the screen.
 
I always end up making almost the same design/page flow decisions for both these platforms as the rules seem to apply equally. (and end up with very similar User Experiences).  
 
Some of these similarites stem from these constraints + rules –  
 
1) Input Devices – Both the MediaCenter Remote Control and a Mobile phone share 3 different types of primary input actions :  a) 4 Way Directional Input (Up/Down/Left/Right) which move the current focus around the screen   b) an ‘OK’ button   and  c) a ‘Back’ Button.  In some cases – earlier Mobile Phones were even simpler – and only had Up/Down (2-Way) controls.  This essentially restricts the focusable elements on your UI to a be presented in a strict grid layout – and if you display a List of Items and a Set of buttons on the screen (a very common scenario) – the orientation of both need to the same. (ie you don’t mix a horizontally flowing button bar with a vertical list).
 
2) Limited screen real estate – This is not so much about how many pixels are available – but about the clarity/readability of the two different experiences. If you compare the Screen Size vs Distance from the Screen you get pretty similar ratio (ie your viewing distance is approximately 3-5 times the maximum width/height of the screen in both cases). Due to this – more detailed graphics (such as very small text etc) are to be avoided – and generally your focusable UI elements will be quite large in comparisson to the size of the screen. On both platforms for example – you generally try to not display more then ~4-8 visible menu items at once  (and any more can really make things confusing).
 
3) Ease of Use / Brevity : Both UX’s need to be very fast to use (as users will generally only use both sorts of applications for short bursts of time) – so all screens/options should be accessible with a very small amount of clicks (ie you should be able to get to most parts of the application within 1-3 clicks). If your users actually need to read a manual to ‘learn’ how to use your application – then there’s a problem (and the manuals are there to instead help sort out the more complex issues with your application).  The most intuitive designs are generally ones where the user feels like the application is an extension to the platform they are on – rather then a whole new world.
 
4) Heirachical Page/Screen Flow – Similarly, both UX’s should provide a very straightforward Heirachical structure – so page flow is generally limited to 2-4 pages deep – and its essential that the end user can ‘feel/know’ where they are in your application from any page – and have the ability to navigate back to the main menu quickly and easily.  The main entry screen should also provide single click entry points to the most important parts of your application. Wizards generally don’t work well for both these platforms (unless you are doing a ‘once off’ task – like setting up a new device etc)..
 
5) Keep it simple / More is Less –  Users on both platforms also expect simple/straightforward screens with "just the facts m’aam" – rather then a plethora of details. If you are writing an online store for example – you would maybe display a picture thumbnail, a price, a brief description of the product and a ‘Buy Now’ button (wheras a 2 foot user would expect customer reviews, shipping details and a raft of other detailed information). This works equally well in terms of making your UI look great and too much detail makes your UI look very cluttered.
 
6) Continuous Engagement- Unlike 2 foot environments – where a user may have many applications running at once – Mobiles and Media Center Applications are generally only shown/used one at a time. If you are performing a long running task (such as downloading some information from the internet) – the user shouldn’t feel like the application has crashed. Ideally you can either keep them entertained with some sort of on screen animation (and progress bar) – and an even better solution is allow them to start browsing the data while it is still arriving (ie if you were displaying a thumbnail list of Movies from a users harddrive – you could populate the list as data was found – rather then waiting till the entire system had been scanned).
 
Below is a couple of screenshots from products I have written – both of which are applications for viewing latest stock market information. The one on the left is a j2me application for a mobile phone (called ‘Mobile Markets’) – and the one on the right is a WPF/XBAP application for Windows Media Center (called ‘Big Screen Business’).  You will see almost the same layout in use for both products – ie. same Widget:Screen sizing ratio in play, vertical list with a ticker down the bottom, and only a small amount of imformation presented at once per each list item.  
  

              

## Note that the mobile phone application has OK / Back buttons in Horizontal Flow – however these aren’t actually focusable elements (and instead sit directly above the ‘SoftKeys’ which are on a mobile phone keypad – a technique used by most mobile phone UI’s) ##

If I was to construct some sort of Page flow diagram for these two applications – you’d be amazed at how similar they would be.

 

Advertisements

Written by mobilewares

November 11, 2006 at 1:05 pm

Posted in Vista MediaCenter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: