2

How can I arrange the data in a horizontal layout so that it manages increase in column widths. How can you manage such situations responsive design.

I want to make sure:

  1. Something that is technically feasible and justifies the effort
  2. Visual design maintains its balance

Background

The web app is used by a financial firm to review trade clearances for their employees. All employees must submit a Trade pre clearance which is reviewed by their superiors while approving.

UX

The supervisor get a list of TPC’s submitted by their subordinates. Onclick a modal window pops open and you see the trade details.

The contents of the modal have been carefully negotiated with the stakeholders and have no appetite on reducing content.

Also note, this app cannot be used on mobile

Design

Design for 1280px Screen ( company standard ) enter image description here

The standard of computer screen is 1280 px . If you see the center blue section, It has the meat of all the information contextual to the task. Most columns are fixed and don’t change in width , apart form Product name and Product type.

The product name could especially be very large and this destroys the balance of design. Since the modal is 70% of the screen size, so when product name is large we could increase its size and maintain single column. enter image description here

But this does not resolve the issue on iPad. This is the only way that comes to my mind. enter image description here

Other alternatives: Giving the largest columns 50% width and stacking them vertically and the remaining to be divided in the other half. enter image description here

Giving the largest columns 50% on first row. And arrange the bottom ones enter image description here

4

Since this is an app where users know what each value means, I'd clean it up and get rid of labels. Please note that labels are necessary in 99.99% of cases, but in this particular case where all users know what the values mean without reading a label, it will only add clutter and noise.

Additionally, I think the name is more important than anything else, followed by the action (in this case, BUY) and the amount. Everything else looks more like additional info they probably won't need in most cases. Also, in general financial apps use symbols right at the side of the stock name in parentheses.

So my suggestion is for you to rearrange the data displaying important information in a more prominent way, then additional info in a less prominent way, getting rid of labels. Like this:

enter image description here

Otherwise, your best bet would be to simply change the table layout from columns to rows and stack all rows one over the other. This way you may have a lot of room for the names (but it may look a bit empty on short names)

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.