Grassland gets new Interface

I have been working on improving Grassland User Interface these few days. Our objective is to make Grassland Framework base design more inline with current design trend, flat and less intrusive yet able to cover most if not all functionalities offered by previous interface.

new design for grassland

The first noticeable change would be the menu bar,  we remove ‘outlook bar’ and completely redesign and development new menu bar which is quite commonly used in web application.

previous design

The older design have been with us quite sometime. It works well for us. However, there are few issues that raised by users as well as internally prompt us to redesign the menu bar.

As it is called outlook, indeed it is very powerful. It comes with a lot of features. For features refer to and here Odyssey indeed did an excellent job to duplicate all outlook bar features. I’m impressed.

Initially when we integrating Outlook Bar, our intention is to tap on existing outlook user have. So they can easily relate back to Grassland Applications especially when start with Business Applications. Most of our corporate customers have Outlook experience.  The decision to use Outlook Bar is not tough.

However, as times goes by, Grassland Applications expanding reach to other users, Consumers, less Outlook experience, at the same time, we notice they are growing number of corporate not using MS Outlook. New Grassland Application user start to have problem in using our Menu Bar.

The first issue complexity. For example the distance between menu section selection and the menu itself in old design. It get worse when we have long list of menu sections. There are users actually asking where to look for after they clicking the section they want and yes in user experience concept. It decreases explorability of the system. Users have problem in identifying where to go next after section is clicked. There are other operations proven to be difficulty for novice users or beginners such as hiding extra section at the bottom, when collapsed, clicking bar particular section pops up the menu.

Then is the aesthetic, in web development, flat design, and material design has become mature and becoming the main trend. Of course, we want to bring it into Grassland System, Desktop-based application.  Compare to previous design, we reduce greatly number of gradients, rounded corners, and shadows including Ribbon Bar at the top.

To make the whole application to look more appealing and easy to use. We change most of the button into embedded image button with icon only. Only those important action now remain as button, such as OK, Accept button.

Menu Bar

Basically is just a accordion with some modifications.  Accordion is widely use as menu in web application. We making it collapsible. When mouse over, the menu itself pops up at the side. So user can easily access the menu without extra click. We add a vertical scroll bar at the left and redesign the look so it looks more fit into current design. Also, normally added scroll bar will result layout shift and rearrange. It could be annoying when you expand particular menu or sub-menu and result and whole menu shift.

New menu bar

We increase greatly the size of button so to allow better usage on tablet and touch screen. We still considering whether the size of each sub menu sharing the same size of the main menu. Currently we still keep it as Hyperlink. One major consideration is the number of links. If converting them all, it will have a very long menu bar.

Ribbon Bar

Initially we thought of just replacing with current office 2007 look to Office 2013 Style for WPF Ribbon Bar. However, we discovered that there is no such style can be found on the web. Of course, keeping the same Office 2007 Ribbon look is not an option, especially with the new Menu Bar. So I left with few costly options: replacing other ribbon control and overidding the style and template myself.

Back in 2013, we did replacing Odyssey  Ribbon Bar to MS WPF Ribbon Bar. Now we did consider Fluent.Ribbon it looks promising. The only concern the effort to integrating in. We are ok with the features offered, to be exact more than we need. It is just the look. Besides, we actually have plan to redesign and replace ribbon bar to have a easier and better design of ‘Action Bar’

Hence, I go for second option for the moment to modify the style and template manually. The make things more complicated. I can not get the generic template for MS Ribbon. Not sure why. So have to extract them manually and redo the binding. The process is tedious. Since have to redo, I am thinking might as well make it even flatter and homogeneous look as part of Grassland.

Give ribbon bar a new look

Now should look more cohesive with Menu Bar even though not perfect yet.






Leave a Reply