0

I'm working on the Wireframes for a Client Detail screen. The client info section is devided into 3 small sections on top.

enter image description here

The problem is the length of 3 fields marked in my screenshot can't fit in the width of its sections. I can't reorder them vertically because it will take up space of Quotes & Loans sections below, which is also important.

Is there any clever way to deal with this issue? Thanks :)

Update: I'll send my client the version below and Mike M's version. Thanks Mike M & dennislees for your help.

enter image description here

  • Do you have some basic truncation rules? – Mike M Jul 18 '17 at 14:51
  • No. The part exceeds the width will be displayed in a new row. There are cases that 1 section is displayed on 4 rows, and the others are displayed on 3 rows. The overflow part can't be hidden as well since if the part "abc.xyz" of email is hidden, user can't use that info. – tobetwobees2b Jul 18 '17 at 14:59
0

First, I would consider the ellipses overflow as @dennislees has mentioned.

However, you can also try floating (stacked) labels, from material design.

This will allow maximum width of your sections for long strings (and long label names if need be). You'll have the full width of each section.

You can make the labels a little smaller than the values, similar to how material handles this (don't go too small). And it looks like your fields are static, until selecting 'Edit Client'. Then the editable fields can show the underline.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

What about vertical space increasing?

Yes, it would add some vertical space. However, with some decent visual design efforts you should be able to keep it to a minimum.

Assume that your users will have to do some scrolling anyway, especially if there's lots of quotes and loans in the list below. There's often some tradeoffs for scrolling with list views anyway.

  • Wow! Thanks for the insight. I came up with another solution by categorized info based on its relations. Since I can't upload image in this comment, I'll update it in my post. – tobetwobees2b Jul 19 '17 at 2:31
0

Use CSS Ellipsis Overflow to Truncate Long Strings, and Make Better Use of Available Space

See the top answer to the question linked below for a suggestion for how to use CSS Ellipsis Overflow to deal with strings that are too long for their containers.

How best to display truncated links?

Also, in your mockup, in the top sections on the left and right, you have a lot of unnecessary white space to the right of the labels. Removing this will give you more space for long strings.

  • Thanks. I considered this as a viable option but was not totally convinved too :D The Email field is not applicable using this trick... – tobetwobees2b Jul 18 '17 at 15:13

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.