UE design process in the Web2.0 era.

 

The era of web is brilliant. This wave of information technology has changed the Internet application model. Today, the development of basic network facilities and the rise of wireless network technology have given e-commerce, SNS, Weibo, mobile applications, Cloud technology and other fields a great stage, new technologies, new products, and new ideas emerge one after another.

More and more products can be selected on the Internet, but the average life cycle of products is greatly shortened. This is because: First, some of the best application companies have begun to change their thinking, open their own platforms, and allow more partners to access them, thus reducing the threshold and cost for third-party application R & D. Second, good products are more embodied in innovative new ideas. They often do not need to invest too much money and manpower in the initial stage, but also provide opportunities for Internet entrepreneurs. When the number of products on the Internet soars, this will undoubtedly increase the learning cost for users. Some products with poor experience and thin content will soon lose the trust of users. Some people say that users are no longer shy when choosing Internet products. They just need to use the mouse to decide.

In fact, in a broad sense, whether it is Internet products or industrial application software products, without a good user experience as a support, sooner or later will face a miserable end. As many IT enterprises begin to focus on cultivating and introducing interactive experience designers, we can see that the design of user experience is becoming more and more important in the industry, and user experience design is often introduced before new products are brewing, plan and invest early.

So what is user experience? Speaking of user experience, we have to mention one person, Jesse James Garret, father of Ajax. As early as the beginning of this century, he pioneered the user-centered design method (UCD) and proposed a famous five-layer experience element model. He stressed that the provision of quality user experience is an important and sustainable competitive advantage in system design, and often determines the product market trend.

As Garret's five-layer model gradually expands, more and more people begin to learn and develop this idea. At present, it has become the most important theoretical basis for UE design in the industry. The following figure shows the famous user experience element model.

Type:

On the basis of Garret, I made a further explanation. Based on the user-centered app design and layer-5 elements, I combined the behavior at each layer with the software engineering process, to explore how to complete the UE design of the system under the guidance of the model.

As shown in, I explained each of the five layers, gradually decomposed them based on the knowledge of software engineering, and identified the core work results of each layer one by one.

From the strategic layer, scope layer, structural layer, framework layer to the presentation layer, it is a process of abstraction tends to be specific, from concepts to models, from models to instances. On the other hand, from the performance layer to the strategic layer is a linkage effect, and changes in the upper layer must be produced based on some changes in the next layer.

Each layer has some specific elements and feature attributes.Strategy LayerThe core content is the user requirements and product objectives;Range LayerYesfunctional specifications and content requirements;Structural LayerIt is an interactive design and information architecture, which is also a key layer in the five layers;Framework LayerThe core content is interface design, navigation design and information design;Presentation LayerThe core content is visual design.

 

ØStrategy-build a business model

The significance of the strategy layer is to figure out what investors and users want to get from the system separately.

To clarify the needs of users and operators, as product designers, they must first obtain these requirements accurately, for example, obtain the system objectives, business objectives, value objectives, and success criteria proposed by the operator for the product. For products that are complex, large, and cross-internal or external organizations, you also need to clarify the organizational structure, business processes, rules and regulations, and responsibilities of stakeholders. For products targeting Internet users, you also need to perform detailed user surveys. Sometimes you also need to create user models for user segmentation.

Of course, the goal is to accurately outline the product.Business Model.

What is a business model? Some people say it is a set of use cases, some people think it is a business flow chart, or maybe it is composed of documents and graphics of some specific templates.

In fact, I don't think it is necessary to be so entangled in forms. An experienced Business Analysis Expert often starts to work on a piece of paper and a pen. They sorted out the business from a basic point until they drew the "Business shape" of the entire system ".

The "Business shape" I defined generally consists of the relationships and boundaries between roles, behaviors, and actions. It is similar to the diagram of combining use cases and processes, as shown in.

After completing the preliminary business sorting, You can brainstorm and modify the abstract manual drawings. Sometimes it is better to simply write one or two descriptions on the paper to help you introduce others to make it easier for the audience to accept and understand the story.

In order to facilitate transmission and storage, the prototype of the paper is organized into interactive results, which basically completes business modeling.

We recommend several common business model representations:

1. Visio + word

The Visio in Microsoft Office family can easily draw flowcharts, Business Ecosystem diagrams, and so on, with a certain format of text instructions.

The advantage is good readability, low learning costs, and easy to serve as a medium for communication. The disadvantage is that maintenance is troublesome and time-consuming, and standards are often not unified.

