Back
SharePoint

Designing a beautiful search experience – The basics

​Hello everybody! My name is Kate Dramstad, and I am a Program Manager on the SharePoint search team. The search experience in SharePoint 2013 is more extensible than ever—we’ve empowered designers and developers to build almost anything they can imagine. But, it’s important to be careful when customizing the search experience. There is a fine line between a balanced page and a cluttered page, and we’d like to share with you some of our thinking about how to design a search experience that’s both gorgeous and usable.

Whole-page alignment

One of the most important factors for our search experience is the alignment of all of the page elements. In our default design, you’ll notice that the refinement Web Part (showing sorting options along the left side of the page) and the SharePoint search center icon (the magnifying glass image in the upper-left corner) are left-aligned. The search box, navigation, and results are also left-aligned. The top of the search box aligns with the top of the icon; the bottom of the navigation aligns with the bottom of the icon.

 
Figure 1. All of the elements on the search results page are aligned with a grid, shown here in green

This may seem like a minor detail, but snapping the elements on our page to a grid actually helps users to scan the page more easily. Components are separated from each other with strong vertical and horizontal lines of white space. This helps the eye to more easily distinguish between different components on the page, which is extremely important. A misaligned page, at best, just “feels wrong” to most users and, at worst, actually hinders the user from scanning results efficiently. When components are misaligned, it can create a “jagged edge”. When the eye tries to scan a jagged edge, it has to dart back and forth.  It is much more efficient for the eye to scan in straight lines.

 
Figure 2. In this image, the search icon is shifted to the left so it no longer aligns with the grid

When adding a new component to the page, or rearranging the existing components, it is very important to keep this grid in mind if you want the experience to be as polished as it can be. 

 
Figure 3. Here we’ve modified the inline results to include a star-rating feature and some additional metadata. Notice how the added features still align with the grid.

Whole-page look and feel

Alignment is not the only thing that’s important. You should also pay attention to the number of colors, fonts, and rich controls on the page. The focus of the search results page should almost always be the results themselves, so when styling components on the results page, you want to make sure you aren’t drawing the user’s eye away from the results. Following are some tips and tricks.

Use well-understood color mappings when possible

For example, it is a general convention in search results that blue text is the clickable result title, and green text is the URL of a given result. Deviating from this forces users to think more about what they’re looking at.

 
Figure 4. Switching the color of the title and the URL is somewhat disorienting for users. Try to use color in a way that matches well-understood conventions

Use as few colors as possible

Colors are generally used to help certain key things stand out, such as a selected filter option, a result title, or a URL. But, using many colors can make it so that everything is trying to stand out, with everything competing for the user’s attention. In the end, nothing stands out because it becomes a colorful visual jumble.

 
Figure 5. Too many different colors are distracting, making it difficult to decide where to look and what is important. Limit the number of colors used in the UI.

Use as few typefaces and font sizes as possible

Fonts, font sizing, and bolding/italics are used for similar reasons as color—to help certain, important elements stand out. Just as with color, if you use too many styles and fonts, everything appears cluttered. Our product team often refers to this as a “ransom note”, where it looks like the page is cobbled together from different magazine clippings!

Keep rich controls as visually simple as possible

Take a look at the Date filter histogram refiner, under the heading Modified in Figure 6. Putting this refiner on our default page was risky at first, because it’s a complex-looking control that could potentially stand out when compared to the text-based filters. But, we kept the colors consistent with the rest of the page, and kept the shapes and lines clean and simple. It’s important to do the same when adding any custom control.

One idea we’ve played around with is a pie-chart filter. But, take a look in Figure 6 at how distracting this refiner is.

 
Figure 6. The custom pie-chart filter has too many colors and doesn’t match the visual style of the other controls. It’s too distracting.

Now, look at Figure 7 to see what happens if we simplify the color scheme and shapes.

 

 
Figure 7. By using colors that are already used in the UI and keeping with the visual style of the other controls, this pie-chart refiner is interesting enough that users will briefly explore its purpose—but not so distracting that they will be drawn away from their task

Conceptual division of the page

When designing a search experience, you should consider both aesthetic and conceptual details.  Based on popular search conventions and our own research, we’ve organized the page components into different areas based on the functionality and the user-interaction model. When adding or rearranging components, it would be best to keep our conceptual division, so that users don’t get lost looking for how to do something.

For example, all of our filter actions are on the left side of the search results page. When users want to filter their results set, they always know to look there. If you want to add a new filter to the page, it’s best to add it next to the other filters, so users don’t have to hunt around the page to find it.

Figure 8 shows an overview of the conceptual divisions of the default search results page.

 
Figure 8. The search results page is divided into five functional areas. When customizing this page, try to add new elements to their corresponding functional area.

These are just a few broad guidelines to get you started on building beautiful search experiences. I look forward to your comments and questions!