Author Archive

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!

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.

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.

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.

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.

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”.

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

Tags: yahoo photos, new yahoo photos, 10 things, 10 cool things, yui, ajax, dhtml, yui library

Traditionally, file uploading in the browser has been awkward, slow and error-prone. File selection is done one at a time and monitoring progress of the upload is difficult. There are no simple callbacks for total bytes, progress, error handling and so on, restricting the developer’s ability to provide meaningful messaging on the UI end.

Conveniently, existing browser plug-ins such as Flash can be used to provide or enhance certain functionality which browsers themselves do not support. The combination of Flash and JavaScript allows for batch file selection, progress and error reporting, and speedier uploading.

In a typical Flash-driven uploader, Flash provides the core service and provides callbacks to JavaScript-land with status updates, messaging and so on. JavaScript then updates an HTML and CSS-driven UI. Flash-JavaScript communication is made possible by Flash’s ExternalInterface API, introduced with Flash 8. Several projects have implemented uploaders based on this approach, including the YUI Uploader control and SWFUpload among others. While developing against ExternalInterface can get a bit quirky, an effective library can abstract away most of the quirks and provide a convenient API allowing you to take advantage of Flash’s improved file-handling abilities through JavaScript.

Building an effective upload UI

On Flickr, we implemented a simple large “Choose photos and videos” link which when clicked, opens a multi-select-capable file-selection dialog driven by the YUI Uploader (which requires Flash 9). YUI Uploader provides file metadata via fileSelect event callbacks after files are selected, at which point the file list and UI can be updated. The user can add and remove files as they like according to business logic, configure upload options and so on.

Beginning the Upload

Once the user has prepared their selection of files and clicked “Upload Photos and Videos”, the file queue is processed. YUI Uploader can upload files simultaneously or in sequence to a given URL (a signed API call in Flickr’s case) with callbacks for file progress, errors, file completion and upload completion. The idea is that the control’s Flash component simply sends files and reports errors and progress, leaving all of the event handling to JavaScript. Because of this separation, upload behaviours can easily be changed or updated without having to change the Flash component.

Upload Progress

During file upload, the uploadProgress event fires regularly, providing the file ID, bytes uploaded and total bytes for each file. This data can be reflected as a progress bar, a percentage value or raw bytes depending on your UI.

Flickr Uploadr screencast from designingwebinterfaces on Flickr.

Connection Error Handling

If a file upload fails due to a connection or IO error from Flash, the uploadError event will fire so you can attempt to gracefully recover by retrying the upload of that file. Another safeguard is to implement a basic timeout such that if a file upload “hangs” for too long without a reported error (e.g., 2 minutes passes without an uploadProgress event), the file upload can be aborted.

File Upload Response Handling

When a file has been posted to the target URL, the server response is passed to a JavaScript callback via the uploadCompleteData event. Photos are processed asynchronously post-upload in Flickr’s case, so a processing ticket ID is provided in the upload response. The ticket ID is then polled via API calls until a success/fail result is ultimately returned after server-side processing.

Uploader Start-Up Handling

YUI Uploader handles the creation and writing out of the Flash object and its initialization process. Once the control has loaded, the contentReady event fires and the file selection process can begin. It is worth considering displaying some sort of “loading” element in your UI, in case the user wants to “choose files” before the control has initialized. In Flickr’s case, we show a small animation next to the “Choose photos and videos” link to indicate a loading state, as well as greying out the text itself.

It is also helpful to have a fall-through error handler that redirects the user to an alternate upload method, such as a non-JavaScript form-based file upload. The Flickr Uploadr detects for Flash 9+ upfront with JavaScript (e.g., the SWFObject), and also uses a try...catch block in the init method and around the file-selection bits. So if something goes wrong during initialization or when the user clicks the “Choose” link, exceptions trigger a fall-through to our basic uploader. This also is an appropriate fallback for users who don’t have Flash or JavaScript to begin with.

Special Casing: Handling Flash 10 Security Restrictions

Due to a change in the security model beginning with Flash 10, file selection must now begin via the user clicking directly on the Flash movie. With previous versions, you could call [Flash movie].selectFiles() from JavaScript and the selection dialog would be shown without requiring user action.

To keep the user experience consistent on Flickr where an HTML link could trigger the selection dialog, we made the Flash movie transparent and overlaid it on top of the HTML link. Thus, the Flash movie captures the click and the selection dialog works as expected. One might call this a legitimate, local form of clickjacking.

If repositioning the Flash movie is undesirable in your use case, another option is to render the link, text or button UI within the Flash movie itself and show the movie as a normal inline element.

Should I Use This?

While there are some notable technical considerations associated with developing a Flash-based uploader UI — such as initialization and error handling — as with most nifty/shiny web things, the technical complexity of the implementation rests solely with the developer. Once the application logic has been implemented by the developer and integrated with YUI Uploader, the end result is an upload experience that is consistently faster, more convenient, efficient and more robust to the end user.

Sound is one of the major senses and a major part of daily life, and yet is largely ignored on the web. Web developers know that when it comes to HTML, audio is not as easy to add to a web site as it should be. Why is that? The following are some thoughts on the historical problems with embedding sound, a few ideas and some demos of embedding and controlling sound from Javascript with YUI.

