1

I'm actually a developer so I don't know a lot about design. this is the first web-app I'm developing and designing. it's for writing topic-journals and each item in the list is a text file.
I tried to make the web-app look simple using only black, white and grey. it's almost like twitter but without the blue.

enter image description here

the list is the most important thing, so I made the top bar to be narrow. this way it doesn't get the attention more than necessary. in this page the user most often scrolls the list but not so often creates a new one. so the button for creating a new file, which is a FAB with a '+' icon, shouldn't stand out that much. but the shadow is making it bold, to stand out and taking the attention of the user.

If I remove the shadow from the button, it looks somehow confusing and ugly. if I change the color of the circle to black(or grey) and the plus to white, aka switching the colors, it's no longer confusing and ugly, but it becomes even bolder.

enter image description here

Is there any other way to have an action button other than a floating action button? I thought about putting it in the top bar, but that makes it hard to use since the top bar is narrow and since the user is not used to using action buttons being in the top.

another way could be to put the button in the list, and hide it unless the user scrolls from the top(showing it once when the user opens the page then hiding it with an animation so the user knows it's there) but I'm not sure if I'm designing it incorrectly or if it's just a bad idea, one bad thing is that the user has to do two actions instead of one:

  1. scroll
  2. click on button

enter image description here

The app will have a grid view of the list too. in the grid, the FAB will cover one file's name.

I'm sorry for the low quality pictures.
Thanks for any help you are able to provide.

Update: it seems the best option would be to put the + button in the topbar, and putting anything that is in the topbar, except for search of course, in the humburger menu.

Update: this is what I finally did, similar to ios, and everything else went to the humberger menu. thanks.

enter image description here

2
  • 2
    ios and android have different adding patterns. In iOS it is usually in the top nav, while in android it is mostly a FAB Jan 17, 2021 at 20:57
  • @harshikerfuffle Thanks. what do we do in a web-app used by both ios and android users? should I design and develop two different web-apps?
    – asedsami
    Jan 18, 2021 at 11:19

1 Answer 1

0

based on my understanding of your question, adding to the list is a rarely used action and you prefer another (more subtle) way of adding in instead of using a FAB so that the action to add to the list is not emphasised.

Like to propose 2 subtle ways you can consider to do this.

  1. If the list isn't too long, probably you expect users to scroll to the end of the list, you can put the Add new file row at the bottom of the list (as opposed to placing it at the top in your illustration above)
  2. You can choose to have the Add new file option in the search bar when the search results do not yield any matches in the list, similar to the picture below but with the last row being Add new file.

example of expandable search on listview

Although I should highlight that I am not a programmer by training so I'm not sure if these suggestions can be implemented.

1
  • 1
    The list might be long, so putting the button at the end would not be practical. putting it at the beginning seems a bad idea too because the user has to scroll which is another unnecessary action. I think my best option would be to put it in the top bar. thank you for your answer, it helped me clear my thoughts.
    – asedsami
    Jan 18, 2021 at 14:45

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.