Hey ESPN! : Exploration in Data literaSEE™

I'm a baseball fan (check out my Tableau Public work here).  

When I'm not watching the Yankees on TV (@Yankees), I'm following on ESPN's mobile app.  

It's amazing to me not only how well the app stays in sync with the game, but how much data they have packed onto a small screen.  

Except ... I've always been bothered that red and green are used for strikes and balls.  

I'm bothered because for folks with the most common color vision deficiency (CVD -- commonly referred to as color blindness), it's hard to follow the game because red and green look the same muddy brown.  

About 7% of men and 1% of women have this form of CVD.  That's a lot of people!

Color vision deficiency simulation created on https://www.color-blindness.com/coblis-color-blindness-simulator/

It's not just in baseball apps...

The presence of red and green is common in everyday visuals -- possibly your visuals.   It's one of my personal missions to help change that.   Here's a great post from Zen Master Jeffrey Shaffer (@HighVizAbility).

I got to thinking about how make the app more useful to folks WITH AND WITHOUT CVD

Here are the design goals I had in mind ...

  • Tone down the bright colors 
  • Use red as the focus color
  • Rapidly know balls and strikes 
  • Avoid "knock-out" (white) text

"Technically," I felt this was a usable solution, but not visually appealing for ESPN to use it.

I was going to have to bring in green, but have it less bright and still contrast with the blue/red hitting zones.  

Please pay attention to the details of how the new concept is consistently used in the hitting zone, counting balls and strikes, and the bottom section.  

I felt pretty good about this, then started examining more screenshots and found a whole lot of design areas that went against data literacy best practices.  There was a lot more work to do ...

Sign up to know when we have new blog posts and updates to help you Become a Great Communicator of Data

1. Use Color to Code Relationships

I had to solve for distinguishing the foul balls first because that impacted everywhere balls and strikes appeared together.  

Since strikes and fouls balls are related, I wanted to establish red as the overall meaning for strikes / foul balls and not introduce another color.  But I could not use a solid red line (that's a strike).

This dashed border looked great on my laptop, but looked like a solid line on my small phone screen.

This border with a slight "glow" looked great on my phone and is highly relatable to the red border.

2. Eliminate Unneeded Data

It's reasonable to assume that if you're on the mobile app, you understand the game of baseball -- four balls, three strikes, and three outs.  The empty indicators don't add any information, so delete them.

It looks much cleaner just removing those small bits of visual noise.

3. Remove Duplicate Information

I don't mind showing "outs" in two places, but it's worth exploring the option of removing one.

  • If you have just started watching the game, you are interested in the score and will naturally see that there are "2 outs" at the top.
  • Since outs change less frequently than balls and strikes, it doesn't need an equal amount of visual presence. 
  • Moving the balls and strikes closer to the batter's box is more visually balanced.   And, better to have that information centered where the viewer is following the action.

Bringing It Back Together

As a final test, I wanted to apply all the ideas to a more complex view.  I think it works. 

Here are the design goals I laid out in the beginning ...

  • Tone down the bright colors 
  • Use red as the focus color
  • Rapidly know balls and strikes 
  • Avoid "knock-out" (white) text
Feel free to share your opinions below.
EXCELSIOR!

@ESPN, you have my encouragement and permission to use any of these ideas -- I just ask for you to acknowledge @DecisionViz and link to this post on your social media platforms, i.e. Twitter, Instagram, LinkedIn, Facebook, Snapchat, etc.  

Sign up to know when we have new blog posts and updates to help you Become a Great Communicator of Data

About DecisionViz

We still see companies invest big money to train employees on Tableau’s features, but their teams keep developing complex reports with no clear story.

Our customers are tired of staring at numbers and hire us to help them be data literate. Here’s the twist -- our data literacy programs don’t put data first, or even second.

Through the Design To Act ® training and consulting series, DecisionViz turns your employees into leaders of the people, process, and culture around visualization and storytelling.

With these new skills, teams stop developing reports and begin writing Analytic Stories™ that let decision-makers literally see what actions to take.

Leave a Reply 2 comments

Jim Lenskold - October 4, 2019 Reply

As a colorblind (or CVD) person, this article is right on target. It takes more work to figure out the meaning of many diagrams and charts. Reds/Greens/Browns blend as do Blues/Purples.

Taking away the color and making the image white for strikes does help from the color perspective. But it is confusing in your new upper section since I default to the old style of actions that are net yet accomplished (the prior white images to show 2 strikes remaining makes sense to me even though I agree it is not necessary).

Strictly from a color blind perspective and not a creative design perspective, I would make the shape different instead of all circles. I get that the circle represents the ball so it probably does not work creatively. But a square for a ball and a circle for a strike would be the fastest form of communication for me. In my own visualizations, I tend to differ in shapes or extreme differences in brightness.

Lee Feinberg - October 24, 2019 Reply

Jim, thanks for sharing your true, personal perspective! I thought about shapes for quite a long time (and honestly, that would have been the easiest solution). I decided to stick with the circles 1) to challenge myself and 2) create a greater chance for ESPN to consider this option. Let’s “see” what happens!

Leave a Reply: