Advantages and disadvantages of magnifier icon in search design

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

[Core Tip] The user knows a magnifying glass icon means ' search ', even without a text label. The disadvantage is that icons are more difficult for users to find.

In the study of search interface design, we found a trend of the search box: More and more designs use a pure magnifying glass icon to replace the traditional text button with the word "search", and some even lose the text input box, leaving only a magnifying glass icon. Which version of the user experience is the best today?

Previous Search box Design Guide

Traditional search box design has been very mature, its main principles are:

Place a bold search box in the upper-right corner of the page and place a search button next to the search box.

The search box does not require text descriptions, and the obvious search button next to it tells users to search here and also tells them how to search.

However, some of today's emerging models break these basic rules. Magnifier icons are more space-saving, so more sites use it. A more flexible use of design guidelines is no problem, but one thing to be sure of is that the user's needs remain unchanged. Users don't care what the search area looks like, they just need a place to quickly enter search keywords. If design practices are changing, but still allow users to easily achieve this goal, rather than slowing down, then there is no problem. But in our survey, we found that only the search design of the icon still has some obvious disadvantages:

(a): Search box for traditional search buttons;

(b,c,d): New search box design pattern with magnifying glass icon;

(e) Design with no input box for icons affected by mobile design (we do not recommend this design)

The object of the graph adopts

Magnifier icons have been closely linked to search, in part because many different Web sites, applications, and operating systems use it to provide a way to find information. With such implementation, users have learned to recognize this icon faster. With the advent of responsive design, the design patterns that use only icons are more prevalent (although a good responsive design site will display a search box next to the icon when converting to a larger screen).

Magnifier icons for a variety of applications and operating system search capabilities have enabled users to link search and Magnifier only. From top to bottom: Google browser, I Windows Explorer, ie browser and Mac Office Word.

The latest research results

Our latest research shows that in the transition to a magnifying glass icon, designers want to be as smooth and risk-free as possible, and here are some of the problems that users may encounter in the Magnifier icon design mode.

With a magnifying glass icon, users are less likely to navigate to the search function.

The magnifying glass icon takes up less space when there is no search box. Visually, it is not too prominent, so it will not be so obvious. For desktop sites, we do not recommend only the design of magnifier icons. Only a magnifying glass icon is designed to be more reasonable on a mobile device because the screen is smaller and there are fewer icons and text buttons to put on. But on the desktop, a single magnifying glass icon is lost in numerous icons and buttons.

When a user has been able to associate a search with a magnifying glass icon, there is no need to display the word "search".

Users know and understand the function of Magnifier. When they see it, they associate the search. If the icon is obvious and there is a strong metaphor that it is clickable, then there is no need to display the word "search" again. Because many users still have the habit of clicking the search button to submit queries, it is necessary to click on the magnifying glass icon to submit the query. In addition, there is an additional benefit to the international version of the site and there is no need to translate the word "search" again. (However, from the perspective of accessibility, remember to place the word "search" in the Alt field of the magnifying glass button)

When the search is placed in an unexpected location, the user needs extra help to find it

Users first go to the top right corner, and if they don't find them, they start scanning the tops of the pages. In those search icons on the left, sites that use a large empty search box make it easier for users to find a search. Although the user finally found the search box, they should not have searched the entire page for a search function from the start.

Only Magnifier icon search increases interactive cost

A negative effect of a search that displays only a magnifying glass icon is that the user must wait for a search box to be displayed, find where to enter, and then sometimes need to click multiple times to focus on the input area. These extra steps lengthen the search process, which would have just clicked the search box to start typing immediately.

Most of the other icons still need text to express clearly

Clear text helps users make decisions faster. Text can provide better information clues. For newer icons, it should be supplemented with a text description, such as a three-line menu icon. The map tag icon is another one that still has an ambiguous meaning and uses inconsistent icons, sometimes it means the current position or a different specific location, or a general place, or a nearby place.

New icons that are unfamiliar to the user, including the three-wire menu icon (left) and the map marker icon (right)

Users are still learning to understand the meaning of these icons and its functions, so it is best to have a clear text description. In addition, there is enough space on the desktop screen, why not use the user faster and easier to find what they want?

Some design suggestions for using Magnifier icons

1, first of all, in the desktop version of the site to keep a search box, placed next to the icon. It's best to make sure the search box is also on a tablet computer. When a Web site is viewed on a smaller screen (such as smartphones and smart watches), the search box can be hidden until the user touches the magnifying glass icon. In all cases above, there is no need to keep the "search" text description in the search box.

2, use a concise outline icon, the minimalist version of Magnifier. Fewer graphic details can speed up recognition.

3. Using a large icon with a larger margin, the larger clickable area is more easily found and clicked.

4, using a large number of comparisons, so that the icon can be from the background of the surrounding elements to stand out.

5, put it in the upper right corner, which is still most people think the search should be in the position.

6, so that users can use the return key can also click on the icon to submit a search request. I mentioned it above, but it is still worth reiterating that many users still have the habit of clicking a button to submit a search request.

7, you can consider using a large variable search box, this search box can be clicked when the input area to enlarge. This can save screen space, but also provide users with enough visual clues for users to find and perform search, but also in the execution of the search to provide users with enough input space.

Above: The search box is clicked before. Below: After being clicked, the search box expands

8. Do not squeeze the search button and other icons together to provide the search with the priority it deserves.

9, this is just the opposite of the above, do not isolate search. It also makes searching hard to find.

10, when the user clicks on the search icon, display the search box near the icon, put too far will increase the user's interactive cost.

11, do not let users click two times. Especially when it's enough (or not) once. In some cases, users have to click on the icon to open the search box, and then click to move the input focus to the search box. Click the icon at once to put the input focus on the search box, users can immediately start typing. Better yet, when the mouse hovers over the search box, the focus is ready and the user can enter it immediately.

The ultimate goal is to help users find and perform searches faster

If your site or application uses a magnifying glass icon instead of a "search" button, the suggestions above should help. We will also look at some of the other emerging search design patterns, such as placing the search box on the left, using speech recognition commands, and so on.

Unless the special statement, the Geek observation is the Geek Park original report, reproduced please indicate the author and the original link.

Original address: http://www.geekpark.net/read/view/205386