What are the guidelines for scrolling and scrollbars?

What are the guidelines for scrolling and scrollbars?

Among the ongoing problems that result are frustrated users, accessibility challenges, and missed content. There are five essential usability guidelines for scrolling and scrollbars: Offer a scrollbar if an area has scrolling content. Don’t rely on auto-scrolling or on dragging, which people might not notice.

Which is better horizontal scrolling or vertical scrolling?

On the web, users expect vertical scrolling. As with all standard design elements, it’s better to meet user expectations than to deviate. When pages feature both vertical and horizontal scrolling, users have to move their viewport in two dimensions, which makes it hard to cover the entire space.

Why do so many people hate horizontal scrolling?

We know from user testing that users hate horizontal scrolling and always comment negatively when they encounter it. Customer satisfaction is surely reason enough to avoid horizontal scrolling. There are two other reasons as well: On the web, users expect vertical scrolling.

When did people start scrolling above the fold?

In the beginning, users rarely scrolled vertically; but by 1997, as long pages became common, most people learned to scroll. However, the information above the fold still received most attention: even as recently as 2010, our eyetracking studies showed that 80% of users’ viewing time was spent above the fold.

How tall should a scroll bar be on a laptop?

Similarly, the BBC mobile accessibility guidelines recommend 7mm × 7mm (inside an exclusion zone of at least 7mm × 7mm). Scroll bars are a bit trickier. The height of the scrubber reflects the size of the current viewport in relation to the entire page. A very long page can have a very short scrubber.

Why is the track not on the scroll bar?

At a glance, a two-screen-tall page can leave a user wondering if the track is the scrubber. Similarly, an inset border on the scrubber or the track can be confusing because that’s not how scrollbars look. If a user zooms the page, let the scroll bar zoom with it.

What should the contrast ratio be on the scrollbar?

In this case, I take adjacent to mean the scrubber ( scrollbar-thumb ), the scroll track ( scrollbar-track) and the page. That essentially means they should each have at least a 3:1 contrast ratio with each other. We should consider taking this further given the importance of this control.

What are the buttons on the scroll bar?

::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time). ::-webkit-scrollbar-thumb — the draggable scrolling handle. ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.

Do you hate horizontal scrolling on the web?

Although horizontal scrolling was one of the top-ten web design mistakes of 2002, I continue to see this abomination. It’s therefore worth warning against it again. We know from user testing that users hate horizontal scrolling and always comment negatively when they encounter it.

Why is it hard to scroll in two dimensions?

When pages feature both vertical and horizontal scrolling, users have to move their viewport in two dimensions, which makes it hard to cover the entire space. For people with poor spatial visualization skills, it’s especially challenging to plan movements along two axes across an invisible plane.

Why do people not see the horizontal scrolling?

No horizontal scrolling. One of the strongest findings from usability testing is how few people notice a horizontal scroll bar. Small screens. You cannot assume that all your site visitors have large monitors with maximized windows. If your app or site is likely to be viewed on a mobile device, you know you need to keep your tables small.

Which is the best horizontal scrolling web design?

One of the best horizontal designs I’ve ever come across, this site makes excellent use of labeling and easy navigation while delivering a ton of content that makes you want to look at each and every page. This may come as a no-brainer, but I’m going to mention it because it could also be too easily overlooked.