Table Edit 17
Considerations Presentation is the primary consideration when displaying a table of data. Editing is secondary. As a result, the editing scaffolding is hidden and only revealed when it’s clear the user wants to edit a cell.
Activation A single mouse click is required to start editing a cell instead of a mouse hover. This is consistent with keeping the display of the grid uncluttered. Imagine how irritating it would be if every mouse motion revealed an edit box. Tip You should generally avoid double-click in web applications. However, when web applications look and behave like desktop applications, double-click can be appropriate.
Rendering versus editing. Google Spreadsheet displays the edit box slightly larger than the cell. This clearly indicates editability and lets the user know that input is not limited to the size of the cell (the edit box actually dynamically resizes as the user types into it). The only issue to consider is that the larger edit area covers other table cells. However, this works well in this case since editing is explicitly triggered by a mouse click. If activation had occurred on a mouse hover, the edit mode would have interfered with cell-to-cell navigation.
Best Practices for Table Edit Here are some best practices for Table Edit: • Bias the display toward readability of the table data. • Avoid mouse hover for activating cell editing. It makes for the feeling of “mouse traps” and makes the interaction noisy. • Activate edit with a single click. While using a double-click may not be totally unexpected (since it looks like an Excel spreadsheet), a single click is easier to perform. • Consider allowing extra space during editing either through a drop-down editor or by slightly enlarging the edit cell. • As much as possible, mimic the normal conventions of cell navigation that users will already be familiar with (e.g., in Microsoft Excel).