November 16, 2016

Prototyping Your Medical Device User Interface to Reduce Cost + Risk

Prototyping UI Banner

Medical and life sciences devices are packing greater functionality into sophisticated workflows involving screens and hardware controls. Regulators and an increasingly sophisticated user population demand that these devices be safe, effective, efficient, and appealing. Following a user-centered design process that includes human factors usability testing is essential to achieving that result.

It’s vital to gather user feedback early so that changes make it to the final product. Good user experiences don’t happen by accident, or on the first try. And the rework involved if you discover usability problems in a production-ready product can be incredibly expensive. So, how do you get the input you need without breaking the bank?

In the software world you develop iteratively. You release version 1.0, then react to market feedback, because developers can make and deploy changes quickly. But this is harder with medical and life sciences devices whose hardware and embedded graphic user interface (GUI) software is tightly intertwined.

The answer is to use a prototype, “something that makes your ideas ‘real enough to feel’ so you can get feedback from users.” Just as the physical aspects of a product are modeled with increasing levels of fidelity, user interface prototyping progresses through several stages according to where you are in the development process and the kinds of questions you need users to answer. Here’s how to use prototypes appropriately for where you are in your development process.

“I’ve got an idea…” – Low Fidelity Prototypes

When you’re in the early stages of a project, it pays to explore many different approaches. Low-fidelity prototyping gives you time to generate more ideas instead of sweating the details on only a few, and keeping the investment low allows you to throw away ideas that don’t work.

For example, on a recent food tracker project, we wanted to explore some of the following questions:

  • When people look at the device, is it to check status or take an action?
  • What actions are most important? Most urgent?
  • What’s the most important data? What data can we get rid of?

We began by sketching on paper so we could concentrate on ideas vs. design details. We came up with concepts that represented a range for each of those questions. Once we had a good variety of approaches, we sketched them in PowerPoint to share with the rest of the team.

Keeping things simple helps you, your users, and your stakeholders focus on what’s most important at this stage:

  • Overall organization of functions (conceptual model)
  • Information hierarchy
  • Navigation

Here are some examples of the many low-fidelity prototyping tools available:

Paper

Prototyping on paper is easy to understand, fast, and inexpensive. Grab a notepad and some markers and have at it. It doesn’t have to be fancy; it just has to communicate your design.

Once you have a set of screens, run a quick usability test by simply stacking up your screens and asking users to point to what they would tap or click on. Then make quick changes by overlaying sticky notes.

If you want to automate things a bit more, snap pictures with your smartphone or use a tool like POP (Prototyping On Paper) for even more interactivity.

Microsoft PowerPoint

Almost everyone has access to PowerPoint and its simple drawing tools. By using these tools and PowerPoints ability to import icons and other images, you can quickly build concepts to show users, and share files with other members of the team so they can add their own tweaks. You can even add animations and hyperlinks to make your prototype interactive and get a better idea of where the design can be improved.

Balsamiq Mockups

Balsamiq is a powerful tool for quickly building user interfaces. It has a huge number of built-in controls that you can drag, drop, and rearrange. Its goal is to be as fast as paper sketching while still providing the advantages of drawing digitally. It lets you make changes without starting over, reuse elements over multiple screens, and has the ability to resize and rearrange graphics.

Another great Balsamiq feature is its “sketchy” appearance. Having things look a little rough reminds the team that the design isn’t final, and prevents people from getting hung up on appearance when giving feedback.

 

“How will this really work?” – Medium-Fidelity Prototypes

Once you’ve decided on an overall approach, you’ll want to design more of the key workflows and conditions users will encounter in the real world, such as initial startup, normal use, and error conditions. Making sure you think about every conceivable state of design will prevent surprises when you get to development and help ensure a seamless user experience.

Prototyping at medium fidelity helps you evaluate questions like:

  • What’s the right amount of information density on a screen?
  • What terms make the most sense to users?
  • How can we use color, icons, and graphic design to communicate information simply?
  • How well does my screen interact with physical buttons and other interface elements?

