Storytelling for UI design: Taking a leaf out of comic books

Nothing engages people better than good storytelling. And web design has always looked to the real world to better digital experiences. Though it didn’t happen straight away, someone finally compared the screen to a printed book and pointed out that font sizes on the web were too small.

Another real world source of guidances, which has been mostly overlooked, is comic books. In the 80+ years that the comic books industry has existed, artists have developed unique visual techniques to effectively tell stories like no other medium. I realised early on that I could apply a lot of these storytelling techniques to my own design.

On the surface, you could say the similarities between a user interface and a comic page are very apparent. Both are constrained by a series of boxes. Yet, even beautifully designed interfaces can cause confusion and struggle to keep the user’s attention. Whereas, comic creators have mastered the art of keeping the reader turning the page without skipping a panel.

…or as Will Eisner puts it attention and retention.

There are many, many cross-over techniques in both these columns, I have chosen to focus on two in each column: Imagery, Symbolism, Flow and Grouping.

A skilled comics creator is very good at creating empathy, even in a single image. Like this one by comic book legend, Will Eisner. Composition, colour, body language are all carefully considered to convey narrative and emotion.

Compare it to this image, which does not commit to a single emotion. It is vague and therefore does not communicate nor engage the viewer. Imagery is the single most powerful tool for conveying a great deal instantly. It can grab users attentions, incite a feeling and prepare them for the experience ahead. Using generic imagery, such as this, throws all that opportunity away.

Comic books are rife with symbolism. Speech, thought and sound each have accompanying symbols. Here Scott McCloud. Explores the idea of the further away from reality a thing is represented, the more it resonates with a wider audience.

In ‘Maus’, a graphic novel which recounts the experiences of a Holocaust survivor, writer and artist Art Spiegelman symbolised all Jews as mice, Germans as cats, and Poles as pigs. He chose to use the analogy of ‘cat and mouse’ due to it inherited universal meaning. Had he used any other animals the message may not have resonated as it did.

Breaking elements down to their most simple, yet keeping them readable, is no easy task. Early days of user interface relied heavily skeuomorphic Design to make the transition from physical object to representation easier. Now, years on, UI has developed its own design language and set of symbols. A rectangle with curved edges is often recognised as a button. Two links of a chain mean URL link. Yet, a chain in any other context carries many negative connotations.

As we further the evolution of UI symbolism, we should consider what we are representing, what pre-existing meaning it has and whether it will resonate.

Comic artists have a ton of techniques to guide the reader’s eye and controlling the reader’s flow through the narrative. These include panel size and position, content and sequencing.

If you break the reader’s flow, due to a confusing panel layout, even for a second, they are taken out of the story and experience. On the other hand, when flow is carefully considered, a comic book reader will be engaged from beginning to end.

For many websites and apps, flow is not considered. This is a common landing page sight, too much information dumped in the smallest amount of space. With the exception of the central image, this page has a weak hierarchy, with no guidance of where to look next.

Flow is important. Controlling the reader’s eye and ordering the content correctly leads to a fuller narrative and a more fulfilling experience.

In essence, comic art is all about grouping images. Grouped images become greater than the sum of their parts. In this example, If one of these panels were removed, or more added in, it would either change the meaning or remove it completely. For any sequence, comic artists understand which images to keep, and which to remove, to control reader’s reaction.

Grouping in UI can create equal clarity and meaning. In this example, the top row contains three options relating to the user’s account (Notifications, Profile, Settings). In the second there are three random options (Search, Print, Settings).

In the first example, it won’t take a user long to associate this section for account settings. And look there for all their account needs. However in the second example, a user cannot make such connection, making them less important to remember.

These are some of the takeaways to grab user attention and keep their retention.

I’ll leave you another quote from Will Eisner, to remind you that every problem has a solution.

SWC Fonts

A few theme users have been experiencing font issues. Where their selected fonts are not showing in the theme editor nor the live site.

To avoid this issue, I decided to slightly modify the theme to use the Tumblr font feature, with an option to use Google fonts.

You can download the amended theme from here:
https://github.com/geoneo1/SimpleWebcomicTheme/blob/Tumblr-Fonts/theme/webcomic_theme_4.1.html

Key changes you should know:

  • The site title (if you are not using an image), is now controlled by ‘Title font’ and ‘Title color’ in the ‘Appearance options’
  • Heading and Body font options are in the ‘Theme options’ just below ‘Footer text’ color
  • To add any Google font, simply put the font name in the ‘Google Web Font name’ field.
  • Using Google fonts will override the Heading and Body font options

Hope that helps!