Should we be styling our scrollbars?

HTML & CSS
21

Not necessarilly true. The link’s man/machine interface must adhere to a certain set of long established conventions.[list=1][]The text of the link must be of a different color from the parent text.[]Non-link text must not be underlined.[/list]

Observe a usability test to see people’s reaction to web pages that break either of these conventions. Even if the link text is a different color, the initial reaction is that the user is not sure it’s a link. Watch, too, people trying to click on underlined text that is not a link. Testing proves people have learned to see underlined, blue text as being a link. They can and will learn to use your particular interface if they care enough to hang around. You made life harder on your visitor. Way to go!

As a graphic designer working on web projects, you absolutely must learn to apply affordance within established convention. There is leeway for working your artistic talent into the mix, but if you mess with the users’ expectations of how things work, you are degrading the site.

The web is interactive. There is a large discipline dealing with man/machine interfaces, and the graphic arts are a small part of the whole with only a small but very visible supporting role. The graphic designer for the web would be better served if he were studying engineering design or library science rather than graphic arts.

//edit: @Jason, we seem to be reading from the same scripture. :smiley:

cheers,

gary

22

It becomes a usability and accessibility issue when the author decides to fiddle with the appearance of the visitor’s UA scrollbar which maybe outside of the document flow. It is not advisable; a typical user should have control as to whether they want hot pink scrollbar buttons on pink scrollbars, not be ‘forced’ to view them, etc.

23

It’s called the WCAG. :rofl:

24

You guys make good points. I think I may try it on a site or two and see how it works out though.

But after reading your responses it does make sense that we shouldn’t be styling the scrollbars.

I still however want to bring up another question I asked earlier. Should browsers be styling the scrollbars or should scrollbars be uniform across a system’s OS?

When we open different programs we do not expect everything to be the same, so would it be reasonable for users to learn to not expect the scrollbar to be the same across different browsers?

I feel like one of the first things you are gonna say is that a browser styling the scrollbar creates the same problems as when a website does it, but if the browser does it (and does it well) than you really only have to get used to the scrollbar the first time you use the browser. And when you use any new program there is always those first few moments when you look around and get used to/familiarize yourself with the interface.

I also want to point out what I said before, about what if Chrome did nothing to the scrollbar except change the color from gray to a blueish tint that matched the rest of Chrome’s look? In my opinion, it would still be just as usable and look just a little nicer.

25

Should browsers be styling the scrollbars or should scrollbars be uniform across a system’s OS?

It should be dictated by the OS as it is now, that way everything uniform and therefore simpler from a usability/accessibility point of view.

When we open different programs we do not expect everything to be the same, so would it be reasonable for users to learn to not expect the scrollbar to be the same across different browsers?

No, a web browser is software that inherits generic styleing from the OS.

Saying that I’m of the opinion that if you want to do something then just carry on and do it. If you want to change scrollbars on a site then that’s your call.

Personally speaking, for something like scrollbars, I consider that part of the software/OS and outside the remit of a web page “design”. Styling such things is really just eye candy that the average man in the street couldn’t care less about, so unless it adds any value to the document you’re not really gaining anything.

26

Certainly. Exercise your design chops all you want. Do be kind enough not to inflict factors that impair usability/accessibility on the public.

But after reading your responses it does make sense that we shouldn’t be styling the scrollbars.

I still however want to bring up another question I asked earlier. Should browsers be styling the scrollbars or should scrollbars be uniform across a system’s OS?
You are confusing the window manager with the application.

When we open different programs we do not expect everything to be the same, so would it be reasonable for users to learn to not expect the scrollbar to be the same across different browsers?

I feel like one of the first things you are gonna say is that a browser styling the scrollbar creates the same problems as when a website does it, but if the browser does it (and does it well) than you really only have to get used to the scrollbar the first time you use the browser. And when you use any new program there is always those first few moments when you look around and get used to/familiarize yourself with the interface.
Again, you’re confusing disparate issues. At the application level, the user is dealing with a set UI. It is a constant in the user’s life. Should web authors modify the UI, the user is met with having to pause for a familiarization moment. You will have made your visitor uncomfortable.

I also want to point out what I said before, about what if Chrome did nothing to the scrollbar except change the color from gray to a blueish tint that matched the rest of Chrome’s look? In my opinion, it would still be just as usable and look just a little nicer.
Technically, the ‘browser’s’ scrollbars are properties of the html element and are style-able (with proprietary properties for now). Our point is that you should have compelling reason to mess with user expectation. The user is free to mess with his own. :slight_smile: For example, my window manager (icewm) allows for about 50–60 different themes out of the box, colors, icons, etc., for the windows that hold the applications. Further, Firefox for example allows the user to choose from among 100s of themes. In every case, the user learns his UI once. He is not hit with a different UI on each site he visits.

