Drag and Drop
- Contributors
The drag-and-drop feature allows the user to interactively move a file or image. Common results of dragging and dropping include moving a file to a new location, saving a file from an outside source (such as a website), and duplicating a file.
Typical Appearance
The drag-and-drop feature is rarely, if ever, visible to the user in its idle state. Once the drag-and-drop is initiated, the file's movements are visually represented to assist the user's understanding of their actions.
A "ghost-image," as I will refer to it here, is a visual representation of the file that the user is dragging. It is anchored to the mouse to simulate physical dragging while the mouse button is depressed. If the user lets go of their mouse (referred to as "dropping" their object) in a valid place, the object will disappear from its original location and appear at its new location. If it is dropped in an invalid place, the ghost-image will animate back to its original location on a linear path. Typically, the ghost-image is semi-transparent and/or highlighted.
Click and drag this image to see the ghost-image in action.
Key Characteristics
The Ghost-Image
The most recognizable drag and drop feature is the "ghost" that appears when a user clicks and drags a file, image, or other object. It is the universal sign that indicates the object is being dragged.
Common Rules of Drag-and-Drop
- The ghost-image should always be anchored to the mouse when it is being dragged.
- The ghost-image should "react" when it is dragged over a valid area, when possible. This could include changing states (i.e. a line of text switching to a text file icon) or adding a + sign to the image corner.
- Placing an object on an invalid area should cancel the drag and drop non-destructively. When this occurs, the user should be able to see their dragged file animate back to its original location.
- Drag and drop does not move the actual file until it has been successfully completed. Remember: drag and drop is simply a visual interface for the user that brings about an instantaneous result.
- Drag and drop should not be the only option for the user. The drag and drop is a visual tool meant to facilitate the user's understanding, but it is not the most efficient method. If the user can simply write their file name into a textbox or copy and paste the file, that functionality should also be available to them.
Typical Behavior
Unsurprisingly, the drag and drop function is initiated by a mouse button click, drag, and release. When the drag and drop is performed successfully, the file will move, duplicate, or save itself to the dropped location.
Events
The Lift -
Initiated withmouse button downThe Drag -
Maintained whilemouse button downThe Drop -
Initiated with amouse button release
When the user clicks and holds down on a folder, file, image, bit of highlighted text, link, or other draggable object, the drag and drop behavior is activated. Sometimes, such as when the object is on the desktop, the object will highlight clicked and held. Usually, however, this initial event is not accompanied by any visual cue. The clicked object must be dragged away from its origin for a lifted ghost-image to appear (see The ghost-image section above).
The dragging period of the drag and drop action lasts for as long as the mouse button is down. The ghost-image of the item clicked is anchored to the mouse indefinitely until the mouse is released. This ghost-image sometimes changes states as it passes over different elements (such as a desktop, a folder, or an address bar), indicating to the user that it can be dropped there. It is important to note that during the drag, the file itself is not moving - only its ghost-image, which is simply a visual representation of the file enlisted for the user's benefit. (move to larger area?)
The drag and drop is completed when the user releases the mouse, regardless of whether the dragged object has been placed in a valid location. If the ghost-image is dropped on an invalid area, it is reset back to its original location. This reset is visually depicted with an animation of the ghost-image returning to its owner on a quick, linear path. If the object is dropped on a valid area, its ghost-image will disappear and the file itself is relocated there.
Drag and drop in action
The following gifs represent common functionality of drag-and-drop within OS Yosemite's file system Finder.
moving functionality. While the computer only needs the new file address, the drag and drop visual scheme assists the viewer in understanding the inner workings of the Finder. This also illustrates how the state of the ghost-image can change as it is dragged to different areas, such as the desktop. This state change is used to indicate that it can be dropped at that location, facilitating the user's learnability, memorability, and satisfaction while also reducing the chance of errors.
saving functionality. Many elements, including images, text, and links, can be dragged and dropped directly from webpages to the computer. Ideally, this action should cause the ghost-image to change states when it enters the dekstop area, to indicate that it can be dropped there. In the case of OS Yosemite, however, this functionality it is not implemented.
moving functionality. A user is able to interactively travel through a file hierarchy while dragging their file by hovering over the folder they wish to enter. Subtle animations are used to facilitate the user's understanding of the process. As the gif shows, the folders blink briefly before opening as the reader hovers their ghost-image over them. These visual cues help the user feel as though they are physically navigating through the folder structure as they drag their file.
duplicate it. It is identified by the green plus icon that appears when the ghost-image is dragged over a valid area. This is an additional functionality that is both useful and widely unknown. It is neither memorable nor easily learnable, and it looks almost identical to the normal drag and drop function, making it difficult to visually discern whether it is activated or not by inexperienced users. This utility is, however, an extremely efficient way of copying a file quickly.
State Diagram
Variants
Within a desktop computer's file system, the drag and drop function is similar accross platforms. However, the uses for drag and drop in programs, websites, games, and more are endless. Here are a few examples of some more interesting implementations of the classic drag and drop component.
Dragging Text
A user can drag any text - from their own system or from the internet - and copy it, paste it, or save it as a new text file.
Dragging Links
All modern Internet browsers have implemented the drag and drop into many parts of their interface. The next few slides illustrate some common examples. This slide shows how dragging and dropping links into the address bar will open them in a new tab.
Dragging Browser Tabs
Tab navigation has been made simpler and more effective with the addition of drag and drop as an organizer.
Dragging into Websites (Cloud Storage)
File uploading websites, such as Google Drive, Dropbox, Photobucket, Facebook, and countless others have used drag and drop as an alternative to defining a path. The most effective websites give the user the option to drag and drop or chose the path.
Dragging into Programs
Programs that use multiple files, including film editing software, iTunes playlists, and image editing programs (like Photoshop, pictured above) also use drag and drop as an alternative to importing the files through a folder structure.
Dragging in Games
Games (especially mobile games, where a touch screen is used) utilize drag and drop components to immerse the player in the screen. Drag and drop, when done correctly, can cause the user to feel as though they are actually touching the objects. It is an excellent way to give the game more depth and realism.
Usability Metrics
Learnability
The physical action of the drag and drop may seem intuitive to experienced users, but those who have not used the functionality before may struggle with learning it on their own.
There are no visual cues indicating a draggable object until the drag begins.
This may be for the better, but for new users this poses an issue. There is no real way of knowing whether an item is draggable or not, unless the user attempts to do so. A button, scrollbar, or checkbox will always be visible to the user, but drag and drop is a hidden functionality that is difficult to discover on one's own without it first being taught. Additionally, the opt-click and drag to duplicate a file is a doubly hidden function that is even less learnable.
But to be fair...
All modern computers have the drag and drop functionality in some form or another. It would therefore be very uncommon to find a computer-user who has never seen or tried the drag and drop before. Because of this, the learnability metric is not its first priority. It is safe to assume that most users who wish to move a file would attempt a drag and drop.
All the user needs is a basic awareness of "drag and drop" as an option.
If the user knows what a drag and drop is, the functionality is very learnable across all platforms. Drag and drop is fairly uniform in its visual representation on Linux, Mac, Windows, and most websites (especially file-uploading and cloud storage websites). Even games involving drag and drop, like dress-up games or word matchers, are similar and quickly learnable.
Efficiency
Efficiency is neither the drag and drop's strong suit nor its goal.
Drag and drop's main function is to give the user a simple, understandable, visual representation of the movement of files. It allows for both user error and user delay, and it is dependent on the speed of the user's mouse. It also involves brief animations, that are visually helpful, but unnecessary for experienced users. This makes drag and drop rather inefficient, especially when similar actions like copy/paste are instantaneous.
It is necessary for other methods of file transfer to be implemented to compensate for the lack of efficiency.
The user should have other approaches available to them if they are comfortable with the interface. Copy/cut and paste are the "invisible" versions of drag and drop, and are much more efficient. The user should also have the option of typing in the file's path directly, especially in regards to file uploading websites like Google Drive or Photobucket, where drag and drop is a main component.
Errors
Because drag and drop is a hidden functionality, it is prone to errors that result from guesswork.
It is impossible to know, for example, whether an image on a website is draggable or not until it is attempted. Generally the only result of these errors is an unresponsive click on the page. Because these errors are usually harmless, they are not a major issue with drag and drop.
A slightly more problematic error can occur with drag and drop when the function is unclear about where it can be placed. In some cases, the ghost-image will react when dragged over a valid area, but in others, it will remain unresponsive. If a user drops their file on an invalid area, the ghost-image animates back and they have to start over again. This can become frustrating if the user is unfamiliar with where the file can be placed.
Comparatively, however, drag and drop has few common errors.
This is because it is a very explicit and linear process that focuses on making file reorganization understandable. The errors that it is prone to make are generally harmless. They do not affect the interface in any way; rather, the system reverts back to its original state in the event of an error. This is an excellent method of error management that works well for drag and drop.
Memorability
Memorability is of high priority for the drag and drop feature because it is not a visible function.
In fact, the invisible drag and drop function relies entirely on memorability. If a user does not remember how to drag and drop a file, they have no visual cue to remind them at all.Fortunately, the drag and drop is entirely memorable.
As long as the user remembers what a drag and drop is (its self-explanatory title is a big giveaway), they will be able to perform it on any computer system or website. It is a simple, uniform, and logical system for moving files to different locations that sticks with computer users easily.
Satisfaction
The physical nature of the drag and drop gives it some merit in the satisfaction metric.
While the drag and drop method was implemented strictly out of necessity, there is something to be said about the satisfaction felt from physically dragging a file and dropping it in a new place. The animations that accompany it give it a very concrete feel; psychologically, this method of moving files may feel more reassuring to the user, because they can see the process and the result, rather than allowing the computer to process behind the scenes.
Touch screens and games make excellent use of drag and drop in regards to satisfaction.
Picking up and dragging an object on a screen, with the mouse or your finger, immediately makes it more tangible. Using drag and drop is a great way to immerse the user in the game or application and break the boundary of the screen. In this sense, satisfaction can be paramount to the drag and drop function.
The Five Usability Metrics
Learnability
There are no visual cues indicating a draggable object until the drag begins.
This may be for the better, but for new users this poses an issue. There is no real way of knowing whether an item is draggable or not, unless the user attempts to do so. A button, scrollbar, or checkbox will always be visible to the user, but drag and drop is a hidden functionality that is difficult to discover on one's own without it first being taught. Additionally, the opt-click and drag to duplicate a file is a doubly hidden function that is even less learnable.
But to be fair...
All modern computers have the drag and drop functionality in some form or another. It would therefore be very uncommon to find a computer-user who has never seen or tried the drag and drop before. Because of this, the learnability metric is not its first priority. It is safe to assume that most users who wish to move a file would attempt a drag and drop.
All the user needs is a basic awareness of "drag and drop" as an option.
If the user knows what a drag and drop is, the functionality is very learnable across all platforms. Drag and drop is fairly uniform in its visual representation on Linux, Mac, Windows, and most websites (especially file-uploading and cloud storage websites). Even games involving drag and drop, like dress-up games or word matchers, are similar and quickly learnable.
Efficiency
Efficiency is neither the drag and drop's strong suit nor its goal.
Drag and drop's main function is to give the user a simple, understandable, visual representation of the movement of files. It allows for both user error and user delay, and it is dependent on the speed of the user's mouse. It also involves brief animations, that are visually helpful, but unnecessary for experienced users. This makes drag and drop rather inefficient, especially when similar actions like copy/paste are instantaneous.
It is necessary for other methods of file transfer to be implemented to compensate for the lack of efficiency.
The user should have other approaches available to them if they are comfortable with the interface. Copy/cut and paste are the "invisible" versions of drag and drop, and are much more efficient. The user should also have the option of typing in the file's path directly, especially in regards to file uploading websites like Google Drive or Photobucket, where drag and drop is a main component.
Errors
Because drag and drop is a hidden functionality, it is prone to errors that result from guesswork.
It is impossible to know, for example, whether an image on a website is draggable or not until it is attempted. Generally the only result of these errors is an unresponsive click on the page. Because these errors are usually harmless, they are not a major issue with drag and drop.
A slightly more problematic error can occur with drag and drop when the function is unclear about where it can be placed. In some cases, the ghost-image will react when dragged over a valid area, but in others, it will remain unresponsive. If a user drops their file on an invalid area, the ghost-image animates back and they have to start over again. This can become frustrating if the user is unfamiliar with where the file can be placed.
Comparatively, however, drag and drop has few common errors.
This is because it is a very explicit and linear process that focuses on making file reorganization understandable. The errors that it is prone to make are generally harmless. They do not affect the interface in any way; rather, the system reverts back to its original state in the event of an error. This is an excellent method of error management that works well for drag and drop.
Memorability
Memorability is of high priority for the drag and drop feature because it is not a visible function.
In fact, the invisible drag and drop function relies entirely on memorability. If a user does not remember how to drag and drop a file, they have no visual cue to remind them at all.Fortunately, the drag and drop is entirely memorable.
As long as the user remembers what a drag and drop is (its self-explanatory title is a big giveaway), they will be able to perform it on any computer system or website. It is a simple, uniform, and logical system for moving files to different locations that sticks with computer users easily.
Satisfaction
The physical nature of the drag and drop gives it some merit in the satisfaction metric.
While the drag and drop method was implemented strictly out of necessity, there is something to be said about the satisfaction felt from physically dragging a file and dropping it in a new place. The animations that accompany it give it a very concrete feel; psychologically, this method of moving files may feel more reassuring to the user, because they can see the process and the result, rather than allowing the computer to process behind the scenes.
Touch screens and games make excellent use of drag and drop in regards to satisfaction.
Picking up and dragging an object on a screen, with the mouse or your finger, immediately makes it more tangible. Using drag and drop is a great way to immerse the user in the game or application and break the boundary of the screen. In this sense, satisfaction can be paramount to the drag and drop function.
Platform-Specific Instances
The drag and drop function has been implemented in most, if not all, major computer platforms. Windows, Linux, and Mac all have extremely similar drag and drop functionalities, including a ghost-image and brief animations of opening files and invalid location drops. The examples listed on this page were all captured on an OS Yosemite Macbook Air, but they accurately illustrate the typical drag and drop functionality that all modern platforms use. The only major difference between these platforms in regard to drag and drop is what they consider a valid or invalid location. For example, on a Mac a file that is dragged to the top bar will cancel the drag, but if a file is dragged to the main bar on a Windows platform it will be placed there. Aside from this difference, the drag and drop is visually and functionally analogous accross all major platforms and programs.
Drag and Drop iOS Devices
For iOS devices, like the iPhone and iPad, drag and drop functions differently because of the use of touch controls and lack of mouse and cursor. Touch controls on iOS prioritize scrolling over other controls. Because of this, to use drag and drop on iOS devices, it has to be enabled first. Note that drag and drop on the home screen will only move the app's icon and where it can be accessed. This will not change where it is stored on the device.
Home Screen Events
Enable -
Initiate byTap and holding on an appDrag -
Maintained whileFinger held downDrop -
Initiated byreleasing fingerDisable -
Initiated bypressing the home button
Because holding and moving your finger down on an iOS devices home screen scroll through apps, drag and drop must be enabled by holding down on one of the apps on the device. In this mode on the home screen, apps will start shaking, denoting that they can be moved via drag and drop, and some apps have "x" buttons on the top left, denoting that they can be deleted. In this mode, apps cannot be opened. However, the user can still scroll between apps by holding and moving their finger between apps.
Once the app manipulation mode has been enabled, the user can move apps around the home screen using drag and drop. By holding down on the app, it will darken and expand, denoting that it is currently being manipulated. After moving it far enough from its original position, apps that are lower and left of the original app will fill in the space. The manipulated app can be moved to a different page by moving it to farthest left or right edge of the screen.
The area where the user releases the app determines where it will it will land. If it lands to the left or right of another app, the manipulated app will fall inbetween and the rest of the apps will make space for it. iOS does not recognize the small space above and below apps as valid places to place apps. If an app is released in this area, it will return to the last valid area passed over. Apps can also be dropped to the bar on the bottom hotkey bar so they can be accessed from all pages, or dropped on top of another app to create a folder.
Once the user is done moving apps, they can deactivate this mode by pressing the home button on their device. Apps will not be able to be moved and can now be opened.
Noteable Differences with iOS
- The ghost image does not exist.
- There are limited valid areas to drop app icons. On smaller screens, having the customizability to place apps anywhere on screen would lead to many hinderances. For iOS and other phone and tablet operating systems, apps are usually locked into a grid system to optimize visual efficiency. On iOS, Apps on the homescreen are locked in a 4 by 5 grid, 3 by 3 in folders, and, dependent on device, 4 by 1 to 6 by 1 for the hotkey bar.
- Drag and drop must be enabled. Because scrolling and app access is prioritized on the homescreen, Drag and drop must be enable by holding down on an app.
- Drag and drop options for text edit, data, or photo is fairly limited or nonexistant. Unlike its computer counter parts, iOS apps may have removed or limited the use of drag and drop as to not get in the way of more important funcitons such as selecting or scrolling. One of the most notable apps that lacks certain drag and drop funtions is Microsoft Word and how the user cannot drag and drop text. The only way to move text would be to copy and paste.
Drag and Drop Within iOS Applications
Though it's still limited, certain applications still utilized drag and drop whether it is a main tool of manipulation or has to be toggled on or off.
Artistic Use of Drag and Drop
For documentation or presentation apps, inserted pictures or text blocks have to be manipulated using drag and drop to determine their oriantation. Because it is less precise than a mouse and keyboard, mainly using the directional keys to move the object pixel by pixel, applications will usually give you coordinates relaying where the top left corner is located. More art specific apps will have object manipulations such as resizing, rotation, draging and droping as a toggleable mode to create more precise controls. Certain art apps, such as SketchBook support, multi-touch manipulation allowing the user to use all manipulation tools with two control points on the screen.
Drag and Drop in iOS Games
For video games, your screen will usually stay static during gameplay, only scrolling around because of a menu screen, or when characters move to new locations resizing or scrolling the screen. Because of lesser need for scrolling in phone games, there is more usage of drag and drop mechanics. Usually this mechanic is used for item management, whether it be organizing items or equiping new item to the users character. Certain games allow you to drag and drop objects into your game to be used. One iconic example is throwing a Pokeball in Pokemon GO.
