Best practice for use of grid in the web (desktop browser) application, scrolling is the biggest concern

by TomR   Last Updated April 18, 2019 08:16 AM

Grid is the name for the extended table component, that allows the scrolling, ordering, sorting, grouping of the columns, allows to select one or more rows, sometimes allows to select single cells and that sometimes allows to edit cells. Cells can have quite complex editors (date/time, mask-edit, color picker, file loader, and so on). Usually there are quite complex grid components available from the component vendors.

My question concerns web (for desktop browser) application. There are 2 examples how the grid can be set up:

Grid is provided as the one component (e.g. as the React component/tag). The best use that I can imagine is: the grid component should fill all the remaining space of the page, strictly use the vertical and horizontal scroll of the page (and does not try to introduce its own internal scrolls) and that some parts of the component (e.g. fixed header row and maybe fixed footer row (with the numerical summaries for each of the column)) are position-fixed in the page so that they remain visible all the time. Does this usage description adheres to the best practices of the UX? Or maybe I should avoid the tabular grids in the modern web application (e.g. the list of panes in the stackexchange's question timeline is one example for alternative solution). Scrolling and absolute positioning of the header and footer rows are my biggest concerns.

I am developing application of the desktop browser. This application expects quite complex actions from the user that is why I don't predict that the application will be used from the mobile devices. Of course, I can provide the mobile version as well, but I don't see why users should use it.

Answers 1

I wouldn't say the examples you link are bad UX; they just show a table differently based on what you want to do with it. The virtual scrolling example works well for complex tables where you need to be able to see the columns for context. Yes, they are complicated for the average user, but the data they display are generally meant for people that want to see a lot of information at the same time. Preserving context, even if it means more 'clutter' on the screen, is in the end more helpful than having to scroll up just to get your table context back. Depending on your users, they may already be familar with horizontal and vertical scrolling tables, or you can teach them how to use them with good design. Sometimes it works better to make an interface complex, but easy to learn, rather than easy to use at the cost of being ineffcient.

The platform you design for is based on your users. Choosing the right platform is a balancing act, where you must make a decision based on what supports the needs and contexts of your users, but also fits within the constraints like technology and the business. Based on what you're describing, most users will likely access your application through a desktop, as it is simply more comfortable to use for long stretches of time and they need the additional screen estate to display more information. So, having a desktop-only application is acceptable in those cases.

April 18, 2019 09:13 AM

Related Questions

Devextreme Grid UX idea

Updated November 30, 2018 06:16 AM

When to bring in a scroll?

Updated April 12, 2018 03:16 AM

Ubiquity of Side-swipe gestures

Updated May 25, 2016 08:06 AM

Are scroll bars dead in 2019?

Updated September 09, 2019 15:16 PM