Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

At the moment I am building a webpage where the main navigation is located on the side, not at the top. The page uses a CMS where the user can create own menu links. That means if someone enters a superdupermegahyperlongword as menu link, there is a space problem:

enter image description here

While the link length in that example is still quite moderate I think you get the point. Extending the with of the navigation is not an option.
One possible solution would be to simply wrap the link whenever it needs to be wrapped:

enter image description here

This approach might kinda work, but its ugly and probably hard to read – I think we can agree on that. Another solution would be to add an elipsis:

enter image description here

That is even worse that the forced wrap I believe because who clicks a link that is unreadable? The same goes for simply cutting off long links or fading then out instead of using three dots. While a fade might look better, its still not a good solution in my eyes.

Inspired by Apple (Facepalm time? I don't know) I had the idea to do it like that:

enter image description here

As long as the link will fit in the box when using a font size only a bit smaller than the rest, I will apply that smaller font size. Of course the font size should not fall below a certain size, so something like that shouldn't happen:

enter image description here

But then I can still use an elipsis or something like that.

What do you think of that solution – a good idea or not? Will the slighty different font sizes be irritating for the user?

share|improve this question
    
I've had this design challenge in the past and my answer has always involved telling users to not make long links :) So I'm interested to see what the answer to this is. –  DallonF Nov 1 '13 at 19:58
    
@DallonF Sure thats true, but sometimes its hard to avoid that. And while I don't think webpages need to play well with everything an unexperienced/lazy user does to it, I still think we should do our best to make the best out of it ;-) –  Sven Nov 1 '13 at 20:03
    
Understood! That's why I'm watching this question to see what the answer is because my solution was far from ideal. –  DallonF Nov 2 '13 at 13:33
add comment

2 Answers

First we need to answer the question: Is long menu item name error or not?

If long menu item name is error: a) add piece of code which validates menu item name when user inputs it; b) in runtime detect this and clearely mark it as error (or even not display this menu item at all) which causes user to correct the name.

If long menu item name is not error as for me the better solution is to wrap long name. This is the simpliest way as well as it is self indicating.

share|improve this answer
add comment

Adding to what Serg already posted.

Validation is KEY.

Talk to your designer or your experience guy, find out or limit the number of characters you can support (this is a design decision). Then follow pretty much everything in this post http://ux.stackexchange.com/a/46598/13276

Don't ever reduce font-sizes.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.