Ten ways to make your wiremap prototype more capable of communication

Although the translation is published every Monday, it cannot be very easy. From reading, filtering, to trial translation, to final determination of this week's article and completion of the translation, it mainly depends on taking some time every day. Fortunately, it is autonomous behavior, love, and still love. This is what UX practitioners and translators have. Mo, we enter the text of this time.

I have participated in the prototyping of many products, including self-developed products, working with other designers, product managers, and even business analysts. This is great because I have seen many excellent projects in this process. However, I also found some problems, some of which are often ignored during the prototyping process. If you can pay attention to and solve these problems, our Interactive Design outputs can play a greater practical value.

This is a typical example. We usually deliver this style of wireframe to relevant colleagues to follow up on visual design or prototype testing.

　　

 

This type of wiredrawing can clearly describe the layout of page elements, but that's all. What it lacks is the ability to communicate with other designers, developers, and tested users. Next, let's take a look at the methods that can help us improve the performance of the wiremap prototype.

　　1. Describe the visual priority between modules through comparison of light and shade

What is the first thing you need to notice on the page? Where should they focus on? What operations do we want users to perform? These problems cannot be simply taken into consideration by visual designers, and the line-frame prototype shown clearly cannot help Interaction designers convey this information.

First, we should be familiar with the above information as product personnel or Interaction designers based on the product requirements and the actual situation of user research. On this basis, add a visual priority for the original wiredrawing. The implementation is actually very simple. Remove all the dark "wireframes" and use the gray with Different Brightness as the background color to define the edge of the page and module, this indicates the visual priority between different elements. Compared with the previous design draft with pure wiredrawing style, we can clearly feel the priority relationship between elements and modules, for example, the recommended hotel information and the operation button in the reservation form on the right can catch our eyes in a short time.

　　

 

This does not mean that the interaction designer is playing the role of a visual designer. We are not saying that "the background color of this element is deeper than that of another element ", the relationship between light and shade only reflects the elements that need to be highlighted and those that need to be relatively weakened. The final visual presentation form should still be controlled by the visual designer.

　2. Use real data content

We should try to use the actual data that is closest to the production environment as much as possible for the sample content in the box prototype, including the title, form tag, Introduction text, and icon of the navigation element. This method can help us plan the layout of interface elements more effectively, and develop preventive solutions for extreme data situations that may occur in the actual environment to ensure the robustness of the page structure.

More importantly, a wiremap prototype using real data as the sample content can be more expressive and persuasive in the subsequent usability tests, the tested user can obtain more accurate information in the prototype without relying on the host's description or speculation. In addition, real data can also create an atmosphere closer to the actual product, which can make the tested users more invested. For testers (host, observer), we can design more targeted tasks or problems, and conduct more in-depth observation on the tested users during the testing process. Correspondingly, the final feedback information will be more authentic and effective.

Taking the prototype of the hotel as an example, for example, "can you find the Special Service Information of this hotel ?" This problem is inappropriate, because it is equivalent to telling the tested users that such information exists somewhere on the page, and they will only search for it based on this clue. In most cases, such feedback is meaningless.

If you use a prototype built from real data during the test, the situation will be much better. We can ask the tested user "How do you feel about this hotel ?", This will greatly increase our chances of obtaining effective feedback. Users will view information more autonomously based on such questions, and they may answer, "This hotel looks good, but they provide a home pool, I really don't like children running around in the hotel."

　　

 

Through this type of feedback, we can understand that users not only pay attention to the important elements in the page, but also have made real thoughts on the specific content. It can be said that we can test the availability of products through a wiremap prototype without real data content, the use of real data as a prototype of the sample content box can help us to test the user experience of our products more comprehensively. For more practical methods of prototype testing, refer to our previous article "Early prototype design and user testing ".

　　3. Make sure the details are correct

After filling real data into the prototype as the sample content, we need to ensure the accuracy of the information involved in the interaction process. For example, if the prototype of the shopping cart page shows two items with a unit price of 50 yuan, the total price should be 100 yuan in the settlement process, rather than any other number. Incorrect information may impede the effective communication. Developers may question the information here, and the tested users may feel inexplicable.

As a designer, he has been focusing on prototyping for a long time and can easily ignore the existence of such problems. If you have the conditions, you can ask others to check whether there are errors in such details in your prototype.

　4. added the self-describing capability of sample images.

