We’ve moved. Back40’s new address is 2513 S. Kelly Suite 120 Edmond, OK 73013

The Truth About Drag & Drop Usabilty

Drag & Drop – Now Improved with Less Drag & Drop!

When we developed our content management system years ago, we were excited about incorporating drag and drop functions. Our Javelin CMS administrators can drag content from region to region and change order of items like blog posts and gallery images – simple and fast. But over time, we learned – not everyone loves drag and drop.

Earlier this year we added a ‘Click to Move’ feature to our Javelin CMS site map. The new ‘Click to Move’ function allowed users another method of moving pages to new positions in the site map. Originally, the site map only allowed users to move page position by ‘Drag to Move.’  Users now have the option to use either method.

Drag & Drop Usability

When we created Javelin CMS, we did not consider coding an alternative way to move items within the site map. Admittedly, we’ve had a number clients mention that they’ve experienced some difficulty in dragging a page to exactly where they needed it. So like good website developers, we researched scripts and upgraded the ease of the drag & drop action. We thought we solved the problem, but additional feedback from our clients told us that some still had difficulties. A particularly challenging move for some Javelin users was nesting a page under another page. We tested the actions in multiple browsers without issue. But we’re not building us, so we coded an alternative ‘Click to Move’ function.

Adding of the ‘Click to Move’ Function

To initiate the click to move feature, we added a new icon to the site map web page menu bar.

Drag & Drop Usability

It features a set of simple up and down arrows. We felt the simplicity of this icon communicates its function. It could be argued that the new icon does not communicate the full capabilities of the function, like nesting or moving to another level, but with the vertical display of the site map we figured the pair of arrows would be clear to most users. On the menu bar we positioned the ‘Click to Move’ icon in the second position, just to the right of the ‘Drag to Move’ icon. This positioning allowed the ‘Drag to Move’ icon to still  take advantage of the space to the left of the icon for a grab area (majority of menu bar real estate).

Once a user clicks the ‘Click to Move’ icon, the web page menu bar expands down to expose 6 buttons and a ‘close’ function.

6 functions that  move pages:
– up one position
– up to top of the existing level
– down one position
– down to bottom of existing level
– up a level (sub page to page)
– down a level (page to sub page)

Next, our task was to develop a series of graphics that most clearly communicated the button actions.

Drag & Drop Usability

Creating the graphics for the first 4 button actions seemed fairly straight forward. The graphics for the last two actions (more up a level and down a level) proved a but more challenging – and in fact – the chosen design may still need to be revised. We currently display a bent arrow to visually communicate the actual path of the page takes as its moved to another level. An alternate design may simply be an arrow left and an arrow right depicting the horizontal movement of the page position.

Complexity of Movement Concept

To some users, the concept of nesting pages or sub-levels of page is new and more complex than simply changing the order of pages. In our experience some clients ‘get it’ right away – others need the nesting concept more fully explained and demonstrated.

When a moving request cannot be completed because there is no place for the button to go, the button is  visible but inactive (semi-transparent). One example of this situation would be when a contact page at the bottom of the site map cannot be moved any lower – all moving up functions would be displayed as inactive.

Drag & Drop Usability

We are currently reviewing how this feature is received and used. Clearly, many clients are pleased with the addition of ‘Click to Move.’

Future Icon Changes

With the addition of the “Click to Move” icon on the web page menu bar, we are reconsidering redesigning the ‘Drag to Move’ icon (appears as two double sided arrow creating a cross). Current thought are to replace all instances of this double arrow icon with a hand icon which would better describe the action of grabbing or dragging action. And may also better describe a less linear action (or more organic movement) as opposed to the vertical and horizontal arrow suggest.

We are also researching a decision to replace the current ‘Drag to Move’ icon (displayed by the 4 arrows) with a more organic hand icon. We feel that the hand icon more accurately conveys the action of drag and drop while the 4 arrows convey a more geometric moving action (horizontal and vertical moving action).

Back40 Design Conference Room
Back to Blog