2

Any best practices for positioning the Add Contact button (1) in this screen?

Left or Right?

add button

1
  • I think of right as setting and termination - e.g. a browser.
    – paparazzo
    Nov 28, 2014 at 18:55

2 Answers 2

3

The emerging conventional location for buttons like this is the top right (where your search box is) but that assumes that the action isn't a primary one.

I've suggested in this answer to a similar questions about list view switching, that this is likely due to the top right being a secondary focus area (or tertiary, depending on which scanning model you subscribe to. See the example of the Gutenberg Diagram below).

So if adding a contact isn't the main reason users are seeing this screen, then the conventional practice is to put it in top right.

If adding contacts is what this UI is for, it's reasonable to leave it where it is.

enter image description here

4
  • Perfect. Go Gutenberg!
    – Samuel M
    Nov 28, 2014 at 18:13
  • Do you mean follow?
    – paparazzo
    Nov 28, 2014 at 18:58
  • As in "weak fallow" vs "weak follow"? Well, first off, it's not my diagram. Fallow is the way I learned it, and from what I can quickly research, it's the technically correct term for this. Fallow is term that describes farmland that has been purposely left uncultivated. It doesn't take too much of a leap to see how this could be applied to the concept of layout design. When looking for a diagram to use here, I noticed several used the word "Follow" instead. I imagine this started with someone not recognizing 'fallow' and making the assumption that it was incorrect.
    – dennislees
    Nov 28, 2014 at 21:10
  • @dennislees Long time since your answer, but I believe it is still very relevant. The main difference between then and now being that in 2014 most mobile devices were still operable by one hand. Now most devices need two hands at least sometimes. So should the "most important button" still be in Area 1 - the primary optical area which is also the most difficult to reach with the thumb of the hand holding the phone, or should it instead be in Areas 3 or 4 - which are easy to reach with the thumb. What do you think?
    – dakini
    May 9, 2021 at 19:06
0

I would put it just right of the "Total" indicator (or perhaps just right of the "Back" and "Next" links that will appear there).

Same height and rounded corners as Search box, dark background color complementary to the table header. On narrow screens, search box could appear below the row with Total info and the Add button, but no reason to waste precious vertical space if the primary purpose is to display data..

Also a plain "plus in a circle" icon might be preferable to the current one "plus in a circle on a document, so small that it's hardly visible".

And as always, don't forget to test with volunteers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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