SharePoint Tool Basket 2007 Page Ratings UX
The SharePoint Tool Basket presents us with a couple of great tools to use on our pages, in particular we have been making use of the Document Rating Webpart which was included. The functionality was all there to add the ratings to the page, but it’s user experience was perhaps a little too streamlined and resulted in users being a little confused as to what was happening.
The default behavior was to immediately take your page rating when you clicked on the star in order to have it submit that to the back end service. The rating stars would then show the average rating again and flash a message saying that your vote had been taken into consideration. Often times our less computer savvy users found this confusing and would end up clicking over and over wondering why their vote took but as soon as they moved their mouse off it seemed to snap back to some other value, making them think that there vote did not stick.
To counteract this I went in and introduced some JavaScript to modify the behavior so that the users had to click a ‘Rate this article’ link which would then clear all the stars and allow the user to cleanly interact with the rating stars. When a user clicked on the star of their choice, that would be taken into account, the message would be displayed and the average rating would then be shown again.
In pictures, standard view:
User entry mode:
And to do this I added this JavaScript:
<script type="text/javascript" language="javascript"> function showRatingsHelp() { $('.one-star,.two-stars,.three-stars,.four-stars,.five-stars').show(); $('div.rating-help-text-container').slideDown('fast'); $('li#HighLight_CurrentRatingPage').hide(); $('.rating-help-label').hide(); } function hideRatingsHelp() { $('div.rating-help-text-container').slideUp('fast'); $('li#HighLight_CurrentRatingPage').show(); $('.rating-help-label').hide(); $('.one-star,.two-stars,.three-stars,.four-stars,.five-stars').hide(); } $('ul.star-rating li a').live('click', function() { hideRatingsHelp(); }); $(document).ready(function() { $('.one-star,.two-stars,.three-stars,.four-stars,.five-stars').hide(); }); </script> |
I also had to add the actual help text and the ‘Rate this page’ text:
<div class="rating-help-label" style="float:left;margin-left:10px;margin-top:12px;">
<a href="javascript:showRatingsHelp()">Rate this page</a>
</div>
<div class="rating-help-text-container" style="display:none;clear:both;">
Click on the number of stars you wish to rate this page.<br/>
If you have already rated this page your last rating will be updated.
</div> |
But that was pretty much it. I can’t take all the credit, it was Scott Anderson over from UX Guys (http://www.uxguys.com/about/scott.html) who had the process improvement, I just had to implement it.
In: Programming · Tagged with: JavaScript, SharePoint 2007, User Experience, Web Programming