2. UML language

Use the usecase of UML to present business models. You can use professional auxiliary tools for business modeling, such as Rose and magicdrawuml of IBM. The biggest advantage of using the UML language is that once a unified design language is adopted, the cost of team communication will be reduced, especially the transfer complexity between the needs, design, development, and testing processes. Of course, for teams that have not used UML, using UML also increases the learning cost. You also need to consider whether the customer can understand the intent expressed by UML.

3. Table

Many customers like to use tables to carry the content they need to describe. They think that tables are the most clear way to express their intentions. The biggest benefit of a table is that it can clearly describe every detail for subsequent analysis and abstraction. Of course, using a table also has some limitations, mainly because it cannot express ideas quickly and intuitively, and the interaction also reduces the efficiency because of the large amount of content.

4. Mind Map

A good communicator will be very good at transmitting ideas in a similar way as a mind map, because Mind Map can easily show the thinking context and clearly reflect the content level and focus. Therefore, using mind maps to present business models is also a good choice. Its disadvantage is that although it is suitable for communication and communication, it is not suitable for formal delivery and delivery. This is also related to the insufficient content and binding force of Mind Map.

ØScope-build a system model

The scope layer defines how users' needs are mapped to apps on the system, which functions and features need to be included in the design, and how functions are constrained and implemented.

In the range layer, the most important thing is to build a system model. The second step is to analyze the content and features of each app in detail, and clarify the design details of the app.

In the previous chapter, we discussed in detail how to analyze from Bo, identify system apps such as Bo status change analysis, behavior analysis, and ing analysis, build a system model.

The following describes how to analyze the app in four aspects:

1. usecase Analysis

When building a system model, we identified Bo's behavior, which is the source of use case. In the analysis process, we often depict the following global use case diagram:

Then, start to describe the use case one by one. In the description, we will adopt some standard formats, such:

When using case, you often encounter a headache: How to Determine the granularity of the case?

Sometimes, especially for team collaboration, if we do not unify the granularity of Use Cases in advance, it will be very messy. For example, some designers use registration, login, and shopping cart as the smallest unit, but some designers use shopping, return, and search for goods as the smallest unit of use case, some designers will take mailbox verification and reset the form content as the smallest unit of use case. These use cases are not at the same logic level and are placed on the same horizontal plane. If they are not adjusted in time, the team members in the subsequent processes will be confused.

As mentioned above, we recommend that you split a large app into three layers: app layer, Module layer, and function layer, the reason for this split is to correspond to the system-level functional modules-pages-and operations in the pages (or a separate processing unit) one by one. Therefore, for simple apps, our use cases can be directly divided into the Module layer; for some complex applications, we can divide them into the function layer as appropriate.

1. Priority

Based on the use cases, we need to sort priorities based on the actual objectives of products or projects. A unified level standard should be determined before Priority sorting. Generally, the project size is slightly different. Generally, three levels of projects are enough, and large projects are set to be within five levels. Corresponding Relationship:

The sorting result of priority is as follows:

In particular, to clear the package and the object, for example, the above UC-01001 is the ownership and product release 0.6.0 package, need to implement this case in this package. Wang Meng, the person in charge of the case, said: in the event of a case change, stop or test problems, Wang Meng should make the final explanation and modification.

 

3. Scenario Description

Generally, the use case can be clearly described so that the function can be clearly defined. However, developers and designers often cannot clearly understand user requirements simply by using several Use Case Diagrams and use case descriptions. At this time, we need to introduce the scenario description.

Context describes how to connect use cases, business processes, and systems. However, not all use cases need to be supplemented by scenario descriptions, depending on the business complexity and professionalism.

Scenario description should be closely linked to business scenarios and use cases. Generally, an independent business scenario (multiple use cases or one use case) is described as a unit. The main purpose of scenario description is to clearly convey the relationship between use cases to other stakeholders.

Scenarios are usually divided into home and sub-scenarios.

For example, we use online shopping as a main scenario, while group buying and normal shopping are sub-scenarios of online shopping, the sub-scenario involves browsing commodities, searching commodities, placing shopping cart, confirming order information, paying, viewing orders, and other use cases.

The scenario description can be organized in a card format as shown in, and the relationship between use cases can be expressed in a concise and concise manner.

In, the S-01 is the scene number, the S-02-01 and the S-01-02 are the child scene of the S-01; the consumer is the main involved role in the scene; the main useful examples in the Child scene and the case relationship composition, the description must be recorded below the card.

