I am building a web application that deals with a lot of tables/lists of records. I am currently building an "AJAX edit-in-place" feature, so that you can edit a record while being on the same page. You will click the edit button/link and the table row will slide a form down so you can edit the record.
My question is, what is the best way to display these actions that you can take? I've seen this done different ways in different applications: edit/delete links, buttons, buttons that appear only when you hover over the row, a "drop-down arrow" that when you hover over it, a "tool tip" appears with the actions as a list of links.
What is the best way to display these. Please provide links to articles/studies that support your answer (if possible).
Answer
The last thing you want when you have a lot of tables/lists of records is to make the data less readable by having more noise and clutter from permanent buttons, links or drop down arrows, so I favour the hover approach in this instance.
Change the cursor on hover, to aid visual feedback. Align edited text with cell content where relevant so that it doesn't appear to jump. Ensure to provide a mechanism to cancel without change.
Highlighting changed items and allowing revert are nice additions.
Here is a good resource at Pattenry.com - with some links for lots of jQuery plugins.
I think 37 Signals have done a nice job with edit-in-place to-do list items on BaseCampHQ (See their to do lists tutorial) as seen in the image below - sorry I had to blur out the actual content...
No comments:
Post a Comment