Inkling – Improved Drag & Drop

Oct '15  |   Interaction, Visual, Product Design

The Objective

Help users drag and drop patterns and elements into the places they intended on the page.

The Problem

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.

My Role

Lead Designer (Interaction and Visual)

Other Contributors

1 Product Manager, 1 Engineer

Do this image and the one to the right look the same to you? The drop target has actually moved a fraction. Here you're dropping into the image's <figure> tag, which will mess up the styling.

Do this image and the one to the right look the same to you? The drop target has actually moved a fraction. Here you're dropping into the image's <figure> tag, which will mess up the styling.

Here, you'd be dropping into the half-width section – makes sense if you're trying to make a 2-column layout.

Here, you'd be dropping into the half-width section – makes sense if you're trying to make a 2-column layout.

Ideation

I started by brainstorming and sketching possible solutions. A few of the ideas that stood out were – 

  1. Prevent or give warnings about dropping patterns in bad places (requires knowing what's bad)
  2. Make it clearer where the user is dropping the pattern by showing its place in the structure (parent it'll be nested inside, siblings)
  3. Let the user preview how the content will be change as they drag the pattern around
  4. Show the possible spots the pattern could be dropped to make sure they pick the right one
Ideas I sketched while brainstorming

Ideas I sketched while brainstorming

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.

"Ghost" preview of element in content.

Show parent with overlay and sibling elements.

Warning about allowed but unadvised drop target.

Final Design

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 final implemented design in action.

The final implemented design in action.

Results

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.

Everyone is thrilled that they can tell where they’re dropping patterns! Even though I’ve used Habitat for a while, I dropped things in the wrong place all the time. This’ll make it much harder to make mistakes like that.
— Habitat User
We love the updated drop targets! No more sandboxed users throwing all their content in the headers!!!
— Inkling Sales Engineer