The Stack Overflow Inspired Knowledge Exchange Series
TOC Checkout the project homepage of this series to follow our journey from the creation of the famous StackOverFlow website.
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
This then leaves us in a position to answer the details of "what is a mock up good for"
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
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!
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!
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 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
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
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
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.
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
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
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.
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.
Please login to rate or to leave a comment.