1. By default, display the search results in a view that facilitates easy visual scanning for the purpose of identifying candidate information targets.

   
   
   Show More...

2. Provide an expanded view that provides further detail on a specific record.

   

   • The expanded view may provide additional information to that displayed in the default view, or it may provide different information to support consideration.
     
   • These views should be aligned with user mental models by providing detail that enables actionable decisions from within the search results page. Some examples may include:
     • Larger images.
     • Detailed descriptions and/or further information.
     • Links to further information related to the entry such as driving directions, availability information, shipping information, etc.
       
   
   Show More...

3. Enable each search result to be individually displayed in an expanded view.

4. Make the mechanism to trigger the expanded view easy to discover.

   

   • If a rollover action triggers an expanded panel, it should be triggered by rolling over a prominent component of the result's components, such as the thumbnail image. Ideally, the thumbnail image would have an icon superimposed that indicates this action (e.g., a small plus sign or magnifying glass in the lower-right corner).
     
   • If a click action triggers the expanded panel, it should be triggered by clicking on an icon or a link that clearly states its function (e.g. ,"Quick info" or "More details").
     
     
   
   Show More...

5. Minimize the degree to which the expanded view occludes adjacent search results.

   • If possible, avoid completely covering adjacent search results with an expanded view when the action is triggered by a rollover action. Obscuring other result items will limit the ability for users to move a cursor through a set of results and appropriately target other items of their choice.
     
   • Expanded views may cover part or all of adjacent items when triggered by a click action, or adjacent results may be pushed aside to accommodate the expanded footprint size.
     
     
   
   Show More...

6. Use symmetrical interactions to expand and collapse expanded views.

   

   • If the expanded view is triggered by a rollover, a rollout event should collapse the expanded view.
     
   • If the expanded view is triggered by a click, it should be collapsed by a click on a close/collapse/hide icon or text.
     
     
   
   Show More...

7. Accomplish the expanded views by one of the following methods:

   • Click to display an overlay panel (see solution element #8).
     
   • Click to display an inlay panel (see solution element #9).
     
   • Roll over to display additional information (see solution element #10).
     
   • Click to open a modal window (see solution element #11).
     
     
   
   Show More...

8. Click to display an overlay panel.

   

   • Click on an icon or control to display a panel that lays on top of the search results area.
     
   • Collapse the detail panel by clicking on a "Close/Hide? icon or link.
     
   • Pros:
     
     • Overlay panels may occlude adjacent content and therefore have the potential to deliver a larger volume of content than would be acceptable with a rollover event.
     • Creates an opportunity for a user to view more than one search result item in an enhanced detail mode at a time. This may be used to facilitate a user-driven comparison mode.
       
   • Cons:
     • Popup panels may obscure neighboring elements in the page design.
   
   Show More...

9. Click to display an inlay panel.

   

   • Click on an icon or control to push adjacent result cells down to accommodate the additional space needed. This eliminates the concern of overlaying adjacent result content.
     
   • Maintain a consistent location for the expand/collapse control to allow users to toggle easily between states.
     
   • Optional: Animating the expand/collapse sequence can help users to maintain a visual orientation as the interface is modified between the minimized and maximized states. The animation should be brief (approximately a half-second or less).
     
   • Optional: It is possible with the inlay model to allow a user to expand all search results with a single control. If this approach is used, be careful to ensure that individual entries remain conducive to a quick user scan of search results.
     
   • Pros:
     • Works well for displaying a relatively high level of information.
     • Can be used to add incremental information to the base level of detail already displayed or to replace the base level of detail displayed within a new presentation.
     • Creates an opportunity for the user to view more than one search result item in an enhanced detail mode at a time. This may be used to facilitate a user-driven comparison of specific records.
       
   • Cons:
     • If the expanded format of the result item is large enough to push all other results off of the page, the user may confuse the expanded state of the result item for a product detail page.
       
       
       
       
   
   Show More...

10. Roll over to display additional information.

    

    • Trigger the detail view by rolling over a specific activation target (thumbnail image, icon, etc.) within a record.
      
    • Collapse the detail panel upon rollout of the active area.
      
    • Minimally obscure neighboring results in the expanded view to facilitate quick and easy switching among information targets.
      
    • Incorporate a slight delay before triggering the expanded state to allow for movement of a cursor through a set of results without inadvertently triggering rollover events.
      
    • Pros:
      • Facilitates a quick preview that is easily activated/deactivated.
        
      • Works well with relatively small amounts of information.
        
    • Cons:
      • Has the potential to create distracting or annoying user experiences. A slight delay on the rollover event will help to mitigate the appearance of unwanted panels due to incidental or unintended mouse interactions.
        
      • Popup panels will obscure a portion of the results, potentially preventing a user from reading or otherwise interacting with neighboring records.
        
        
    
    Show More...

11. Click to open a modal window.

    

    • Modal windows will overlay the result item selected -- and potentially other adjacent result content as well.
      
    • Close the modal window by clicking a "Close" icon or link, or by following a call-to-action link such as "Add to cart".
      
    • Pros:
      • Can accommodate a high level of information.
        
      • Can be used to display additional information to the base level of information that is displayed in the result list or can incorporate the existing information into a new display presentation.
        
    • Cons:
      • Prevents a user from interacting with any other elements on the page until the modal window is closed.
        
        
    
    Show More...

Failing to clearly differentiate spotlighted results from the natural search results may result in the user confusing the two.