6

We're adding a global "Add new X" button to our application (it will show a CRUD form for an activity, the fundamental "thing" in our app). We want it to be clickable from anywhere in the application and easily discoverable for first-time users.

Where should we put it? Our web app has a persistant top bar with our logo and a left-aligned sidebar that contains our high-level navigation.

Some options:

  1. On the top bar, to the right of the logo
  2. On the top bar, on the far right
  3. In the sidebar, above the main nav
  4. In the sidebar, below the main nav
  5. In the sidebar, at the very bottom
  6. Other suggestions?

I've seen each of these options in various places around the web (the app Flow uses #1 for "Add task", Gmail uses #3 for "Compose email", etc...).

Which placement is best? Are there examples of applications that do this particularly well?

mockup

Improve this question
4
  • Just to confirm, is there only one type of thing (activities) that can be added? Do those activities always appear together in a single list somewhere, or are there different views and contexts in which they might appear?
    – Matt Obee
    Jan 11, 2013 at 18:34
  • There are multiple kinds of activities (around 7 kinds). Once created, they do appear in multiple contexts (activity-type-specific printable reports, on an interactive calendar, in summaries elsewhere in the app, etc).
    – Sam Pierce Lolla
    Jan 11, 2013 at 18:42
  • Is there a relationship between the Add Item button and the items in the main nav i.e. are Foo, Bar, Baz etc top level nav for types of items?
    – tblessander
    Jan 11, 2013 at 19:44
  • @tblessander, yes, many screens on the app are related to the activities we allow users to track. Top-level nav items include a calendar that shows when activities occurred and analytics pages that aggregate data about these activities on multiple levels. There are other pages that are essentially unrelated to the activities we track, like a "News" page and a "Planning" tool. Does that help?
    – Sam Pierce Lolla
    Jan 11, 2013 at 19:52

2 Answers 2

Reset to default
6

I would say it belongs in position 2. It is a very prominent spot on the screen, while leaving the top left for branding.

A lot of well designed sites do just that.

StackExchange's "Ask Question" button: enter image description here

Twitter's Tweet button (the quill pen button on the right) enter image description here

Google sites which include the Google+ share button: enter image description here

...and many more

Improve this answer
2
  • 1) I think StackExchange would be better off with having the Ask Question closer to the left side. They get away with having it on the right since its very prominent but on wider screens it still almost disappears out of view. 2) The blue button in twitter is not nearly as prominent as it should be however they do this to be consistent with their mobile app and they also back it up with having a 'compose new tweet' field on the left on the start page. 3) I dont see the main 'add item' button on the right in google however they do have a very prominent red compose/create button the left.
    – tblessander
    Jan 15, 2013 at 12:58
  • 1) Ask question at position 1 would create a visual group with the logo, which feels really awkward to me. The Ask question background makes the button stand out well, so you notice it pretty fast (same for twitter). And if people use the mobile pages, they expect an important button on the right also on desktop computers I guess. It should really be be consistent across devices.
    – CodeManX
    Mar 23, 2014 at 3:12
1

I would put it in spot #3. Having the button close to the top left corner puts it in a position where users will most likely see it without having to go look for it as people read from left to right (assuming your target audience is not right to left readers e.g. arabic). It will also put the button close to the main navigation. This would divide the page into three distinct sections; top for branding, left for navigation and creating new content and right for consuming content.

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.