Click here to Skip to main content
Click here to Skip to main content

Create Screen Prototypes For Clear Software Requirements

, 26 May 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
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. Find out how to properly use screen prototypes to avoid this trap, while having fun in the process.

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

  • 27th May, 2006: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

ijese
Web Developer
Croatia Croatia
Igor Jese works in software development since early 1990s, with emphasis on software requirements and development methodology. He is a certified Software Requirements Expert and Project Management Professional, and also the author of several popular tools, including Mockup Screens tool for creating quick GUI prototypes and Simple Project ToDo for easy tracking of small software projects.

Comments and Discussions

 
GeneralSimple and to the point PinmemberEvoluteur26-Apr-10 14:35 
GeneralGUI development PinmemberJun Du27-May-06 10:23 
AnswerRe: GUI development Pinmemberijese27-May-06 11:16 
GeneralRe: GUI development PinmemberJun Du27-May-06 11:38 
GeneralStoryboarding [modified] PinprotectorMarc Clifton27-May-06 3:04 
That's what it's called. A very useful technique, even if done on paper. I tend to find paper is a LOT faster for drawing out ideas and playing with UI elements, flow between UI's, and interactions between the UI, business, data, and other layers. Storyboarding is not just for UI's (but then it's usually called flowcharting).
 
Agile methods, for dealing with requirements, design, and implementation iterations, formalizes storyboarding.
 
Marc
 
Pensieve
Some people believe what the bible says. Literally. At least [with Wikipedia] you have the chance to correct the wiki -- Jörgen Sigvardsson
 
-- modified at 8:04 Saturday 27th May, 2006
GeneralRe: Storyboarding [modified] PinmemberAnna-Jayne Metcalfe27-May-06 5:15 
GeneralRe: Storyboarding [modified] Pinmemberijese27-May-06 6:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411023.1 | Last Updated 27 May 2006
Article Copyright 2006 by ijese
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid