Best Practices for Prototyping in Software Development - 2

Posted by Ravindra under Software Development Practices, Software Development Prototyping

This article is the second in series of articles on Prototyping in Software Development.

Tools and Technologies that can be used in Usability Engineering, prototyping during Software Development

There are several different tools and technologies you can use for creating prototypes, each of which has its advantages and disadvantages. Consider the type of design work you’re trying to prototype and the goals of your prototyping effort as you decide which tool or technology is right for you.

Paper - For usability studies or quick reviews, paper is often the fastest way to prototype a design idea. Using Photoshop, mspaint, or any tool you are comfortable with, produce screens that express the design, and print them out on paper. If you make enough screens, you can simulate walkthroughs, allowing test users to make choices and experience the design. However, for prototypes of moderate complexity, generating paper prototypes can be cumbersome. Highly interactive things like games or chat rooms can not be simulated well on paper. Also, the more elaborate the tasks, the more pages you might need to have handy.

Microsoft .NET: This is the fastest technology for creating Windows-style and Web based UI prototypes. The Web browser object makes it easy to integrate HTML UI with your standard Windows-style components. While it’s true that an experienced C/C++ developer might be able to generate UI faster in C/C++, this creates the temptation to reuse code from the UI prototype in your production code. It takes discipline to recognize that the goals of a quick and dirty UI prototype are highly divergent from high-quality engineering. Make sure you know what kind of code you’re writing, and that your team or manager understands what will be discarded.

Macromedia Director or Flash: This is one of the most popular UI prototyping tools among designers. It is most useful for multimedia or non-standard GUI designs, or for prototypes that require significant animation. It’s high flexibility makes it cumbersome for Windows-style UI compared to Visual Basic. However, a proficient Director user can generate Windows or Web UI without difficultly.

HTML: Dream weaver, FrontPage and other HTML editors allow for fast creation of simple prototypes. The latest technologies based on LAMP tools can also be used for faster turnaround times during the prototyping phase. To express an idea, you can often create bitmaps that illustrate a sequence of user interaction, and place them into FrontPage. Then you can create link areas to connect the pages, and simulate how you can interact with the design. Java Script and DHTML take things to another level, allowing for very sophisticated logic and interaction. If you are using HTML to prototype your Web site, the warning just described for C/C++ applies here as well don’t fall into the trap of confusing quick prototype code with production-quality engineering.

Ajax - This is the latest technology that uses Web 2.0 concepts to create user friendly presentation Layers, with this you can break up the page/screen into a variety of small UI elements, like a header, a navigation menu, a sidebar, etc and then we should be able to create reusable snippets of code

Also, most importantly by using Ajax in prototyping, you are prepping up the site for web Application Integration. The general structure of an Ajax prototype is remarkably similar to the structure to how a Engineer would incorporate the design into a web Application framework. They don’t have to dig through endless lines of presentation code, rather each function is nicely separated into it’s own HTML file.