Transaction direction can be unclear

[agryson]

When creating a new transaction, the field "foreign" and "own" work ok for withdrawals and deposits but for transfers it can be unclear which account will be debited and which will be credited. Also, even for deposits and withdrawals the "source" flips from the right to the left or vice versa, the arrow shows the direction but it's still sometimes the reverse of how I would say it (from/to)

Firefly uses the terms "source" and "destination" and keeps the order of the fields consistent with that (the "from" account is always the first in the form, the "to" account is always afterwards)

Perhaps waterfly could also:

1. Make the field order consistent with the transaction order (for ltr languages, i.e. debit left credit right)
2. Change the terms, using from/to or debit/credit or source/destination etc.

[agryson]

Admittedly this might cause issues with the withdrawal icon, just changing colour would cause issues for colourblind users, meaning the icon itself would need to go somewhere else to avoid confusion

[dreautall]

You're pointing out exactly the part of the dialog I had the most headaches with when creating the app (and actually had to stop for a couple of weeks because it was just creating a ton of frustration).

I looked a lot at how Firefly is handling it. It dynamically identifies the type of the transaction no matter which option you initially select and then has a big "You're creating a withdrawal/transfer/deposit" text that shows up once it's clear (based on the accounts). While it works, it can also create a bit of confusion why you cannot select a certain account in the other field etc.

I could do it the same way, just having the arrow icon as an indicator somewhere. However, at least to me it felt like I was missing the "decision" when creating a transaction. On the web interface, you select "create withdrawal" first and usually don't even notice you can also do a deposit in the same step. And I really like that all of your own accounts are in the autocomplete list automatically, while on the web interface it's just all accounts (of course I could tinker with the autocomplete to just show do that as well if the other field is still empty).

I initially had the arrow button & indicator next to the amount field (where now the dollar icon is). That worked, but then the accounts both had their own line, which was taking up quite a lot of screen space, and putting them in the same line just next to each other was just adding to the confusion which one is which.

However, I totally understand your point. It's also strange that the thing you own is on the far side.

As a small change, I could dynamically change the text of the fields when you select transfer to at least help with the biggest issue. For the overall layout, I'll think about it some more, and am always open for suggestions!

[agryson]

I played around with this in penpot (just a wireframe, adjust style to match your own)

Combining your comments and mine, I think the requirements are:

• unambiguous and consistent source/destination accounts
• avoid confusing user with 'hidden' options in fields
• have the user make a decision as to the transaction type

Option 1:

This does not have the user make a decision, they simply hit "add transaction" and enter the source and destination from a list of all accounts, the system then determines what it is. This seems to be the "easiest" and least ambiguous but the disadvantage is it doesn't force a "decision" on the user (if you see that as a disadvantage, there's arguments both ways)

Option 2:

The FAB component could force the decision of transaction type to earlier in the flow since I believe the component, when clicked, can optionally provide 'sub buttons'.

This would meet most of the requirements I think since you are "deciding" what type of transaction it is early.

[dreautall]

Thanks for taking the time to even make a mockup! I agree that this would be the most obvious (and webinterface-like) solution.

I just dislike that it takes up a lot of horizontal screen space (2.5 to 3 lines, depending on padding etc).

[agryson]

Sorry, which solution are you referring to?

In the first i recovered the vertical space by pulling the date up beside the currency.

In the second, I believe those extra buttons only show when you tap the FAB, so no change in spacing compared to today's.

[dreautall]

Alright I didn't get that in the first screenshot, my bad!

I'll try some stuff out when I have some free time, as the time input also needs some place (unfortunately there doesn't seem to be a combined date & time picker in Material 3, it's always separate) - and the "free" space is currently occupied by the foreign currency (though that is a rare case where an extra row could be shown with the details for that).

[agryson]

No worries, there's more valuable things to do in beta.

To explain the mock-up a bit more though:
I never use the time myself only the dates so I removed the time field and I replaced the currency icon with the current currency button, idea being you can still switch if you need to.
That one line handles currency, amount and date, and removes the "dollar" icon with the actual currency, which suits me as I'm in Euro.

[zynexiz]

I liked how option 1 looks like. Having both foreign and own account on the same column crams is together on my phone, so I barely see what I typed. Think a better option is to have them on separate rows like in first option?

