[design] Feedback on visual elements within Flux Notes Full (March)

[edwinychoi]

The following feedback is based on the 23 Mar 2018 instance of Flux Notes Full (demo 1, Debra H). They are primarily focused on stylistic or visual changes. The attached document "fluxnotes_feedback_mar" has visual examples of the following points and should be referenced while viewing the feedback below:

1. The spacing between the table and narrative icon is very tight. Expanding it a little bit will give breathing space to those elements.

2. "Interface blue" in the components doc should be used for selected elements. That color is hex #028DEA. It should be used on the table/narrative icon that is selected.

3. "SHR context line", hex #5EBFFF, should be used for underlined elements that are structured data.

4. The right context tray of shorthand entries (#@) should have the same fixed width as the R.context tray toggle buttons above it.

5. Box shadow on the side of the toggle that was selected in the R.context tray should be removed.

6. Hitting "new note" should not have the R.context tray animate from the right edge. Keeping it fixed and consistent will ground the user.

7. More spacing should be added on the sides of the patient view, and the authoring note, to add more visual clarity that the side context trays are separate from the area where content is populated.

8. The patient record view area should always be horizontally centered until the user enters note viewing/authoring mode (by either making a new note, or exploring an existing one).

9. The patient record view area should have a smaller max width for cleaner scanability. Lines of text being too long will make the narrative text difficult to read (possibly ~800px to start? Optimal line length is around 75 characters max, but I realize there needs to be a width that works for the readability of all narrative + tabular + visualization sections).

10. The dotted vertical line should be placed to the right. Since the scrollbar is present, it has very little utility in the center when it is not in split view.

11. The clinical note icon should not have a fill in the triangular corner element.

12. Increase line height for text for easier readability. A good typographic rule of thumb resizingtion to the font size.

13. Keep search to the far top right. At the moment it shifts based on resizing the browser window. Keeping it consistently in the top right will leave it in the area that has high hit rate (good for a global function like search), and visually makes the UI look more organized as it lines up more comfortably with the R.context tray.

fluxnotes_feedback_mar.pdf