Website design analysis: Super crumbs of the faceted search

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Translator Note: The key to search is to make it easier for users to find the information needed, I found that the article carefully for the user to create a flexible solution, the interactive form is not rigidly adhere to the inherent design principles, more from the actual situation, to create more appropriate interactive controls. This article is shared with you, if you find any errors, please feel free to give correction.

Original address: Faceted-finding-with-super-powered-breadcrumbs

Today's lookup interface does not support integrated search effectively, and users ' attention is often confused by a number of different search results and browsing interfaces. In this article, I recommend the use of integrated faceted (multidimensional attributes of things) breadcrumbs (IFB) design, through the power of integrated faceted, more detailed to provide viewers with intuitive query expansion. Although other crumbs based lookup interfaces still exist, they have failed to achieve the desired results by ignoring best practices. The best way to get crumbs is to find controls on the side that occupy the least space and are more powerful.

In contrast, breadcrumbs are the superhero of the IFB design, dealing with many of the lookup interfaces that are plagued by usability problems. To prove it, I tried my best to test my hypothesis. 12 of the evaluators found that IFB is easier to use, more intuitive and flexible to solve complex search tasks, which is a traditional search interface is difficult to do.

The challenge of integrated search

At Petermorville's recent Uie webinar, he praised the benefits of a comprehensive lookup: "browsing and searching in tandem ..." The lookup interface is a good balance, allowing users to move freely through browsing and searching. Unfortunately, many websites today do not have an effective integrated faceted lookup and browsing. For example, Walmart.com browsing and searching uses two different interfaces to create a stack of repetitive controls that overwhelm users and make the site more difficult to use. As shown in Figure 1.

The clutter mechanism of search and faceted lookup on graph 1.walmart.com

Walmart. COM rich in filtering, linking, and options, so that users successfully repeat search or effective discovery related topics and content are very difficult. The method of duplicate lookup also creates a problem with a natural search, because each lookup page is limited to a specific conversation. The 8th chapter of Martí Hearst's "Search user Interface" says: "The first design goal of faceted lookup is to achieve" flexible navigation, seamless and comprehensive use of directional (keyword) search browsing, refining and expansion of alternating flow, to avoid empty results, the entire process so that users feel controllable and understand.

Design of faceted bread crumbs Integration (IFB)

In order to meet the challenge of search and browsing integration, I have proposed an integrated design scheme of IFB. It is recommended that the walmart.com of the user interface be redesigned using an integrated faceted crumb, as shown in Figure 2.

Figure 2.walmart.com the line block diagram of the interface with integrated faceted bread crumbs (IFB)

Bread crumbs Simple, intuitive, flexible, strong adaptability. As Jacob Nielsen stated in her 2007-year Alertbox, breadcrumbs are increasingly useful: "as opposed to a higher level of concept, breadcrumbs show the user's current position and help users understand the position relationship with other pages." The breadcrumbs support one-click access to the top level of the directory, thereby freeing those who reach the destinations via search or depth links. Crumbs in the user test has never been a problem, the user will not misunderstand the crumbs, there will be no operational problems.

Preliminary usability assessment of integrated faceted bread crumbs

Integrated faceted crumbs early-morning usability test results show that using linked HTML prototypes is very promising. I used a simple 8-page HTML prototype to test the changes in 12 current E-commerce interfaces and users of different sex-age backgrounds. The user can quickly grasp a series of possible interactions, and use the interface to effectively solve the complex search task, the existing interface is difficult to do. After 1~2 a simple task, the information and ability of the participants to accurately predict the behavior of the system also increased significantly, which indicates that the learning curve of the user to the IFB design is very short. Although there is no formal research comparing the performance of IFB with the existing faceted lookup, the IFB design is favored in some kinds of search tasks compared to the existing Wal-Mart's faceted search design for specific categories of search tasks, and early usability tests show that IFB Design offers many benefits beyond the traditional faceted search design:

1. Low learning costs: familiar links and Pull-down menus make this control fairly intuitive. Users who rarely use breadcrumbs can also operate IFB efficiently.

2, efficiency: bread crumbs and classification combined into a control effective use of limited screen space, greatly reducing the clutter caused by repetitive controls.

