The road to success of Web applications-early prototype design and user testing

Recently some difficult to suppress the brain itch itch, reading and the desire of the code word is increasing, but by the time and energy and other absolute objective factors, have to maintain the frequency of a translation of a week, feel how much more frustrated and helpless.

About this article, actually hesitated for a long time in the title. This is the 15th chapter of the new book a Practical Guide to web app success; The theme should obviously be in the Web application, but this chapter is a separate look, but it works for a variety of common types of web products. Whatever, not contradictory. Author Dan Zambonini in this article will explain the Web application in the prototype phase of the design and testing work, and from the actual implementation point of view, introduce some empirical methods and common tools. Walk.

The design and testing of a product in the prototype stage is an important factor in determining whether a mobile application will succeed or not. When it comes to prototyping and user testing, people tend to have a feeling of boredom and avoidance. This is not surprising, in many practical projects, this work seems to be "random strong", "time-consuming", "high cost" synonymous.

But in my opinion, they are actually the most important part of the whole design process. Whether you or your team has a high level of experience in user interface Vision design, I recommend that you pay more attention to the relevant work of the prototype. The user test based on High-fidelity prototype can expose many potential problems of demand, function and interface design as soon as possible, and this kind of problem is directly related to the success or failure of the product.

In addition, the prototype phase of work does not represent "time-consuming" and "high cost", in fact, is the opposite. From the whole project point of view, in the prototype design and testing process to find problems and to solve, than to leave the problem to the visual design and development process to deal with, to save time and effort.

prototype Design

The prototype design requires relevant personnel to have the knowledge and skills of interactive design, composition, grid system, style inheritance and so on. If you are working in a small team, try to involve your colleagues in the prototyping process, making comments and suggestions from each functional perspective. If you are developing mobile applications for your customers, then you need to communicate with them as much as possible at this stage to ensure timely and effective feedback and iteration.

But one thing to be aware of is to be sure about the scope of the people involved in prototyping. Participants should include upstream and downstream functions such as products and design related to product function decisions. I have encountered many times in the actual project, that is, the development Department of Technical personnel in the prototype design phase of the excessive intervention, in addition to the regular technical review, but also put forward a lot of technology development as the center of the prototype design recommendations, this is clearly the cart before the horse.

1. Select the most important view interface

If you have enough time and technical resources to create a corresponding wireframe prototype for each view interface, this is not bad. But usually, you just need to do a few of the most important, most representative interface is OK, the other most can be represented by the same prototype diagram.

For example, Twitter and Facebook's homepage are very similar in form to the user's personal interface, and can be solved with a prototype. For both applications, there are only about 4 critical view interface prototypes, including user registration, dynamic lists, user searches, and user search results.

For the minimum available products (Minimum viable PRODUCT,MVP), 4 to 5 key screens are already enough. In the process of subsequent functional development and iteration, new prototypes can be continued for the functional interfaces that are relatively independent and not the most streamlined core.

2. List visual elements

Next, List all the visual elements you need to use, including text, buttons, forms, graphics, menus, and so on; Don't forget the elements that are not displayed by default, such as warnings and error messages, status hints, action feedback, and so on. For simple projects, using paper and pens to complete this step is enough.

Because these UI elements need to be reused, when using them to build prototypes, we can start with the most important view interface, which contains the most content structure and functionality, the user will spend a lot of time browsing and operation of the interface. This ensures that the UI elements are functionally reasonable as soon as possible.

Back to our Culinary app (a demo case that runs through the first few chapters of this book), from the "Minimum available product" perspective, we only need one major feature: finding ingredients. The visual elements and modules included in the main interface are:

search box Search failure tips Popular search keywords display with user input dietary classification, including vegetarian, healthy, Low-sugar and other app function services brief introduction of adding ingredients to the user's most recent search keyword LOGO3. Group and prioritize visual elements

From a functional and content perspective, the element entries in the list above are grouped and sorted in order of precedence from highest to lowest:

search box, search failure tips, search suggestions popular keywords, food classification, the most recent search keyword logo, app's functional services briefly add ingredients to the entrance link

Grouping and sorting work is easy to do for the simplest product to implement. If the app is more complex and has too many visual elements and modules, you can try the way cards are sorted. Write each element entry on the card to make the form more materialized, independent and easy to operate. Involve team members, consult group recommendations, and eventually achieve a unified model.

