Monday, 10 September 2012

STOP! Make Sure It’s Metro for Windows Phone


I admit it.  I am a habitual cross-border shopper.  I live within 20 minutes of a US/Canada border and I cross at least twice a week.  I do NOT, however, like waiting in lines.  Waiting an hour to cross the border is not something I’m willing to do.  My tolerance runs to about 15 minutes maximum and I prefer about five.  On my iPhone, there was “an app for that” but the question was, would there be an App on my now, I-can’t-live-without-it, Samsung Focus Flash Windows Phone 7?  The answer was… (as is usually the case) sort of.
A fellow developer in the “Developer Movement” (www.developermovement.ca) had a free app available that showed border wait times.  There was one other paid app that did the same thing.  I decided to give it a try.  The app delivers the information.  No doubt about it.  This is where I get the “But I coulda’ done it better” thought.  One of the key design benefits of Metro is conservation of actions.  If I want to check my social media stream, I should not need to “go in an out” of an App a bunch of times to do that.  With Windows Phone, it’s click once and view it all.  This particular app didn’t deliver on this promise.  To check my local border crossing (there and back again) took 3 taps and 4 swipes.  Plus all the content was text only.  Again, it had most of the content I wanted, but Metro is about the presentation.  Using the default pivot project does not constitute an appropriate interface.

Develop What YOU Need

I should be able to get the information I want on a repeated basis with just one tap… At least I think so.  I should also be able to see the information and grasp it in a glance.  The phone supports color… use it without abusing it.  I really only cross about 2 or 3 borders on a regular basis.  So why should I need to look through all of them?  I want an app that, when I open it, immediately shows me my favorite border crossings and tells me everything I need to know about it.

I decided to create "Border Wait Times" for Windows Phone.

Panorama/Pivot.  Think About the Difference.

Description: C:\proj\BorderWaitTimes\Marketplace\FullPanorama.pngI decided to use a combination of a Panorama (As the front page), a Pivot (for showing different views of the data) and Tiles (for one glance information dissemination). 
Panoramas are ideal for “front pages”.  You don’t want to throw a bunch of information there as the titles tend to take up a bunch of room anyway.  My colleague, George Ashley, pointed out to me that the Panorama is kind of like a magazine front page.  They always have something that grabs your attention.  But then they sort of tell you what’s inside.  Our Panorama presents your favorites immediately upon launching the app.  One Tap (to open the app) and you see what you want.
On the second panorama panel I let the user select what view of the data they prefer.  Do they live in the US? In Canada? Maybe in the future Mexico?  No problem.  All the views present the exact same data tuned for that particular preference.  For example, sorted by Province or by State.  This is the table of contents or the teasers on the front page.  It tells you what is inside but doesn’t overload you with info.  White space is a good thing.
Description: C:\proj\BorderWaitTimes\Marketplace\FromUS_NY400.png
The Pivot panels were no big deal.  These are the magazine articles themselves.  Each panel presents all the border crossings (for both directions) by Province or State depending on where you live.  You can always customize your “Front Page” by adding to your favorites list.  But the power is in the users hands, not mine!
Of course, never lose sight of presentation.  Little things create big wows.  I kept everything very clean but added the state/provincial flag for just a splash of color, the rest is all white space (or black depending on your theme)

Windows Phone + Metro = Tiles

Description: C:\proj\BorderWaitTimes\Marketplace\TileDescription.pngThe big new thing was to use a form of “Tile” to represent the data.   Simple formula.  Not enough developers do it.  I created a tile, keyed to the phone theme color that shows everything about your favorite border crossing in a glance.  In a single Tile, show the viability of a border crossing with a green/amber/red light icon.  Show the time to cross, show the name and other information.  An added advantage is that there is even more I can do later.  Want to add Border Cameras?  No problem.  The tile is tappable.  Tab and Hold and you get a menu where you can “Pin” the tile to your Favorites.  In the future, why not Live Tiles.

Use the Phone’s Features

The last thing to remember is that Windows Phones can do lots of cool things.  Why not make use of them?  A border wait times app is inherently a travel app.  Why not connect it to Bing Maps and navigation?  Tap and Hold then click “Get Directions” and you are on your way with Voice navigation complements of Bing.