New Navigation - Not Very Well Thought Through

[Greenman]

I really appreciate the hard work that IPS are doing to transition through the gears with frequent releases.

However, the changes to the navigation structure have not been very well thought through and like a lot of the IPS updates, the UX and design is very much a desktop first approach as opposed to mobile. It's beginning to look very dated already.

With over 50% of traffic on mobile, it really needs to be the other way round. Nowadays, it's all about simplification rather than adding every bell and whistle under the sun and making the system so complicated that it turns off our community - that is real feedback from our live forum.

Anyway, a good example of this is the navigation structure which forces a drop-down off every main nav item. If there isn't a drop-down (like most menu items) you get a big blank bar which is crazy. Drop-downs are basically a 'no no' these days on mobile - nav needs to be kept super simple but with IPS and the activity streams, we have now have a 3 tier menu system which is hard to use at the best of times.

It would be great if IPS could focus on mobile as a top priority - it's a lot more important than introducing new features because until that structure is right, we will end up with some very confused communities. The gallery module is another example of an area of the suite that is unusable on mobile, but that has so many issues, it's best left for a different thread.

Screenshot attached.

Thanks, Si

 

 

 

[chilihead]

What do you want in sub-menu if it has no choice? Do you want the space to close and the site move up? Then if there is a choice, it moves down? That's very jumpy.

[Greenman]

I think you have answered your own question. The current solution isn't flexible enough and only works if every nav item has a drop-down which is never going to be the case and would be very worrying if it was - those days of massive sitemaps and large numbers of nav items are long gone (due to mobile).

Secondary nav will of course be required from time to time but it's crazy to have a permanent area that just sits blank if it is not in use - it's valuable screen real estate up there and shouldn't be wasted. I would just have a standard drop-down overlay like 99% of all other sites. As soon as you are into Tertiary Nav, you know you have a UX problem and need to simplify your sitemap so I wouldn't even allow that option.

http://apple.com do it very well if IPS want to stick with a similar system to what they have.

https://nest.com/ is another nice example.

Anyway, I have never seen a solution like we currently have with the forum where we just have a big blank space.

[Greenman]

On the same subject, if we are looking at the header in general, another area that isn't very well thought through is the brand placement on mobile.

On a small device, the branding suddenly jumps down onto a second level which is a very weird spot for it. Again, I have never seen that on any other site. IPS kind of get away with it with a nice compact logo but if you had a square or portrait logo, it will kill your mobile experience instantly.

Really there are only 2 options.

• Centre logo at the top and run everything else below.
• Keep logo to the left, and have your nav to the right.

My point is that I feel a lot more attention should be placed on the mobile experience and UX in general. Get the core base right first and then it's easier to roll out new features.

I don't want to be negative, aside from the way a user gets around the forum on desktop and mobile, everything else is very strong. But at the moment, community members are getting very lost trying to find stuff.

[opentype]

1 hour ago, Greenman said:

it's crazy to have a permanent area that just sits blank if it is not in use …

I disagree. You neglect the fact, that the menu is a “hover menu”. When there is no sub menu for any of the main navigation items, the whole sub menu will disappear, just as you requested it. But if there a sub menus, then the sub menu bar will show for every menu item. It just has to. Otherwise hovering over the menu items would move the whole page, i.e. anything below the navigation, down to make room for sub menu and you would have an awkward jumping and flickering while you move over the different items. Now THAT would be “terrible UX”. 

[Greenman]

Unless I am missing something, if you roll over the 'clients' nav item (on this site), the blank 'secondary nav' bar appears? As per the screenshot above.

Maybe there is a setting to turn it off that I have missed?

I completely agree, you don't want the site jumping around, but Apple and Nest do it exactly how it should be and it works really well.

[opentype]

9 minutes ago, Greenman said:

Unless I am missing something, if you roll over the 'clients' nav item (on this site), the blank 'secondary nav' bar appears?

No. It doesn’t “appear”. It’s always there. If you would want it to disappear to save “valuable screen real estate” (as you say) you would have that jumping of the page. 

 

[Aerosoft]

a easy work around is, you can simply change the css in this case, thats what we did as we never had a dropdown.

[Vikestart]

6 hours ago, opentype said:

No. It doesn’t “appear”. It’s always there. If you would want it to disappear to save “valuable screen real estate” (as you say) you would have that jumping of the page. 

Not true. You could have the submenu bar overlap the area underneath the menu. Instead of taking up any space at all.

[opentype]

 

3 minutes ago, Vikestart said:

Not true. You could have the submenu bar overlap the area underneath the menu. Instead of taking up any space at all.

Yes, that is an technically another possible option. But neither does that make my statement “untrue” as you claim, nor does it make the current way “not very well thought through”, nor would an overlapping sub-menu be the best choice everything would agree with. 

[Morrigan]

As someone that browses most sites mobiley 50% of the time (and sometimes more if I feel like chillin' on my iPad instead of my computer). I don't seem to have the problems that you are discussing via mobile. Almost anything that "works" on desktop normally works pretty well on mobile as well. I say that from experience. This includes the navigation bar. For the "mouseover" affect all you have to do is tap and hold instead of just tapping and it will switch you there.

I certainly wouldn't want my menu overlapping ANYTHING personally and I feel that it's silly to say it's not done well when I believe the design was well thought out.

If you want the mobile menu to appear the moment you get onto a tablet device you can change this in your own skin but being that some members sites at "half width" to save up that real estate on a PC when  they are doing something is detrimental and sad. I would loathe seeing a mobile site on my desktop or tablet. I certainly would be more unhappy with that then anything.

[Rikki]

It's worth noting that the menu system you're showing in your screenshots doesn't appear on mobile at all - instead, there's a more standard hamburger menu.

[SJ77]

On 2/19/2016 at 10:48 PM, opentype said:

No. It doesn’t “appear”. It’s always there. If you would want it to disappear to save “valuable screen real estate” (as you say) you would have that jumping of the page. 

 

 Wouldn't the proposed solution prevent the jumping?

[opentype]

25 minutes ago, superj707 said:

It would seem that you've not viewed the example websites the OP has shared.

Of course I have. I just didn’t talk about that. I talked about the screenshot from this site he provided and they way websites normally behave. Of course there are no limits of what you can do with jQuery animations and whatnot, but even Greenman himself said “it's all about simplification rather than adding every bell and whistle under the sun”, so I am not sure why something like a slide-down hover navigation with images like the one from Nest is shown as example. That’s the “fancy” stuff you do, when you built a menu around one specific product website, it’s not something you put on every IPS community by default. But I am not really interested in discussion all possible menu design patterns anyway. I just explained why the current menu behaves the way it does, i.e. why it can have an empty sub menu. 

 

[SJ77]

Just now, opentype said:

Of course I have. I just didn’t talk about that. I talked about the screenshot from this site he provided and they way websites normally behave. Of course there are no limits of what you can do with jQuery animations and whatnot, but even Greenman himself said “it's all about simplification rather than adding every bell and whistle under the sun”, so I am not sure why something like a slide-down hover navigation with images like the one from Nest is shown as example. That’s the “fancy” stuff you do, when you built a menu around one specific product website, it’s not something you put on every IPS community by default. But I am not really interested in discussion all possible menu design patterns anyway. I just explained why the current menu behaves the way it does, i.e. why it can have an empty sub menu. 

 

I realized how that sounded after I posted and edited. I had hoped you didn't catch my comment. However, thank you for the feedback.