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

Left or Right?

add button

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

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

|improve this answer|||||
  • Perfect. Go Gutenberg! – Samuel M Nov 28 '14 at 18:13
  • Do you mean follow? – paparazzo Nov 28 '14 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 '14 at 21:10

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.

|improve this answer|||||

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.