Procore Horizontal Scroll Handle

✋ What is it?

This is a solution found in the Procore web app (enterprise software for construction). In Procore tables with multiple columns are horizontally scrollable. The tables have a small handle in the right top corner to scroll with ease.

🤲 How does this interaction or solution work?

Procore is a construction software app that is used as a system of record for multiple Construction Documents like Submittals, Requests for Information and Observations. These documents are heavily structured and usually contain a considerable amount of fields that results in broad table representations.

When rendering this data, the Procore web app uses fixed width tables that are horizontally scrollable. However horizontal scrolling is a non-optimal experience that can generate some problems with data parsing and interpretation.

To mitigate the issues that result from scrolling containers, Procore adds a small handle in the top-right corner of the table. Users can click, hold and drag the handle to control the horizontal scrolling on the table without relying on complicated scroll-bar interactions.

🙌 How does this interaction or solution work?

Discoverability, Optimized Real Estate, and Ease of Use.

Horizontally scrollable views are far from ideal. However, there are some cases in which is difficult to render information rationally without exceeding the constraints of the viewport.

In this case, Procore uses the small scrolling handle to allow users to discover that there's more content hidden behind the fixed container width.
The control itself is also helpful to interact with a table that otherwise wouldn't have a natural input mechanism for scrolling, especially if the user is using a PC mouse (a likely case in the construction industry).
This behavior is particularly important with an uncommon interactions like horizontal scrolling.

That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.