Create Screen Prototypes For Clear Software Requirements

Introduction

I'm in software development for 15 years and I can tell you one thing for sure: misunderstandings are costly in software development. If you are not careful, you could find yourself aiming at the moving target or even end up building the application nobody needs or wants. I'll show you how to properly apply screen prototypes and avoid this trap, while having fun in the process.

There are many tools commonly used for software prototypes and GUI prototyping. Most of them lack in speed and ease of use of paper sketches. On the other hand, you can't maintain paper sketches, so there is no easy solution. Pick your tool, but focus on the real problem: to quickly engineer clear requirements for a software application. Start with these five steps as a basic "process", experiment and find what works for you.

1. Recognize Scenarios To Build A Wireframe for Requirements

Think what the users want from your application. Recognize scenarios that people will use most often and don't aim for perfection. Try to work together with your customer. If this works out fine, continue teamed up this way: it's very effective. More probable though, you'll have difficulties so don't push further - involve the customer where it counts the most, with screen prototypes you'll propose later.

2. Sketch Screen Prototypes For Important Scenarios

Decide which scenario is the most important and then sketch screens for it. Focus on speed, not on design or perfection. Fill screens with data that will provoke reaction. Remember what Wikipedia says on software prototyping:

"[Prototyping] is not a tool to prove that we are right. It is a tool to show us where we are wrong."

Repeat this for the next most important scenario and the next one. Use screens you have already sketched. Choose two or three scenarios you want to discuss with the customer. Don't decide on too many or you'll get poor feedback.

Before the workshop, skim through scenarios yourself, they are your “static prototype”. Mark places where you have questions or want to emphasize something, and write down notes. Discuss scenarios on screen, in your web browser or over a printed hard-copy - it doesn't really matter, just be very careful to avoid the conception that these are screens of the real computer program.

Of course, the same process applies to web pages and web application prototypes. Just remember to have a few predefined dummy pictures handy, it really speed things up if you don't have to worry about visual details at this point.

3. Discuss the Requirements Implied By Screen Prototypes

In the workshop with the customer, present your ideas for each screen: what particular elements mean and why they are there, what happens when user clicks a button, etc. Determine for each piece of data where it come from. For example if the table has a “Date” column, which date is it: the creation date, date of the last update or something entirely different. These are real software requirements, nail them. Pay special attention to data which has to be calculated or comes from other systems.

Be prepared to listen, and get the customer to do the talking. Your goal is to get feedback, just moderate a bit to stay on the topic and always get back to screen prototypes.

4. Improve Screen Prototypes with New Requirements

When you get the feedback, improve your screen prototypes and requirements accordingly, and always send them to the customer for confirmation. If you got through to the customer, her mind could still be processing those screen prototypes and could come up with quite a few surprises.

5. Specify Requirements To Complement the GUI Prototype

When a scenario is finished, invest five more minutes and "empty your head". Go through screen prototypes and document screens, one by one. Focus on getting everything on paper as it comes to mind. Don't analyse or structure anything, let the associations flow and just catch quick notes until you are finished. Only then apply some minimal structure. Make it a rule that you don't do anything that doesn't improve the information. In this two-stage manner, you will be able to do all this extremely fast. One particular way is to print your screens and write notes on the paper copy. Then copy these same screens to Microsoft Word and type the notes below relevant screens, structuring them as you go.

Conclusion

And that's it. When you are finished, you will have a large part of both software requirements and user interface specifications. For smaller applications, that might even be all you'll ever need.

This article doesn't cover everything about GUI prototyping, and I had to avoid many important aspects of software requirements discipline. But it is effective and you'll find this particular approach very rewarding: I surely enjoy my work better this way. In short, experiment, find what works for you and have fun!

History

• 27^th May, 2006: Initial post