2

Here's my problem. I have one view on our web app that needs just a list to scroll, not the entire page. The rest of the views need the entire page to scroll. I have no idea what to do.

The old version of our app currently has a table view for this alphabetical list and when you click on a row, it drills down to another page. We are moving towards a cascading list and I have this problem where we have different scrolling behaviors on different pages.

What's the best practice here?

Scroll within pane

Full page scroll

  • Why not stay consistent and let the entire page scroll? – JOG Dec 15 '14 at 14:46
  • In the first view I posted, it would make a terrible experience if the entire page scrolled. The detail view on the right would be at the top of the page if there were thousands on the list. – themack Dec 15 '14 at 15:01
  • Why not stay consistent and let detail views of other pages not scroll? – JOG Dec 15 '14 at 15:07
  • How would you view the information on the second view? Have the form on the left scroll independently and have the info in the tabs also scroll independently? Then we pretty much have iframes. – themack Dec 15 '14 at 15:12
1

I get the feeling that the tabbed content on the right of your mockup is more important than the scrolling list on the left so why not use the gmail pattern of keeping the list of filters/labels fixed to the left (and they scroll independently as needed)

gmail fixed scrolling list

In your example, I would assume the list on the left shrinks as the user filters/searches suppliers. If all the items fit then there is no need to show the scroll thumb. If there are more items off the bottom of the screen then a scroll thumb appears...

scroll fixed list on the left

In cases where the loaded content is a known fixed size then loading it inline might be more clear to users...

loading additional content inline

  • I thought about that. What I am showing is only a fraction of the information that will go there. Below that contact information will be a notes function where someone can create notes that will be in chronological order. The other two tabs (rating and compliance) will have a lot of other information as well. – themack Dec 15 '14 at 15:14
  • Here is the full mockup. What I posted was dev. benmackiedesign.com/suppliers.png – themack Dec 15 '14 at 15:16
  • I see. So you could easily be in a situation where the content is so long that the selected item the content is tied to is no longer in view? – DaveAlger Dec 15 '14 at 15:17
  • Yes, and vice versa. The alphabetical list on the left could be so long (think thousands of suppliers) that when you click on "G" to jump down to suppliers that start with "G" once you click on the supplier you want to view, it would be way up at the top of the page. We showed this mockup to current customers and they were really pumped to see it like this and to be moving away from a huge table that drills down to another page. I am the only UX person and was only afforded enough time to do a few mockups before we jumped into dev. Now I'm in a pickle... – themack Dec 15 '14 at 15:20
  • How weird would it be if the content on the right followed the user down the page? – themack Dec 15 '14 at 15:27
0

Option 1: Scroll the page and fix the details area.

See this effect in action here and here, where the header is fixed to the top of the page when the content is scrolled beyond a specific amount.

Option 2: Use the page's natural scrollbars to affect only the list.

Similar to facebook newsfeed or timeline, where you can scroll the page using the page's natural scrollbars. The content area & left pane scroll up and down (loading extra content as necessary), but the header & right pane stay fixed and do not scroll.

Both these options will allow you to view any row in the list, while keeping the details area on the right always visible. Clicking a row on the list can affect the content in the details area without refreshing the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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