Sketching For Better Mobile Experiences

Advertisement

Mobile user experience design is maturing. One way to gauge this is to look at the tools at our disposal. Prototyping tools such as Balsamiq, Axure and Fireworks enable us to build wireframes and click-dummies, helping us to explain the targeted user experience. Cross-browser frameworks such as PhoneGap, Zurb Foundation and jQuery Mobile help us to create prototypes using the native languages of the Web: HTML, CSS and JavaScript.

Why? The Case For Sketching

We seem to be in a better position than ever to design great experiences in virtually no time. However, these tools come with a hidden cost: they tempt us to skip the key step necessary to creating a well-designed product — which is to take the time to understand the problem we are given.

That’s why I suggest to start using sketches to understand the problem and to come up with a concept before firing up your favorite tool.

Right now, you are probably thinking one of the following:

“We have a tight deadline and there is no time for doodling. We need to get started.”

“Designing in [insert your favorite tool] is faster by far. I need to get results quickly.”

“We need to present results to our [client or project partner or peers]. We cannot show them hand-drawn stuff.”

“Sorry, but I really can’t draw.”

Not only have I heard these objections a couple of times before, I’ve also said all of them myself.

Defining the Problem and the Solution

Sketching enables us to explore the problem space and define the solution space at the same time. It frames our current understanding of the problem, while also helping us to figure out possible solutions.

While we sketch out our thoughts, new ideas will emerge. The ambiguity and lack of detail in sketches foster new ideas. Here, ambiguity is a good thing, because we will automatically try to fill in the blanks in our heads. That’s what makes sketching “generative”: it captures the ideas we already have and sparks new ideas. As Bill Buxton says in Sketching User Experiences:

“Learning from sketches is based largely on the ambiguous nature of their representation. That is, they do not specify everything and lend themselves to, and encourage, various interpretations that were not consciously integrated into them by their creator.”

By sketching different solutions to a problem, we can explore them without immediately committing to one of them. This gives us new insight and raises new questions. Sketching is essentially a brainstorming exercise.

The “Cost” of Sketching

The fastest way to get something out of our heads is to grab a pen and a sheet of paper and quickly sketch it out. Trying to do the same in our favorite prototyping tool takes more time: We have to create a new project, decide on the right library to use, place our little rectangles on the canvas, draw little arrows connecting our little rectangles, rearrange everything a bit to make it look nice — and suddenly 30 minutes or more are gone.

If we don’t like what we see on a sheet of paper, we can just toss it in the bin and start over. Using our prototyping tool, however, makes throwing stuff away harder because of the time and effort we’ve spent creating it — even if the idea wasn’t a great one. Starting over is harder. Paper sketches, on the other hand, are cheap and fast.

Sketching Tools1
The fastest way to capture and evaluate a concept is to sketch it out.

Sketching as a Communication Tool

However worn out the saying is, a picture does say a thousand words. Sketching enables us to walk our peers and stakeholders through our current understanding of a project. We can use various visual representations to explain different aspects of the project (we’ll cover the most common ones in the next chapter). In The Back of the Napkin, Dan Roam says:

“Pictures can represent complex concepts and summarize vast sets of information in ways that are easy for us to see and understand, they are useful for clarifying and resolving problems of all sorts.”

Our peers will be able to point out gaps in our thought process and discuss possible solutions and alternatives with us. They will most likely understand our shorthand and be able to give us feedback on the details of our concept. Presenting our idea to others also allows us reflect on our concept; we see mistakes and can find better alternatives just by walking through it.

Sketching as a Collaboration Tool

Sketching is a powerful tool for involving stakeholders early on in the design process. The following chicken-egg problem is typical when defining the process: Stakeholders are not able to formulate a complete set of requirements before they have seen some visual representation of the solution, but we designers are reluctant to start working on a solution before we are sure that the requirements we have been given are stable — we want to avoid unnecessary revision, which would result in extra work.

A way out of this dilemma is to start sketching possible solutions in a collaborative workshop, such as a design studio session (see Will Evans’ article “Introduction to Design Studio Methodology2”). We can walk stakeholders through our concept (and alternatives) step by step and explain to them the impact of their requirements on the design.

