Clinical Encounters relies heavily on the input of data to create an overall engaging and interactive experience. To help users with the initial set-up of this data, we looked at various ways to create an easy and intuitive input experience.

Why We Wanted Autocompletion

Example of some available tags

The primary reason behind developing custom autocomplete functionality was to help handle tagging cases. Every case can be given a short subset of tags which can be used to search for and identify cases. These tags cover various medical topics or features about the case, such as cancer, neurology, pediatrics, or things like first visit and follow-up visits. We needed an easy to use way to display all available tags without overwhelming the user.

We had ideas for checklists or a regular drop-down, but both of those did not offer a great way for a user to conveniently find what they were looking for. So, we went forward with a system that would suggest tags based on what a user typed in. It would help with narrowing down the list of possible tags and could be used to quickly enter tags. An autocomplete system also helps us add and remove tags/suggestions without much effort since all that needs to be changed is the list of available tags.

Unfortunately, there were no available assets for an autocomplete system that satisfied our needs, so it fell on us to design our own!

How It Was Implemented

For our needs, we wanted users to be able to type out and choose multiple tags while using the same input field. To make something like this, there were a few key components that come into play. They are:

  • The list of all tags
  • The list of currently entered tags
  • The current tag the user is entering
  • A list of currently shown tags

These four items construct the base of the autocomplete feature. To simplify it, we compare what the user is currently entering to the list of all tags. We find any tag that matches and if the matching tag wasn’t already entered then we add it to the list of tags to show. From there, add other features such as a way to choose the top suggestion and support for deleting tags (both from selecting multiple or by simply backspacing) and the autocomplete drop-down is basically done.

Yet, it wasn’t that simple.

Problems and Progress

Part of the issue with creating this system was displaying the results. While Unity has a built-in drop-down feature, it’s not the greatest thing. For example, it’s impossible to navigate Unity’s drop-down results with the arrow keys – something we wanted our users to be able to do. This meant that we had to reconstruct a dropdown from scratch. Having Unity’s drop-down as a guide helped with this and with our own creation we had more control. Yet, with great power comes great responsibility as they say. Everything, from correctly setting up the drop-down in Canvas, managing player input, handling arrow navigation and selection, and dealing with Unity’s selectable objects and maintaining focus, fell on our shoulders. In the end, though, it was worth it.

Navigating using arrow keys

We also went through several iterations of improvement for the autocomplete. At first, it was as basic as it could be. It had bugs and wasn’t very friendly, but it worked (most of the time). We went through bug fixes and quality control until it behaved, but we still needed more from it. We then decided to add the arrow navigation. It was still using a test list of manually entered tags so we added the ability to load tags from a file making it easy for anybody to make changes and submit new tags. Finally, we added a button to force all available tags to show, making it truly akin to a dropdown.

Other Applications

How entering panels works

This autocomplete feature hasn’t been restricted to just inputting tags. We found a good use for it on our Medical Tests tab. On this tab, case creators can add different tests or lab panels (groups of tests) to order for the patient. We’ve added autocomplete drop-downs to select a test or panel that will populate many of the consistent data fields for the user. This way if a creator wants to offer the choice to order a Complete Blood Count panel, for example, they wouldn’t have to then manually add in the tests for WBC, RBC, HCT, Hgb, Platelets, and the normal ranges for each of those. Users can still enter in their own panels and tests, but the autocomplete helps us offer this handy feature.

You can read more about the Clinical Encounters platform at its website and follow along with our development on the blogs.