We need to display wide tables (10+ columns) on our new mobile website. Is the standard to:

  • Scroll Horizontally without any indication that the visitor can scroll to the right (like Google Docs) regardless of the device being in portrait or landscape mode, or
  • Scroll Horizontally with an indication that the visitor can scroll to the right? For example an ">>" or a blurred right hand column regardless of the device being in portrait or landscape mode, or
  • Force landscape mode and keep zoom at 100% with (or without) an indication of scrolling left or right, or
  • Force landscape mode and keep zoom at 20% (or small enough to view all columns) and allow the visitor to pinch and zoom their way around, or
  • something else?

At the moment we are mimicing Google Docs.

  • 2
    does this question provide you with useful answers? – JonW May 17 '12 at 10:53
  • Thanks Jon W, yes it is helpful in someways. The accepted answer to that questions poses whether our visitors need (expect) the same experience from full website to mobile website and the answer is "Yes" for my website. – rlsaj May 18 '12 at 23:58
up vote 4 down vote accepted

Google Docs is a pretty good starting point for any user experience inspiration, but I'd be inclined to say your second point would be the best possible option if it's practical.

If the information in your table is important and you don't want it to be missed, I think it's important to let the user know that there is more information available if you scroll. Blurring the side of the screen suggests that there is something else to be found, and also looks good, which always helps the user experience. I think it also panders to the curious side of people. I know if I see a blurred part of the screen, I want to see what follows! At the very least I'd be wanting an arrow, although you might find users would try and click on this, which isn't what you were asking for.

I definitely think your second option is the best solution, for usability and aesthetic reasons!

Have you though about a responsive layout or making it so the user can optionally expose data as they feel. I have found that limiting the amount of data a user can see to the bare requirements initially and then allowing them to expose additional columns helps improves the users experience. The responsive layout is another possibility allowing the table to dynamically show data based on screen width/orientation. The article below gives a good explanation.

http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/

  • We have a very unique situation where the minimum number of columns (or record fields) are quite long. Great example JeffH and the type of information are very pertinent to our issue. – rlsaj May 18 '12 at 23:56
  • The images in that article are 404 now, mind to include the important information into this post, before it goes away fully? – luckydonald Aug 2 at 11:42

I faced similar challenge to show good no# of columns on mobile devices. And I managed to produce something like below one.

enter image description here

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.