Patient Details Page

[bengolder]

This issue is for discussing the layout and design of the Patient Details page, which at this point is roughly equivalent to a Universal Eligibility Form. This is one of the more complicated pages, and may need to be broken out into subsections. Some of the topics it should cover is:

• Basic Info
• Documents
• Household Size
• Household Income
• Contact Info
• Demographic Info
• Employment Info

[bengolder]

An in-progress snapshot, using tables for documents, household size, and income sources:

[mapsam]

Nice! This looks great.

Just to clarify, are the first fields editable when the user clicks on them? And essentially if they make changes they can press the "save patient info"?

[bengolder]

With this page, I'm leaning towards a pattern of having readable information and then clicking through to worksheets for editing. So I think the "Basic Info" would be just static information, but you could click over to worksheets for contact and identity info. I'm about to add more content, such as employment and demographic information as well.

[mapsam]

Sounds good - keep on rolling :roller_coaster:

[mapsam]

@bengolder here are some helper classes from the CSS that might be useful in showing percentages like this image

.completion {
   color:#FF851B;
   font-weight:900;
   font-size:1.1em;
   float:right;
 }
 .completion.high {
   color:#3D9970;
 }
 .completion.med {
   color:#2ECC40;
 }
 .completion.low {
   color:#FF4136;
 }

And the HTML from the above:

<p><strong>Universal</strong> <span class="completion med">75%</span></p>
<p>- Access Now <span class="completion">84%</span></p>
<p>- Daily Planet <span class="completion">56%</span></p>

It's important to note that whatever constitutes "high", "medium", and "low" is completely arbitrary right now.

[bengolder]

Another in progress snapshot:

[bengolder]

Some observations about forms from the Clean Team (also relevant to #19 generally):

• 48px is a convention for tappable targets on mobile (ours are smaller)
• They try to stick to only about 3 fields for page
• They use pagination through the form, storing info with the session on the backend
• They use significantly more copy and explanations, using plain language, iterating on this a lot
• Validation led to more pagination, because some needs to happen on the backend.
• How little can be done? The testing will bring up tons of issues, so how many things are unnecessary?

[andreasRVA]

These look like great! Exactly what I was imagining. Will it be photo uploads of the documents in the app?

[esmithayer]

Yup that's the plan!

[bengolder]

I've been wondering about how the name field (first?, last?, full legal?) should be structured, and I came across this great guide by W3C: How do people's names differ around the world, and what are the implications of those differences on the design of forms, databases, ontologies, etc. for the Web?

[mapsam]

Task for May visit

• [x] explicit referral buttons, have different orgs, and confirmation
• [x] no permission view with consent button
• [x] expandable sections
• [x] show document recent edits/date
• [ ] save as pdf link

[mapsam]

@bengolder what do you think of this tabulated nav for patient-related pages?

[esmithayer]

What if we put the prescreening in a tab too?

[mapsam]

Definitely possible - I just wasn't sure how that would work on the prescreening route. Would we show the tabs there as well?

[bengolder]

@svmatthews the tabs aren't working for me on mobile:

[mapsam]

Good catch! I'll take a look in a bit here.

[bengolder]

I'd like to close this issue and open anything specific that is arising on this page.

[mapsam]

:+1: