hamburger.svg

We are finally able to think about something besides snow here in Arlington. Here are a few things we’ve been learning about.

Reinventing Health Care The Coevolution of Biology, Technology, and Culture

sparkshoney_superhuman

sparks&honey The Ad world’s Open Agency with a strong focus on cultural trends, talks about healthcare. We are living in a sci-fi world full of bionic limbs, wonder drugs, 3D-printed organs, lab-grown muscles, and brain-computer interfaces.

Battling Infectious Diseases in the 20th Century: The Impact of Vaccines

wsj_vaccination

Have you seen our new Health Axiom design, “Vaccinate Your Child”? The Wall Street Journal recently posted a series of interactive infographics that show the remarkable efficacy of vaccination over the past 80 years.

5 tips for protecting PHI in Web apps

hcITnews_cybersecurity_lock

It can be as simple as excluding PHI from a URL. HIMSS Media executive editor Tom Sullivan for HealthcareIT News.

From this week:

In this week’s podcast, The Digital Life: The Frontiers of Digital Health Diagnostics  Jon and Dirk discuss the latest achievements in digital health diagnostics from 23andMe, Columbia University, and Scanadu, and explore the future of mHealth.

On Wednesday, Dirk Knemeyer took ESPN to task for a small but important information design issue in A Little Info Design Lesson.

On Monday we showed you the realities of Invo designers, the studio, and impassable snow. Around the Studio: (except when we’re not): Working Remotely

ha_vaccinate

As my World Cup Feature surely indicates, I’m rather a big fan of what the non-American world calls “football.” So it was that, yesterday, I had the ESPN feed for the Juventus-Dortmund game up alongside my work.

While trying to parse through the substitution information, I noticed a rookie mistake in how the sports organization presents team rosters. Take a look for yourself.

juve_dortmund_rosters

If you start by looking at the SUBSTITUTES tables, you will notice that ESPN uses alternating grey and white rows in listing a team’s roster. At the start of the game, each team’s LINE-UP was laid out the same way. While there may be better ways to present a team roster, the changing of background colour to more explicitly differentiate within a list is a valid design choice. It is certainly preferable to using a single color on an otherwise Spartan list.

The problem for me as a viewer of ESPN’s data is that, when a team substitutes out a player, the substitute's information is always presented on a white background, regardless of where it falls in the table. This creates visual inconsistency in the established alternating-row pattern. Based on the initial presentation, one expects each player to be distinguished by color from the player/row above and beneath.

juve_dortmund_sub-confusion

From a layout perspective, ESPN’s method for showing a substitution relationship works. The substitute's information is associated with the player they replaced by a connecting line and indented representation of their position. Let’s explore how they could use background colour for these substituting players:

Method 1. Always use white (as ESPN does) or grey for ALL replacement players. This irrevocably breaks the established pattern of alternating grey and white rows and creates illogical visual connections. A white-backgrounded replacement is connected to a grey player they replaced, but the white-backgrounded substitute appears directly above another white-backgrounded—but unrelated—player. Or, more sensibly, sometimes the white-backgrounded replacement happens to be replacing a white-backgrounded player, in which case there is a logical visual connection that reinforces the original pattern. But it is entirely inconsistent: sometimes the replacement fits ESPN’s pattern and other times it does not. 

This next solution brings a bit more consistency to the view.

juve_dortmund_sub-highlight-gray

Player/sub pairs are bracketed in orange  for emphasis only. The brackets are not intended for inclusion in the UI design.

Method 2. Always use the same coloured background for both replacement and player, regardless of the row color in the Line-Up. This is consistent with ESPN’s basic alternating colour pattern, reinforcing the logic of that approach while providing at-a-glance understanding of who is on the field and their potential role in the team’s tactical setup.

juve_dortmund_sub-highlight-1

Player/sub pairs are bracketed in orange  for emphasis only. The brackets are not intended for inclusion in the UI design.

The third solution uses color to highlight changes in the line-up.

Method 3. Introduce a third background colour only for replacement players. This approach would highlight replacements and would again reinforce the logic of ESPN’s original alternating scheme. White and grey would continue to be used in an alternating fashion with the deviation from the pattern always clearly indicating “this player (with the new background color) replaced the player above him.”

Which solution to ultimately choose is largely a product of ESPN’s art direction and the other graphics they choose in their presentation of football games. Given that context, I would probably go with Method 2, which is understated, keeping the colour range largely in blacks and whites.

While small information design problems like this ESPN example might not seem like a big deal, they are like paper cuts of varying acuteness. As one poor choice piles atop the next, it compounds into something that meaningfully detracts from the overall quality of experience.

As the news has spread in all directions we have discovered that the 2014 Ebola outbreak represents not only a healthcare crisis with global impact, but also an information crisis. Even highly respected news outlets can have conflicting information on a single event, so that the stories are confusing and hard to trust. Hours spent poring over the NIH and CDC and WHO sites revealed the common threads of truth, but the details were scattered. There was no straightforward way to get a complete picture.

So, we decided to create a single source of graphical information that could become an international resource. Something that could compliment the Wikipedia page. Clean lines, a classic readable font, with unambiguous colors and icons. Headers in black and white, red for critical information, gray text to let pictures do the talking. Easy to scan and locate the topics before reading closely for details.

For designer Xinyu Liu, sifting through and digesting the massive information set was a great challenge, as was creating the graphics based on what she learned. It took time as well to select and refine icons for readability and simplicity. A fully articulated timeline had to be scrapped because it simply didn't show all of the information. Then came distilling the language for brevity and clarity, fact-checking to make sure we had the country names correct, as African politics have shifted since the virus was first identified, and researching to ensure clinical accuracy. 

We worked quickly to get the graphic out into public view. Waiting to get it perfect was not the plan. It is an image for now—it’s not yet searchable nor dynamic. We need lots of eyes on it, the eyes of people who are far more aware of what is currently happening and how it all began: doctors, healthcare workers, policy makers, scientists, and others in the field. We are continually gathering feedback, updating, and reposting. The scientific method at its best: ideate, model, test, repeat.

The first draft of this document was put together in under two weeks. Here is a peek at how that happened.

red-ebola

A single page from Xinyu's sketchbook contains the challenge in a nutshell: overwhelming data in a broad range of topics, from geopolitical divisions to chronology, the nature of the virus, rates of incidence and deaths, and more. Color codes and graphs are beginning to take shape even while information is still coming in.

death-rate

A detail of the timeline that now clearly tells the story of each outbreak since 1976 with geographical locations, rates of cases and deaths, and a summary of how the infection began and spread in each case. The timeline also indicates points at which new strains of the virus were identified.

ebola-hiv

Gathering epidemiological data, developing the context for the narrative of the current outbreak.

oct7_text-graphics

Working with feedback to improve visual consistency, and, later, understanding the concept of viral load to add new information from an external reviewer.

viral-load

Here we see the finely tuned visualization of the information in the previous two sketches, used to convey the dramatic differences in viral load among several devastating diseases.

Involution Studios is a tiny company. We are not an NGO nor a non-profit. We are, however, deeply committed to designing great healthcare and changing people’s behavior for better health (hence, the Health Axioms). We want to understand what is happening with Ebola, and we want to make it easier to share that knowledge. So we created Understanding Ebola: A Visual Guide as an open-source project that we are distributing as widely as possible. We invite feedback and we will continue to update and improve it as healthcare professionals send us better information.

details

flying_pig_18_Aug

CNN, I promise you: I’m not picking on you intentionally. I just happen to read your news a lot and the way you visualize information really stinks.

On Monday, August 18, CNN posted a short article about the impact of sanctions that Russia has imposed on food imports in retaliation for the sanctions imposed by other nations against them. At the top of the article is a large graphic that combines colour, illustrations, numerical data, labels, and icons to communicate what foods are impacted, the nations that export them to Russia, and what the financial impact is. The problem is that, while it is attractive, the data visualization adds very little to the story being told. There are a myriad of problems with it.

RussiaFoodImports_18Aug

Colour use is puzzling. The use of colour, ostensibly to help differentiate among different nations, is ineffective at that task. The European Union, in blue, stands out clearly. But the United States is orange and peach. Norway a pink-red. Canada a medium pink. Australia a light pink. All of those last four nations blend together colour-wise and the only thing their identifiers really communicate is “not the EU.” This misuse of colour precludes the provision of additional insights for the user regarding the degree to which each specific nation is impacted by the import ban.

The data is terribly out of proportion. Any visualization with wide disparities in the amounts of data being represented should have the objects holding that data physically reflect some proportionality. If CNN had simply made every bucket the same size it would have been less offensive (if relatively impotent), but instead they chose to make one—just one—of the data containers twice the typical size. And they did that not with the largest bit of data, but with the item to which they could attach a cute little picture of a galloping pig. If that isn’t the tail wagging the, errr, pig, I don’t know what is.