Demos

If you’re like me, you’re probably wanting to see some fun stuff up-front because reading is work, and work is boring! ;) Feel free to play with the demos first and then read on for the details.

• Demo 1 (practical): Play MP3 Links Inline
• Demo 2 (fun): A Noisy DOM

A Brief History of HTML and “Multimedia”

The web is pretty good at visual presentation. It is easy to create, design and embed images, text, and links in HTML documents. Of the media formats natively supported today in HTML 4, audio and video – or rather, <audio> and <video> – are conspicuously missing.

HTML 5 should bring audio and video embedding closer to the simplicity of <img /> in the not-so-distant future. In the meantime, we have to resort to creative work-arounds to get HTML-5-like audio/video functionality across the gamut of today’s common HTML 4-supporting browsers.

The (HTML 4) Problem With Embedding Audio

For audio on web sites today, developers often display a list of HTML links directly to MP3 files. This method is simple, universally-understood and indexable by search engines, but makes for a confusing and inconsistent browsing experience by default.

Users are generally prompted to right-click, “save as” and finally open the file from their desktop, or click the link and have their browser download and open the MP3 file. The regular “click” typically opens in a new page with the embedded player or launches an external application like QuickTime or Windows Media Player.

Not only are “naked” MP3 links extra work and confusing for the user, the browser’s method of handling them is a distraction and takes them away from the experience of your site.

Using <object>/<embed> is another generic way to directly embed MP3 or other content, but again suffers from the problem of inconsistency; the developer won’t know what may show in that area of the web page, given the user could have any array of applications which may load in order to handle that file type – in this case, likely the same QuickTime or Windows Media Player which would handle direct downloads would be shown in-place in your page. Again, not a great solution.

Flash widgets are sometimes used as a solution for embedding MP3 content, but the UI and skins tend to be 100% Flash-based rather than HTML and CSS-based and thus are more difficult for most web developers to customize. HTML 5 should change this with standards-based, CSS-skinnable and scriptable audio/video elements.

In the meantime, some creative solutions can be used to get more “web developer-friendly” widgets for audio.

Making MP3 Links “Just Work”: YUI + SoundManager 2

To have “progressively-enhanced” links to MP3s that will play in-place when clicked, something must intercept the browser’s normal download action and subsequently handle the request; by combining Javascript and Flash to handle the loading and playing of MP3 content, this can be done very effectively.

In a personal quest to get cross-browser audio control for a DHTML game back in 2002, I developed a JS + Flash audio API called SoundManager. Having since evolved to include video, SoundManager 2 implements and extends Flash’s native sound API and exposes it to Javascript. The result is cross-browser/platform scripted audio functionality which can help to bridge the gap for JS-driven sound until HTML 5 is widely supported.

By combining SoundManager 2 with YUI’s DOM and Event utilities, you have an effective solution for embedding and controlling audio which can gracefully degrade to a browser download or embedded player.

Practical Example: Playable MP3 Links

The following demo uses YUI and SoundManager 2 to enhance MP3 links, making them playable inline. YUI’s event utilities intercept clicks on links pointing to MP3 files and then use the SoundManager API to load and play the relevant URL before returning “false”, and preventing the browser from loading the link. Subsequent clicks will toggle play/pause state.

In the event Javascript/Flash aren’t present or if anything else goes wrong, the browser will simply fall through and load the MP3 link as usual.

• Demo 1 (practical): Play MP3 Links Inline

Adding Audio To Your UI

Javascript-based animation, transition and motion effects add fluidity to web interface design and are becoming more commonplace. Smartly-applied audio can complement and further enhance the UI, making the experience more meaningful.

In certain applications, sound in the form of UI feedback can be appropriate and helpful to the user experience. Sound effects are common for Flash-based sites and web-based games, and in desktop gaming audio is usually a key part of telling the story.

.. But Don’t Over-Do It

It’s important to know when to stop. Recall animated “under construction” .GIFs? How about the blink tag? Marquee text? Some things are best left alone. Not every HTML page needs to move, blink, slide, flash and be noisy at the same time; even “fun” is best applied in moderation. Annoying your users with auto-playing music or noise can quickly lead to abandonment of your site.

There is probably good reason that standard HTML elements such as form controls and the like do not have sound effects or notifications associated with them. Perhaps “silence is golden” and it’s best that the web be a quiet place by default, so as not to be annoying and distracting.

As one notable exception to the “silent web” theme, Internet Explorer usually makes a “click” sound when page navigation occurs, presumably to notify the user that an action has started. This has become more muted in recent times, but is still present and still seems to annoy some users to this day.

“Fun” Example: A Noisy DOM

Despite the arguments for silence, the following is an example of what it might be like to have “noisy” form elements, buttons and DOM elements which provide audible feedback as they’re being used. The novelty is certainly to wear off quickly, but it does add an element of childish fun to the UI.

• Demo 2 (fun): A Noisy DOM

Looking Forward: HTML 5

Native <audio> and <video> support will mean it will be much easier to embed and control more media formats within the browser without relying on third-party plugins. Furthermore, an extensive Javascript API should encourage developers to create increasingly-innovative experiences.