Web Interactive design: Website search box Design

Source: Internet
Author: User

In content-oriented Web sites, the search box is often one of the most common design elements. From a usability point of view, the search function is the user has a clear content to see when the last use of the function. If a website does not have a reasonable information architecture, then search engine is not only helpful, but even essential design function. It may be more helpful to the user than the navigation of the site. In fact, search is the most direct and effective way for users to understand content in some comprehensive web site. The best design is to provide users with a simple search box in a prominent fixed position on the page, but there is a strong ability to search and a wide range of functions.

In reality, web sites tend to evolve over time, new content is constantly being delivered, and these new content is more important, then he has a challenge to the information architecture that you have previously designed, and perhaps the new content may not be appropriate for the entire information architecture, and this time will be contrary to your well-designed architecture. Then your content will be scattered everywhere, each piece of content will look more special, feel not in the site architecture.

When content is dispersed and content is not organized, it is more difficult for users to find the information he says they need. The usability of the user is reduced, the user will choose to leave the website or go to Google to try their luck without the information he needs. This time there is only hope that is: a search box.

Although the search behind the need for a very sophisticated program algorithm, but do not ignore the foreground UI design, I would like to see more of the existing Site search box design.

When do I need to search?
Not every website needs search function, but with more and more content, it is the most effective way to satisfy users to get the information they need at the fastest speed. If the site navigation is very simple and intuitive, no content can escape from the site's navigation, then search for such a site does not have much effect.
Search should be a preventative function, because search is the ability to solve problems immediately when the navigation system is very large and complex. It can train users on how to use the Web to get the information they want.

Therefore, if the site is big enough, or the site will gradually become a huge site, think early to optimize their search engine, then your users will thank you drop.

Search box = input Box + Submit button
The search box in the design becomes very important. The input box must be clearly visible and easily recognizable and used. One might think that the search box does not require any design. It looks like there are only two simple elements: the input box and the Submit button. Any design is extraordinary. Design is a lot to consider, such as: the length of the input box, input text display design. Some designers don't even have a submit button to design it.

In fact, the design of the search box is a big problem. Because when the user has the need to find some information, search is the most effective function. The position of the search box is important, and the input box should make the user feel that it can be entered, and the search button should look more like a button.

Look at the design of the TechCrunch , input box and submit button in the color scheme completely consistent with the site's overall visual style. However, it leads to a problem: at first glance, it's really hard to see the search box. Users can search for it because it does not stand out and is not easy to find. Although the location of the search box is good, it is easy to overlook, but this is not a good thing.

The error of the search box is easy to make
In the design of the time I found a few problems:
1. Place the search box at the bottom of the page, or hide it in the navigation menu.
2. The design of the input frame is relatively short, suggesting that users use short words to query.
3. The submission button design is relatively small, forcing the user to make the mouse point is very accurate.
4. The search box is more difficult for users to find.
5. The form of the search box and other functional forms of the same design, such as the design of the contact person.
6. In the full design of the page (promotion), the search box is designed to be difficult to find.
7. Provides too powerful a search when users are required to be simple.
8. The name of the submit button is randomly called.
9. Not a search function, when it looks like a search box.
10. Provide multiple submit buttons.

Wikipedia 's search box does not have a visual representation of the search. What is the difference between "go" and "Search" as a user clicks? What is the difference in functionality? Can you make them different in design?
Design a thoughtful search box

Let's take a look at some recurring difficulties and problems that designers may be concerned with when designing a search box.

Where do I put the search box?
There are more possibilities, but only a little is the right design. The most convenient place is the top left corner or upper right corner of the website. These two locations compare to what the user discovers. Because the most common F-type eye scan mode for users. Many blogs tend to place the search box at the bottom of the site, which may not seem like a good idea, but it might be in the advertising and other considerations.

How do I name the Submit button?
It's a good idea to have the submit button name based on the user's emotional design of the scene and users. such as: Find, query, search or an icon to express.

Such a search button picture is very confusing to the user.

How do I get users to search?
A good idea is to put the text of the hint in the input box, when the mouse clicks the input box prompts disappear. This will tell you exactly how to use the search box. Although it needs to be implemented with a little bit of JavaScript.

Many web sites are starting to use some of Google's search services, but users may not like the search results, and Google's algorithms are less suited to the needs of some companies. When there is no denying that Google has broken some rules.



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: info-contact@alibabacloud.com 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.