1

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)

enter image description here

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".

enter image description here

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.

enter image description here

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/

3 Answers 3

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.

enter image description here

6
  • That's already the way it's done. Maybe my wording was misleading. He stated that "older" lists kept vanishing, not the newly created ones. Otherwise I think that's a brilliant answer. Aug 23, 2023 at 17:13
  • @MoritzRoessler Edited my original comment
    – Gene
    Aug 23, 2023 at 17:23
  • the movement is already happening, although not very smoothly animated. The height of the container is more of a problem. It's currently set to a default of 5 items per list. Even if I reduce it to 3 items, the List takes up my entire viewport height on a small screen. I don't think I can shrink that down much more. Aug 23, 2023 at 17:32
  • @MoritzRoessler I would try to play around with different list sizes. What happens if one list has 100 items but the rest have 5? Are the heights still the same, but each list is scrollable, or does the list expand with the list items? Anyways, if you can't design your way around the list size, you can try a snackbar and see if that helps. It would give confirmation that something was created, but the user would still need to figure out they can scroll down somehow. mui.com/material-ui/react-snackbar/#customization
    – Gene
    Aug 23, 2023 at 17:42
  • 2
    @MoritzRoessler Personally, I would try to remove the "Add Item" textbox at the top so that the bold text is on top with the plus sign next to it. When you click the plus sign, it takes you to the bottom of the list with a "new item" textbox that you can input directly. I think given your 5 item height, this minor adjustment should give you the list height you need to have some overlap like in my image. Just my opinion, but play around with different ideas. Ideally you'd be able to get the list height down so the user can see all 5 items without needing to scroll in the first place.
    – Gene
    Aug 23, 2023 at 18:01
1

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 ;) ):

enter image description here

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).

6
  • 1
    Thank you very much! This is very helpful input and I think your suggestions are implemented with reasonable effort :) I will incorporate a few of your suggestions and see how it turns out Aug 23, 2023 at 18:47
  • @MoritzRoessler You're welcome, let us know how it goes! Aug 23, 2023 at 18:52
  • I implemented your suggestions and I like it very much, but I'm not entirely happy yet. It looks a bit empty in the beginning now. lists-app-frontend-git-feature-ux-stackexchange-c5h8nnao4.verce… Aug 23, 2023 at 20:52
  • @MoritzRoessler Yeah, you now have what's called an empty state. Here are some resources about it: NNG article (nngroup.com/articles/empty-state-interface-design) and UX Planet article (uxplanet.org/…). In general I'd also avoid just icons without any text at all (a particular habit of most devs I've seen). Here's an article on why it's not good: nngroup.com/articles/icon-usability Aug 24, 2023 at 7:58
  • 1
    Minor addition but I gave the interface to my partner and she was confused as to why new items appear on top of a list instead of appended to the bottom. Aug 24, 2023 at 7:59
1

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:

stain

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

visual prominence

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

enter image description here

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

1
  • Thank you for your suggestions! The lists are by default behind a center container with fixed set to a 'lg' breakpoint. I think the color palette definitely needs refinement. Those are the default MUI primary and secondary colors. The colors for the lists are from a random "10 colors palette". It's difficult to find 10 distinct colors which still look fine with the theme colors.. An exaggerated scroll bar sounds good. Please also see the updated screenshot with the suggestions from the other answers. Aug 23, 2023 at 20:56

Your Answer

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

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