Sticky Notes; a Web Designer’s Best Friend

For the best lessons in Web Development, sometimes we don’t need to look further than the lessons we learned in kindergarten. We have found that one of the best tools to communicate between developer and customer is a simple pen and a few pieces of paper.

A crucial part in the development and design of websites and applications is communication. Communication of ideas, concepts, design and user experience between the developers and clients increases the likelihood of satisfaction for the client and a quality product. Frequent demonstrations of working software can keep the project moving and focused in the right direction. Yet it can sometime be hard to narrow down exactly what the client wants for their site or application. Most projects start with a general idea and become more focused as the project moves along. Clients don’t realize what it is they prefer in terms of design and functionality until they see the working software. This development method is called Agile Development and is very flexible and adaptive to constant changes. However, it’s most effective when the project has a basis/example from which to work towards.  Think “like Facebook for [insert x]” or “similar to gmail.” But what if the idea is one of simple parameters and functions but no clearly defined user interface or implementation?  That is where Paper Prototyping has value.

Instead of working software to demonstrate after a week of development, Paper Prototyping is utilized at the beginning of a development cycle. This method asks the client to act as the user while the developers “drive” them through the interface. However, it’s not software that is used, instead it’s common paper items found in every office. Sometimes it’s as simple as a white piece of paper with a drawing of the website’s look. The best and more effective kinds use folders, note cards, note pads, and post-it notes to represent different functions on the page. To show you what I mean, let’s look at some prototyping for a site that might want to implement a User Management feature.

Most sites today have users create some form of account or profile. If you are looking to design a site with this function, maybe you don’t know exactly how it should look or what functions should be available. For this example, we’ll use a site who’s company is looking to sell products and or services. Let’s start with a mock-up of the homepage:

It’s a white piece of paper with a “To-Do List” paper note as the profile sign-in.  On the left hand side or two sticky notes used to represent possible functions or features on the page. These features may have been explicitly stated by the client, but in the case where it’s not, they are easily changeable.  Case in point, you can quickly demonstrate what the user would see if they had an invalid login.
Quick and Easy. As the user, you are asked to then make a selection by the developer. So let’s say your goal is to attract new users. One thing they will all have in common is to fill out information on a “Subscribe” page. So, the user clicks the “Sign-up/Subscribe” button (indicated in green writing in the picture above) and the current page is taken away and the “subscribe” page is presented.
All we have here is a manilla folder with some notes pages and writing in pen. The value comes from being able to demonstrate clearly what the page looks like and answer questions such as:  Is this function useful? Could we make this better? Do we want to expand on this? Should more data be provided during this process? Is it simple and easy to understand?

Those types of questions usually get answered later in the development process. Lots of times its for no other reason than the client “hadn’t thought about that”. We are web-developers and, more to the point, we are the guides for clients to get into the expansive world of possibilities known as the internet. Paper Prototyping allows everyone involved to start on the most direct path toward the final product.

Go to Part 2 where we use Paper Prototyping to demonstrate standard user management features for existing profiles.

Talk about us!