Tuesday, June 12, 2012

Interact Intranet: Customizing Search Results

Out of the box the Interact-Intranet search results look very practical and user friendly.  However for those with a purist design eye there are a few things that can be cleaned up to make it more stream-lined.



This document is a work in progress that will cover modifications that I've done.
The examples below are based upon using the Interact Intranet stylesheet which comes with 5.07.  It has some bugs and I'm debating redoing these changes using the "default" stylesheet instead


Quick vs Full Search
The difference is that full search is a full text search.  Will your users actually use this? Will they comprehend when to use it and what it does?  Will it clutter search results?
The fix:
Because this is a layout.css customization (F12 Developer Tools in IE will help you with figuring this out) and not in the display.css you'll need to override the class by entering something like this:

/* Search Results Customization */
.SearchDiv .SearchOptions {display:none;}


Time & number of results
This is cool to see once, but in the end I think it takes up space and provides little value.
The fix:
Change the line that says this:
.SearchDiv .Searchspec {margin-top: 0.2em;}
To this:
.SearchDiv .Searchspec {display:none;}


Order By
The average user won't know what "Interact Rank" means, and might have limited use for sorting (or ordering) by popularity and rating either.  So below are steps to remove this area.

The fix:
Add this line:
.ResultsOrder#ctl00_phi_DIV_ResultsOrder {display:none;}

What others are searching for
This area displays the most recent searches in the last 24 hours.
The fix:
Override the layout file by adding this line
#ctl00_phi_fsPopularDayPhrases {visibility:hidden;}
If you use display: none it triggers the hiding of the Saved Search module also even though they aren't connected.  Haven't been able to figure out why.


Shared Folders
Do you plan on indexing your share drives? We don't so we'd like to hide this entire section.
The fix:
Add line:
#ctl00_phi_fldSummary {visibility:hidden;}


General UI: Remove the Interact globe logo
The fix:
Add a 1 pixel transparent image name blank.gif to the Core folder.
Change the line that says this:
.SearchDiv {background: url("../Core/globe-search.png") no-repeat scroll 18% 10% #E6E6E6;}
To this:
.SearchDiv {background: url("../Core/blank.gif") no-repeat scroll 18% 10% #E6E6E6;}


General UI: Remove the horizontal rule in the search box area
Between Quick/Full search and the search results time area is a horizontal rule that can be removed.

The fix:
Since this is in the layout.css you'll need to override it by adding this line:
.SearchDiv .GreyDividerLine {visibility:hidden;}

Note: this will leave an empty space where the line had been.  If you set the display to none then it'll mess up the alignment of the "Did you mean?" section which would have to be corrected.


General UI: Cleanup the changes for Sara
In your CSS you'll find an entire section that has been commented out and begins with:
    /* Search changes - for Sara - 29/07/2011 

The fix:
Delete the whole section.


General UI: Remove the border around the results section
The fix:
Add this line:
.ResultsDiv#ctl00_phi_fsResults{ border-width:0px;}

Note: this will only remove the border, to remove the "Results" tag you'll need to add this other CSS entry.
#ctl00_phi_fsResults legend  {display:none;}

Final Result

Final Thoughts
There are a few quirks I'm still trying to over come.  In particular:
  • How to remove the gap between Filters and Your Searches
  • Renaming Your Searches to Your Saved Searches, or just Saved Searches
  • Changing the search text highlight from yellow to perhaps just bold, but not sure yet
  • Resolving an issue where the filter titles appear over the search box from time to time (click the Search button about 10x in a row and this error will show itself)
  • Removing the "Help" button in the upper right
  • Considering remove the grey box around the search input area

No comments:

Post a Comment