10 Cool Things About The New Yahoo! Photos

By Scott SchillerAugust 17th, 2006

Editor’s Note: We understand that Yahoo!’s user interface isn’t all about the YUI Library, and there are exciting projects happening here that do great work in the browser without much YUI usage. Though almost all development at Yahoo! is now using YUI, the new Yahoo! Photos site was well underway before YUI was released, and is therefore a notable exception as we mentioned earlier. (It does, however, use YUI’s Connection Manager.) This post is guest-written by one of Photos’ lead frontend engineers. Enjoy!

The New Yahoo! Photos has a lot of cool features not commonly found on the web. Drag and drop and inline editing makes getting things done with your photos fast and easy, and it just feels more like a rich application.

To make the new stuff work, we had to make browsers jump through some hoops. This post is the first of a few that will explore some of the big ideas behind the scenes.

(Meanwhile, we hope you’ll take it for a spin to see for yourself.)

1. Drag And Drop/Selection Model

With this new version of Yahoo! Photos, the old way of selecting photos using checkboxes is as out of style as using tables for layout! Let’s say you were viewing album A, and wanted to copy some photos from there to album B. Like on a desktop, you must first make a selection.

You can simply click and draw a selection rectangle around the photos you’d like to copy, or alternately select photos like you would on a desktop using the CTRL or Shift keys. Once selected, you can use CTRL-C to copy or simpler yet, just drag the photos to the album on the list at left; confirm the copy, and you’re done!

A "Copy Photos" Dialog

A “Copy Photos” dialog

The selection model is a core part of content management for owners on the New Yahoo! Photos, as well as for guests and friends browsing and viewing photos. It is easy with the mouse, and when combined with keyboard shortcuts, a powerful way of selecting a choice number of photos from a large collection to perform operations on such as viewing a slideshow, emailing to friends or ordering prints.

Viewing photos in an album

Photos may also be rearranged within albums, similar to the way they can be copied; users may simply select, then drag and drop the photos to their new position within the page, and the new order will be saved.

Rearranging photos (red marks for illustration)

Rearranging a selection of photos, about to drop in new location (red marks for illustration)

2. Keyboard Shortcuts

Desktop applications implement shortcuts to commonly-used menu items, such as CTRL-A or CTRL-C (Command key instead of CTRL for Mac,) which typically are “Select All” and “Copy”, respectively.

This applies to the new Photos as well, which uses some keyboard shortcuts to make common tasks more accessible. While in a thumbnail view, you can select all of the photos by using CTRL-A, or copy a selection of photos to an album by using CTRL-C (we’ll show you a “copy to..” dialog at that point.)

3. Inline Editing

One common interaction that some may feel has been missing from the web, is inline editing. When viewing your own photos on the New Yahoo! Photos, you can easily edit some of your photo data inline without having to wait for the page to reload. If you don’t like the name of a photo, simply click on its name, type a new one and click elsewhere or push Enter – just like you’re used to on your desktop. You can also add comments and assign ratings inline when viewing a photo in detail, again without reloading the page.

Inline editing in action.

Inline editing in action.

4. New User Tips

Many of the new features such as the selection model and drag and drop in the new Yahoo! Photos may not be new to computer users, but our findings were that people did not expect to find these sort of features on the web. For this reason, we have the “New User Tips” guide which serves as an assistant of sorts, educating first-time users about what they can do with the new site.

The first time a new user logs into Yahoo! Photos, the “New User Tips” tutorial begins and explains some of the key new features with visual pointers overlaid on top of the “live” UI. This is similar to the “tour” feature as shown on the recently-redesigned Yahoo! front page.

New user tips in action.

5. Animation and Eye Candy

The New Yahoo! Photos was designed to both “look good and work well,” including some stylistic flourishes and pleasing UI effects such as animation, fading transitions, modal dialogs and drop shadows.

In the case of dragging a selection of photos within the UI, an animation effect is used when the user starts dragging; the photos “zoom and shrink” towards the cursor as though it were a vacuum pulling the photos inward, so that they group together as miniature thumbnails underneath the cursor. (This is accomplished using Javascript, which repetitively modifies the position and size of each photo thumbnail until the animation is complete.)

The effect, while visually pleasing and even entertaining, has two practical uses:

  1. It prevents a large, full-size replica of content (cloned, “ghosted” thumbnails) from moving around the screen while the user is dragging, and creating “giant scrollbars” that disrupt the experience. On the desktop, moving a full-size replica around is not an issue because of the lack of scrollbars; on the web, we wanted a way to display a potentially-large selection of photos without causing the user’s browser to adjust its scrollbars to accommodate the extra content.
  2. It’s more expensive (i.e. slower) for the browser to redraw larger areas of content at once.

The earliest prototypes of the New Yahoo! Photos UI did not have the animation sequence when beginning a drag operation, but the lack of visual transition between “selected” and “dragging minimized under the cursor” looked awkward. After we added the animation effect, the UI felt more playful and fun, so it stayed.

6. Progressive Loading

