Should navigation clarity be sacrificed for length?

Question

I am working on a site that has two parts: global navigation with informational links and sub navigation for location specific links. The sub nav is only shown on pages related to a selected location.

Option 1 below is very specific but has long item titles in order to provide clarity. Option 2 allows for more space at the cost of causing confusion. I am also stuck on how to limit the last two sub nav options from the second layout without duplicating them from the global nav.

or

What is the best way to have enough information in navigation items for them to make sense without being too verbose?

Is it better to keep nav items long and switch to a compressed view when the screen is resized to save on header space?

Answer 1

The issue with "how should I name this"-style questions almost always comes down to being able to answer the question, "How much context will my user have when they encounter this?" If they have enough context you can be very brief, if not you need to be more verbose.

So in your example things like "Schedule" and "Instructors" are probably specific enough to be that brief, assuming that schedules and instructors are pretty similar across sub-categories of this site. Things like "teach" and "host" get a lot more vague, at least in the example images you've provided. "Teach" what? "Host" what? (Notice how the verbs are more vague than the nouns. That is almost always the case.) Now this may be perfectly clear by the rest of the content surrounding this menu, and if that's the case (here's where testing is your best friend) you're good to go. If not your challenge becomes how do you provide the missing context without getting too wordy, because you want your UI copy to be "snappy" not "clunky" and that usually means it needs to be "just long enough."

Answer 2

The first is clearer to me... but I'm not a user. Test which is understood better/quicker by your users. Beyond that, if the labels are/seem too lengthy, try to reduce the width by reviewing the typography and the design. For example:

1. Use lowercase. Uppercase uses more space (and is harder to read/scan).
2. Reduce letter spacing to gain some space. This might also reduce readability but that can be compensated with a more readable type face and a different use of color.
3. Be creative with the layout and color, marginally reduce paddings/margins in multple spaces so it will give a lot of space in total, use a background color that improves readability.

There are off course more things you can do but the more important message is that the used text and the design are both responsible for how well the site performs. Therefore design them together as one thing.