Scrolling

Scrolling will discuss basic scrolling problems often seen in UI design, as well as best practices. Watch the video to learn more. 

There are a couple of basic scrolling problems we often see, and that you should be sensitive to. 

The first is horizontal scrolling, which is typically unnecessary. Unless the interaction is a carousel, a timeline, or an intentionally horizontally structured feature, you should not be seeing a horizontal scrollbar. 

Typically, we see horizontal scrolling because of inefficient data or column formatting, far too many columns have been added to a table, or due to a layout that's not correctly responding to smaller screen size. 

If actual users' workflows are not researched, it's all too easy to throw more and more data into tables. The table becomes more difficult to use, and performance may falter as well. We need to be disciplined about focusing on simplicity, initially showing only necessary data and providing prompts to secondary or rarely needed data instead. We can only do this if we truly are empathizing with our users.

In this example, we've done a better job with table column widths, and we've shortened some data display to be more efficient. Lastly, we've some made tough decisions on which data is truly necessary for this list. As this table should show critical data and then provide links to complete records or cases, we've pruned the data which now fits without scrolling. Additional details not typically needed by a user are linked to from the ID column.
You should also check your UIs on various sizes of screens. You can simply change the width of your browser window or use the browser's dev tools in "responsive mode."

There are a variety of technical scenarios in Pega that can lead to duplicate vertical scrollbars. These typically need a front-end developer to triage and fix.

One thing to consider regarding scrolling is how various operating systems handle scrollbars. The macOS by default hides scrollbars until a user hovers over them, while Windows shows scrollbars by default on all browsers. 

As many of us in professional software design and development use Macs for our work, we sometimes forget to check our work on Windows machines, or don't set our Macs to always show scrollbars, and therefore don't see duplicate scrollbars.

Check your knowledge with the following interaction.