Prominence of add & save buttons on OH3's UI

Edit: please note - this discussion has been moved from [wiki] Getting Started with OH3: rewriting the tutorial - 3. Adding a Thing (simple) in order to keep the original thread on-topic. - @ysc

Looks good, like what has been done, just a comment on the layout of the UI: (Where is the best place to post this? will move it if this is not the place)

Can the plus button get moved to the top left so it is closer to where the mouse / your finger clicked last ? It would also keep it looking similar and more familiar to the Openhab V2 location of the + sign. You click on THINGS at the top left of the screen, then need to move all the way to the diagonally opposite corner to press the “+” button. The other buttons are randomly located in the middle of the screen and bottom middle… Call me lazy, but I like it when the controls are close so I can move faster in an app, and consistent in their location so I can predict where they will appear.

1 Like

Second the location of the + button, also the “Add” /“Save” buttons in the very top right hand side - easy to miss.

But wow I really like how OH3 is shaping up!!! Amazing work!

It’s probably best to file an issue on the openhab-uis repo.

I mostly agree - when you’re on a desktop, on mobile I think it looks fine - but don’t really have a satisfactory solution for this yet.

This might translate to more prominent buttons when you’re using the desktop theme. As you might or might not know, there are 3 themes in the UI, one for desktops, one for Android (Material Design) and one for iOS. The default theme will be chosen for you according to the device you’re using but you can override it in the About page.

1 Like

@ysc
Did you want me to create this on GitHub as an issue?

Its a minor thing for me as I will soon learn where the button is, but if it is going to be changed I thought it would be worth raising now to hopefully reduce the rework of changing documentation and people needing to re-learn. Too late already?

I don’t know the limitations that need to be considered like you do so perhaps it stays like it is, or does changing the menu on the left hand side to start from the bottom and expand upwards solve the issue? Kind of like the start bar in windows, based from the bottom to allow all buttons to stay down the bottom to form a consistent flow?

How does it work when the new Inbox is full of items? Do you then need to scroll down to find the + icon hidden at the bottom of a long list?

As mentioned it looks great and thanks to all that have done some great work on it all, so sorry if I am nit picking a tiny detail :slight_smile:

No need, it’s in my mind now - this self-contained thread here will suffice to keep track.

No, it’s a floating action button from the Material design guidelines so as the name implies it will stay in position when you scroll. It’s also usually featured in the lower-right corner (in Android apps mostly), that’s why it’s there, and on small screens it’s looking okay:

Looking & feeling great on mobile is a stated objective, but it’s a fact that it’s going to be used mostly on desktops so they’re not to be neglected. It’s true the buttons are a little small (the FAB as well as the Select button on the title bar) when you have plenty of screen real estate.

That’s why I suggested finding another design for these buttons in the desktop theme only which will be used by default on desktops, maybe moving the buttons to the top in that theme only. It’s a matter of finding a good design not looking out of place and I haven’t had any inspiration as of yet, so I can’t promise anything. The material design page I linked above has several examples of action buttons presented above the list which might be part of a solution.

2 Likes