I have a page with a number of different lists on it. Each list has the option to add a new entry. Would it be better to have the actions in a separate 'action area' or position them close to the list they are associated with?


download bmml source – Wireframes created with Balsamiq Mockups

Both have their benefits in my eyes - if the actions are positioned close to their associated list, it would be more obvious which list they belong to. However, if they are in their own area then I could potentially make it stick to the top of the page at all times. That would make them accessible at all times, even if the lists gets very long.

3 Answers 3


I think you're on the right track here. You could, however, make a combination of both solutions combining both strengths. Place the new entry button at the top of each list, next to the title. This way the button doesn't need a label (like Actions), the position makes sense and if you'd like you can keep both the title and the button fixed of the top of the browser-window.

Concerning grouping buttons: I would advice you to group buttons that affect the same thing (the same list in this case). For example. I would group the edit, add and delete functionality of the same list, not the add-functionality of different lists.

I'm not sure the F-pattern, as DarrylGodden proposes, is appropriate to use in this case because originally that was about text: what users do and what users don't scan/read. The F-shaped pattern research can be found here: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/


I think that the buttons should not be separated from their context: it would make the interface less consistent and the users will have to reinterpret the actions area making the page more complex. It really depends on how familiar your typical user will be with your platform, how repetitive the tasks are and how the workflow is organized.

You should consider putting each section's button aligned to the right side of the title: this will keep them in context, they'll be visible immediately even if the list gets longer because always at the top.

If you have enough traffic you could implement them both and see which one works better by doing an A/B test. Even sketching the two versions on paper and asking people to perform tasks on them will immediately yield insights.


The F reading pattern would dictate that any "Add New" button would benefit from being at the top left of the appropriate box.

  • I don't fully agree with you. This is only true for buttons that don't need any explanation or introduction (like the logo links to the homepage by convention). Besides, not every button is equally important, so just placing them at to top left is a bit over simplistic.
    – Ruudt
    Aug 4, 2014 at 11:47
  • I think "Add New" is the most important action per category. Aug 4, 2014 at 12:44
  • That's the thing. The F-shape pattern applies to the whole page, not just a part of it, like a category or list. So the solution would only work if the lists are on top of the page and if there are no more important buttons in the top chrome of the application (which seems a dangerous assumption to me).
    – Ruudt
    Aug 4, 2014 at 12:48
  • Looking at the mocks, it looks like the categories fill the majority of the page, so I didn't think it was unrealistic to apply the F reading pattern. Of course the only way to thrash this out would be with some user testing, but my initial opinion without testing would be that they sit naturally in the category, clearly other people disagree. Aug 4, 2014 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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