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.

Sometimes a layout doesn't look great for all the different variations in data it will have.

For example:

Say you have a style set for the headings on a particular type of page, like a product page.

For almost all products, it looks great the way you have it.

But theres one product page where the heading is too long and causes an ugly line-break to occur. You cannot rename it to something smaller either.

At this point you have 3 options:

  1. Do nothing, just deal with it.

  2. Change the font-size for all product page headings.

  3. Change the font-size on a case by case bases when its too long for one line.

The bad thing about option 1 is most look great but some look awkward.

The bad thing about option 2 is you are degrading the look of all the pages (granted marginally, but still degrading) just to accomadate a few, seems like there should be a better way?

The bad thing about option 3 is the font size is not consistent, creating a less uniform look. Also this can get out of hand, like using inline styles, if you do this too much (or at all) it can lead to a real maintenance nightmare.

So whats the ideal choice? Is there an option I left out?

share|improve this question
    
Why does a line break in a product name cause the design to break and look ugly? If that's really the case, I think that the flaw you have is that your design is not flexible enough to handle a data-driven website. Can you post a screenshot of the offending page so we can see what this looks like? –  Charles Boyung Feb 23 '11 at 14:00

2 Answers 2

up vote 12 down vote accepted

Option 4: Customize the display of long headings

You might not be able to rename the product(s) with long names - but you can change the way that long names display.

Possible approaches include:

  • Truncate long product names at 60 characters, adding an elipsis (...)
    Variations: After how many characters should you truncate? do you look for a word break? Do you show a tooltip with the full product name?
  • Detect long product names and switch to an explicit style
    Variations: Use a smaller font size; insert a line break and force a two line heading
share|improve this answer
3  
+1, and yes, you do show a tooltip with the full title. –  peterchen Feb 23 '11 at 10:14

I don't think that there is an ideal solution. All involve some form of compromise. You just have to decide what you are prepared to compromise.

I think option 2 is the least worst solution as it retains consistency across the site/application which is probably the most important thing. Your users will expect the various parts of the page to be in the same place on every page.

Option 3 might work if you can ensure that the heading occupies the same "physical" space on each page. This might require having slightly more white space on the "normal" pages.

Option 1 is probably the worst option as it could give the impression that the page is broken in some way.

share|improve this answer

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.