4. Make the real-

prototype for each group of visual elements

Sketch time, start doing it. The minimum-subsistence stage does not require any element of artistic beautification to intervene.

Don't mind if you can draw all the elements properly and in place at the beginning, this is a creative process, you can try to try different ideas in your mind. And our previous group plan is not absolute, in the process of making drafts, if you think the recent "search keyword" in the Logic and search box closer, then modify the group, no problem. Remember, in the whole process of prototyping, we have a big principle, that is, to allow iterations and updates to occur as early as possible.

There is no need to take into account the "consistency" aspects of the elements, and there is no need to focus on the relationship between their location and size; now we just need to focus on each individual element.

5. Wireframe

It's time to put these UI elements into the wireframe prototype, and don't forget the priority sort we had before grouping them. Iterations will still occur frequently during this period, so it is not necessary to think about precise grid alignment, color matching, or font type. The design process of wireframe prototypes is the process of evaluating the balance, priority and interaction between UI elements. (Refer to our previous article on the nature and practical application of wireframe prototypes)

In the previous period of the low-fidelity prototype, paper and pens are enough, but in the process of making an online frame prototype, we usually need to layout and adjust the modular, reusable UI elements collection. At this point, we can use a number of tools to improve efficiency; Try the following:

Sticky stickers

Well, the most basic method, and still no paper pen, but without losing flexibility and feasibility. Draw a UI element on each sticky note sticker, or a set of modular UI elements that adjust the combination scheme and layout position as needed. If an element or module itself needs to be adjusted, redraw one, without adjusting the global.

PowerPoint (PPT) or keynote

First of all, I personally hate using this type of software tools to do design work, but it must be admitted that in terms of quick sketch and grouping design elements, they are useful.

Google documents drawing Tools

The drawing application in the Google Docs kit is also good. Although it is not designed for web design, but its basic functions can meet the needs of our production wireframe, and remote collaboration and other aspects of the functional features are quite practical.

Standalone Web applications

Try out browser-based Web apps that are designed to make wireframes. Some are not bad, such as Mockingbird, very easy to get started, basic functions readily available. Pencil project is also a choice, it is a Firefox extension.

Desktop application software

Balsamiq mockups is a good wireframe prototype design tool, it is commercial software. Of course, if you already have Microsoft Visio or OmniGraffle, you can also use the Web Wireframe template that they provide.

I personally prefer those who provide a low fidelity sketch style of software, this style of wireframe can be more original and natural, to avoid doping too much visual beautification factors. The left side of the diagram below is a freehand sketch, and the right-hand side is the OmniGraffle wireframe prototype output.

For these types of tools, I prefer Web applications or desktop applications because most of them have a comprehensive library of GUI components built into it.

Low-fidelity prototype can be used in product-related departments for small-scale review and testing.

6. High Fidelity prototype

This creates a high-fidelity prototype for testing. Although the interface in the High-fidelity prototype will need to be iterated several times in the next process, we can now try to incorporate the visual style and related elements that involve the user experience.

High-fidelity prototypes are usually divided into two categories, such as Photoshop, fireworks and other design tools to create a picture file, purely to show the interface effect. The other kind is the real interaction prototype. In the process of testing with high-fidelity interaction prototypes, there is no need to include manual narration or behavioral path guidance, and for those who are tested, the experience is smoother and the sense of operation is closer to the actual product.

The interactive functionality of the High-fidelity prototype does not require code based on the actual production level, as long as we ensure that the page elements can be provided with the necessary feedback according to the user's behavior. This feedback can be achieved by hard coding or scripting.

Typically, there are several ways to create a high-fidelity interaction prototype:

inserts an interface effect map into HTML, and adds a hotspot link to the picture through the map and Area tabs to respond to user clicks. Use Photoshop or fireworks to quickly slice an interface effect graph and generate HTML static pages directly to achieve simple response. If your front end ability is OK, fast enough, code-wait, direct HTML, CSS, JavaScript, or use a front-end framework such as blueprint CSS and Ixedit. Use more professional prototyping tools such as Axure RP or Serena Prototype composer, and so on, to create prototypes and export them as an interactive collection of pages. The last one, hope will not clash with your values ... We can quickly create prototypes using WYSIWYG (WYSIWYG) design patterns from software such as Dreamweaver, Microsoft Expression web, or Adobe Muse. The goal is to quickly create and test the interaction of the prototypes, and the code for High-fidelity prototypes is often not used for the next front-end or background development. User Test

