Line breaks in form selections for mobile

Question

I'm laying out a mobile site that has an awkward screen for security questions. There are 5 questions, each with an input field for answers, however the questions are all too long to be displayed in one line and cannot be edited down.

To add further complexity, users must select one of 5 potential questions for each input field, so that means having a selector of some kind. The questions are really long, though, so either we:

Make the question selector area have a line break and be really fat, like this:

Or, do something a little out of the ordinary, like this:

Are either of these approaches suitable, or is there a better method I can go with?

Answer 1

I will momentarily ignore the fact that this is going to create a horrific user experience no matter what you do, assuming that there's nothing you can do about the five-security-question requirement, and answer your question.

I would suggest breaking it into two pages. Page one: Select your five security questions. Page two: Answer them. This will free up some space for explanations.

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

Answer 2

This is a nasty problem because you don't want to overload a given UI for an already complex/annoying form.

I think your second option is workable but not ideal; to me the refresh button implies randomisation (as in requesting a new CAPTCHA) but randomness among a set of five options seems silly.

You could hypothetically use a carousel metaphor for "sliding" horizontally through the options, but there's a risk it's not very discoverable unless you show a little bit of the next question peeking out from the side of the UI. Apple seems to like this UI control on its product pages on touchscreen devices, albeit normally only for pictures. If you like, you could mitigate the discoverability issue by putting arrows on either side of the question allowing the user to page through the options in place until they find the one they choose. This option might suffer a little from mockupitis once you factor in different heights of question texts, but seems fairly platform consistent.

One other alternative is to implement something like a workalike to the <select> element (mimicking Joel Spolsky's answer in layout); for each question you have "Select a security question", then a secondary list view for selecting a question from the list of 5 alternatives. This is a little modal and requires more tapping but seems most conventional as a UI, and sounds similar to your first UI.