How do we know when to ‘click and drag’?
22 May 2009
Visual design conventions are extensively used in web design as a ‘short hand’ to indicate functionality. We don’t usually give much thought to this. Yet it is central to our ability to design websites that work intuitively – so users ‘just know’ what they have to do.
I was recently evaluating the usability of a new online application when I identified a serious usability issue, which is common to many web pages – how do we signal the presence of ‘click and drag’ functionality?
The tool I was looking at was intended to build online ePortfolios for students. This is a common requirement of online learning sites, including staff training sites. Users need to be able to easily create a mini site where they can display examples of their work, create online CVs, and write learning blogs to demonstrate such things as progress with internship tasks.
This application was very clear and intuitive – until I got to the stage that allowed me to design my own page by setting up columns, and adding functional items such as text boxes, video links, RSS feeds, and photo galleries. In the top half of the screen was a set of tabbed areas that contained widgets to create these functions in ‘my page’ – which was represented by a blank workspace box in the lower half of the screen.
I realised I was meant to select the functions at the top and then add them to my workspace below. But how? Much clicking and swearing ensued. First I concluded that I was just an idiot who couldn’t work out what to do next. But I had managed every other part of the process up to that point. Sadly the help topics hadn’t been written yet (that was my next job). After a while I decided that since I was literate and a frequent web user, the page must be broken. I was about to email the developer to report this, when one last grumpy stab with the mouse saved me from humiliation. I had accidentally moved one of the widgets in the tabbed area.
EUREKA! The idea was that users would select the item they needed, such as an electronic ‘album’ for a picture gallery, and click and drag it down to add the function to their work space below. So simple – so what was the problem? After some reflection I realised that it was caused by the lack of visual clues on the page. No other part of the application had used this model of functionality, and since there was minimal explanatory text on the pages (and up to that point this had been no problem) – I had no warning that the ‘functional paradigm’ had shifted.
Then I realised that there was no universally-agreed visual sign at all for this functionality. Clickable links are shown like this – no one has to write the words ‘click here’ if the text is underlined (doubly so if it’s blue). When we use Windows Explorer to organise files using the ‘click and drag’ method there is no visual clue on the page, we just know from experience that it works that way. And in other applications, when we see two vertical panes, one with a sort of ‘tree’ or nested hierarchy the other with a list of files, then the chances are you can click and drag stuff from one pane to the other.
Maybe if the two parts of the screen had been side by side, I’d have guessed faster what to do, but then my work space would have been less than full width – which is a problem if I’m designing its graphical layout. I actually haven’t come up with a solution to this – other than advising the developers to insert some text with those three little words ‘click and drag’. But if anyone reading this has an answer, feel free to share it with me!