Mark Arteaga

Internally at RedBit we have a set of in house libraries that we have developed to help improve the user experience for projects we deliver to customers.  But sometimes using third party controls makes sense especially when you have a schedule to keep. 

Check out the controls offered by Bee Mobile as they can help in making your .NET based Windows Mobile software look a little nicer.  Check out the progress bars they have:

Although we have ProgressBar controls with glass effects internally one control we don’t have is an iWheel type control so I decided to give it a try

I’m not a big fan of making Windows Mobile look like an iPhone but the iWheel control is functional and makes things like selecting a date a lot more convenient for the user as opposed to using the standard dateTimePicker

The RedBit team will definitely be using the iWheel on a few projects we are working on and definitely worth the  39.95 € (About $60 Canadian).

I've had the privilege of using a HTC Touch Pro device (courtesy of Bell Mobility) running Windows Mobile for the past few weeks.  You are probably thinking, "great another review of the Touch Pro and HTC's TouchFLO user interface" but I have not been using the TouchFLO user interface. 

The Touch Pro from Bell Mobility is yet to be released, but instead of using the TouchFLO home screen I have been using the 'Bell Experience' home screen. Bell has decided to create their own home screen for Windows Mobile providing what Bell calls the ‘Bell experience’.

The Bell experience completely customizes the Windows Mobile home screen and attempts to make things a lot easier to access, improve the user experience from the standard Windows Mobile home screen and delivers content right to your Windows Mobile device.  It also uses 'gestures' to slide content, scroll lists etc.

How does Bell display the content? They created what are called Bubbles, and with these Bubbles, Bell can display content selected by the user. It's a way to quickly access content important to you.  Bell has developed this new user interface to try and promote Bell's Mobile Entertainment offerings services that they offer for example LiveTV for Windows Mobile.  But they also have things like Headline News, Entertainment News, Business News and Music.  Here are some screen shots of it:

The user interface also allows you to slide from bubble to bubble using gestures (sliding your finger across the screen) giving it a nice user interface effect.  

If you are not interested in the default Bubbles you have the option to select which Bubbles to display on your home screen:

I also mentioned how things are more easily accessible.  What do I mean by that, well say for example you want to watch LiveTV such as HBO, CTV Newsnet or BNN (Business News Network).  By clicking on the Media Buttons you will get a screen with the option to watch live TV, internet radio, music or video on demand right from your Windows Mobile device.

What else makes the device a little easier to use?  Ever try to raise the volume on a Windows Mobile device?  Usually you would be presented with this

But with Bell's user interface you get this with the option to quickly put it in vibrate or silent mode.

How about accessing your applications?  There are two ways, you can click the Menu button and you are presented with your running applications, plus groups of other applications such as Games, Photos, Email etc

The second way is by clicking the favourite applications icon which presents you with this screen (which can be customized)

What else makes this device a bit easier to use?  Usually with setting up your device on Windows Mobile you are presented with the standard settings screen that comes with Windows Mobile.  (With Windows Mobile 6.1 this has been improved somewhat with a Windows Mobile Welcome Center)

The Bell experience user interface simplifies this by giving you a settings screen followed by some items in a list to modify your device settings:

In summary I think Bell has done a pretty great job in improving the user experience on Windows Mobile.  It shows how flexible Windows Mobile is as a platform and allows developers, OEMs and wireless providers such as Bell Mobility to provide a unique user experience to users.  It also allows Bell Mobility to up sell their services such as Live TV.

I've been showing the device at my Windows Mobile TechDays Canada Sessions (so far Toronto and Montreal) and will be bringing it to the rest of the cities.  This device has not yet been released so if you want to see it let me know.

There has been a lot of talk about how the Windows Mobile user interface is just not up to par with mobile devices such as the iPhone.  As developers we cannot change the Windows Mobile user interface but we do have the opportunity to differentiate our applications from the competition or to just add a little "eye candy" to improve our applications user experience. 

So how do we get this done on Windows Mobile?

Well not being a graphics expert I decided to search the web. First thing I did is figure out how to implement a 'glass effect' using Paint.Net and found this post on how to make 'glass buttons'.  Now that I had the knowledge on how to create a glass button using a graphics program I could try and implement in code.

Before I did that I searched for any existing code on the desktop.  I found an article on Code Project which uses GDI+ on the desktop to create a glass button and works great.  Using the knowledge form Alex Feinman's article on Using GDI+ on Windows Mobile I was able to port the desktop code to Windows Mobile.

The glass button sample accompanying this post just draws on the main form and uses a panel for the bounds of the 'button' and checkboxes to set different states for the button.

In the interest of time, I did not implement a full glass button control and I'll leave it up to you to implement a control possibly using the gradient button for Windows Mobile available on MSDN as a starting point.  Now that you have the knowledge (and code) on how to paint a 'glass effect' on Windows Mobile this should be straight forward.

The code results in the following:

Glass Button with Enabled State
 

Glass Button With Hovered State (or Focused)
 

Glass Button with MouseDown State
 

Although this will add some eye candy to your Windows Mobile application, there are a few caveats:

1. The glass button sample code doesn't really create a button control but just draws and blits to the screen
2. GDI+ is only support on Windows Mobile 5+ with touch screens which means this code will not work on SmartPhone (or non-touch screens :) )
3. GDI+ on Windows Mobile is too slow IMO but caching the bitmaps should help.

So there you have it, glass effect on Windows Mobile.  I'll be following up with some more posts on some techniques I've used in the past to give Windows Mobile applications a nice UI instead of the standard 'grey controls'.