UI Pattern : Linking Data

Here is a UI sample from my latest web application, for those of you who are interested in such things.

The Problem.

To date, in the audits that I've built the users have been required to enter de-identified patient data in two cycles. The data from one cycle to the next has no relationship. That is, the GP (Users) could audit and enter the same or different patients data between the two cycles. It made the interface very simple. The user clicks on a button to create a new form and we simply count down the number of required records for each cycle. The user can't change or see the data once it's been submitted - a very simple user story and simple interface to match.

For the current audit, the scope changed slightly. As part of this new audit the users would be required to audit the same patient in cycle 2 that was audited in cycle1. This is so that we could provide a care plan over the period of the audit.

This new requirement raised a few questions that I needed to resolve;

1. How can the user identify the third patient they submitted in cycle 1.
2. How could the user enter data and ensure that it was linked to the correct patient.
3. How could I ensure that the duplicate data (like gender and patient code is retained)

Fundamentally, I couldn't rely on the user entering the correct data in a form. I needed to lead the user through this association in the simplest possible way.

I started out thinking of a pick list on the form so that when the user selects a value, which could be a combination of data, it populates the fields.

I wasn't happy with that approach, it just felt too clumsy and not at all simple and elegant. I went through various iterations (on paper) before deciding on the final solution.

The Solution.

Cycle 1.
The user sees the traditional (in our apps) 'Submit Case Record Online' button and as they enter the data, the system counts down the remaining case records as before. I added a summary table, so that the user can see their patient code and some additional information. This was to help them remember who that patient was and put in place the mechanism that I would use for cycle2.

Cycle 2.

I added a link, 'Submit Case Record Online', and cycle 2 creation date right next to Cycle 1 records in the summary table. When the user comes to enter data for cycle 2, they can easily see the patient information and where to click to submit the cycle 2 data for that particular patient.

I was trying to not make the user think.

I removed the blue button (above the PDF link) so that there wouldn't be any confusion. As an additional touch I made sure that the link to data that was already submitted was replaced with a completed 'tick' icon.

The link contains a code that is used in the web query open to link the cycle 2 record with the cycle 1 record, including getting the common data.


Summary.

It's a simple interface that provides a really intuitive way to link the cycle 1 data to the cycle 2 data.