1. On-hover state
On-hover, background of text is highlighted, tooltip appears and cursor changes to a hand to indicate that this is an editable area. User clicks.
|2. Edit state|
After user clicks on the text area, it changes to a text field with the original text highlighted. Cursor updates to a text cursor. User can start typing new text.
If user deletes the existing text, ghost text should be included to remind user what they are giving a name for (see figure 7 below).
|3. User has completed the edit|
After user has finished typing, clicking anywhere outside of the text field will initiate application to save changes.
|4. Application saving the edit|
While system is saving, show loading icon in text field.
|5. Confirmation that new data has been saved|
After system finishes saving, the text box disappears and text reverts back to its normal style/state. Check mark appears to assure users that new data is now saved.
|6. Error Message|
If there are restrictions on the text input (ex. numeric only, no space or special symbol allowed…etc), the standard Form Validation pattern (http://ui-patterns.vmware.com/2014/web-app/form-validation) applies.
|7. When a title is not required|
When a title is not required and user chooses not to enter text, then a placeholder text should appear to let user know what is supposed to be there.
|8. Edit mode of when there isn’t no data in field|
If there is no data in the text field, then ghost text should be included to remind user what they are giving a name for (ex. Add a fund name, Add a subscription service name, Add an account name…etc).