Websites

Reinventing the 40 Page Medical Clipboard

By Cody Lewis On Aug 20, 2018 . 0 Comments

Everyone knows it. Everyone dreads it. You’re going to walk into your doctor’s appointment during your 45 minute lunch break and get handed a stack of papers that’s a good start in a bodybuilding career. Pages and pages need to be filled out, often with redundant information. No matter how good the doctor is, not matter how insufferable the problem, everyone dreads the medical sign in process

The final result is a quick online form that takes the place of any paperwork needed in the office; however, no matter how simple the final solution may seem, a lot of thought went into the experience for the user. Did I mention it also captures your driver’s license and insurance card? Join me in analyzing a step by step evolution of the Rapid Med Sign In, from forms to form-less, from frustrating clipboard to relieving convenience.

 

Part 1 – We Design for the Users

Every job has a tool that can make the difference between completing it a breeze instead of a nightmare. Here are the ones we use to reduce headaches.

jquery.inputmask 3.x

There isn’t a person that has gone to enter their phone number, typed it in, and tried to proceed. Only to be met by a notification saying “Phone number must be formatted (555) 555-5555.”. The user is more frustrated, has to find the bracket characters and hopefully not be met by another barrier.

Using jQuery’s inputmask plugin, we were able to avoid all of that hassle by formatting each field leaving the actual input for them.

Labels & Placeholders

In the initial designs, labels were being used to mark fields. Once when going through the sign in process I found myself looking at the label going to input data, getting distracted and having to look again. If this were to happen to the someone designing the application it mostly certainly would happen to others.

Adding placeholders in conjunction with labels allows for the eyes track more easily to the corresponding and jog the memory of the user if they get momentarily distracted.

VS

Validator, for Bootstrap 3

Since our form fields involved details pertinent to medical details, almost all of them are required. Before anything specific was in-place there was the all too familiar and ever intuitive default browser behavior.

I will admit that these can be useful for quick, simple form but I hesitate to give them that much justification. They don’t stand-out and give little feedback to the user.

While Validator upgrades a gentle poke of a reminder to a forceful prod. Where before the user might think, “What did I miss?” or “Why isn’t it going to the next page?” now they’ll realize “Oh, I missed this input that’s now bleeding red”. I found that the amount of red isn’t the key to it’s success but the contrast it provides.

Visible Error Messages

Red label, red border, red X, and the user is still confused as to why they aren’t being taken to the next page. Their focus in on the bottom of the screen not that phone number that they forgot the last digit. Bring the errors to the user, don’t make them search for it. We brought it to them by showing the error message where their attention was already focused.

Iterating over each of the inputs and checking for their validity, we were able to see which fields were not valid and notify the users in a clear and concise manner. Pair this with the fact that the invalid field will be standout at this point, and we have a recipe for success.

 

Part 2 – Section Specific Elements

Simplifying Self Pay

Numerous times a user will select an option that renders other fields redundant, it’s similar to a request going through but no feedback be giving so we think, “Is it still working?”. Having some forethought, sections with items like self pay could lead to the same confusion.

A user checks the “Self Pay” box but the fields for their insurance information still remain. Some users may go straight for the “Next” button at this point while other may wonder if they need to still put at least their name into the field. My opinion, hide any inputs that relevant to the user and remove all doubt from their mind making the only thing left to do on the section is proceed.

Billing Autofill

Later in the process, it was realized that we were missing a crucial feature for saving the user’s time. We all use sites that ask “Is your billing information the same as your shipping?”. For me that is almost always the case, helping me to finish my purchase where otherwise I might have been deterred.

We want to apply that same concept here. The form should work for the user not the other way around. By enabling the option by default we are letting form work for them.

Sign on the Dotted Line

At this point we were nearing the end, but we had to figure out a way to get a signature for the required forms. There are two approaches, either “Type your name here to sign” or allowing the user to sign with their mouse. While text input option is much easier to implement, many users are more wary of it constituting as an actual signature.

In comes, jSignature to the rescue. If you’re not familiar with this widget it’s a

“JavaScript widget (a jQuery plugin) that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger”

Responsive, intuitive to use, and easy to implement.

 

Part 3 – Future Revisions

The main goal is always to reduce the amount of input from the user to get the needed information from them. Through brainstorming and research the following are some we plan to test out

Zip Codes

I’ve recently started seeing this, a site will need for zip code for billing and once your blur the input the city/state fill themselves automatically. Filling out those fields is so ingrained in me that I tabbed over and filled it out again without thinking. To take it a step further, why even show those fields? Get the information you need behind the scenes while having less clutter to distract or bog people down.

Saving a Step

For insurance, there’s opportunity to save the user some hassle by following this train of thought.

1. Is the patient’s insurance insurance not self
2. If so, then their emergency contact is highly likely to be whomever is their policyholder
3. Ask the question, “Is your insurance policyholder your emergency contact?

A majority of the time they will say yes, you will save them a few more fields to fill in. One area of concern would be those whose insurance policy isn’t their emergency contact. Is the potential time saving for some worth an additional question that will always be no for other?

Ask the Question

Often time we as developers will implement features for usability that are overlooked. An example in the current version of the app would be the progress bar that is also a nav bar. Few people realize what it is and even fewer use it, needless to say room to improve.

So then why not instead of having a box to check or uncheck, we ask the user the question outright – “Is your billing information the same as your patient information?”. Less boxes to check, potentially less inputs to see, making the process that more seamless.

To Mask or Not to Mask

Password masking is a topic of debate, but Jack Holmes has a great site that summarizes the overall message at passwordmasking.com. From the research Jack found that when a password is not masked 80% of the users were not expecting to see it as such. This leads to them user thinking the site wasn’t built properly, the site was hacked, or what other problems might this site have?

The solution that Jack found was optional password masking. Having the password field masking being a feature to toggle.

This helps the user to identify the it as a feature and not a mistake in design. In Jack’s testing the password was unmasked by default which may be a point of controversy to some. I’m curious to see what others think as well.

Clarity in design in something that would be improved upon in future revisions though the following:

Infield Top Aligned Form Labels

The downfall with top aligned labels is that the eye tracking of the user isn’t as smooth as we could hope for. UX Movement has an excellent article showcasing eye movement through the different types of label for forms.

Infield top aligned form labels are leaner and compact approach to form labels lends itself to a stronger focus on the field itself. They also mimics the forms from it’s paper origins in a more grid-like format.

Some disadvantages to consider are error messages aren’t always clear, longer labels do not work well, and they create a lot of visual noise. Error messages are not a problem with the system we currently have implemented. Visual noise is challenge that lines up with how we want the app to be in future, less. By having less inputs space out between different sections we decrease the amount of field and visual noise.

Slide to the Left, Slide to the Right

Transitions are down currently through jQuery’s fadeIn() and fadeOut(). They provide smooth transitions but do not lend much to the actual usability of the app itself. Instead the jQuery’s toggle(“side”) could be used it it’s place. The ability to swipe left/right would be implemented as well to allow user to navigate through form sections with ease.

Let’s Make Some Progress

The progress bar in all honestly doesn’t exist currently. You can see the section you are working on but it doesn’t lend itself to show how how far you have progressed along in the process. Replacing static values of section names with percentages to let the user know where they stand in terms of their progress. They key is to have it update enough to where they do not feel defeated by it’s lack of progress.