M25: My First WP8 App - Part III

Once I determined what my version 1.0 feature set would be I next started work on the UI.  I know other developers who approach it differently, starting with a data model and working their way to the UI.  I've done both and I prefer starting with the UI and letting that drive the model.  This is more of a needs-based approach.  The best approach is the one that works for you.

During this phase I did quite a bit of prototyping and experimenting.  At one stage I envisioned having a clock-like representation of the circular M25, with each junction positioned in its relative position along the rim.  While it was pretty cool, there were usability issues due to limited screen real estate and the number of junctions on the circle.  Unfortunately I had to abandon what was going to be a centerpiece control for my app.

Instead I went with a more conventional edit screen and list picker.

The governing reason for this decision was usability.  It was simple and intuitive.

Early on I had decided to adopt a colour-coded status (red, amber and green) to indicate traffic status.  I wanted to keep things simple and not complicate the user experience.  I wanted the user to simply glance at the screen and get an immediate feel for the traffic conditions.

After reviewing some sample data from the Highways Agency related to the types of incident reports, I came up with this:

The result is the My Routes page:

I chose to use the Cambria font as a title font instead of the standard Segoe WP, more for aesthetic reasons. The same colour convention was used throughout the app, as in the Junction List page:

Another temptation was to incorporate the built-in WP8 maps functionality.  Again, my objective was not to create a SatNav application or journey planner, but to keep the app focus on the current traffic conditions of the M25.  That said, there was a point where I felt access to maps was relevant and potentially useful.  On the Junction Detail page I display a small map snapshot along with traffic data for the junction.  From here the user can jump to WP8 Maps using this location.

That's pretty much the summary for the UI development.  A lot of experimentation occurred to arrive at this point.  Some developers may view the Modern UI (formerly Metro) as being simple or easy to design, and in some respects it is.  I don't claim to be an expert in Modern UI design or that my app is a standard reference.  I do think that working with the Modern UI shifts the emphasis of design.  Instead of making something look pretty or have a wow-factor, the designer is really focused on information and how best to express that on the screen.  To some degree our GUI design legacy leans toward complex UIs.  Modern UI is forcing us to revisit and rethink user experience, stripping things back to the basics.  This is an interesting process, and ultimately a rewarding one.