I considered a skeuomorph using yellow paper with lines but it seemed tacky and didn't fit the overall design of the page. The textarea fills an entire "panel" on the page just like other panels of read-only text, so it can't be set off like it normally would be in a traditional HTML form.
2
-
1How about hint text like FB's "What's on your mind?", but rendered in some great handwriting-type font?– SNagCommented Aug 27, 2013 at 18:32
-
A placeholder like that would work nicely, in fact I'm already using one when the text area is empty. But often times the area will be pre-populated with text, so a placeholder isn't practical when that happens.– hartz89Commented Aug 27, 2013 at 18:55
Add a comment
|
2 Answers
You could put a distinct border on the field, or on the panel that contains the field (use both border width and colour) then place a key somewhere that shows both the editable and uneditable field stylings. Along with this you could tag it as editable, maybe in the label for the field.
Remember that styles associated with uneditable, such as greying things out, also imply that a feature might be editable under certain conditions, so you may have 'editable', 'uneditable' and 'never editable' as states.
Also, if you strictly follow a style guide for 'editable' across your entire app (active, inactive, focused etc.) you will give a user a consistent set of implicit guidelines for what is editable and what isn't. The login / register form for example can follow this style guide.
Both the above ideas will provide consistent visual clues.
A step further, especially in the case of having many editable and uneditable panels on the same page would be to number the fields that can be edited.
You should also consider tab order for the fields and auto-focusing on relevant fields
answered Aug 27, 2013 at 19:16
In addition to what @ColinSharp mentioned above, you could at an icon to the corner of the field, maybe a pencil, to help indicate that the area is editable.
