Evolution of a User Interface

Now that avTag 1.0 is finally available in the App Store work has started on version 1.1. Amongst the new features and usability improvements the user interface is being tweaked and polished. I wanted to share some of the changes being implemented and explain why they have been made.

Below you can see the Filters view from avTag 1.0:

avTag 1.0 Screenshot

[Full Sized Version]

I was generally happy with it but there was a glaring issue which was that the icons in the tab bar at the bottom of the screen were stock icons from the Glyphish icon sets. They’re not bad icons but they don’t really work well with the overall avTag user interface. They were used because I made a last minute decision to use a tabbed interface and my designer didn’t have time to create bespoke icons before I wanted to ship avTag.

In addition, the standard iOS 7 font, Helvetica Neue, is fine but a bit dull. Also, the table row dividing lines were a bit too prominent and distracting. Things just needed a bit of polishing and refining.

For avTag 1.1 the font has been changed to Avenir and, more specifically, Avenir-Book. It’s a very readable font (important since avTag is text-heavy) and it has a little more character than Helvetica Neue, if only because it is used in apps less frequently.

In addition the view titles and bar buttons are now shown in all caps which give them more impact despite the font size now being slightly smaller and the font itself looking lighter.

The table cell dividing lines have been made lighter colour-wise which also gives them the impression of being thinner too. This makes them less obvious and less distracting whilst still being clearly visible.

Finally, the tab bar has gone and been replaced by buttons in the top bar. This looks much cleaner and takes advantage of the fact that the top bar is taller than usual throughout avTag so there is space to add the buttons up there.

You can see all of these changes in the screenshot from 1.1 below:

avTag 1.1 Screenshot

[Full Sized Version]

Obviously these font and colour changes have been rolled out throughout the entire application and the overall feel is of a more polished, more complete app which has a bit more of an identity. I imagine that the user interface will continue to evolve over releases but just a few small tweaks can make things feel fresh and more polished.