Page MenuHomePhabricator

Settings Forms, EditEngine instructions are visually confusing
Open, Needs TriagePublic

Assigned To
None
Authored By
avivey
Jul 17 2017, 12:25 AM
Referenced Files
F5050462: image.png
Jul 17 2017, 9:10 PM
F5049241: image.png
Jul 17 2017, 12:25 AM
F5049249: image.png
Jul 17 2017, 12:25 AM
Subscribers

Description

The title for each field in a form shows up next to the field itself, but the instructions show up above them, pretty close to the previous field.
This makes my eyes think that these instructions go with the previous field, and then I'm confused because the context is wrong.

Here, highlighted a field and it's instructions:

image.png (636×710 px, 57 KB)

I think that putting the field title next to the instructions would help:

image.png (636×717 px, 56 KB)

(Update: I think this is only about Settings forms, which use appendRemarkupInstructions for field instructions)
Update2: the controlInstructions field from EditEngine's EditField is also rendered as RemarkupInstructions above the field, although caption field from Control does better visual work.

Event Timeline

avivey renamed this task from Forms instructions are visually confusing to Settings Forms instructions are visually confusing.Jul 22 2017, 12:56 AM
avivey updated the task description. (Show Details)
avivey renamed this task from Settings Forms instructions are visually confusing to Settings Forms, EditEngine instructions are visually confusing.Sep 4 2017, 9:09 PM
avivey updated the task description. (Show Details)

If that suggestion looks valid, I'd be happy to implement it (I'm thinking "Add RemarkupCaption into Control, render above actual field", and maybe "migrate Caption field to use that too").

I'd probably lean towards just increasing the padding under the text to make sure the field is clearly separate from the one below it.