On slide 1 - Here’s an sample from our food tracker, showing the hardware buttons drawn on-screen so users can click them.

As you can see, we’ve added colors, icons, and a schematic of the hardware buttons. Adding these details and testing them with users helped us change course and gave us more confidence that we had addressed the riskiest areas of the design.

At this stage you’ll be sharing the designs in progress with an increasing number of stakeholders on your team. Showing them prototypes helps you gather input, build support, and uncover design issues more effectively than written specs or static wireframes.

A helpful tool at this stage of the process is InVision.

InVision is an online prototyping and collaboration tool that’s quick to learn. You create screens in your drawing tool of choice and import them to your InVision project. You then link the screens using “hotspots” to simulate workflows. Users click the hotspots to simulate tapping the hardware or software controls, and the app even simulates gestures like swiping and double-tapping.

When change the design (which should be happening often as you iterate), all screens are updated, with InVision maintaining hotspot locations and a version history of each screen.

The prototype can then be shared on the web or loaded onto a tablet or phone for testing offline. The LiveShare feature lets multiple remote collaborators work on the design together, allowing them to point and sketch on the screen so everyone sees what part of the design is being discussed.

 

“Let’s build this thing” – High-Fidelity Prototypes

After several iterations of designing, testing, and refinement your team will be converging on the final design. Now is the time to make sure you get the nuances right, and can clearly describe every detail to the people who will be implementing the design. High-fidelity prototyping tools can help you experiment with more complex interactions, communicate the design to the development team, and begin testing the design on real hardware.

If you are blessed with a development team that is close by and can rapidly implement the user interface, you might be able to skip a high-fidelity prototype in favor of coding the real thing. If not, prototyping can help reduce your risk.

For example, our food tracker relies on a slide-up keyboard that animates into position. Trying to describe the slide-up gesture, the animation, and the appearance of keys being pushed with nothing but static screen images or text left a lot to (mis)interpretation. With a high-fidelity prototype we were able to clearly show the developers our intended product behavior.

Here are a couple of high-fidelity prototyping tools:

Axure RP

Axure RP has vast libraries of pre-built controls (buttons, text fields) and behaviors that let you simulate data entry, conditional logic, and animations. For example, you can allow a user to enter data by tapping on the keyboard, animate the keys pushing in and out, and then take different actions based on what value was entered.

You can build your screens with Axure’s built-in drawing tools or import from other drawing software. One of Axure’s more powerful features are “Masters,” which let you create reusable components so that visual or behavior changes can be made in one place but applied throughout your prototype.

Crank Software Storyboard Suite

Crank Software’s Storyboard Suite bridges the gap between prototyping and production-level implementation for embedded devices like medical products. Using the suite’s Storyboard Designer component, you import Photoshop files and link them into a prototype. Developers then import the prototype into your target hardware where the Storyboard Engine component translates your screens into real code for production deployment. This bidirectional workflow lets your designers and developers collaborate closely to fine-tune the design as you go through formative and summative testing.

 

Conclusion

User interface prototypes can help you lower project and usage risks while shortening the development cycle and reducing costs. They can help you understand what your users need and ensure that your whole team has a shared understanding of the product design.

And remember these tips:

  • Start small – prototype the user’s main workflow(s) and areas where use errors or safety issues could occur.
  • Test your design with users early and often. The earlier you find issues the less costly they will be to fix.
  • Don’t overinvest – you need to be willing to throw away what you’ve done.
  • Start with low fidelity prototypes to get the right organization and navigation scheme.
  • Progress to medium fidelity prototypes to work through design details.
  • Finish with high fidelity prototypes to test nuances and communicate to your team.

Tags: Medical device Prototyping User centered design User interface design

More Farm Blogs

Subscribe to Farm News

SUBSCRIBE