UI with two columns

Feedback & Problem Solving
, , ,
#1

hi all

we are working on some user inputs regarding this page:
Option 1: https://invis.io/ZREXFAU3A#/268980533_00-04-01-Wealthadvisory-Wealth-Cashflow-V2
Option 2: https://invis.io/2EEXLJLM4#/269029905_00-04-01-Wealthadvisory-Wealth-Cashflow-V3 (here we will provide the sticky header for both sections where we display the CTAs)

One of them was related to the two call to actions (add wealth and add cash flow) at the end of the two columns.
Often the number of containers can be various, for instance, you can have 12 containers on the left and one on the right and vice-versa. This has on the usability because when the user lands on a view with this scenario one of the two CTAs is below the fold (not visible within the scrollable area)
We didn’t find a fix to this issue within the UI so we thought to enhance the information related to the number of containers. This should help the user to understand that the CTA is not visible due to the number of items listed and this should help her/him to understand that she/he has to scroll to find the CTA.

PS the bottom toolbar is fixed to the bottom of the screen so we can not make the two CTAs sticky to the bottom

Thanks you all in advance for the replies :slight_smile:

#2

Hey @dopamino – what’s your question here? I’m confused. :laughing:

#3

hey @HAWK
you’re right, my post is missing the point: slight_smile:

the page layout is based on two columns.
The first design displayed, at the end of those columns, two CTAs.
We tested this view with mock data and the size of the columns. in terms of height, was consistent so the two CTAs we more or less aligned.
In production, with the real data, the situation is different. We noticed the size of the columns is extremely inconsistent (most of the case the left column is the double in terms of height of the right one).
Very often when the user lands on this page, she/he is not able to see the CTA of the left column because of the scroll.
We were looking for a UI fix how to keep the CTAs aligned no matter the size of the columns.

We designed two options:
*option 1 - we heavily rely on the counter at the top of the column to help users to understand that there’s more content below the fold

  • option 2 - we placed the CTAs at the top of the section to allow users, at the first glance, to react on the buttons

my questions are:

  • which one is the most user-friendly option?
  • do u already experienced this kind of problem (two columns layout)?

I hope it’s easier to understand now…

2 Likes
#4

Purely from a gut reaction, I would opt for the version with the buttons are the top of the columns. It seems more balanced with the big blobs of blue being in the same horizontal plane. Plus it seems encouraging like “hey you can add more money if you have more” rather than presenting the option to delete them so easily. (I’m guessing you don’t want users to delete very often, so perhaps for their sake, it should be a little more complex to do so.)

I feel like I have seen this type of choice play out in other financial apps I have used but I cannot offer a real reference for you at the moment.

Hope that helps!

1 Like
#5

@melissa_easker
thanks for your “gut” feedback

that’s a good point!
I forgot to write that this app is designed as “face2face” application. It will be used by advisors within the bank branch before and during the meeting with the customer.
The “delete all” is needed because in some use-cases the client doesn’t want to invest money/assets that are already in the hand of the bank. That’s why we have two columns, the left one is for the assets coming from the bank the right one is for the assets coming from other sources.

Anyway, we choose the option 1 and we are planning an A/B test within the first release of the app (at the moment is published for friends and family).

Thanks again :wink:

1 Like