Wondershare EdrawMind
MindMap Gallery User Experience Elements Reading Notes
- 15
User Experience Elements Reading Notes
This book uses concise language to systematically explain that the integration of design, technology and business is an important development trend. The book has 8 chapters in total, including about user experience and why it is so important, understanding these elements, strategic layer, scope layer, structure layer, framework layer, presentation layer and application of elements. This book uses clear instructions and vivid graphics to analyze the complex connotations of user-centered design (UCD) for website design, and focuses on ideas rather than tools or techniques, so that your website has a high-quality experience. process!
Edited at 2024-11-25 17:54:37
- Reproductive system
This template shows the structure and function of the reproductive system in the form of a mind map. It introduces the various components of the internal and external genitals, and sorts out the knowledge clearly to help you become familiar with the key points of knowledge.
- Interpretation and summary of relationship field e-book
This is a mind map about the interpretation and summary of the relationship field e-book, Main content: Overview of the essence interpretation and overview of the relationship field e-book. "Relationship field" refers to the complex interpersonal network in which an individual influences others through specific behaviors and attitudes.
- Accounting books and accounting records
This is a mind map about accounting books and accounting records. The main contents include: the focus of this chapter, reflecting the business results process of the enterprise, the loan and credit accounting method, and the original book of the person.
User Experience Elements Reading Notes
- Reproductive system
This template shows the structure and function of the reproductive system in the form of a mind map. It introduces the various components of the internal and external genitals, and sorts out the knowledge clearly to help you become familiar with the key points of knowledge.
- Interpretation and summary of relationship field e-book
This is a mind map about the interpretation and summary of the relationship field e-book, Main content: Overview of the essence interpretation and overview of the relationship field e-book. "Relationship field" refers to the complex interpersonal network in which an individual influences others through specific behaviors and attitudes.
- Accounting books and accounting records
This is a mind map about accounting books and accounting records. The main contents include: the focus of this chapter, reflecting the business results process of the enterprise, the loan and credit accounting method, and the original book of the person.
- Recommended to you
- Outline
"User Experience Elements" Reading Notes
Chapter 8 Application of Elements
The most important part of creating a good user experience is to collect a large number of problems that need to be solved urgently, and the differences between success and failure.
Do you understand the problem you are trying to solve?
Do you understand the consequences of the solution?
Scenarios where user experience decisions occur
Design determined by the status quo
User experience determines the technical support behind it, which is a factor that limits the realization of ideas.
Design determined by imitation
Occurs in similar situations where the user experience depends on other existing products
Design determined by leadership
When user experience is driven by personal preferences instead of user needs or product goals driving experience design decisions
Core elements of user experience
Ask “reasonable questions”
The "user acceptance test" placed at the end of the user experience cannot replace a well-thought-out and well-prepared user experience process.
Product design and user experience engineers are in a marathon, constantly iterating and growing.
Chapter 7 Presentation Layer
Content, functionality and aesthetics are brought together in the presentation layer to satisfy the user’s sensory experience
Presentation layer definition
Solve and make up for the logical arrangement problems of the framework layer
Focus on information design and decide how information elements are grouped and arranged
Pay attention to visual design and decide on visual presentation of arrangements
Reasonable design perception
5 aspects of feeling
sense of smell
Taste
touch
hearing
Vision
loyal to the eyes
Design elements are designed to attract the user’s attention in the first place
Two characteristics of the trajectory of the user’s eyes
Follow the path of a process
Provide users with some possible guidance for effective choices without intimidating them with too many details.
It means to guide users reasonably and don’t let them be surprised and angry by your guidance process.
Contrast and Consistency
Use contrast to achieve a prominent effect to attract users' attention; the difference must be clear enough to convey information.
Maintaining consistency in design ensures effective information transmission
Consistent size of visual elements, grid line layout,
Internal and external consistency
Two issues in product design
Internal consistency problem: two places on the same product reflect different design methods
Solution: Separate the elements in different environments, design them uniformly, and then distribute them to different interfaces
External consistency problem: the product does not reflect the same design approach in other products of the same company
Solution to establish a unified corporate brand image and standardize brand elements
Color scheme and typography
Color is one of the most effective ways to convey brand identity to the outside world
When creating a color scheme, you need to consider its use in different scenarios, and the color you use must be inclusive.
Typography also helps with brand recognition
Design synthesis: that is, a visual product, a high-fidelity image
Style Guide: Summarizes various standards of visual design and becomes a unified norm for the company
Chapter 6 Framework Layer
Frame layer definition
The structural layer defines how the product operates through framework and interaction design.
The framework layer focuses on the realization of certain functions and forms, so what needs to be considered is the independent components and the relationships between them.
Frame layer element
Functional products - interface design
The design provides users with the ability to do certain things and implements specific functions through structural layer interaction.
Information products—navigation design
Provide users with the ability to go somewhere and help users navigate through lists of information
Both function and information - information design
Communicate ideas to users, characterized by wide range, providing support for the first two designs
The three elements interact and are closely combined
Feature boundaries can be ambiguous, but defining them as separate domains helps us evaluate whether a solution is appropriate.
Habits and Metaphors
Habits and reflexes are the basis for how we interact with the world
Habits help us apply reflection to different contexts
Don’t stick to routines when they provide a successful user experience or have clear benefits
It is important for the interface to be consistent with users, and this consistency should also be reflected in the entire product
We need to refrain from using “metaphors” when designing interactions
It is a design that symbolizes a certain display of cognition.
If the "metaphor" method cannot reveal the essence of the feature, it will confuse the user's perception.
When using metaphors, websites need to provide context
Use “metaphors” to reduce the amount of guesswork users have to make when understanding your product
Interface design
Interface design is to choose the correct interface elements to help users span between different interfaces, and to make users aware of the functions that can be provided on each interface.
Successful interface design
Let users see “the most important things” at a glance
Good interface design should organize the behaviors users use most often and make these interface elements accessible and usable in the easiest way.
Interface design skills to make the user process easier
Consider the default value for each option
A system that remembers the user's last selection status
The limitations of technical tools and systems themselves limit the interface options we can choose from
Technology cannot meet design needs
The way interfaces interact is constantly changing
There are design standards for elements, such as design standards for Windows systems and iOS systems.
Navigation design
Three major goals of navigation design
Navigation design provides a way for users to jump between websites
Navigation design must convey the relationship between elements and the content they contain
Navigation design must convey the relationship between its content and the page the user is currently browsing.
The role of navigation, telling users “where they are” and “where they can go”
Common navigation systems
Global navigation: Provides a set of key points where users are most likely to need to get from the final page of the website. Global navigation may include links to all major sections of the website.
Local navigation: Provides users with directions to "nearby places"
Assisted Navigation: Provides quick access to a point quickly
Contextual navigation: When users read text, jump hyperlinks are typical
Friendly navigation: Provide users with a convenient way to quickly find them when they need it.
Remote navigation: content or functions that exist independently in their own way, which I understand as user guides, etc.
Site map: A concise shortcut to the overall structure of the website, often only displayed to two levels
Index table: sorted alphabetically, links to related pages
information design
Information design serves to bring together various elements to determine the presentation of information.
Information design: "grouping" and "organizing" scattered information
We need to classify and organize information elements in a way that “reflects users’ thinking” and “supports their tasks and goals”
information presentation design
Such as error prompts, which can tell users how to use them correctly.
indicator
The combination of information design and navigation design supports the question of helping users understand “where they are” and “where they can go”
Indicates that informational design elements refer to page elements
Wireframe
Wireframes are rich in explanations to help users understand
Incorporate all page layouts into a unified detailed document, called a page schematic or wireframe
The role of wireframes
As a template for the interface to be built
The first step in the visual design process is to solve product operation problems
It is the convergence point of information architecture and visual design, and a tool and carrier for collaboration.
Wireframe integrates three major elements
Integrate interface design by arranging and selecting interface elements
Integrate system design by identifying and defining core navigation
Integrate information design by preventing and prioritizing information components
Chapter 5 Structural Layer
Shift the focus from abstract decision-making and scope issues to specific factors that have a greater impact on the final user experience
Functional products
“Interaction Design” (designing structured experiences for users)
Content construction
"Information architecture" (considering organizational management, classification, and sequencing)
The common emphasis of both
The "mode" and "order" of elements presented to the user
Requires us to understand users
Ways of working, behaving and thinking
interaction design
Focus on describing "possible user behavior" and defining "how the system cooperates and responds"
conceptual model
A user's view of how an interactive component will work is called a conceptual model
Conceptual models help make consistent design decisions
Example
The concept of shopping cart is implemented as an icon station, which means that users will add products, so the "shopping cart" is a container concept.
Then it tells us that we need to do some behavioral design around the container, such as "putting in" and "taking out" behaviors, etc.
A conceptual model can reflect a component of a system or the entire system
The conceptual model is the user's understanding of things. Following this design concept can be combined with the user's living habits and reduce learning costs. At the same time, the conceptual product displayed through the program will not be as easy to use as in reality.
But we can restore a system based on a concept
Understanding how users think helps us pick the most effective conceptual models
The best conceptual model is one that users can intuitively complete the tasks they want to do when using it.
Don’t conceptualize real-world items as they are, this will only create misunderstandings
Error handling
How does the system react when users make mistakes and prevent users from making mistakes again?
method
Design the system so that it cannot make mistakes. Once a mistake is made, nothing can happen after the mistake.
Make it difficult for errors to occur, and once an error occurs, help users find the error and correct it
But be careful not to interfere too much with user behavior (word’s automatic error correction)
Effective error messages and self-explanatory interfaces help users correct errors after they occur
information architecture
Study how people perceive information and focus on whether the information presented to users is reasonable
structured content
The content is designed to organize the classification and navigation structure on the main website.
Information architecture creates a classification system to meet user needs and website goals
Using a "top-down" information architecture approach will directly design the structure based on strategic considerations, i.e., product goals and user needs.
It is easy for important details of the content to be ignored
Using "bottom-up", based on "analysis of content and functional requirements", start from existing data and classify it to a high level
Too precise to be flexible enough to accommodate future changes or additions
Combine the above two methods to find a balance point
Do not forcefully increase the number of restricted categories, as long as they can correctly reflect user needs.
The most important thing between content structure is that users think that every step is reasonable
Advantages of an efficient structure: the ability to “accommodate growth and adapt to change”
A complete user experience, including website structure, is based on an understanding of website goals and user needs
structural approach
The basic unit of information architecture is a node, which corresponds to any information fragment or combination.
It means that the node definition can define the degree of subdivision according to the specific situation.
Common node arrangement forms
Hierarchical structure (tree structure, hub and spoke)
matrix structure
Allows users to connect between nodes through multiple dimensions and multiple paths to connect different structures.
But it’s best not to exceed three levels
Natural structure: It does not respect the consistent pattern. The nodes are connected one by one and need to be explored.
Antecedent results: coherent language processes, etc., presented in order, single point
organizing principles
Nodes are placed in the information architecture according to organizational principles
A structure that can correspond "product goals" and "user needs" and is suitable for specific groups of users. Such attributes can be called cross-sections.
Language and metadata
In order for users to understand our structural instructions, naming principles need to be considered
Controlled lexicon: used to emphasize consistency and use a standard set of language
Similar word dictionary: a collection of synonyms and similar words
The above two dictionaries can help suggest metadata
Metadata: a structured way of presenting information
Team roles and processes
The document should clearly describe the structure of the website, using schematic diagrams and visual presentations (such as framed mind maps, flow charts)
A system for illustrating website structure - "visual vocabulary"
Download address: www.jjg.net/ia/visvocab/
Book information
Author: [US] Jesse James Garrett
is one of the founders of Adaptive Path
He is an active advocate of information architecture and user experience, and his personal website www.jjg.net is one of the most popular websites providing information architecture resources.
Subtitle: User-centered product design
Publisher: Machinery Industry Press
Publication year: 2019-4
Related book recommendations
"Crazy Rumor"
"Seize the Mind"
"Behavioral Design: Creating Peak Experiences"
Chapter 1 Why user experience is so important
What is user experience
Product Development: What is the product used for?
User experience: how the product works, how the product connects and functions with the outside world
Metric - Conversion Rate
User experience can be measured using the metric “conversion rate”
Such as ROI, second bounce rate, bounce rate
User experience purpose-efficiency
Help users quickly
Reduce user errors
User-centered design
Ways to create engaging, efficient user experiences
Decision made after careful consideration and argumentation
Chizi said - I don’t completely agree with this conclusion
In an era of serious product homogeneity, the proportion of product experience in the entire product life has dropped sharply, and flying is the decisive factor.
The fragrance of wine is still afraid of deep alleys, channels and promotion
price war, inducement
summary
It is important to users. If the experience is not good, no one will use it. If no one uses it, it will be in vain.
User experience forms the customer's overall impression of the company, defines the difference between the company and its competitors, and determines whether the customer will come back again
Chapter 2 Understanding User Experience Elements
five levels
Presentation layer
The composition of text and pictures expresses information and allows users to interact directly.
Architecture layer
The layout and layout of buttons, controls, pictures, and text are designed to pursue practical efficiency, simplicity, and unified beauty.
structural layer
The interconnection structure between application interfaces allows users to achieve their goals step by step through structural design.
scope layer
Determine the number of functions and features, and rationally design the scope of applications, so as not to create a bloated and confusing product.
Determine what functions the product can provide, this is what the scope needs to determine
strategic layer
There are two levels of strategic thinking: what users can get from our products, and what we can get from our products.
A good strategy is that the product can not only provide users with use value, but also create economic value for developers, etc.
Build from the bottom up
5 levels, each level is determined by the level below it. If the connection is not appropriate, the project will deviate from the normal track.
Therefore, issues at the lower level (that is, understood as decisions and definitions made at the lower level) will affect the development and performance of the upper level.
Under such constraints, the correct R&D progress is: "Let no work at any level end before the work at the lower level is completed."
basic duality
Duality mainly refers to the fact that due to the differences in the nature of different websites and products, they can be divided into two forms of providing functions and information in terms of use.
The main two products
Functional platform products
Designers focus on the completion of "task", and user operations are incorporated into a process. We need to think about how users complete this process.
In this form, products such as flow charts are born
Information media products
The design focuses on "information", thinking about what information is provided and what the information means to users.
The information in the app is all-encompassing, and what we need to provide is a combination of information that can be found, understood, and meaningful.
Elements of user experience
Elements refer to the specific components of subdivisions at five levels
strategic layer
User needs
product goals
scope layer
Functional products - functional specification
Information products - content requirement (content requirement)
structural layer
Functional products—interaction design
Information products—information architecture
Frame layer
Functional products, functional products—information design
Functional products—interface design
Functional products—navigation design
Presentation layer
Functional products, functional products—sensory experience
Apply these elements
In real situations, each element area is fuzzy
Completing the goals at each level requires the role of each element project
Two factors that impact end-user experience
content
technology
Chapter 3 Strategic Layer (Product Goals and User Needs)
Guide both companies and users on product expectations and goals, and help establish and formulate strategies for all aspects of user experience.
Describe the company's product objective by: "What do we want to get from this product?"
Find the question of user needs (user need) through: "What do our users want to get from this product?"
The above are two processes that are constantly clear
Clarify “product goals”
Examine the goals of your product or service so that they can be expressed verbally and create a consensus with those around you
Product goals should avoid going to extremes - "too broad" or "too specific"
Understand the user's problem clearly and clearly understand the impact of this decision
Several clear indicators
Brand identity: mainly refers to the design of brand image, which can convey the concept of the brand to the outside world through logo, slogan... and occupy consumer awareness.
Success Criteria: Some Trackable Data Metrics
User visits
Product exposure
Clarify “user needs”
"Traps" in product design
Limitations of stance, fictitious users, and misunderstood needs
Differences in user groups lead to complex needs, so user needs need to be examined on a wide scale
Define who our users are to conduct proper user research in order to prioritize needs
Strategy
User segmentation: dividing users into smaller groups with common key characteristics
From a demographic perspective
From the perspective of consumer mentality profile (psycho-graphic profile)
A psychological analysis method used to describe a user's views and opinions about the world, especially something related to your product.
Other considerations: user’s familiarity with and use of technology, how users use information, user’s experience
Find your users – usability and user research
Market research methods: "questionnaire survey", "focus group, user interview"
Fieldwork: Practical research in real-life situations
task analysis
Based on the fact that the interaction between users and products occurs in the environment of performing a certain task, the process of users completing tasks can be studied through two methods: user interviews and on-site surveys.
User testing: Invite users to test your upcoming product or low-fidelity prototype
Card sorting method: used to explore how users categorize or organize various information elements
Usability: looking for ways to make the product easier to use
Create task role
Fictional characters, connected data, keep users at ease during the design process
Team roles and processes
Those involved in strategy in the team can be strategy experts or senior decision-makers, but ordinary employees cannot be ignored. Their feedback is likely to be based on real user needs.
strategy document
To define product goals and user needs, it is necessary to analyze the relationship between the goals and indicate how to integrate into the market environment.
The analysis depends on the direct opinions of decision-makers, ordinary employees, and users
Documentation is concise
shared reading
Chapter 4 Scope Layer
Defining the scope layer does two things: it is a valuable process and it produces a valuable product
Process: Hypothesis stage, consider potential conflicts and rough points in the product, and plan and arrange solutions
Product: Define all the work to be completed by the project, and the definition needs to be clear and specific
action strategy
Define product requirements with documentation
Clarify “what does not need to be done now” and form a long-term plan
Demands that are currently difficult to meet can become the basis for launching the next version, forming a continuous cycle of development
Features and content
The “scope layer” answers: “What are we trying to develop?”
Functional products
Functional specifications: What should be considered as the functions of the software product and the corresponding combinations
Information products
Content: What content do we need to edit and present?
The functions and content provided by the software are defined as features
Content is often managed through a content management system
Content management system: realizes the automated process of content production and can display and deliver content to users
Define requirements
Requirements may apply to the entire product, or to specific features
Three categories of needs
Some of the needs people talk about are clearly good ideas
Some unclear user needs can be transformed into different needs to solve the problem
Features that people have not yet discovered are beneficial and can be turned into needs
Find potential needs: Put virtual characters in short stories and successfully complete potential needs through user experience
Functional specifications
The focus of functional specifications is not on Sister Xie, but on functional definitions that may be confused during the design or testing process.
How to write a functional specification
Describe optimistically, describe what the system is going to do, and "prevent" bad situations from happening.
Be specific: explain the situation in as much detail as possible
Avoid subjective expectations: be able to provide numerical and standardized reference support
content requirements
The presentation form of information website is content requirement, which consists of text, images, audio, etc.
Information websites provide FAQ (frequently asked questions)
Content requirements should provide a rough estimate of the size of each feature: text word count, image pixels, downloaded file bytes, PDF or audio file size
It is necessary to consider the needs of content planning and determine the frequency of content updates from product planning.
All content information can be recorded in the content list
Prioritize needs
One strategic goal generates multiple demands, and one demand can satisfy multiple strategic goals.
Needs assessment: Whether the needs can meet the strategic goals and how likely the needs are to be realized
Some features need to be weighed against others to get a coherent, unified product
Pay attention to feature suggestions that may change the strategy, and strengthen strategic goals rather than reviewing strategic goals based on needs.
Management often extends from product features to the strategic level
The general meaning is that if we achieve this goal, our products will be as good as they are, rather than what we need to do to achieve this.
This process requires the art of communication