Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I was always confused position CRUD* buttons on my application. I see some applications, there are CRUD bottons on the right side, top or bottom. In your opinion, where is the suitable place for the CRUD buttons.

enter image description here

*CRUD stands for "Create, read, update and delete"

share|improve this question
    
Are you sure you want that Delete button right next to the Edit button? Accidental clicks might happen or cause users to click really carefully and not enjoy the UI. –  Barfieldmv Sep 5 '11 at 11:39

8 Answers 8

up vote 13 down vote accepted

Contrary to what most answers are saying, I would put the buttons either at the bottom or to the right.

The data is most important and should take precendence over the buttons. The natural flow for somebody would be to select the data (s)he wants to act on and then select the action (s)he wants to perform. Taking the reading direction into account that puts the buttons at the right or at the bottom. And yes, that would mean that for right-to-left languages the position of the buttons w/should shift to the opposite side.

At the right if the columns are limited and the rows are plentiful, at the bottom if columns are plentiful and the number of rows in view is less important. However, don't do this on a per form basis. Look at what most forms in your app will need and stick with that, because having a consistent place for the buttons is far more important than a per form optimisation of screen real estate.

share|improve this answer
4  
+1, but I would favour the bottom. the buttons are wider than they are tall. If the user misses vertically on buttons that are arranged horizontally then nothing happens, (unless you have a very crowded form). –  pipTheGeek Sep 5 '11 at 12:09
    
I believe that this is not true always. Many entreprise class applications like SAP products have them on TOP. –  Parhs Sep 15 '11 at 20:10
    
@Parhs: Products doing one thing or another in and of itself is not an argument for or against. And the SAP products aren't exactly shining examples of usability... –  Marjan Venema Sep 16 '11 at 7:20
    
but most ERP/CRM have them on TOP. I just believe that sometimes right or bottom position isnt suitable. –  Parhs Sep 16 '11 at 13:09
    
@parhs: Sometimes indeed no. But not because many ERP/CRM systems happen to have them on top. Many ERP/CRM systems have evolved from mainframe terminal systems where split screen functionality dictated the menu's to be on top. When they moved to mini and later client/server, the buttons of a new UI system simply followed an already established pattern. Now, if the argument was that ERP/CRM system have them on top because extensive UX reseach told them that was the best place, I'd be more inclined to listen... –  Marjan Venema Sep 16 '11 at 13:18

+1 for following an established convention, if there exists one.

HOWEVER, if not, then ask yourself why do you need the buttons at all. Can this not be done directly on the grid, like MS Access used to do? I.e.:

Creation: Leave an empty line either at the beginning or at the end of the grid -- or maybe a row of textboxes outside the grid. User types in there, row gets automatically created/saved.

Replace/Update: click on the cell in the grid, text gets selected automatically, typing replaces it (remember to offer an UNDO).

Delete: Either a separate button (if multiple rows may be deleted), or pop it up at the side of the row when focus is on that row. Again, offer an UNDO.

share|improve this answer
    
+1 if the data is a grid, just let user manipulate them directly as a grid. –  Lie Ryan Sep 10 '11 at 2:40

It does vary according to the application. However in a grid-type application like you are showing here, I think the end of the page is the best place, and possibly the left rather than the right.

The reason this makes sense to me is that the data is the most important piece of this, and it is important to see all of the data, before knowning whether to add or delete, and there is aneed ot have selected one from the list before updating.

If the data is displayed one page at once, it makes sense to have the update and delete at the top, IMO, because you have to select a record first. The create would also work well there.

I don't like them at the sides. Buttons at hte sides, I always feel, should be acting on the whole control displayed, not just individual records.

This is just my penn'oth.

share|improve this answer

Top and left-side are best for CRUD imho. Which of the two is best depends on your specific application.

If you have a lot of columns (which you seem to, from this screenshot), then it's best to fully use the horizontal screen space by placing the CRUD on the top.

share|improve this answer

It depends what the user will do: review the existing content then decide what to do, or go into the form with a pre-decided goal to complete.

Whichever comes first should typically come above or to the left of the other, to mimic left-to-right, top-to-bottom reading patterns with a left-to-right, top-to-bottom 'workflow'.

Oh, and it should go without saying, but if there's already a convention established in your application, just go for that. Consistency across the whole application is far more important than local usability.

share|improve this answer
1  
+1 for consistency advice –  Wivani Sep 6 '11 at 10:52

Alternatively, you can implement hover actions (Hover-Reveal Tools), cf. Designing Web Interfaces:

http://www.flickr.com/photos/designingwebinterfaces/3120613871/

This will:

  1. Pro: Make your interface less cluttered
  2. Pro: Support noun-verb interaction (with selection based on hover, not explicit click)
  3. Con: Provide less affordances at first glance
  4. Con: Be more web-like than app-like.
  5. Con (update): Not work with interaction techniques lacking hover events, e.g., touch interfaces
share|improve this answer

It depends on what the data is.

If someone needs to see the data (in most use cases) before they know what action they want to perform, I would put them below the data

If they would go to the page knowing what they want to do and choose the action before the data.

As Schrodingers Cat mentioned already, on either side just seems wrong to me (personal preference).

A caveat to all this is scrolling. There may be reasons to put them above the data if you are going to scroll the content and not be able to see the bottom of the screen. Of course a taskbar is an option here, but only if you really have to.

share|improve this answer

After reading all the other answers, it looks like 'take your pick' (as long as your pick is consistent with the rest of the application). Having said that, I'm with Marjan for putting the buttons at the right or bottom.

At the right: make sure there is enough vertical white space to prevent accidental hits.

At the bottom: only when the grid is fixed height and it fits the window as your example shows. If it's under the fold, I'd rather not have that.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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