Through user testing, we can directly and effectively insight into the product in the user behavior, interface usability, user expectations and functional fit and so on performance. This article focuses on the prototype phase of testing, but also can help us in the early stages of the project to achieve the following goals:

identify and address the rationality of requirements and functional design before the product enters the development process. Identify and remove excess functionality, saving the next development cost. Early discovery of structural layout and interactive ways, and so on, in the next iteration process, targeted to optimize the user experience, improve the final product user satisfaction, promote the product in the market Word-of-mouth establishment.

The general approach and process of user testing is not complicated: Select the right users as the test subjects, and present them with a series of goals that need to be accomplished using the app prototype, recording their behavior and oral presentation feedback. It takes time and effort to figure out the details of the entire test plan and implementation process.

Of course, you can hire professional agents for usability testing, and they pack up all the problems, such as user selection, task design, session length planning, survey results analysis, and so long as your team has enough budget to cover the cost of outsourcing.

Fortunately, there are some practical, low-cost methods and principles for our reference, to solve their own problems. In addition, while most third party agents are trustworthy (and expensive) in terms of professionalism, they cannot, after all, be able to understand our products and requirements from beginning to end, and the analysis they provide will often fail to reach the point where they can guide us to take immediate action.

Test Scale

Each round of sessions often preferably not more than 45 minutes, the target task remains within 5, otherwise, fatigue factors will cause users want to end the test, and then affect their behavior.

If the test lasts a whole day, leave a 20-30-minute interval between each round of test sessions, allowing you and the team to have time to discuss the previous round of testing.

The number of users involved in the test depends on the scale of your application. For some of the smallest available product prototypes, there is a strong correlation between testing the user's behavior, and important issues can be clearly presented in the previous two rounds of testing. For complex applications, test subjects are more likely to identify a unique issues, with diminishing returns as the total number of test users Increases. Jakob Nielsen suggests that hep users to offer the best insight unreported diminishing returns kick in significantly. (“... With the increase in the number of test users, the phenomenon of diminishing returns. Jakob Nielsen suggests that 5 test users can bring the best test results before the effect of diminishing returns becomes significant. "Dare not to break the translation, please the audience's help and correction." )

/* —————— – Update 2011-12-04 17:26 —————— –*/

For complex applications,

Because each user can have her unique findings in the test, so with the increase in the number of users, this uniqueness will be reduced, duplication of discovery will increase, so that we spend time, money and energy on the excavation of the repeated issue, this is not the ideal effect, after studying the number of 5 people just.

From Yingying classmate, thanx!

/* —————— –/update 2011-12-04 17:26 —————— –*/

plans to prepare

Select a test task

We may not be able to test all aspects of the app, in the time and various resource conditions are limited, you can choose the most important, most frequently used features to design test tasks.

A good task-description copy should be more like a plot script than a simple guide; compare the following two styles:

"Find a substitute for satay sauce"-not very much. "Tonight, a friend will come to your house to eat, he is allergic to nuts." See if there is a way to adjust the recipes accordingly? "--very good, with a very real sense of scene and a sense of bringing in.

Remember to go through these tasks first and make sure that the prototype itself does not have any obvious errors or problems until the test is formally started.

Set a standard for consideration

Test results often reflect a wide range of usability issues, and quantifiable metrics can help us visually compare the product's iterative results in design and functionality after each round of testing. Special attention should be paid to the following considerations:

Task Completion: Has the user successfully completed the task? Duration: How long does it take the user to complete the task? The required steps: How many pages does the user need to access in the process of completing the task, how many times touch or click? How many errors did the user make during the task, and how serious was it? How about customer satisfaction? (5 points)

Select User

You must select a "valuable" user to test. For culinary applications, it would be a matter of no use to find people who spent most of the week taking cold pizza as their staple.

You can describe the target users you want to find based on early user personality and market research. The scope and manner of the search includes:

Friends, family and industry-related contacts through your website or blog to publish recruitment information in social media to find the current product areas related to users using bulletin board, mailing list, etc.

