Learn Software Development » Prototyping

Paper Prototyping

ashish — Thu, 06 Mar 2008 13:13:24 +0000

This form of design is coming back to popularity. With the proliferation of tools and overall influence of computing, one would think that preparing screens and prototypes on paper would have vanished, but that is not the case. The concept of paper prototypes is turning out to be a useful way of generating prototypes and gathering information, with its limitation. As the complexity of the desired product increases, it becomes more difficult to do paper prototyping. So, for example, prototyping UI for mobiles, or for games, is more difficult to do using paper. However, one should not assume that something cannot be prototypes on paper right in the beginning.
Paper prototypes are more easier for people to handle when there are business workflows to simulate, they also give people more time to think through the interaction and point out problems in the workflow or the logic or the terminology. Further, paper prototypes allows you to convert an early set of users into sort of evangelists (consider the case where you have some client representatives over for discussion, you can do discussions, make alterations and give the same set of paper to the representatives who can take this to the larger set and actually convince the bigger set of users).
If you have a very small set of people in the team and a small project, then a prototype using a tool will not take too much additional effort over a paper prototype, but as you start to add team members and more business logic, you would find that a paper prototype takes far less effort.
Another great advantage of paper prototypes is that you can do it much earlier in the cycle (think about showing a proposed new feature to your user group in the forms of paper mockups, and getting some great feedback way early before you could even think of trying to make an electronic prototype). Further, if there are some re-work, then the paper prototype can be modified or even dumped and a new one made, and the effort involved is minimal. And of course, if you get into a situation where you are trying to prepare a new solution, something that does not yet exist, then the proposed customer base would not be very understanding initially of the proposed product, and the paper prototyping would work as a great usability test.
You might think that team members will be somewhat cynical about what a paper prototype can achieve, but all it takes is for a team member to watch one paper prototype discussion with stakeholders, and they will be hooked. Further, many of them will be unsure of what a simple paper based discussion will achieve, preferring the richness and interactivity of a tool based method; and there is no easy way to convince people that a paper based prototype will work; the fast is that a paper prototype allows people to get into deep into the proposed solution and do extensive discussion.
The killer of course is that paper prototyping allows saving of effort and money (and this is not money from buying tools, but from the standard principle that the impact of making a change is lower, the earlier you do it in the cycle, and paper prototyping allows you to do it very early).

A link to a paid video (not mine) that shows paper prototyping.

User Interface Prototyping Tools

ashish — Thu, 06 Mar 2008 10:43:58 +0000

There are plenty of prototyping tools available out there, both free and purchasable. All of them have their adherents, and detractors; I was looking for some, so I went out and tried to find out tools that people use. If you use any of these tools and have some comments, please do put a comment.
One criteria that I saw on a forum, that seemed to be good:
1) Create interactive elements with visual design developed within tool or ability to bring in externally developed imagery
2) Ability to place elements quickly on screen (WYSIWYG)
3) Ability to assign / program interactivity actions
4) Prototype can operate on Wintel machine with minimum of required support infrastructure (i.e., .exe would be fine for us). This can be extrapolated to mean a tool that works on the desired platform.

A listing of tools:

Visio: Website. Available for a starting price of $260. User Description: The reason why Visio is the favourite prototyping tool of many interaction designers is because of its ready-made interface objects, you can drag-and-drop onto pages and its ability to link pages together and export them as web pages. But what distinguishes Visio from other prototyping tools is its use of layered backgrounds.

Flash: Website. Costs $699. Description: Visually adjust shape properties on the stage with smart shape drawing tools, create precise vector illustrations with the new Pen tool inspired by Adobe Illustrator, paste illustrations from Illustrator CS3 into Flash CS3, and more.

Adobe AIR: Website. Freely available. Adobe AIR uses the same proven, cost-effective technologies used to build web applications, so development and deployment is rapid and low risk. You can use your existing web development resources to create engaging, branded applications that run on all major desktop operating systems.

MS Expression Suite: Website. Trial available at this link. Pricing for the Expression Studio is $599. Description: Microsoft Expression Design is a professional illustration and graphic design tool that lets you build compelling elements for both Web and desktop application user interfaces.

Axure – Website. This is a paid product, currently costing $589 per license. Description: Axure RP enables application designers to create wireframes, flow diagrams, prototypes, and specifications for applications and web sites faster and easier than creating static mockups with their current tools

Fireworks: Website. Available for $299. Description: Prototype interactive layouts for websites and rich Internet applications. Export website prototypes to Adobe Dreamweaver and RIA prototypes to Adobe Flex.

OmniGraffe: Website. Standard version at $100 and professional for $200. Description: Need a diagram, process chart, quick page-layout, website mockup or graphic design? OmniGraffle 5 handles all of these in one award-winning application. We’re not just a pretty interface, however. There’s plenty of power under the hood to make all your diagramming and design fast and easy, with the ability to customize and tweak every aspect of your work.

iRise: Website. This is a very high priced product, with solutions starting at $5,000.

Powerpoint: Website. Costs $229 per license. Powerpoint allows you to prepare fairly rich mockups.