By all means, experiment; but test too. Don’t think that because it’s obvious to you that it’s just as easy for some guy off the street. Find out.

Parting shot: Unless you’re writing an ego site that will be oohed and aahed over by friends and relatives, never to be visited again, or you’re writing for a school project to be graded by your artsy-fartsy ‘web design’ instructor, be very conservative where user interaction is involved.

cheers,

gary

27

Yes we do. Any program that uses a different interface from the rest of those on your computer is going to be hundreds of times harder to use and will probably get deleted really quickly.

Fortunately you can set your browser so that all the scrollbars look how they are supposed to look by overriding any CSS and JavaScript the page supplies to change it with your own to change it back (assuming that the browser allows it to be changed at all).

28

While for me applications that don’t match the host OS and insist on using their own custom skins usually just piss me off. It’s why the first thing I do in Opera is switch it to “windows native”… Not that it’s windows native works right in Win7…

29
Off Topic:

Hey DS, off-topic but you mentioned a per-site JS-blocking in Opera… where is that?? I turn it off via Tools but haven’t seen/found a per-site… one of the few things keeping me with the Xul-Infested One is NoScript. Would be easier if I could off-on per domain in Opera

I still however want to bring up another question I asked earlier. Should browsers be styling the scrollbars or should scrollbars be uniform across a system’s OS?

Safari seems to bring its styles with it, whether you’re on a Mac or not. And Chrome’s (on Linux) gave me pause when I didn’t see any arrows, but just a bar. And two slightly different shades of grey. Bleh.

I let most of my stuff default to whatever Ubuntu comes with on Gnome (there are like 6 basic Gnome themes to choose) and many applications (anyone written with Gtk in mind I guess) look the same, but for example Chrome doesn’t. Opera doesn’t. Amarok, coming from KDE instead of Gnome, looks pretty different (but also basic enough that anyone knows instantly what the scrollbar is and does).

Mostly, it just has to match the basic look and feel enough to be recogniseable to the user so they know what it is and what it does and how it works. Chrome, Opera, and Amarok are generally recogniseable to me as a user so I don’t need to demand that they all look exactly like Gnome’s.

30

I believe Setting>Preferences>Content>Manage Site Preferences

http://help.opera.com/Windows/10.51/en/preferences.html#site

31
Off Topic:

Thanks… Not the right path in mine but I found it… but it’s not fun to configure. I’m just keeping JS blocked for now, and turn it on when a site I need demands it. I still can only turn them on for everyone though, not just that domain alone.

32

Why do people insist on making things harder for the users? People have enough problems, suddenly finding a site that “glosses” over the traditional and recognisable tradition of the scrollbars visual appearance will make people wonder if a scrollbar actually exists. Think usability people… give the visitor what they expect, and don’t deny them what they want… toying with the scrollbar or the cursor or other expected conventions will just damage the end users experience. Let’s also not forget the accessibility issues… people with vision disorders may not be able to detect that a scrollbar exists there (if it’s not how they expect it to appear), I initially thought “where’s the scrollbar”, so apparently did others here… and if the abled are questioning such stylistic attribution, things will likely be worse for the disabled. :slight_smile:

33

Amazing how often certain opera features that are plain as the nose on one’s face go unused.

Off Topic:

  1. you can drag and drop a button to handle it from the toolbar customization, this applies per site only.

  2. right click in a blank spot on the offending page, ‘edit site preferences’ - everything you edit in there, from scripting, plugins, masking, cookies, etc applies JUST to the currently displayed site.

Which is why I set plugins off globally, and turn them on site-by-site for the ones I trust.

34

Please, like anyone actually does that - how many web developers have even READ the WCAG, much less understood it?

Trust me, I share the disgust.

35

I’m proud to say that I have, in fact i’ve gotten so terrified about the state of accessibility online I’m making a stand to not knowingly give out (or allow) potentially inaccessible or usability damaging advice to go out unnoticed around here. If I see someone promoting bad practices I’m going to at least try and convince them to change their perspective, if only so other people reading the threads don’t start thinking it’s a good idea (thereby making things worse) - even if all it results in is me just giving out advice on deaf ears (no pun intended). I can’t wait for the European laws to come in making inaccessibility on commercial websites illegal.