4

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?

Improve this question

3 Answers 3

Reset to default
7

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

Improve this answer
4
  • 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, 2011 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, 2011 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?
    – Timothée HENRY
    Feb 22, 2011 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, 2011 at 15:38
1

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!

Improve this answer
0

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

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.