E-Commerce Search list page user experience design

Revised background

Create professional E-commerce vertical search, as well as the original information aggregation platform for online procurement wholesale trading platform. According to industry characteristics and transaction needs, the original 0 batches (small wholesale) search for revision, to adapt to the industry search trade channel, is the revised design objectives. Product managers and user experience designers who search the product line have been preparing for six months. Project team members will be on the existing functional requirements, information architecture, visual color, user experience, such as long perspective, multi-angle analysis. Strive to launch the 1688.com online after another e-commerce vertical search user experience feast.

function Requirements Choice

In the project, we collect a lot of demand from the market operation, how to classify these requirements and select the function points that our target users desperately need? Overall: to entertain the mentality of the choice of functional needs, only to the most needed not to the most powerful.

From the operation of the demand, from the user's needs, often varied, can be described with strange, so how to cooperate with product planners, product managers to find the most urgent needs of users?

Brainstorming can create a lot of creativity for product design team members. When a large number of requirements are collected, there may be major requirements and secondary requirements, objectively determine which is the first to be completed, which can be put to the 2 phase, and develop standard requirements and corresponding time nodes, so that the project can be completed on schedule.

The most annoying is often the choice of functional requirements, what standards should we use, what mentality to deal with it? It is best to set the criteria for trade-offs by creating a paper prototype or observing the user's actions, and to ensure that the following basic points are covered in the standard:

User profile-Describes the user's specific characteristics. Pay special attention to any problems users use when using the site, such as physical limitations. (Discard requirements that do not match the user's characteristics) text environment Analysis-study the user's daily tasks, workflow patterns, work environment and conceptual framework. This helps you understand why users react to the Web site they are testing. (Discard requirements that do not match the user's operating environment) availability goal setting-the goal of quality materialization, which reflects the requirements gleaned from user profiles. Test whether the user can complete the task at a certain stage, and if the user is restricted, the user's target should be reset. Platform functionality and constraints (discarding requirements that do not match user goals)-must determine the functionality and limitations of the interface or product to define the scope of availability requirements. This information is affected by user availability requirements. General design guidelines for discarding requirements that do not match the platform's technical capabilities-you must design your interface using accepted design guidelines. Web pages created by reference to the Web Design Guide can behave normally on a Web browser. (Discard requirements that do not match the user Experience Design Guide)

Product (interactive) experience designers before doing interactive design, in addition to the need to eliminate the differences between the project relationship, to meet user expectations, engineers expectations, sales and marketing personnel expectations, managers expectations. Finally, find a balance that can be accepted by all parties, specifically, see how interaction designers work with product teams.

Interactive Design Optimization

From design drawings to the birth of prototypes, it is a complex and interesting process. First of all, how do we complete the complex design diagram? Pre-market research and demand analysis provides us with first-hand good information, and then we need to analyze the data and refine the demand points. In brainstorming discussions, interaction designers are involved with product designers, demand analysts, and so on to participate in the discussion of the design diagram creation. In the discussion to determine the scope of business needs, product demand logic, product specifications, and finally summed up a process document. It may be BRD or FRD, and it will be the design guide for paper prototypes.

Once the interaction designer has obtained the process documentation, it is possible to create the logical frame composition and the task operation flowchart in the design diagram. When you create a logical schema diagram, you can choose to Camp tools or illustrator, and of course some people choose to make mind manage. No matter which tool you choose, as long as you can express the logic structure clearly, here is no longer to repeat the use of each tool and the advantages and disadvantages. At the same time, the interaction designer should always use the principle of information architecture to create the logical architecture diagram to ensure the integrity of the logical information, the consistency of the expression information, the simplicity of the architecture information and so on. When you create a task action flowchart, you typically choose Visio production. In the process of making Visio, we can use the flowchart and process symbols provided in Visio to express the key functions and key nodes in the design.

After the paper prototype design, the interaction designer and the product planner, usability engineers to quickly communicate, optimize the paper prototype. Interactive designers will be based on paper on the prototype to determine the function point and information framework, through the axure to create a real-world of interactive design prototype demo. In the production of Axure Interactive design prototype demo, should pay attention to the following principles:

uses Axure page navigation structure to construct information architecture. The name of the page should have a unified standard. For example: First level page, level two page, Process page (Status page, result page) and so on must have the unified standard. Avoid tangled complex interactive control implementations. Remember that Axure is a fast prototyping implementation tool, and there are already a lot of molded axure interactive design templates that can be invoked directly on the web. Less color and layout, a little more annotation and description. The color and layout of the problem to leave the visual thinking, more to reduce the cost of communication and can eliminate ambiguity of the annotation bar. Axure delivery should also pay attention to readability, accessibility. When handing your interactive output to the visual and front-end, remember to make it easy for them to understand what you want to convey. Interactive design prototypes do not have to generate HTML files and interact dynamically. It doesn't have to be a dynamic display, but you have to be able to communicate your interactions completely and clearly.

Finally, ask the interaction designers to think of themselves as real product designers, and your responsibility for products and projects is no less than that of the project (product) Manager.

