Page MenuHomePhabricator

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

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:

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

(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 created this task.Jul 17 2017, 12:25 AM
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)
avivey added a comment.Sep 4 2017, 9:13 PM

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").

chad added a comment.Sep 4 2017, 10:14 PM

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.