Building a Web Application: Prototyping
This page is outdated and some links no longer work. Sorry.
In creating your prototype, you gain insight on what the final product will actually look like. You can eliminate problems before you’ve gotten too deep into the programming to turn back or need to implement some kludgy fix.
In developing my application, there are three components to the prototype development that I’ll be using:
- Visual Design
- HTML Prototype
- Usability Testing
The visual design stage is where the fun is. You establish your layout, group elements together and really get a sense for how your application is going to work. I use a graphic design application such as Photoshop or Fireworks. You’ll be able to easily add new elements, resize, rotate and whatever you need to lay things out.
Take one of the pages from your application flow and start putting in all the elements that belong on the page. Don’t worry about where they need to be at first. Just make sure you don’t miss anything that needs to be on the page. Once everything is on the page, start grouping related elements together.
Give greater prominence to elements or tasks that are more important and minimize or hide elements that are less important. Prominence can be expressed in various ways such as size, colour, or positioning. More important elements could be larger and higher on the page whereas less important elements would be smaller and using more muted colours.
Take a look at the HTML prototype for an edit page of the CMS. Visually, elements have been divided into sections. The most prominent item, the task at hand, is in a larger font and appears at the top of the white box. Less relevant information to the task at hand appears outside the white box.
37signals (who developed Basecamp) has a great article that goes into some detail on the use of patterns in web design. It’s a more structured process than what I go through. In the end, it’s best to map things out as deeply as you need to get a greater understanding of the application and how it will best address the needs of your users.
Once you’ve developed the visual design for the application, it’s time to build the HTML prototype. Why not just jump into the coding at this point? An HTML implementation of your design will help point out possible problems with your interface design. For example, what happens when users resize their font or the size of their browser window? How will the design look across multiple browsers? You may find something that doesn’t quite work right and you’ll have to go back to the design stage to redo certain elements.
On any sized project, it’s a good idea to do usability testing. It could be showing it to your co-worker, your team, your spouse or your friend. It doesn’t have to be a formal exercise with user groups and independent consultants. It’s also a good idea to show the prototype to the type of person you expect to use your application or people who have used applications like yours. Their input can be invaluable and can help determine if your design will work or not.
At what stage should you do usability testing? Always! Do it during the visual design, during the HTML prototyping and even during development. The feedback you receive can be indispensable.
Where am I now?
You can see the feature list that I talked about in the last article, some initial screenshots that I developed as part of my visual design stage and the current version of HTML prototypes.
You'll notice that the design changed from the visual design stage and the HTML prototype. There are two reasons for this. The first, a friend developed the logo for the application and therefore needed to integrate the new logo into the design. The second reason is from my informal usability process. The interface seemed overloaded with information. So, items were rearranged, simplified, or removed.
I have a ways to go yet on the prototyping phase of the application but I will continue to post on my progress and hopefully get your input as I move forward.
Check out the latest changes on the design and the program flow. Up next is Database Design.
It's all looking very cool so far - I can't wait to see how things progress :-)
Great article and very good work till now.
One question from me. Which technologies and programming skills are you using for this project?
Miha: I'll be delving into technologies and programming languages probably next week or the week after. Next up in the series will be database design. As well, I'll probably go into some further explanation of the design choices made in the HTML prototype.
At this very moment, I haven't made a decision which language and platform to develop in.
I've found that the prototype is an excellent way to communicate with the client what it is you're going to build for them, and to get their input on how they think it could be better. People will not read functional specifications, but they'll interact with a prototype.
Our team builds the prototype in such a way that we can start building the app directly from the prototype, which we've tweaked after several interactive dog-and-pony shows with the client.
If your doing any kind of web application prototyping you should look at Snapp MX (www.snappmx.com). Snapp MX gives you the ability to create complete web applications through your web browser.
Here is an interesting excercise in usability : Task Management
More info here: Spinetail