How to allow users to position newly created items in a sortable item list

Question

Background

I have a list of items that a user can create, move around, edit and delete. Each item can be a different type such as a textbox field or a header.

To create a new item or edit an existing one the user is shown a popup after clicking on a link. This popup lets the user change the item type (textbox, header, dropdown etc) as well as its individual properties.

To improve user experience I am not allowing the user to change the position of the item in the popup as this would have been an index number field rather than a visual representation of where the item would be moved to. Instead, users can drag and drop each item.

This lets users edit and move existing items nicely as they can just drag and drop each section and click 'edit' on an item to open the popup and change its properties. The issue comes when adding new items, as I need a friendly way for users to position the newly created item.

The way I see it is I have 2 options:

Option 1

Have an "Add new Item" link which opens the popup and after the user has confirmed it, places the item at the end of the list, from where the user can then move the item to the desired position. The issue with this is it can be tedious for the user if they don't want to add items to the end as after they create one they will have to drag it to the right position.

Option 2

On every item have an "Insert below" link which opens the popup but inserts the item below the existing item with the link. The downside to this is that every item will have an "Insert below" link so the page might seem crowded.

Question

Which option would be better in terms of user experience or is there another option that I'm not seeing?

Answer 1

I recently had a similar conundrum, only mine was based in a situation where you could absolutely not have things appear anywhere else but exactly where you intended to, as it was a linear writing app.

What I did was (and so far it seems intuitive enough) insert an on-hover action between the existing elements which splits the elements and provides a secondary insertion UI. While this does mean there is redundancy with the primary one being in place at the bottom, it allows the user to insert things even when the bottom one disappears. In certain cases where it's impossible to create a fixed navigation, this one seemed to do the trick well.

I've created a quick mockup of this interaction for you to consider. It's quite similar to your Option 2, but a slightly more elegant solution.

(More fluid version here: https://i.stack.imgur.com/9nwWW.jpg)

Answer 2

I have had the same challenge in quite a few designs in recent years.

If the interface involves drag-and-drop (for reordering), I personally have found that the most usable way of adding an item was also by using drag-and-drop. This was largely after testing a multitude of solutions, including a (design-award-winner-type) mobile application called Sooner.

I reckon that with a few screenshots will suffice to demonstrate the concept:

Another thing Sooner does very well is the drag-and-drop feedback, nudging down all the items below the add position (by that doing in-between drop, and not within drop) - easier seen than explained in words.

Anyhow, such pattern corresponds more to users wish to 'I want to add something here', rather than 'I want to add something, then choose where I want it'. In your case, once the add position was determined by the drop you open the dialog.

Answer 3

I'd suggest a context menu would give the best experience. In all likelihood other functions will emerge over time that pertain to an item in the list. (To complement your "Insert below", "Insert above" springs to mind straight away—not to mention "Delete".) Enabling the user to invoke such functions by right-clicking an item would allow you to avoid cluttering the UI, and also to avoid the need for any layout change each time new functions are added.

EDIT

Although the question is specific to positioning a new item between existing items, the interaction design for adding a new item when there are no existing items also needs to be considered: by definition, unlike the former, it cannot involve UI elements related to an existing item.

With consistency in mind, a design goal should be to make it possible to use the same interaction in either case.

This again suggests the use of a right-click menu, active in the item container when no items are present. The interaction for the overall use case add item is therefore consistent, whether or not existing items are present: in either case, a new item can be added by a right-click within the item container.

Answer 4

You can change the flow for adding elements:

1. User adds an item by drag & drop in specific position
2. User edits added items
3. User drags them to reorder

Here's a mockup I created (you mentioned that user can add heading, dropdown, input etc.)

This flow is used by many design tools, for example Webflow (note the "selected element" details panel).

Answer 5

I do not recommend your option on adding the new item at the bottom of the list. Because the solution provided is not scalable. If the list increases then user has to scroll down and move it top. It's not a recommended interaction

Option 1 add the newly created item at the top. Most of the item user intend to add the new item at the top. It's simple interaction and it won't cover some of the corner cases.

Option 2 While adding new item in the popup, provide small option to " add new item at the top or bottom(radio btn option)". This will serve solution for all corner cases.