Sketching also has a low barrier to entry, allowing non-designers to participate. (Whether you hand out pens to stakeholders is a matter of personal taste and of much debate. You’ll have to make up your own mind.)

Because sketches are rough and unfinished, giving feedback is also easier. Some people hold back upon seeing a pretty finished-looking version of a page because they think of all the work that must have surely gone into it. High-fidelity visuals also tend to distract people — instead of focusing on the concept, they are tempted to comment on the visual design or on minor details. Sketches keep them focused on the core concept.

The only thing you’ll need to overcome is your reluctance to show your unpolished work to others.

Sketching Is Not Drawing

A common misunderstanding is that your sketches have to be pretty. But interaction design is not art class. Your sketches don’t need to look good; they only have to convey your idea. They are supposed to spark discussion and generate ideas; they are unlikely to be framed on a wall. As long as you are able to draw boxes, arrows, circles and stick figures, you are good to go. As Joshua Brewer notes in “Sketch, Sketch, Sketch3”:

“The sketch is not the end goal. The end goal of the drawing process is what you learn while sketching. So don’t worry if you can’t sketch.”

Learning how to sketch is beyond the scope of this article, but look at the following presentations, article and book to get the basics:

How To Sketch

Now that I have (hopefully) convinced you that sketching should be a part of your workflow, let’s talk about what to sketch in a mobile project.

Divergent Sketching

In the beginning, you will want to capture different ideas for your mobile app or website. Start sketching different versions of a single key screen or parts of it. Your goal is twofold: to generate a lot of different ideas, and to explore and evaluate them — at the same time. The more ideas you come up with, the more options you will have to choose from later on. This process is often called “divergent sketching.”

A useful tool for this type of sketching is a multi-page template. It offers enough space to sketch six different versions on a single page, and it provides some guidance on the available screen space. By showing different ideas side by side, it makes comparing and discussing them later on easier.

A lot of templates are available online7 (I use Erik Loehfelm’s8 most often). Pick the one you like.

six main menu variants9
Wireframe variants for global navigation. (Large version10)

The screenshot above shows six different ideas for an app’s main menu (plus vivid proof that my sketches are not pretty). I don’t often come up with six versions (I like to tell myself that I am a structure-first person), but I do try to create at least three variants of a single key screen. Because this is brainstorming and you will want a lot of options to discuss later, quantity is your friend here.

If you happen to be short of ideas, browse some mobile UI galleries for inspiration (such as Inspired UI11, Pttrns12, Lovely UI13 and UI Parade14). They showcase solutions grouped by topic and feature (for example, main menus, chat windows). Include the things you like in your sketches, and mix them with your own ideas.

Make a habit of titling each sketch. This will make it easier to differentiate between them and refer to them later on. I add notes and annotations to explain the sketches and the thought processes behind them (such as strengths, weaknesses, trade-offs compared to other concepts, questions, new features, etc.). Labelling and dating the sheets are also a good practice.

Convergent Sketching

Once you have sketched multiple versions of a screen, pick the one that best solves the problem. Unfortunately, a single sketch will rarely check all of the boxes. In most cases, you will have to combine ideas or parts of ideas into a single winning concept. To do this, you will need to explore in more depth by making a more detailed sketch on a single page. Use the white space to annotate. Jot down all questions, new ideas, important or unclear areas, and things to discuss. This will help others to understand your thought process. This activity is often called “convergent sketching.”

For more information on divergent and convergent sketching, see Leah Buley’s presentation from FailCon 2010, “Good Design Faster15,” and Brandon Shauer’s article “Sketchboards: Discover Better + Faster UX Solutions16.”

Creating UI Flows

After boiling your ideas down to a set of key screens, the next step is to explore how they work together. For this, create a few UI flows (i.e. a series of key screens) that showcase how a user would use your solution to accomplish a task. UI flows highlight which interface elements are used (for example, which button is clicked or which gesture is used) and how the system responds (for example, with an animation, transition, pop-up dialog or new screen). They also show key screens in different states (for example, initially empty and then later filled with content).

