Introduction

In the last article we discussed many aspects of what should be defined prior to creating a mock up. This included the definition of product goals, client goals, design, and SEO. Obviously there are many other aspects that one might want to define when working on a project that is not directly yours so that you might align yourself with your clients. In our case we are mostly cloning an existing product which helps remove some, but not all, of the prep work.

In this article we will take a look at what a mock up is good for. We will discuss the definition of usability, getting client sign off, streamlining the specification process, and improving client collaboration. We will then take a look at a list of some of the tools that are out there to use for creating a mock up, some more complex than others. And finally we will discuss the usage of the latest edition of Expression Blend 3 and SketchFlow.

What is a mock up good for?

Having discussed the various aspects of what should be done prior to sitting down to create a mock up, we can now take a look at why a mock up is needed. I know many people that just hear about a project and sit down and start coding away. These sorts of people are generally from the camp that believes that the app will need to be rewritten at least 3 times any ways so why bother planning up front? While I agree that big design up front (BDUF) is generally a waste of time with regards to 90% of software projects (as requirements change the second they are written down), I believe that there should be at least some thought into the final product.

When it comes to creating something for someone else it is very important that the person that has the vision and the person that is creating that vision should have their minds aligned. This alignment process can most easily be performed by creating something that both users can touch and play with until they come to a point where they both envision the same product. A mock up can help you achieve this alignment.

The mock up process should generally first focus on how things work, where buttons and links live, where important things should be, and then how things look. The functionality of an application is more easily seen and agreed upon from many different people's points of view. How things should look is generally more of a grey area when trying to make minds meet in the middle. The concept of what looks good to one man is often totally different to someone else. And the polish of a button can generally be worked on while someone is coding what sits behind that button. They can be created separate from one another!

This then leaves us in a position to answer the details of "what is a mock up good for" anyhow?

Improve usability

The simple idea behind usability is the concept of how user friendly your application is to the user of the application. A long definition would come in the form defining other terms that make up what usability is. Learnability: how easy is it for the first time user to get around and use your application for the first time? Efficiency: how easy is it for a trained user to get around in your application and use it on a regular basis? Memorability: how easy is your application to use for a user that has not been actively involved in the use of your application? Errors: how many errors do your users make in the application and how easy is it to recover from those errors? Satisfaction: how pleasant is it to use your application?

All of these concepts are very important to consider as you build out each feature. If a feature is easy learn how to use but requires 5 steps when 2 would do then you have satisfied one aspect (learnability) of usability but failed at another (satisfaction). All aspects are equally important!

How does this relate to your mock up? By creating a fairly detailed mock up you can have a fully functioning, navigable set of screens, that pretend to demonstrate how clicking on a button might feel, how moving from one page to another might work, or how many steps it takes to complete a process. You can see how a forms layout might make the collection of data easy or difficult. You can get a feeling for how many steps is enough in your registration process. All of this can be determined in a mock up that doesn't cost nearly as much as the actual coding of a working prototype!

Get the client sign off early

You might have had the chance to work with a client or company that says "make me an ABC". Once you have created that ABC, the client takes a look at what you created and promptly states, "but I asked you to make me an XYZ!!" This type of scenario is easily addressed by creating a complex set of documentation, only communicating by way of email, and all other forms of getting the requirements in writing. Or you can create a mock up that demonstrates what you intend to make with some notes here and there and quickly collaborate to a state of agreement. This working mock up can then act as a contract between you and the client.

Streamline specification writing

This point is similar to the point made above but with a slight difference. This particular aspect is addressed in the same way in that it allows you to side step an overly complex documentation process. This is another reference to big design up front which we generally like to avoid when building software in that the requirements for an application change as fast as they are written down. For applications that aren’t too complex, aren’t for a financial industry, or for engineering purposes, we can usually substitute a working mock up in place of a stack of paper documentation.

Improved client collaboration

