Step 16: Case Notes Screen
From PikaDocs
| Table of contents |
Overview of the Case Notes screen
Having rebuilt the basic case record screen shell, we move on to our redesign of the core Pika case record screens, the first of which is the Case Notes (http://www.openpika.org/beta_gallery/beta_case_notes_ie.html) screen. The Case Notes page elements derive from the activityN.html subtemplate. In the default Pika design the Case Notes screen includes at the top a text note entry area ...
... below which the note entries are listed in a chronological order that can be reversed to be ascending or descending. The default functional design of the Case Notes screen includes a number of well conceived additional touches, including:
- a separate "summary" text entry field for associating a shorter descriptive entry for each full note
- automated input-field insertion of the current date and time for each new note entry
- automated input-field insertion of the name of the person logged into the system
- saved case notes are individually stamped with the author's name, the date of entry, and the number of hours recorded for the individual entry
- a list of total hours completed on the case
Logic of the Case Notes redesign
Here's a partial screen shot of the Claire redesign of the case notes area:
For the Claire redesign, we build on these very solid components to accomplish the following changes and additions:
- modify the layout of the text-entry fields to widen them so they are more typical of a document word processing workspace
- change the "summary" text entry field from a textarea (http://www.htmldog.com/reference/htmltags/textarea/) to a standard text input (http://www.htmldog.com/reference/htmltags/input/) field, both to clarify visually that the field differs from the main case note text entry area below it, and to reinforce with users to use it for short-form, not long-form text entry
- reposition and reorder the sequence of the "staff," "hours," "date," and "time" input and select (http://www.htmldog.com/reference/htmltags/select/) fields to reflect our perceptions of user hierarchy and entry priority.
- addition of four "funding" fields to conform to established LSNC case-reporting protocols
- positioning of the various input and select fields below the text entry areas to allow for page resizing without breaking the design
- renaming of several field labels to make it clearer their function, as follow:
- "Summary" changed to "Summary | Title" to clarify and reinforce short-form purpose
- "Hours" changed to "Hours worked" to clarify that the time entry here relates to the amount of time expended on the tasks described in the case note entry, and to reduce confusion with the "Time" field
- "Date" changed to "Date of entry" to clarify field function
- "Time" changed to "Time of entry" to clarify field function and reduce confusion with "Hours" field
- rename "Save" button to "Save Edits" to clarify function and reduce confusion with the function of the "Add" button in the side column
- addition of a print-media CSS stylesheet for printing out case notes
- addition of a basic JavaScript print function link to print case notes
- font formatting changes to accomplish several useability goals:
- bold font for note summaries to facilitate visual scanning of case notes
- reduced color contrast to de-emphasize the author name, date and time stamps for case notes, again to facilitate visual scanning of case notes and pull the eye toward the note content
- increased line-height to improve readability.
- an embedded link so that the user can click on the "Case Notes" label on the text area entry field to jump directly to the top of the case notes below it
- a similar link added to the "Hours worked" label that jumps to the "total hours completed" listed at the bottom of the Case Notes screen
If you view the Case Notes screen (http://www.openpika.org/beta_gallery/beta_case_notes_ie.html) with these redesigned elements, most everything described above is visually evident. The changes in the underlying markup are described below with explanation of selective page elements.
Rebuilding the structural markup
The Case Note screen is another of the Pika pages where it is fairly easy to replace the original tables-based structural design with simple divs, some of which are floated, to control layout and position of the page elements. You can view how we rebuilt the structural markup by taking a look at our version of the activityN.html template. For those familiar with our earlier articles in this series, this approach toward restructuring the template and controlling its layout and positioning of page elements via the external stylesheet is, well, old news at this point.
It may be helpful here to emphasize a few page design details that are unique to this particular page, and how the corresponding CSS relates to the new structural markup:
Adding "in-page" anchor links
Our view is that the small stuff matters for the user, especially if modest changes can be made to ease repetitive tasks. This why we have begun to add a limited number of in-page and cross-page links as we work on our Pika redesign. On this particular page, we've added two simple in-page links: one to jump the user from the text entry field to the case notes below it, and the other to jump the user from the "Hours worked" field to the "total" of hours completed listed at the bottom of the screen:
This sort of thing is easy enough to do by adding an anchor (http://www.htmldog.com/reference/htmltags/a/) tag to the label you want to make clickable. For example, we added the #case-notes-top anchor to the "Case Notes" label that appears above the main text entry field ...
<a href="#case-notes-top">Case Notes</a><br /> <textarea name="notes" rows="8" tabindex="1">%%[notes]%%</textarea><br />
... which corresponds to the unique id name added to the h2 tag (http://www.htmldog.com/reference/htmltags/h1h2h3h4h5h6/) appearing at the very top of the inventory of existing case notes:
<h2 id="case-notes-top">Case Notes ... %%[number]%%</h2>
Adding the "print" link function
Our other article about Creating a Pika Print-only Stylesheet explains the basic technique we used to facilitate printing out, for example, just the case notes without the other page elements. But here we also wanted to add a simple, clickable link so that users understand easily and immediately that they can print out the case notes. We accomplished this by adding a "Print all case notes" link below the existing "Reverse order of case notes" link:
In the original template, the "reverse order" anchor link is embedded in a block-level (http://www.htmlhelp.com/reference/html40/block.html) paragraph tag, using an image file to provide the "pointer" or bullet effect:
<p> <img src="%%[base_url]%%/images/point.gif" alt="Arrow"/> <a href="%%[base_url]%%/cases.php/%%[case_id]%%/?screen=act&order=%%[next_order]%%" class="small">Reverse Order of Case Notes</a> </p>
For our redesign, we've removed the paragraph and image elements and opted instead to use a different block-level element, an unordered list, to provide the vertical structure for the "reverse order" and "print" links, with the corresponding #notes-order CSS to provide the restyled bullet effect. The print anchor link itself is the web-ubiquitous, industrial-strength javascript: print(); function. It's basic, but gets the job done:
<ul id="notes-order"> <li><a href="%%[base_url]%%/cases.php/%%[case_id]%%/?screen=act&order=%%[next_order]%%">Reverse order of case notes</a></li> <li><a href="javascript: print();">Print all case notes</a></li> </ul>
Tweaking the "line-height" property and other spacing
Which is true: Less is more? More is less? More is more? Or less is less?
The answer depends on the design goal. "Usability," a core design goal, at the least prompts attention to online readability (http://kalsey.com/2003/10/online_readability/), i.e., how easy or hard it is for the user to scan and read the page. This can be a particularly challenging aspect of designing pages within Pika because of the pressure to load up pages with more and more information, and so design choices often involve trade-offs. And admittedly as we've worked our way through various alpha and beta designs, our views on this point have been in flux.
Here's where we are at this moment regarding the display of the Case Notes page: Increasing line spacing (http://www.fontsite.com/Pages/RulesOfType/ROT1-08.html) -- i.e., more spacing between text lines and between individual case notes -- is a good thing.
Look, experience has taught us that the case notes for any case record of any substance (i.e., other than those high-volume hotline feel-good "hootenanny and a handshake" cases that take about five minutes to handle) are going to take some serious note entry. So the case notes page is likely to be pretty long on a whole lot of cases. And scanning and reading long web pages are, well, difficult -- which is why one long-accepted web design convention is to keep one's web pages short.
Unfortunately, that cannot be done so readily in a case management system like Pika. So, why not do a few small things to make the Case Notes easier to scan and read? In the Claire design, here's what we've done to address these concerns:
- make all text resizable in both Firefox and IE
- increase the default line-height to a minimum of 130%
- increase the margins above and below the hr separators between note entries to further ease visual scanning
- reduce the contrast for less essential case note text elements, including the author, date and time information so that the eye is drawn to the note title and note content
Here are our modest changes to the markup that contains the case notes you see on the screen:
<p class="case-notes-entry">
<span class="notes-summary">%%[summary]%%</span>
<br />
<span class="notes-body">%%[notes]%%</span>
</p>
We gave the enclosing paragraph tag the more descriptive class name of .case-notes-entry and attached span tags to both the summary/title text (.notes-summary) and the main note text (.notes-body) to provide hooks for controlling their presentation via the external stylesheet. (For our current design, we use only the former.) We reset the line-height for both the case note summary and the body of the text by using the p.case-notes-entry selector:
p.case-notes-entry {
line-height: 130%;
}
Then we gave the case note summary emphasis by setting the font-weight to bold, and lowered the contrast for the author, date and time text (enclosed within the p.user-id selector) by setting the color to gray:
span.notes-summary {
font-weight: bold;
}
p.user-id {
color: gray;
}
We used the following CSS code to render the hr separations between case notes with a single pixel line and a generous margin above and below:
.notes-container hr {
height: 1px;
margin: 20px 0;
border: 0px solid transparent;
border-bottom: 1px solid #B5C6A5;
* html .notes-container hr {
margin: 0;
}
As always, you can view full-size screen shots of the redesigned Case Notes page at the Project Claire Design Gallery (http://www.openpika.org/gallery.html).
Next: Step 17: Case Record Eligibility Screen
Related articles and files:
