Do you use Left Pane or Top Bar for your menus?

BenHayat

In all the years (not just in Aware) I've used Top bar menu, because:
A) it provides hierarchical view to user
B) Doesn't take valuable horizontal real-estate of the screen
C) Users are used to it
D) And it automatically goes away Where as the Left stays unless manually collapsed.

So, with your NEW apps (as the market and UI/UX is changing) Which do you use?

hpl123

Well, it´s not a one shoe fits all type scenario for me and it all depends on the app, how big and complex it is etc.. When it comes to UI/UX, I try to follow Google´s material design guidelines as much as possible as I think they make sense in many ways (+ gives me an overarching "framework" of UI/UX to work after which makes UI/UX design whole of a lot easier).

I would typically lean towards doing something like this:
https://www.dropbox.com/s/1ym09g9nyd7xpmq/fpjournal.png?dl=0

In this app/scenario, I have a top bar with general system operations so things like profile, logout, search etc. and then I have a left menu with operations for all "modules" of the app (in this scenario, I have a 6 level menu i.e I can drill down 6 levels of operations (if needed) which makes the left menu able to hold A LOT of stuff). The left menu can also be minimized manually + automatically when needed (as in screenshot) or it could be expanded to give the user more context/info about left menu operations. I also have operations for each layout e.g on the journal layout (screenshot above), operations in the breadcrumbs or on the actual layout. In my experience, this "structure" of UI/UX things is the most versatile and works for very complex apps + the actual UX is good, easy to understand and use etc..

BenHayat

Thanks Henrik for detail feedback. Yes, that's what I'm evaluating Topbar or left bar.

Although I want to follow Googles guidelines, but when I ask general users where they prefer for menu interaction, almost 99% want the old fashion way on the top as it's very familiar to them.

When you expand the left bar, the menu items show text? Can you show an expanded left bar as how it looks and can the user recognize the menu hierarchy?

VERY NICE deign Henrik.

Did you sort created a dummy breadcrumb or are you using an actual breadcrumb component? If yes, is it from Kendo UI?

BenHayat

Henrick, forgot to ask you this.

Did you do your top menu usin Aware's TopBar or Banner?
If you used TopBar, then how did you get another bar under that for your breadcrumb?

Or did you use Banner for your Top Menu and then Aware's Topbar for your breadcrumb?

Lastly, what Theme are you using? The "Black" or "Material Black?

Thanks!

hpl123

BenHayat wrote
Thanks Henrik for detail feedback. Yes, that's what I'm evaluating Topbar or left bar.

Although I want to follow Googles guidelines, but when I ask general users where they prefer for menu interaction, almost 99% want the old fashion way on the top as it's very familiar to them.

When you expand the left bar, the menu items show text? Can you show an expanded left bar as how it looks and can the user recognize the menu hierarchy?

VERY NICE deign Henrik.

Did you sort created a dummy breadcrumb or are you using an actual breadcrumb component? If yes, is it from Kendo UI?

Thanks and yeah, this design turned out nice 🙂.

Regarding the left menu, here is how it works:

When minimized, the user can hoover it and get info about operation (or a menu for multi level operation groups):
https://www.dropbox.com/s/4ps8uql55uh5pso/fpcalmen2.png?dl=0
When expanded, the user can see all operation groups with text, icon, notifications etc.. The expanded menu can also be configured to always take up the real estate on the left side of the screen (i.e always expanded and the content of the app is shifted to the right instead and not like in this example where the menu is placed above the main content):
https://www.dropbox.com/s/m602fdi5tbdpt94/fpcalmen.png?dl=0

Here (if you haven´t seen it) are other screenshots from the same app (and some others) where you can see the same design used for different modules, layouts etc..:
https://www.dropbox.com/sh/8pu8jajjc3gkivm/AAB7zlY1aSp0vt_w0JYyUBAwa?dl=0

Regarding the breadcrumb, it´s a HTML breadcrumb so not Kendo and regarding the frames used. The Aware frames are not very flexible when it comes to custom HTML so all you see in the Fokalpoint webapp above for example are content panels i.e I only use the main frame for everything. The theme I am using for Fokalpoint is a custom theme I developed (based on the Bootstrap theme which I then rewamped).

BenHayat

I hate you... 😃 You just made my life more difficult.

I think that's the best way to complement you.

hpl123

BenHayat wrote
I hate you... 😃 You just made my life more difficult.

I think that's the best way to complement you.

Hahaha, thanks and yeah it is more work to do something extraordinary (+ a new way at looking at Aware UI) but worth it in the end in most cases I would say 😃.

BenHayat

For this project I have to stick Aware out-of-the-box features. No CSS or outside components or widgets. So I have to become creative with what I have in hand.

Now, if I were using Vue and Quasar for UI, I'd go Material Design all the way, but it takes too long to build a large SPA, with 100s of pages. And that's why I suggested AwareIM as it is a Turbocharged RAD.

hpl123

BenHayat wrote
For this project I have to stick Aware out-of-the-box features. No CSS or outside components or widgets. So I have to become creative with what I have in hand.

Now, if I were using Vue and Quasar for UI, I'd go Material Design all the way, but it takes too long to build a large SPA, with 100s of pages. And that's why I suggested AwareIM as it is a Turbocharged RAD.

Yeah, that´s always the tradeoff and the "problem" with Aware. It is a RAD tool and is OK when using all native stuff i.e you can build complex app with sufficient UI fast and easily and that is sufficient for most Aware users (me to in some scenarios i.e I don´t do the complete UI/UX rewamp for all projects, it all depends on what the project is, ROI prospects etc.). It you want more it´s possible to go other ways like building an app from scratch using something like Vue BUT that is a lot more work than using Aware with the rewamped "stuff" I do for example (gives more control using something like Vue sure and is another tradeoff). Aware with a lot of custom HTML/CSS etc. is still RAD but not as RAD as native Aware.

BenHayat

And that brings us back to the first question. 😃 Doing the Aware way, should I use Topbar or left bar for lots of menus and 3/4 level deep hierarchy?

ACDC

Hi Henrik

I like your sample screens, but how did you add the badge(s) to the Left menu. I can only see an option for the top bar menu :?

BenHayat

ACDC wrote
Hi Henrik

I like your sample screens, but how did you add the badge(s) to the Left menu. I can only see an option for the top bar menu :?

He has done all those panel outside of Aware's system. A lot of work.

ACDC

He has done all those panel outside of Aware's system. A lot of work.

I have a very similar setup, almost identical but no LH menu badges. using stock standard AwareIM

BenHayat

ACDC wrote
He has done all those panel outside of Aware's system. A lot of work.

I have a very similar setup, almost identical but no LH menu badges. using stock standard AwareIM

So you are using LE bar for your menu and not the Top bar?
can I ask you if you can share a screen shot while the left hand is expanded with menu hierarchy? This easily recognized hierarchy view is important, where the topbar menu does a great job.

ACDC

can I ask you if you can share a screen shot while the left hand is expanded with menu hierarch

I knew that was coming 🙂

I used a simple standard menu with css set to dark , minus the text (only icons)- set - the width to 55
and then an expand arrow icon ">", that changes the perspective to expanded view containing icon and text label with a corresponding "<" to switch back to minimised using change perspective

I can't publish the clients UI for obvious reasons, but its simple enough to recreate

BTW, using change perspective does refresh everything but not noticeable at login.
I did have a process going with support to provide a feature that works similar to DisplayLayout that will allow you to change ONLY the LH menu by calling DISPLAY LAYOUT Left FROM_VP Xyz. This would be a nice elegant feature for menu manipulation

Jaymer

If memory serves correctly, I had An issue with this.

did have a process going with support to provide a feature that works similar to DisplayLayout that will allow you to change ONLY the LH menu by calling DISPLAY LAYOUT Left FROM_VP Xyz.

I had to have badges. One of the menu types doesn’t support badges. So I only have one choice.
After making a change to the data shown on the screen, I had no way to explicitly refresh the badge. It wouldn’t update. Only an entire redraw the VP worked, and that lost your filter and sorting.

hpl123

ACDC wrote
Hi Henrik

I like your sample screens, but how did you add the badge(s) to the Left menu. I can only see an option for the top bar menu :?

I use a custom HTML menu as the native stuff just doesn´t do all I want. When it comes to implementing a custom menu you have a couple of different options.

You can do a full blown admin template integration which gives you menu + a lot of other stuff. The only thing with this approach is that it takes a lot of custom tinkering to integrate the template into Aware. Here are some examples of admin templates:
https://themeforest.net/category/site-templates/admin-templates
https://wrapbootstrap.com/themes/admin
https://adminlte.io/

You can also just integrate a HTML/JS menu and here are some examples of HTML/JS menus (Codecanyon ones are premium i.e cost and the codepen ones are free. These are just examples and there are a lot of other resources online):
https://codecanyon.net/item/navamdin-responsive-sidebar-navigation/21184555?s_rank=21
https://codecanyon.net/item/semsema-css3-admin-navigation/22803532?s_rank=1
https://codepen.io/sazzad/pen/qdOwLL
https://codepen.io/C0ZEN/pen/oLWQwv

hpl123

ACDC wrote
I did have a process going with support to provide a feature that works similar to DisplayLayout that will allow you to change ONLY the LH menu by calling DISPLAY LAYOUT Left FROM_VP Xyz. This would be a nice elegant feature for menu manipulation

Good idea and I could definitely use that. I currently use DISPLAY LAYOUT all over and always redraw the entire layout (i.e every "module"/part of my apps are layouts and this is a different way of doing things but opens up for a lot more customisation options.)