Storyboards for Designing Mobile Apps
What I Learnt at Today's InMobi Bangalore Meetup
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.
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: http://hfid.olin.edu/sa2012/s_engr3220-trojan/RORCopies/images/NeedAnalysis/storyboard_foursquare.jpg?1317271700
Example 2: http://dev.cirkus.co.nz/wp-content/uploads/2015/03/Airbnb_Boards3page.jpg
Example 3: http://kharrison.info/blog/wp-content/uploads/2013/09/7_storyboard1_scan2.jpg
About the Author
Arvind Padmanabhan graduated from the National University of Singapore with a master’s degree in electrical engineering. With more than fifteen years of experience, he has worked extensively on various wireless technologies including DECT, WCDMA, HSPA, WiMAX and LTE. He is passionate about tech blogging, training and supporting early stage Indian start-ups. He is a founder member of two non-profit community platforms: IEDF and Devopedia. In 2013, he published a book on the history of digital technology: http://theinfinitebit.wordpress.com.