This week we will examine how to avoid the number one enemy of web developers - scope creep. Last week we looked at the importance of creating a sensible navigation structure or "sitemap". But more planning is necessary before work on the website can begin. If you were building a house, all you would have at this stage is a list of your desired rooms and inclusions. The next stage is to flesh out your ideas, possibly with the help of a professional, so you can produce a blueprint. Building websites is the same and this article explains the importance of creating a quick mockup.
The website being built in this case study is for the Rotary Club of Sydney and I thank them for their permission to share this information with you. Although building websites using Joomla can be a much faster process than using traditional tools, there are still many hours of work. A huge amount of time can be lost if a client changes their mind on some aspect part-way through the project. This phenomenon is known as "scope creep" and it can easily be minimised or avoided if you follow three steps:
1. The client needs to be educated. Most people don't understand the amount of work involved in changing a site layout after the page has been coded. Little changes here and there MIGHT be acceptable but these small changes quickly add up.
2. The client needs to "sign off" at pre-determined stages. That way they have a better understanding that going back will cost them time and money.
3. The developer should create a rough version of the site first so the client knows from the outset what they will receive.
There are a few tools to help create a rough version. For many developers, nothing beats paper and pencil. It's cheap and fast, but changing elements on a page can get tricky.
You could use commercial software such as Visio or Smartdraw. There are also good open source solutions including Draw by OpenOffice and Drawings in Google Docs.
In this case I am using "rapid prototype" software. This is the best solution for developers as it not only displays a "wireframe" of each page, but also provides a certain amount of functionality. These are quick to assemble and making changes at this stage is a lot easier than after the site has been built. Have a look at the one I have started.
Some points to note:
- The links in the top drop-down menu can be active so you can easily test where they go. In this example, you can try "About the Club - History".
- Clicking the yellow note paper icons displays further information about the element. Where applicable, it is helpful to include the name of the person responsible for creating the content for that element.
- There is no design or content at this stage. The objective is to agree on which elements will appear on each page. Introducing design and content too early tends to be unhelpful as it shifts the focus to the next stage too early.
Now unless you're a developer doing this all the time, there is no need to spend a cent on software. You can achieve a similar result, just using a word processor or a piece of paper. However, for those interested to know what I used for this example, have a look at Axure. Other options are Mockingbird and Balsamic Mockups.
It will end up taking about 3 hours to complete this prototype which might seem like a waste of time. But my experience and that of many web developers, is that this is far less time than would be spent making eventual changes that occur due to scope creep.
Next week we will consider various design options.
