Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am working on a tool for conducting surveys through the web. One of the most common question types is represented with a table, where the column and row headers form the question, and the rest of the cells are the answers.

For example, imagine the following questions:

  • Do you think David Beckham is famous for being an architect?
  • Do you think David Beckham is famous for being an artist?
  • Do you think David Beckham is famous for being an athlete?
  • ...
  • Do you think Westlife is famous for being an architect?
  • ...

They are usually grouped and asked together in a table like this: enter image description here

live example: http://www.surveymonkey.com/s/Z6TDKDZ

I would like your advice on how to make this question on a mobile device, or just a desktop device with a small screen. As it is right now, the table is unusable because it requires a lot of scrolling and the headers go off the screen.

Some ideas I already had but I am not 100% convinced:

  • Just ask a lot of yes/no questions, like the first example. This works, but can be very painful for the person who is responding.
  • Repeat the table headers (first row/column) every now and then, so that the information about the question is near to the place to respond. This makes the table even bigger and could result confusing, especially for the users with a large screen.
  • Freeze the headers (first row/column), so that when the user scrolls the table the headers remain in place. I think this is the best option, but I fear that it will be a difficult programming task and maybe it is not displayed correctly in some browsers.
share|improve this question
1  
What is the purpose of letting the table in your surveymonkey link be so gigantic? –  JOG Jun 20 '12 at 13:48
    
I mean, why so many questions and options at the same time? –  JOG Jun 20 '12 at 13:57
1  
I just made an exaggerated case, but too often clients ask questions that resemble this one. –  gimix Jun 20 '12 at 15:54
    
Thanks JonW for putting it in a better form. –  gimix Jun 20 '12 at 16:16
    
Thanks to all of you for your answers. None of them is 100% complete, but all of them are possible solutions. Thanks for your insights. –  gimix Jun 22 '12 at 14:56

5 Answers 5

up vote 6 down vote accepted

Using large tables in devices with a compromised screen size is never a good idea if you can avoid it. The user will easily get confused and lost in a matrix that stretches far outside the viewport.

This will cause a lot of problems, like locating all alternatives and also looking back at what you have answered on previous questions.

Instead I would suggest you break the table up into two lists, one list that holds the Questions/Your answers, and one list that holds the Alternatives.

This way the user can easily follow the flow of questions and can look back at what she answered on a previous question.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

mockup

download bmml source

share|improve this answer
    
I like this one, but would require a special widget to be able to select more than one response for every question. –  gimix Jun 20 '12 at 15:58
2  
Not a custom widget if the second screen is also a list with checkboxes, and a back button. –  sirtimbly Jun 20 '12 at 16:26

First idea that comes to mind is convert the columns to select elements (dropdowns). You'll end up with a list of names with a select next to each one with the same values inside.

But I think you should ask yourself whether you really want users on mobile device to complete a task like this :)

share|improve this answer

You can do it like this. You basically have the entire matrix, but you only see a part of it at any given time. Slide up and down to scroll between rows, slide left and right to scroll between columns (both row titles and column titles are fixed and don't scroll).

Of course, the switch shouldn't say "On/Off" :). Maybe "Yes/No".

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

What about allowing the user to swipe/scroll each row separately? It probably wouldn't work for all data sets, but it might be a viable option in some cases.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

I think the question set is too large too start with. Even on a big screen there are too many questions and alternatives at once. Not many will keep track of all the questions and options very easily.

Questions like this will not only test if I know what David Beckham is famous for, but it will also test my ability to focus, to keep many options in mind at the same time and even my ability to scroll the page vertically if my window is too small.

You had the idea to

Just ask a lot of yes/no questions, like the first example. This works, but can be very painful for the person who is responding.

You don't need to convert everything into Yes/No questions, but limiting the number of options and showing one or a smaller set of questions at a time is a great idea. To keep the overview, why not a progress indicator.

For big screens, you could have a Questions Per Page limit like 7, but show it one at a time in the smaller screens.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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