User Experience elements-user-centric product design note (2)

Source: Internet
Author: User

Chapter 5 structure layer


A method involving "Designing a structured experience for users" is called interactive design. In terms of content construction, the information architecture is used to build a user experience. The interaction design and Information Architecture both emphasize one key point: Determine the "Mode" and "sequence" of each element to be presented to the user ".


Interaction design focuses on describing "possible user behaviors" and defining "how the system works with and responds to these user behaviors.


ProgramMembers are most concerned about two aspects of the software: "What it does" and "how it does it ".


Users' views on how interaction components work are called conceptual models. Planning the conceptual model helps you make consistent design decisions.


We do not have to clearly inform our users of the conceptual model. This will confuse users.


Error handling:

    1. The first and best way to prevent errors is to design the system as the one that cannot make mistakes.
    2. The second method to avoid errors is to make the errors difficult.


Effective error messages and self-explanatory interfaces can help users correct errors after they occur. For errors that cannot be recovered, providing a large number of warnings is the only preventive method that the system can provide. This warning can only be used when the user actually notices it. Such warning prompts usually cause the user to ignore what is really important and are also considered as harassment rather than help.


Information Architecture Studies how people perceive information. For products, information architecture focuses on the rationality and significance of information presented to users.


On Content-based websites, the main task of information architecture is to design the structure of organization classification and navigation, so that users can efficiently and effectively browse website content. The information architecture is closely related to the concept of information retrieval: design a system that allows users to easily find information.


You can use either of the following methods to establish a classification system: from top to bottom or from bottom to top.

From top to bottom, the information architecture method will be taken into consideration at the strategic layer, that is, the structure design will be carried out directly according to the product objectives and user needs.

The bottom-up information architecture method also includes the Primary and Secondary categories, which are based on the analysis of "content and functional requirements.


The most important criterion of structure quality is not "how many steps are required in the whole process", but "does the user think every step is reasonable ", and "whether the current step naturally continues the task in the previous step. "Users will like a clearly defined seven-step process, rather than a confusing, barely compressed three-step process.


A complete user experience, including the website structure, is built on an understanding of the website objectives and user needs.


An adaptive information architecture system can accommodate new content as a part of the current structure, or add new content as a complete new part.


Nodes can be arranged in a number of weeks:

    1. Hierarchical structures, tree structures, center radiation, and hierarchical relationships are easy for users to understand, and software tends to work in hierarchical ways. Therefore, this type of structure is the most common.
    2. Matrix Structure, which can accommodate different users at the same time. However, if you want users to use this as the main navigation tool, problems may occur in the matrix with more than three dimensions.
    3. The natural structure is suitable for exploring topics with unclear or constantly evolving relationships. However, the natural structure does not provide users with clear instructions, so that users can feel which part of the structure they are in. Some entertainment or educational websites are a good choice.
    4. Linear structures are often used in small-scale structures, suchArticleOr a single topic; large-scale linear structures are used to limit the order of content to be presented for applications that are critical to meeting user needs, such as teaching materials.


The organizational principle is basically that we decide which nodes should be grouped into a group, and which nodes should be kept independent.


Strategy tells us "What are users' needs", and scope tells us "What information will meet those users' needs ". The structure must specifically identify the important information in the user's mind. A successful User Experience means to predict the user's expectations in advance and incorporate them into the design.


"Using the user's language" and "maintaining consistency" is very important. The tool that emphasizes consistency is called a controlled dictionary. Controlled dictionaries are a standard language for websites.


Unlike a simple list of words used, a dictionary provides frequently-used words that are not included in the standard terms of the website.


Metadata is simply "information about information", that is, information about information in a structured manner.


The most important thing about architecture diagram is to record conceptual relationships: Which types need to be put together, and which need to be independent? How do I cooperate with each other in the interaction process?


A full-time expert in charge of architecture issues is sometimes called an "Interaction Designer", but usually an "Information architect ".


If your website development is mainly about content update and you do not need to redesign and develop the entire website on a regular basis, it may not be appropriate to hire a full-time information architect.



Chapter 6 framework layer


The structural layer defines how our products will operate, and the framework layer determines what features and forms are used for implementation.


For Functional Products, use the interface design to determine the framework. For information-based products, we need to solve a unique problem: navigation design. Information design is required in both functional and information aspects. It is used to present effective information communication.


If it involves the ability to provide users with the ability to do something, it is a "interface design ". If you are provided with the ability to go somewhere, it is a "interface design ". If it is to convey the idea to the user, it is "information design ".


Creating a successful user experience requires you to have a clear and clear reason when making every decision. It is important to keep your interface consistent with those habits you have developed, but more importantly, the interface should be consistent with itself. If both features use the same conceptual model, They are likely not to have similar interface requirements. Using the same operation habits in these two places can quickly adapt users who are familiar with one feature to another.


Such concepts as "start", "end", "Return", and "save" appear in a large scope. Give them a unified processing method, so that users can apply the knowledge they have learned from other parts of the system, which helps users achieve their goals faster and make fewer mistakes.


All you need to do in the interface design is to select the correct interface element. What functions should be completed on the interface is determined in the interactive design of the structural layer. how these functions can be recognized by users on the interface is within the scope of interface design.


