New Improved Hornbill UI Navigation

[Gerry]

We have been working on improving the navigation of our UI. For those of you familiar with Hornbill you will know that every time you install an App from the Hornbill App Store you will most likely get one or more icons appear down the left-hand navigation bar.  The number of applications we have here at Hornbill has already reached the point where the left nav bar is no longer tenable and would probably require a scroll bar - yuck! So in anticipation of this expansion and taking inspiration from other modern cloud based business applications we have implemented an alternative navigation system which we think is a lot better and far more expandable in the future. We also believe many of you should already be familiar and comfortable with the general approach.  Like all parts of Hornbill the implementation is responsive so works on all screen sizes and devices, adapting to an optimal layout depending on the devices screen size.  



You will see that the essence of the change is the left nav is no longer present, you need to click the top-left 3x3 to pop up the nav icons.  The one question I anticipate is "what about the counter notifications", you will see that each icon that has active counters appears in the top nav pane growing right to left as more icons get notifications. Once the notifications are cleared the icons disappear from the top nav.

At some point very soon you will see the option to try out the new navigation scheme, and as always you have a time window to try out the new navigation and make suggestions and/or provide feedback here while we evolve the implementation, you can switch between the new and old navigation scheme as you see fit. 

Our dev teams love to have feedback and input from our community, it inspires them to do more and go the extra mile so please get involved, have a play and post comments and feedback here.

Gerry

[Guest]

Looks good!

[Martyn Houghton]

@Gerry

Looks good, but one question. When you hover over the parent Nav Icon does it expand or pop out with the sub options? Would not want to have to do multiple clicks to get to the individual item under each App.

Cheers

Martyn

 

 

[Gerry]

@Martyn Houghton

Yes it does, there is no more clicks you need to do to achieve the same result as the old nav system. In fact in a couple of cases you can get to the same place with less clicks.  We are going to have this in preview for a few weeks so there will be plenty of time for discussion, review and comment.  Its currently on our beta stream which means we are using it internally already and getting plenty of commentary already

Gerry

 

[Lyonel]

Hi @Gerry and all developers @ Hornbill!

I just activated the feature and got a few comments if I may. First of all, I like the effort put into this. Your efforts to modernise the UI/UX transpires via this update, and I would like to personally congratulate you for the hard work! I am very well placed to understand how such change is important as well as difficult to get right.

Few questions:

On the main menu, each new "app" will appear as a new tile? Are these tiles "dynamic" too? Looks like the Email one is which makes me think it was only a UI change here.

Regarding the sub menus, I personally don't think it works well, for me at least. Indeed, the font is too small and the colors are not very helpful to be really read properly. It does not really stand out and is easy to miss

I do not have a solution in mind yet, but then UX design was never really my strength. Maybe a little bit more contract is color, font, weight and style would work?

Also, the same menu within the actual screen is not intuitive or visible, for me (again).

Again I don't have a full solution in mind, by what about breadcrumbs with the last segment being a drop down list on hovering? or something similar... Then it would also align the design with the admin console  Another solution could be to re-introduce the side menu, only it displays the sub-menu?

Is there a possibility to change / configure the color of each tile? I am not a big fan of the colors chosen for Home and Email. And there is too much gray for the other apps.

Last point (at least for today), is about the top bar. I really liked the search centered. It is no longer and I have to admit it does not work as well. 

Don't take this the wrong way: You did a fantastic job so far! I am just expressing my personal feedback

Thanks!

[Daniel Dekel]

Hi @Lyonel, first thank you for your feedback. We don't take it wrong at all, the idea of this preview is to get feedback. We will keep all your suggestions in mind.

Regarding the colours, is up to the applications to provide a colour for each tile. The default is Gray so the Service Manager will probably make a release soon with the colour proffered colour.

The grouping of the tiles  is the same as the old menu. Each tile does not exactly represent an application but a group of functionality. Sometimes that group will be the entire application.

Hope this helps and you will probably see more updates to the menu in the near future.

Thanks,

Daniel

[TSheward_SGW]

Hi All,

Looks nice and the extra real estate is appreciated, good stuff!

However... I don't like having to hover over the arrow to get to the submenus, it's quite a small surface you have to pinpoint with the mouse to gain access to the options you're really after. 

Would suggest the entire tile changes to the submenus as you hover over (realise this proves problematic with the amount of options the Home button has but think that should be the exception not the rule - "My Profile" should move to the top right hand menu anyway IMO - the bit where you select your default view).

Just my two cents.

Kind regards,

Tom

[Gerry]

@Lyonel @TSheward_SGW

Thanks for your feedback. You should consider the new nav a work in progress, our work is never done.  However, this change paves the way for other things we would like to do so watch this space.  In reading your comments I thought I would pick up on the one point you both made around the sub-menu's .... 

We took quite a lot of time in debate about how this should/should not work, and there is no perfect answer to the problem. The old nav had sub-menu's so we are stuck with having to do something. The problem with having the whole tile as a hotspot for showing the sub-menu is it can be very annoying when you want to click on the tile to the right but you were not quick enough and the sub-menu pops up and is in your way. What we have come up with seems to work quite well once you are over the the initial impression of it, basically give it a week or two of use and you may well become more comfortable with it.   The other thing to remember (as we have to too) is that whatever we do has to work on browser and mobile devices with touch so its actually a lot more complicated to get right than it may initially look. 

Anyway, please keep the feedback coming, its most appreciated. 

Gerry

 

[Lyonel]

Just spotted something odd. When in document manager app, I don't see the drop down icon for sub menu?

Is it just me?

[Daniel Dekel]

