Please consider the admin screen below: enter image description here

One of the tasks on this screen is to import a file. However, the import button is located on the toolbar rather than next to the form. Would it be clearer to locate the import button next to the file form field?

Would the interface be improved by moving the 'Import invoices' button out of the toolbar and into the main content area?


I've reorganised the layout as below. The toolbar has moved down into the content area which helps. Also, the file selector is now displayed in a modal overlay, also show below.

Revised layout

modal overlay for file selector

  • Is there any reason why you would think it wouldn't improve the interface?
    – you786
    Jul 11, 2014 at 5:12

1 Answer 1


Yes, it does matter.

Controls which belong together should be grouped together, but this layout really makes me look around for the import button.

You could...

  • Move the toolbar button down so it is right beside the file selector.
  • Move the screen with the file selector to some kind of dialog window that only appears after you click the toolbar import button.
  • Funnily enough I did have the file selector in a modal in a previous iteration! I'm un-happpy with the screen overall though. I don't like the way the toolbar sits on top of the left menu, it seems like the toolbar, menu and content area 'collide' together...
    – Adam Rifat
    Jul 11, 2014 at 9:28
  • I think the problem with the toolbar is that it doesn't look like it "belongs" to anything. It starts above the vertical menu on the right, but it relates to content on the left of this. You could try this technique; make a print out of the screen, cut out all the buttons and menu items, group related items together, and then move the groups around till you are happy with the layout (saves on coding effort). The grouping stuff together thing is known as Gestalt (en.wikipedia.org/wiki/Principles_of_grouping).
    – Franchesca
    Jul 11, 2014 at 9:53
  • Thanks. I've updated the question with some screenshots of the revised layout. I've also added a second level menu off the main menu so I could drop the left hand menu altogether if
    – Adam Rifat
    Jul 11, 2014 at 12:54
  • @AdamRifat It flows much better with those changes :)
    – Franchesca
    Jul 11, 2014 at 13:03
  • Indeed! Who would've thought it would be so hard to get such a simple screen right! Thanks for your comments.
    – Adam Rifat
    Jul 11, 2014 at 13:06

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.