People are taking and sharing more and more photos, and our collections are growing into the thousands of photos. To make managing big photo collections as easy as possible, we had to figure out a way to display lots of thumbnails while keeping the site’s browser-based UI snappy.

The New Yahoo! Photos strikes a balance between scrolling, pagination, browser rendering capabilities, and memory limitations and uses a technique of “progressive loading,” effectively copying and inserting an empty “template” for a page of photos, then loading the photo information (metadata and thumbnail images) and adding them to the page on demand. It is truly on-demand in the sense that photos and related data area not loaded until their “containers” are scrolled into view, which keeps the UI feeling responsive. (More on the details of this technique in a forthcoming post.)

7. Upload Tools

Uploading is the first step to take when you’re using a photo site to share or print. Since most people want to share many photos at once, it’s crucial for a site like Yahoo! Photos to make uploading large batches of photos easy.

To do that, the New Yahoo! Photos provides an Easy Upload Tool that comes in two flavors: a Firefox extension (that works on PC and Mac) and an ActiveX control for Internet Explorer on the PC. Both flavors of the tool share the same Javascript client-side code and UI. This approach allowed us to provide a consistent user experience regardless of browser, and reduces the maintenance cost and testing overhead. A standard form-based uploader is provided for other browsers.

Third-party developers have started writing upload tools that use the Yahoo! Photos API. Michael Galloway’s cool iPhoto plug-in is one of the first to appear. Documentation for the public API should be posted on http://developer.yahoo.com shortly if you’re interested in writing something.

8. Messenger Integration

The latest version of Yahoo! Messenger pulls in our photo picker tool to allow users to quickly share each others’ favorite shots from Yahoo! Photos right within your IM window.

IM sharing in action

9. Target Store Locator

When ordering prints of your photos in the US, you can choose to pick them up at your local Target store, as well as send them to a Target store close to a friend or family member across the country. Locating the closest Target store is now a lot easier with the draggable Yahoo! Maps mashup created by our partners at EZ Prints.

Screenshot of Target Store Locator

10. …And All That Ajax: YUI Connection Manager

“What’s Ajax?”, Amy Hoy asks in her humourous cheatsheet (pdf link) – “Buzzword Bingo,” she says: “Everyone’s talking about Ajax, and practically nobody actually has a clue as to what it actually is”. She summarizes nicely in saying, “No server requests? It Ain’t Ajax”.

If I were to try to answer Amy’s question, I’d say the YUI Connection Manager, part of the Yahoo! User Interface Library, is Ajax. The YUI Connection Manager wraps Javascript’s native xmlHttpRequest object and provides a normalised API which allows data to be retrieved asynchronously, including handler hooks for events such as success and failure. The New Yahoo! Photos uses the Connection Manager extensively for retrieving photo data on demand, performing inline editing on photos (e.g., renaming, copying, deleting or assigning a rating,) loading messaging data to be displayed in modal dialogs and other “inline” functionality which is carried out without reloading the page.

The adoption of the xmlHttpRequest (XHR) object across major modern web browsers has prompted developers to explore dynamic updates (both sending and receiving,) and as a result there has been a renewed interest in Javascript. Because pages now reload less-often due to XHR calls, Javascript is being used to manage the result of these calls – modifying the Document Object Model (DOM) within the browser, updating or creating new content, creating animation effects and transitions to enhance the UI and overall providing an enhanced experience. These techniques, collectively a part of “DHTML,” have been around since the late 1990s, but did not see such wide-spread popularity until the XHR object became a de-facto standard.

While technically not Ajax, javascript animation, dynamic updates, effects and other forms of DHTML have become more mainstream due to the adoption of Ajax. While The New Yahoo! Photos was developed before the YUI Library was available, utilities are now available in this area including animation, drag and drop, positioning and event handling.

Was It Good For You, Too?*

The New Yahoo! Photos has some powerful new features and desktop-like interactions which are not typically expected on the web; we think you’ll like it. If you don’t have a Yahoo! ID, you can get one and start uploading photos at http://photos.yahoo.com/

This article is one in a multi-part series on the New Yahoo! Photos; in the next article, we will delve into some technical details, including thoughts about performance, troubleshooting and other points of interest.

Scott Schiller is a self-described DHTML + Web Standards Evangelist, Resident DJ and record crate digger. He is one of the Front-end Engineers on Yahoo! Photos, and enjoys combining technical and creative skills in his work.

* Heading inspiration: alistapart.com