Hi @Lyonel,

Some of these menus need to be implemented in the actual applications. You will also see it in some internal pages in Service Manager and other apps. But it will available in the next few builds of these applications.

Thanks,

Daniel.

[Lyonel]

Thanks @Daniel Dekel for the quick feedback  

Just getting to grips with the new navigation... I have to admit this is a major change! So following @Gerry advice by giving it more time.

[samwoo]

Hello,

Just wanted to add that while I like the new UI very much, it will take a bit of time to get used to it. The colours I think are the reasons for this... though I cannot really think of any other way this can be improved... unless we go to a scheme where the colours of the tiles will all be the same. However I do understand that the colours are based on the Apps themselves so as Daniel says it's up to the Application developers.

Here are a few ideas on how this could be improved:

1. Customizable colours / text / font per Application for the menu
   This could sit in the settings area of each available Application in the Admin Tool.
   
   Alternatively to allow us to create colour schemes... which wont just be for the menu but for the overall app that is chooseable by anyone in their profile settings (to cater for the wider audience, such as those who may be colourblind, or get headaches with bright colours etc) - I might create a new post on the forums for this idea as it doesnt fully related to this new feature.
    
2. Pinning Applications
   When opening the menu you could click the pin icon to move the link to the Application from the menu to the white bar (next to where the email is visible). To unpin it, simply click the pin icon for that link in the white bar to move it back to the menu. This could be limited to say 3 pins, which will make the pin button not visible in the menu once the max amount has been reached
    
3. Resize the menu
   Have the ability to drag the corners to resize the menu (scales with the sizes and amount tiles in mind). This will allow people to have the menu we currently see, to have a menu stretch horizontally across their page or vertically. The resize should avoid any blank rows / columns and prevent the user from make it any larger... until they get more Applications in the menu. Also to either... prevent the menu from getting smaller than it currently is, or to implement a scroll bar if the user does wish for it to be smaller.

Just some thoughts,

Thanks,

Samuel

[samwoo]

Hello,

Just something to add - I do not use the email functionality... is there a way I could hide or "unpin" (as one of my suggestions above relates to) the Email from the white bar back into the menu?

Thanks,

Samuel

[Daniel Dekel]

Hi @samwoo, I like your suggestion about pinning the applications. We had a similar idea where you could define what app notifications will be visible, so you could hide the email if you don't use it.

This could work, but we'll think a bit more about this.

Thanks for your suggestions,

Daniel.

[max_crown]

Hi all and thank you for the fantastic job!  I concur with the comments and suggestions of @Lyonel and @samwoo .

I use Hornbill as a support analyst and the first thing that disturbed me in the new interface was the that the menu on the left disappeared, and that it takes 2 mouseovers and 1 click to go back to the Requests List. In the previous version it took one mouseover and one click, which is to me one mouseover too many. Ideally a shortcut would bring me back to my requests list in a blink (pre-loaded). I am making a point about the Requests List because this is the headquarter of support analysts. And about shortcuts too because even though we are a generation of mouse/icons clicking/fingering, it is still quicker to use shortcuts. 

New version:

Actual version:

Sorry for the harsh feedback, but I like things to be very handy, quick and straightforward - which seems to be the mindset of Hornbill too. Also don't take me wrong the new interface looks very promising !!

I can see that in the new version there is still room available on the left for a menu. Maybe you have plans to put something back there but also that would be interesting just to gain this space to maximize the used space on screen. Then what about a "Favorites" menu, in a tab on the right ? That would be handy.

Best regards,

Max

 

[Dan Munns]

Hi all,

@max_crown if you just click the service manager tile it will take you straight to the request list so no extra mouse overs or clicks.

I do like the new UI and also love @samwoo pinning idea. I would like to extend this to being able to pin the 'Raise New' so that no matter what the analysts are doing at the time, should the phone ring they are always in a position to log a ticket straight away.

I would also like to add a +1 for being able to resize the tiles

All in all a good change though.

Thanks

Dan

[samwoo]

Hi,

I've also just noticed a Sub-Menu within the Application. I hadn't noticed this little arrow until now:

Another suggestion would be to expand the Sub-Menu for each Application to appear in the white area next to the the current screen you are in. ie: (i'm sure it could look better than what you see in my example)

Thanks,

Samuel

[Gary@ADL]

looks very nice - but would be nice to be able to monitor the number of emails at a glance, perhaps put an email icon next to the notification bell and harry hornbill?

[Gary@ADL]

not sure if that was sheer coincidence or my mind is playing tricks, or if you guys are just super fast! but an email icon has just appeared next to harry hornbill!  perfect

[Daniel Dekel]

@Gary@ADL, the email icon as well as any other icon on the menu will appear when the counter is bigger than 0.

Thanks,

Daniel

[Gerry]

@Gary@ADL,

Yes we really are that awesome  (just kidding of course) the icons appear up on the top right when there is new stuff, this is effectively a "little" menu button that works just like the main menu button but is only shown when there is new stuff.  Glad you like the enhancement. 

Gerry

[Lyonel]

Noticed an issue with layout on IE when reducing the size of the screen:

Screen width was set to 695px.

EDIT: Some on Chrome (latest version)

Edited January 27, 2017 by Lyonel
Same on Chrome

[Daniel Dekel]

Thanks @Lyonelwe are aware of this issue. It will be fixed soon.

Daniel.

[Lyonel]

No worries @Daniel Dekel! Should I post anything else I find here?

[Daniel Dekel]

Sure @Lyonel, you are more than welcome. Just that if is known I will let you know, but keep on giving feedback, is great!

Daniel.