Layout/Design can be better. But how?

Quite new to mobile development but I think UI is not that different since in web you need to make the pages responsive also.

Anyway, straight to the problem.

The goal is a reservation. There’s no rules about it currently. First come first serve and no other inputs required.

I would like to make the current UI simpler because I think list/card does not fit here.

What I think I could do is a FAB that opens a modal that asks maybe how many (Most likely answer will be 1 95% of the time, 2-3 for 4%, and 4+ for 1%) and will be appended to the list with a Cancel button

What holds me back is, how can I tell the users if no cages are available?

Card List:
Pros:

  • Can see if there’s available cages
  • Usable but can be improved

Cons:

  • Can be improved.

Modal:
Pros:

  • Reasonable component

Cons:

  • No availability

Current UI:

which kind of complexity do u see in using the cards?

what is a FAB?

FAB is a material design component; short for Floating Action Button.

I just think card does not make sense on its own and also redundant. It just shows a status and an action. It’s more fit to something similar to a friend list with an add friend button.

That’s just how I feel. I need a second set of eyes and that’s why I asked.

@jendimacapili
Do the user even care which card is selected? Are they distinguishable in any way?

They will not care. OTOH it’s a way for them to see how many cages are available currently.

cool, thanks for the info.
My feedbacks:

  • I am comfortable with the current UI
  • I would optimize the room for the label and for the CTA
  • I believe it can be improved using square cards displayed on two columns (the LinkedIn APP is using this pattern)
1 Like

Thanks @dopamino I sometimes doubt myself considering I am a fullstack dev.

I’ll go for the 2 column grid with square cards then :slight_smile:

1 Like

I like the people that are questioning themselves, I believe that if you don’t fail you’re not designing.
Of course, this is my feedback.

I suggest to show the two options to several people (colleagues, friends etc) and to collect the feedback about the readability, to check if they are able to understand where to click, to check if the CTA label is self-explanatory, to check if the size of the button is finger friendly (I guess so because you’re working on a native app)

Enjoy the testing phase!

1 Like