8

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?

  • 2
    You could use the hover tools pattern to hide the "insert below" option for each individual item until it is hovered over. You could also include an external button (your Option 1) as a fall-back if you find that people have trouble discovering the hover tools. – Graham Herrli Sep 3 '14 at 16:56
  • Option 1a - "Add" places above selected entry, or at the end if none selected. Depends on the possibility to select, and the overall flow and design. – virtualnobi Jan 2 '15 at 12:12
3

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.

Demo of Interaction

(More fluid version here: http://imgur.com/OL8OEeX)

1

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:

A screengrab showing an add proxy that can be dragged to add an item to a list of items

A screen grab showing the add proxy being drag into the circular view

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.

  • It's not clear what's happening on the second screen. Can you explain how you drag the items from there back to the first screen? – Graham Herrli Sep 4 '14 at 15:05
  • These are two separate screens. Both has an add drag control to add to the lists on each screen. – Izhaki Sep 4 '14 at 15:07
  • Okay, so if I'm understanding you right, you tap the + symbol and drag to a part of the screen, then fill in the content after you've chosen the position (rather than writing the text first and then moving it). Is that correct? – Graham Herrli Sep 4 '14 at 15:26
  • Exactly. Highly recommend trying this out on the live app. – Izhaki Sep 4 '14 at 15:32
0

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.

  • 1
    What affordance would you provide to make sure the option is discoverable? Only being able to add things from inside a right-click could be problematic. – Graham Herrli Sep 3 '14 at 18:53
  • @3nafish I would say right-click menus are generally discoverable by only two means: experimentation (based on expectation arising from use of GUIs generally), and user documentation. Despite this they are widely used and very effective. I would not suggest adding anything else, although some might like a tooltip "right-click for Actions menu" or suchlike. – Reg Edit Sep 3 '14 at 19:24
  • @3nafish 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, which I think you may be hinting at. I've edited my answer to draw attention to this. – Reg Edit Sep 4 '14 at 7:29
0

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.)

enter image description here

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.