Dtyjlui

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. The correctness depends on how well the application interface solves the Use case --> UI pattern --> Affordance combination.

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 is more common in games.

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 more common in apps where the cards arrangement can be customized.

Why Sorting is the more common approach for rearranging

Applications provide 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.

I tried this in your app. Your app lets users create notes and puts the new notes at the top of a list. The fact that it's a list is key. Dragging and dropping notes in the list is to change the position of that note in the list of notes.

The card being moved should only change its position in the list, not swap positions with another card. Lists should maintain their order.

Drag and drop in lists is positional, the user is changing the item's position in the list, not swapping positions. The item is being dropped in a position in-between items, not on items. That's why all that effort is spent creating interaction animations showing users the item is changing position in the list, not swapping positions. Both examples from Google have this animation.

Here's one example from Material Design

Lists can rearrange neighboring items to fit on the screen visually, but the list is not resorted. Google does this with lists of different-sized cards.