Successful interface design is the interface design that allows users to see the "Most important thing" at a glance.


Experienced programmers always treat every possibility equally, whether it represents a user or one thousand users. This idea does not work for interface design. A well-designed interface is the most common behavior of users, while making these interface elements the easiest way to get and use.


The navigation design of any website must meet the following three objectives:

    1. It must provide users with a way to jump between websites.
    2. The navigation design must express the relationship between these elements and the content they contain.
    3. The navigation design must convey the relationship between its content and the user's current page.


If a public search engine like Google adds your website to favorites, any page may become the portal to your website.


Several common navigation systems:

    1. Global Navigation provides a path that covers the entire website.
    2. Local navigation provides a path to the "nearby location" in this architecture.
    3. The secondary navigation provides a shortcut for global navigation or partial navigation to quickly achieve the relevant content.
    4. Context navigation, also known as "inline navigation", is a type of navigation embedded in the content of a page.
    5. Friendly navigation provides users with links that they usually don't need, but they are used as a convenient way.
    6. Some navigation is not included in the page structure, but exists in their own way, independent of the content or functions of your website. These are called remote navigation.
      1. Website map is a common remote navigation tool. It provides users with a simple and convenient way to browse the overall structure of a single-sided website.
      2. An index table is a list of links to related pages in alphabetical order. It is very similar to the index tables listed at the end of some books.


Information Design often acts as an adhesive that aggregates various design elements together. Finally, information design becomes a decision on how to present the information so that people can easily use or understand it.

At any time, the system should provide users with information that can correctly use the system (whether the user has an error or is just getting started), which is the work scope of information design.


The identifier used to help users understand the system "where they are" and "where they can go. In a website, the logo usually involves navigation design and information design.


A page or line chart is the most intuitive description of all components of a page and how they are combined. It is generally important to note and recommend that you refer to structural charts or other interactive design documents, content requirements or feature specifications, or other types of detailed documents when necessary.


The line chart usually includes additional instructions to illustrate website behavior that is not obvious to the online and structural charts.


You do not need to prepare a line chart for every website interface. Designers responsible for the strategic layer, scope layer, and structural layer can use the line diagram to ensure that the final product can meet their expectations. The person in charge of building the website will use a line chart to answer questions about how the website should act.


The line diagram is a method of integrating all three elements in the structural layer: arranging and selecting interface elements to integrate the interface design, and integrating the navigation design by identifying and defining the core navigation system; information Design is integrated by placing and arranging the priority of information components.



Chapter 7 presentation layer


One of the simplest ways to evaluate a product's visual design is to ask the question: where did your sight first fall? Which design element attracts the user's attention immediately? Are they important for strategic goals? Or do the things that users notice immediately contradict their (or your) goals?


If your design is successful, your eye movement pattern should have the following two important features:

    1. They follow a smooth path.
    2. Without using too much details to scare users, it provides users with effective selection and some possible "Guidance ".


It attracts users' attention to the key part of the interface. comparison is an important means to help users understand the relationship between page navigation elements.


Error messages on the webpage interface are usually incorporated into other elements of the page. They are highlighted by giving different colors to the text or using a conspicuous image, the entire interface is completely different.


Comparison can be used to guide users to view the page or draw their attention to several key elements. Excessive comparisons lead to chaotic vision.


Consistency enables your design to communicate information effectively without causing user confusion or anxiety.


Keeping the size of visual elements in full size makes it easier to combine them into a new design as needed.


Internal consistency issues. This means that different design methods are reflected in two different parts of the product.

External consistency issues. This means that this product does not reflect the same design method used in other products of the same enterprise.


Do not use very similar but not exactly the same style. There must be enough "contrast" between styles to attract the user's attention when you need them, but do not use too wide and diverse styles.


Visual design does not have to follow the line diagram precisely-as long as it takes into account the importance of the relevant level and the combination of the elements in the line diagram.


Style Guide, which summarizes all elements in each aspect of the visual design, from the maximum to the minimum.


Chapter 8


The difference between "successful methods" and "methods that are doomed to failures" lies in the following two points:

    1. Understand the problem you are trying to solve.
    2. Understand the consequences of these solutions.


User Experience decisions are always reflected in the following scenarios:

1. design determined by the status quo

2. design determined by imitation

3. Design determined by the leadership


"User Experience evaluation"-a long time has elapsed since we asked these questions. In this way, it is likely that a product meets all technical needs but is useless to your users. Finally, you may release a product that is known to have been damaged but has no chance to fix it.


You cannot simply rely on your users to clarify your needs. The biggest challenge is "understanding their needs more accurately than users themselves ".


Designers and developers always regret not paying attention to the strategy, scope, and structure at a certain stage of their work.


Focusing too much on visual design, and excluding other user experience elements, more than one website is declared bankrupt. If you always start from the complete user experience during website development, the final website you get is a valuable asset, not an endless debt.



If you use word2007 to publish a video, the film is not displayed or you are prompted to have an attachment but no attachment, please go to the independent blog to view the complete article!

Modify and add content of the article only in the independent blog!

My independent blog: kiddie-Http://

Link to this article:Http://

You are welcome to reprint it. Please indicate the source of this article.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.