0

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.

enter image description here

  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.

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Thank you very much for the great explanation. :) one small question! I've updated my question, if possible please guide me on it as well. :) – Imesh Chandrasiri Apr 13 '17 at 5:01
0

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.

  • well some times these cards have detailed views and some times they don't and the width has to be consistent all the time. although ellipses can solve the text issue, what would be the approach for the action buttons. – Imesh Chandrasiri Apr 12 '17 at 17:04
  • You can either ellipsis the titles of the action buttons (terrible solution) or possibly only show the most important action and a 'more' button which is itself a dropdown with more actions. – Patrick Krawczykowski Apr 24 '17 at 15:02
0

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
0

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
0

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 :)

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.