small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

From Design System to ‘NFT Design System’: Creating TinyFaces

<p><a href="https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*bXCSaXR9_ky8vZyIIBwNgw.png" alt="1*bXCSaXR9_ky8vZyIIBwNgw.png"></div>
</div>
</div>
<div>
<h2>Defining UX patterns for drag and drop across components</h2>
<p>You probably use drag and drop in your everyday interfaces — 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>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*uHHXFO_Vm9FFGlXX95FCaA.gif" alt="1*uHHXFO_Vm9FFGlXX95FCaA.gif"></div>
</div>
<p>Dropping Gmail threads into folders</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*g6X_n0fj2K3e4Fdw714YwA.gif" alt="1*g6X_n0fj2K3e4Fdw714YwA.gif"></div>
</div>
<p>Moving Trello cards around (Asian crackers 😋)</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*AOndnOVI2KDrKSGYYOOiwQ.gif" alt="1*AOndnOVI2KDrKSGYYOOiwQ.gif"></div>
</div>
<p>Rearranging tabs in Chrome</p>
<p>Drag and drop interactions are often overlooked or go unnoticed. Sometimes they happen so naturally that you don’t 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>
</div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*Gqy6Q20m25RRg57OQCncvA.png" alt="1*Gqy6Q20m25RRg57OQCncvA.png"></div>
</div>
</div>
<div>
<p>There’s 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>
<p>But where the problem lies is when there aren’t 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>
<p>To illustrate this, let’s take a look at <a href="https://salesforce-ux.github.io/dnd-a11y-patterns/#/canvas?_k=f9z073">Salesforce’s 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>
</div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*XeWlv6KVPeJMWC-RDGiJyw.png" alt="1*XeWlv6KVPeJMWC-RDGiJyw.png"></div>
</div>
<p>Salesforce’s accessible drag and drop patterns</p></div>
<div>
<p>While many great points are made about accessibility (check out <a href="https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09">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>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*XrMdEyMk7YMqx0c4XCFVPA.png" alt="1*XrMdEyMk7YMqx0c4XCFVPA.png"></div>
</div>
<p>But which one is for drag and drop? Answer: All of them.</p>
<p>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>
<p>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>
<blockquote><p>Design systems don’t just create consistency across UI components — they should advocate for consistent experiences too.</p></blockquote>
<h3>Case Study</h3>
<p>This is a UX case study about drag and drop patterns I worked on for <a href="https://vmware.github.io/clarity/">Clarity</a>, VMware’s design system. Clarity is open source, so our users aren’t just VMware employees, but anyone who wants to leverage our Angular-based library or design guidelines.</p>
<p>Our users requested the ability to perform drag and drop on some of our UI components: <a href="https://vmware.github.io/clarity/documentation/tree-view">tree view</a>, <a href="https://vmware.github.io/clarity/documentation/datagrid/structure">datagrid</a> (data table), and <a href="https://vmware.github.io/clarity/documentation/cards">cards</a>. My task was to unify the user experience across all of the following use cases involving drag and drop:</p>
<h4>Use cases</h4>
<ul>
<li>Reordering and nesting tree view nodes</li>
<li>Reordering columns in a datagrid</li>
<li>Reordering rows in a datagrid</li>
<li>Drag and drop between a tree view and a datagrid</li>
<li>Rearranging and merging cards</li>
</ul>
<p><em>For data-heavy enterprise UIs like VMware’s, drag and drop is crucial to enabling our users to organize complex and large amounts of data.</em></p>
<h3>Creating an affordance library</h3>
<p>I started by establishing a small library of simple, yet effective design affordances that represent drag and drop and tie separate instances of drag and drop together. That way, the affordances can still be applied to new use cases that aren’t one of the ones listed above.</p>
<p><em>If you work on a design system team, these might help you start thinking about how to address drag and drop patterns for your own design system.</em></p>
<h4>1. The color purple (not the book, or the movie)</h4>
<p><strong>Use a distinct color choice that isn’t used often in your design system to identify drag and drop interactions.</strong> Avoid colors that already have significance in your interface (ex: red for destructive actions).</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*lVErPJgVdZJrwuWJOc5iKg.gif" alt="1*lVErPJgVdZJrwuWJOc5iKg.gif"></div>
</div>
<p>Rearranging cards (Stranger Things, amirite?)</p>
<p>We chose the color purple to represent drag and drop in every single use case. Purple isn’t a primary color used in Clarity, so whenever users encounter the color purple, they can expect some sort of drag and drop experience. We purposely avoided using blue (which is a common color for drag and drop) because in Clarity, it’s reserved for action buttons and other clickable elements.</p>
<h4>2. State styles</h4>
<p><strong>Establish styles for the different states of an element being dragged.</strong> Specify exactly what kind of visual treatment an element will get while it’s being dragged, after it’s been dragged, etc.</p>
<p>In Clarity, while an element is dragged, it will have the following styles:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*YPlKC1at3_7xnfAgET863w.png" alt="1*YPlKC1at3_7xnfAgET863w.png"></div>
</div>
<p>Reordering tree view nodes</p>
<p><em>Adding a subtle drop shadow gives the impression the element is actually being picked up off of the page.</em></p>
<p>Another state we added was the original position of an element while it’s being dragged, called Previous state.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*unhz5-L_CmoNu1h4oDKcNg.png" alt="1*unhz5-L_CmoNu1h4oDKcNg.png"></div>
</div>
<p>Nesting tree view nodes</p>
<p>This acts as a small reminder to users where the element was previously. Note that this state wouldn’t apply to natural movement drag and drop, which is when other elements naturally move out of the way of a dragged element.</p>
<h4>3. System cursors</h4>
<p><strong>Use system cursors to indicate when an element is draggable</strong>. This one seems minor, but will significantly improve discoverability of draggable elements.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*WD0D_mMnUHIj8Hvi4s9fgQ.png" alt="1*WD0D_mMnUHIj8Hvi4s9fgQ.png"></div>
</div>
<p>For Mac, we use the <em>grab</em> (open Mickey Mouse hand) and <em>grabbing</em> (closed Mickey Mouse hand) cursors. The <em>grab </em>cursor appears on hover when an element is draggable. Once it’s dragged, the cursor will change to the <em>grabbing </em>cursor. For areas where an element cannot be dropped, we used the <em>unavailable </em>cursor.</p>
<p>For Windows, we use the <em>move</em> cursor (arrow cross). The cursor will remain the <em>move </em>cursor while an element is dragged. Again, for areas where an element cannot be dropped, we used the <em>unavailable </em>cursor.</p>
<h4>4. Drop targets</h4>
<p><strong>Establish patterns for drop targets, which are valid areas where dragged elements can be dropped. </strong>Like state styles above, explicitly write out what styles drop targets have.</p>
<p>Since reordering is a key drag and drop interaction, we specified a <em>position </em>drop target, which indicates the position where an element will be dropped.</p>
</div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*oqCbeehY2NKeeNUCkuaagQ.png" alt="1*oqCbeehY2NKeeNUCkuaagQ.png"></div>
</div>
<p>Reordering rows in a datagrid</p></div>
<div>
<p>We added a circle to the left-end of the position target to differentiate the drop target even more from just a normal line or border. This is an important additional affordance, especially to color-blind users who might not notice the color change.</p>
<h4>Case-by-case affordances</h4>
<p>One area that depends on a case-by-case basis is when to present drag handles. Drag handles are small icons that indicate an element is draggable. Gmail chose a 12-dot icon for drag handles, while we chose a six-dot icon for drag handles:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*BJPwV1Tad7qo11p9mva3Nw.png" alt="1*BJPwV1Tad7qo11p9mva3Nw.png"></div>
</div>
<p>The presence of drag handles largely depends on context. For components that don’t typically involve drag and drop, a drag handle helps users discover drag and drop as an available action. But in cases where drag and drop is always an expected behavior, it isn’t necessary.</p>
<p>For example, we didn’t present handles in a tree view because it’s expected to be able to move around nodes in a tree view. However, we did present handles for cards because not all cards are draggable.</p>
<p>There are many different icons used to represent drag handles, but choose only one and stick with it.</p>
<h3>One drag and drop family</h3>
<p>These standards will help set up a basic foundation for connecting drag and drop instances within an interface, but there are many other ways to standardize drag and drop across components.</p>
<p>Setting up any kind of UX standard will help drag and drop become a familiar interaction rather than feeling like a disjointed experience. See how the drag and drop use cases I designed all came together after I applied the affordance library: <a href="https://invis.io/2MFBFWUY3NG">Invision</a>.</p>
<p>The Clarity team is just starting the development process for these drag and drop patterns, starting with <a href="https://github.com/vmware/clarity/issues/1771">reordering columns in a datagrid</a>. You can actually track development progress in our <a href="https://github.com/vmware/clarity">GitHub repo</a>. 🎉</p>
<h4>Sources</h4>
<ul>
<li><a href="https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b">Alex Reardon’s amazing article</a> was my drag and drop bible</li>
<li><a href="https://salesforce-ux.github.io/dnd-a11y-patterns/#/canvas?_k=6ikxim">Salesforce UX’s accessible drag and drop patterns</a></li>
</ul>
</div>
<div>
<div></div>
</div>
<div><a href="https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d">https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d</a></div>


Drag and Drop for Design Systems – UX Design Collective

Drag and Drop for Design Systems – UX Design Collective

Defining UX patterns for drag and drop across components

Top Stories