I'm consulting a Life Insurance company who plan to go mobile with their procedures on signing up for an Insurance product. This will be mobile on a 7" Tablet device, say Nexus 7 with 1920×1200 pixel resolution.

So typically, an End User will reach out to the Potential Buyer, pitch him the product and if the buyer is sold, he'll proceed to buy the product for the customer.

The criteria for acceptance is: Fewer Clicks and Taking Advantage of Screen Real Estate while still allowing enough space to not feel congested.

For Example, this screen had a lot of elements to incorporate as a whole.

Client Specified Form

With Material Design, this looks far better as a scrollable form, which the Agent can scroll accordingly and still feel it's the same page he's on while providing a good experience and not feeling forced to congest elements.

Updated Design

Now that you've got a basic idea, of what I'm trying to achieve out here, there's a challenge I have.

There are forms which go in detail on paper which specify the Health problems the Buyer might have. These are very minutely detailed and almost every row has a toggle that might activate another section is Toggle is set to ON.

For example:

Big ass form

How do I approach this?

  • 2
    by setting conditions...if in field A toggle is ON then grey out irrelevant fields and scroll to the fields that are relevant to the ON state of the original toggle switch. Or if YES then fill out this text area...I am not sure if you are asking UI question or UX....
    – Stanley VM
    Commented Sep 8, 2015 at 17:41
  • This is related to UX since as an entire form filling experience, it is essential to cut down in the terms of UI as well to automatically affect the way an Agent might fill the form differently while still avoiding the repetitiveness of the form. I understand a lot of UI work goes into the solution, but it all comes down to structuring the UI to directly improve the experience overall. Commented Sep 8, 2015 at 17:48
  • 2
    then yes, set up conditions as I have described, that will cut down the repetition. if condition a ( toggle ON ) then fill this and this ( relevant fields ) if condition B ( toggle OFF ) proceed until next toggle condition.
    – Stanley VM
    Commented Sep 8, 2015 at 18:15
  • Just as a note; you're not going to be able to "take advantage of screen real estate" on a 7 inch tablet vs. a paper form, and resolution doesn't matter too much for legibility. A 10 inch screen in landscape mode is about as wide as a sheet of paper (though only half height) and will likely feel more natural. Something to consider. Commented Sep 9, 2015 at 6:26
  • True. I do agree with that, PixelSnader. Unfortunately,the insurance company has come up with the 7 Inch Tablets so as a Freelancer, I cannot tell them to change the decision altogether. Commented Sep 9, 2015 at 6:54

2 Answers 2


Unless you are saving the data as it is entered it might be a better idea to break the form across a couple of pages. That way you could save the data on the server so it would not be lost if the browser crashes / tablet runs out of power. That would stop the user having to complete a huge form again.

You could actually break the form into quite a lot of specific pages and preload the next page and make it accessible by swiping giving a sense of flipping between pages very quickly.

  • 1
    The problem is, the requirement I mentioned. Splitting it into multiple pages might result in far more clicks than needed and might even disrupt the flow. I understand that it's a better way to get around it, but the company won't accept it AFAIK. Commented Sep 9, 2015 at 4:17
  • Also, not just as a Criteria, but I've been trying to break the form into a single page with multiple scrolls, saving and validating every field after they enter it, so it can be recovered. It just becomes too long of scroll or too many pages if the split approach is followed. Commented Sep 9, 2015 at 4:42
  • You could actually do it as one huge form but split it into what look like pages. You could use fieldsets to separate questions, including the optional sections, then use left/right swiping to move between them. Commented Sep 9, 2015 at 7:06

You could try doing it like a natural language form. This might be a bit challenging as it means changing the lengthy forms into paragraphs of sentences that seems interesting to read.

e.g. http://tympanus.net/Tutorials/NaturalLanguageForm/

What's good about natural language forms is this don't feel like forms and are easier for the user to fill out as the user reads

  • I don't think a huge form as the one I showed above will be easy to implement using NLF. For the diseases, it needs to be a multiple selection criteria. As far as NLF goes, I've learned that it works best if you need to select a Single Choice from the options. Commented Sep 9, 2015 at 4:20

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.