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
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.
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 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.
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.
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.
The effect, while visually pleasing and even entertaining, has two practical uses:
- 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.
- 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.
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.
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.
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”.
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