3

In my mobile app, I have a "Profile" section that the user has to fill in. It looks like something like this

PERSONAL INFO SECTION HEADER (label)
 FIRST NAME (textfield)
 LAST NAME (textfield)
CONTACT INFO SECTION HEADER (label)
 PHONE NUMBER (textfield)
LOCATION INFO SECTION HEADER (label)
 COUNTRY (drop down)
 STATE (drop down)
 CITY (drop down)
PROFESSION INFO SECTION HEADER (label)
 PROFESSION (drop down)
INTERESTS SECTION HEADER (label)
 (lots of checkboxes)  

More precisely, like this:
enter image description here

However, in smaller phones, some content goes below the fold. Only upon clicking "save" (not shown in pic) does the user realize that there was something below the fold.

Sure, it has a scroll bar on the side but I'd like an idea for a more optimal layout to promote the presence of fields that go below the fold.

4

Too many screens

I feel your pain. With the madness of device proliferation, it's exceedingly difficult to know if an edge of content will be visible to encourage scrolling.

Enter the evocative shadow

I'm a big fan of shadows to indicate "more this way". It's a subtle device that users seem to instinctively perceive (in my tests at least).

Select list with shadow

  • This seems a better approach than showing a "down" facing arrow. What color do you use for shadow? do u use neutral gray or brand-specific color? – Little Child Dec 9 '15 at 10:49
  • About 50% #000 at the darkest point. – plainclothes Dec 9 '15 at 16:30
1

To indicate that content exists below the viewport, show some cut off at the bottom. See http://goodui.org/#15

  • 1
    If I understood the question, he's talking about variable screen depths that make it difficult to design so that something always peeks over the lower edge. Do you have a recommendation to circumvent that challenge? – plainclothes Dec 9 '15 at 17:24
0

As you fill each field in the form, keep in mind that when you set focus on any input field the on-screen keyboard is going to appear from the bottom, so everything will scroll up anyway. so tweaking the autoscrolling behaviour to center the current field that you have set focused to the center will keep the user from reaching the end of the form unless all the fields have been seen

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.