Despite the fact that this is 2011, despite the fact that web applications have been the Next Great Thing for, well, nearly 7 years, User Interface design on web sites still has a long way to go to match native applications. While this is expected to change, as great efforts are underway (with even Microsoft making web applications first-class citizens of their upcoming Windows 8, wow), we still need to cater to users which do no use the latest, greatest web browser, and hack the site to support the largest userbase possible.
One problem many web developers are likely to have stumbled upon is file uploading, especially when said files are parts of a larger document the user is trying to compose using a web application (This especially applies to images, but this also could apply to any kind of media which has to be uploaded, like sound or video). And even in cases where “document” and “composing” seem to be very big words (say, a simple “user profile” form where the user can upload an avatar picture), the standard, classical HTML way of doing things feels a step backwards from what native user interfaces have provided for ages.
Let’s say, for example, I want to include a picture in a document I am composing in a word processor:
- Just drag & drop the picture file in the place where you want it to appear
- Position the cursor where you want the picture to appear
- Click on “image”
- Browse local files to find the image, and confirm.
In both cases, the image is visible on the document before I have to submit / save the document. The same would apply for, say, changing my profiles’s avatar on Skype.
Now, let’s say I want to include a picture in a document I’m editing in a Mediawiki site, or on a Trac site, or any site using the classic way of importing files:
- Start to compose the document, then click “Import File” to add an image to this document
- “Import file” is a new page, therefore the text I already entered may be lost when I follow this link. Mediawiki, for example, will ask me whether I really want to quit the page (and lose all my work), or continue to the file importation page.
- Cancel, and open the “import file” in a new tab
- Click on “Choose a File” on the new page
- Browse local files to find the image, and confirm (alternatively, drag-and-drop the file in the “Choose a File” form element)
- Click on the “Import File” button
- Remember (or copy) the name of the file which was uploaded
- Return to the original document composition page
- Type (or paste) the file name on the document I am still composing, using the appropriate syntax to include an uploaded file.
Is this really sane? Isn’t there, really, from an user-experience perspective, a better way of doing this?
Well, we’ve gotta love rhetorical questions, but of course there is a better way of doing this. Even on a web site. Let’s say, for example, you want to compose a Google Plus post, and, while composing it, decide you want to attach an image:
- Start composing the post.
- Drag and Drop the image to the post you were composing.
And… That’s all. A preview of the image you want to include appears under the post you are just composing, so you can preview it, or delete it, before submitting. You submit your post normally, and the image you just drag & dropped is included within. No questions asked, works as expected.
Works as expected to people used to deal with desktop applications, anyways. To web developers, it may seem it works like magic. Dark magic.
In my humble quest of developing user-friendly, efficient web applications, I’ve gathered several techniques allowing to achieve similar magic. Those will be detailed in subsequent posts.