Trying to get your point across about how a certain feature works in the written word can at times be very difficult when relaying the concepts to non-technical individuals. Often times you might supplement your written requirements with drawings of what you are trying to explain. These drawings might come in the form of flow charts, activity diagrams, sequence diagrams, and many other ways of visually displaying an idea. You can greatly simplify this process by removing these types of diagrams when from your clients view and instead create a working mock up. When touching something it is much easier to see if the way it works is the way it is supposed to work. Reading about a feature frequently does nothing for a non-technical person.

What tools are out there for this task?

There are obviously many ways that one can create a mock up for you and your client to look over. I will describe the various tools that I have used over the years in a semi chronological order. Oddly enough the tools and techniques got better over time so our list will go from a sort of best to worst.

Pencil and Napkin

I know I know. This sounds lame. But you would be surprised to learn that a lot gets done on a pencil and napkin. Don’t over look this. While I would not want to commit to a project based on this form of a mock up, it sure can get you business!

Excel

Back in the days of Visual Basic and VBA, Excel was (and still is) a powerful way to create working mock ups. You can easily add bits of script to a button here or there to create a navigable working mock up. This is about the extent of Excels benefit over the Napkin!

Power Point

Power Point is chalk full of features that make the creation of a mock up fairly easy and functional. It is a great way to knock something out quickly but lacks in manageability aspects for a larger and more complex mock up.

Fireworks

Given that Fireworks will actually let you build real web sites this is obviously a good and powerful possibility with the capability to manage large and complex mock ups. However, what makes it good also tends to be a drawback. You don’t want your mock up to be so high fidelity that the viewer of the mock up will get hung up on pixel placement and exact hex code values. I didn’t use this for very long but thought it was worth an honorable mention.

Photoshop

Photoshop is another neat tool to quickly toss together a mock up. The upside here is that you have total control over the look and feel of your mock up. The downside is that you can't really create a navigable working mock up. This means that people can see what the end product might look like but they can't see how the end product might physically work. Also, this tool has a steep learning curve that is impenetrable to most developers.

Balsamiq Mockups

I have a high level of respect for this product and tend to use this more often than anything else. This particular tool is absolutely wonderful in every way and I have no complaints at all. This was my primary tool for creating mock ups.

Others?

Of course there are many other mock up tools out there. I found a list of seven other tools (which also included Balsamiq Mockups as its favorite). These seven included Denim, Protoshare, The Pencil Project, Serena Prototype Composer, Caretta GUI Design Studio v3, Templatr, and Balsamiq Mockups. This list and individual reviews are here.

Why did I choose SketchFlow?

If I enjoy Balsamiq Mockups so much then why did I choose to write about and use SketchFlow instead of Balsamiq Mockups? The short story is simply that I watched this video and fell in love with SketchFlow immediately!

http://videos.visitmix.com/MIX09/C01F

With this application you can quickly define the sitemap of your site. That is, you can define each page and how it links from one page to the next. With this foundation in place you can then define some rudimentary navigation aspects to start linking your pages in more specific ways. Then comes the magic - you can hit F5 and launch a Silverlight application that contains your working mock up.

Once you have navigation working you can then start to define each pages look and feel (the wireframe). And at that point, to a large degree, you have a working mock up. Obviously you can add a lot more detail into the mock up. Just make sure that you only add as much detail as required by your collaboration needs.

Summary

In this article we took a look at what a mock up is good for. We then discussed the definition of usability, getting client sign off, streamlining the specification process, and improving client collaboration. Next we took a look at a list of some of the tools that are out there to use for creating a mock up, some more complex than others. And finally we will discussed the usage of the latest edition of Expression Blend 3 and SketchFlow and why it was chosen above all the others.

In the next article we will create our first SketchFlow application. We will then dig through the current version of StackOverflow and document all of the important aspects of that site (layout, navigation, workflow, and useability). We will then implement a working mock up that directly resembles StackOverflow which you will be able to play with when you are done reading this.

About Andrew Siemer

I am a 33 year old, ex-Army Ranger, father of 6, geeky software engineer that loves to code, teach, and write. In my spare time (ha!) I like playing with my 6 kids, horses, and various other animals. This author has published 29 articles on DotNetSlackers. View other articles or the complete profile here.