chapter 1 why user experience is so important

what is user experience

user experience is how a product contacts with the outside world and functions, that is, how to "touch" and "use" it

from product design to user experience design

1. The process of creating a product is more like developing, gradually establishing and perfecting the characteristics and functions of the product until they are composed.

2. The product design is determined by the function-the shape is subordinate to the function, which is not completely correct. It should be determined by the user's own psychological feelings and behaviors.

3. User experience design usually solves the comprehensive problem of application environment. User experience design should give consideration to both visual and functional aspects, and solve other problems faced by products.

user experience and websites

More and more enterprises have begun to realize that providing high-quality user experience is an important and sustainable competitive advantage-not only for websites, but also for all types of products and services.

User experience is business opportunity

1. Features and functions are always important, but user experience has a greater impact on customer loyalty.

2. Conversion rate is a common way to measure the effect of user experience (conversion rate is the most commonly used measure of investment benefit)

3. Any efforts made in user experience are aimed at improving efficiency (helping people to work faster and reducing their chances of making mistakes)

Care about your users

1. The method of creating attractive and efficient user experience is called. In every step of product development, users should be taken into account.

2. The key of user-centered design is to consider the user's experience, break it down into its various components and understand it from different angles

3. For the visiting users, you must plan a sticky, intuitive and even pleasant experience for them

Chapter 2 Understanding these elements

Understand each one that users may take in the process of using. And to understand the expected value of users at each step in this process

Five levels

1. Presentation layer: composed of pictures and words

2. Frame layer: buttons, space, photos and text. Optimize the design layout to achieve the maximum effect and efficiency of elements.

3. structural layer: design how users get to a page and where they go after they finish their work.

* structure layer and frame layer: frame is a concrete expression of structure. The framework layer determines the position of interactive elements on the checkout page, while the structure layer is used to design how users get to this page. The frame layer defines the arrangement of various elements on the navigation bar, allowing users to browse different commodity categories, while the structure layer determines which categories should appear where.

4. scope layer: the structure layer determines the most suitable combination of various features and functions of the website, which constitute the scope layer of the website. Whether a function should be one of the functions of the website is a problem to be solved at the scope level.

5. strategic level: what operators want from the website and what users want from the website.

bottom-up construction

1. At the bottom, we don't have to consider the appearance of the website, product or service, but only care about how the website meets our strategy and meets the needs of users.

2. at the top level, only care about the specific details presented by the product.

3. The higher the level, the more detailed the decision and the more detailed the design.

4. Each level is determined according to the level below it.

User experience elements

1. Strategic level: we pay attention to the external user needs of the enterprise, and the corresponding user needs are our own expectations for the website. (product goal)

2. Scope level: functional products, creating functional specifications (describing product pairs of "functional combination"). Information products, content requirements (detailed description of requirements of various content elements)

3. Structure layer: functional products, interaction design-define how the system responds to users' requests. Information layer products, information architecture-reasonably arrange content elements to promote human understanding of information.

4. Frame layer: information design, an information expression way to promote understanding. Interface design, arrange the interface elements that can make users interact with the functions of the system. Navigation design, the combination of some elements on the screen, allows users to walk through the information architecture.

5. the presentation layer is the perception experience of the final product.

Apply these elements

1. In each layer, these elements must interact with each other to achieve the goals of that layer

2. Two additional factors that affect the user experience: content and technology

Chapter III Strategic Layer

1. Definition of Strategic Layer: The combination of "product goals" and "user needs" constitutes a strategic layer, that is, Product goal: what we want to get from this product. User needs: What do our users want from this product?

2. product objectives: a. business objectives, in order to avoid too specific and too broad objectives, we should draw a conclusion after fully understanding the problem. Clearly define the "conditions for success" rather than the "path to success".

B. brand recognition, for any website, one of its basic goals that needs to be clearly described is brand recognition. Brand recognition: In addition to trademarks, colors and fonts, it is more important to have a conceptual system and emotional response (which exerts a subtle influence on users). You must decide whether the brand image is formed unintentionally or is the result of careful arrangement by the product designer.

C. Success criteria, some traceable indicators (conversion rate, number of return visits, number of impressions) are used to show whether the product meets our own goals and users' needs after it is launched. Sometimes these success criteria have something to do with the website itself and how users use it.

3. User needs: a. User segmentation, which divides users with certain key features or needs into groups. Different user groups have different needs, and creating segmented user groups is just a means to "reveal the ultimate needs of users". The needs of different user groups may also be contradictory, either making trade-offs or choosing different operation methods for different user groups performing the same task.

B. usability and user research, market research methods, questionnaires and focus groups are valuable sources for obtaining basic information of users. On-the-spot investigation refers to a set of complete, effective and comprehensive methods: used to understand user behavior in daily life situations. Task analysis, carefully decompose the precise steps for users to complete tasks. User testing, ask users to help test your products. For information-driven products, card sorting method can be used: it is used to explore how users classify or organize various information elements.

C. create personas. in the process of user experience design, personas are virtual characters extracted from user research and can become examples.

4. team roles and processes: product goals and user needs are often defined in a formal strategic document or vision document.

chapter iv scope layer

function and content

the scope layer determines all functional requirements or functional specifications. Real content is often managed through a content management system.

define the demand

the detailed degree of demand often depends on the specific scope of the project, and the most inexhaustible source of demand always comes from the users themselves.