Information is used redundantly. The word “million” is a clarifier for the number of dollars being indicated in every single data object. The rule is, any time you repeat the same thing in every line or container, it should be removed from all of them and established outside as applying to all. There is also redundancy in their use of both colour and flags to indicate nationality. But maybe they needed redundancy on this one because of their bad use of colour (see above).

The ordering of information is illogical. It appears to be ordered from highest to lowest, but then sometimes is not, for inexcusable reasons. Pig offal gets bumped up the list so they get to provide their galloping pig with the largest possible runway. The United States’ data inexplicably wedges between the EU and Norwegian data for reasons that are not entirely clear, and then design pushes the U.S. data to read right-to-left instead of left-to-right, contradicting the rest of the data and breaking every convention imaginable. Perhaps the artist was on a heavy dose of painkillers?

OK, so now that we’ve cited all of these issues, can we not just throw stones but create something better? Along with my pal Brian, I think we can! Take a look:

ru_food-imports

Illustration: Brian Liston

We’ve done a variety of things here:

Colour is used consistently. Each nation gets just one colour, and their colours are crisply distinctive from each other.

More clearly represented the relationships between the amount of exports based on nation, and then the proportional amount of exports based on the type of export. This tells a meaningful data story, unlike the CNN original.

Data is logically and concisely edited. I’m sure there are people who know and understand the difference between “Pork Products” and “Pig Offal.” However, I can assure you that they represent less than 1% of the readership of CNN. Truncating those into a single entry creates less overall data making all of what is shown more useful.

Related data is shown in a useful context. By bringing together, for example, the two “fish” entries into one object it tells a deeper story about that one specific export, fish, for near-zero cost or cognitive overhead.

Information visualization means focus is on data first, illustrations second. CNN bent over backwards to accommodate their illustrations at the expense of the data story. We’ve reversed that emphasis in order to communicate something more meaningful. 

Now, perhaps CNN simply wanted something that looked cute and cuddly, and presenting data was not the point. Well, in that case, just draw your cute illustrations and present them without data in the most lovely and engaging way possible. If the point is to enhance and emphasize the data, they need to take an approach more similar to our quick redesign than their own confusing, inconsistent mess.

Yesterday at the New England Health Datapalooza, held at the DCU Center in Worcester, Mass., judges Pierce Graham-Jones, Innovator in Residence at the US Department of Health and Human Services; John Halamka, CIO of Beth Israel Deaconess Medical Group; and Manu Tandon, CIO of the MA Department of HHS, selected hGraph, an open system for visualizing personal health metrics designed by Involution Studios, as the second place finisher in the regional competition.

hGraph at Datapalooza

Involution Studios Creative Director Juhan Sonin receives the award for hGraph from John Halamka, Pierce Graham-Jones, and Manu Tandon at the New England Health Datapalooza.

Datapalooza entries were judged on use of federal government data, creativity / innovation / originality, patient empowerment / engagement, usefulness to the public, and scalability. The New England Health Datapalooza was organized by the Massachusetts Health Data Consortium. Placing second in the competition qualifies hGraph and Involution to advance to the national Health Datapalooza, held in Washington, DC in June, 2013.

As the transformation from paper to electronic records takes place, hGraph provides an open source software visualization tool to health care providers and patients that enables decision-grade analysis. Like most information heavy fields, healthcare is fraught with the problems caused by too much data with no easy way to sort it all. People need to be able to actively use and benefit from the healthcare data collected about them, while avoiding information overload.

In order to gain insight into the complex, multi-dimensional data sets that represent health metrics, healthcare data requires visual representations that are engaging, optimized for use by both the health care provider and the patient, and support high-level pattern recognition and analysis as well as the ability to see deeper details.

hGraph information visualization

The hGraph information visualization for personal health metrics

hGraph is particularly well-suited for viewing complex data, providing a complete overview of an individual's health. This single picture method can have a profound effect on a person's understanding of their total well-being, because it compiles multiple metrics into a unified graph that can be viewed at a glance.

hGraph for iPad

The hGraph information visualization is being incorporated into mobile software, including apps for iPad and iPhone.

hGraph is receiving increased national attention and was selected as a part of the Stanford Medicine X conference last month on the intersection of medicine and emerging technologies. The hGraph information visualization is also being incorporated into mobile software for use on the campuses of two Fortune 500 companies at corporate micro-clinics, beginning this fall. Additionally, hGraph software prototypes are under consideration for use by several major health care providers.

Juhan Sonin, Creative Director of Involution Studios, will be presenting hGraph at O'Reilly's Strata Conference in New York, on October 24, 2012.

On the world stage of the 2012 London Olympic games, in today's hyper-competitive athletic environment, there's no doubt that any advantage, no matter how small, can make a difference.

