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 '12 at 20:47
  • Yes, you have to pick a question and then answer it. – Olivia Jun 18 '12 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 '12 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 '12 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 '12 at 8:11

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 '12 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 '12 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 '12 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 '12 at 18:30
  • @Olivia: There's an example on this page. Slide the hero image horizontally. – Kit Grose Jul 2 '12 at 23:13

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.