5

If I've 12 - 14 columns in a table to show on a page but there's not enough space to show all columns (let's say, there's only enough space to show 7 columns of the table), what is the solution for this?

I can make the page scroll horizontally but it's ugly and the last resort. Shrinking the font size of the table data only has rooms for 1 - 2 more columns at best.

  • What is the purpose of the table? And what is the user's goal when using the table? Some context would be useful :-) – SteveD May 27 '16 at 9:34
  • Table is to display data for the number of cars sold that month, with fields for customer name, contact, car no., salesperson, price and a host of other details. I can probably put a View More button that opens up a new page to show all the data fields vertically, but let's say that's not an option. So.... – Illo Yonex Illo May 27 '16 at 11:20
  • Ok - a more important question - who is the user? I am assuming this is used by the car business user. – SteveD May 27 '16 at 11:23
  • No, the people using it are the admin staff. :-) – Illo Yonex Illo May 27 '16 at 11:59
  • Sorry - that is what I meant, they are employed by the business – SteveD May 27 '16 at 12:01
3

Choosing a traditional tabular table, where each cell contains one piece of data, has advantages (easy to compare different rows) and disadvantages (lots of columns take up all your horizontal space).

Perhaps consider an alternative layout, e.g. UI cards:

enter image description here

Using UI cards comes with other advantages, e.g. they can expand and shrink (i.e. Show more... Show less...) to reveal additional information.

2

Have you considered to just show two columns? One with the values (contact, car no., salesperson, price and a host of other details), the second done with the customer name and values, but place a drop down to select each customer. This approach would preserve the vertical list of features so that you only need to select customers. Adding arrows would allow you to quickly scan each customer as their data is shown below.

enter image description here


To address: What if table columns cannot fit on webpage?

If, as you mentioned, the primary user need and flow is to display data for the number of cars sold that month, you could start with a table with the last 12 (or so) months and the total of cars sold for each month, then (upon month selection) drill down to the next interface titled by month (back/forward arrows on either side) and display detail by the next primary criteria, whether customer's name or else. A quick research session with users will help define the user flow and prioritize user needs. enter image description here

  • Interesting: You could supplement this with a count of the number of Sales above this. – SteveD May 27 '16 at 14:45
1

I have a similar situation right now and I did some usability research and found tabular cards is a good and organize way to go. Also when you have too much information is always better to group data in small pieces. users react better to data in Chunks.

enter image description here

That's why google material design and most of the modern UI's today are segregated by cards. it also helps to create affordance and minimize the use of too many buttons in some cases.

  • I don't really understand what you're suggesting here. Tabular cards are a way to not go? And what are tabular-cards? Can you provide some mockups to illustrate what you are, and aren't recommending here please? – JonW May 27 '16 at 13:11
1

See my mockup below:

  1. I would suggest to show the table in an iframe, which will definitely give you a horizontal scrollbar, but will prevent you from losing your point of reference on the page (if you scroll the entire page, you might 'lose' your navigation and layout).

  2. If possible, give (power) users extra functionality, such as the ability to reorder columns (by dragging them to another position) or the ability to switch columns on or off (through a secondary menu). Users who need to access the table frequently can customise the display in such a way that they can easily view the columns that matter to them without needing to scroll too much.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

0

This sounds like a classic spreadsheet use. Horizontal scroll is not a bad thing.

If something needs to be part of the initial display it should be on the left side of the sheet. If it is less important you can scroll for it.

Microsoft Excel and Google Spreadsheets allows some content to always be visible per row by allowing you to pin a certain number of columns to the left and scroll left to right in columns for other information.

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.