Grid scrolling for better user experience

Question

We have an Intranet web page that displays reports based on some search criteria. The controls for the search criteria are at the top of the page and the report grid is the only content on the page. The grid will typically display more than 50-100 rows and will require scrolling. What page design is more appropriate from a UX perspective:

• Fixed size grid with vertical scrollbar and fixed headers.

  • The advantage of this approach is that when users scroll the grid vertically, the headers stay in place and always visible making it easier to understand the content of the reports. The filter criteria are also always visible and can be changed without having to scroll back to the top of the page.
  • The disadvantage is that the size of the grid has to be fixed and depending on the size of the browser window, two vertical and two horizontal scrollbars could be displayed (the standard browser scrollbars and the grid scrollbars). That could be somewhat mitigated because we know the screen sizes of the users and we can optimize the page assuming maximized browser window.

• Let the grid be sized based on the number of records.

  • The Advantage is that only the standard browser scrollbars would be displayed.
  • Disadvantage is that when the users scroll down, the headers and the filter criteria become invisible.

Note that we don't want to use paging because the number of records is not high enough to require that and the users generally don't like paging because it makes it more difficult for them to scan the results.

This might be somewhat of a subjective question, but it is very common and I think there should be a clear UX guideline on how to approach it.

Answer 1

As a general rule, you should avoid scrollbars within a page that already displays scrollbars. This is especially true of horizontal scrollbars, which you should try to avoid entirely.

Fixed column headers are always a good idea in a long, vertical scrolling list and I'd highly recommend that (if needed).

But, these questions of design are really dependent upon your end-user needs. You should ask some simple questions of the user base, ie:

How will users interact with the data? What are the primary tasks they will be performing?
What are the secondary tasks they will be performing? What is the frequency of task use? What data is most important to the tasks? (prioritization in display) Does the design help or hinder in these tasks?
Can less data be displayed and still be effective at meeting the user needs? If less data is displayed, what's the most effective way for the user to access it when needed? etc.

Once you have some of these answers, you should design specifically for the most common needs while still accounting for the others (use the 80/20 rule).

And, honestly the best way to ensure your user needs are going to be met is to get them to interact with what you're building and get THEIR input to inform your design BEFORE they need to actually use it.

Hold a cognitive walk-through with comps or use an actual prototype and see if your users can perform their tasks effectively and efficiently. The UI should enhance this, not hinder it. Where you find issues, you can update the design prior to it ever going live.

At the end of the day, you're designing for these users - include them and their feedback in the design process and you'll be sure to hit it out of the park!

Answer 2

让用户控制他们想要查看多少条记录。

Answer 3

The guideline is "Whatever makes most sense for the way it's used"

1. How are your users going to use the grid? After perusing the results of a search, will they often need to search again? or will they simply click on a result and continue into another area of the app?

2. Is the data easily read without column headers? ie.

   John Smith | CEO | GlobalMecaCorp | 3 Stanford Way | (043) 1233 1233

   vs

   1235 | 12312 | 1233 | 12301823 | A | ADX

Without knowing the answers to these, I'd err on the side of the idea that requires the least code, then watch how your users interact with it.

Once you see how they work you'll be able to see what optimisations are going to make their lives easier.

Lives made easier equals great UX.