May 2 2009

Drag and Drop on a Web Page? WTF?

This is the unconscious reaction of most users when confronted with a web application that has functionality rivaling a desktop application. A large portion of the general populating still feel that the world within the browser is a static one. Even though most of these users will probably get used to this revolution with lots of time and large amounts of exasperating calls to tech support, the fact that you have to reduce functionality on new applications or services to cater to this group’s lack of experience is ridiculous. Desktop rivaling web applications can, with some work, be used and easily understood by the regular user without them having to annoy the creator for explanations.

You basically have two options here. You can make the Internet driven application look, feel, and respond just like any other windows application. Or you can provide plenty of visual clues and instructional material in the application itself. Since no one needs another cumbersome graphical user interface we are left with spending extra time and money on providing the user base with enough visual material in the application itself so that they can figure it out within a few seconds.

The first hurdle to jump is the ubiquitous drag and drop functionality. This was a huge breakthrough back during the advent of windows and apple and has basically changed the way that we interact with our computers. Even though every user has seen and used this feature before they still are baffled when a website can do it. It’s like it’s thier first time on a computer all over again.

Some relatively easy to implement visual cues that every user will understand are cursor changes, proper mouse overs, and short explanatory descriptions. These cues build on what everyone has already learned over the years being tethered to installed desktop applications.

  • If something is movable then why not put the proper square ‘movable’ cursor when the mouse goes over it. This is basic behavior that most windows applications adhere to.
  • When you are dragging something over top of something else then windows would expand or highlight different elements of whatever was underneath. Any web application with drag and drop functionality should do the same.
  • Lastly, short two or three word instructions in the proper places should inform the user of anything that isn’t already self evident. For example putting the text “Drag and Drop to Change” directly above where some list of images or text is will be quick to read and even quicker to process.

As more sites decide to use advanced functionality we will see an increase in stupid questions and phone calls just because some developer on facebook or gmail decided to make their site work one way and the general user subconsciously decided that it was how all web applications should function. Good design is the only way that we all can steal that wasted time back.

Check Cody Taylor’s guide for adding CSS to Dojo javascript