User experience factor--product system design method

The user experience has become an oral word for every Internet person, especially the Internet Product Manager or product designer. Indeed, the experience is very important for any Internet product. But what exactly does the user experience mean, the interface, the UI, or the interaction, and what exactly is the factor that determines the good and bad of a product experience? And what exactly is the logical relationship between these factors? What is the overall framework that determines the experience of good and bad? That's something I've been trying to figure out. Before and after reading a lot of books related to user experience, in which American writer Garrett's "Elements of user experience" gave me a good answer. But really feel that this book should not take this name, this experience is really very bad, did not understand what the reader wants to know.

First of all, the entire product design is divided into 5 major aspects, from low to high, the underlying root causes determine the upper form composition. And website layering is also very image.

1. Strategic layer: Why do we want to do this product?

2. Scope layer: What kind of content should we build?

3. Structure layer: How to present to the user? mode, order, priority?

4. Framework layer: Which features are completed on which pages? How are these features implemented on the page?

5. Presentation layer: Not only is the beautification, but the product function to be very good display?

1. Strategic level

(inside) What do we get from this product? What are the product goals?

What do our users get from this product? What are the product requirements?

Product goals? Perhaps most of the products will be users as the starting point, are to meet user demand, to win market profits.

So what are the user requirements? This may be the biggest challenge for the user experience, which is to understand their needs more accurately than the users themselves.

User Demand Core: Available, easy-to-use products.

Through the user segmentation-user research-create personas and other methods can be more scientific way to quantify user needs, better for product follow-up work to indicate the direction.

1. User segmentation

Almost most of the products have targeted user groups, all to the user more certain standards to distinguish, how to better divide the user groups:

A. Demography: Gender, age, level of education, marital status, income, etc.;

B. Technical Overview: Knowledge about the content of the site (totally ignorant, ordinary people, professionals, etc.);

C. Internet usage: How often users use the site each week, and what aspects of their lives will be used in the site;

D. What kind of websites do you like to use?

Note: The requirements of different user groups may be contradictory and the user segmentation group needs to be flexibly adjusted according to their own project requirements.

2. User Research

How to get information from users requires a targeted survey and focus group.

Want to know how users use a particular feature of a website? Understand why they use this feature?

For example, there are user interviews, field surveys, task analysis, user testing, card sequencing and other methods to constantly verify whether the information we collect is correct, is the user really need

3. Create Personas

must ensure that the entire design process to keep the user in mind, the personas are virtual, representing the entire user's needs, is the user research information reorganization linked together, so that the task lifelike, anytime, anywhere to consider the role needs, the creation of representative scenes.

When deciding on a site's user experience design, it is important to remember the needs of the user groups represented by Janet and Frank, and in order to help us remember their needs, all must visualize the persona and always remember the user's needs.

2. Scope Layer

Need to write a comprehensive project requirements document, the user needs and site goals into the site should be provided to users what kind of content and functionality, to avoid the scope creep.

Know what is being built?

and you know what you don't need to build? This is also very important, can not conform, blindly follow suit. Be clear that you never need to build, and now do not need to build, can be prepared for the later iteration version .

Project requirements documentation to identify the content requirements for the entire project. The backend database is also very relevant.

Content requirements: What forms of content are needed-text, images, audio, video

Size of specific content--word range, pixel size, download file bytes, audio and video sharpness, content update frequency, Presentation mode

Prioritize requirements-what is the most desirable content for users? How feasible is it to achieve these requirements?

3. Structural Layer

The scattered fragments are formed as a whole to determine the option patterns and order, priority of each to be presented to the user.

This level mainly includes the interaction design and the information architecture, mainly based on the interactive flowchart and the information architecture diagram.

A. Interactive design: to design a structured experience for users, to identify possible user behavior, how the system fits and responds, to influence the user to perform and complete the task options, and ultimately to determine which features should be completed on which pages.

Conceptual model: How will the interactive component work? Can simulate real-life corresponding to the physical, such as shopping cart, can be very good and the user to achieve interactive functions.

Error handling: When the user makes a mistake, how the system reacts, when the error first occurs, how to prevent the system to continue to make mistakes, it is best to design the system can not be wrong or difficult to make mistakes. Finally there is a redo or undo function. Delete is not completely deleted, but put into the Recycle Bin.