Reward Feedback

If you find it difficult to identify the test subjects, you can also consider providing some reward feedback to the users involved in the test, in addition to thinking about ways to recruit. The approximate forms include:

products After the introduction of preferential or free use of the privilege gratuity voucher (net purchase coupons or physical tickets, etc.) eating and drinking

Select Test Tool

There are many out-of-the-box tool services that can drive and assist user testing efforts.

Feedback Army will randomly invite some users to answer your test task questions and give feedback in the form of text. If your product has a large audience, this is not a bad way, otherwise you will be very difficult to get the directional feedback you need.

Usertesting is a bit more high-end, they will help you select the appropriate user base, and through the video recording users to complete the test task process, and then send the results to you, and the cost is cheap. One drawback is that their filtering of users is based on statistics, so if you want to test users who are supposed to be cooking at least 5 days a week, then you can count on the honesty of the user. In addition, you can not in the test process for important interaction to the user to ask specific questions.

If you need to interact with users remotely, screen recording and sharing functions are essential. Adobe Connectnow and Skype are very strong in this area, and Ishowu (MAC) and Camtasia Studio (Windows) are also good choices.

Of course, the best way to test it is to observe and analyze the subtle reactions of the user in a face-to-face interaction. The best camera and microphone to record the entire session process, and at the end of the test using Silverback (MAC) or Morae (Windows) tools such as playback, analysis.

Boot test for

On the day of the test, be prepared for the final test of the hardware and software required for the test. Welcome to the participants and thank them for taking the time to participate in the test.

Try to make the user feel at ease, to ensure that the test can be carried out naturally. Pay them upfront, avoiding the fear that "only the right tests will get paid." Explain to the participants clearly the purpose of the test, and let them know that the real test object is the app product, not themselves. Tell them to do the best they can for the next task and not worry about making mistakes at all.

It is best to sign a simple authorization agreement beforehand informing the user that the next test process will be recorded and used for future internal analysis. To ensure that the user's privacy is adequately protected, AV data will not be exposed externally.

The most important thing is to encourage the participants to think and express boldly, don't worry about anything, but let them know that you will not answer any questions about how to use the app to accomplish the task. Try to create a scenario where the participants are using the product to complete the task alone.

As the moderator of the test, your responsibility is to remain objective and listen carefully. A few simple tasks can be set up at the outset, allowing participants to easily enter roles. Keep in mind that in the process of assigning tasks and questions, avoid guiding the responses you wish to receive. Encourage the participants, give them some non commitment feedback, and if they make mistakes in the process, give them time to think and fix themselves, and then intervene as necessary if they do not go on.

When asking questions, do not include the "options" factor. The following methods are more appropriate:

"Can you describe what you are doing?" "What are you thinking about?" "Is this consistent with your expectations?" ”

After testing

After the test, remember to thank the participants again, they are likely to become the first batch of Word-of-mouth products, especially if they are just the product of the target user base. At the end of the test task, you can give them a simple rating of product satisfaction.

At the end of the test, immediately record the details of the issues you have learned during the test. Even though some of these ideas are of little value, they can be eliminated in the ensuing analysis.

Review the entire testing process with your team, summarize and sum up the problems identified, prioritize, and make corresponding improvements and adjustments as soon as possible in the next round of product prototype iterations.

Summary

Finally, we summarize the main points of this article about the design of Web application prototypes and related tests:

Lists the visual elements required by the prototype, sorted by function priority. Use paper and pens to sketch simple, low fidelity prototypes. For the application of the key interface view, the use of auxiliary tools designed to make wireframes and high-fidelity prototypes. Conduct an internal test review before inviting users to prototype testing. Before the user test, fully set the good consideration standard. Use the Scenario script style test boot. The user involved in the test should be in agreement with the app's target market. Provide appropriate remuneration to the participants. Record the test process using a AV device. As the moderator of the test, to keep objective, in the process of assigning tasks and questions, avoid guiding problems. Immediately after the test to record the problems found in the process, timely analysis of the test results, the prototype iteration. Original site to compile the article. If you want to reprint, please specify: This article from the is for Web English original: Http://www.netmagazine.com/features/road-web-app-s ... Translator Information:  c7210 -Web design and front-end players, is now working in the Mass Comment Network product Department user Experience Design Group (UED)