You can visualize different outcomes within a UI flow (such as a list of search results versus an empty list). Your flow would then no longer be linear; different branches would show different outcomes. But try to limit the number of branches in a single UI flow. Each branch increases the complexity, making your flow harder to understand. It also makes them harder to explain.

A sample UI flow17
UI flows visualize how a user gets from A to B. (Large version18)

You don’t need to sketch all use cases; pick the ones that are important and will be used most. The Pareto principle19 offers a good rule of thumb: prototype the 20% of functionality that will be used 80% of the time.

I usually start sketching one of the key use cases to try to come up with a way to solve it. I will highlight the interactions on the screens and (usually) connect the screens with arrows. I’ll explain each step and label the key screens. As always, I annotate wildly.

For inspiration on how to sketch mobile screens and UI flows, look at Gisele Muller’s article “Inspiring UI Wireframe Sketches20”; MOObileFrames21, a blog that showcases mobile wireframe sketches; and Wireframes22, a website by Jakub Linowski. You can also use Jakub’s “Interactive Sketching Notation23” (PDF) in your UI flows.

Steps to Take

To give you some more context and to show you how the three activities above relate to each other, here are the steps of a typical sketching session:

  • List the information you have and what you want to capture.
  • Make a first set of sketches (such as variations of a key screen or an initial UI flow).
  • Review the sketches yourself.
    • What are the strength and weaknesses of each variant?
    • Are the UI elements and data consistent (i.e. the same elements are used for the same task)?
    • Do you show data the same way?
    • Are the interaction options clear?
  • Get some feedback from others. Start with peers and continue with potential users if possible.
    • What are their first impressions?
    • What do they like best? Why?
    • What do they dislike? Why?
    • What is not clear in your sketch?
    • What improvements have they suggested? Why did they suggest them?
  • Iterate on the concepts.
    • Can you combine different strengths of separate concepts into a new concept?
    • Can the sketches be clarified?
    • Can steps be reduced or simplified?
  • Review the results in light of the initial feedback.
    • Have new questions come up?
    • What insights have you gained?

As you can see, a lot of these are “Why?” questions. This is because sketching is about trying to understand the problem while simultaneously working towards a solution. Write down all of the questions that come up during sketching next to the sketches themselves. This will guide you towards the right concept.

Beyond Sketching

After you’ve created sketches of the key screens and the main uses cases, you will want to try out your concept live on a real phone. Apps such as Pop24 and Protosketch25 enable you to import pictures of sketches and turn them into a prototype. This very fast and low-fi method will give you a feel for the concept’s interaction. Both apps allow you to define clickable hotspots and page transitions, which make a prototype’s interaction more realistic.

Alternatively, import your screens into a more advanced tool such as Axure and build a prototype in there.

Whatever method you choose, your goal is to test the concepts quickly and with little effort on a real phone.

Take-Aways

Sketching helps you better understand the problem you are trying to solve and lets you visualize possible solutions. It is a fast and inexpensive way to brainstorm and to test out a lot of UI ideas before committing to one. Sketching speeds us the concept creation and iteration phase and makes it possible to get feedback early on, when changes are easy to make.

For your next sketching session, keep the following principles in mind. They will help to keep you on track:

  • Be lazy.
    Don’t try to reinvent the wheel. Use a template to guide your sketching.
  • Get inspired.
    Browse design pattern libraries and mobile UI galleries, and look at wireframe showcases. Take what you like, mix it with your own ideas, and come up with something new.
  • Stop at good enough.
    You sketches need to get your ideas across. Don’t get lost in (unimportant) details.
  • What would Pareto do?
    A small set of your solution’s features will be used the most. Focus on them. Which 20% of the solution will be used 80% of the time?
  • Be consistent.
    Use an existing sketching notation and/or develop your own. This will make your sketches reliable. Peers will understand your style and will need less time to look through the sketches to give feedback.
  • Annotate everything.
    During sketching, new questions, ideas and problems will pop up. Write them down; otherwise, they will get lost.
  • Be open.
    Make your sketches visible. Pin them on a wall, and always show them to others to get feedback.
  • When in doubt, sketch some more.
    If you are unsure about a solution, start sketching variations. List their pros and cons and get feedback to see what works best.

