​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.

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.

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.

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.

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.

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.

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

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.

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