2

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

enter image description here

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

[4] [2]
[3] [1]

enter image description here

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]

enter image description here

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.

Improve this question
1
  • Is there a reason why the cards are arranged in a grid? If they represent a list they should be arranged as such.
    – Roman Reiner
    Dec 30, 2018 at 20:10

3 Answers 3

Reset to default
4

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.

Swappable UI pattern

Example for Swappable


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.

Sortable UI pattern

Example for Sortable

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.

Improve this answer
2
  • This makes sense based on how I think I'd personally use the app. If I'm swapping stuff, "games" mostly come to mind (obviously this is just my initial thought, not a universal truth at all) - something where the "correct" order should take some thought/effort. Here, I'd expect that notes to be somewhat purposely ordered (notes created first remain closer to the top unless deliberately moved down).
    – Broots Waymb
    Dec 27, 2018 at 21:58
  • @BrootsWaymb Yes. It depends on the context. OP asked about correct user "expectation" and that correctness depends on the combination of Use case --> Pattern --> Affordance. There is no one right answer. But sorting is the efficient one if rearranging cards is the use case.
    – Anvesh Dunna
    Dec 28, 2018 at 5:38
1

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.

Improve this answer
1

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

enter image description here

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.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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