Fixed row headings for a wide table on a mobile website?

Question

This question is a continuation from this discussion.

We have a very wide table with approximately 12 columns that lists a stock code. The first column lists the stock code and name and the remaining 11 columns displays all the further stock information (price, changes, trades, etc). As the table is so wide it will mean our visitors will have to scroll horizontally (especially viewing the site in portrait mode) to view all of the information.

Is the best approach to:

• freeze the first column so that when our visitors scroll horizontally to the right they will always see the company code/name, or
• do not freeze the first column so that when our visitors scroll horizontally to the right they will have to scroll back to the left to see the company code/name?

I have been trying to read through a number of Gestalt's laws of proximity references but I cannot see anything that mentions always keeping column headings visible when viewing related data.

What is the most suitable approach here?

Answer 1

It seems obvious that, when scrolling across a number of rows of figures, the user could easily get lost, and retaining the first column of company names would prevent that. It also makes it easier to scroll up and down as well and bring new rows into view.

The disadvantage of having "to scroll back to the left to see the company code/name" is considerable.

If the first column is quite wide though, in order to accommodate full names, there may not be a space to its right to show more than one or two columns of data, particularly in portrait mode. To make this easier, as the user scrolls right you could reduce the width of the first column so that it just ends up showing the stock codes. Expand it again once column two is dragged into view and scrolled right.

A possible enhancement might be to temporarily expand the name column with a long touch (or mouseover for non-mobile) — without moving the data shown on the right — to show the whole name.

[I'll edit in some mockups when I'm not on my iPad]