content requirements

don't confuse the format and purpose of a piece of content.

provide a rough estimate of the size of each feature (only collect the most critical data).

determine that someone is responsible for a content element and its "update frequency".

various users have different needs. Which users want what content-how to present them

Determine the priority of demand

There is often not a one-to-one relationship between strategic goals and requirements.

sometimes a strategic goal will generate multiple demands. On the other hand, a demand can also achieve multiple strategic goals.

the priority level is the primary factor to decide whether to adopt the relevant features suggested by people.

Chapter V Structure Layer

Both interaction design and information design emphasize one key point: to determine the "mode" and "order" of each element to be presented to users.

conceptual model

1. users' views on how interactive components will work

2. design a certain feature of software into a concept that users are familiar with

3. keep the consistency of usage in the development process of interactive design, the consistency of software usage with real experience, and the consistency of interaction in the whole system.

4. Using people's familiar conceptual model will make users adapt to an unfamiliar website more quickly

5. Error handling and prevention: The first and also the method to prevent errors is to design the system to be impossible to make mistakes. Correction: When an error occurs, the system should help users find out the error and correct them (effective error information, self-explanation interface). Recovery: provide users with ways to recover from mistakes (undo)

Information architecture

1. Structured content: The main job of information architecture is to design the structure of organizing classification and navigation, so that users can find and browse the content of the website more effectively. Top-down classification system: direct structural design according to product objectives and user needs. First, it starts with the most extensive contents and functions that may meet the decision-making objectives, and then it is subdivided into sub-categories according to logic. Bottom-up classification system: starting from the existing data, put these data into the lowest level classification, and then assign them to the higher level classification respectively. The most important criterion of structural quality is not how many steps are needed in the whole process, but "Do users think each step is reasonable" and "What is the current step? Whether it naturally continues the task in the previous step. "

2. structural method: the basic unit of information architecture is the node.

hierarchical structure: this parent/child relationship exists between a node and other nodes.

Matrix structure: Matrix structure can help users who come with different needs to find what they want in the same content.

natural structure: this structure does not have a strong concept of "classification", which is suitable for exploring a series of topics with unclear relationship or always evolving, but it is not suitable for users who need to rely on the same path to find the same content next time.

linear structure: it is often used for small-scale structures.

An extensible information architecture can accommodate new content as a part of the existing structure, or add new content as a complete new part.

3. Organizational principles: Generally speaking, the organizational principles used at the top level of the website should be closely related to "website goals" and "user needs". At the lower level of the structure, the consideration of content and functional requirements will have a great influence on the organizational principles you adopt.

4. language and metadata: follow the naming principle of "using user's language" and "keeping consistency". At the same time, avoid "semantic ambiguity or incomprehension".

Chapter VI Frame Layer

In the frame layer, the placement problem is mainly solved

1. Interface design considers the layout of interactive elements.

2. The navigation design considers the layout of elements that guide users to move in the product.

3. consider the arrangement of information elements conveyed to users in information design.

habits and metaphors

the interface should be consistent with the habits that users have already developed, and more importantly, the interface should be consistent with itself.

the conceptual model of website characteristics helps to maintain consistency within the website. If two features use the same conceptual model, the interface and operation can be consistent, and users can quickly adapt to the other feature after getting used to it. Even if the conceptual models are inconsistent, the modules used by these conceptual models should be treated in a similar way (eg: concepts such as start, end, return or save)

The effective use of metaphors is to reduce users' guesses when understanding and using products. Websites can provide context to help users understand the characteristics represented by the metaphors you use, but the more functions and contents you provide, the less reliable your guess will become, and some users will always guess wrong.

Interface design

All that interface design should do is to select the correct interface elements, help users complete their tasks, and make them easy to understand and use through appropriate ways.

a successful interface design is one that allows users to find the "most important thing" at a glance.

Navigation design

1. Navigation design must achieve three goals: to provide users with a way to jump between websites; Communicate the relationship between these elements and the content they contain; Communicate what the content it conveys is related to the page the user is currently browsing.

2. navigation system: global navigation: provides access to cover the whole website. Local navigation: provides users with access to "nearby places" in this architecture. Auxiliary navigation: classified navigation for content, products or user attributes. Context navigation (inline navigation): a navigation embedded in the content of the page itself.

information design

1. classify and arrange these information elements in a way that can "reflect users' thinking" and "support their tasks and goals"

2. indicate signs to help users understand "where they are" and "where they can go" and "which way is closer to their goals", with the help of icons, label systems, typography and colors.

Chapter VII Presentation Layer

Reasonable design perception

1. Five aspects: vision, hearing, touch, smell and taste.

2. Sound can be applied to many different kinds of products; It can be used to inform users and make products more personalized.

3. To evaluate a visual design scheme, we should focus on whether it works well.

contrast and consistency

1. draw users' attention to important parts through comparison.

2. Over-design can also lead to visual confusion, and the differences should be clear enough for users to distinguish that a certain design choice is designed to convey consistent performance to avoid users' confusion and anxiety, and the consistency of plane layout can be maintained based on grid lines.

color scheme and typesetting

1. color, the core brand color is usually part of a broader color scheme, which is to be applied in all materials of an enterprise. The colors used in the standard color scheme of an enterprise are specially selected for them to work together.