User Experience Design Example: Ali search box Optimization Suggestions

• Design Objectives:

1 to improve the convenience of the search input process without affecting the existing users ' usage habits;

2) in the limited space, enhance the homepage search operation Historical backtracking ability, reduces the old user's search operation cost, enhances their search efficiency;

3 The search for new users to guide more rich, increase the interest of search;

• Draft design proposal:

• Main process

1 Enter the page, the cursor by default placed in the input box, support user direct input operation. At the same time, the cursor follows the input hint information under the current search dimension; (Figure 1.1)

Figure 1.1

2 in Figure 1.1 page state, when the user input any keyword, in the input box, empty the system default input prompt information, display the current input content. At the same time, automatically downward pop-up association word recommendation, and give a possible number of search results information (Figure 1.2);

Figure 1.2

3 in Figure 1.2, the end of the input box displays the "One key empty" icon, when the user clicks on this icon, will empty all the input information, and retract the Drop-down box, the input box to retain only the cursor; (Figure 1.3)

Figure 1.3

4 in the absence of any input, click the arrow button below the search box will have two possible scenarios: ① if it is a new user, that is, there is no search-related behavior record, we will pop up the dropdown box, give our list of recommended hot words (10), and indicate the number of searches for each hot word; (Figure 1.4)

Figure 1.4

② If the user has any record of the search behavior, we will pop up the dropdown box, give the user the latest 10 search history, less than 10 words show all, more than 10 shows the most recent 10, according to the search time sequence, showing the most recent search time; (Figure 1.5)

Figure 1.5

5 pop-up any Drop-down list, as long as the mouse click on any one of the contents (can also be moved through the keyboard cursor + return confirmation), on the realization of real-time search behavior, the introduction of search results page;

• Branching Process 1

1 Enter the page, the cursor by default placed in the input box, support user direct input operation. At the same time, the cursor follows the input hint information under the current search dimension; (Figure 2.1)

Figure 2.1

2 in Figure 2.1 page state, if the mouse clicks the input box interior area, then empties the system the input prompt information, still retains the input cursor, is in to enter the state; (Figure 2.2)

Figure 2.2

3 If the user clicks the TAB key at the top of the search box, it will switch the search dimension operation, the cursor maintains in the input frame, and the system displays the input prompt information under the current dimension; (Figure 2.3)

Figure 2.3

4 in the input box has entered the state of information, (as shown in Figure 2.4), click tab, to achieve the switching search dimension operation, the retention of input information; (Figure 2.5)

Figure 2.4

Figure 2.5

• Branching Process 2

1 when the user input any keyword, in the input box inside, empty the system default input prompts information, display the current input. At the same time, automatically downward pop-up association word recommendation, and give the number of possible search results; (Figure 3.1)

Figure 3.1

2 If the user clicks on the page other no operation blank area, cancels the keyword association recommendation the Drop-down box, but retains the search box the input information and one key empties the icon; (Figure 3.2)

Figure 3.2

3 in Figure 3.2 page state, if the user clicks on the arrow button below the search box, the pop-up hot word recommendation or search history dropdown box will be based on the user's properties (Figure 3.3); Click on any entry in the dropdown box, and the selected entry will replace the word in the input box, triggering the search and entering the search results page;

Figure 3.3

4 in Figure 3.3 State, if clicked a key to empty the key, will empty the input box information, withdraws the Drop-down box, only the cursor in the input box displays; (Figure 3.4)

Figure 3.4

5 in Figure 3.1 of the page state, if any of the input operations, including the deletion of some existing information (in addition to the information in the input box is empty outside), append input and other behavior, all pop-up Lenovo recommended dropdown box; (Figure 3.4)

Figure 3.4

• Heuristic evaluation of comments--major points of contention:

1 The default focus: the default cursor in the input box, while the input box after the cursor has descriptive text, from the user's customary to say there is no precedent, the feasibility of development needs to be evaluated;

Designer Evaluation: The cursor default in the input box design, in line with the current mainstream search engine specifications, descriptive text is used to guide the new user input operation, its own no ambiguity and misleading, the only thing to consider is the front-end implementation of the possible and cost. So we tentatively, under the premise of technical support, retain the design.

2) One-click Delete: the need to add this feature is controversial, the figure slogan is not very clear, easy to let users produce "close Lenovo word drop-down box" misunderstanding, and then occurred mistakenly deleted the possibility of input;

Designer evaluation: Comprehensive evaluation of the use of the function scene, do feel that the relevant scenes on the home page is not much, at the same time the icon also has misleading users, the possibility of controversy, so decided to search the list and other pages of the search box test function, and so on to confirm the effect of synchronization to the

3) pull down Recommendation: DROP trigger block physical size is small, users are not easy to find, while the click-type trigger conditions also increased the user's discovery, the use of costs;

Designer evaluations: Visually it would be a little bit smaller, but our initial design point of departure is not to disturb the existing normal process under the premise of trying to give old users and high-end users some new interactive experience, so we still decided to support the existing icon size and trigger conditions, such as on-line testing after the next phase of the decision to determine the direction of optimization.

