Highlight empty form fields to encourage user data entry

[jesicarson]

@dethe looking into bootstrap options for this

Red text/ box outlines suggests "required" so not ideal

Possibly icons?

[scottofletcher]

Hi @andreadelrio, Jesi told me you're working on different ways for users to see what sections/data fields are missing content and/or need editing. As the lead editor, I'm very keen to have these tools operational as it would make my life easier :P I went through Wikipedia looking for the different text boxes and icons they use and here's what I've found so far:

[andreadelrio]

@scottofletcher thanks Scott! I'll keep those in mind.

[jesicarson]

@andreadelrio can you post your mockups here for design review please. Thx!

[andreadelrio]

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6

[scottofletcher]

I like 1, 5, or 6. I didn't even see the prompt in option 3. I think the red is a nice touch, especially the little pen icon in option 6 (subtle but noticeable)

[andreadelrio]

Amber's feedback: Option # 6

[jesicarson]

Andrea's Sketch Files: https://drive.google.com/open?id=1YcTLnKbzdsZfob53Prb7n4gr4IoPe1pY

[jesicarson]

@andreadelrio, did you and Amber decide which one of these to use?

[andreadelrio]

@jesicarson she picked option #6 according to a comment above.

[jesicarson]

@ascott - option 6.

[jesicarson]

@ascott Actually, this design needs updating since form fields are now the full width of the centre column. I think shifting the red bar to the right and allowing the text "This field is empty. You can help by filling it." to hang to the right of the centre column will work on desktop. Mobile design will need to be addressed, what are your thoughts on using just a red bar as a visual indicator of empty fields, no text? Thanks!

[ascott]

hey @jesicarson,

I'm wondering if this prompt makes more sense on the entry reader page rather than on the edit page. On the edit page a user can already clearly see what fields are completed and which are not, and is already in the process of editing the entry, so seems like they likely don't need more prompting to edit. I think it might be more useful to prompt them to edit/fill in sections that are not completed while they are reading the entry. This is also closer to what wikipedia does. Their edit prompts/links are in the reader view and not the edit view. Here's a quick example of what how it could work on the reader view:

[jesicarson]

@ascott Thanks, and good point, but we chose to not show empty fields on the reader to reduce visual clutter. I like the idea though, so how about a single prompt at the bottom of the data on the reader, saying "this case has missing data, you can help by editing it" and linking to the edit form.

The empty fields in the edit form view can be overlooked when they fall between multiple filled fields, which is why we want the red bar in the form also.

[ascott]

@jesicarson ok, gotcha.