SPLASH: mockups for expanded search

[mapsam]

Entry point for assisters and screeners is to "add a patient" OR "search for a patient" so let's try and combine these into the first landing page, allowing you to do both at once.

[mapsam]

Expanded search mockups are underway!

[mapsam]

What do you think about adding a search button @bengolder? You mentioned this search automatically as the user enters information. Do you think that happens on every keyUp event or something similar?

[mapsam]

Example showing search results and an "add new patient" button at the bottom of the list. Where the add new patient button goes is still up for discussion - either the bottom or the top of the list!

[bengolder]

Yeah, I think we should respond to keyUp events. Though we will want some stronger visual feedback rather than just immediately adding divs. Something should probably flash, fade, or move to indicate that a search is happening. A button seems fine and redundant.

[mapsam]

Version of search with no results:

[mapsam]

re: visual feedback on the search

[mapsam]

Does the expanded search mean we can get rid of the "find patient in your network" and "create patient" navigation buttons?

[mapsam]

An alternative to expanded search with the "create new patient" button the right, and results on the left. Notice the results show In Network and Out of Network patients.

[bengolder]

A few thoughts:

• I like the differentiation of results that are "in-network" vs. "outside of network", but I think the language is unclear. Perhaps this subtitle should be reworded as "RCHD Resource Center Patients" and "Patients at other services".
• Yes I think expanded search means we can get rid of "find patient in your network" and "create patient"
• I'm unsure about the relative prominence between search results and creating a patient. I think many of our users will be entering new patients at least 80% of the time, especially in the first year of the app. I think "Create a new Patient Record" should be a prominent, simple action, perhaps of greater visual rank than the search results.
• If side by side, how should it lay out on mobile?
• I think it might be nice to have all these results more compact, including the create patient option. I'm imagining that a user should be able to tab through the results, maybe as a dropdown.

[mapsam]

Thanks for the clear feedback!

Wording: I think it's definitely best to make sure that when we are talking about "patients" the language states which patients, just to make sure the information is 100% clear.

Menu items: :+1:

Results vs. Create Patient: Creating will definitely happen a lot in the beginning, so we'll want to make sure it is the first thing that pops up.

Side by side: They can stack on mobile - but in regards to the above prioritization of search, we could push it to the left-hand side instead of the right so it stacks on top instead of beneath the results. (FWIW I'm not totally sold on the side-by-side, just did a mockup of it since it was quick!)

Compactness: definitely possible. Would be good to build in options for lists such as .list_compact vs .list_comfortable to be used throughout the app.

[mapsam]

Working with Defiant.js to filter through a given JSON and search for results using XPath queries.

This uses a rendering template as well, which makes for passing the JSON results into HTML quite simple. Here's the patient list template:

<script type="defiant/xsl-template">
    <xsl:template name="search_template">
        <xsl:for-each select="//patients">
            <li class="list_row">
              <a href="#">
                <span class="list_row_item list_row_name"><xsl:value-of select="name"/></span>
                <span class="list_row_item list_row_dob"><xsl:value-of select="dob"/></span>
                <span class="list_row_item list_row_edits">Richmond Resource Center</span>
              </a>
            </li>
        </xsl:for-each>
    </xsl:template>
</script>

[mapsam]

Rendering different templates based on search results: