User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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.
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:
Using UI cards comes with other advantages, e.g. they can expand and shrink (i.e. Show more... Show less...) to reveal additional information.
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.
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.
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.
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.
See my mockup below:
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).
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.
download bmml source – Wireframes created with Balsamiq Mockups
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.