InsideTracker software, created by Segterra and designed by Involution, provides data and analysis that many athletes have, up to this point, had access to only on the occasions when they interacted with their physicians. This innovative software product was used by champion track cyclist Sarah Hammer to learn about nutritional deficiencies and excesses via bloodwork analytics and optimize and boost performance based on diet recommendations.

See how InsideTracker helped Sarah Hammer train for the Olympics and improve her performance enough to win two silver medals.

Designing InsideTracker
When Segterra embarked on the design of InsideTracker, they needed their scientific, evidenced-based recommendations to be visualized in a compelling way. Involution, selected by Segterra for the studio’s deep experience in healthcare, worked to create what Discovery has called “a dashboard for your body”. The revolutionary software gives people insight into their own body chemistry, helping them improve their health and overall athletic performance.

How It Works
The InsideTracker experience begins with the user selecting health and athletic performance goals and then measuring up to 20 biomarkers — such as glucose, total cholesterol, vitamin d, potassium, sodium, and zinc — via a blood test. Next, the results and recommendations are beautifully visualized, enabling the user to discover both current readings and optimal levels for each biomarker.

Inside Tracker Bloodwork Analysis

InsideTracker provides beautiful visualizations of blood analytics data.

InsideTracker enables the user to learn the effect of each biomarker on their health as well as obtain detailed, scientifically-backed advice on how to improve their health and performance. Once the user learns which foods can impact which biomarkers, the person can discover new foods to incorporate into their diet and receive a nutritionally balanced plan for a day’s worth of calories with each menu calculated to optimize their biomarker levels.

Inside Tracker Food Recommendations

Inside Tracker gives scientifically-backed advice on new foods users can incorporate into their diets.

Inside Tracker gives scientifically-backed advice on new foods users can incorporate into their diets. Whether you’re a health-conscious user who wants deeper analytics into your biomarkers and food consumption, or an Olympian who wants to achieve maximum performance, InsideTracker provides the platform.

On Tuesday, Involution Studios Creative Director, Juhan Sonin challenged infovis guru Edward Tufte to engage more fully in the discussion regarding our nation's greatest problems, including education, energy, finance, and health, among others, during a segment on The Digital Life podcast.

Edward Tufte was appointed by President Obama on March 5, 2010 to serve on the Recovery Independent Advisory Panel as the board member tasked with clearly communicating to the American people how $787 billion dollars of Recovery Act funds is allocated and distributed. The was much celebrating at the announcement, in the national, business, and design press. So, nearly a year and a half after this illustrious appointment, what do we have?

The Recovery Independent Advisory Panel is responsible for Recovery.gov, and the site's Recipient Reported Awards Map is indeed chock full of data regarding grants, loans, and contracts, mapped out on a state by state basis. But the interface is not in any way beautiful, elegant, or particularly usable, at least not in the way that you would expect from a Web site with Edward Tufte as its key infovis advisor. Which begs the question … what is the real public face of Tufte's offering to the national dialogue, if it's not, in fact, located at Recovery.gov?

A generation of designers has been highly influenced by Tufte's contributions to the field of information visualization, and his books and seminars are near legendary. Tufte has proven, without a doubt, that he is the greatest curator, analyst, and critic that the field of information visualization has to offer. But, as a craftsman, there is no single game changing design that Edward Tufte can point to, that has influenced our world in a positive and significant way.

In the field of industrial design and consumer electronics, Steve Jobs and Jonny Ive will be remembered for a bevy of achievements, from the iMac to the iPhone to the iPad; Dieter Rams will be remembered for the T 1000 world receiver and innumerable products for Braun. In the field of architecture, Frank Lloyd Wright is remembered for the Guggenheim and Fallingwater. However, in the field of infovis we have nothing that approaches this level of design power yet, despite the fact that we live in an age and in a nation hungry for it. If Tufte is to find his place among the greatest design minds of the century, he will need to produce this visual language to help us, as a nation, grapple with the significant issues before us.

One of Tufte's great influencers is Charles Joseph Minard, whose graphical depiction of Napoleon's March, illustrating the attrition of troops during the Russian campaign of 1812, Tufte refers to as probably the best statistical graphic ever drawn. The Recovery Act is deserving of visualization, if not as good as this example, than at least better than what we have now.

Sonin's rant on The Digital Life was a challenge to one of his great design heroes to take up the gauntlet and help improve the state of understanding for Americans around our most pressing problems. We live in an era where we are deluged with data, but devoid of true comprehension: Good information visualization just might lend us just the clarity we need.