I have a requirement in which I have to design a horizontal navigation with 6 menu items.The challenge here is some of these menu items are pretty long and if I tried putting all the menu items on one line, the menu will go beyond the screen width and one of the requirements was that the size of the container should not exceed 1024 pixels. So if I go with a design which is something like this:

enter image description here

Is it bad design or is it acceptable?

Unfortunately I can't change the names since they have been defined already.

  • 5
    Can you and your users easily read it? If so, yea, it's fine. It's also quite common. (whether you should use horizontal menus is a different debate altogether, though...) – DA01 Jan 12 '12 at 20:24

The issues this can cause are breaking designs and breaking expectations.

Often I see this as an issue with table headers; dynamic tables might occasionally have an unusually long header for one color, which doubles the size of the header. In the worst cases the table looks silly with the extra large header or the design is broken; the extra large header might break out of it's containing element in some way, ect.

If the design visually accommodates for the extra line I would only see a problem if it just plain looked odd; say you had a list of 10 single line menu items then one that's two lines. That's where it starts to look sloppy.

Try to keep menu names within a certain standard of length, don't have any one menu item stand out for being extremely long*.

If it doesn't look inappropriate and your users don't care, you're good.

*There are exceptions when you want a menu item to stand out, but generally this isn't the case

| improve this answer | |

With respect to UX, it's as simple as it is, try to get at least 2 or 3 target users and give them a task which needs some good navigation. If the users are happy with it and can finish the task easily - that is a good UX design as this all depends on the usecase. There is no rule that states you can't have 2 lines in navigation.

But when it comes to Aesthetics it might look little weird, but a little tricky design like making rectangular buttons which vertically stand will give room for 2 lines where ever needed.

| improve this answer | |
  • 1
    In my opinion, the quality of experience a user has while using an application isn't just defined by whether it's possible to finish a task. – codeinthehole Jan 15 '12 at 10:00
  • @codeinthehole: Yup you are correct , its too complicated to exactly define most of things in UX. – Pratheep ch Jan 15 '12 at 14:11

Brevity is good. If a user can refer to a menu item using one or two words - they will be able to talk about your application's functionality more effectively.

In all likelihood, your more frequent users will choose to shorten your menu titles whether you do or not. It might be worth considering how you can conceptually represent these items using a shorter description now; the longer (more verbose) titles can always be displayed using a tool-tip on hover.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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