22 Comments

  1. What does this mean?

    “Account creation failed. We’re sorry but there was a problem creating an account for you.”

    I’m a registered Yahoo! user of My Yahoo and Fantasy Sports and used to have a Yahoo Photos account. Not sure why I can’t see the new design.

  2. When I log in, all I get is a message:

    “We’re sorry, but there was a problem creating an account for you.”

    I can log into the rest of my yahoo stuff fine, but photos.yahoo.com just doesn’t want to work.

  3. 10 Cool Things About The New Yahoo! Photos…

    Hmm, was not aware of anything all that new and exciting about Yahoo! Photos? After reading the piece below, I think I am beginning to see the bigger picture………

  4. [...] The Yahoo! user Interface blog lists ten cool things you can do with the new Yahoo! Photos. [...]

  5. [...] The Yahoo! user Interface blog lists ten cool things you can do with the new Yahoo! Photos. [...]

  6. Is any of this snazzy stuff going to be added to flickr, or are flickr and yahoo photos going to combine?

  7. Is there any link between Flickr and Y! photos to synch your photos between the two applications?

  8. Re: Account creation issues:

    We exerienced a temporary hiccup yesterday, but we’ve since gotten to the root of the problem and the issue has been fixed. New users will now be able to sign up for a Yahoo! Photos account without a hitch.

  9. [...] Awhile back I failed to make my point about Yahoo doing “too good” a job at 2.0 for their own good, but now I see they are back at it again.    Yahoo Photos looks like some really good stuff, and if I remember correctly they have a huge library of pix and a user base  that is something like 10x greater than Flickr.    But I’m already confused.   Yahoo owns Flickr, which is a great application.   Are they expecting Flickr users – and more importantly developers of picture applications – to switch to Yahoo Photos?  Why? Are they rebranding here?   Sure I could spend a little time trying to answer these questions but this is not high on the list.  I know Flickr and love it and I’ll use it until further notice. [...]

  10. [...] 10 Cool Things about it: [...]

  11. The new service looks great, and I’m anxious to begin using it. Some minor issues are keeping me from really enjoying my initial experience. So far, I have been unable to save any changes to my images using the inline editing features. The inline editing features work fine, but any attempts to save my changes result in an error. Hope the hampsters are working feverishly behind the scenes to correct the issue. All the best.

  12. Can anybody tell me. I’m a flickr pro user. Is there a) an upload / storage limit with Yahoo b) when you upload your original picture (e.g 7.1 megapixel photo) does it store the oringal size (like flickr) to be downloaded at a later date?

  13. [...] Last week, we launched Yahoo! Photos v3 to the U.S.  You can read the official press release, or check out the usual suspects.  This is the culmination of over a year’s worth of effort – an entire re-write of the site from the ground up.  Because we were able to start from scratch, you will notice many new features and “web 2.0″ concepts not found on other sites of this scale. [...]

  14. [...] 10 Cool Things About The New Yahoo! Photos » Yahoo! User Interface Blog The New Yahoo! Photos has a lot of cool features not commonly found on the web. Drag and drop and inline editing makes getting things done with your photos fast and easy, and it just feels more like a rich application. (tags: ui) [...]

  15. [...] 10 Cool Things About the New Yahoo! Photos—As the name implies, these are some tips on ways that developers and publishers can get the most out of Yahoo! Photos. [...]

  16. I received the beta a few days ago. It is very cool, and yet it has a few uncool UI issues, especially compared to Picasa Web Albums (from Google)-

    The images are too small on screen. There should be a choice for thumbnail image size. Viewing individual images or slideshows should scale to fill the browser.

    There should be a 100% view option.

    Flipping between images when viewing them individually should be much more intuitive and faster. The left and right arrows are tucked in the upper right corner instead of immediately above or below the picture. There is a slowish delay when paging through images.

    Each of these points is much better handled in Picasa Web Albums.

    Obviously there are a lot of features in YP that are best-of-class. I love the drag and drop, inline editing and selection tray. The use of a token that expires for sharing arbitrary photo collections is very well done.

    But I find myself uploading to Picasa more often than Yahoo photos, because looking at a photo album there is a better experience.

    p.s. one of the web usability gurus had a principal that said something to the effect of unless the status quo is hoplessly broken, you are better off using the established standard than inventing a new user interface, even if it is marginally better. I wonder if double clicking the thumbnail images to open them fits in this category. I don’t know of any web application that uses a double click in this context and I know I’ve found myself single clicking and wondering why the photo doesn’t open.

  17. [...] 10 Cool Things About The New Yahoo! Photos: Yahoo’s new photo site sports some neat visual effects–not only drag and drop, but grouped drag and drop, fancy placeholder effects, etc. (Watch the first screencast!) It’s all JavaScript (though apparently it doesn’t use Yahoo’s user-interface library). [...]

  18. I was wondering if the code you show here is going to be released in YUI! library.
    I would like to see code for:
    - Selecting (block) elements like windows select e.g. with ctrl and shift etc.
    - If you start dragging them that they resize and follow the mouse.

    Any chance?

  19. I love the new Yahoo Mail and the new Yahoo Photos! Brilliant! Rock on!

  20. I just signed up for a yahoo account so that I could use the photos section. Everything else works except the photos. It is telling me that “account creation failed.” I have tried their help section, but nothing seems to fix my problem. Help? Please?

  21. Pity that as paying Yahoo customer I still dont get access to the new yahoo photos. More than 6 months after the launch in the US seems the UK (and probably the rest of the world) is far behind receiving the service.
    From this blog I figured out that its probably the fact that Yahoo wont make any extra money from the printing services that they point you to in the US in this release.
    Come on Yahoo, please dont make me move over to Google Picassa!