Have controls fade out on scroll?

Question

Background

In our application we have a list view of contacts. In addition to the list there is a filter panel at the top of the list which provides contact type filtering through a segment control:

And also a textfield for free search of contacts underneath the segment control. (Above this filter panel there is also a main tab bar, so in a nutshell there are three rows of interactive controls)

Problem

This filter panel occupies a considerable amount of space in the view port, compromising the amount of contacts visible in the list when the user scans it.

Therefore I'm curious about introducing the feature to fade out the filter panel when the user starts scrolling to later fade/pop it back in with a small delay after the user stops scrolling.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Question

My question really is whether this could be a good idea? Could it be good because it enhances list scannability, or is it possibly a bad idea because it could be perceived as obstructive or confusing when the panel keeps fading in/out upon scroll?

Disclaimer: I'm positive that many of you will think that I should perform an A/B-test on this to find the correct approach. This will of course be conducted if this idea is moved forward, to find the correct fading delays etc. But it's not possible as of yet, I'm merely interested in hearing theoretical/factual ideas from you whether or not it could be a good idea.

Answer 1

The pattern you are suggesting is similar to the one used in Google Now, which I think is great in terms of taking into account your motion instead of just fading out the controls. I would suggest you do the same.

The basic idea is this: at first, when you present the screen, your search box and other controls are fixed at the at the top, like so:

When you start scrolling down, your controls start to disappear, as though they were fixed at the top:

Now, as user, you know that scrolling down took the controls away from you. So to get them back you naturally want to go up. But instead of having to return to the top, as soon as you start scrolling up, Google Now starts to push the controls down, like so:

This way, you get the controls back very rapidly, now floating atop your content:

Now that you have your controls back, they will remain on top until you start scrolling down again.

This might seem a bit confusing but it's actually incredibly fluid.

Answer 2

I would argue that it's a bad idea, although an interesting novel one.

Having the view port bigger only when scrolling doesn't make sense, as the time when you really need space is when reading it - i.e. not scrolling. Additionally, having options appear and then reappear through a secondary action is likely to be confusing and/or distracting.

One possible improvement (but one with its own problems) would be to attach the menu and search bar to the inside top of the scrollable area. That way the user is more likely to feel in control of making it disappear, and will know how to get it back, while giving them a bigger view port. The problem is that they would have to scroll to the top every time they wanted to use it, and depending on the application this may be a bigger annoyance than a benefit.

Answer 3

What if as soon as the user holds his finger in the contacts region or begins to scroll, the menu becomes mostly transparent? I agree that if you have a long list of contacts, scrolling all the way up can be a poor experience. The good news is that on touchscreen tablets people don't seem to mind scrolling, while on websites about 75% of people don't scroll. I'd like to know how this translates to mobile phone apps, but I'm assuming people are less reluctant to scroll to find what they want.

From my personal observation, when I'm using iBooks for the iPhone and I want to search my library, it's always a pain point to search for the search bar and then remember I need to scroll all the way up to find it. The first time this happened I was confused because it didn't occur to me that the search disappeared off the screen when I scrolled down. So this problem is definitely a relevant one.

If the search and filters take up a lot of real estate, maybe you could have a tab that opens up with the extra features.

Answer 4

Be careful with this. For example, a news site I frequent on my phone hides the ads while you scroll (possibly due to a bug). Having the things flash in and out is quite distracting, nearly interrupting my scrolling.

You might be able to get away with a subtle, quick transition where the controls slide themselves into the top area during scrolling, but be careful of distracting the eye. Scrolling usually means the user is scanning for something, and that's a challenging visual task.

Another option is to condense the toolbar once the user has scrolled down. Many apps already do this, only revealing search on an up-scroll. I think Facebook also condenses things when you scroll down on the desktop app. The condensing is visually part of the scrolling, so it's less distracting. Obviously this depends on whether users are okay with scrolling back to the top to access the rest of the controls.

Answer 5

Well, i'd say having these in your face all the time is a burden,too much information at the same time at a tiny screen.

Let's think about it, how many times would a user click on a filter in a single session? i mean when you scan for contacts on this screen, what's more frequently used as a function and what's less. we might say: (important to less important) 1- Boxes at top 2- Concat lists 3- Search box 4- Feature filters.

Having all these at the same screen on a mobile device is too much cognitive load, you'll have to sacrifice at least one, and in this case it's the feature filters.

There is a way where you can always have them there but at the same time not hide them. At the upper right corner of the header, it feels natural and even more, it's a mental model.

Go the Facebook iPhone app, look at the filtration options on the upper right corner and include your features there, Sorting: A- Top stories B- Most recent.

I know you don't have a header strip, the one with the default iphone kit. but still you can have it and make the top level boxes scroll beneath it.