Inkling – Improved Drag & Drop
Oct '15 | Interaction, Visual, Product Design
Help users drag and drop patterns and elements into the places they intended on the page.
In Inkling's authoring tool, Habitat, users create content by dragging new "patterns" (1 or more preset HTML elements) onto the page. However, the visuals for our drop targets and the nested structure of HTML made it easy for users to accidentally drop patterns in the wrong place. A common error for new users was to drop all of their content into the header.
Although users with some knowledge of HTML and CSS realise what's happening, Habitat is geared towards users with little to no technical knowledge. New users found it frustrating and confusing when dragging patterns onto the page had unpredictable results.
Lead Designer (Interaction and Visual)
1 Product Manager, 1 Engineer
I started by brainstorming and sketching possible solutions. A few of the ideas that stood out were –
- Prevent or give warnings about dropping patterns in bad places (requires knowing what's bad)
- Make it clearer where the user is dropping the pattern by showing its place in the structure (parent it'll be nested inside, siblings)
- Let the user preview how the content will be change as they drag the pattern around
- Show the possible spots the pattern could be dropped to make sure they pick the right one
Testing & Iteration
Because of time constraints, I did most of my testing internally with a mix of people from our Client Solutions team (who help new users get started with Habitat and know the problems they frequently encounter) and Business Development Reps (who aren't too familiar with Habitat).
I got some useful feedback that provided a clear design direction:
- Most errors involved dropping something into a nearby container rather than the <body>. Showing a box around an element you're going to drop something into makes it clear when you're about to do this.
- Warnings to train users on where to drop patterns are great, but vary by user. Some users might have custom widgets that are fine to drop in narrow columns, while for others it's universally bad. There aren't many totally consistent cases to show warnings.
- Non-technical users have no concept of "parent" or "sibling" elements. Those references are meaningless to them. It's also not valuable to know which elements the new pattern is between since the UI makes it clear what they're dropping between.
- Previewing elements on the page is cool, but some large patterns would take up the entire screen. This would make it hard to scroll for users without a Mac, and be distracting as the content constantly reflows.
Given this feedback and our tight timeline, I decided to go ahead with the simpler design that shows a box around the element you're going to drop into.
I made a few more refinements with further testing and playing around with the visual design –
- Making the outline green to distinguish it from a normal selected element
- Removing the box fill to avoid the impression the user is replacing the highlighted element
- Using a dashed line for a lighter UI
- Switching to flat colour and a thinner drop target to be more consistent with the rest of our UI
- Adding a transparent white border for when the drop target appears on coloured or image backgrounds
The feature was pushed to all users with our October release. Although Habitat isn't instrumented to measure when people are dropping patterns in the wrong place (it's unclear how we can identify the "wrong" place), the feature update got positive feedback from existing customers.
Our sales engineers, who initially reported that they saw trial users mistakenly dropping all their content in page headers and complaining about it during office hours, also reported that they hadn't seen user drop content in the wrong place since the update.