3, Unlimited channel: Search and browsing of the combination, allowing unrestricted access to any page and the current query page.

4. Integration: Fully integrate the landing page, brand catalog and category pages into the faceted search architecture. There is a prominent position above the screen where you can see your current location and all the navigation tools your users need to access.

5. Flexibility: Throughout the search process, users can switch from browse to search whenever they need to.

6, Strain: In order to broaden the search scope, access to the current query-related products and services provided an opportunity.

What makes IFB different?

Danniel Tunkelang in 2009UIE webinar (faceted search: Design your content, navigation, and UI), most of the breadcrumbs based on crumbs are not intuitive or easy to use. What makes IFB design different? I believe that the design of the IFB is more intuitive than other facets of bread crumbs, should be more strong, according to years of design and research experience of the faceted interface to get the following key design recommendations:

1, the level of location and the combination of bread crumbs characteristics

2. Use change instead of setting delete

3, automatically keep the most recent query information

4. Classification label of Crumb

5, clear expression How to start a new search

6, allow direct operation of the key words

In the following sections, I will discuss these design suggestions to explain what the IFB solution is compared with the existing faceted breadcrumbs.

1, layered location and bread crumbs characteristics of the combination

In 2002, information architect Keith Instsone, in his third annual IA Summit poster, catalogued three types of breadcrumbs to reveal the title: location, path, and attributes of crumbs. In the faceted search interface, attribute breadcrumbs usually convey the value of the application, such as price, category, style, brand. General properties breadcrumbs are path crumbs, users display hierarchy values in the order of current search results, and Ariba finds the property path of the network the breadcrumbs UI is shown in Figure 3.

Figure 3. Ariba Lookup Network Property path breadcrumbs UI

Unfortunately, the attribute path crumbs from the integrated search and browsing point of view is not the strain to help users find related content:

1, temporary crumbs, can not use effective links and anchor categories, landing pages, brand catalogs and other browsing pages, precisely because it carries all the historical attributes

2, temporary crumbs can not effectively show where users can go, because they can only show where users have been.

3. Pages with temporary breadcrumbs cannot be effectively linked through natural search because users create different URLs each time they visit

4, when the query changes, the crumbs on the property will be "random" jump.

In contrast, location crumbs are hierarchical: they do not deal with where the user has been, only the organization of the page in which they are located. The hierarchy provides an intuitive way to access complexity and access resources, and is useful in a wide range of search and navigation tasks. How do we determine the hierarchy of attributes? My research makes me believe that most people will intuitively find that in the position attribute, the display of the unselected category (most typically the left-hand navigation bar), the classification as another attribute of the breadcrumbs, showing the unselected hierarchy also provides an effective way to integrate search and browsing, In most lookup interfaces, categories appear first in the left navigation, which makes the value of the browse category attribute greater than the value of the faceted search.

Figure 4. Amazon.com left navigation bar

Most people found that the IFB bread crumbs structure is simple and intuitive, can accurately predict the system behavior of complex filtering tasks, only a few minutes can be applied, deleted and changed the filter value.

2. Use change instead of setting delete

Figure 5. Implementation by check box. Inventory Backlog Settings Delete

Deleting the application is to uncheck the box next to the crumb side, and for most people, setting the deletion is not a user's mental model. One evaluator said: "It feels like I have to turn off the radio every time I have to switch stations." "Most people think that using the dropdown box to replace Canon with Nikon is simpler and more convenient than to select Nikon and remove Canon." A drop-down operation is more intuitive than a typical delete operation, and users can discover all navigation options from the parent category or directory. This approach was first introduced by Luke Wrobelwski on his excellent book Web site: A visual approach to network usability. Edmunds.com realizes the use of the dropdown box space in the breadcrumbs, as shown in Figure 6.

Figure 6. Edmunds breadcrumbs with pull-down options

In my tests, the majority of people prefer the design of the breadcrumbs with a drop-down option, rather than setting a deletion option, because it's more intuitive and effective.

