Best approach for content inside fixed with listing container

Question

The following is a wireframe of a listing which I am working on and I have couple of questions that needs to be clarified. As you can see, this is a tiled listing and it consists of an image, some text ( a title, desc, etc ) and action buttons. My questions are as following.

1. In each of these boxes the title could be longer and the longer the text become, I face a problem whether to clip the text or come up with a different approach.

2. as for the action buttons too, there could be more actions and clipping is not an option.

3. There is an option where, a user could select multiple boxes in order to perform group actions. What would be the best approach to show the user that the boxes have a select state and the best way to show the user to trigger the select state. I thought of using a button over the listing saying "select" and when triggered, a metro style check would appear over each box where the user could select them.

What could be the best UX approach for such scenarios where the container width is fixed.

Answer 1

Product name very often happens to have an important information just at the very end. This can be e.g. version number or whatever differentiates one product from another. So, depending on the actual products here, truncating their names might be or might not be a good option.

Recommended

I would recommend extending the box vertically, if doing it horizontally is not possible, by breaking the title into multiple lines and showing additional row of icons whenever necessary (note that I have added action names, which I think may be important here as well). This may add some white spaces in some rows if there is a product box with more contents inside of it, but I think it is not a high cost here.

The last resort

To save some extra vertical space, you could consider right aligning what looks to me as a product ID (should it be short, of course), this way using the same line for the overflown title (left-aligned) and this ID (right-aligned). It may be not very elegant, but should it be just used in some corner cases, it is worth considering.

Then, if vertical space savings are very important and at the same time it is a really corner case that the title would extend the space provided for it, you can support it by showing a tooltip upon hovering over the title - again, not a very elegant solution, but allowing to save some space. Remember that it will not work on mobile, though, and that you would need to use a custom js tooltip, as the standard one does not work in all desktop browsers.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Is it important to keep the height of each of the cards consistent? If so than limiting the character count and adding ellipses at the end of the string works fairly well. This works better if the user can jump into a more detailed version of the card without shortening. One can do this with css on the web with white-space: nowrap; text-overflow: ellipsis;.

If the height of the cards can be variable then just let the title wrap as necessary.

Answer 3

When you're locked on 2 dimensions (width and height), meaning content is treated as secondary priority compared to a box size (which rarely is a good choice), what's left, is a 3rd dimension - depth. You can for example use solutions for when card/part of the card gets hovered:

• tooltips for shownig full title
• layer that is an expansion of a button area
• expanding the whole card (making it larger) and showing all necessary content

Answer 4

Truncating title is not always good, but some situation, for example, eBay has truncate the title of the product and limited to two lines on desktop view. It is all depend on the product and how important is the title/product name. For example, if the product is specific, minimize duplicate of the words in title. 1.canon DSLR 5D mark iii 2.Canon DSLR 6D 3.Canon DSLR 7D mark ii

In here "Canon DSLR" is repeating, if you are inside the particular product page you may not need to display the main category in each product title. That might help you to reduce the title length, if that is relevant to your scenario. It is good time to research on similar product dealers' websites.

1.5D mark iii
2.6D
3.7D mark ii

Answer 5

Think about the hierarchy and importance of each of these icons. Make your primary action larger anything secondary make as a hyperlink perhaps. You need to be careful with iconography. Anything that doesn't have a very strong metaphor (such as a mobile phone - for calls) can be interpreted differently by different people. For example, studies have shown that even though hamburger menus are ubiquitous having a label can have significant improvements in usability!

Hope that helps :)