Happy sketching!

(al)

↑ Back to topShare on Twitter

Lennart Hennigs is a Senior Interaction Designer at Deutsche Telekom, where he designs for mobile and fixed-line user experiences. He has worked in the field for over ten years — beginning with classic usability engineering; he shifted his focus to conception and interaction design in 2003. Lennart studied Computer Science and Philosophy. He is active in the German Chapter of the UPA and when he is not busy commuting he writes about UX topics. He recently wrote an ebook about mobile prototyping with Axure RP.

  1. 1

    Nice article.

    I work for a firm that designs and builds native mobile apps exclusively. Sketching is a core feature of what we offer both on paper and on the whiteboards that cover the office for the reasons you give around speed and collaboration.

    It’s also great way to gauge your clients appetite and level of understanding. We have some clients for whom a sketch is enough to be going-on with. We also have clients who can’t grasp them as too abstract in which case we’ll shift to either a more sophisticated tool or go on to comps or production depending on the risks involved.

    A few years ago when I was heading-up a UX team in a large company, I bought folios containing grid pads, pencils, a Sharpie, Post-it notes and a small ruler. I handed them out to my team saying “This is your first prototyping tool”. That didn’t mean they were forbidden to use tools like Axure and Balsamiq, just forbidden to “start” with them. I felt they were TOO skilled with tools. It was giving clients and stakeholders the impression that way more work was going into the UX at that point than was truly the case. They would then churn-away on the deliverables tying to perfect them.

    The artifacts didn’t “look” dispensable”. It changed the perception about what was enough to move-on. Whether it’s on a whiteboard or a working demo in Axure, YES! These are all wireframes. Anything you can call a wireframe has to be recognizable to all as a low-risk design idea and a candidate for the trash-bin.

    Sketching may not be where you stop but it should be where you start.

    Cheers,

    0
    • 2

      Lennart Hennigs

      June 24, 2013 12:57 pm

      Adam, I really like your point about how sketches allow you to gauge your clients level of expertise.
      In terms of involvment, it took a while for our counterparts to get used to the fact that have to work with us and our scribbles before we delivered something “real” to them. But now they are quite happy since they are more actively involved in the creation process. Plus this allows them to see (intermediate) results much earlier.

      1
  2. 3

    I have never heard anything so true and useful. If you still want to retain a touch of technology, use Evernote’s Penultimate app, it’s brilliant. Or use their moleskin notebooks that allows you to capture and convert to digital images, it’s amazing stuff. For very early concepts, I use Magic White Board. It sticks onto walls using static and rolls out like paper. The very early concepts of http://airwalk design.com, the Pinterest for designers, was built this way!

    0
    • 4

      Lennart Hennigs

      June 24, 2013 12:48 pm

      Hey Daniel, thanks for mentioning the static foil, we use it mainly for whiteboarding.
      Another thing we can’t go without are large foam boards (e.g. Kappa graph) to collect our sketches and to combine them with other project-related material, like user research findings, etc. We have (at least one) board per project capturing the its current state. We use them to walk people through projects and to discuss and compare different aspects of a concept. Plus they are a conversation starter when people walk into our office.

      0
  3. 5

    Hi Lennart. Thanks for an awesome write up. Just wanted to add that the latest version of the Interactive Sketching Notation can be found over at http://www.linowski.ca/sketching

    Cheers,
    Jakub

    0
  4. 7

    stating the obvious…

    0
    • 8

      I know right, I thought this was a natural thing to do. How can you design if you have never drawn?

      0
      • 9

        Lennart Hennigs

        June 26, 2013 11:52 am

        I’ve actually worked with quite a few designers who’d directly start to design in Photoshop or Illustrator. That was one of my reasons for “stating the case” for sketching.

        0
    • 10

      It may be obvious to you, but this isn’t supposed to be just for the experts. There are plenty of us who are not designers first or are newbies trying to understand the design process better. I’m a developer first, but having a better understanding of the design process and engaging in those best practices helps me improve.

      Even in the most basic of tutorials or informational articles, you should be able to learn something or reinforce your basic knowledge foundation.

      0
  5. 11

    Sarfaraz Ansari

    June 24, 2013 9:06 pm

    am also afraid of showing my drawing to others. it encourage me to make sketch.
    thanks for such a wonderful article :-)

    0
    • 12

      Lennart Hennigs

      June 26, 2013 11:59 am

      You’re welcome. And trust me, mine are most likely worse. But they are always good enough to coney the message I try to get across.

      0
  6. 13

    I use Zurb’s Foundation for production also (as a base)… Would be a waste not to make use of something so good :p Just thought i would mention it, as it is described as a prototyping tool here. I cant be the only one who does this?

    0
  7. 15

    A client wanted sketches last week… for the first time in years. It really cut out the noise and we could focus on problem solving. Is there an app for iPad that you know of like POP or protosketch? I couldn’t find one… cheers!

    0
    • 16

      Lennart Hennigs

      June 26, 2013 11:54 am

      Not that I know of. But you can use a prototyping tool like Axure or JustinMind to create iPad app prototypes using pictures you took. I did that before Pop came out for two projects.

      0
      • 17

        You can try http://www.invisionapp.com/ it does the same thing as POP (mapping) but it’s browser based and it’s responsive. You can do an iPad demo easily from the browser but you need to take a photo of the sketch and upload it manually. I tried it for Android and works quite well.

        0
  8. 18

    Nathan Manousos

    June 25, 2013 3:26 pm

    I’ve gotta put in a plug for my iOS prototyping tool, Flinto. Great for prototyping with sketches.

    0
  9. 19

    I use Wacom Inkling for wireframing. This combines for me the advantages of sketching and digital wireframing. I also find it usefull to sketch some ideas together with the client in a brainstorm session. This way i get faster results.

    0
    • 20

      Lennart Hennigs

      June 26, 2013 11:57 am

      I haven’t tried that yet due to mixed reviews. But I’ll probably give it a spin. Thanks for the comment.

      0
    • 21

      I found it pretty annoying to work with the Inkling – draw, make sure it’s charged, copy the files – and I felt that is against the purpose of rapid prototyping… I’d say POP is probably the only digital tool that serves rapid prototyping’s scope.

      0
  10. 22

    Here’s my very little experience:
    http://log.pt/blog/2012/10/how-visual-mode-changed-my-life/

    Hope it will inspire someone to start sketching and visually communicate!

    0
  11. 24

    There’s a magic in using pencil and paper which facilitates innovation/creativity. It frees the mind, encourages play in all, and is the best way to communicate ideas within a group.

    Sketching is the foundation of visual thinking which is a critical step towards innovation. But it’s so easy to dismiss in favor of more complex tools. The right tool is always the simplest that’ll do the job.

    Great article :-)

    0
  12. 26

    The problem I see with this and many other articles about sketching is that they treat the sketching of interfaces as the first part of solving the UX problem. I’m not referring to the research and defining goals, in talking about understanding the structure of a solution, the steps involved etc.

    Trying to solve the UX through interfaces designs gets you into detail too quickly and can lead to great ‘design’ but terrible overall usability (something UX still has to cover). It can lead to inconsistency and high degrees of redundancy.

    The first ‘sketch’ should be of the task the application is carrying out to understand the steps, not screens, of an application or website. The best interface design in the world is pointless unless you’ve solved the overall task and information structure problems first.

    Solving them through interface sketching is what designers where doing before UX came along – it’s time to put some emphasis back on good usability. Build then test only gets you so far as it’s very hard to create a good website structure from the interface back.

    0
    • 27

      Lennart Hennigs

      June 30, 2013 1:48 am

      Hey Steward, I agree. In this article I focus on the “defining the solution” part of sketching. Initially I did include the “defining the problem” part but I had to take it out because the article would have been too lengthy.
      One way to start is to use the five models described by Beyer hand Holtzblatt in their book Contextual Design. Other (non-sketching) activities like the Mental Model diagrams are also a good starting point.

      0
  13. 28

    Completely agree with you! I am a graphics designer myself and most of the time I always do sketching, while doing brain storming sessions with the client to understand the problem, scope of work and identify various possible solutions. This is a quicker way to understand the requirements on whole.

    0
    • 29

      Lennart Hennigs

      July 10, 2013 9:47 pm

      Hey Alex, thanks.
      I also like that these sessions offer an opportunity to learn and understand the problem from the “Non-Designer” viewpoint which is needed to create a good solution.

      0
  14. 30

    I think the sketching first thing works better with UI design. It is not necessary with UX. The most important step of UX is to figure out the logic of the product and we could use not only sketching, but also some even more simple methods such as stickers.

    0
    • 31

      Lennart Hennigs

      July 10, 2013 9:44 pm

      Hey Joanna, thanks for you comment.
      For a broader scope (=UX) I often sketch the relation between different touchpoints and how the user’s journey looks like. These diagrams can provide the “big picture view” and also get me to think about the different aspects of the problem and the solution.

      0
  15. 32

    Matthew Schenker

    July 5, 2013 4:55 am

    Great article, and a subject I think about all the time. I am not a good sketcher at all, so I appreciate the section of your article aimed at those of us with lower skills in this area.

    I have found that the most important thing in the early stages is to focus on concepts, and only bring in design once that’s settled. In other wods, design emerges from core concepts and represents the best way to express those concepts. We should not start with design, then fit the concept into it. But in the early stages, concepts have holes, so the discussion should be fluid enough to experiment with ideas, drop an idea, try another, combine ideas.

    Along these lines, I have developed a system for the early stages of a project.

    In the very first run-through, I use what I call “word sketches.” I use a sheet of paper for each “major concept” behind the project, and on each sheet I then include the “sub-concepts” that belong with it. I use words only to describe both the literal visual requirements, as well as the meaning of the concept and the more subtle points the client hopes to communicate there. Surprisingly, the “major concepts” actually fall in line (most of the time) with what we think of as “pages.” I go through all the major and sub concepts, until I have a series of “word sketches.” This process lets the client and me focus, and we can communicate in a way everyone understands.

    With the “word sketches” done, it is amazing how naturally the major and sub concepts suggest the correct UI elements. We have a basis not just for certain elements, but their order, size, color, content, and more. When I am ready to present a visual design, the client knows why something is being used (or equally important, why I am not using something).

    I am just sharing the outline of this concept here. I have actually formalized the process with steps, guidelines, and questions for the client. I would be happy to hear from other about this, especially anyone who does something similar.

    0
  16. 33

    This is a great “how-to” summary for sketching prototypes. As a long-time web professional, this article is a good reminder to get back to basics. We (clients and designers) tend to jump into full blown mockups before we’ve considered the project needs. For most of the web sites I do, this hasn’t been an issue because they are quite similar in nature. However, when I recently started dabbling with mobile-first responsive design, it quickly became apparent that it wasn’t sufficient to do my typical process since we are essentially designing multiple layouts for one site. This article is a good reminder to take a step back.

    0
  17. 35

    Hi guys, I have a problem and I was wondering if you could help. We already made the prototypes and are now developing the design and I need a tool to take my design files and display them on the iphone – so instead of photographing sketches I need to actually use real design files without actually going through the “upload file” (or use dropbox) step which I think is a major waste of time.

    Do you happen to know such tools? Thank you :)

    0
    • 36

      Hello Lulu,
      you can mirror your files on a mobile, such as: xscope Mirror and LiveView for iOS, or the Android Design Preview.
      They will show a part of your screen on your mobile.

      0
  18. 37

    Excellent article! I found more detailed information on sketching a mobile design. Usually Sketch is an most useful tool that I have been used to engineer the design.

    Recently shared something similar to UI design of iPhone app.

    http://www.technogist.com/2013/05/smart-way-to-build-your-iphone-app.html

    This might inspire you.

    0
  19. 38

    Great article, so true and vey well explained!

    0
  20. 39

    It’s remind me of a design teacher who forced us to use pencil and paper before any other numeric tool. The link between the paper and the brain is much effective and freely than the binding use of keyboard, mouse and UI.

    Great article. Thank you.

    0
  21. 40

    Got a shopping list of pens and pencils you prefer to do all of your sketching with?

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top