Inline Edit Design Questions
General Behavior
What is the signal that something can be edited inline?
Highlight appears to be the emerging convention, where the container of the text is highlighted. Sometimes the text is a link to the inline edit interface. If the text to be edited is a link to other (non-inline-edit) interface, another means (e.g. a clickable icon) is necessary.
Cursor change is also important, and needs to be consistent. The I-bar appears to be the emerging convention for plain text.
Default prompt text may be useful, see below.
Display hover text after x seconds?
The hover message is a standard help convention that really has no drawback in this context as long as the delay for hover text to appear is timed right; that it does not show up so fast that the user gets a jolting experience of popping help text, but not so slow that the user never sees the help text. 2 seconds appears to be the right timing.
How is focus indicated?
A dotted line around the field.
Where is the edit cursor placed?
When the user clicks into an in-line edit field with text in it, should the text be highlighted so when the user types the old value is over-written, or should the cursor be placed at the end of the current value? Could we make this a configurable option and give advice on when to use each option in the design pattern.
Enforce a character limit?
Every input has a character limit that is enforced (no such thing as unlimited text); it is more of a question of having a reasonable limit that users don't often run into and displaying information about the limit so the user is aware and informed.
Show the character limit/character total?
Use default/prompt text when there is no user-entered text?
- How else (other than highlight on rollover) can we should that a field is editable if it is empty (see current treatment in Dropdown Inline Edit Storyboard)? Should this be configurable with advice given in a design pattern as to when to use this convention?
- There may be situations where it would be overwhelming to have too many "Click to edit" notations in empty fields on a page.
- Some ideas for representing this:
- Text in the empty field which is grayed out and/or smaller and/or of a different font
- It could say "--", or "unassigned" or "Click to edit"
- "Click to edit" text can be invisible until rollover
- Allison to create mock-ups with some of these different options
What happens when multiple lines are pasted?
Can html/code/scripts be submitted?
Is there validation of the entry?
Use explicit save/cancel?
What are the right keyboard only/screen reader keys for inline edit?
Should we allow the use of 'Esc' to cancel an in-progress inline edit, or would that conflict with screen readers (see Jonathan's 7/18 email on this subject)?
Does clicking outside the inline edit interface save or cancel?
Provide affordance for indicating successful edit?
After the edit is completed, there should be indicator such as saturated background color which fades back to normal.
Always display undo? How long does undo last?
Undo could persist only until the user leaves the page, or for the user's entire session in the application. There may be contexts where each option makes sense.
Advanced Behavior
- In the Announcements edit of Hidden Content Inline Edit Storyboard, if user chooses "edit details" is that handled by the integrating application or should it be part of the component? It should for sure be in the design pattern for in-line editing.
- Should we support the editing of structured text (e.g. links), where there is additional metadata attached to the text that is displayed? Would an overlay be the best way to allow editing of this type of text? How might this work if the text being edited is already in an overlay? (e.g. Announcements example on this page: Hidden Content Inline Edit Storyboard
- In the Worksite Information window in Rich Text Inline Edit Storyboard - Edit rich text- Edit link is likely outside the component. What does that mean for hover text? I assume that it's also outside the scope, but should be part of the design pattern.
- Is the Wysiwyg editor in Rich Text Inline Edit Storyboard - Edit rich text outside the component?
- When there is an explicit save is there a need for the "undo edit"?