3 Added Swift code showing how the accepted answer was implemented
source | link

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:

app screenshot

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:

suggest solution using arrows

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!

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:

app screenshot

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:

suggest solution using arrows

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.

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:

app screenshot

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:

suggest solution using arrows

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!
    Tweeted twitter.com/StackUX/status/728327815532322816
2 Clarification of app screen sections
source | link

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:

app screenshot

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:

suggest solution using arrows

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.

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:

app screenshot

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:

suggest solution using arrows

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.

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:

app screenshot

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:

suggest solution using arrows

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.

1
source | link

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

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:

app screenshot

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:

suggest solution using arrows

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.