B. Information Architecture: Organization management, classification, sequencing, how to convey information to the user's options, design organization classification and navigation structure.

Create a classification system to ensure that the user considers each step to be reasonable, and whether the current step naturally extends the previous step of the task,

Products are living individuals, and back-end code design also has the same requirements, to have a good robustness, to accommodate changes in growth and adaptation, wait until the late addition of content will not have much impact, can also be a good combination.

Structure method: Organization principle, naming principle, all should let the user find the road that want to go in the structure of the whole website. The entire site to be able to maintain a good consistency. To be able to use the language specification of user attributes well.

4. Frame Layer

How the feature is implemented on the page.

Interface design: let users see "the most important things" at a glance

Navigation Design: to provide users with the ability to go to a place

Information design: creating ideas for users

Phase diagram: interface design, navigation design, information design, three integration of the product, the relationship between the three, many factors must be considered at the same time

A. Interface design: Understand what users do not need to know, reduce visibility, and organize the behaviors most often used by users. It is easy to make the user complete the goal, and carefully consider the default values for each option. The selection of different functional controls (buttons, checkboxes, radio boxes, text boxes, drop-down menus, multi-select menus), providing a timely error description message.

B. Navigation design: Tell the user where? Where can I go? The navigation design must create a relationship between its content and the user's current browsing page.

The entire navigation includes multiple systems: Global navigation, local navigation, contextual navigation, friendly navigation, site maps, index tables, and more.

C. Information design: Group and organize scattered information, reflect the user's ideas, and sometimes information design is visually presented: such as pie chart or histogram who better presentation of data?

D. wireframe: Plan the entire page layout and refer to the document interaction design and content requirements specification when necessary.

5. Presentation Layer

Emphasis: visual design is not only to beautify, but to meet all the above four levels of all objectives .

What is aesthetic assessment criteria is not specific.

But to observe: visual design brand image, is it in line with strategic positioning?

Does visual design break the structure?

Does the visual design support the goals set by the previous layers well?

Does the visual design make the options available to the user clear?

Evaluation principle: Where Does your sight fall first? Which design element attracts the user's attention in the first time? Are they important in terms of strategic goals? The first time the user notice the things and product goals are the opposite?

Implementation details: Squint or slant to look at the product page until you can not recognize any details. Long distance observation page, do not look at the details, do not think too much, unconscious movement, determine the place of sight to stay?

Successful visual design features: The line of sight that the user follows is a smooth path. Not too crowded or too jumping, to guide users to better accomplish goals or tasks.

Design principle: Consistency principle: internal and external consistency, color scheme layout to maintain the general consistency.

Contrast principle: The appropriate contrast draws the user's attention to the key parts of the interface. No comparison of the eyes around the free, too much contrast will make the page crowded, messy.

Style guide documents: mainly including design grid, color scheme, font standards, logo application guide, etc.

The most important thing in the presentation layer is a set of high-fidelity prototypes. Of course, there are also many handy tools to create prototypes, such as Axure

Create a better user experience

Five levels of content to have a systematic understanding of the architecture.

1. What is the level of the problem you are trying to solve?

2. understand what the consequences of the solution will affect?

1. What is the level of the problem you are trying to solve? For example: If you already know that the big purple button on the homepage is a problem, is the button too big or purple inappropriate? Which of them needs to change (belong to the presentation layer)? Is this button placed in the wrong place on this page (belonging to the frame layer)? Or does the button say that the functions represented are not working the way the user expects them to be (at the fabric level)? Find the root of the problem to better solve the problem.

2. Understand what the consequences of the solution will affect? Keep in mind that every decision you make can have a "ripple effect" on its upper and lower levels, and that a very good navigation design that works in one part of the site may not fit into another part of the fabric layer at all. The interactive design of the Product Selection Wizard may be an innovative approach, but does it meet the needs of "technical phobia users"? All levels should be considered, in order to better create a more complete, with a systematic user experience.

The above five levels of each part of the content has a lot of space worth exploring, are worth in-depth study, combined with the needs of the work of learning, but first with the entire framework of understanding, to have a better foundation.

User experience factor--product system design method