DENIM – Website. Freely available. Description: DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.

Illustrator: Website. Costs $599 per license. Description: Discover new ways to experiment with color; work faster with new drawing tools and controls; and produce artwork for print, web, mobile, and motion designs.

Director: Website. Costs $999 per license. Description: Adobe Director 11 and Adobe Shockwave Player software help you create and publish compelling interactive games, demos, prototypes, simulations, and eLearning courses for the web, Mac and Windows desktops, DVDs, and CDs. Integrate virtually any major file format, including video created with Adobe Flash software and native 3D content, for the greatest return on your creativity.

Photoshop: Website. Available starting from $649. Photoshop is a leading tool for generating graphics, an integral part of image manipulation used for prototyping.

EasyPrototype: Website. Price $69 only. Description: Unlike traditional drawing tools or code-centric prototyping tools that require as much effort to use as building the real thing, EasyPrototype works with your existing techniques such as paper sketches, Photoshop mockups, or whiteboard sessions so you can produce a dynamic prototype in just minutes.

Napkin: Website. Freely available. Description: The idea is to create a complete look and feel that can be used while the thing is not done which will convey an emotional message to match the rational one. As pieces of the work are done, the GUI for those pieces can be switched to use the “formal” (final) look and feel, allowing someone looking at demos over time to see the progress of the entire system reflected in the expression of the GUI. Over time, several folks have just liked the thing and wanted to use it for non-provisional GUI’s. Sometimes this is because the application itself seems to match the theme, such as a brainstorming tool. And sometimes it’s just that it looks fun.

Smart Draw: Website. Price $197 per license. Description: With SmartDraw anyone can create great looking business graphics in minutes, not hours. SmartDraw anticipates your needs—giving you pre-drawn templates, automating design, and making it easy to turn your information into brilliant illustrations fast.

Petra: Website. Priced at 300 Euros. Description: Petra is analytical modeling tool, which will help you to:
- exactly specify client requirements
- easily produce prototype of the final application
- reduce the number of errors in detailed functional specifications
- Improve the quality of specifications for ensuing project phases

LovelyCharts: Website. Available in Beta right now. Description: An online diagramming application built using Flex. Create flowcharts, sitemaps, wireframes, organization charts, etc.

DesignerVista: Website. Personal: $79.99 & Commercial: $129.99. Description: DesignerVista is a rapid GUI design Tool for Project Managers, Business Analysts, Consultants, Usability Engineers, Team Leads and Software Developers. DesignerVista Software helps you to create GUI design, GUI Mockup design, GUI screenshot, GUI prototype and Simple Web Page prototype design. You can save all the designs as HTML files for easy distribution.

MockupScreens: Description. Costs $79 per license. Description: MockupScreens helps you to sketch screen mockups of your application and organize them in scenarios. With MockupScreens you can experiment interactively with your clients, and quickly visualize scenarios of your application, even before the coding has started.

User interface prototyping tips and techniques

ashish — Thu, 06 Mar 2008 08:24:59 +0000

I was looking for some tips on how best to optimize user interface prototyping when I came across some great tips at Ambysoft as well as the IBM Developer site. A UI prototyping process is very important for teams that want to take their product development process as close to being successfu as possible, and has numerous development cycle benefits as well. So, here’s these tips:

1. Work with the real users: There is no way to get around this. You need to get the actual end users involved, they are the ones who have the most at stake.
2. Use prototyping tool: It makes sense to spend some money in a prototyping tool that will allow the team to quickly put together screens and not have to put too much effort in getting this done. It is not necessary to develop good code, since a prototype is not recommended to substitute for final code.
3. Get users to work with the prototype: Unless all the stakeholders get involved with the prototype, they will not be able to see how the proposed system will meet their needs. Further, this will help in generating some useful feedback.
4. A good understanding of the requirements and the business: Since a prototype is meant to provide an overall idea of the final solution, the people building the prototype need to have a good understanding of the business logic and requirements.
5. The code is throwaway: It has been a standard understanding of the prototyping process that all code generated through the prototyping business is throwaway, and nobody should fall in love with the prototype and code that they would consider using the prototype as a development platform. Don’t spend unnecessary effort to make the code beautiful.
6. Not everything can be simple: When building a prototype, there is a temptation to try and simplify things in order to present a good picture. However, users know how complex their workflows can be, and it would be a mistake to not show them the contour of the final proposed workflow. It also helps in tweaking the complex workflow solution by getting good feedback from them.
7. Don’t get over-ambitious: Just because a feature is easily built via a prototype, does not mean that it should be put it. A prototype should not have features that are not part of the schedule, as that might lead to expectations that would certainly not be fulfilled.
8. Expert help in design: Building a prototype is not easy. It needs people who are experienced; for optimum benefits, if necessary, bring in expert help for this design.
9. Make users aware of what a prototype is / is not: Many end users are not so aware of software practices, and if that is the case, then they should be educated about the purpose of a prototype. There should be no expectation that a prototype is a product and just needs a bit more work.
10. Don’t use the prototype for making decision: The use of terms make a lot of difference to users. If you build a good workflow, but use very specific terms, users are likely to factor in the terms (for example, if there are alternate ways of completing a task) as a way of how the work flow will happen. It is better to have the terms be generic.