[dreautall]

Hi, I'm really sorry that this one got put on the back burner for so long! I honestly also missed the ping from github about your latest comment.

I still agree with the premise that the screen needs to be optimized, but I still don't like how much screen space option 1 takes up, to be honest. I know you pulled some other stuff apart, but that's what the current screen looks like - no real room to pull something apart. Adding 2.5 lines pushes the Category box below the keyboard:

Still open for any suggestions, I honestly have no better idea since May :(

[imjuzcy]

My opinion is that since most users are probably using the app on phones, having two fields that potentially could be long strings in the same line side by side is untidy. The account names don't have to be very long before part of it is hidden, for example on my phone I can only see ~10 characters (varies because non-monospace) in the account fields.

My suggestion would be with @agryson's option 1, with a few changes:

1. the amount field can be smaller (I don't think people often do huge transactions) to have more space for the date & time field
2. currency in the field like how the foreign currency is currently
3. the arrow showing the direction floats between source and destination account, overlapping the fields, and so there is no extra space between the both account fields

With these modifications, it should take up 4 rows like how it is currently, and only when foreign currency field is needed, the field will appear in a new row making it 5 rows.

Here's a mock-up:

I'm not sure how hard this is to implement, but I think it looks much cleaner. In this case, the information loss compared to current is foreign currency amount, which if needed will add a fifth row.

If you want to avoid that fifth row, here another mock-up which has all the information that it currently have, but look cleaner in my opinion:

Both does not use more screen real estate as current version.

[dreautall]

Thank you for your comments and mock-ups!

How would a depost/withdrawal/transfer be distinguished, by the color of the arrow symbol? The symbol itself wouldn't be clickable?

In both examples, how would you trigger the foreign currency dialogue, what would be the "button" for that?

[imjuzcy]

In my mind, the arrows on the left would show which account the money will be going into/out of. So in my mock-ups, the arrow pointing to the left would mean the money is going out of the account (hence the hint text "source account") and vice versa.

To distinguished between deposit/withdrawal/transfer, the round symbol on the right and its colour (the red circle with a down arrow in the mock-ups) can be used. It should be clickable to change between deposit/withdrawal/transfer. But to be honest, I currently have no idea which symbol should denote which, but I would suggest to not use arrows, as the flow direction of the money is already shown by the arrows on the left. Maybe "D" for deposit, "W" for withdrawal, and "T" for transfer? Long-click on the circle will show a hint text box telling users what "D", "W", and "T" means.

For the first mock-up, the foreign currency field would have to be triggered by a button, maybe the "$" symbol left of the amount field. When the user tap on the symbol, a new field appears in a new row under the existing amount field, but with a foreign currency.

For the second mock-up, two amount fields are always present. When the user is typing on the first (source) amount field, the number and currency is automatically copied to the second (destination) amount field. If the user is doing foreign currency transaction/transfer, they can change the currency and amount on the second amount field, then they will have two different amounts in two different currency in two fields.

In all cases, the currency can be selected by tapping on the currency symbol, "EUR" in the mock-ups.

[dreautall]

I will try to experiment with the first layout a bit and might release it in a beta version just to get some feedback on it, thank you very much for the suggestion.

For direction I'd just change the background color of the arrow. Once you enter the accounts and the app can figure out what you're going to do (when the website shows "You're creating a ", basically), it could automatically show the type and then collapse into the symbol only to be not too disturbing.

Not fully sure when I will get to it though, summer just arrived here 😄

[dreautall]

Making some progress as proposed by @imjuzcy. The "button" animates the text when a new TX type is detected, TX type detection & autocompletion works exactly like in the web interface (basically step 1 - step 2 - step 3 in the pictures):

Feedback appreciated :) still working on the actual functionality behind, especially split transactions are pretty time consuming to adapt..

[imjuzcy]

That looks great! Much cleaner than current. How does foreign currency input work in this case?

[dreautall]

To be honest, not yet implemented there. Maybe you can just do it at the split with a symbol there (like the reconcilation/bill icon). Shifting everything up top to add a completely new line (which would be rather empty with just an amount field) might be a bit too much. Not too sure yet :(