Availability is Set

Availabiltiy is set

Availability is Not Set

Availability is not set

I am looking to improve the UI and UX of the following page where users can set their weekly availability for a meeting. I have attached 2 screenshots, one is when the availability is not set, the other is when it is set (tiles turn blue, from/to get filled, close button becomes red.).

My issue is that on smaller screens the list becomes scrollable and the save button goes down. How can I improve this?

  • What exactly is it you want improved? You want the Save button to always be visible? You don't want it scrollable?
    – JonW
    Commented Sep 6, 2023 at 9:41
  • Well, I was looking for ideas to make it entirely different. Currently it takes a lot of vertical space and the rest of the page is empty (this would be 1 issue). Then the fact that the list becomes scrollable, hides the save button and the users might miss saving their availability. Do you have any feedback please :) ? Commented Sep 6, 2023 at 12:07

1 Answer 1


You don't need to have a save Button (and it should be disable if you didn't change anything by default). Take inspiration from other apps, such as ios clock. You can have a switcher element instead of the "X" buttons (like an on/off) to set the availability.

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.