9

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.

mockup

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.

6
  • Can you update the mockup to show how the controls are shown? I am not able to figure it out with the current design
    – Mervin
    Nov 28, 2012 at 9:45
  • @mervinj good idea, I'll update it. Nov 28, 2012 at 9:48
  • 2
    I'd recommend looking at the Quick Return pattern as an alternative: androiduipatterns.com/2012/08/… Nov 28, 2012 at 17:08
  • 2
    You may have a look at Pinterest app for iPhone, they have almost the same idea (hiding top & bottom bars on scroll), personally I don't like the way it works cause I need to scroll in opposite direction to make the bars visible again. Play with it and it may help you to feel if you're right or not. Nov 29, 2012 at 12:20
  • @AlexeyPegov Cool! Thanks, I'll check it out! Hope it's the same in Android.. Nov 29, 2012 at 12:22

5 Answers 5

5

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:

enter image description here

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

enter image description here

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:

enter image description here

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

enter image description here

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.

1
  • 1
    Damn, that's pretty cool. And since it's a standard pattern in Google Now I don't see any friction regarding applying it our application. Thanks a lot for your input! Nov 29, 2012 at 17:33
5

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.

2
  • +1 Thanks for your input John, I really appreciate it! I've also thought about having the panel placed inside the scrollable list, as the first item of the list I guess you could say. I really get your arguments, and maybe this would be the more suitable approach. The usage pattern in our application should rarely involve a user first starting to scroll in the list to later initiate a search/filter, which would speak in favour of having the search panel as the first item of the list. Nov 28, 2012 at 10:29
  • Of course, the path has already been set for years by Apple for keeping fields like search at the top of the scrollable area. I know I've seen a couple apps with one or two other filtering-like fields up there as well. As for scrolling to the top, many touch screen interfaces have a scroll-to-top gesture just for that (usually tap the top of the screen).
    – Anthony
    Nov 28, 2012 at 15:30
1

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.

1
  • +1 you pose some good ideas, I'll look more into it. This view needs a good overhaul so any input is appreciated! Nov 29, 2012 at 10:03
1

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.

0

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.

Your Answer

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

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