Customer Experience first: Use wireframes and prototype tools to create ideal products and prototype products

Customer Experience first: Use wireframes and prototype tools to create ideal products and prototype products

Introduction:The concept of interaction is difficult to describe in a language. How can we fully communicate and test an abstract idea? A prototype tool can answer this question.

Prototype is a companion on the journey of an App or webpage. An architect will not go to the basement from the very beginning. After drawing the sketch, he will design the computer and the real model step by step, and test and revise it repeatedly. Similarly, the graphic designer will repair and adjust various design elements 1.1 drops on the UI.

However, in addition to creating a beautiful UI interface, users should also be able to enjoy the process of using the product, resulting in viscosity, at least without getting bored. This is about a good user experience. Therefore, in order to avoid negative user experience during the "Opening Ceremony" of the "building", the user experience and experience must be fully considered during the design. When the "building" is not yet completed, prototype is the solution to the problem.

Factors Affecting UX design

There are three basic factors that affect product development:

• Functionality: What can this product do?
• Interactivity: How does this product work?
• Visibility: What does this product look like?

Other factors such as user requirements, enterprise goals, and other requirements require UX designers to fully and carefully consider and understand them. They need to design the general direction of the Framework in advance. The first thing is to define the requirement: What kind of goal should we achieve? For example, if a parking space cannot be found in the city, the requirement is a product that allows me to find a parking space. In the existing urban system, the key to the problem is to identify the main pain points and evaluate the distance between users and objectives.

Visualized thinking

Many UX designers like to express ideas in words before and during concept formation, which in fact makes communication obscure. In fact, requirements, problems, and user stories all need to be presented in a visualized manner. Because images are at the top of the information receiving chain of the brain, concise and vivid images can help the team quickly find connections, understand obscure concepts.

Sketch is also a good starting point for teamwork, because it can solve common problems with pen and paper, number pen, and whiteboard. Some people say that "I am not good at painting" is just an excuse. After all, this is not a painting competition. What is important is fast-paced brainstorming, continuous discussion and revision based on the original. Bill Buxton, Chief Researcher at Microsoft, said: "sketch is a kind of thinking tool ". Visual thinking is not just a tool, but also a kind of work attitude: put pen and paper in your hands, let the prototype speak, and describe your point of view in a realistic manner. Use prototype design toolsMockplusMind Map can also clearly present ideas.

Sketch and story board

The prototype is used for design decisions. At the beginning of each prototype design, there is a question: What do I want to test with a prototype? Do you need a general layout? You can usually draw a central UI view sketch. The specific content and shape are not important. The line and curve represent the text, the rectangle and the Circle represent the image. But the problem is often: What is the central content? How to import content into scenarios? In the user interface, how should I replace the elements such as list, button, and drop-down menu? All of these issues can be easily and quickly discussed using sketches.

Interactive products are constantly changing. So you need to test the layout in different sequence. Therefore, the sketch can be used to combine and visualize the story board of specific use cases. First, three or four core functions need to be drawn. The story board can be used to test how a user jumps from a view to the next position of the product.

Equally important is the screening of testing groups. The content you want to test determines the depth of product visualization, interactivity, and functional details. Testers, including team members, investors, and users, will partially influence the prototype abstraction.

Line diagram

Compared with the sketch, the line diagram is the first graph design draft at the front end, which is the specific presentation of the user interface. In the line diagram stage, the final size of the image and text are arranged properly. Design variables such as color, Font, shape, texture, and effect do not need to be determined too early to avoid being distracted by these details at an early stage of concept. The line diagram mainly describes how to determine the elements, how they are linked, and what functions are easy to understand. The biggest newbie error is usually the size of the text and control elements in the box containing the error. When designing the final draft, you need to check the basic layout again, which will consume a lot of time and effort. AvailableBalsamiqOrMockplusIt is applicable to low-income real-line diagram and Sketch Design in commercial web product design.

Visual draft

The next step is the visual draft. This stage is visually consistent with the final UI, but only has partial functions. Visual drafts are often regarded as high-fidelity prototypes, because there are not only a general framework (layout), but also related design variables: color, shape, texture, spacing, and font selection, you may even pay attention to the radians of the circular button. In addition to layout and order, designers also need to clarify many details. Common Software:SketchAnd Adobe Photoshop, Illustrator, Dreamweaver, etc.

Prototype tools

There are many prototyping tools you can choose based on your professional level and preferences. Old people likeAxureThis type of prototype design tool with rich functions and complex operations is suitable for multi-Page Flows and complex logic. It is often used on enterprise software interfaces with complex click interactions and logic. Relative to quick prototyping toolsMockplusIt is easy to get started, fast interaction, flexible design, and no need to know the code. In addition, it supports a wide range of prototype previewing methods, allowing you to easily preview online and offline mobile phones. It also supports cloud synchronization and team collaboration, making team work more efficient and convenient.

Make a summary

The implementation methods and tools are rich for the prototype design. However, in process monitoring, speed and flexibility are crucial. At the beginning of the project, you need to quickly determine the direction. At the end of the project, you need to carefully design the interface. A simple sketch can be completed in just a few minutes, and the interaction may be several hours. The idea can be modified in seconds with the help of the sketch, and the interaction prototype will take a longer time. Therefore, no matter what implementation method or tool you choose in the prototype design, the core goal must be clear: the idea must be easy to communicate and understand anytime, anywhere, to facilitate decision-making.