Tuesday, June 28, 2016

How the Humble Speech Bubble Will Transform Our Future UIs

Last week, I ran a simple experiment. I handed my friend a piece of paper and a pencil and told him to draw two people.

He obligingly sketched some stick figures.

“Okay,” I said. “Now draw the first person telling the second person to walk the dog.”

My friend immediately outlined a speech bubble above the head of the left figure and wrote in big letters, “Go walk the dog!”

As I had hypothesized, his go-to method for showing conversation was a speech balloon. But what if we didn't have this default? It would be surprisingly tricky to depict dialogue–you could add it somewhere to the picture, maybe as a caption or hovering in the air–but then it wouldn't be clear who was saying what to whom.

Turns out, this humble icon is actually pretty important in design. Let's dive into the speech bubble's origins, then explore how it's used today.

The Invention of the Speech Bubble

When you think of "modern inventions," you probably don't think of speech bubbles. However, these spherical symbols are actually a far more recent invention than guns, microscopes and telescopes, and even the steam pump.

Before artists had speech bubbles, they used bandelores. Picture a long, unfurling rectangle filled with text extending from someone's mouth. Yeah, not pretty.

Bernhard Strigel - 1506
Painting: Bernhard Strigel - 1506

As Independent writer Rhodri Marson comments, They "emerged incongruously from people's mouths, looking a bit like massive supermarket till receipts and about as difficult to read."

Bandelores were en vogue into the 18th and 19th centuries; in fact, the leading caricaturists of the time used them to satirize Napoleon, Nelson, and the royal family. But as artists realized these extended scrolls were hard to read, they began moving to other conventions.

Extract for 'The Yellow Kid' comic strip - 1895 to 1898

When the Yellow Kid (which historians consider to be the first comic strip) was published in the New York Journal in 1895, its characters' words appeared on their chests. However, by 1896, they were floating above their heads in balloons. The speech bubble had been born.

These days, it's almost impossible to pick up a comic book and not find speech bubbles. But thanks to their universal association with communication, they've spread far beyond their paper origins.

Why Were Speech Bubbles a Hit?

The cause of the speech bubble's enduring popularity isn't self-evident. First, if you look at the vast majority of universal icons, they bear a close resemblance to their "real-life" counterparts: take the envelope icon, which typically stands for "message," or the trash can icon, which nearly always means "delete."

The speech bubble, on the other hand, doesn't look like anything we'd recognize in our normal existence-probably because "speech" doesn't have a real-world analog we can see or touch.

Plus, usability research shows that even the most common, seemingly straightforward icons (like the heart, the clock, and the bookmark) are frequently misunderstood.

So, how did the speech bubble not only survive in design–but thrive? I have a theory.

First, after the Yellow Kid, speech bubbles became ubiquitous in comic books. After all, they're infinitely useful: artists use them to attribute quotes to specific figures, show the sequence of dialogue and even portray how characters are speaking.Different modes of speech bubbles

And comic books were incredibly popular during the twentieth century. Men, women, boys, and girls of all different backgrounds, classes, and ages read them, not just little kids. Consequently, everyone grew to recognize the meaning of the bubble.

The shape of the speech balloon also played (and continues to play) a role. We find circular shapes appealing on a subsconscious level: they feel warm, friendly, and natural. In addition, rings usually suggest unity and relationships.

So, every time you see a speech bubble, you're hit with a wave of positive associations. You're also subtly reminded of communities–which, if you think about it, makes a speech bubble the ideal symbol for a communication method.

Continue reading %How the Humble Speech Bubble Will Transform Our Future UIs%


by Aja Frost via SitePoint

No comments:

Post a Comment