Up at 5AM: The 5AM Solutions Blog

Let's Get Visual: 3 Ways to Draw Your Way to Better Software

Posted on Thu, Jun 23, 2011 @ 01:35 PM

As you probably know, this week the FDA released examples of new warning labels for cigarette packs. The images are graphic – they include an awful photo of a scabbed mouth with rotten, discolored teeth; diseased lungs; smoke emerging from a tracheotomy hole; and a scarred and stitched corpse. They're just yucky.

Will they stop people from smoking, or encourage smokers to quit? I like to think so – not only selfishly because some people I love smoke, but because I believe in the power of visual communication.

Compare the two "images" below. The first is the current warning about cigarette safety. The second (obviously), is the corpse.

surgeon general resized 600
dead smoker resized 600
Quick – put your hand in front of those images so you can’t see them. Can you recall the words on the left? Can you recall the message on the right? Now I know there are plenty of people who can probably recite that standard written warning message from memory, seeing as it’s been around for 26 years. But seeing these side by side does make a point about how compelling images can be.

And I'm a reader, so I say that with some reserve. At museums, I'll laugh at myself for spending nearly equal time appreciating the art as reading the captions describing it. Words are extremely powerful, but images can express even complicated concepts quickly and cleanly. At 5AM, we develop software for complex biomedical challenges – and we'd never be able to write a lick of code (or maintain our record of 100% deployed-and-used software) without visual artifacts being essential to our process.

Modeling is the obvious case in point. Would you prefer to read about how subsystems interact, or how software is deployed, or view it in a UML model? Even if you don't know UML, the simplicity of the images make it pretty comprehensible. How can they not be, with stick-figure "actors" representing people, straightforward lines to indicate "some kind" of relationship or interaction between items, and boxes with labels to identify parts of the system (classes, interfaces, components – even if you can't tell the difference, you still get the concept). Modeling is at the core of our work, because not only does it simply and powerfully express (to our clients and our development team) "what happens," but because the very act of drawing a model forces us to think abstractly, and to design.

Bell Fig7 resized 600
(I specifically show a simple example here so that those who don't know UML can go visit IBM/Rational's nice UML site.)

Fads and fashion in software development are constant, but whether you're "MDA all the way," or "scratch it on a whiteboard then crank the code," modeling should be a constant too. You're going to have to explain how your software works at some point, and "read the code" isn't the right answer (although sometimes it's the most truthful answer, right?). And, trying to model or explain after the app has been deployed is not only backwards, but hard to accomplish (and seldom done at that). A picture is worth a thousand words... or lines of code.

Another critical visual resource we use in our development process is the wireframe. This extremely simple "drawing" indicates functionality and shows how a user will interact with a system. We use wireframes in addition to use cases because they quickly demonstrate the system flow to our clients, and their simplicity forces us to focus on the matter at hand (what a user does at this point). We refrain from adding any design to wireframes, because design is distracting, so we can spend some good time focusing on the design after we settle on how the system actually works.

Several years ago, I worked with a team that used linked-together html (non-functional but completely designed web pages) to "mock" the site functionality in the manner that wireframes do. This was a high-cost endeavor (it's much simpler to make quick adjustments in a program like Balsamiq than to change an entire html-only mock web app) that kept the entire development team busy – not on designing the software or prototyping the hard parts, but on maintaining throw-away html code. This, and they had to contend with constant comments about the colors and the way the dropdowns worked (This is important stuff, and should be focused on separately.).

Wireframes can be straightforward – the below wireframe expresses the early vision of a project we did for our clients at the Newborn Screening Translational Research Network. Compare the wireframe to the final result at www.nbstrn.org.

nbstrn wireframe resized 600
This is a very basic description of our process (and the use of bullet points is a visual trick too):
  • Talk
  • Write down what we discussed (use case and/or technical needs/constraints)
  • Draw it (model, wireframe)
  • Show and talk and repeat to refine
  • Implement

The process can take hours or weeks, but the key final use of the visual in our process is to implement – build what we just discussed in small functional chunks so that our clients constantly see what they asked for in action. This allows them to respond quickly, and for us to adjust rapidly. As a development process, it can be challenging for some clients, because it requires that they be involved in the software development process every step of the way. Our clients pay us to deliver something they don’t have, and the way we do that is to SHOW THEM WHAT WE'RE DOING.

Or, to quote a particularly appropriate proverb, "Tell me and I'll forget; show me and I may remember; involve me and I'll understand."

Of course we’re proud of our process, and visual communication is "just" another tool we use. None of these are novel concepts. Nor, really, are the new FDA labels expressing anything new. People have known for decades years that smoking is the US’s leading cause of preventable death. Here's hoping that a constant visual reminder, on the cigarette packs themselves, will help make some people think twice, or change entirely. In this blog I’ve talked about words and I’ve talked about images. Now, here’s a number for you: 1-800-784-8669. Also known as 1-800-QUIT-NOW. Or maybe this...?

cigarette quit advertisement resized 600
And hey, when's the last time there was this much media attention on cigarette smoking? In the very act of a sneak preview, the FDA has gotten powerful results from this campaign already. And if you think modeling is old-fashioned and time-consuming, because it's much easier to just start writing code, or that html mockups work as requirements docs, or that I've missed a thread, or that it's your right to keep smoking... comment away and let's get a conversation started!


Diagnostic Tests on the Map of Biomedicine


Download the ebook based on our popular blog series. This free, 50+ page edition features updated, expanded posts and redesigned, easier-to-read maps. 

FREE Biobanking Ebook

Biobanking Free Ebook
Get this 29 page PDF document on how data science can be used to advance biorepositories.

 Free NGS Whitepaper

NGS White Paper for Molecular Diagnostics

Learn about the applications, opportunities and challenges in this updated free white paper. 

Recent Posts