How can I make it more obvious to the user that he can scroll down?

Question

I am currently trying to acquire initial users and feedback for a web app.

So far it's mostly friends and family and some freelancers.

I posted the link to a family group and not even one person managed to use the interface and functions correctly.

For example one user simply didn't know how to proceed from this screen. (You are supposed to add a new list using the text field and button / enter key)

Another user stated that he "tried to add many lists, but older ones just kept vanishing". He said he wanted to scroll horizontally and it didn't occur to him that you can scroll "down".

I'm not sure how to make the UI more obvious, maybe I could show a placeholder in the first screen with a text instruction on how to fill out the field and hit enter.

Regarding the scrolling the only option I see is a FAB with a down arrow that you can press to scroll down.

But that doesn't seem like a good idea.

How can I improve the UI/UX to make it more intuitive?

You can play around with the UI at https://lists.state-less.cloud

Edit: I updated the layout, incorporating the suggestions. I like it somewhat, but I'm not sure if I want to keep it as default or make add a button that let's you switch the layout.

Please try out the updated layout. I have a few difficulties with it.

1. It's not immediately obvious how to set a title
2. The initial UI looks very empty
3. The FAB is above the footer when you have few lists.

Here is a preview of the UI if you want to compare it. https://lists-app-frontend-git-feature-ux-stackexchange-c5h8nnao4.vercel.app/

Answer 1

I think your problem is that the user is creating new lists, but because the first row takes up all the screen space, they cant see the new lists they are creating. In that instance, you can place the newly created list first in the row and move the last item into a new row. If you want to keep the order of lists the same, then I suggest automatically scrolling to the newly created item after creation. The main focus here is that the user needs feedback that their newly created list was complete. This can be done visually by showing their new list on the screen as soon as they are done.

Edit: Ok, after reading your comment I think you'd be better suited to show some overlap of the lists so the user knows they can scroll. I would show the top portion of the second row of lists. Additionally, I would animate the last list item in the first row to move down, so you can watch what's happening to the old lists. Imagine the red square animated, moving from it's first position to the second position whenever a new item is created.

Answer 2

From your second screenshot, I see some problems:

There is no cue to scroll down

This made me think that you didn't want or need me to scroll down, because I can scroll horizontally. In short, there is no cue whatsoever that you want me to scroll down.

I think rather than a down-scrolling FAB (which is kinda uncommon), what you can do is

Make the lists variable in height, so that some of the lists underneath the current list show up underneath the existing ones. Here I'm taking a cue from Google Keep, which has the same basic layout as yours (please enjoy a peek at my notes ;) ):

In this example, the notes on the top are variable in height, though they still maintain a defined bottom padding. This allows the items in the notes below to "pop up" and tell the user that there's more.

In your screenshot, "Abendzeit" could be made shorter, seeing how it is the same height as "Marketing" even though the two of these have different list sizes.

Move the "Add item" textbox to the bottom of a list card. In the beginning of using this program, the user would probably have shorter lists. They can learn that this textbox is in the bottom. You can also move it closer to the list items with the benefit of having a gestalt cue for proximity, and also is much more intuitive with how people add items to a list on a sheet of paper.

Needs testing: remove the "New list" textbox, change it into a button on the corner. Next to the "5" dropdown (also, this dropdown is unexplained - what is it?) Make it the primary CTA on this page. Upon clicking, a new list pops on the leftmost column on the first row, moving all the other items to the right and down (see graph by Gene Lee). Tell users to enter title on a popup or just show an empty list card with the cursor defaulted to the list title.

Additional input

This is quite unrelated to your question, but your coloring scheme is off. I suggest you use the Bridge PCA contrast checker to make sure that your colors are readable, particularly if your users are going to be in the older range.

EDIT — more input: there's no significant visual delineation between the interactable content and the footer. This creates visual clutter, making it hard for people to understand what the page really is about. I suggest changing the background color for the footer or even removing it entirely if it doesn't align with the page's exact feature (what you have there is more likely to be seen on a marketing landing page).

Answer 3

I see deep problems, mainly related to color selection and perception.

...one user simply didn't know how to proceed from this screen. (You are supposed to add a new list using the text field and button...

It's logical, the selection of colors makes the main action button go completely unnoticed, subtlety is not an option in this case, both the header and the yellow award icon on a green background practically "devour" the rest of the interface. A visual balance is needed that gives importance to the action to be carried out. Doing the visual exercise of blurring the interface, even the titles have more relevance than the button, becoming a simple stain:

I would recommend giving more visual prominence to the immediate action button:

...it didn't occur to him that you can scroll "down".

Regarding a greater perception of vertical scrolling, several points:

1. Create some generous side margins and center the items. In the screenshot, the items occupy the entire width of the screen, giving the impression of being marginalized to the left, which is why anyone would think that the logical continuity is horizontal. If the items are centered, intuition leads one to think that the continuity is down.
2. Add a hidden items indicator button at the bottom
3. In case of a personal project, I would propose a custom-designed vertical scroll bar exaggerating the action button

Finally, while not in the question, I would also recommend a general review of the color palette and layout.