Matrix question type in mobile

Question

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:

^{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.

Answer 1

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.

^{download bmml source – Wireframes created with Balsamiq Mockups}

^{download bmml source}

Answer 2

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.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

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 :)

Answer 4

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".

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 5

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.

^{download bmml source – Wireframes created with Balsamiq Mockups}