Don’t Blame Steve Harvey: Bad Design Caused the Miss Universe Fiasco

By now you’ve probably heard about what happened at Miss Universe 2015. In case you missed it:

It took about 15 minutes for the internet to react, raking Steve Harvey over the coals. The consensus seemed to be that this was whole-heartedly Steve’s fault. People on Twitter and Reddit even began joking that he was blind or could not read. I don’t care for Steve Harvey, but I’m not so sure it is really his fault. I was immediately reminded of this line from Don Norman’s legendary The Design of Everyday Things,

“…In my experience, human error usually is a result of poor design: it should be called system error. Humans err continually; it is an intrinsic part of our nature. System design should take this into account. Pinning the blame on the person may be a comfortable way to proceed, but why was the system ever designed so that a single act by a single person could cause calamity? Worse, blaming the person without fixing the root, underlying cause does not fix the problem: the same error is likely to be repeated by someone else.”

With this in mind let’s take a look at the ballot card Steve Harvey misunderstood:

Miss Universe 2015 Elimination Card.

It is immediately obvious that this card is poorly designed. In fact, upon first glance I would’ve likely made the same mistake that Steve did. Even if we ignore the poorly written copy– calling second place “1st Runner Up” feels like saying “first place loser”– the visual design leads a viewer to believes that Colombia is the winner. While attempting to use font size and alignment to show information hierarchy the design has fallen victim to the well-researched visual design phenomenon known as banner blindness. The misconception here is that the larger an item is the greater its perceived visual importance will be. Because the information has been split into two columns with the right-hand column center-aligned this text actually reads as less important, rather than more important.

Heatmaps from eyetracking studies: The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations. Green boxes were drawn on top of the images after the study to highlight the advertisements.

Banner blindness is a well-known concept in web design, defined as “a phenomenon where visitors to a website consciously or subconsciously ignore banner-like information, which can also be called ad blindness or banner noise.” It has been proven time and time again, in both web and print design– most notably in poorly designed ballots. The Nielsen Norman Group summed it up quite simply:

Fancy Formatting, Fancy Words = Looks Like a Promotion = Ignored

In one Rice University study researchers concluded that “One item separated visually from everything else on a web page may be completely ignored by web searchers, even by searchers who are deliberately searching for the information provided in that item. Be very careful about apply the guideline of increasing the visual distinction between “important” items and other items because it may actually make important items seem unimportant.” They warned that in any case “Any method that is created to make something stand out should be carefully tested with users who are specifically looking for that content to ensure that it does not cause banner blindness.”

P.S. It has also been pointed out on Reddit that the word “Philippines” on this card is printed precisely where a user would likely place their thumb. Come on now, people.

Follow me on Twitter.


HH Design is a community for students interested in the intersection between design and technology.

contribute

Show your support

Clapping shows how much you appreciated Josiah Tullis’s story.