18F / epa-notice

Web interface for viewing and commenting on proposed changes to federal regulations
Other
7 stars 17 forks source link

The user can see an excerpt of the section they are commenting on #202

Closed yowill closed 8 years ago

yowill commented 8 years ago

Write mode [ALMOST] The user can see an excerpt of the section they are commenting on. [Some bugs between “write a comment” links vs tab]

jehlers commented 8 years ago

Here are some design directions for the excerpt on the page where the user is writing their comment. Our main goal is to provide context to the user to keep them on track and help them to write their most effective comment possible.

(xposting from our team slack conversation)

1 - Incremental expansion

In this design, the excerpt is above the comment which is the intuitive place to put information you are writing about. Images in text books ​usually​ work this way, medium’s comments work this way, etc… One of our goals is to get better comments by keeping people on track, this design always has the content in the user’s line of sight as they are writing (or pasting) their comment. The show more could expand the whole section, or incrementally by a few lines at a time like the CFR changes.

write mode 01 copy 10

2 - Section below the comment

This has the benefit of putting the comment box front and center. It allows us to show a whole excerpt w/o any kind of interaction to expand or scroll (once the user finds it). We have a link that points the user to the excerpt so they know it is there.

write mode 01 copy 12

3 - Scrolling

This is essentially what we have now. We haven’t seen any users be confused by this interaction yet (even without any design to indicate the scrolling interaction). I do like how the user can see everything but is still taken out of the read mode. Some of the other designs I do question if we need the excerpt at all. I can play with this design more if we do want to keep this. Not sure how well the scrolling indication is working.

Mobile is the big issue for this one. Since mobile has the read/write tabs so prominently close to the comment box, I’m wondering IF we need the excerpt at all on mobile.

write mode 01 copy 13

4 - Do we need an excerpt at all?

The user can get back to the content in the read mode either through the internal link above, or by clicking the write mode tab OR the TOC. If the excerpt is cluttering this page, should we hide it on default? This example gives the user the opportunity to expand the excerpt here IF they want to see it. But keeps the page clean if they don’t want it.

write mode 01 copy 14

jehlers commented 8 years ago

After a great discussion in slack, the team is leaning towards option 4 above. But, option 4 will expand to show option 3. This meets our goals in the middle - bringing the comment box closer to the "write your comment" call to action, but still allowing users to see context if they need it.

We also discussed the benefits/disadvantages of the tabs. There is a potential future where we try without the tabs and bring the "Your comment" sidebar into read mode. This is something we plan to focus on during our open comment period research. 😄

Closed excerpt

write mode 01 copy 14

Open excerpt

write mode 01 copy 15

jehlers commented 8 years ago

Additional thoughts to play with - should there be more explicit headers between "this is what you're commenting on" and "you are writing a comment here"?

jehlers commented 8 years ago

Most recent update - taking away the main "compose your comment" header in favor of having the three main headers explain each part of the page.

write mode 01 copy 20

cmc333333 commented 8 years ago

@xtine got this with eregs/regulations-site#380