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:

enter image description here

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

enter image description here

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

  • What does clicking the question do? You have to pick a question, THEN answer it? If so, I'd make the select text 'Pick a question'
    – DA01
    Jun 18, 2012 at 20:47
  • Yes, you have to pick a question and then answer it.
    – Olivia
    Jun 18, 2012 at 20:56
  • @yisela, my question is the bottom suggestion, with the refresh button, too unfamiliar to be usable? Is there another option that I'm missing?
    – Olivia
    Jun 18, 2012 at 20:57
  • Why would a user want/need to refresh the question? The answer to that might help figure out a solution. My immediate reaction is that I have to pick a question BEFORE I answer it, so why show the answer field immediately?
    – DA01
    Jun 18, 2012 at 22:20
  • What shall this feature secure? If there are only five different questions, chances are pretty good that someone will post the answers to those questions somewhere. What will be asked? Can you post an example question?
    – Michael
    Jun 19, 2012 at 8:11

2 Answers 2


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

  • 1
    Yes, it's a regulatory thing, and we have to build a UI around it, which isn't ideal, but we're just taking the harm reduction approach.
    – Olivia
    Jun 20, 2012 at 21:39
  • I think you're suggesting the first screen is for entering 5 arbitrary security questions, but @Olivia needs a UI for selecting 5 questions from a set of 25 (five per field).
    – Kit Grose
    Jun 30, 2012 at 14:04
  • I do agree, though, that the UI for selecting the questions seems best separated from that of answering them.
    – Kit Grose
    Jun 30, 2012 at 14:06

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.

  • 1
    Those are both interesting ideas, thank you. It's definitely a serious issue as far as the UX is concerned. I'm going to look into Apple's product pages to investigate that as an option, thank you for your suggestions.
    – Olivia
    Jul 2, 2012 at 18:30
  • @Olivia: There's an example on this page. Slide the hero image horizontally.
    – Kit Grose
    Jul 2, 2012 at 23:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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