19

I have seen numerous examples of banking applications that use arrows to indicate money in and out of an account. However the direction of the arrow is a bit problematic, specifically in which direction shoud it point to indicate in or out?

So, is there any evidence or research to support using or not using arrows to indicate money movement?

So far I have explored a number of options and haven't decided yet which option to go for and welcome you ideas!

enter image description here

I do understand that part of the success of the arrow to represent direction is due to the fact that it could be turned in any give direction and still fulfil its primary function and this is probably its weakest point. That being said, could arrow icons still be used as a quick visual reference to indicate movement of funds without actually misguiding users?

Update: Thanks for all your responses. This was really helpful! We have decided to go for the solution below as it does solve the main issue when using arrows in this particular context. The solution was further enhanced using colour as suggested by some of the answers and comments.

enter image description here

BTW the above is an item in a filterable and sortable list and the use of the arrow in this particular case is simply a visual enhancement as I am not relying entirely on it to convey movement of money in and out of the account.

Thanks again to all!

Improve this question
13
  • 11
    I have found from usability testing that the trouble with using arrows as indicators is that people will think the arrow is pointing at something in particular on the page, rather than being an icon / indicator on it's own right.
    – JonW ♦
    Apr 1, 2015 at 14:29
  • Icons without labels are seldom clear to non-designers. nngroup.com/articles/icon-usability Check this article and see if you still want to risk it.
    – HC_
    Apr 1, 2015 at 16:33
  • 3
    Some cultures write from right to left and the meaning of the arrow may be opposite to them.
    – Cano64
    Apr 2, 2015 at 14:31
  • 2
    Having worked in billing support for a few years, I remember very few reps actually knew how to read the debit/credit ledgers correctly.
    – AaronLS
    Apr 2, 2015 at 15:28
  • 1
    Why does everyone seems to hate + and -? I see all kinds of crap UIs being used by various banks: "debt" vs "credit", value vs (value), color coding only (good luck deuteranopes). Now arrows? Why.
    – Alexander
    Apr 3, 2015 at 15:01

11 Answers 11

Reset to default
59

This is perhaps perilously close to an off-topic icon discussion, but I think you could modify the arrow icons to make the outgoing versus incoming direction clearer. Essentially, you need to give context to the arrow:

enter image description here

I would continue to use colour as an additional clue.

Improve this answer
5
  • 4
    That's a big improvement on the iconography -- much clearer. Just a note, Bank of America also uses the in-out arrows to characterize transactions.
    – RobC
    Apr 1, 2015 at 17:10
  • 1
    Matt, Very close to off topic indeed :) I was actually debating with the team whether or not we should include an icon to indicate the flow of money. Really like your approach because it does provide more context. Thanks
    – Okavango
    Apr 1, 2015 at 18:37
  • 2
    +1 this gets at the very crux of the issue with using arrows
    – tohster
    Apr 1, 2015 at 22:30
  • 1
    +1 this is wonderful idea giving a bit of context to the arrows... However, a small nit-pick with the colours, the red and green may possibly be interpreted as being linked to the negative status of the bank balance... Just a thought.
    – R4D4
    Apr 3, 2015 at 23:41
  • 1
    +1, but I ruined your nice 42 upvotes..
    – gandalf3
    Apr 3, 2015 at 23:49
20

could arrow icons still be used as a quick visual reference to indicate movement of funds without actually misguiding users?

I think the way you've presented them might be confusing but using them in a different way could be more familiar to what people is used to. Example:

enter image description here

Additionally, for money related movements the two pair of most familiar accountance symbols are:

  • +increasingNumber / -decreasingNumber . Eg: +200 , -500
  • increasingNumber / (decreasingNumber ) . Eg: 200 , (500)

These also have the benefit of needing just 1 column to represent the movements (adding green/red color would be a good addition, which will keep the UI simple and scannable):

mockup

download bmml source – Wireframes created with Balsamiq Mockups
For more clarity, you can use two columns:

mockup

download bmml source

Conclusion:

I don't think arrows are the best choice to represent what you need, because there are other available options (as the ones I've mentioned) which most people are more familiar with and have a smaller chance of being misinterpreted.

From my experience and related to money, arrows are used to represent changes from a previous value.

If you need or want to go with the arrows, @Matt Obee approach would be a good enough one for sure.

