Simplifying Expense Tracking with Improved UI

Split screen controls can do more harm than good.

Let me explain, but before that — I have a confession to make: I hate expense-tracking apps.

I think I don’t like them because the app I ended up using happens to be the least shitty option there is. These apps are often confusing or they don’t look good.

I’m going to criticize the app I’ve chosen, hoping they will fix it sometime. I’m talking about Money Manager.

This is the screen you see after trying to add a new expense.

Let me give you a small introduction to the interface first:

• At the top, you see the expense view form. It contains inputs and buttons.
• The interface at the bottom, displayed split-screen, is an input detail: If you select the account input (selected by default: in the left part of the screenshot), you see the available options. Besides the options, you can also close it (the X icon), edit button, and a weird button which, when pressed, makes the navigation even more complicated:

A sort of “Interface Mode: Hard”. Here, to choose Cash I need to click on the Cash thing from the top, to then choose the Cash thing from the bottom… You get the point. Let’s now go back to the original idea I had.

Do you see any problem with the way the interface is organized?

I had to explain the interface and it took me a lot more space than I would fit on a screen. I’m not sure about you, but for me, this kind of interface is unusual. I don’t remember seeing this kind of split-screen control in iOS or Android (this app exists in both app stores and it looks nearly identical).

The first detail of the split-screen control I wanted to point out is — regardless of the number of options I have for the input, I see the entire element, taking almost half of the screen. If it’s the first time I see it, I have to scan the UI with my eyes to understand what is going on.

The second detail is — if there are many items, now I have to look for the one I need by scrolling down and scanning three rows at the same time.

Not only is it slow, since it’s not in alphabetical order — it also is nearly impossible to remember the position of a category, since you need to keep in mind its row and column. Now that’s some rocket science for a person (like me) that, in a hurry, wants to track the coleslaw they bought while hurrying back to the office. I constantly catch myself on the fact that, although I’ve been using this application since 2020, I cannot remember where my categories are located and have to look for them every single time. I would rather have used this time to complain about something else.

You might argue that this split-screen design works better for entering data faster since modern phone screens are pretty tall and this UX decision solves the problem of reaching out for an element on the screen, but the fact that you have to scan for a category in 2-coordinate space defeats the time you saved reaching for the input.

The solution

Use fewer elements per view.

Let’s imagine: we get rid of the bottom split-screen control, replace the top star-like button (which is for templates) with settings, and use full-screen selects with items in alphabetical order (and replace the Continue button with a Templates button, since I don’t know any icon that could be easily associated with that function).

What we gain:

1. The view becomes much simpler — We don’t have to worry about the edit button from the split-screen — editing items happens in the settings section; we don’t have to wonder what the star-like icon means — we have a Templates button; we don’t delete the app and try finding another simpler one
2. Alphabetically arranged items are much easier to find and remember — users have only one search dimension and they intuitively scroll to an approximate position of the ordered list
3. We focus on one action at a time

After these changes, the interface is less usable with one hand, but it wins in terms of speed and clarity. It could be further improved with a dialog containing some frequently used items, but that is a whole different story…