User interface prototyping: Risks / Problems / Disadvantages

ashish — Sat, 16 Feb 2008 20:31:44 +0000

User Interface Prototyping is seen as a great value adder to the entire project; it helps to get better user input, show the final functionality to some extent, and determine short-comings. However, like any other process, it has its weaknesses and pitfalls and one needs to be careful in the prototyping process, and never lose sight of the goal for which the prototype has been developed. Some of the potential problems are:

* Insufficient analysis: The focus on a limited prototype can distract developers from properly analyzing the complete project. This can lead to overlooking better solutions, preparation of incomplete specifications or the conversion of limited prototypes into poorly engineered final projects that are hard to maintain.
* Since a prototype is limited in functionality it may not scale well if the prototype is used as the basis of a final deliverable, which may not be noticed if developers are too focused on building a prototype as a model. By the time this is determined, it would be expensive to take corrective action.
* User confusion of prototype and finished system: Users can begin to think that a prototype, intended to be thrown away, is actually a final system that merely needs to be finished or polished. For example, they would be unaware of the effort needed to add error-checking and security features and the proper quality testing that the final product would need. This can lead them to expect the prototype to accurately model the performance of the final system when this is not the intent of the developers.
* Users can also become attached to features that were included in a prototype for consideration and then removed from the specification for a final system. If users find these prototype features to be interesting, they may require that many of these new features be included in the final system this can lead to feature creep.
* Developer attachment to prototype: Developers can also become attached to prototypes they have spent a great deal of effort producing; this can lead to problems like attempting to convert a limited prototype into a final system when it does not have an appropriate underlying architecture.
* Excessive development time of the prototype: A key property to prototyping is the fact that it is supposed to be done quickly. If the developers lose sight of this fact, they very well may try to develop a prototype that is too complex. Users can become stuck in debates over details of the prototype, holding up the development team and delaying the final product.
* Expense of implementing prototyping: The start up costs for building a development team focused on prototyping may be high. Many companies have development methodologies in place, and changing them can mean retraining, retooling, or both. Many companies tend to just jump into the prototyping without bothering to retrain their workers as much as they should. Many of them do not know about the level of effort needed.
* It is critical to understand that you don’t need to create a prototype for the entire system. It is very common to prototype a small portion of the user interface, perhaps a single screen or HTML page, before moving on to implementing it. This can be ignored by both developers and users.
* Not aligning the design with project constraints. In the urge to show off exceptional talents, developers might be tempted to invent ingenious solutions that exceed what is possible with the time and budget the project has at its disposal. If shown to clients directly, it can put the project in a precarious situation, where we either have to cover the extra cost ourselves, ask the client for more money, or explain to them that what they saw, is not what they are going to get.
* Interface designs have far-reaching consequences for the entire development project. Design by blinkered dictatorship is not a viable alternative to design by committee. Need to get inputs from colleagues and not decide on the entire interface design by just 1-2 people.
* Whatever poor coding practices you use to build your prototype will be replicated in the final production version.

Benefits of user interface prototyping early in the cycle

ashish — Sat, 16 Feb 2008 20:03:27 +0000

It is recommended that user interface prototyping not be left to latter stages of the project (say when the code has already been written). Prototyping can be considered as a risk reduction activity. What are some of the benefits available due to prototyping?

* Elucidate requirements. A prototype can “translate” the domain vocabulary of users into concrete aspects of a system. For example, a prototype can convert a general set of workflow or task descriptions into a sequence of GUI screens and controls displaying well-defined data.
* Misunderstandings between software developers and users may be identified as the system functions are demonstrated.
* Once the prototype is developed, it can be installed at the client site, and left for them to continually validate and verify that the proposed system will meet their changing requirements.
* Missing user services may be detected. Though customers can’t always tell you exactly what they want, when shown a prototype, they’re very reliable in telling you when you get it wrong.
* Difficult-to-use or confusing user services may be identified and refined.
* Software development staff may find incomplete and/or inconsistent requirements as the prototype is developed.
* A working, albeit limited, system is available quickly to demonstrate the feasibility and usefulness of the application to management. Further, a prototype can answer specific questions about high-risk aspects of the system design that impact everything else.
* Impact on usability: Improved usability of the final product, due to early feedback on design and presentation from users
* The prototype serves as a basis for writing the specification for a production quality system.
* Fine-tuning schedule: Developing the prototype allows the software engineer some insight into the accuracy of initial project estimates and whether the deadlines and milestones proposed can be successfully met.
* Improved and increased user involvement: Prototyping requires user involvement and allows them to see and interact with a prototype allowing them to provide better and more complete feedback and specifications.
* User training: The developed prototype can support user training
* System testing: Prototypes give good pointers to the team preparing test plans and cases, both in terms of new ideas and validation
* Development of the prototype leads to improved morale of the whole team, and a feeling of partnership between client and development team
* Reduced feature creep since features can be more easily validated through the prototype