Units convert 2.0

When I visited UI Lab at the Tech Talks in Berlin, I had one goal: to hear what Apple designers thought about the UI decisions I made in Units 1.0. The outcome was: “this app has some real gems in it, but also several issues that should be taken care of”.
In mid December, I set out to work on those issues and ended spending a good portion of last two months working on Units 2.0, far exceeding the original goals.

Version 2.0 is now live on the App Store and you can see the mini site here on Radiant Tap to watch the video quick tour and check the screenshots.

In this post, I’ll go through many changes and improvements over version 1.

Smooth unit scrolling

First thing was the most glaring one – I figured out the correct code to properly slide in and out the units, when they pass below the text-input field

In 1.0, this pass-under animation did not happen – only when the scrolling would stop, app will figure out what unit is under the text field and then animate it down. This was very jarring if you use the scrolling a lot, thus was the first on the fix list.

This was just a start.

Consistent usage of UI elements

The text field where you enter values was not showing in two different positions. On favorites view, it was fixed to top of the screen. In unit category screen, it was fixed near the top, leaving room for exactly one unit to be displayed above it. I did this to show that units can be scrolled up and down, to make it easy to see that units go above the text field and you can tap them or pull them down.

Apple designer I spoke with proposed (in hindsight) an obvious solution – always make it centered between the top and bottom edge, with or without the keyboard shown.

Clear and simple navigation

The search functionality is very important in data-rich app like Units is. Thus I implemented it on main screen, category screen and also on the favorites screen. That can lead the user to create an unnecessary deep navigation stack, like this:

main » unit cat 1 » search » unit cat 2 » search » unit cat 3 » search …

If you mix-in a switch to favorites somewhere in there, it can be a real mess with the most obvious problem – to get back to main screen, you need to tap back a lot.

In Units 2.0, I fixed it rather simply: instead of adding views to the navigation hierarchy, I would replace them. Thus in case you do this:

main » unit cat 1 » search

tapping an item in the search screen would replace the last two and it will be:

main » unit cat 2

If you do this:

main » unit cat 1 » favs » search

Then tap on something, it will also be reverted back to simple two-step hierarchy above. This shallow hierarchy removes all the confusion, further enforced by the very clear use of top bar buttons. On main screen, you can go anywhere you want:

That’s about/help button, then settings and on the right you can switch to favorites or open search screen. Or choose specific unit category in the grid below.

On unit category, both buttons on the left are replaced with icon representing the main grid, while the right side is the same.

If you switch to Favorites, right side contains only the search button, while the left side is leading you back to main or the originating category:

Thus very clear and simple.

Custom themes – fonts and colors

Helvetica Neue, the iOS 7 system font, looks rather dull when used in a text-heavy app like Units. I much prefer the feel of Avenir (or Avenir Next). Thus I spent few weeks working on this settings screen and related functionality:

You can use system font and its set size, but you can also choose a specific font and set your own size inside the app.

Along with that, you can choose among 14 primary colors and 4 background colors, thus giving you the ability to set the app to your liking.

Dynamic type

This kind of utility app, where there is a lot of text, is perfect candidate for one of iOS 7 headline features – dynamic type. To properly support this however, it means that all the layouts must adapt to the changes in the font size. This had to work with both the system font and size as well as in-app custom settings.

I’m pretty proud how this turned out – it works beautifully, with unit cells expanding proportionally to the chosen size.

Best looking numbers on the App Store

Units displays a lot of numbers and thus lends itself to the use of another headline feature of iOS 7 – TextKit. It’s a framework that gives developers amazing typographic control.

Specifically in Units, I used superscripts to display very large or very small numbers in a very clear way:

Even more importantly, I have used settings that allow better, more compact numbers. This is hard to explain in words and much easier to show how numbers would look like with or without this feature applied:

Look at the spacing around “1” – the upper looks much more balanced.

Custom animations

iOS 7 is overflowing with animation. Custom transitions and springy animations are my favorite feature in iOS 7 and I made good use of them all. When you transition to specific category and return back to main screen, app uses spatial transition that leaves no doubt where you came from, similar to what system Calendar app is doing.

When you transition to Favorites and back, there’s subtle 3D effect applied, to emphasize that you’re switching to a different context of use.

However, my favorite animation in the app is adding to favorites and removing as well. It’s fully interactive, it’s fun and serves the purpose perfectly.

In conclusion…

I’m very proud and happy with this release. It’s a very complex app under the hood but very obvious and useful when you use it. Favorites on one screen is extremely useful feature I use almost daily – I hope many more of you will find it worthwhile.

Again, download it from the App Store or checkout the mini site here first.

Published on · Banca, apps