Csdrhrt

I have the following note taking app - https://wenote.jstock.co

I have some question, regarding user expectation regarding drag and move.

Say, you have the following card position.

[1] [2]

[3] [4]

when you move card 1 to card 4 position

Should they become (Card 1 and card 4 are being swapped. Only position of card 1 and card 4 affected.)

[4] [2]

[3] [1]

Or, the entire cards position are being shuffled (The entire list of cards are being shifted forward, to give space to the moved card. All cards position are affected.)

[2] [3]

[4] [1]

So, I'm some how confused here. What is the correct behavior when coming to drag n move for the above case?

1. Card 1 and card 4 are being swapped. Only position of card 1 and card 4 affected.


2. The entire list of cards are being shifted forward, to give space to the moved card. All cards position are affected.

For me, the 1st approach has a more "Direct intuitive". But, I notice that some popular note taking app like Google Keep, Zoho Notebook are using 2nd approach.

User expectation for drag and move can depend on the existing mental models and the kind of affordance provided in the UI.

Pattern 1:

Commonly known as Swappable. In this pattern, when a card is dragged onto another card, the other card doesn't change its position until the user releases the drag. Usually the other card is highlighted visually to indicate that a change is going to happen. This pattern of rearranging cards is less common in most applications (reason detailed out in the end).

Pattern 2:

Commonly known as Sortable. In this pattern, when a card is dragged onto another card, the other cards shift positions to give space for the change. Here the visual feedback to the user is immediate. This pattern is the most common one.

Why Sorting is the more common approach

Applications provided the feature to rearrange so that users can arrange content in a way more meaningful for them. If we take the following example of a list of cards:

[1] [2] [3] [4] [5] [6]

To get the result [2] [3] [4] [5] [6] [1] using 1) Swapping will take a lot of combinations whereas 2) Sorting happens in a single go.

To get the result [6] [2] [3] [4] [5] [1] using 1) Swapping will happen in a single attempt and 2) Sorting will happen in two attempts.

Using Sorting to swap items can always happen with no more than two attempts. That's why Sorting is the more efficient approach and found in most of the apps like the examples mentioned in the question.

Should be the second (shift) approach. By dragging Card 1 to Position 4, you are saying" I want Card 1 to be in Position 4". The action never states "I want Card 4 in Position 1".

Another way safe approach is using commonly known patterns: What is the most common interface using this pattern? Smartphone home screens. In both iPhone and Android, users reorganize app icons based on the 2nd approach. Therefore they would expect this same behavior to translate into other drag and drop interfaces.