The advantages of this card-type scenario are simple, intuitive, easy to understand, and easy to communicate and transmit.

In addition to the card scenario description method, you can also use other forms to describe the scenario, such as using Word documents and ppt files. As long as you can clearly describe the business scenario, it indicates the associations between use cases, use cases, and systems.

 

4. content requirements

Content requirements are the basis of Information Architecture Design. During case analysis, information architecture engineers need to collect and sort out all relevant content requirements and analyze the content based on Bo, including existing information content, new information content that needs to be captured, collated, and added to the target system, content format, and metadata requirements.

For example, the following table is used to organize the content requirements:

ØStructure-improved System Model

The structural layer is designed to improve and verify the system model through interactive design and information architecture design, so that the system model can meet functional requirements, interactive experience needs, and information requirements.

1. interactiondesign)

The purpose of the interaction design is to improve the availability of software products, establish a more harmonious relationship between software products and users, and make users feel happy through friendly user experience.

Generally, the interaction design can be divided into three different layers:

Ø interaction between external and System

Ø interaction between the outside and the app

Ø external interaction with data

Visual vocabulary can be used in the interaction design process as an open symbol system established to standardize information architecture documents, this system is now widely used in various enterprises around the world.

As shown in, a set of visual dictionary elements:

The interaction design principles are as follows:

ØVisibility: Better feature visibility, more convenient for users to discover and understand how to use

ØFeedback: Return activity-related information so that the user can continue the next step.

ØRestrictions: Displays user operations at specific times to prevent misoperations

ØIng: Accurately express the relationship between control and Its Effect

ØConsistency: Ensure the performance and operation of the same function of the same system are consistent

ØEnlightening: Fully accurate operation tips

ØEthical:Considerate, helpful, harmless, and improved people's situation

ØIntentional: Helps users achieve their goals and aspirations

ØFocus on Effectiveness: Helps delegate organizations achieve their goals

ØElegant: The simplest and complete solution, internal consistency, appropriate capacity and emotion

 

The product of the interaction design is the line diagram. It can be easily and intuitively explained by the line diagram design. In small project teams, there is no independent interaction designer role, which is often done directly by business analysts or product managers, because they understand the business, knowing the user's habits and preferences, and having certain interactive design capabilities.

However, for Internet projects, the interaction designer is actually a very important role. Generally, it requires a full-time staff and constantly studies the user's operating habits and preferences, constantly optimize product interaction design.

 

 

ØFramework layer (skeleton)-design a high fidelity system prototype

The framework layer aims to design a high-fidelity system prototype through prototype design and information design. This kind of high fidelity prototype is almost the same as the target system, except that it is not supported by background program logic and real data.

Designing a high-fidelity system prototype is very meaningful:

1. Before entering the development stage, users and investors can understand the final appearance of the target system and collect suggestions for improvement;

Second, they provide developers with very precise and unified development goals;

Third, reduce product demand changes and clarify goals.

 

1. Prototype Design

The prototype design includes the Framework Design, interactive presentation design, page layout design, and logic presentation design.

2.Framework Design: The system must have a good overall presentation framework for better experience. This framework includes the homepage framework, the application template framework, and the Content Page framework. These frameworks carry all the information content of the system.

2.Interactive Presentation: Interaction displays all interaction elements between the user and the system, including friendly prompts, information help, operation instructions, and error correction.

2.Page Layout: Under a suitable framework, a good page layout should also be designed, such as whether the page uses a 960px grid, self-adaptation, two-column or three-column design, and where to place the navigation.

2.Logical presentation: The placement of elements on the page must also display the correct logic. Important content should be placed in a conspicuous position, relevant content should be placed in a common area, and information should be accurate and clear.

Currently, common prototype design tools include axure and dreamwaver.

 

2. Information Design

Information design includes information classification design, information metadata design, navigation design, search design, and tag design.

 

ØSurface-the final interface of the system

The presentation layer is used to develop colors, icons, fonts, controls, and styles to form the final system performance.

Like interactive design, visual design must comply with certain specifications, which represent users' needs, visual consistency, and professional experience.

After the visual design is complete,

1. Front-end engineers cut visual images;

2. the programmer writes a page to execute the script;

3. programmers write background application code;

4. Develop and debug real data;

5. the programmer completes the final image rendering;

6. The initial deliverable test version was announced.

 

This article references:

《Elements of userexperience: the user-centered design for the Web"

ByJesse James garret