The Glass Bottle Apps Approach to Better User Interfaces

featurebanner-design-2015-09-30

It’s not enough just to aspire to having good user experience, as we learned the hard way with our Dollar Limit app. Less than a month after it was released, it was criticized for having a “lacklustre UI” on App Apes. Since then, we have been on a mission to develop a systematic approach to user interfaces and user experience as a whole, so that we could get a better experience for our users every time.

Through two and a bit years of development and a voracious reading appetite (check out our Flipboard collection on UX) This has become extra important lately, as we worked on our upcoming Happy Alarm app, which has quite challenging to develop a good interface for.

Dollar Limit Screenshot

The original “lacklustre” Dollar Limit main interface on iPhone.

Dollar Limit Screenshot

The current Dollar Limit main interface. Note the button for hiding the menu bar.

So what was wrong with Dollar Limit?

In hindsight, the first version of Dollar Limit suffered from a few things. First, that it was just too plain. But the main problem was the buttons; while text-only buttons are built into iOS, these ones looked like they were sitting randomly in the content area. There was no styling to give a sense of hierarchy of their functions. There was no real “button area” and every function was right on the screen calling for the user’s attention, whether the button was needed or not.

How much information is too much?

One of my bad habits that has persisted ever since I started designing apps is the tendency to throw everything at the user all at once. Perhaps it’s an engineering tendency (I studied civil engineering in university), but I always want the user to be able to get anywhere and do everything right on startup. A good goal, but things are never that simple. This often led to crowded interfaces with too many choices (see below). But pare things down too much, and the app seems featureless, something the original version of Dollar Limit suffered from.

Are there any hard and fast rules to solve this? In my experience, no. But the approach I did settle on is to prioritize actions into tiers.

  • Tier 1: Most important actions / core feature of the app — these need to be put front and centre, often integrated into the main part of the app. See for example the “Add Funds” button which is inspired by Android’s Floating Action Button.
  • Tier 2: Important actions, most users will need these but not all the time — These should be put into a bar of several buttons, for example a toolbar in iOS or an Action Bar in Android. (see the top bar in the Dollar Limit example above)
  • Tier 3: Infrequent actions, not used routinely if at all by some users — Since these actions will not need to be accessed on a regular basis, they can be hidden behind a menu button so they don’t clutter up the rest of the interface. The account admin and about screen buttons in the Dollar Limit app are good examples of this.
One iteration of the Fundometer welcome screen. A lot of choices, even for a tablet interface.

One iteration of the Fundometer welcome screen. A lot of choices, even for a tablet interface.

Putting the principles to the test in Happy Alarm

Happy Alarm presented a very different challenge: We wanted to put the main action — setting an alarm — front and centre of the app, but also have several other buttons for shortcuts and for leaderboards further down. The problem is that the Android system time picker, which resembles a clock, would take up most of the screen and obscure all the other elements below it.

Our solution: make the alarm time the largest object on the screen, and give clear indications to the user that they are supposed to open it up to set the clock (a tier 1 action). This was done with two large buttons on either side of the time label. Once opened, the user can now set the time and set the alarm. This also had the side benefit of making it harder to accidentally change the alarm time. Below that were the tier 2 actions for alarm-setting shortcuts and for leaderboards. There are also some tier 3 actions which are hidden behind the menu button. While only time will tell how successful this app is, it was at least good practice at systematically applying the lessons learned from previous apps. The more we refine these practices, I become a better app designer, and Glass Bottle Apps as a whole becomes a better at solving design problems for ourselves and our clients.

The Happy Alarm interface with the time picker hidden.

The Happy Alarm interface with the time picker hidden.

Next in our UX series: What makes a good button

Glass Bottle Apps designs and develops apps that help people save more and stress less, whether they are small businesses, people with an idea, or just trying to save money. Check out our portfolio at http://www.glassbottleapps.com/available-apps/.

Share This: Facebooktwittergoogle_plusredditpinterestlinkedintumblrmailby feather

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.