Back
SharePoint

Introduction to Hover Panel in Search 2013

​Hi everyone—my name is Patrick Quinn, and I’m a Program Manager working on the SharePoint search user experience. I’d like to introduce you to one of the most exciting new Search user interface features in SharePoint Server 2013.  Introducing…

…our new hover panel! 

 The new Search interface and hover panel.
The new Search interface and hover panel.

When we designed the UI for this release, we focused primarily on making sure each result is quick and easy to find and read, while still displaying as much relevant information as possible to the end user. But, these two concepts are often in conflict with each other—the more information you add to a result, the more “cluttered” the UI looks.  The more “cluttered” the UI, the harder it is to scan. There needs to be a balance between the quantity of information and the organization of that information.

The hover panel is an exciting addition to this release, and we think it solves this problem quite elegantly. We pared down our inline results to contain only key pieces of metadata common to most results, such as the title, URL, and hit-highlighted summary. These compact, streamlined results enable users to easily scan the page. Then, when the user wants to learn more about a result, they can hover their cursor over that result to see the hover panel dialog box.  The hover panel contains rich metadata that enables users to investigate a result more thoroughly, without having to click through and load the document.

We’ve included some important metadata in the hover panel, such as the file type, the date the result was last edited, the people who have edited it recently, and view counts (so you can see how often a document was viewed). We’ve added more than just metadata, however.  Document parsing tools allow us to index section headings and slide titles that are inside of a document, and we surface the headings and titles that are relevant to your query. We call these “deep links” and you can see them in the hover panel under the heading “Take a look inside”. Even cooler, these headings and titles are links—clicking through will take you directly to that section (or slide) in the document! Now, users can search across millions of documents, and with a single click, zoom right in to one specific section of one document.  
A closer look at the hover panel preview, document links, and actions. 
A closer look at the hover panel preview, document links, and actions.

The bottom of the hover panel contains a list of actions that may be performed on a result. Now you can follow or open the document, view the document’s library, or send the document in an email message right from the results page. These actions are also completely customizable, so your results can be more actionable than ever.

Perhaps the most useful addition to the hover panel is the high-fidelity Web Application Viewer preview, available for all Office documents saved to SharePoint. These interactive previews are big enough to give you a solid idea of the structure, contents, and styling of the document you’re hovering over. You can page through the document, view charts and tables, and even see the animations of a PowerPoint slide (If the Word preview text is a bit too small for you, here’s a hint—double-click to zoom). It’s never been easier for users to judge search results, because now they can quickly scan through an entire document to decide whether it’s the one they’re looking for. These previews are not limited to just documents, either. The hover panel shows you rich previews for webpages, so you can take a look inside before clicking. Videos have an embedded viewer so you can take a look before clicking through.
The video hover panel allows users to play videos. 
The video hover panel allows users to play videos.

Wow, it certainly sounds like there’s a lot of data we can put in that hover panel.  You may be thinking we’ve designed ourselves right back into the problem we were initially trying to solve—so much data in the hover panel reduces the overall readability of that data. That’s where one of the coolest moving parts of our UI comes into play—Result Types! We don’t squeeze all of the above into a single hover panel for every result. Instead, Result Type rules determine what ‘type’ of result you’re looking at, and the correct hover panel will be shown based on those rules. 

 

Result Types map categories of results with an appropriate rendering. 
Result Types map categories of results with an appropriate rendering.

Essentially, each hover panel is customized to the result you’re looking at. If you’re hovering over a Community site, we’ll show you the most popular discussions. Hover over an Office document, we’ll show you the document preview. Hover over a Discussion thread, we’ll show you some replies. For People results, we’ll even show you documents that person has authored that are relevant to your search query.  In this way, we can ensure the hover panel never feels cluttered but always contains the most important information!

I hope this short introduction gave you some insight into how and why we’ve introduced the hover panel, and what types of tasks it can be used for. Stay tuned for future blog posts about how you can customize the hover panel for your own unique result types!