Web site prototyping. Putting it together.

“The only possible source of economic growth is to improve the quality and, as a result, the attractiveness of a product or service. And quality improvement cannot be achieved by reducing the cost of design and programming. ”
Alan Cooper "Mental Hospital in the Hands of Patients"

Thanks to all who participated in the voting on Habrahabr:
1. What does the prototyping process look like in your company?
2. Who is involved in prototyping web-projects in which you participate?
3. Are you satisfied with the current situation with the prototyping of websites in your company?
It's time to discuss the results.

1) For the hundredth time about the benefits of prototyping (as part of the design). Problem.

The most expensive mistakes are the mistakes made at the beginning of the project, since the most important decisions are made at the initial stages. As the project progresses, the cost of the error decreases. At the same time, the initial level of quality control is minimal and increases as the development process progresses. Full testing begins only in the later stages. The result is often too late identification of the most expensive mistakes and the subsequent costly processing of the system or its individual parts. At first glance it may seem that some projects are the same in nature and content. Let's say a typical project for you is an online store based on your existing system. But the individuality of each project is embedded even in its definition ( see the definition of “project” by PMBOK ). There is an opinion that the development of projects of the same type can take place without a design stage. I share this opinion only in part. I would divide the design task into creating standard standard solutions that wander from project to project and creative tasks that need to be addressed in each new project. (Requirement 1. Automate typical solutions, while preserving the space for creativity) And no matter how you resist, declaring projects of the same type, if you want to improve the quality and, as a result, achieve an economic recovery (according to Cooper), then in each new project you simply must take into account various input information. Prototyping is not a panacea, but a way to avoid some expensive mistakes and reduce risks. I think it is obvious that users of the online store selling fertilizers and agricultural equipment will be very different from the users of the store selling clothes and glamor accessories, as will their behavior on the site, the objects of attention, etc. Is your standard solution able to accommodate user differences? The standard solution is a set of components tested and tested in various projects. Understanding the need for their adaptation (customization) often arises at the end, when full testing occurs, and there are no free resources. This is the same road error (overrun of project time, leading to all-rounder, quality deterioration). The paradox of the economy that Cooper wrote about - to save money, you have to pay (by investing in design).

2) Overview of methods, tools and performers. Blue or red pill?

The results of the survey “What does prototyping look like in your company?” Conducted at Habrahabr.

Pic.1
I deliberately used radiobuttons instead of checkboxes, forcing me to choose the only option (assuming that the person chooses the most frequent option. Thus filtering cases when one of the options was used once and had the same weight as constantly used). Intentionally added provocative version "In words". How can prototyping be in words? The results of discussions must be recorded, otherwise something will be forgotten, ignored or unverified. The effectiveness of prototyping in words tends to zero. The popularity of paper prototypes came as a surprise, as was Own Development, which gained 39 votes. I would really like to know the details of those who voted for this option.
In order to compare the situation with the prototyping of Western colleagues I cite the finalized results of the IxDA survey . Discussion: What tools do you use for prototyping? (thanks for the link to Alexey Kopylov )

Pic2

Also in the IxDA discussion were mentioned:
Whiteboard, Snapz Pro X, GUI Design Studio, LucidSpec, Multimedia Fusion, Microsoft Word, Inspiration, MockupScreens, Microsoft Excel, Microsoft Power Point, Sketchbook Pro, Omni Graffe, ACD Canvas, Oversite, Eight Media, Magnetic Web Widgets.
')
I will not paint every tool and method, because on the links below it is done in more detail. Consider the advantages and disadvantages of popular tools and prototyping methods according to the following criteria:
The speed of the prototype is a very important criterion. It is very good when the tool allows you to realize your “put this button here” effortlessly, without forcing you to link in technology, settings, etc.
Interactivity - the ability of a prototype to respond to user actions and emulate real events. Details about the advantages and features of interactive prototypes, see the articles of the blog Yuri Vetrov "Interactive prototypes."
Detailing - the ability to reflect in the prototype everything to the smallest detail. Some of the tools listed below are suitable only for low-level prototyping at the level of a set of blocks ("black boxes").
Re-drawing is necessary - re-drawing of the prototype takes extra time
Accessibility for all project participants - accessibility for all project participants, such as the customer, management, developers, designer - is often a necessary condition for the prototype being created.
The possibility of making changes - the use of prototyping is also in the fact that it is possible to clarify some details of the future system, some points are discussed and clarified in the course of work. The prototype must be updated along with project artifacts, so the ability to make changes is another important criterion.

(Need 2. Quickly create interactive, detailed prototypes available to all project participants, with the ability to make changes)

Paper prototyping

Prototype creation speed: high
Interactivity: none
Detailing: High
Re-rendering required: yes
Accessibility for all project participants: limited
The ability to make changes: not possible

Prototyping with whiteboard

You can do it yourself! There is a paper with a magnetic surface. You can print stencils for design directly on an office printer, just be sure to check if your printer supports printing on this type of paper.
Prototype creation speed: average
Interactivity: none
Detail: Medium
Re-rendering required: yes
Accessibility for all project participants: limited
The ability to make changes: possibly with limitations

