5th
Focus on Search Boxes - A Story on Focus()
It’s the little things that count, a famous quote which rings true for user experience design.
Take a close look at a Google and Yahoo!’s search page and notice where your cursor is positioned after the page finishes loading. Keep refreshing until you notice how the search pages treat the cursor differently than other site’s. What you want to notice is how after the page finishes loading, the cursor’s position defaults to the search box, also known as an input box. What this does is keep the user on their site and off their browser’s address bar. Google and Yahoo! move your cursor away from the address bar so that all subsequent searches are through their portal. This cursor positioning experience all takes place via one tiny line of JavaScript (document.f.q.focus();) and results in a huge sums of additional revenue for Google and Yahoo!, as well as a better user experience since the user isn’t required to move their mouse and click inside the only input box on the page.
What I find fascinating is the number of large web properties that still haven’t implemented the JavaScript code required to default the cursor’s position on load to the search box. Amazon, IMDb, and even Comcast.net haven’t implemented the cursor position focus on load experience while others like Microsoft Live Search have.
Almost every web site could benefit by this proven experience! For more Search Engine News, Amazon News, Comcast News, or Microsoft News be sure to visit nobosh.
Be sure to comment below with your thoughts, opinions and questions.
UPDATE
For those of you using Google’s Custom Search Engine along with JQUERY, here is a handy code snippet that should work without modification which I use on nobosh Trends:
<script type="text/javascript">
$(document).ready(function() {
$('#q').focus();
});
</script>
