What's a good scrolling hint for partial-page content in iOS?

Question

I'm developing an exercise app in which the bottom half (right half in landscape) of the screen is the "live" portion of the app. It runs a timer, along with a donut graph and counter showing elapsed time for each exercise. The upper half (or left half in landscape) shows instructions.

Having looked for similar questions there doesn't seem to be fit for a case where there's scrollable content (a table view) that only takes up part of the screen as in:

In this case, section C of the text directions isn't visible. A couple of solutions I've read about include:

1. "Flashing" the scroll bar (typically upon loading the page). That seems unreliable. What if the person isn’t paying attention right then? Also, there are multiple exercises so this would have to occur over and over.
2. A row of dots underneath (similar to the way the app pages are suggested on the Home screen. This isn’t quite what I want though because it’s linear along the wrong axis. And it is more for discrete views.
3. Arrows. Typically above and below but I’m loathe to give up real estate. So perhaps something like one of these:

Out of curiosity I tried #1 and as I suspected, it is unsatisfactory. Also, attempting to turn the vertical scrollbar on permanently didn't even work for me (not that I'd want that anyway).

Using arrows seems easy to implement and is what I'm partial to. But I'm open to observations and suggestions. Thank you.

UPDATE: FYI, I chose to implement the fade-out at bottom. There are several ways to do this, but for apps targeting iOS 8.0+ this worked best. It avoids any need to resize or position the mask!

// Add gradient mask to view
func AddGradientMask(targetView: UIView)
{
    let gradientMask = CAGradientLayer()

    gradientMask.frame = targetView.bounds
    gradientMask.colors = [UIColor.blackColor().CGColor, UIColor.clearColor().CGColor]
    gradientMask.locations = [0.8, 1.0]

    let maskView: UIView = UIView()
    maskView.layer.addSublayer(gradientMask)

    targetView.maskView = maskView 
}

In my case, I want to remove the mask once the user starts scrolling. This is done with:

    func scrollViewWillBeginDragging(scrollView: UIScrollView) {

    exerDetailsTableView.maskView = nil

}

where the view is defined as an @IBOutlet:

@IBOutlet weak var exerDetailsTableView: UITableView!

Answer 1

I encountered an issue similar to this with a shopping app where the cards for items were a perfect fraction of the page space meaning that the last item on the page in its default state ended just clear of the fold (page break). During user testing most users reported that there was a lack of items available because they didn't realise they could scroll for more as the page they saw looked complete.

I solved this by changing the height of the cards to ensure that the last item on the page in its default state always ended half cut off by the edge of the screen, making the users naturally attempt to scroll to see the rest.

Assuming that you're only talking about scrolling the text portion of your page, I've mocked up one way to force the user into wanting to scroll:

Of course, content that was too short to scroll should not run into the masked area.

You do also need to ensure that any longer content does not load with a paragraph space on the fold as this wouldn't necessarily mask correctly and may be taken as short content with no scroll

If it was your intention that the whole page should scroll then you could just as easily mask the bottom of the page instead or simply expand the text content at the top of the page to ensure that the bottom over-runs the page area.

Answer 2

From your image, the only cue that there might be more content below the fold is a missing paragraph explaining C - but that takes careful attention (notice there are A, B, and C in the image) and some inference (if there are explanations for A and B, there should be one for C as well).

Otherwise, the design indicates in several ways that this page is complete:

• The last element is the go-to-next-section button (at least that's what I think it does; I would not expect a video here)
• The image is shown completely.
• The text looks complete, since the image starts a new "category" of information.

Why is the explanation for C separate from the explanation for A and B, I wonder? I can think of a few other layouts which will probably reduce the issue:

• Put explanations of A-C first, i.e., move the now invisible C explanation above the image.
• Put the image first, i.e., move the A and B explanations below the image.
• Align image and explanation, i.e., split the image into three, and put image and explanation side by side.

Answer 3

I would suggest that you consider the way Apple does it: a More button. Below is a screenshot from AppStore, and upon clicking on it, the content will expand downwards. Apple uses this strategy in iTunes as well.

It isn't very easy to implement though, but I think it worth trying :)