Sunday, September 17th, 2006

MS Live.com: Ajax Image Search

Category: Microsoft, Showcase, Usability

<p>Microsoft recently released a major upgrade to Live Search on Live. com. Here’s an overview of the Ajax-powered image search. The service is pretty snappy, a great leap in usability over “Image Search 1.0″. It’s exciting to see some bleeding-edge patterns used in a service like this.

Features include:

  • “Smart Scroll”. This is the Virtual Workspace pattern applied to a long list/table, or what Bill Scott calls “Death To Paging”. There’s no “Next/Previous 20 results” – you simply browse all the results by scrolling, and the page loads new images as you scroll, as well as updating the result count. There have been some nice demos along these lines, but this is the first major site to drop pagination in this way (any other examples?)
  • Bookmarkable URLs. Excellent! A major site finally adjusts the URL to reflect Javascript state, so you can bookmark it and send it to your friends. The technique involves setting the # property in the URL (the “fragment identifer”), so you get a bookmarkable URL like http://search.msn.com/images/results.aspx#imagesize=all&q=pac-man.
    But we all know Ajax breaks REST/bookmarks/history ;).
  • Scratchpad. An optional scratchpad lets you build a collection of images together for later use. You can drag images into the scratchpad, drag to rearrange them, and drag them between different collections.
  • Embedded web page. Using an embedded IFrame, the original web page containing the image is shown inside the results area.
  • Adjustable image size. Pull a Slider back and forth to quickly zoom the images in and out.

Happily conspicuous by its absence is the Live Search. pattern. The interface requires you to explicitly click the search button rather than continuously updating, which would have been inappropriate for this app.

All in all, a great effort and a chance to see some experimental Ajax features running on a high-profile site.

Related Content:

Posted by Michael Mahemoff at 3:26 pm
16 Comments

+++--
3.7 rating from 46 votes

16 Comments »

Comments feed TrackBack URI

I know it really hurts me to say this (i love to hate microsoft as much as the next person!) but i’ve been using the MS live search for a couple of weeks and i think Microsoft have done a superb job with the usability on this. For me the scratchpad is a great idea. They’ve obviously looked and learned from apps such as Fluxiom (for image resize). Didn’t realise about the smart scroll until you mentioned it but i guess that’s the way it should be; i used used it without thinking of paging.

Comment by Tim Barker — September 17, 2006

Very impresive, I look forward to seeing what Google turns out in response to this.

Comment by Tim — September 17, 2006

Their memory management has definitely improved (ie., leaks) – browsing the Pac-man page, I got IE up to 120 MB of RAM; hitting “back” brought it down to roughly 30 MB (eg., minimal memory leaks if any.) Well done.

I find the scrolling feels “fake” due to the fact that it’s all javascript-driven and not a native browser control, which is a little odd; it makes for more development work given they’re attempting to recreate native OS widgets in code – ultimately inconsistently (recall countless Flash scrollbar and selector drop-down implementations for reference.)

You can’t grab the scrollbar and drag it down the page to a given position, you have to let some data (image details?) load before you’re able to move down the page. The “bottom” only grows as you scroll down the list sequentially, as opposed to allowing you to drag to a specific location and then load photos 250 to 275, for example.

Pardon my rant, I don’t mean to be too critical – it’s still quite nicely done. ;)

Comment by Scott Schiller — September 17, 2006

How about fixing the broken markup in this post?

Comment by Kevin Yank — September 18, 2006

Is a my impression or images are managed in a different way with IE7 ?

Try to search a big list of images (for example searching … pig :P) then scroll with IE7 and after does the same with FireFox.

With IE7 you can see a sort of cached/optimized preview scrolling system (faster) while with FireFox every image is showed during scrolling (quite slow on my Centrino 1.6).

It seems that M$ want to show new IE7 JS speed using “diferent but equal” solutions while a simple setTimeout, with my tests, seems slower with IE7 than Opera 9 or FireFox 1.5 … or IE 5.5 too (to view an example look in my blog [name link] and test unobtrusive presentation view intro button).

Maybe Live is, in this moment, the best search engine interface but I hope it will not be optimized only for “some browser” …

Comment by Andrea Giamamrchi — September 18, 2006

Google Reader has a pagination-free implementation for your subscribed feeds. Does that count as a major site?

Comment by kent — September 18, 2006

Kent, that sure does. Thanks for the example.

Comment by Michael Mahemoff — September 18, 2006

The search doesn’t work with deactivated JavaScript.

Comment by Dennis — September 18, 2006

Ajax version of Yahoo Mail has similar pagination feature and its implementation is great.

Comment by Rama Krishna — September 18, 2006

Yahoo! Photo 3.0(Beta) also used similar trick.
It’s named “Download on Demand” instead of “Pagination Free”.

Check the example on, http://new.photos.yahoo.com/idliketowork#page1
. Photos from Scott Schiller.

Comment by Hedger Wang — September 18, 2006

@ Dennis: You get some trouble with Ajax without activated JS. Ajax needs JS, deactivate JS and visit my site: http://aka-fotos.de.

@ Microsoft: Looks good and feels good in FF 1.5 and IE 6, but:

- IE 6 bookmarking doesn’t really work (some bugs)
- doesn’t work with deactivated ActiveX in IE 5.5/6 (means images aren’t shown in big size when you click)
- doesn’t work in Opera 9 (the same)
- images are resized and don’t look good

yeah i am complaining about details but details make a website perfect. but microsoft shows what a good programmer can make better.

Comment by Andi — September 18, 2006

This stuff is cool, at first sight I’ve tought the on-picture-mouse-hover zoom may disorient some users… maybe you just need to get in a habit with it. Would be any better to press like CTRL and hover the pic? Anyway good work :-)

Comment by Teo — September 19, 2006

[...] Yes, live.com has launched (Ajaxian.com), but what I find more interesting is that if you hit view source, you will immediately see the following in the head section of the page. PLAIN TEXT HTML: [...]

Pingback by Paradigm Shift » Blog Archive » Live.com….ready for internet explorer 8? — September 19, 2006

[...] Ajaxian » MS Live.com: Ajax Image Search [...]

Pingback by Basement Tapes » MS Live.com: Ajax Image Search — September 19, 2006

I agree that humans need to be involved in the next generation of searching the web as computers are nowhere near our level of discernment. However, that being said, I think we have a long way to go before we have the correct time and place for human intervention–it will come, but I think its going to be a long and laborious process.

Comment by steeve — September 27, 2006

I really don’t know how they are doing a lot of this stuff – like the new window, which doesn’t have a new occurance of the browser running. Great stuff they’re doing with the rss feeds too. Only thing is, I think Google’s still better at returning results from searches…
But Live is now my home page.
I’ve got a lot to learn…

Comment by simon — October 26, 2006

Leave a comment

You must be logged in to post a comment.