Revise Write Plan page

[stephaniesimms]

UX wireframes @JEK-III : http://h90c3m.axshare.com/#g=1&p=write_plan
Functional Specification (global spec for all write plan pages): Implement with a non-table layout; attach labels to input fields
Related issues for write plan pages #491 #495 #497 #498

• Rename second tab after Project Details "Write Plan"
  Blue notepad icon functional spec: For multi-phase plans (e.g., Horizon2020), split into separate tabs for each phase, labelled with the name of the phase (e.g., Initial DMP, etc.)
• Backdrop functional spec at bottom of wireframe: The first time the page is visited, first section is expanded, others are closed. Subseqently, open first section containing an unanswered question.
• Up to 3 guidance selections can be displayed, one tab for each. Guidance redesign is separate, related issue Revise Guidance on Write Plan page #495
• Create slider for Comments (renamed from "Share Note"); blue notepad functional spec: Contents reflect whichever question was last in focus. Set to first question when the page loads.
• Rename button at bottom of page "Download Plan"
• Move progress bar inside of Write Plan tab area
• Revise display for no. questions answered (0/3, 1/3...3/3) - show empty circle if zero questions answered, green check if at least one question answered

[briri]

Hoping @jollopre can work on this one since he is familiar with the new auto-save feature.

Note that the Guidance portion of this page is a separate ticket: #495 This ticket will need to be worked on in coordination with the guidance ticket because the Guidance/Comments section is being contextualized to the answer that has focus. (e.g. user expands a section and/or sets focus on an answer and the guidance/comments should update)

The section/answer portions of this page should function the way they currently do in the development branch. The following things need to be added/changed though:

• Progress bar moves so that its within the tab rather than floating above
• Progress bar styling needs to be re-implemented
• Add a new status indicator to the section accordion bar (e.g. 1/3 and 0/2 in the wireframe)

[briri]

@JEK-III @stephaniesimms @sjDCC and @dsisu
I'm not completely finished with this yet but wanted to provide a screenshot to begin soliciting any feedback you may have for the layout.

I've tried to retain the structure of the existing guidance/comments section

[sjDCC]

Looks good to me @briri Nice clean layout. I just have two suggestions (marked on screengrab below)

I think the section headings would be best with a coloured background to divide them more visually. I also wonder if we can reduce the padding at the bottom of the guidance/share note box and scale this to fit the number of pieces of guidance? It seems particularly big (too much whitespace) on the share note example.

One other teeny point is changing the text to 'UoE example answer' The phrase 'Example of answer' was one of Marta's portuguese-english-isms that I thought we had removed but she's creeping back in ;-)

[briri]

@sjDCC @dsisu @stephaniesimms @JEK-III
The revised write plan page is out on roadmap-stg and ready for your review. I can already see the "unsaved changes" message is appearing above the "updated by someone at ..." message so we will need to adjust its position. Let me know where you would prefer to see it.

Please note any changes in this ticket and move it back to in progress if you have any.

[sjDCC]

Thanks @briri

I much prefer it with the greyed out section headings and smaller guidance / comments box.

There are a couple of things I'd change:

1. Personally I would position the example answer above the answer box to give ideas before people complete. It seems odd to me below
2. I think we need to reintroduce the scroll bar into example answers. Some of our Unis have given really detailed examples, or multiple examples, so the box can be very large. At present some examples make the save box a long way off
3. We seem to be missing labels on guidance and example answers to explain where they've come from

A couple of screengrabs below to explain what I mean

I see what you mean about the 'unsaved changes' button obscuring text. I guess it should come beneath the save button like in DMPonline

[briri]

That's really odd @sjDCC it displays the organisation names for me on the guidance and the example answers. Which template did you use? can you share the plan with me?

[sjDCC]

Maybe it's a legacy data issue? It was a funder one. EPSRC I think. Will dig out and share

[sjDCC]

A quick follow on to this which I've just noticed on creating a new plan. The guidance which is attached to the template seems to be missing the text 'guidance' on the label

[stephaniesimms]

I agree w/everything except position of the example answer. It seems odd to me above. My thought is that we want users to proceed smoothly through the wizard from question to supplying an answer, and the example below the editor is prominent enough that they can refer down to it if they want to but not have to hurdle over it if they aren't interested in the example. If you feel strongly about it going above @sjDCC that's fine, but we should definitely implement a scroll bar as noted below so users can still navigate easily to the editor and provide an answer.

Here's a summary of requested tweaks to this page @briri w/one more above TBD:

• Reintroduce the scroll bar into example answers. Some of our Unis have given really detailed examples, or multiple examples, so the box can be very large. At present some examples make the save box a long way off (screenshot above)
• Missing label "guidance" next to Org name in right-hand guidance panel (see DCC ___ screenshot above and UCOP ___ below)
• if we're implementing autosave auto-saving functionality. DMPRoadmap/roadmap#438 #450 , the "Unsaved changes" warning msg is no longer needed (I also find it annoying); remove it

[JEK-III]

My main concern with putting suggested answers above the question (which does make sense from a workflow perspective) is that it potentially introduces a lot of text between the question and the place to answer it. I think that will still be true with scrollbars– definitely a good idea– unless we make the answer box irritatingly short.
Conceptually, it's more guidance that belongs in the left column, but I realize that there is so much stuff in there already that it's at risk of getting lost.

[sjDCC]

Thanks @stephaniesimms @JEK-III

@dsisu and I definitely both prefer the example answer above the answer box. It seems to fit better in the workflow there and we'd rather avoid too many changes to the existing look and feel of DMPonline. Having said that, I do take your point about avoiding users having to skip over this if they're not interested. So long as the example answer is prominent (i.e. adjacent to answer box rather than in guidance panel) I'm not too fussed about whether it's above or below. Happy to switch to your preferred view.

Considering your point about not having to skip over this, perhaps the save button should move up between the answer box and example answer so the editable / action area is grouped together and all help/reference resources are around this in panels to the side and below? That may not be necessary with the autosave though as people will need to click this button less.

[briri]

closing. the work on the write plan tabs is complete