User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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:
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.
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 :
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.
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.
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.
It depends :)
Why I should always be able to see Sticky content?
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...
