We need your feedback - Upcoming design improvements

lsw-fabian

Hello everyone,

for the next major release we are going to update the REI3 interface. Currently we are focusing on the application menu as well as the header menu. Users will be able to freely choose the colors of the menu. The application colors remain visible as accents in the header menu.

What do you think about the current draft? What other design elements do you think should be updated as well?

fmvalsera

Firstly, I must say that I'm not an expert in UI or UIX design and I'm just giving my personal opinion.

These are the main 3 changes that I can detect from your screen shots (probably there are more, but they are unnoticeable for me):

Gradient of two colors in the top area: for me is enough with one color to differentiate the each application.
Round of the left upper corner of the content area: this is just a simple visual change but it makes the clearer where starts the content area. I don't know why but I like it 🤨
Shadowed submenus in the menu area: this one is very useful to separate visually the menu from the submenu options. I like it too.

As I understand your proposal is to keep a common look for the UI (top, menu and content) and distinguish the application on duty slightly with the second gradient color in the notification area.

It looks nice although in general I usually prefer a plain scheme avoiding gradients, shadows or beveling. For example following the rules of Bootstrap framework.

Regards.

gabriel

fmvalsera
Thank you for your feedback 🙂

I´ve often got the feedback that the single-color header (which serves to identify the open application at a glance), made the interface look plasticy / too colorful. If you could choose, would you stay with the old way, e. g. the header being a single color following the open application?

In the current proposal, users can themselves choose a fixed header (and menu) color and then choose whether they want the application color shown as well (as gradient, as seen in the screenshots).

There are more UI changes we are working on, but we wanted to get some feedback on these especially, because they are the most visible.

fmvalsera

Definitely having the choice to choose (one or two colors as gradient) is the best solution for all tastes. You are right!

I'm willing to know the rest of the improvements in the next release... by the way, won't there be any project at GitHub showing the roadmap in progress?

Thanks for sharing your ideas!

gabriel

fmvalsera
I´ll have a look at how we can implement the old look with our planned changes - thank you for sharing your preferences!

Regarding the Github project, we´ve just yesterday had a meeting to discuss what features would be sensible for R3.6. We are still figuring it out at the moment, but once we generally know what makes it in, we´ll publish a roadmap as before.

gabriel

fmvalsera
Short update - we nailed some things down and the roadmap for R3.6 is live: https://github.com/orgs/r3-team/projects/10

gabriel

Another UI feature, we´ve been working on:

This would be used on mobile devices to switch between apps - as opposed to the start page which we currently use for this purpose. There will also be an option to use this new hover menu instead of the app links in the header menu - for users that prefer a less busy UI.

In general, the header menu will be smarter on what it displays, replacing elements like notifications or app links with smaller elements that open hover-menus if there is not enough space available.

fmvalsera

WoW, that's a great feature! Rei3 is now very responsive working within mobile devices but reducing the number of elements to show when having little space would provide a simpler interface and a better usability.

I really like it!

YogiYang

To extend what @fmvalsera said. Add property to each control that can be set to show or hide it in different views.

Here is a screenshot of another tool called FlutterFlow just to give you an idea.

gabriel

YogiYang
With the current implementation, I think, we´ve found a better solution than deciding to show/hide things based on device type (mobile, tablet, desktop, etc.).

The way it works right now, is that a user chooses what they want to see (application titles, icons, etc.) in their personal settings. Then REI3 tries to meet these choices as best it can, based on the available screen space. So if the user switches devices or changes orientation of their mobile device (or even changes font sizes), all elements are checked and then dynamically adjusted.

If the user wants to see application titles, but resized the browser window slightly, the titles might need to be dropped. If they didn´t want app titles to begin with, REI3 has more space to work with for other elements.

To demonstrate, here are 4 screenshots of the same browser window, getting smaller:

YogiYang

gabriel
But this does not really solve real world problem of small screen.

For example in my case we have been asked to show data in table on large screen and as Card (view) in small screen like mobile.

This means Card is not visible on large screen and Table is not visible in small screen.

We cannot achieve this using what is provided currently.

gabriel

YogiYang
Yes, elements like lists (tables) also should be adjustable to different screen sizes and the current options are quite limited (a single 'show on mobile' toggle for columns).

In this post we´ve been showing and talking about menu elements (header & app menus), color and style improvements. The discussed changes do not have any benefits for data fields.

To address these needs, I would love to get some screenshots on what you are struggling with. To not confuse discussions here, maybe you could create a separate post for this.

YogiYang

gabriel In this post we´ve been showing and talking about menu elements (header & app menus), color and style improvements. The discussed changes do not have any benefits for data fields.

Sorry, I did not intend to hijack the thread to another direction.

I thought you were looking for all types of new features besides the one you mentioned.

YogiYang

gabriel To address these needs, I would love to get some screenshots on what you are struggling with. To not confuse discussions here, maybe you could create a separate post for this.

Actually there are many features but I will list one because of which I had to stop development the project in REI3 and switch to another low-code platform midway.

The view on large screen is something like this.

The view on small mobile screen is something like this.

Being able to create separate views based on screen size if added it would be a great feature.

lsw-fabian

No problem. Its great that you share your thoughts & ideas.