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 am implementing a web interface to a database (inventory of items, each item with about 7 parameters).

I wish to have a simple an efficient way for users to search the database, and update it. Ideally I would like to have only one page to do everything (no link to second form etc).

Does anybody know of an interface that lets users search AND edit on the SAME page?

share|improve this question
add comment

3 Answers

up vote 6 down vote accepted

A common web interface for this task is to have the items in a list, with the posibility to search and sort the list. The rightmost (last) column has an edit button, when clicked makes the row editable and switches the edit button to two new buttons - "save" and "cancel".

After the row has been updated, make sure to give the user feedback if the the save operation was successful or not.

enter image description here

share|improve this answer
    
Two thoughts: 1) You might want to get rid of the edit button - just make things editable to start with. 2) An undo functionality might be useful in case the user edits the wrong row. –  edeverett Feb 22 '11 at 13:20
    
I agree with the undo functionality, but to have everything editable from start or not is not something that works the same way for every situation. If you edit one row at a time you have more control over what's being edited, e.g. what if you accidentally enter a letter in a box somewhere that wasn't supposed to be edited. You can end up in a state where you have no control of what was being edited... –  Henrik Ekblom Feb 22 '11 at 13:26
    
Thanks a lot for the snapshots. This is exactly what I aiming for. Only part I still need is for the user to add a complete new line. I wonder if that new line should appear at the bottom, or top. If at the bottom users might have to scroll pages down to see it. If it's at the top, is it confusing? Would you have any experience or thoughts on this? –  tucson Feb 22 '11 at 15:22
    
As you stated, put it at the top of the page since you don't want the user to have to scroll to the bottom every time. Just add a "+" button and you should be fine. You can have the new unedited row on top of the "current item" list, to show the user that "this row is not yet among the other items". When you press save, it's inserted... –  Henrik Ekblom Feb 22 '11 at 15:38
add comment

Take a look at Google Docs / Tables

Simply it is like MS Excel. I would try to implement sg similar to MS Excel, because your useres are generally used to Excel's UI!

share|improve this answer
add comment

Here´s my advice based on analysis for the product I have been working on lately:

  • Edit full grid at once or only one row at a time: this choice depends on whether the rows are related or not and whether you want the user to bulk edit. For our ERP system we chose to edit one a time to avoid conflicts but also users by accident editing values.

  • Placement Edit controls: first, I would go for a icon/button, which does not need translation. Second, I would place it to the left of the row, in a fixed position. This makes it easier to relate the button to the row (in your proposal there is a wide gap) and this reduces mouse miles (also see Fitt´s Law) as most users follow F-pattern navigation.

  • Add to top or to end of the grid: both can be defended. I am in favour of adding to top and inserting based on selection, for the following reasons: Context - Users often need the context of other rows to help enter new ones for example to reuse order line information such as customer, product nrs, etc. Jerks- When adding to bottom this causes sudden movements taking you somewhere you did not want to go Ergonomics - bottom of screen adding is not as comfortable as mid or top of screen Referenced products: Powerpoint (new slide is inserted now, in the past it was added to the bottom), Windows 7 (new folders are added to top, duplicated files are added just below the original), Quickbooks, new rows are added below the currently selected one

Looking at your screenshot it looks like your rows cannot be selected. If they can, then it is recommendable to add a row close to the selected row. This makes it easier to reuse already existing row information.

You can try our (pre-alpha) product in action here: http://demo.openbravo.com -- open a sales order grid for example and play with the grid if you like. Good luck, Rob

share|improve this answer
add comment

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.