Implementing an insert-update-delete grid in a web application
I'm in the process of rewriting an old desktop application that's used for warehouse management and retail. The warehouse window is meant for importing, returning and modifying imported items. So it's always an invoice window which is composed of two parts:
- The header - import date, supplier and the invoice number
- The body - which is a list of imported items, just like excel.
A similar thing is true for the retail invoice. The customers of this application have been using it for more than 10 years. And they're used to creating an invoice and adding items to it without using the mouse. The list of items is a grid, with 7 columns, like item name, amount, discount, etc. When they're on the first column, by hitting enter they bring up a dialog where they can pick an item and by hitting enter again have the selected value put in that column. And they can navigate to the next/previous column with the left or right arrow or tab keys. By pressing up/down arrow keys they can save the changes to the currently inserted or edited record. Some actions like deleting the invoice or inserting a new one are bound to certain F keys. So as long as the speed is concerned it's all good. But is this really a good practice? Do you think I should repeat the same in the web version too? To me, it just doesn't feel right. I can't say why though. Maybe you have a better idea. I tried to find a different approach that would adhere to modern UX paradigms to no avail.