Images play an important role in improving user experience. When people look for products or services on their websites, images are the key elements that guide them to make decisions (how to help users make decisions through design ). In addition, images can help users perceive the image and positioning of the website. However, in the online box prototype, we usually only use gray containers and lines to represent images.

Of course, I do not recommend that you use real images or photos in the online box prototype. What we need to do is to make the wiremap elements that represent the images reflect the actual pages, what type of image should be placed in this position. Before creating a wiremap prototype, it is best to communicate with relevant products or business personnel on this issue. Based on the characteristics of the product and the final target user group, to determine the overall style of a visual element like an image.

For example, I used to make a website revision for a shirt retailer. Before proceeding with the design work, we first used the old version of the website for a user test. The results showed that the demo photos on the product details page always confuse users. To make the shirts look better, they deliberately matched the ties and cuffs when taking photos, which made the user think that each shirt is a suit containing a tie and a cuff. So when I made a wiremap prototype design, I drew a sketch of a shirt with no tie or cuffs at the place of the product photo to ensure that the visual designer and the people in subsequent stages can understand it, and avoid repeated errors in the new version of the website.

We do not need to add descriptive descriptions to the image elements in the wiremap prototype through very fine-grained painting. Simply sketch the image types that users want to see here. For example, on a website that provides hotel booking services, what images do users usually want to see on the details page? Room? Bathroom? Landscape? These problems are worth the time to understand and reflect in the online box prototype.

　　

 

　　5. Exercise caution when using colors

In the online box prototype, color is usually used for annotation. When necessary, we can also use special colors to mark interface elements that require special attention, or to express status content such as error information. However, remember not to use a version with color notes during a prototype test because it is obvious that we do not want the tested users to be guided or disturbed by these "highlighted" elements.

　　6. Make sure that the interaction elements are clear and easy to understand

The rendering method of the interaction element should be consistent with its purpose. For example, the button may seem to be clickable. The correctness of visual representations in these details directly affects the understanding of the prototype by visual designers and developers; potential experience problems caused by non-self-explanatory interaction elements will also be exposed in usability testing.

　　

 

　　7. In actual pixels

If you use HTML and style code to create a prototype (using the front-end development framework to quickly create a page prototype), this problem basically does not exist, because you usually need to set the width or height attribute for the container in pixels. However, most of the time we create a pure line chart. The page layout and element size are planned and described to a certain extent in actual pixels, this will help us and our visual designers save a lot of "guesses" and "estimates" in their next work. I used to use Powerpoint to create a wiremap prototype. In this way, only the approximate size and position relationships between elements can be displayed. When a project enters the visual design process, it cannot effectively help me communicate with designers, causing a lot of trouble.

　　8. create change logs

As iteration continues, changes to the line-frame prototype of each version are usually refined, from the page structure to modules and controls, this will make it increasingly difficult for designers or developers who follow up on subsequent work to discover all the changes. As an interaction designer, we have the responsibility to create a change log and continuously update it as the project develops. Each record in the log must contain the date, version number, performer, and change description. This information exchange method does not take too much time, but the result is more efficient. No matter the product staff, designers, or developers, you can track the version changes of the prototype at a glance.

　　

 

　　9. Avoid dark wireframes

The dark box on the page will make your prototype look unhierarchical and rough and messy. As we mentioned in the first point, we try to use gray with Different Brightness as the background color to define the edge of the page and module. This not only shows the visual priority of the interface elements, but also makes the entire prototype look more neat. If lines must be used in some places, try to use SLIM gray solid lines or dotted lines. Although we do not need to make the wiremap prototype look as perfect as the visual draft, the grasp of these details can make it more concise and exquisite; in actual work, this can often increase the acceptance of the prototype.

　　

 

　　10. Keep follow-up

This is more in favor of the delivery process than the design skills. After the wiremap prototype is completed, we cannot simply throw it to our colleagues who follow up on the subsequent work. It takes some time to support the work of visual designers or developers so that they can finally put your design concepts into practice. Generally, it is difficult to fully and accurately understand the ideas, operation logic, and other information contained in the interaction prototype, and the hidden problems may be reflected in the subsequent stages. We need to follow up after the prototype is delivered to work with everyone.

The above are 10 suggestions for improving the communication capability of the wiremap prototype. You can refer to our previous article "the essence of wiremap prototype and its practical application overview" to learn more.