4 Common blocks: for different attributes of users, provide different recommended content. At the same time, from a visual perspective, Lenovo Word Drop-down Box also shared this block, only slightly different in form. It is due to the possibility of different feedback results in the public block, so it is expected to cause a higher user's understanding, learning and using cost.

Designer Evaluation: According to the purpose of the three kinds of reference information provided by the common block (matching and providing the most suitable input words to the user's idea, helping the user to complete the input operation efficiently), we think that we should not confuse the user's understanding and use, and will not cause the user's operation failure. However, in view of the controversy during the evaluation period is more prominent, we decided to use the history and hot words recommended by the combined display scheme, on-line testing and then decide the next phase of the optimization direction.

• Optimized design plan:

• Main process

1 Enter the page, the cursor by default placed in the input box, support user direct input operation. At the same time, the cursor follows the input hint information under the current search dimension; (Figure 1-1)

Figure 1-1

2 in Figure 1-1 page state, when the user input any keyword, in the input box, empty the system default input prompt information, display the current input content. At the same time, automatically downward pop-up association word recommendation, and give a possible number of search results information (figure 1-2);

Figure 1-2

3 in Figure 1-1 page state, without any input, click the arrow button under the Search box will have two possible situations:

① if it is a brand new user, that is, there is no search related behavior records, we will pop down the box, give the recommended hot word search (10), prompt each hot word search times, and the search history is "temporary"; (Figure 1-3)

Figure 1-3

② If the user has a search behavior, we will pop up the dropdown box, give the user the latest search history, less than 7 words show all, more than 7 show the most recent 7, according to the search time sequence, and according to the actual display of the number of search history, corresponding to show the number of hot word search (history + Hot word = 10) (as shown in Figure 1-4)

Figure 1-4

4 in Figure 1-3, 1-4 page state, in the pop-up Drop-down box, the user point selected any one of the contents (can be through the mouse or keyboard cursor mobile + carriage to choose), on the realization of real-time keyword search operations, the introduction of search results page;

• Branching Process 1

1 Enter the page, the cursor by default placed in the input box, support user direct input operation. At the same time, the cursor follows the input hint information under the current search dimension; (Figure 2-1)

Figure 2-1

2 in Figure 2-1 page state, if the mouse clicks the input box interior area, then empties the system the input prompt information, still retains the input cursor, is in to enter the state; (Figure 2-2)

Figure 2-2

3 If the user clicks the TAB key at the top of the search box, it will switch the search dimension operation, the cursor maintains in the input frame, and the system displays the input prompt information under the current dimension; (Figure 2-3)

Figure 2-3

4 If the user clicks the tab item "More", it will eject the Drop-down selection box; (Figure 2-4)

Figure 2-4

5 in Page 2-4, if the user clicks on a blank area that is not triggered, that is, no option in the dropdown box is selected, it will revert to the nearest search dimension; (Figure 2-5)

Figure 2-5

6 in the page 2-4 state, if the user chooses any of the Drop-down box options, will switch tab to the search dimension, the cursor maintained in the input box, while the system displays the current dimension of the input hint information; (Figure 2-6)

Figure 2-6

7 in the page 2-6 state, click the last tab "blog", will pop down the box, followed by interactive logic with page 2-4; (Figure 2-7)

Figure 2-7

• Branching Process 2

1 when the user input any keyword, in the input box inside, empty the system default input prompts information, display the current input. At the same time, automatically downward pop-up association word recommendation, and give the number of possible search results; (Figure 3-1)

Figure 3-1

2 If the user clicks on the page other no operation blank area, cancels the keyword association recommendation the Drop-down box, but retains the search box the input information; (Figure 3-2)

Figure 3-2

3 in Figure 3-2 page state, if the user clicks on the arrow button below the search box, the Drop-down box will pop up, showing search history and hot word search (figure 3-3); At this point select the dropdown box of any entry, the selected entry will replace the words in the input box, directly trigger the search behavior and into the search results page;

Figure 3-3

4 in Figure 3-3 page state, if clicked the arrow button below the pop-up box, will retract the Drop-down box, the input box retains the existing input information; (Figure 3-4)

Figure 3-4

5 in Figure 3-4 page state, if any input operation occurs, including the deletion of some existing information (in addition to the information in the input box is empty), append input and other behavior, all pop-up Lenovo recommended dropdown box; (Figure 3-5)

Figure 3-5

• Branching Process 3

1 When the input box does not have any input information, click tab, only to switch to the corresponding search dimension; (Figure 4-1)

Figure 4-1

2 when there is any information in the input box (Figure 4-2), click the tab of the Non current dimension (for example, click "Company"), directly raise the corresponding dimension of the search behavior and enter the search results page;

Figure 4-2

3 in Figure 4-1 under each state, click the "Search" button, will enter the corresponding guide page of each module; (Figure 4-3, figure 4-4)

Figure 4-3

Figure 4-4