3, automatically retain the relevant query information in my research, I find that people rarely want to start all over again, unless they want to express this behavior explicitly. On the contrary, at every change, the user wants to keep the query information as much as possible and wants the system to help him build a more "sensible" query, and the elegant Pull-down option no longer applies to their new query. Unfortunately, few sites today are doing a good job of this, for example, many users expect to change the model Fusion option to Mustang and not keep the 2005-year option. As shown in Figure 7, edmunsd.com the model so that the year is reset to the current year, which is simply no longer shown on the breadcrumbs.

Figure 7. Edmunds.com drop down classification to change the required query information

I find that the behavior of the strain system that retains the associated attribute value is applied to the new query, which is the best way to always have a search result.

Fig. 8 shows the integrated faceted crumb design, after converting the product type from digtial camera to lenses, retains the brand and keywords categories, and removes the denotes category of the camera (since he does not apply to the lenses category)

Fig. 8. Integrated faceted breadcrumbs Keep related query information

Retention categories apply when users update queries to focus on their goals and allow the system to handle other details.

What if the user really wants to browse only the lense product type? My test shows that most users can directly click on the lense link to the Lenses results page, which is very intuitive. The result of adding the existing breadcrumbs link is that we have a powerful, intuitive, flexible lookup control.

If not browsing, would someone like to remove a hierarchy from the crumbs and keep the remaining query categories? My research shows that most users will find it easy to see the integrated breadcrumbs in the Pull-down menu, which is visually provided with the view all option, as shown in Figure 9

Figure 9. IFB visually removes a hierarchy

4, the bread crumbs label aspect

The biggest problem with Crumbs, Jared Spool, is that "lack of clues" and "the wording of individual elements becomes important"

While most applications can easily show the classification of applications on breadcrumbs, my research shows that a lot of information clues need to be added to the name editing of categories. If the user through natural search, the resulting integrated Bread Packet title (shown in Figure 9), can help users understand their inquiries and rapid positioning.

5, clearly show how to start a new search

The Ariba interface shown in Figure 3 has a search box that retains the original keyword separately, in a way similar to Google. Unfortunately, if you want to do a new search, you need to delete the original keyword. This is obviously inflexible and we will try to keep as many enquiries as we have said.

Instead, IFB under the Crumbs ' home heading, with a "new search" button, as shown in Figure 10, clicking "New Search" will remove all levels and keywords and reset the crumbs to a full-screen search box to remind users that this is just a simple google search.

Figure 10. "New Search" in the IFB interface

Resetting is done through an HTML layer or a similar method so that the rest of the page does not change. In this way, the search box resets only for a moment, or even an elegant animation transition.

6, allow direct control of keywords

Many search interfaces are like Figure 11overstork. COM interface, there are two search boxes: One is already existing query "results Requery", one is the input keyword search. There are two search boxes that can occupy valuable screen space, and there will be some potential confusion. Worse, the user can not modify their keywords directly after executing the query search, because the system has converted the keyword into an unmodified category and can only be deleted as a whole.

Figure 11.oversock.com does not allow users to directly modify the keyword query

In Ben Shneiderman's design user interface: An effective human-computer interaction strategy describes: direct manipulation is one of the key principles of human-computer interaction. IFB provides a dynamic editing hierarchy for directly manipulating keywords. As shown in Figure 12.

Figure 12. Direct manipulation of keywords in IFB

When you start a query task, the search box expands completely to the same width as the page. When users enter certain keywords, they remain in the search box to facilitate editing or adding keywords, as shown in 12-a. If the user chooses one or more layers, they often add to the front of the search box based on their level, and as the hierarchy increases, the search box will become smaller in size until a reasonable minimum size is reached. As shown in Figure 12-b.

If you add more hierarchies, a scroll arrow appears immediately after the home item, allowing the user to scroll through the home items and other levels outside the search box, as shown in Figure 12. Dynamic editing keyword design is very successful, because our test users feel that he is very intuitive, flexible, easy-to-use.

Summary

The faceted bread crumbs design has only recently emerged from his professional users (academics and computer enthusiasts) and is slowly being accepted by the public.

The faceted breadcrumbs, in my opinion, are the most intuitive key controls in the next Generation lookup interface, which fully integrates the faceted search and browsing functions. I hope this article can help you to design a faceted search interface, but also hope that you help promote the faceted bread crumbs design, help us to the flexible integration of the search into practice.