Question: When adding an `item` to a `list`, Append or Prepend? `#discuss`

[nelsonic]

Very soon we're going to allow people to add items to list. #356 (included in #345) So the question is: should an item be added to start of the list i.e. prepend? or should it be tacked onto the end of the list i.e. append?

Currently the default behaviour is to prepend an item to the list such that the newest item is first:

IMO: this "makes sense" because as soon as the person has more than a handful of items, they would have to scroll to find the latest one ... 💭

However this only makes sense in the world where we are building a "Todo List" ... Which, we are not. The "Todo List" is just one of the features we are building. I actually think it makes more sense for the item to be appended to the list and for the interface to scroll to keep that latest item in the viewport.

I'm very keen to hear/read your thoughts on this ... 🙏 💭

[panoramix360]

hey!

I think that the decision needs to be influenced by how the users people use the application. Or our intention to it.

Prepending

Pros

1. Top-of-Mind Priority, placing the newest tasks on top might psychologically signal that they are a priority. It tends to make the user person address the first items.
2. Immediate visibility, the users person sees immediately the most recent tasks.

Cons

1. Disruption, for users people who like to organize their tasks in specific order or priority, this could be bad. But since we are planning to add drag-and-drop, this is not an issue.

Appending

Pros

1. Maintains order, if the user person is accustomed to adding tasks in the order they intend to finish, this could be more intuitive.
2. Predictability, the users people will know where to find the newest tasks, and over time this could lead to faster navigation to the tasks that they are searching for.

Cons

1. Visibility, new tasks might get a little lost if the list is big enough.

Considering we could implement sorting mechanisms and manual reordering, it's possible that these cons/pros will change and even be solved.

Given this context, my personal preference is appending but with manual reordering being implemented in mind so the users people can adjust how they see fit. It could be good more user feedback on this hehe

But interesting question indeed!

[LuchoTurtle]

I agree with the points risen by @panoramix360 .

Perhaps it's because I'm now used to it but I like the prepending approach as it stands. There's nothing wrong with appending but I don't think hijacking the scroll and viewport to show it to the user person is considered a good UX practice. If I wanted to drag-and-drop it to the top, I'd have to scroll the whole page (though the same thing can be said if we were prepending).

I think appending works with scroll if the textbox in which the person inputs a new item is stickied, meaning I don't have to scroll up to create a new one 📜 .

[iteles]

There is no doubt in my mind that my preference would be to prepend, especially because my lists are looooooong as usually the most important thing is in the recent items I have added. If I leave the list and then come back to it, there's a lot of scrolling involved. The key is obviously to always see the last item entered just after you have entered it but if my interface started scrolling for me, I think I would think there was a bug. Or a less informed person might have a little freak out that their phone/computer had been taken over.

I agree with the points raised and this is a great question, but I also think a lot has to be said for familiarity and expected behaviours.

The vast majority of applications that people will already be using prepend tasks/notes/content and show 'newest first'.

Task lists are the obvious ones as you mentioned @nelsonic, but also Apple Notes is a good example of this and all social media.

My personal thoughts are that prepending is the place to start with an optional 'oldest first' sort if we need one.

[nelsonic]

@panoramix360 thanks for your insightful feedback as always. 👌 I agree that the Pros/Cons will be resolved by having a sort field on the list record which defaults to DESC with a human-readable label "Newest First".

But as we migrate the interface/experience more toward capturing "rich text" see: https://github.com/dwyl/mvp/issues/141#issuecomment-1657954420 we want the text people are inputting to flow naturally. We will soon remove the "save" button completely and just allow people to capture their items intuitively.

@LuchoTurtle agree that we're used to prepending from the MVP. But this interface is just to get something working for us. It will be totally replaced very soon. Soon the whole "page" or "screen" will be the textarea, there will be no more textbox for capturing an item. Best way to understand this is by observing the UI/UX of Apple Notes as @iteles has mentioned.

How Apple Notes Does it:

This is a quick demo of Apple Notes on Mac:

https://github.com/dwyl/mvp/assets/194400/168307a2-cd84-4ca6-a498-20df010cef04

The note is a structured/rich text document with different kinds of elements included. They have a Todo/Task feature but it's very basic.

While I was creating Tasks the following Modal (🤮) interrupted me:

Would you like to enable automatic sorting of ticked items?

This is the kind of prompt, though never a Modal we could have guiding people on how to sort items in the view.

There are several kinds of list where it makes a lot of sense for the items to be appended. A shopping list might be in the sequence you follow when walking around the grocery store. And when you're adding items to that shopping list as you think of them, you will very likely be doing a mental "journey" around the store while preparing your list.

Conclusion: list should have a sort field

That allows people to select their preferred ordering for a particular list. For the "all" list (which will be the default list all items get added to, see: #401) the default sort order will be DESC i.e. "Newest First". The person can easily edit this in the list settings page to be ASC "Oldest First". OR we could sort by priority if people decide to use the P1, P2, P3, etc. system. There will be other sort_order options in the future.

[nelsonic]

Note to anyone reading this in the future: we aren't building a "clone" or "copy" of Apple Notes. 🙅 We are merely showing this as an example of UI/UX that is familiar to people.

However, as a business strategy, there's nothing "wrong" with copying a built-in iOS App and making it available for more platforms. The reason WhatsApp succeeded was they build a Messages App for cheaper phones i.e. building a cross-platform version of something that exists in the Apple ecosystem is a multi-billion dollar business ...

To be clear, Apple Notes definitely didn't "invent" this way of capturing notes. It's just an example that's built-in to the device I use so I occasionally use it. But the UX is crap. Sharing is not real-time and not being able to publish to web or share with Android fam/friends is super lame. 🙃

As soon as we have WYSIWYG editing in the Flutter App https://github.com/dwyl/flutter-wysiwyg-editor-tutorial/issues/1 ... I will pretty much stop using Apple Notes and switch to our App. 📱 🤞