1

I'm designing a banking application based on material design guidelines and when creating a transition request, the user can add multiple rows to the transition form in order to transfer different money amounts to different accounts in one transition, in the transition form, each row consists of two main fields (the destination account number and the amount of the money to be transferred to destination).

Where is the best place to place the "Add row" button? (knowing each row is an expandable card containing at least two fields)

My suggestions are :

  1. At the end of the last row's card with a flat button and an appropriate icon beside it saying add row (which I think is not the best option because adding another row is not the action related to this card).

  2. Add a large "Add row" button to the bottom of the page, which adds a new row and scrolls to it when clicked on (similar to add to cart buttons in e commerce applications in shape and size).

  3. Add a standard icon for "Add row" from material icons to the header of this page (which I think may be a little hard to see/find for the user).

  4. Add a floating action button with a plus icon to the page, which adds a row to the form if clicked on (there's a problem with this idea too, as there's another place in the app where we use the same pattern to create the forms themselves).

Any other suggestions will be greatly appreciated.

Improve this question
3
  • I'd struggle for single account per transfer, this makes interaction much simpler. Otherwise you need edit, delete, total amount, etc. functionality along with adding transfer. Refer to the KISS principle! And don't use the label "Add row". Use "Add payment" or such instead.
    – Alexey Kolchenko
    Jul 30, 2017 at 10:31
  • @AlexeyKolchenko Thanks for the comment but this application is specialized for offices and companies which may want to transfer several money transfers at the same time (like paying the salary at the end of the month)...
    – Sarah Akhavan
    Jul 30, 2017 at 11:21
  • I got it. If the adding payment is the primary action of that screen, use floating action button. FAB isn't limited to the single action across all the app, its context is the screen. Using FAB is consistent, as you use the same pattern on the other screen.
    – Alexey Kolchenko
    Jul 30, 2017 at 14:11

2 Answers 2

Reset to default
2

FAB is a suggested option for this scenario as FAB does not have a single specified function, its context is related to the current screen or Activity. Another option can be an indicative text like one in the image saying "Add New+".

enter image description here

Here the text content can be altered giving user an additional information of what exactly can be added.

Improve this answer
4
  • Thanks for your response but I've mentioned these two suggestions in my question but there's a problem with each. For example the fab is a great idea, it's visible even on scroll and maintains a good UX but I have a fab in another page (as I said, it's actually the previous page, where by clicking that fab, this form is created), so changing the functionality of the fab in the following page may cause confusion (it may not, it should be tested), so I'm searching for a better answer if there's any...
    – Sarah Akhavan
    Jul 31, 2017 at 6:58
  • @Jack-in-the-box Perhaps see this question. If in the previous screen the FAB means "add transaction" (which is what I assume you mean by "transition"), and in this screen it means "add destination", then that should be OK providing the rest of the screen makes it obvious you're adding different things.
    – TripeHound
    Jul 31, 2017 at 9:56
  • @TripeHound That question is also asked by me :D Thanks for your response.
    – Sarah Akhavan
    Jul 31, 2017 at 10:41
  • 1
    @Jack-in-the-box Apologies. My first thought when I saw your comment here was the other question might be yours (having read it a few minutes before) -- so I "checked" but must have looked at the wrong thing :-)
    – TripeHound
    Jul 31, 2017 at 10:51
0

Add a card below last card that is the height of a collapsed card with someting like + Add transaction - when user taps on that, it expands to show the two fields under the user's finger and a new collapsed card appears below that.

Improve this answer

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.