{"id":14478,"date":"2018-03-05T11:42:15","date_gmt":"2018-03-05T11:42:15","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14478"},"modified":"2020-09-03T11:29:38","modified_gmt":"2020-09-03T10:29:38","slug":"drag-drop-design-systems","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/drag-drop-design-systems\/","title":{"rendered":"Drag and Drop for Design\u00a0Systems"},"content":{"rendered":"

You probably use drag and drop in your everyday interfaces \u2014 dropping Gmail threads into folders, moving around Trello cards, or rearranging tabs in Chrome. These interactions are a lot more complex than you think, something that I learned while designing drag and drop patterns at VMware.<\/p>\n

\"\"<\/a>

Dropping Gmail threads into\u00a0folders<\/p><\/div>\n

<\/p>\n

\"\"<\/a>

Moving Trello cards around (Asian crackers????)<\/p><\/div>\n

<\/p>\n

\"\"<\/a>

Rearranging tabs in\u00a0Chrome<\/p><\/div>\n

<\/p>\n

Drag and drop interactions are often overlooked or go unnoticed. Sometimes they happen so naturally that you don\u2019t even realize it. But if you look closely and compare these three examples, each one demonstrates very different UX standards around drag and drop.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

There\u2019s nothing wrong with these interfaces having different UX standards around drag and drop. Each interface probably selected certain patterns over others for a reason. For example, maybe Trello chose to tilt cards when they are dragged because this behavior fits their friendly design language.<\/p>\n

But where the problem lies is when there aren\u2019t clear UX standards for drag and drop within a common interface. You might come across instances when dragging something in one part of an interface is a completely different experience in another.<\/p>\n

To illustrate this, let\u2019s take a look at Salesforce\u2019s accessible drag and drop library<\/a>. It showcases five patterns for drag and drop, each of which is a drastically different experience from the other.<\/p>\n

\"\"<\/a>

Salesforce\u2019s accessible drag and drop\u00a0patterns<\/p><\/div>\n

<\/p>\n

While many great points are made about accessibility (check out an interesting article<\/a> written about it ????????), unfortunately there is little design consistency across these five patterns. A different cursor is used in each of the five patterns, and there are three different icons being used as drag handles:<\/p>\n

\"\"<\/a>

But which one is for drag and drop? Answer: All of\u00a0them.<\/p><\/div>\n

<\/p>\n

Does a three-line icon indicate a draggable element? Or is it a three-dot icon? Which of the five cursors shows that I can drag things? Imagine the confusion of having all five patterns applied to one interface!<\/p>\n

In a design system, components should look and feel like one cohesive entity. Likewise, drag and drop interactions should look and feel consistent across components within an interface.<\/p>\n

<\/div>
<\/svg><\/div>

\"Design systems don\u2019t just create consistency across UI components \u2014 they should advocate for consistent experiences too.\"<\/p><\/span><\/blockquote>\n

Case Study<\/h2>\n

This is a UX case study about drag and drop patterns I worked on for Clarity<\/a>, VMware\u2019s design system. Clarity is open source, so our users aren\u2019t just VMware employees, but anyone who wants to leverage our Angular-based library or design guidelines.<\/p>\n

Our users requested the ability to perform drag and drop on some of our UI components: tree view<\/a>, datagrid<\/a> (data table), and cards<\/a>. My task was to unify the user experience across all of the following use cases involving drag and drop:<\/p>\n

Use cases<\/h2>\n