Axure pro

Prototype creation speed: high
Interactivity: Medium
Detailing: High
Re-drawing required: no
Accessibility for all project participants: full
The ability to make changes: perhaps without restrictions

Indesign

Prototype creation speed: average
Interactivity: low
Detailing: High
Re-drawing required: no
Accessibility for all project participants: full
The ability to make changes: perhaps without restrictions

Visio

Prototype creation speed: high
Interactivity: low
Detailing: High
Re-drawing required: no
Accessibility for all project participants: full
The ability to make changes: perhaps without restrictions

Office software

Prototype creation speed: average
Interactivity: low
Detailing: low
Re-rendering required: yes
Accessibility for all project participants: full
The ability to make changes: possibly with limitations

You can get more information about the tools from the articles by Maxim Gulevich, gulevich, “A Review of Tools for UI Designer and Information Architect,” by Alexander Sergeev ( HumanoIT ) about using Axure Pro , Vlad Golovach ( Usethics ) about interface prototyping in InDesign , Yuri Vetrov ( Artics ) about wireframes made in Visio and even the dynamics of web 2.0 in them
We turn to the results of voting about the performers.

Pic.3
Even if we discard the last, most popular result, it turns out that the prototyping process is performed by project participants not specializing in design and usability.

(Need 3. To take into account the low level of knowledge and experience of a person performing prototyping)

The results of voting on the satisfaction of the current situation.

Pic.4
It is quite expected conclusion that the current situation with prototyping in projects is not satisfactory (in the sum of two is not).

(Requirement 4. Strong and sufficient arguments in favor of prototyping. The benefit should be expressed in numbers)

With all the variety of existing tools for prototyping, in many projects and companies it has not yet been implemented (see Figure 3). A company performing projects is really difficult to answer the question: “Why do we need innovations and investments in quality (design, usability, etc.), if everything works and makes a profit?” The introduction of prototyping in such companies can occur only with the full understanding of the quality of the leadership. Qualities, as part of a corporate culture, as values ​​for each employee (The same feeling is instilled in parents by young children who are capricious in the morning and do not want to wash, explaining that they wash, primarily for themselves and not for someone). The search for an answer to the question raised above about the need for investment is being addressed by both Russian and foreign usabilityists.

Much more consciously to the introduction of prototyping are companies involved in the release of products. They have already experienced the benefits of design and prototyping (perhaps through trial and error). Unlike the first group, for them, product usability, user interface design and prototyping are no longer an elusive perspective. For them, this is a real way to reduce risks, improve the quality of the product and increase the loyalty of users (ie customers) to their product. However, not all of them are ready to turn to professional companies, create a department or educate (hire) a specialist, preferring to assign the design and prototyping functions to the project manager, such leader, etc. (see fig. 3).
In the likeness of how Jacob Nielsen once created a list of the levels of companies' readiness to introduce usability, kremien Gennady Dragun made a list of the levels of this implementation:
Level 0: About usability only heard somewhere or not heard at all
Level 1: Using basic usability test methods (checklists, simplest inspection, accessibility check)
Level 2: Level 1 + implementation of the design of interfaces and their graphic design
Level 3: Level 2 + simple “guerilla” user testing, user research
Level 4: Creating your own usability department - laboratory usability.

Original articles by Nielsen on this subject:
http://www.useit.com/alertbox/process_maturity.html
http://www.useit.com/alertbox/maturity.html

Prototyping in companies where the level of implementation rarely exceeds the first, usually happens like this: A newly arrived manager (team lead, etc. often not familiar with usability before) is tasked with “creating a prototype project.” Thanks to Google, the manager finds, let's say, this article. Sees the described tools and techniques. But they only cover the need for the tool, answering the question: "How?". They do not give an answer to the question: “What?”, Already assuming that the user of the program has the appropriate knowledge. According to the voting results, I will try to assume that the number of companies with the level of implementation not exceeding level 1 is the majority.
Related articles:
Interface design as part of TK development
Designing user interfaces. Overview of the process
Interactive prototypes. The current user interface model ( Part 1 , Part 2 ,
Part 3 )

Bonus:
Stencils for Visio and similar on GUUII
Stencils for InDesign from studio Usethics
Axure Pro. The product is paid, but is it possible to hide something from the all-seeing eye of Google? Define the moral and ethical side of using keygen for yourself. Searching results.

3) Choose a red pill. Real needs or welcome to the real world.

To obtain a positive result from the implementation of prototyping, it is necessary that it satisfies the following needs:
1. Automated typical solutions, giving the opportunity for creativity.
2. Allowed to create interactive, detailed prototypes that are available to all project participants with the ability to make changes.
3. Take into account the low level of knowledge and experience of the person performing the prototyping.
4. Strong and sufficient arguments in favor of prototyping. Benefit should be expressed in numbers.

I developed a prototyping tool and some implementation methodology that meets these needs. In the near future I plan to present this project in the best possible way on the blog. You will have the opportunity to download and use this tool for free. In the meantime, I suggest you follow the news on RSS

Source: Blog about usability and project management