2

How can I reveal the full text where it's cut off with an ellipsis as per the image. enter image description here

I can wrap the text I guess but it's not ideal because it may make the UI ugly with different height list items.

Revealing it on mouse over is also not ideal because this has to work on touch screen devices too.

These items are links, so clicking it to reveal the text isn't really an option as such.

I'm totally open to any suggestions or alternatives. I assume there's best practices for this kind of left navigation situation so feel free to point out any obvious stuff that I'm clearly not aware of.

Thanks so much

John

6
  • 1
    I don't suppose you can make the entire list wider? or font size smaller Sep 7, 2016 at 16:26
  • Good point actually. It would be a very sensible solution in many cases. In this case however, I'd have to make it wider again as soon as a longer phrase came along. I don't have any control over these, they're dynamic and don't have a character limit. They're typically reasonable in length which helps I guess.
    – John
    Sep 7, 2016 at 16:33
  • 1
    for the record I don't think it would look terrible to wrap the text either, just keep the notification aligned with the first row of text Sep 7, 2016 at 16:35
  • You wouldn't vertically center the notification? Again, I take your point, it could be acceptable to wrap the text, it could possibly help too if I make all list items the same height, I can try and see. Would love to know best practice or if there's a standard better UX for this...
    – John
    Sep 7, 2016 at 16:44
  • My reasoning behind the notification alignment was so that the user can expect to find it in the same place for each row. I would worry that if you vertically center it they will have to search for it, and it's usually important that users don't have to "look" for notifications Sep 7, 2016 at 16:46

2 Answers 2

1

You could wrap text in two lines, see Material Tabs example for dos and dont's. While it's not the same case, the principles apply as well since it's about scanning and legibility.

However, based on your example, I'd try something different in terms of IA . I mean, you have desktops as taxonomy, then a list of desktop peripherals. Despite the implicit randomness which will kill any reasonable approach for your navigation (what if you have XA-2020088084084 Analogic Super Abaracadabra Booster in the Space Model 2a for People with Disabilities?), the elements of the taxonomy don't belong to the menu or navigation. They belong to the container (for example, a page or mobile view).

Thus, your question could be answered as follows:

Do not use the elements included in a taxonomy, and restrict the navigation only to taxonomies and nothing else. In your case: All Bundles --> Desktop --> [whatever taxonomy, if any].

And voilá, your problem disappears and your IA improved dramatically

1
  • Great, thanks. I'm really not sure how I can layout the elements of the taxonomy on the page because their can be quite a number of them. They are essentially just sub menu items but only one level deep is displayed at a time. The parent is the one with the chevron, it's always the immediate parent of the highlighted one. Anyway, I think I'll just allow the text to wrap because I've no idea how to layout an indeterminate number of navigation items on the page/mobile view without going vertical hence creating the same problem again. Further comments welcome if you wish; appreciated... thanks
    – John
    Sep 8, 2016 at 10:58
1

Two options here. Increase the width of the menu or decrease the font size. But the main point here is - should you place such long items in the sidebar menu?

You could create an additional navigation section and list them products there. This would will be beneficial if you have "featured products" etc.enter image description here

4
  • Thanks Ivan. Good point. Yea, I really dunno. I mean, where would they go? I think I need to learn some UX design.
    – John
    Sep 8, 2016 at 10:51
  • Added a suggestion to my answer Sep 8, 2016 at 23:12
  • Thanks Ivan. That really helps. I understand exactly what you mean now. Thank you for taking the time to explain. That is a pattern I will certainly adopt for other features (now that I see it and have had yourself and Devin explain, makes perfect since) but I'm afraid, and I hate to be difficult but it can't work for the problem at hand for the following reason: When I click one of the "additional navigation objects", all of the "additional navigation objects" will change. This would be confusing I think; open to correction? Continued in next comment.....
    – John
    Sep 9, 2016 at 10:33
  • The reason for this is because the original left menu is simply a tree structure. However, only the parent(top), current(highlighted) and immediate children(with badges) are displayed at any given time. Amazon do this here: goo.gl/57bCwU under the "Show results for" heading. I'm just going to let the text wrap as a solution but I wold love to hear further comments from anybody if willing. I’m intrigued. Thanks so much.
    – John
    Sep 9, 2016 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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