Hello,
I am looking for advice, comments, thoughts on what would be the best / better UX in terms of a horizontal navigation that may be too wide to fit on smaller non-mobile browser-viewports.
Do you think it is a better UX to have the navigation break to a new line so that about 50% of it is on the first-line and about 50% is on the second line and then if that is to big break it at around 33% so that around a third is on a line of a total of 3 lines?
Or have each of the elements, links, in the nav decrease in width; thus, decreasing the width of the total navigation and through that way fit the navigation on smaller viewports ?
Your particular question (do halves or thirds) probably needs usability testing.
But if you are talking about mobile-mobile, like tiny-butt phones mobile, another possibility you should be looking at is simply
fewer menu items in total
This means restructuring who link to what and how users would reach a given area.
The simple/stupid method is used in responsive designs because everyone gets the same content: a “more” button. They use Javascript to hide all but the few most important menu items, and everything else is only available after clicking the More button.
If you have dedicated mobile content though, you restructure your navigation if it’s already quite big. Three, Four, Five items, not 10. There are some usability studies done by Nielsen Group that showed some companies, in their dedicated mobile sites or apps, removing many menu items and renaming some others so they could include more types of content.
I believe one example in the usability study was a responsive site called propublica.org, where at the time of the study, several menu items were simply removed on mobile.
On mobile, because screens are smaller, users do expect to click a few more times to get to stuff, and that’s okay. A click on a More button my bring up a dedicated page showing only more menu items, and from there the user has to click again to get to the page they could have gotten to with one click on teh Desktop version.
Hmmm interesting, I had heard of the ’ more-button ’ technique before. Although it is a solution, I am not comfortable implementing something dependent in js. Especially now that one can disable js in some mobile browsers, which I expect some users to do to possibly prevent data consumption.
I was talking about small viewport in desktop machines. Even though resolutions are getting bigger, multiple-window desktops are become more popular, too. And therefore, smaller browser windows / viewports.
Also, in the mobile breakpoints or mobile sites in my designs, I shave off much of the navigation as I have read studies and presentations whose conclusion suggest it— and I do, too.