8

What are the downsides of making that part with column-chart sticky (Always positioned to the top even when bottom part is scrolled down)?

Haven't met that kind of solution in any mobile app before. Thought that there may be good reason not to use that kind of design pattern.

App's mockup:

enter image description here

5 Answers 5

5

The big question is: what do you do when they change orientation? If you are taking up a large portion of the vertical real estate with a fixed object, you may leave little or no space for the other parts of your screen that you need people to interact with or see. So for that reason I would recommend against it.

If you have an app that doesn't allow an orientation change (I won't discuss whether this is a good idea or not here), then it all depends on how important that progress chart is to your app, and how likely your customers are to need to refer to it while they are at a point lower down in your app. If they don't need to, I would once again advise against it.

Overall I see very little benefit in doing this, with some big downsides, and would therefore avoid doing it.

2
  • In the case of the mockup, moving the graph to the left and scrollable area to the right of it seems like a fair solution. I agree about low benefits with downsides. If you want to try it out, make sure there is an option to disable and see if it's actually being used. If there's a way to gather metrics, see if users are scrolling back up to check the graph when it's not sticky, and mention that there's a setting to make the graph stick.
    – Rob
    Feb 14, 2013 at 17:20
  • Rob, I would suggest to test before production with and without stickiness but to ship only one version. Designers and developers have to make choices, this one is a design issue, not a user preference.
    – Geraud.ch
    Feb 15, 2013 at 10:04
4

I had a similar question a couple of weeks back when I wanted to keep the header constant as the header had a hamburger menu which when clicked had a slide out menu. The feedback I had from usablity testing and reviews from other designers was :

  1. They found it annoying that they lost a part of of the screen space to the header always and had to limit their viewing to a smaller viewport than already expected.
  2. Another thing which came out strongly was that users dont mind scrolling up and down and had no objections to scrolling to the top to find the header.
  3. Another feedback I got was that since most users are accustomed to tapping the status bar to scrolling to the top, there was no need to keep the header constant (note this is only an iphone feature and might not be applicable across other platforms)

I also recommend reading this article about sticky menus. While the article doesn't explicitly touch on their use in mobile apps,it does raise one important point about how they can prove to be an hindrance

DISTRACTING AND INTRUSIVE

If not done carefully, sticky navigation can be distracting. Some sticky elements get delayed when bouncing back into position as the user scrolls down the page. Others are so tall or wide that they dominate the layout and impede access to the content. Navigation should be easily accessible but should not compete with the content for attention.

Though your graph doesnt deal with navigation, it can end up being an annoyance as well since it would be constantly competing for attention with the rest of the content which the user is forced to scroll in a really small space

JohnGB answer about orientation issues with fixed positioning of content is also spot on.

1
  • 1
    Because there is no scrollbar in mobile pages, the header is often the only indicator that you are at the top of the page. In a regular desktop, you can glance at your scrollbar to judge whether you're at the top or not. This doesn't exists in mobile. For this reason alone I've been against sticky headers in mobile.
    – drawtheweb
    Feb 15, 2013 at 19:03
2

There is no general answer. It will depend on: the size of the fixed part, the height of the scrollable part and the importance (meaning) of both parts.

Actually this pattern is used in many apps but mainly for small fixed part so it seems normal.

UX-wise, if you go in this direction with a significant fixed part, you should consider to add a clue to the user to explain him that the bottom part scrolls: a litle animation of the scrollable part when the view appears can do the trick.

2
  • interesting, can you mention some apps where it is used. Never seen it so I am just curious
    – Mervin
    Feb 14, 2013 at 15:26
  • The stopwatch on the iPhone has a tableView on the bottom for the laps.The month view of the calendar on iPhone displays the month on top and the list of meeting for the selected day. And finally, the top bar uses this kind of pattern, except that it's navigation instead of content!
    – Geraud.ch
    Feb 14, 2013 at 15:54
0

It mostly depends how much you want to place below. If, as a result, user would have to struggle with a lot of scrolling to get to a functionality or content, then I think the chart whould not be sticky.

However, one thing that might be interesting solution for you, is implementing something similar to a reduced menubar on some websites that shows upon scrolling down. In this case you could "flatten" the chart, or even provide alternative or simplified form of representation of the data, like only one, horizontal bar for last day or sumarized for the week. You could even put it in the top bar (i mean a really simplified or summarized one) and let users invoke an overlayed, full chart upon tapping it.

0

It depends :)

Why I should always be able to see Sticky content?

  • how much scrolling I should do to reach the end of a screen?
  • is Sticky content is more important for me than non sticky one?

I think that if you'll answer those questions, you will automaticly resolve your issue.

Have you consider to show Sticky part depending on scrolling direction by user? ie.

  • As I'm scrolling down the Sticky part is fading out and allow me to see more information, content below (in assumption when I'm scrolling down i want to see/read more parts of screen...)

  • When I'm srcrolling from down to up, the Sticky part is fading in...

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.