3

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!
4
  • well, instead of interrupting the flow you could simply put the image on top and then leave the text on a block below the image. Also, if the play button is for a video it should be a bit more clear, at least with a label "play video" or whatever. Please take a look to the answer I gave at ux.stackexchange.com/questions/91200/…. Although not your exact scenario, it's very similar and based on the same basic problem
    – Devin
    May 3, 2016 at 23:13
  • If I were you, I would simply change the line height and the distance between paragraphs. This would mean that part of the image would be below the fold and the user will know that he has to scroll to see more content. I don't think that you have to add anything else on the page. It has enough content, you don't need to crowd it anymore.
    – Phreak
    May 4, 2016 at 7:59
  • @Devin see clarification added to original post re: lower section of screen.
    – Stonetip
    May 4, 2016 at 14:01
  • @Phreak I can't ultimately control line height because the user has the option of changing font sizes for accessibility.
    – Stonetip
    May 4, 2016 at 14:04

3 Answers 3

4

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:

Version of suggested screen with end of text masked to stimulate a natural scroll response from the user

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.

2
  • I had briefly considered this and initially rejected it because screen space is scarce (at least without cluttering it) and I didn't want to obscure any text. But once the user scrolls I can make the mask disappear (and perhaps use it again for other cases where instructions exceed the height of the table view.
    – Stonetip
    May 4, 2016 at 14:07
  • In my original post there is code (for those so minded) showing how it was implemented in Swift.
    – Stonetip
    May 9, 2016 at 19:57
0

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.
1
  • I appreciate your answer and realize because I failed to clarify what the sections of the screen do that I wasted your time. Sorry about that.
    – Stonetip
    May 4, 2016 at 14:08
0

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 :)

enter image description here

1
  • Not a bad way to go in certain circumstances. In the case of this screen, half the view is always taken up by the exercise illustration (and it's accompanying controls). I could, if the user tapped "more" scroll to bottom, which wouldn't be too disorienting since there's rarely more than 40% of the content hidden. Will keep that in mind. Thanks.
    – Stonetip
    May 10, 2016 at 1:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.