I'm converting a really long survey from a web app to a mobile app. It's 250 questions long so I've divided it into logical sections to split it up a bit. The idea is a user is presented with a series of products from which they choose the ones they want to try.

The problem I'm facing is there is more information on product that's shown as a rollover in the web app. This isn't possible on a mobile device so I'm wondering if anybody would have any ideas to add the extra info in.

I could make each selection on the right bigger but I don't like having different parts of a tapable area do different things. Big fingered users won't thank me.

two versions separate versions of the survey


When presenting multiple options on mobile, width is often the first hurdle you'll run into.

Consider a grid structure of 2 columns, and each button having an icon that expands more information below it (with a drawer-like effect). - You will also need to make sure there is a gutter between the 2 items to avoid too many miss-taps, as well as sufficient height / "breathing room" within each button.

I realise you mention not wanting to force "big finger" users into an clumsy experience, but by limiting the number of items per row to 2 and ensuring the "more info" icon tap space is sufficient - you can make sure its not - users are far more comfortable scrolling and it doesn't ruin the flow as much.

  • Thanks for the answer. I tried your approach but the client pushed back and felt the first version was cleaner. Initially I preferred the second style but I think there are pros and cons of both – Donal Hanafin Dec 15 '14 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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