In https://www.mediawiki.org/wiki/Topic:Vp2o8we64u6zvbyf another user get's confused because they don't realize what they are looking at are editable text areas. This is not the first time I see users being confused about exactly the same. It appears like some users don't realize at all they can click anywhere and start editing. Instead they are confronted with UI elements and messages that don't make any sense, because they talk about an interaction that is (from the users perspective) not there.
Example screenshot:
Issues visible in the screenshot:
- Only a few boxes have a scrollbar, depending on the amount of text and the window size.
- Only a few box have a resize handle in the lower right corner.
- Some boxes are gray, but this does not mean the can not be edited.
- Some boxes are dimmed. But this is hard to see, and it's not obvious what the difference is between being dimmed and being gray.
- Especially note how the left and right side appear almost identical, even if only 1 of the two can be edited.
- There is currently zero (!) difference between an editable box that does have the focus, and one that doesn't. The only visible difference is the text cursor – which is tiny.
I remember us trying to improve this already as part of T251494: Confusing scrollbar & resize handle placement in no-JS mode (patch https://gerrit.wikimedia.org/r/c/mediawiki/extensions/TwoColConflict/+/592633).
More ideas:
- Try to give all textareas an outline or box-shadow. For example, here in Phabricator all input fields do have a thin gray border and a blue shadow when focussed.
- Play around with a focus effect, e.g. the focussed textarea gets a much stronger outline (instead of the light yellow/blue).
- Play around with some light gray background colors.
- Make it so that the scrollbar is always visible.
- Try to re-position the scrollbar so it always touches the yellow/blue box, and the box appears more like it is the edge of an editable field.
- Make it so that the x button is not visible, unless there is actually an edit to undo.
- Check if and when we start in edit-mode, without the user clicking a pen button.
- Make sure the design of a box in edit mode is clearly different from a non-editable box (i.e. don't rely on the text cursor, which might not even be there when the box doesn't have the focus).
- …
My personal preference:
- Always show the scrollbar when a box is editable.
- Let the scrollbar touch the box at the top and bottom (i.e. remove the small gap – note we already do this in no-JS mode).
- Add some focus effect, e.g. the yellow/blue border becomes black.