Visual Color Optimization

IBM has been known as the Blue Giant (Big Blue): trust, reliability. Coca-Cola is red: vigor, enthusiasm. Colors are not just the logos of these companies, they are also idealized.

There is no denying that color changes the way we react to what we see. Different color schemes, giving people different feelings, or naughty, or deep, or indifferent, or warm, or chic, or untidy, or full of vigor, or quiet, or gloomy, or lively, or dignified or childish, or simple, or romantic, or professional, or amateur, or hot or gloomy. Color choice, determines the people at the first sight of the feeling of the site. Therefore, color is the most common and powerful tool in the hands of web designers. We say "design = problem Solving", and visual design is "solving logical problems with visual language".

In 2002, a team of researchers got some interesting discoveries. The Stanford Web credibility project is beginning to understand what makes people trust or distrust the site, and many factors are evident in their findings: corporate reputation, customer service, funders, and advertising, which will allow users to determine whether the site is trustworthy. But the most important factor--ranked first in their list--is the visual style and beauty of the site.

The famous master of interactive design, Donald Norman, concluded: "Positive emotions enhance creativity and breadth-first thinking, while negative emotions focus on cognition, enhancing depth prioritization and minimizing interference; positive emotions make people more tolerant of some difficulties, Become more flexible and creative when finding solutions. "When people start liking certain interfaces, they actually become more usable," he said.

E-Commerce Vertical Search list page of visual optimization, style we usually support the brand. The target conveys a strong brand message, such as "Alibaba's Orange series," 1688 logo. But brand recognition is more than just icons and advertising words. It is spread over Alibaba's product design, Alibaba's web site, and Alibaba's materials – in fact, the brand's selection of color schemes, fonts, graphics, vocabularies, is reflected in all directions.

Visual designers make the same and different styles of hundreds of interfaces, and then the product planning and design team members vote collectively to choose the most appropriate style positioning. In the design and selection process, if we understand the target users, then their internal response and emotional response is predictable, and the degree of predictability is quite alarming. The answer lies in the combination of many factors in the actual situation:

Color-Makes the color more readable, less color, and a little more value. Typesetting-according to the choice of fonts, text color selection, and then look at the intrinsic, emotional factors to layout. Scale-Avoid overcrowded space. Angle and shape-a sharp angle, line intersection, or multiple lines converge, using these focuses to direct the user's vision to where you want to go. Recurring visual theme-Corner processing mode can bring a visual melody to the user. Text-Choose to scatter, divine font and text color. Pictures-use decorative images sparingly, and use them sparingly in functional GUIs, as they distract users. Cultural factors-if you want to express a clear cultural meaning, consider the weight that will be faced.

For E-commerce search list page user experience design, visual optimization is not omnipotent, but no visual optimization phase is absolutely not.

Front-End code optimization

The larger the file, the longer it will be used to download and display the page. Remember: the total volume of a file refers to the size of all the files that make up a Web page, including HTML, external CSS, external JavaScript, images, sounds, and video. In these files, HTML, CSS, and JavaScript files are just text files, so they are often quite compact. Images, sounds, and video files are usually large and download problems.

The page size of the public site, from 20K per page to more than 100K per page (including all graphic files on the page). How big it should be, even the so-called experts on this issue, there is widespread disagreement. If your site requires professional graphics, then it is impossible to comply with the 20K law. However, if the target audience's Internet connection is slow, or the target audience's patience is limited, you will have to give up the beautiful images that are hard to resist and follow the limitations of the 20K law. How do you plan for a limited volume of documents beforehand?

Put most CSS and JavaScript files into external files. Downloads are only made when the Web site references these files for the first time. After that, any page on the site can reuse these files without having to download them again. Reuse graphics, audio, and video from different pages. Because these files are also downloaded at the first time. Do not use unnecessary graphics, animations, or sounds. Whether for practical reasons or to enhance the attractiveness of the site, each document should have a clear reason to exist on the site. A navigation, large size, attractive image map, at the same time has a practical and beautiful two uses, like the products for sale photos. On the other hand, you should remove those graphics that only fill the blanks. When possible, use a small size image instead of a large size image. Because of the same conditions as other factors, small images are faster to download than large size images. For example, you might use a tile (repeat) to display a small size image on the background, instead of a single large background image. To minimize special navigation buttons, each with unique wording and rollover effects, you need to download 100 different images. On the contrary, 50 text links (with the flip effect provided by CSS) require a small download price.

As a technology-born interaction designer, you can constantly explore the changes brought about by new technologies (e.g., HTML5). Whenever, the page opens the speed is gives the user first impression, is also promotes the user to the website satisfaction the important factor, and the front-end code optimization will bring the user the comfortable operation experience!

User Experience Principle development

Before designing, we should follow a universal user experience design principle, and after design we can sum up the user experience rule which is only suitable for this product.

Design ideas before designing:

