7

We have a web application which will be used also on iPads.

In some parts content is long and users need to scroll.

On a pc it looks good, however on iPad scroll bars disappear after a few seconds. (This happens on both Chrome and Safari and according to developers it's standard behaviour of iPads.)

Flow of the app is going through each numbered bullet point. Always only one of them is expanded and users can scroll within that group (in the attached picture, "2." is expanded and there are hidden content beyond the red lines).

When scroll bars are hidden there might not be any visual indication that some of the content is hidden and less experienced users get confused believing the app is broken as some functionality is missing.

Is there a best practice to improve this situation making it more clear that additional content is available through scrolling?

Enter image description here

Improve this question
2
  • Do any of your users actually miss content because of this? Any mobile-literate user expects content to be revealed by scrolling, unless the scrolling limit is reached as indicated by whatever mobile OS they're using. Unless you have a specific user base, this is a nonproblem.
    – minseong
    Sep 29, 2021 at 21:27
  • 2
    Yes, we've already received complaints that some users can't find content in the app.
    – Máté Juhász
    Sep 30, 2021 at 1:51

3 Answers 3

Reset to default
10

How about using a multi-step form? It looks like you're essentially already doing this, just with an accordion.

stepped form
Source - Omkar Bailkeri

This would ensure the user always knew they could scroll (gotta get to that "Next" button) and allow the interface to control the flow of the form more easily. The steps could also be clickable, so the user could hop back a step if they needed to.

Improve this answer
5

Two options come to mind for me.

  1. To enforce the visual effect of content being available behind this 'wall', you could work with borders and/or shadows. This is also a rather common way of showing there is more to be explored. You can also look at Material Design to see how they approach this: Material design link on scrolling techniques

  2. You could make the scroll snap to a certain point so that the content in the scrollable area is cut-off by the parent encasing it. This give the visual feedback that more content is hidden behind this 'wall'. This snapping can be annoying if done too extreme. so that might be a down-side of this approach.

Improve this answer
2
  • 2
    Material Design does tend to clash with stock iOS app appearance - so while MD can be used for inspiration and example I don't think people should just try to recreate MD in an iOS app.
    – Dai
    Sep 29, 2021 at 19:45
  • This is the approach I most like. Unfortunately - as also commented before - it's not fitting well with ipad style
    – Máté Juhász
    Sep 30, 2021 at 18:38
1

You could add a notification that appears after a short amount of time when the users are not moving anymore which indicates that there is more content to be discovered.

Many websites use this pattern, so users keep scrolling.

It’s usually placed in the bottom middle of the screen and shows a scrolling finger, sometimes animated.

Improve this answer
2
  • 7
    To me this always sends the message, "Hey! You're taking too long! Stop reading or thinking about the content, keep scrolling!" It reminds me of those fields that say your entry is not valid as soon as you start typing, because you haven't finished typing the date or whatever
    – Carl Kevinson
    Sep 29, 2021 at 17:02
  • Yep i agree with you Carl, wording is important to not make the user feel like he is doing something wrong/strange.
    – Pectoralis Major
    Oct 4, 2021 at 10:01

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.