Storyboards For Designing Mobile Apps

November 12, 2015 Arvind Padmanabhan

When it comes to mobile app design, two words always come up in any discussion among designers: storyboards and wireframes. Beginners are always confused between the two. I've developed responsive web apps in the past for which I've done detailed wireframes on pen and paper but I never understood storyboards... until today.

InMobi organizes monthly meetups that are open to the developer community. I had a chance to attend today's Bangalore meetup. The speaker, an experienced designer and consultant named Prashanth, spoke on the app development process. In particular, he informed us how important it is to sketch. Sketching is an essential skill needed to execute storyboards.


What I learnt at the InMobi inDecode Meetup

He then led us through a series of simple exercises on sketching. He made the point that AnyBody Can Draw (ABCD). In fact, storyboards are not made with the intention of creating masterpieces of art. They can be clumsy and crude. But do they convey ideas correctly? If they do, they are successful.

What exactly are storyboards? They are not, as some people believe, a snapshot of app screens, buttons and navigation links. These fall into wireframes. Storyboards operate at an earlier level. They set the scene, such as a traveller at an airport. They lay out the problem, such as not having a confirmed accommodation in a foreign country that presents a language barrier. They show actions and interactions between users and systems via the app. They show a final resolution where the desired result has been achieved, such as a confirmed bed for the next two nights and directions to get to the hotel.

Essentially, storyboards articulate the problem, including the settings and the actors. It describes an experience one desires, offering a solution to the problem. The burning question of course is, "Are storyboards really necessary when I can convey the same in words?" Well, it's an established fact that pictures are better communication tools than words, especially in this age where people demand instant information and understanding. Today's managers and customers prefer visualization than wordy reports.

As a designer, it's tempting to skip storyboards and jump directly to wireframes. After all, the entire idea is already inside my head. Why bother sketching it? The point is that a designer doesn't design for or design by himself. He designs for customers. Team members need to understand what's in the lead designer's mind. Storyboards help a lot in establishing a shared vision. It's also a tool that help stakeholders to collaborate. In fact, the deliberate action of sketching can help refine the idea.

The speaker gave us a few tips when making storyboards:

  • 3'' x 3'' sticky notes are handy for making storyboards. At a later stage, 3'' x 5'' notes can be handy for making mobile-sized screenshots.
  • Limit yourself to 6-8 panels to communicate one use case. The more panels you add, the more attached you can get to your storyboard.
  • Don't use captions. Instead using comment balloons.
  • Close with a realistic outcome.

After the meeting, I came back and googled for storyboards. With source URLs, I include below a couple of storyboards to give readers a sense of what they really are. I do hope that designers will take the trouble of making storyboards for their next project. I say "trouble" because that's what it may look like if you've never done it before. But once you get into the habit of doing storyboards, you might enjoy the process. You will never again start a project without doing storyboards. Happy sketching!

EXAMPLE 1:


Source: hfid.olin.edu

EXAMPLE 2:


Source: DEV.CIRKUS.CO.NZ

EXAMPLE 3:


Source: KHARRISON.INFO 

 

This blog was originally published on the Indian Engineering Design Forum by the author.

About the Author

Arvind Padmanabhan

Engineering Consultant at the Indian Engineering Design Forum (IEDF)

More Content by Arvind Padmanabhan
Previous Article
User- First, Second and Third!
User- First, Second and Third!

In today’s era of mobile convergence, the re-emergence of the user as the ultimate decision maker serves to...

Next Article
Introducing User Opt-In Video Ads on InMobi Exchange
Introducing User Opt-In Video Ads on InMobi Exchange

Attention, brand marketers! It’s the Holiday season and we are excited to present to you a way to spread ...