User-centric design: design must meet the needs of users, feasible, and second, can produce commercial value. Operation Entrance clear: any one product must have a clear, reasonable entrance. Do not discriminate against special people: color blindness, people with physical disabilities can complete the basic operation. Tasks can be accomplished: tasks can be accomplished without external influence. The problem can be solved: the problem that the user appears in the task, can be solved without outside influence. Concise, clear and understandable: Express information in a concise, natural, user-understandable form. Highlight the focus, at a glance: The user's first attention will be the design of the key information to be expressed. Navigation is clear and effective: navigation clearly clear, effective, classification of each other independent, complete exhaustion. Avoid getting lost: any location can be clear "where am I?" What's in here? Where can I go from here? ”。 Deep breadth Balance: The number of visible menu items on a single page balances the number of levels in the hierarchy. Habit continuation, Necessary extension: User's operating habits must continue, within the user acceptable scope and appropriate extension and guidance. Fit the user's mental model: the user's expectation of functionality is consistent with the results of the actual operation. Operation consistency: The same type of command or operation produces the same effect. Timely, effective, friendly: the first time for the user's operation to make an effective and friendly response. Avoid error: The system is used to avoid errors that may occur to the user. One click: Minimize the number of operations required to complete the task. Don't let me think: The user's first reaction produces the correct and effective operation. Minimum memory burden: Avoid users needing to memorize more than 5 data. Simplification: Help information is streamlined, accurately described, paragraphs not exceeding 3 paragraphs, sentences not exceeding 30 words. Timely help: Help is available when the user needs help. Twice times, one: the design can still be applied when the number of designs is increased by twice times or reduced to the number of units. To simplify the multiplication: try to use simple, native interaction to solve complex user interaction behavior. Conforms to Grid: page layout conforms to grid system standards. Conforms to the standard design pattern: The interactive control conforms to the DPL design pattern standard.

Design Experience Principle:

heuristic Interaction: Let the innovative interface have teaching function. Speed first: The importance of page opening speed has exceeded the normal function of some pages. Immediate effectiveness: Control feedback should be instantaneous, rather than letting users wait indefinitely. Less is more: the operation is enough simple and fast, the page function is also very powerful. Personalized operation: To meet the tastes of trading users, but also to meet the browsing user's operating habits. The discovery: Let all the elements that should be seen at that time be at a glance. Simplicity: The application is clean enough, when it should appear, when it should disappear, not to bring trouble to the user. Differentiation: The difference here is that it allows users to easily identify the differences between elements of latitude, such as the display of related search.

In fact, before the design, we will refer to a large number of universal design principles, in the design, we will find: The project has a sense of the principle of a few few. This time need to rely on the designer's own logical inductive ability, the most important and most urgent user experience design principles abstracted.

Fast iterative and usability testing

In the implementation of the project, there will inevitably be some unexpected events or changes in demand, at this time we need a strict project quality control system to ensure the quality of the project while also ensuring the progress of the project. We need to quickly iterate through the way to the previous omissions or errors to repair, not afraid to make mistakes, should be brave to quickly correct errors. The development mechanism of general fast iterations is synchronized with usability testing (simplified version heuristic evaluation).

In view of the complexity of the existing heuristic evaluation process and the high cost of implementation, the improvement and simplification are based on the features of maneuverability, simplicity, convenience and flexibility. I have innovated a simplified heuristic evaluation method, which is suitable for projects with high degree of importance and urgency.

Based on the Who-how-what strategy, the simple heuristic evaluation is carried out quickly, in which Who-how-what is the main line throughout the whole process, and the evaluation process is divided into who-how-what three parts, and three parts are summarized as 6 words: Preparation-evaluation-report.

Specific usability test action methods please refer to: How to quickly develop a minimalist version heuristic evaluation

qualitative and quantitative data analysis

Usability testing produces a lot of data that needs to be checked by you. After the test is complete, you may get some of the following data:

List of issues in the

test. Test data on time, errors, and other performance tests, including subjective scores in questionnaires. Comments by testers in journals, notes and questionnaires. A note-taking record for the Test team. Test the background data for the participant. The video of the test process can be obtained from multiple angles of the test room.

When you have all the data you have entered Excel, you can analyze the data to discover trends and problems. But the problem is, as Mark Twain said, there is always the question of "lies, odious lies and data", especially for some inferential data, which can easily result in misreading.

A useful technique for processing data is to triangle it. This approach makes it clear how each set of data in the entire data affects other groups of data. Each vertex of a triangle corresponds to a different type of data:

List of issues. numeric (quantitative) data in journals and questionnaires. The reviewers ' comments and the Test team's observations.

The data is validated against the availability objectives and the numerical criteria determined before the test to determine which problems lie within the triangle.

The way to troubleshoot data misreading, there are a lot of ways to talk about just the tip of the iceberg. For the e-Commerce search list page User experience optimization, the future we will not stop here, OK next listen to what people say?

[Copyright notice]: The copyright belongs to the author Alite all, reprint when please use the hyperlink form to indicate the article original source and the author information and this statement: http://www.alitedesign.com/