Tutorial: Getting Familiar with the myBalsamiq tools for mocking up ideas. This tutorial is intended to give you a simple, structured way to begin using the mybaslsamiq mockup tools. The goal for the end of this tutorial is that you are comfortable enough with procedural mechanics illustrating ideas that you are off and running on your own. To start, login to the mybalsmiq site. For students at ASU, you should have received an invite to the site, and can login at: https://asu-‐games-‐impact.mybalsamiq.com/projects In this tutorial, you’re going to start by working off of the story If You Give a Mouse a Cookie, included at the end of this document. This text was selected because it is popular for introducing children to systems thinking and specifically cyclic systems with feedback loops. What that means is that it is a good object to render as system diagram. For the purposes of this tutorial we’re going to focus on basic usage of the tools, similar to what we did for the DinerDash game (mockup available here: http://goo.gl/2IVFN ) This means we’ll be focused on getting you comfortable with geometric shapes and arrows. Once you’ve got that in hand, balsamiq is a great tool for sharing ideas, and helping you think through sticky problems on your own. As you start mocking up more, you’ll begin to realize how ideas are incomplete or frequently have implicit assumptions that you’ll see how to make explicit, ultimately improving your communication of the ideas. ** Note: Throughout this tutorial mockup and prototype are used interchangeably. These terms refer to both individual mockups and a group of mockups treated as a single unit.
1. To begin, login to the site, and open your project. You should see something like this.
2. Click “Add New Mockup…” to get started. Your browser will start the application, and give you a new blank mockup to work with.
3. Start by opening the “Common” UI Library, and drag a “Geometric Shape” onto the canvas.
4. You’ll be prompted to enter text immediate. Type in “This is the first state,” and then click the canvas to stop editing. (Shortcut: You can type cmd-‐enter on OSX, or cntrl-‐enter on windows to stop editing).
5. You should now see the Property Inspector for the geometric shape. You will also notice that your shape doesn’t show all the text. Resize the shape so that the text fits.
6. Now that you’ve resized the shape, take a look at the inspector to see some of the options it provides. Decide what shape you want to use for this mockup, and then move on.
7. Now switch to the “Markup” UI Library, and find the “Arrow/Line” element. Add one to your canvas and position it so that it points to the first state. You should have something that looks like this now.
8. Notice we didn’t add any text to this arrow, but we want to indicate that this
is the starting point, so double-‐click the arrow to add a label “START”. These kinds of labels help “readers” of the mockup later.
9. Now that you’ve done a little work, you should make sure to save your
mockup so you don’t loose it. You’ll be prompted to name the mockup, and provide any notes for tracking the changes you’ve made. When saving,
balsamiq can also send email to project collaborators notifying them of changes—though that isn’t necessary this time, you might find it useful in the future.
10. At this point it is time to start playing. To really solidify the use of the tool,
start building the system captured in the If You Give a Mouse a Cookie story. Try playing with representations, and find what works for you. The purpose is to think about the representation, and how you would communicate a system to yourself and others, so there is no substitute for just doing it. Make sure you get at least 7 steps (states) in your mockup, with connections, and complete the cycle. You may abbreviate the story if you like once you feel you have a handle on the tool use.
11. When you’re done with your work, save, and then close the mockup (The “Close” Button is next to “Save”). You’ll be returned to the project view.
12. From this screen you can download the entire project as a zip file, or export
to a PDF. But read on …
13. For showing your work in your blog/papers, you may want to just grab a
single mockup. To do that, click the specific mockup you want to download. On the next screen you’ll be able to download the image directly to use as needed.
There is a lot that can be done with prototyping tools like balsamiq. Think of this as an opportunity for learning how to develop ideas, teach others, and make your work life better. As a side note, being able to communicate ideas visually like this can pay thousands of dollars an hour for many consultants in software, policy, and business fields. This really is about building a valuable skill for your future. Balsamiq.com has a set of tutorials that you may find useful if you’d like to advance your skills: http://support.balsamiq.com/customer/portal/topics/49503-‐tutorials/articles
If you give a Mouse a Cookie By Laura Joffe Numeroff A video reading of this book is available at http://www.youtube.com/watch?v=YdA_HdYo2NU (4:26) if you want to see the original. This transcription provides the book text with one line per page. In your mockup you are encouraged to represent the story as a system that makes sense to you, not as the text is written. Think of your mockup as answering the question, “What is happening in the story?”
1. If you give a mouse a cookie, 2. He’s going to ask for a glass of milk. 3. When you give him the milk, 4. He’ll probably ask you for a straw. 5. When he’s finished, he’ll ask for a napkin. 6. Then he’ll want to look in a mirror to make sure he doesn’t have a milk
mustache. 7. When he looks into the mirror, he might notice his hair needs a trim. So he’ll
probably ask for a pair of nail scissors. 8. When he’s finished giving himself a trim, he’ll want a broom to sweep up.
He‘ll start sweeping. 9. He might get carried away and sweep every room in the house. 10. He may even end up washing the floors as well. 11. When he’s done, he’ll probably want to take a nap. 12. You’ll have to fix up a little box for him with a blanket and a pillow. 13. He’ll crawl in, make himself comfortable and fluff that pillow a few times.
He’ll probably ask you to read him a story. 14. So you’ll read to him from one of your books and he’ll ask to see the pictures. 15. When he looks at the pictures, he’ll get so excited he’ll want to draw one of
his own. He’ll ask for paper and crayons. 16. He’ll draw a picture. 17. When the picture is finished, 18. He’ll want to sign his name 19. with a pen. 20. Then he’ll want to hang his picture on your refrigerator. Which means he’ll
need 21. Scotch tape. 22. He’ll hang up his drawing and stand back to look at it. Looking at the
refrigerator will remind him that 23. He’s thirsty. 24. So… 25. He’ll ask for a glass of milk. 26. And chances are that if he asks for a glass of milk, 27. He’s going to want a cookie to go with it.