Improve this answer
4
  • 1
    yes exactly, hence my answer below...it's a shame we're lower down the list when there's loads of rubbish answers further up that are bad UX.
    – Chris
    Apr 2, 2015 at 13:39
  • Note that the convention, if I'm not mistaken, is that debits go on the left and credits go on the right.
    – Tanner Swett
    Apr 2, 2015 at 22:18
  • 2
    My issue with this one is that accounts aren't markets: the value doesn't just go up and down. Money moves from one account to another (though that other account isn't necessarily yours), and while I'm not sure it's always necessary or even possible to reflect what that other account is, I do think there's still value in explicitly showing that the money is moving, not just increasing or decreasing.
    – The Spooniest
    Apr 3, 2015 at 12:07
  • Every bank/budget system I've used has looked like your last two diagrams. They are what I find most intuitive. Arrows schmarrows.
    – Brad
    Apr 3, 2015 at 15:37
20

I've found that arrows without words tend to cause confusion amongst users, especially those that have a color blindness. If you use multiple indicators such as the arrow, color, words, and/or +/- you are meeting user accessibility the best you can. You can do something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

or in other words:

mockup

download bmml source

or as some have suggested:

mockup

download bmml source

Improve this answer
7
  • 1
    Thanks for the answer. Both options are good. Your second option seems to have both form and function!
    – Okavango
    Apr 1, 2015 at 18:16
  • 1
    eww, looks inefficient. Since in/out is just a bool and would logically be a +/- on the amount column, I would combine the two columns and perhaps color rows red/green.
    – bjb568
    Apr 1, 2015 at 22:43
  • 1
    @bjb568 - True, you could switch it up. I wouldn't say eww , but point taken. Although your row suggestion would leave out red and green color blind people.
    – Code Maverick
    Apr 2, 2015 at 18:58
  • 1
    most statements show money going in/out as positive/negative numbers (to allow quick-and-dirty addition). that is much more difficult with this mockup.
    – smcg
    Apr 3, 2015 at 19:58
  • 1
    @Okavango - I've added another mockup that is a simple quick and dirty way to see money in/out with the +/- as well as one with parenthesis that denotes out. as some have suggested in the comments.
    – Code Maverick
    Apr 8, 2015 at 15:57
6

  • You can use the + and the - icons if arrows aren't required.

  • I would probably use ↑ and ↓ if :

    • I had to use arrows
    • I can't write other account movement information.

  • If you really want to use → and ←, you should display the other account from where/ to where the money goes.

Improve this answer
4
  • Yohann, Thanks for the answer. Both approaches seem to have merits and I have seen them used in stock exchange boards. Your last point is also valid, though in my case its money moving in and out of the same account.
    – Okavango
    Apr 1, 2015 at 18:02
  • Is the money disappearing ? It is necessary moving from or to another account. Even if this second account is not yours or if you don't want to display the account name, you can display the wording of the money move. The choice between the three is a matter of taste, depending on how and where this quick visual reference is displayed. Maybe with more context we can help more?
    – Yohann V.
    Apr 2, 2015 at 6:14
  • Yohann, Labeling is the most important part of the design and its already in place, so agreed on that. On the other hand I wouldn't say that its a matter of taste; For example, arrows have more affordance than (+ -) which are symbols based on a convention of use. My third option falls into that category.
    – Okavango
    Apr 2, 2015 at 7:35
  • @Okavango I don't understand how arrows are less a convention of use than + and -. I'm not sure if discussing about it is necessary if you found a solution, if not I would be happy to help.
    – Yohann V.
    Apr 2, 2015 at 8:09
3

Design challenges here:

  • Designing for abstract concepts like accounts and flow is hard. Typically it's best to use words rather than graphics. But sometimes you have to (or are told to :-) use graphics.
  • Financial quantities can be difficult to represent graphically because different currencies have different symbols.
  • Arrows are very commonly used and overloaded in UX: they are used in information, warnings, interactive components, and plain text. Without visual cues to anchor the arrow (as others have pointed out), it's hard to tell whether the arrow represents a direction, a destination, or a source.
  • On top of all of this, financial amounts usually appear in tables, so it's often important to make the solution visually scannable.
  • I would avoid using the green/blue palette...it's more conventional to use red/green for money flows so it can be confusing to ask users to process the additional blue color.

Sketching a solution...

Assuming you want to use arrows, here are some sketches which use different forms of anchoring with arrows to communicate the concept of money flow:

enter image description here

The 'bank' icon has been used by Bank of America in its online bill pay interface.

Improve this answer
3
  • Tohster, thanks for the answer. Agreed! I do like your approach to the right! With financial sector so heavily invested in UX I genuinely thought someone would have done some research and/or established best practice on how to present this type of information. Are you aware of any?
    – Okavango
    Apr 2, 2015 at 7:26
  • @Okavango it's possible that someone's done this, but I don't have any experience with deigning for financial apps (beyond shopping carts) so unfortunately I don't know. I spend a lot of time with financial statements professionally but these are usually presented in standard tabular form (audit format) without icons or arrows, since they assume a level of professional financial literacy. Sorry I couldn't be of more help
    – tohster
    Apr 2, 2015 at 18:24
  • Hmm, I do like the icons very much, but what if I'm colorblind? Remove the color from the arrows and you're left with the same question: "What does the arrow mean?"
    – Stephan Bijzitter
    Dec 14, 2015 at 12:36
2

"Just because you can, doesn't mean you should......"

When I'm reviewing substantial amounts of data for criminal analysis purposes, single column data is a significant cause of confusion and delay and ultimately errors. It doesn't matter what iconongraphy is used or what colours are applied.

The most accurate method of avoiding confusion remains a two column (one in, one out) approach.

It is immediately visual and does not require further interpretation. Anything that makes the reader ask "what does this mean" distracts him detracts from his performance of the process he is actually trying to perform.

This is a clear example of "if it ain't broke, don't fix it and, especially don't f*** it up."

Don't allow trendy form to undermine function.

Improve this answer
1

I agree with the idea of '+' and '-' icons going before the numbers as something to consider.

With example 2 you're kind of on the right track. The common method in accountancy is to have incoming and outgoing funds in separate columns. However, you don't need an arrow to indicate things and unless you have quite an extravagant one like Matt Obee's (which is quite a good idea visually but can be avoided). Instead I'd focus purely on colour, '+' and '-' symbols, columns and headings.

So, one column heading as 'Income' and one as 'Outgoings' with all items below in the appropriate column. Then, if you want to add more visual hints stick a '+' in front of the Income items and '-' in front of the Outgoing items and if you want a little extra still then use green and red text respectively.

I've looked at this on multiple occasions in the past as I work at a cloud accountancy company and it seems to be the most user friendly and familiar option for people.

Improve this answer
1
  • and to clarify - it is okay to use arrows if used considerately but I'd recommend avoiding them when possible unless they are as descriptive as Matt's
    – Chris
    Apr 1, 2015 at 14:48
1

Showing money as moving in and out of an account is a decision fraught with potential confusion. You might want to do some research about different accounting methods and their history, for context. I found this help document informative.

I would say the GNUcash application is an example of terrible user experience for the vast majority of users, but it's worth thinking about the difference of perspective. From the novice user's perspective "I put my money in a box and sometimes it enters the box and sometimes it leaves" the box(account). From the bank's perspective they owe the customer a certain balance of money that they are currently using for investment purposes.

What I'm saying is, abstracting things like the flow of currency is something that you should not undertake lightly. Arrows seem like an oversimplification to me.

Improve this answer
1
  • Sirtimbly, I couldn't agree more! The use of arrows in this case was just to provide users with a visual indicator for at glance view of their account but there is sufficient information in place to convey the essential without necessarily using arrows. Thanks for sharing the document, very insightful.
    – Okavango
    Apr 1, 2015 at 17:50
1

My bank does not use icons of any kind, actually. It simply prepends a + or a - and colors the number green or red respectively.

They are all in one column, which is (by default) sorted by date (newest first).

As others have suggested, I would not use just an arrow, for its origin is not clear.

Improve this answer
1

I've been employed as a UI designer for various financial used for 10 years. I've (also) settled on use of + and - (green and red respectively). Where space allows, separate into 2 columns.

Agree with points made above that direction of arrows can be misinterpreted e.g. Left and right: left=back=out? or left=home=in? e.g. Up and down: contradictory where the total balance is a negative (or a 'positively represented negative' in the case credit card)

NB symbols in these colours must be bold for accessibility

Improve this answer
-2

A variant of Maverick's answer:

enter image description here

Improve this answer
1
  • 2
    But in this case, what do the arrows add? All they do right now is make it harder to read, because the text is in blocks that keep changing shape (left or right).
    – Stephan Bijzitter
    Apr 6, 2015 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.